网页交互设计 规则 第1篇
交互设计是用户体验设计的关键环节之一，影响着产品关键数据的转化效果。交互设计的5层模型是指基于交互设计底层逻辑的5个维度进行设计。
其中，交互规范通常在框架层和结构层两个层面体现。
搭建顺序是：把界面元素（按钮、字体、图标等等）按照适合界面规格的方式，组合成控件（导航栏、列表、输入框等）；再按照业务把控件在页面中进行布局，构成完整的交互界面。
交互规范需根据不同的产品属性搭建策略及规范都有所不同。
网页交互设计 规则 第2篇
对于输入，有文本输入，数字输入，图片输入，语音输入等，以文本输入的输入框为例，简单列了一些输入限制需要考虑的问题，比如：
这些问题都是定义交互设计规则时需要考虑的。
比如大众点评：
还有一个很有意思的是 ，输入超过15个字后，右下角的文案提示发生变化，期望通过积分奖励的方式来激励用户输入详细的评论。
比如微博：
比如 TIM：
它的聊天对话输入框，默认输入框高度为第1张图所示；
输入内容超过一栏的时候，输入框会随着输入内容的增加而变高，如图2；
但是当高度增加到一定的程度的时候，就不会继续增加，而是将一些输入内容隐藏掉，而对于隐藏掉的内容，会显现一半，告诉用户可以上下滑动查看内容，如图3。
网页交互设计 规则 第3篇
我觉得可以把一些非正常状态称为特殊状态。比如页面被删除，无网络，加载失败，空白页，系统错误，页面刷新状态等都称为特殊状态。
从用户触发操作开始到结果页，我们可以根据一个判断的逻辑来确认我们还存在哪些页面。
举个例子，对于没有网络的情况，针对不同场景，有不同处理情况。
比如可以用 toast弹框提醒用户当前没有网络；还有用小插画的形式告诉用户当前没有网络；另外像TIM和微信在断网的时候通过状态条告诉用户没有网络。
简单理了下这几种断网状态的区别：
其实关于空白状态页还有刷新状态页，也有许多值得考量的地方，比如局部刷新，全局刷新，加载刷新，下拉刷新，上拉刷新等等，大家也可以自己研究研究。
网页交互设计 规则 第4篇
在操作过程中得不到反馈，出错后再重新填写，同样会增加操作的复杂性。在尼尔森十大可用性原则中，第一原则就是系统状态的可见性。系统需要让用户知道自己在做什么，需要让用户知道系统做了什么。例如：在表单填写时及时反馈是否出错，在格式设置时及时反馈是否生效，可以让用户少走弯路。必要时给用户提供帮助也能简化用户操作的复杂性，提高操作的成功率。
网页交互设计 规则 第5篇
我们需要先设定一个默认状态。
常见的要设定默认状态的：有在进行表单里的单选框设计的时候，根据我们可以获取的一些用户信息，给用户一个默认选项，当然这个选项最好是能够符合用户真实情况的，这样能够减少用户的操作；
再比如默认文案，当用户未输入昵称和个性签名，或者未设置头像时，我们可以给用户一个默认的昵称，个性签名，头像。
再比如默认键盘，当输入一些数字信息（手机号，银行卡号等）的时候，我们需要定义一个规则，让系统调出数字键盘。
还有默认排序，比如搜索结果等列表页，有一个默认排序，那这个默认排序是按照什么样的规则进行排序的呢？也是我们需要定义好的。
还有默认选中，对于一些「同意XX协议」等，我们是否需要默认帮助用户选中呢？这也是需要按照场景来定义规则的。
如果我们没有在原型旁边备注这些说明，可能程序员就会开发出一些很不友好的交互。
网页交互设计 规则 第6篇
拿按钮来举例子，针对iOS平台，android平台，WEB端，按钮类型以及按钮能够呈现的状态会有很多区别。
比如 android平台，按钮有 normal，hover，focused，pressed，disabled状态等等。（关于 android按钮设计规范可以阅读 Material Design）
举个我觉得体验不好的例子：
而它的输入框也是很典型没有定义规则，我可以在里面输入超过11位的手机号，系统不会报错，等我输满整个输入框后，系统就开始反馈错误，然后我需要一个一个删除，重新输入。