交互设计案例分析

交互设计案例分析

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

【实验目的】

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

【实验环境】

IE 5.0以上, 可以上网。

【实验要求】

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

案例来源可以是任何可以获取到的系统或应用。例：淘宝、百度、新浪、QQ 、微信、人人网、相关网关、游戏、移动应用等。

尽可能是找正向案例，如果有合适的反向案例也可。 将“你的发现”记录下，有图有文有真相。

【实验指导】

(一) 界面一致性

设计模式

界面设计在同一个系统内保持一致；界面设计与常用软件、用户使用习惯保持一致 文本 含义和行为

是否出现在按钮上 是否出现在

菜单上

热键

快捷键

OK

接受输入的数据或显示的响应信

息，关掉窗口 Yes

No None

or Cancel 不接受输入的信息，关掉窗口 Yes No None Esc Close 结束当前的任务，让程序继续进

行；关掉数据窗口 Yes

Yes Alt+C N one Exit 推出程序

No Yes Alt+X A lt+F4 Help 调出程序的帮助信息

Yes

Yes

Alt+H F l

⏹ 同一系统内界面风格保持一致。每种控件的只有一种样式：窗口、 按钮、菜单、

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

界面风格（例：菜单组织、快捷键设计等）与常用软件、用户使用习惯保持一致

你的发现

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

(二) 快捷方式

设计模式

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

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

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

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

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

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

提供默认值（例：当天日期、用户常用选项等），以减少不必要的用户输入

你的发现

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

(三) 错误处理

设计模式

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

⏹错误预防、操作限制：不适当的菜单选项灰色显示、限制错误输入（例：数字域限

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

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

么做

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

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

你的发现

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

(四) 信息反馈

设计模式

对于不常用操作、重要操作（帐户、交易等数据）、长时间操作、探索性操作等需要将操作状态、操作结果及时反馈给用户。通过进一步的信息反馈来猜测用户的意图。

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

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

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

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

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

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

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

你的发现

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

(五) 操作可逆

设计模式

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

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

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

你的发现

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

(六) 联机帮助

设计模式

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

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

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

你的发现

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

(七) 有表现力的界面

设计模式

包括美感和情感二部分。

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

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

⏹经典美感。界面外观清晰、整洁、给人予以愉悦感

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

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

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

你的发现

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

我的发现

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