用户界面设计原则及案例介绍

ZPEDU.ORG
案例一 Tecent

交互设计—Don't make me think


“返回”的位臵和做法很重要：这是整个QQMail的交互的“枢 纽”，如同围棋中的“玉柱”，也定义了邮箱的交互风格。 帮用户自动选中：在输入独立密码或加密folder输入密码时错误后， 应该把输入框内的内容select上，这样就可以直接打入而不用清除 了 光标定位：之前的点"回复"时光标focus到正文的问题改好了,但却 没有注意到点"转发"时光标,反而应是在"收件人"处而不是正文处, 因为一般总要填写转发人, 而回复(包括回复全部)则是直接输入内 容.
讲义版权由中培教育所有，未经同意，不得转印
ZPEDU.ORG
减少用户的等待感


Robert B miller 1968 ——Response time in man-computer conversational transactions 0.1秒钟、1秒钟、10秒钟
讲义版权由中培教育所有，未经同意，不得转印
讲义版权由中培教育所有，未经同意，不得转印
ZPEDU.ORG
允许用户ຫໍສະໝຸດ Baidu错误

让用户可以撤销动作 在执行具体的破坏性操作中要求用户确认 。
讲义版权由中培教育所有，未经同意，不得转印
ZPEDU.ORG
提供实用的帮助

设计帮助系统

入门和学习部分 使用指南 参考手册 疑难解答 术语解释
ZPEDU.ORG
案例二 网易邮箱注册初体验


注册一个新的网易邮箱，请分析该邮箱在 交互方面做的比较好的点，并指出可以供 我们借鉴的地方。 并试着给自己发送几个带图片的附件的邮 件，感受其友好性。
讲义版权由中培教育所有，未经同意，不得转印
ZPEDU.ORG
网易体验
讲义版权由中培教育所有，未经同意，不得转印
不恰当的低龄化
讲义版权由中培教育所有，未经同意，不得转印
ZPEDU.ORG
交互设计—寻求最佳方案
争执： 腾讯QQ可以称得上及时通讯的老大，以前往往看到的是腾讯的界面是 多么的友好等等的赞美。但是一次偶尔的操作，发现腾讯的不完美， 也可以说是很大的失败。 在QQ更改密码的时候出现了要求在同一IP段才能修改，但是我想问下， 现在也不是所有互联网用户都会用电信或者网通。其实有很大一部分 是用的其他网络提供商的宽带接入。这样也就导致了随机IP段产生。 那么请问他们怎么修改密码？ 他这么做也不在呼就是为了防止盗号的行为，但是即使这样样不应该 牺牲用户的易操作性。为了防止盗号的行为还有很多其他方法。 个人觉得腾讯这样做不是很好。希望大家发表一下自己的看法 参考地址：http://bbs.blueidea.com/thread-2913446-1-1.html
讲义版权由中培教育所有，未经同意，不得转印
布置手工作业流程
ZPEDU.ORG
讲义版权由中培教育所有，未经同意，不得转印
ZPEDU.ORG
使界面符合用户的使用习惯

被动调整策略：例如功能定制，界面定制 主动自适应调整策略：例如sogou拼音输入法

根据其他用户的使用行为来主动进行自适应调整



交互设计是关于创建新的用户体验的问题，目 的在于增强和扩充人们的工作、通信及交互方 式，使他们能够更加有效地进行日常工作和学 习。
讲义版权由中培教育所有，未经同意，不得转印
ZPEDU.ORG
UI设计

User Interface Design

用户界面设计，在很大程度上就是在探讨如何 让产品的界面更加具有可用性，如何让用户有 更良好的体验。这是一种优化后的界面，通过 这种界面，用户能更方面地完成任务，获得良 好的感觉。 例如：一个按钮的设计，美工设计考虑如何好 看，而用户界面设计师则考虑按钮如何摆放， 上面显示什么文字，甚至到底要不要这个按钮 的问题。


语言表达：采用具 体的例子，帮助用户 理解 表达方式：按照使
讲义版权由中培教育所有，未经同意，不得转印
ZPEDU.ORG
设计一个优秀的向导式界面
讲义版权由中培教育所有，未经同意，不得转印
ZPEDU.ORG
帮助用户高效地完成操作
支持批处理操作（google的picasa图像处理软件 ） 提高常用操作的效率 4A中的作业模块
讲义版权由中培教育所有，未经同意，不得转印

ZPEDU.ORG
软件设计，ＵＩ设计，交互设计

《软件设计的艺术》Terry Winograd (2004 年度的ACM人机交互院士)
建房子
土木工程师
装修设计师 建筑设计师
开发软件
软件设计
ＵＩ设计 交互设计
讲义版权由中培教育所有，未经同意，不得转印
ZPEDU.ORG

各种”为什么我们购物”的提示 亚马逊购物体验充斥着为何用户应该从亚马逊购买的提醒,而不是 充斥着从其他来源（在线或其他方式）的提醒。 与市场零售价对比 用户早先被通知“免费送货”
讲义版权由中培教育所有，未经同意，不得转印
ZPEDU.ORG
逼真图书的预览和内部查找功能
讲义版权由中培教育所有，未经同意，不得转印
减少用户记忆的负担； 自然匹配和预设用途； 尽可能采取一致性的设计

采用限制级因素防止用户出错
讲义版权由中培教育所有，未经同意，不得转印
ZPEDU.ORG

减少用户在使用软件时出现错误 （一） 利用某种方式提醒用户可
能出错 如何设臵出错信息





不要只告诉用户操作无法完 成或者操作失败 不要仅仅给出出错代码，还 应当给出该错误的含义 不要在出错信息中使用用户 无法理解的术语 错误要尽可能明确 错误信息要有建设性，要让 用户看出怎样才是正确的
讲义版权由中培教育所有，未经同意，不得转印
ZPEDU.ORG
概念区分

用户体验：UE


用户体验并不是指产品本身是如何工作的，而 是指产品如何和外界联系并发挥作用，也就是 人们如何“接触“或者“使用”它。 Web中的用户体验是指用户在访问平台的过程 中的全部体验，它包括平台是否有用，疑惑或 者bug程度，功能是否易用、简约，界面设计 和交互设计是否友好等方面。用户体验的核心 是UCD，即“以用户为中心的设计”。
ZPEDU.ORG
总结



就近设计原则 对功能进行组织和分类 帮助用户探索和尝试 允许用户犯错 提供实用的帮助 设计一个优秀的向导界面 使界面符合用户的使用习惯 减少用户出错 减少等待感 讲义版权由中培教育所有，未经同意，不得转印
ZPEDU.ORG
交互细节案例介绍
讲义版权由中培教育所有，未经同意，不得转印
讲义版权由中培教育所有，未经同意，不得转印
ZPEDU.ORG
易于筛选和用户评价比较

方便地访问正面和负面评论
讲义版权由中培教育所有，未经同意，不得转印
ZPEDU.ORG
交互设计—符合用户习惯与预期

先字母排序，再优先显示最近联系人，减少键 盘操作。
讲义版权由中培教育所有，未经同意，不得转印
ZPEDU.ORG
交互设计—符合用户习惯与预期

兼容客户端邮件菜单习惯

在用TT或QQ/TM/RTX截屏后的图,mail原来在写信时用Ctrl-V可以贴出来，但右键则不能。
小写都需要注意


能用一个词表达的，不用一句话。能用一句话表达清楚的，不用 两句话 每个概念都只有唯一一种表达。如”VIP”的概念 能用一种字体颜色的，不多用一种颜色 能用一种字体大小的，不多用一种大小


讲义版权由中培教育所有，未经同意，不得转印
ZPEDU.ORG
视觉设计—防止不恰当的低龄化
• 在追求“简单”的过程中，QQMail不知不觉的变得“中性”、“成熟” 化。 • 当我们更加理性和严谨地设计产品的时候，自然会远离“低龄”倾向。“ 成熟”源自合理的设计，“低龄”源自不合常理的设计。
ZPEDU.ORG
人性化的PayPhase

输入一句话 轻松在线支付


买家可以把姓名/地址/付款资料通用一个句子 与密码存储起来。结账时，你只需要输入你自 设的这个句子与密码即可 在线购物程序的简化将会使得用户更多地使用 在线购物方式购买商品。据调查，在此之前有 半数以上的网民已经将商品放进虚拟购物车， 但到最后因为支付过程过于繁琐而放弃购物。
讲义版权由中培教育所有，未经同意，不得转印
ZPEDU.ORG

“AJAX之父”的 Jesse James Garrett早在2000 年就提出了以用户 为中心的Web设计 的流程和用户体验 的要素
讲义版权由中培教育所有，未经同意，不得转印
ZPEDU.ORG
交互设计

交互：用户通过某种方式发出指令，且系 统对此作出相应的反应
用户体验、交互设计及案例介绍
ZPEDU.ORG
几张看似不相关的图片
讲义版权由中培教育所有，未经同意，不得转印
ZPEDU.ORG
几个网站
讲义版权由中培教育所有，未经同意，不得转印
ZPEDU.ORG
主要内容



用户体验？交互设计？ＵＩ设计？ 实现模型和心理模型 用户体验与交互设计基本原则介绍 交互细节案例介绍 小任务 交互设计所需要技能
讲义版权由中培教育所有，未经同意，不得转印
ZPEDU.ORG
交互设计—操作便利

QQ魔法表情
讲义版权由中培教育所有，未经同意，不得转印
ZPEDU.ORG
交互设计—操作便利

问卷星的设计页面
讲义版权由中培教育所有，未经同意，不得转印
ZPEDU.ORG

视觉设计——制定规范，维持统 一 文字使用要规范，语法，大小，颜色，大
ZPEDU.ORG
可定制的历史推荐
浏览所有产品的查看历史记录都可以修改。 看一看下面的图片。
讲义版权由中培教育所有，未经同意，不得转印
ZPEDU.ORG
讲义版权由中培教育所有，未经同意，不得转印
ZPEDU.ORG
方便的导航元素
（2 ） （1） （3）
（4）
（5）
讲义版权由中培教育所有，未经同意，不得转印
购物网中，购买这本书的用户还购买了以下书， 在《长尾理论》中安德森叫过滤器法则，它是长尾现象 形成的一个因素

介于主动自适应和被动调整之间的混合策略
讲义版权由中培教育所有，未经同意，不得转印
ZPEDU.ORG

减少用户在使用软件时出现错误 （一） 让用户能有效地看出或者知道如何进行正
确操作


讲义版权由中培教育所有，未经同意，不得转印
ZPEDU.ORG
腾讯用户体验室
讲义版权由中培教育所有，未经同意，不得转印
ZPEDU.ORG
腾讯用户体验总结

Don't make me think 符合用户习惯与预期 做适时的提醒 不强迫用户 选择最佳方案 操作便利
讲义版权由中培教育所有，未经同意，不得转印

不随意去掉用户正在使用的功能

原来mail在做出了“HTML方式查看”后，去掉了“打开”功能

符合用户预期

点击其他地方，WEBQQ的浮动窗口隐藏到固定位臵
讲义版权由中培教育所有，未经同意，不得转印
ZPEDU.ORG
交互设计—适时的提醒

没必要的提醒不需要出现 而适时出现的提示或功能，用得好，不但 不会骚扰用户，还是对用户的细致的关怀
实现模型和心理模型
心理 模型
表现 模型 实现 模型
记忆负担，体验较差
容易使用，体验良好
最好的技术是消失在生活当中的技术
讲义版权由中培教育所有，未经同意，不得转印
ZPEDU.ORG
几个通用的原则

就近设计原则
对功能进行恰当的分类和组织
讲义版权由中培教育所有，未经同意，不得转印
ZPEDU.ORG
帮助用户探索和尝试
讲义版权由中培教育所有，未经同意，不得转印
ZPEDU.ORG

相关产品显示
讲义版权由中培教育所有，未经同意，不得转印
ZPEDU.ORG


基于先前行为的推荐产品 只要浏览器的cookies保持不变,这种定制相同类型的内容就会在随后 的访问中一连串出现：
讲义版权由中培教育所有，未经同意，不得转印
ZPEDU.ORG
ZPEDU.ORG
讲义版权由中培教育所有，未经同意，不得转印
ZPEDU.ORG
Amazon—重点突出

明确强调产品搜索和在线购买

一旦建立了网站的产品搜索与网上购物等功能 ，用户最有可能想利用这些特性的优势马上开 始搜索。
讲义版权由中培教育所有，未经同意，不得转印
ZPEDU.ORG

动态地定制用户体验 亚马逊使用Cookie来记录用户登录，而对用户的购物习惯进行跟 踪并存储到服务器端。 它以事先进行搜索，网页浏览，愿望清单添加，评价填写为基础 ，并达到最终购买目的。