网页交互设计 规则 第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位的手机号,系统不会报错,等我输满整个输入框后,系统就开始反馈错误,然后我需要一个一个删除,重新输入。