人机交互 界面设计一般原则的实践案例.docx

人机交互 界面设计一般原则的实践案例.docx

《人机交互 界面设计一般原则的实践案例.docx》由会员分享，可在线阅读，更多相关《人机交互 界面设计一般原则的实践案例.docx（12页珍藏版）》请在冰豆网上搜索。

人机交互界面设计一般原则的实践案例

实验三界面设计一般原则的实践案例

【实验目的】

通过上机实践体会界面设计的一般原则，从而增加对相关的界面设计模式的理解。

【实验环境】

IE5.0以上,可以上网。

【实验要求】

参照实验指导给出的界面设计案例，自己去发现符合界面设计原则的案例。

案例来源可以是任何可以获取到的系统或应用。

例：

淘宝、XX、新浪、QQ、微信、人人网、相关网关、游戏、移动应用等。

尽可能是找正向案例，如果有合适的反向案例也可。

将“你的发现”记录下，有图有文有真相。

【实验指导】

（一）界面一致性

设计模式

界面设计在同一个系统内保持一致；界面设计与常用软件、用户使用习惯保持一致

⏹同一系统内界面用语保持一致，每种概念和用语只有一种表达

文本

含义和行为

是否出现在按钮上

是否出现在菜单上

热键

快捷键

OK

接受输入的数据或显示的响应信息，关掉窗口

Yes

No

None

or

Cancel

不接受输入的信息，关掉窗口

Yes

No

None

Esc

Close

结束当前的任务，让程序继续进行；关掉数据窗口

Yes

Yes

Alt+C

None

Exit

推出程序

No

Yes

Alt+X

Alt+F4

Help

调出程序的帮助信息

Yes

Yes

Alt+H

Fl

⏹同一系统内界面风格保持一致。

每种控件的只有一种样式：

窗口、按钮、菜单、对话框等；同一系统内字体、颜色、布局、位置、尺寸、间距等尽可能保持一种格式。

⏹界面风格（例：

菜单组织、快捷键设计等）与常用软件、用户使用习惯保持一致

你的发现

※导航一般会在页面的左侧和上方，界面风格与常用软件、用户使用习惯保持一致，同一系统内界面风格保持一致。

（二）快捷方式

设计模式

对常用操作、烦琐的操作、突发状态下的操作、最近频繁操作等提供快捷操作方式。

⏹提供快捷方式，更快的操作入口，以减少查找时间。

⏹最近频繁使用列表，更快的操作入口，以减少查找时间。

⏹操作过程和步骤优化，去除不必要的按钮，以减少交互次数。

⏹一键式、打包操作，以减少操作过程的烦琐

⏹批处理操作，以减少重复操作。

⏹提供默认值（例：

当天日期、用户常用选项等），以减少不必要的用户输入

你的发现

※发邮件时，发件人自动显示，无需格外备注

（三）错误处理

设计模式

对容易误操作的、操作会带来不良后果的、重大的错误必须要提供错误处理

⏹错误预防、操作限制：

不适当的菜单选项灰色显示、限制错误输入（例：

数字域限制字母输入）、可能引起损害的操作前的用户确认

⏹错误检测：

检测到错误、明确提示用户错误原因及可能的操作指导，让用户知道怎么做

⏹错误容忍，必要时提供错误纠正。

⏹错误恢复，尽可能恢复到错误前的状态，以减少损失。

你的发现

※发现因手误删除邮件，可以在已删除中找回。

（四）信息反馈

设计模式

对于不常用操作、重要操作（帐户、交易等数据）、长时间操作、探索性操作等需要将操作状态、操作结果及时反馈给用户。

通过进一步的信息反馈来猜测用户的意图。

⏹重要操作的操作结果可知。

⏹长时间操作的操作状态可知，信息反馈的直观、可视化。

⏹根据用户输入提供相关的信息反馈，以减少方便用户输入或减少记忆负荷

⏹记住用户的输入和选择

⏹根据用户输入来猜测用户意图

⏹信息要少而精，避免不必要的、重复的、过度的反馈

⏹界面上提供的反馈和确认信息不要打扰用户的操作流程。

例：

新浪微博“发布成功”提示信息几秒后自动消失

你的发现

※输入部分信息能够快速查找符合信息的收件人

（五）操作可逆

设计模式

对大多数操作的出错，允许用户撤消操作、回退到指定点。

⏹对用户操作给预撤消、还原的机会。

⏹用户操作恢复到指定点。

你的发现

※在输入文字时，因手误多删了文字，可用快捷键ctrl+z撤销之前删除的操作。

（六）联机帮助

设计模式

通过注解、TIPS、导航、向导等方式，帮助用户学习、更好的使用产品。

⏹对于新用户，提供快速介绍和简短的教程，但也允许跳过。

⏹根据用户操作场景的上下文内容，提供合适的帮助。

你的发现

※当用户接触一个软件，会提供一些帮助

（七）有表现力的界面

设计模式

包括美感和情感二部分。

美感主要体现在外形、美感、感官体验等本能层面；

情感主要体现在文化、个性、社会性、价值观、尊重、自我肯定等反思层面。

⏹经典美感。

界面外观清晰、整洁、给人予以愉悦感

⏹表达美感。

界面外观表达独创、新颖，有吸引力。

⏹表达情感。

界面通过表情等界面元素来表达情感状态

⏹情感共鸣。

界面激起用户深层次的内在情感共鸣。

你的发现

※在个人微博中用户可以选择自己喜爱的图片表达情感，美感。

我的发现

※找不到文件存放的具体位置，使用搜索工具查找