交互设计实例指导.docx

交互设计实例指导.docx交互设计指导原则:
为了更好的促逬网站体验设计，应遵循以下原则:
―、输入控件的自动聚焦和可用键盘切换输入焦点。
二、 可用Enter (或Ctrl + Enter)键提交，确保和点击提交按钮的效果是相同的。
三、 鼠标动作提示和回应:
对用户的鼠标定位操作,当移动到可响应的位置上时,应给予视觉或听觉的提示。
四、 尽可能早的在客户端完成输入数据合法性验证。
五、 根据应用场景决定在表单页面和提交后返回页面间是否使用中间过渡页面(加载提示\
六、防止表单重复提交处理。
七、页面链接是打开新窗口、使用原窗口还是弹出窗口的原则: 首页上链接可以打开新窗口，而其他页面上的链接都应使用原窗口或弹出窗口。如果链接页 面内容相对原页面来说不重要,是附属性质的,可以使用弹出窗口方式。一般情况下应该使 用原窗口,把是否保留原窗口内容的权利留给用户。
八、 尽可能少的排列可选项,尽可能少的安排操作步骤:
根据用户操作****惯安排尽可能少的操作菜单选项,同时要保证尽可能少的操作步骤。在不降 低功能多样性的前提下减少菜单项和操作步骤是用户友好的设计。
九、 操作逻辑无漏洞，保证数据是操作安全的。
十、用合适的方式标识用户和控制登录过程（可直接进入的URL X
、用合适的颜色控制注意力。
十二、被中断的操作是可恢复的。
以上原则有利于避免发生不愉快的操作体验。
假定讨论的WEB页面都是功能正常,也符合美学观点的，但与以上原则有冲突。若发生这 种情况，基于"实用的就是美的"观点，建议酌情放弃原先的美学观点与功能设计。
交互设计需要考虑的5个维度:
陽学性］
系统应该很容易学****这样用户就可以快速开展工作。
【高效率性】
_旦使用即可提高生产率。
冋记忆性】
即使离开一个系统一段时间,之后重新使用这个系统,也不用一切从头学起。
【容错和错误预防能力】
最低的错误率,让用户很少出错,即使岀错也很快能够恢复,必须保证不发生灾难性 的事故。
【主观满意度］
使用起来令人轻松愉悦。
模块的交互设计详细指导:
—、页面打开原则
打开新页面：
如果设计者认为原页面很重要,在用户发出点击指令后还有使用上的价值,以至于不能被随 便更新或覆盖。这种情形下,打开新页面。一般来说,只有首页才会处于这样一个地位,用 户在首页上打开一个链接后,—般还会在这个首页上去打开另一个链接。比如首页包含极多 链接的门户网站，或者搜索引擎的搜索结果页面。 接是使用原窗口的,后来他们意识到用户会反复使用这个页面,而改成打开新窗口了。
如果首页链接不多,就不必使用新窗口,这是用户友好的设计原则（极简原则X
原页打开页面：
如果本页面与后面的页面有前后连续关系,建议应该使用原窗口 ,把是否保留原窗口内容的 权利留给用户。
例如：博客的查看上一篇与查看下一篇。
弹出窗:
如果有这个页面内容比较少,比较独立,与这个页面某个功能是子级关系。这时候使用弹出 窗口比较合适。主要用于紧急处理的事务窗口。
弹岀框
二、搜索的交互状态
默认状态
当前输入状态
xie
廷子莊女
约4 030947个宝贝
鞋柜
约240063个宝贝1
鞋子男
约4 086035个宝贝
约167481个宝贝
鞋子鞋韩版女潮
约64 073个暫
廷子男韩版
约407502个宝贝
鞋柜靴子
约767汗宝贝
约209528个宝贝
廷柜 shoebox
约3925个宝贝
约4704 862个宝贝
信息匹BBU态
搜索一般由输入框+搜索按钮+类型（可选）组成；输入框与按钮在用户交互的时候应该有
操作的多个状态形式区分（可参考表单交互状态与按钮交互状态L
A、 搜索框文本框的长度应根据需要适中显示,至少应提供显示10个中文字符的宽度,
B、 搜索组件中使用的文本框必须为单行文本框,
C、 点击输入框后，引导文字消失。引导文字应简明扼要，清楚描述内容、用途、搜索范围 等，能成功引导用户完成任务。
D、对于有些搜索，尽量提供实时关键字信息智能匹配，方便用户搜索操作。如淘宝搜索, 提供了拼音关键字模糊匹配,同时提供该关键字的数量以供用户搜索参考。（智能匹配的下 拉菜单状态参考下拉表单交互状态）
1）拼写检查工具（比鸡本一笔记本）
2）预输入提示
久比
比基尼
在济衣分类中搜索
在***用品分类中搜索 比度克 比莉华 比亚迪 比利时巧克力 比基尼泳衣
比利时
比度克bedook
比坚尼
比亚迪f3
关闭
3）咼兄显不查询关键词
“笔记本”搜索结果（6220）
相关捜索：华硕笔记本宏基笔记