为什么写这个？

1. 做过几个产品项目之后，我就萌生了这个想法，有没有一些交互设计是产品中通用的设计，我做这一次
2. 1.系统性的专业知识框架整理，一方面对知识做完整的积累和掌握，一方面发现自己不足，不断提高弥补。
   

1. 2.为即将转行和成长中的交互设计师，在繁多复杂的知识中得到系统方面的内容，能够掌握产品必备的设计需求，快速走上学习进阶之路；

1. 3.搭建这个知识框架，找到产品设计交互基础的共性，有必要了解产品设计中使用设计模式及案例，有一个完整的架构，能让我们更容易理解和思考产品设计方法，让产品设计有规律所寻，有方法可用，让产品更简单快捷。

交互设计知多少？

绕不开的一些话题!

问：什么是交互？

答：人跟机器沟通交流的语言方式，通过传入传出行为，透过界面反馈，使人与机器达成相互协同的目的，最终实现交流。

问：什么是交互设计？

答: 通过对人的行为理解，让机器更贴近人的交流方式，智能、快速、准确的和人进行交流，提高机器行为的设计，就是交互设计。

问：交互设计要素。

答：通过环境、人、机器、三者关系，进行分类方式，大致分为

（1）人机交流带来的交互，人通过传入数据，得到机器的反馈行为，宗旨以用户为出发点，能够平衡用户需求和商业价值的交互设计。

（2）机器与环境带来的交互，在特定环境下，机器根据场景的变化或者外界发生变化，系统告知的反馈信息，多以情感化设计最主，不要让用户感知到在跟冷冰冰的机器在沟通，这是产品成功的关键因素之一。

人、环境、机器三者之间的交互行为，是构成产品的关键，所有产品必须遵循这一原则，使机器贴近人，使人便捷操作，使应用环境更具体。

一.基础交互设计--页面交互

产品中最基础的交互方式，页面内容间的相互跳转，最常见也是最直接的交互方式，几乎占产品交互80%的设计思维。看似简单的方式也是有很多种不同的方式。

1.侧滑

当页面间存在父子集关系的时候，也是最常见到的一种转场交互。基本看到这样的动效，用户就会在头脑中自动形成归属模型—多用于层级间的相互关系。

2. 弹出

当用户将部分注意力集中在内容信息本身上，信息不足或者展现形式上不符合自身要求，临时调用工具对该页面内容进行添加、编辑等操作。在临时页面停留时间短暂，只想快速操作后重新回到信息内容本身上面—多用于信息辅助页面。

3. 渐变放大

页面展现了很多同等级 信息， 平铺了照片或信息 ，用户需要 详细查看具体细节及内容 ，在快速浏览和具体查看之间轻松切换。 渐变放大与左 右滑动切换 交互最 区 别 是，前者大多用 于 显示信息的面板中，后者主要用于罗列 信息的表单中。信息的面板中左右切换进入详情总会给人一种不符合心理预期的感觉，违背了人们在物理世 界中形成的习惯认知 。

二.基础交互设计--对话框交互

对话框分为模态弹窗和非模态弹窗两种，两者的区别在于需不需要用户对其进行回应，他们的共同点是都出现在页面最顶层，伴随半透明蒙层，用于聚焦信息展示。

1.提示框（ Toast ）

Toast提示框是非模态弹窗，他弹窗一条信息，表示当前操作信息反馈或状态的变化情况，多已简单位置展示。出现位置多变，上中下均可，根据产品情况而定。

2.对话框（Dialog）

Dial og 对话框 是一种模态弹窗 。当用户触发敏感操作行为，或者系统发生较严重的状态改变时，让用户知晓当前状况 或 需要用户操作进行功能选择。一般情况下Dialog由标题、信息内容和功能按钮组成，一般需要用户进行操作，才能完成。

3.操作框（Dialog）

Actionbar功能框可以看成是Dialog的一种延伸设计，两者都是模态弹窗，用户需要进行操作回应，否侧不会自动消失。比Dialog拥有更多的功能按钮，提供给用户更多的功能选择，一般设有“取消”功能按钮，点击该按钮后关闭操作框，用户点击弹窗以外的区域时相当于进行了点击“取消”功能按钮的默认回应。

4.提示对话框（Snackbar）

Snackbar是Android平台特有的交互形式，它也用于向用户反馈信息，但其打扰程度介于对话框和提示框之间，他通常是由系统发起的，信息和功能按钮组成，提示信息自动消失，如果操作功能按钮，就进入对应的操作。

三.基础交互设计--特殊情况交互

app与服务器进行数据交换过程中，由于服务器自身处理数据情况或因网络因素等，传出数据可能没有那么顺畅，这就需要系统内设最优的方式告知用户，防止用户焦虑的等待，适当的情感化设计，增加使用产品的乐趣。

1.数据加载

面对不同数据的处理方式，反馈到界面呈也会有不同，漫长的数据加载，在网络不畅情况下，产品处于瘫痪状态，这样对用户来说是最糟糕的产品设计，怎么处理好界面加载设计，保证体验无缝衔接，保证用户没有漫长的等待感，而可以轻松自在的享受等待。

2.网络加载

用户在使用App时，除了正常的使用场景，还会碰到许多特殊场景：因为环境变化，空间变化，网络发生异常变化，产品会根据不同情况调整用户体验，给用户最优感受。

3.缺省页面

缺省页，简单来说缺省页就是操作异常状态下给予用户反馈的提示页面，或无数据，或操作失败等情况下出现的 ， 它的作用不仅是提醒用户，安抚情绪；更重要的是用“空白”触发用户的操作行为，营造良好用户体验。