交互设计实例指导

交互设计指导原则：

为了更好的促进网站体验设计，应遵循以下原则：

一、输入控件的自动聚焦和可用键盘切换输入焦点。

二、可用Enter（或Ctrl＋Enter）键提交，确保和点击提交按钮的效果是相同的。

三、鼠标动作提示和回应：

对用户的鼠标定位操作，当移动到可响应的位置上时，应给予视觉或听觉的提示。

四、尽可能早的在客户端完成输入数据合法性验证。

五、根据应用场景决定在表单页面和提交后返回页面间是否使用中间过渡页面（加载提示）。

六、防止表单重复提交处理。

七、页面链接是打开新窗口、使用原窗口还是弹出窗口的原则：

首页上链接可以打开新窗口，而其他页面上的链接都应使用原窗口或弹出窗口。如果链接页面内容相对原页面来说不重要，是附属性质的，可以使用弹出窗口方式。一般情况下应该使用原窗口，把是否保留原窗口内容的权利留给用户。

八、尽可能少的排列可选项，尽可能少的安排操作步骤：

根据用户操作习惯安排尽可能少的操作菜单选项，同时要保证尽可能少的操作步骤。在不降低功能多样性的前提下减少菜单项和操作步骤是用户友好的设计。

九、操作逻辑无漏洞，保证数据是操作安全的。

十、用合适的方式标识用户和控制登录过程（可直接进入的URL）。

十一、用合适的颜色控制注意力。

十二、被中断的操作是可恢复的。

以上原则有利于避免发生不愉快的操作体验。

假定讨论的WEB页面都是功能正常，也符合美学观点的，但与以上原则有冲突。若发生这种情况，基于“实用的就是美的”观点，建议酌情放弃原先的美学观点与功能设计。

交互设计需要考虑的5个维度：

【易学性】

系统应该很容易学习，这样用户就可以快速开展工作。

【高效率性】

一旦使用即可提高生产率。

【可记忆性】

即使离开一个系统一段时间，之后重新使用这个系统，也不用一切从头学起。

【容错和错误预防能力】

最低的错误率，让用户很少出错，即使出错也很快能够恢复，必须保证不发生灾难性的事故。

【主观满意度】

使用起来令人轻松愉悦。

模块的交互设计详细指导：

一、页面打开原则

打开新页面：

如果设计者认为原页面很重要，在用户发出点击指令后还有使用上的价值，以至于不能被随便更新或覆盖。这种情形下，打开新页面。一般来说，只有首页才会处于这样一个地位，用户在首页上打开一个链接后，一般还会在这个首页上去打开另一个链接。比如首页包含极多链接的门户网站，或者搜索引擎的搜索结果页面。以前的搜索结果页面上的链接是使用原窗口的，后来他们意识到用户会反复使用这个页面，而改成打开新窗口了。

如果首页链接不多，就不必使用新窗口，这是用户友好的设计原则（极简原则）。

原页打开页面：

如果本页面与后面的页面有前后连续关系，建议应该使用原窗口，把是否保留原窗口内容的权利留给用户。

例如：博客的查看上一篇与查看下一篇。

弹出窗：

如果有这个页面内容比较少，比较独立，与这个页面某个功能是子级关系。这时候使用弹出窗口比较合适。主要用于紧急处理的事务窗口。

弹出框

二、搜索的交互状态

搜索一般由输入框+搜索按钮+类型（可选）组成；输入框与按钮在用户交互的时候应该有操作的多个状态形式区分（可参考表单交互状态与按钮交互状态）。

A、搜索框文本框的长度应根据需要适中显示，至少应提供显示10个中文字符的宽度，

B、搜索组件中使用的文本框必须为单行文本框，

C、点击输入框后，引导文字消失。引导文字应简明扼要，清楚描述内容、用途、搜索范围等，能成功引导用户完成任务。

D、对于有些搜索，尽量提供实时关键字信息智能匹配，方便用户搜索操作。如淘宝搜索，提供了拼音关键字模糊匹配，同时提供该关键字的数量以供用户搜索参考。（智能匹配的下拉菜单状态参考下拉表单交互状态）

1）拼写检查工具（比鸡本—笔记本）

2）预输入提示

3）高亮显示查询关键词

4）相关查询推荐

继续考虑查询结果呈现方式

1）搜索结果要呈现哪些内容组建？

2）说明查询了什么内容

3）显示搜索结果数量，这样用户才知道后面还有多少内容要看

4）搜索结果太多？窄化、在结果中继续查询

5）显示当前的排列方式

6）搜索结果异常或为空的处理方式

7）输入框失去焦点前后如果是空搜索的处理方式？

亚马逊是刷新当前页面；京东是给出默认搜索值，无法空搜索；凡客是把所有商品都搜索出来了。苏宁是如此：

某网站出现这般结果，把默认提示语句给搜索出来了。

点击后是无任何反应，各种方式的处理哪种较合理，可以自行判断。

三、表单的交互状态

表单风格尽量统一设计，应该有默认、输入、出错、成功四个状态。出错与成功及举例信息，最好能在表单的右侧或下面显示，方便用户判断当前操作是否正确。错误状态应该醒目，成功可以用绿色文字或成功图标表达。

四、表格的交互状态

表格由行，列，单元格三个部分组成。

表格由一行或多行单元格组成，用于显示数字和其他项以便快速引用和分析。表格中的项被组织为行和列。

A为表头;B为鼠标悬移状态;

表格的形式组合有多样,表头可以增加筛选功能、下拉，表格内可以直接添加与编辑，及展开。尽量考虑应用斑马线设计，利于阅读。

五、文字列表的交互状态

六、按钮的交互状态

【按钮交互状态】

按钮应该有默认、悬移、点击、禁用四个状态，每个状态应该各有区分，但必须尺寸一致。一般悬移和点击状态可以合并，禁用状态用灰调表示比较常见。

七、下拉菜单的交互状态

【下拉菜单设计规则】

同样应该有激活状态，选择下拉列表应该有默认，悬移，选取（根据实际功能需求选定）状态。并且可以扩展增加条件搜索功能。