几个网站

幻灯片4

主要内容

l 用户体验？交互设计？ＵＩ设计？

l 实现模型和心理模型

l 用户体验与交互设计基本原则介绍

l 交互细节案例介绍

l 小任务

l 交互设计所需要技能

幻灯片5

概念区分

l 用户体验：UE

l 用户体验并不是指产品本身是如何工作的，而是指产品如何和外界联系并发挥作用，也就是人们如何“接触“或者“使用”它。

l Web中的用户体验是指用户在访问平台的过程中的全部体验，它包括平台是否有用，疑惑或者bug程度，功能是否易用、简约，界面设计和交互设计是否友好等方面。用户体验的核心是UCD，即“以用户为中心的设计”。

幻灯片6

l “AJAX之父”的Jesse James Garrett早在2000年就提出了以用户为中心的Web设计的流程和用户体验的要素

幻灯片7

交互设计

l 交互：用户通过某种方式发出指令，且系统对此作出相应的反应

l 交互设计是关于创建新的用户体验的问题，目的在于增强和扩充人们的工作、通信及交互方式，使他们能够更加有效地进行日常工作和学习。

幻灯片8

UI设计

l User  Interface Design

l 用户界面设计，在很大程度上就是在探讨如何让产品的界面更加具有可用性，如何让用户有更良好的体验。这是一种优化后的界面，通过这种界面，用户能更方面地完成任务，获得良好的感觉。

l 例如：一个按钮的设计，美工设计考虑如何好看，而用户界面设计师则考虑按钮如何摆放，上面显示什么文字，甚至到底要不要这个按钮的问题。

幻灯片9

软件设计，ＵＩ设计，交互设计

l 《软件设计的艺术》Terry Winograd (2004年度的ACM人机交互院士)

开发软件

建房子

土木工程师

软件设计

装修设计师

ＵＩ设计

建筑设计师

交互设计

幻灯片10

实现模型和心理模型

实现模型

表现模型

容易使用，体验良好

记忆负担，体验较差

最好的技术是消失在生活当中的技术

幻灯片11

几个通用的原则

l 就进设计原则

对功能进行恰当的分类和组织

幻灯片12

帮助用户探索和尝试

幻灯片13

允许用户犯错误

l 让用户可以撤销动作

l 在执行具体的破坏性操作中要求用户确认。

幻灯片14

提供实用的帮助

l 设计帮助系统

l 入门和学习部分

l 使用指南

l 参考手册

l 疑难解答

l 术语解释

l  语言表达：采用具体的例子，帮助用户理解

l   表达方式：按照使用流程来。

幻灯片15

设计一个优秀的向导式界面

幻灯片16

帮助用户高效地完成操作

l 支持批处理操作（google的picasa图像处理软件）

l 提高常用操作的效率

l 4A中的作业模块

幻灯片17

布置手工作业流程

幻灯片18

使界面符合用户的使用习惯

l 被动调整策略：例如功能定制，界面定制

l 主动自适应调整策略：例如sogou拼音输入法

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

l 购物网中，购买这本书的用户还购买了以下书，

l 在《长尾理论》中安德森叫过滤器法则，它是长尾现象形成的一个因素

l 介于主动自适应和被动调整之间的混合策略

幻灯片19

减少用户在使用软件时出现错误（一）

l 让用户能有效地看出或者知道如何进行正确操作

l 减少用户记忆的负担；

l 自然匹配和预设用途；

l 尽可能采取一致性的设计

l 采用限制级因素防止用户出错

幻灯片20

减少用户在使用软件时出现错误（一）

l 利用某种方式提醒用户可能出错

l 如何设置出错信息

l 不要只告诉用户操作无法完成或者操作失败

l 不要仅仅给出出错代码，还应当给出该错误的含义

l 不要在出错信息中使用用户无法理解的术语

l 错误要尽可能明确

l 错误信息要有建设性，要让用户看出怎样才是正确的

l 不要给出误导性的出错信息

l 向用户提出解决问题的建议

幻灯片21

减少用户的等待感

l Robert B miller 1968 ——Response time in man-computer conversational transactions

l 0.1秒钟、1秒钟、10秒钟

幻灯片22

总结

l 就进设计原则

l 对功能进行组织和分类

l 帮助用户探索和尝试

l 允许用户犯错

l 提供实用的帮助

l 设计一个优秀的向导界面

l 使界面符合用户的使用习惯

l 减少用户出错

l 减少等待感

幻灯片23

交互细节案例介绍

幻灯片24

案例一 Tecent

l 交互设计—Don't make me think

l “返回”的位置和做法很重要：这是整个QQMail的交互的“枢纽”，如同围棋中的“玉柱”，也定义了邮箱的交互风格。

l 帮用户自动选中：在输入独立密码或加密folder输入密码时错误后，应该把输入框内的内容select上，这样就可以直接打入而不用清除了

l 光标定位：之前的点"回复"时光标focus到正文的问题改好了,但却没有注意到点"转发"时光标,反而应是在"收件人"处而不是正文处, 因为一般总要填写转发人, 而回复(包括回复全部)则是直接输入内容.

幻灯片25

交互设计—符合用户习惯与预期

l 先字母排序，再优先显示最近联系人，减少键盘操作。

幻灯片26

交互设计—符合用户习惯与预期

l 兼容客户端邮件菜单习惯

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

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

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

l 符合用户预期

l 点击其他地方，WEBQQ的浮动窗口隐藏到固定位置

幻灯片27

交互设计—适时的提醒

l 没必要的提醒不需要出现

l 而适时出现的提示或功能，用得好，不但不会骚扰用户，还是对用户的细致的关怀

幻灯片28

交互设计—操作便利

l QQ魔法表情

幻灯片29

交互设计—操作便利

l 问卷星的设计页面

幻灯片30

视觉设计——制定规范，维持统一

l 文字使用要规范，语法，大小，颜色，大小写都需要注意

l 能用一个词表达的，不用一句话。能用一句话表达清楚的，不用两句话

l 每个概念都只有唯一一种表达。如”VIP”的概念

l 能用一种字体颜色的，不多用一种颜色

l 能用一种字体大小的，不多用一种大小

幻灯片31

视觉设计—防止不恰当的低龄化

l 在追求“简单”的过程中，QQMail不知不觉的变得“中性”、“成熟”化。

l 当我们更加理性和严谨地设计产品的时候，自然会远离“低龄”倾向。“成熟”源自合理的设计，“低龄”源自不合常理的设计。

l

幻灯片32

交互设计—寻求最佳方案

l 争执：

l 腾讯QQ可以称得上及时通讯的老大，以前往往看到的是腾讯的界面是多么的友好等等的赞美。但是一次偶尔的操作，发现腾讯的不完美，也可以说是很大的失败。

l 在QQ更改密码的时候出现了要求在同一IP段才能修改，但是我想问下，现在也不是所有互联网用户都会用电信或者网通。其实有很大一部分是用的其他网络提供商的宽带接入。这样也就导致了随机IP段产生。那么请问他们怎么修改密码？

l 他这么做也不在呼就是为了防止盗号的行为，但是即使这样样不应该牺牲用户的易操作性。为了防止盗号的行为还有很多其他方法。

l 个人觉得腾讯这样做不是很好。希望大家发表一下自己的看法

l 参考地址：http://bbs.blueidea.com/thread-2913446-1-1.html

幻灯片33

腾讯用户体验室

幻灯片34

腾讯用户体验总结

l Don't make me think

l 符合用户习惯与预期

l 做适时的提醒

l 不强迫用户

l 选择最佳方案

l 操作便利

幻灯片35

观看并点评一下两个视频

l QQ 概念版http://v.youku.com/v_show/id_XMTY2NDM2MzUy.html、

l Soso future  http://cdc.tencent.com/?p=53

幻灯片36

案例二  网易邮箱注册初体验

l 注册一个新的网易邮箱，请分析该邮箱在交互方面做的比较好的点，并指出可以供我们借鉴的地方。

l 并试着给自己发送几个带图片的附件的邮件，感受其友好性。

幻灯片37

网易体验

幻灯片38

幻灯片39

Amazon—重点突出

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

l 一旦建立了网站的产品搜索与网上购物等功能，用户最有可能想利用这些特性的优势马上开始搜索。

幻灯片40

l  动态地定制用户体验

l 亚马逊使用Cookie来记录用户登录，而对用户的购物习惯进行跟踪并存储到服务器端。

l 它以事先进行搜索，网页浏览，愿望清单添加，评价填写为基础，并达到最终购买目的。

幻灯片41

l 相关产品显示

幻灯片42

l 基于先前行为的推荐产品

l 只要浏览器的cookies保持不变,这种定制相同类型的内容就会在随后的访问中一连串出现：

幻灯片43

l 各种”为什么我们购物”的提示

l 亚马逊购物体验充斥着为何用户应该从亚马逊购买的提醒,而不是充斥着从其他来源（在线或其他方式）的提醒。

l 与市场零售价对比

l 用户早先被通知“免费送货”

幻灯片44

逼真图书的预览和内部查找功能

幻灯片45

可定制的历史推荐

浏览所有产品的查看历史记录都可以修改。 看一看下面的图片。

幻灯片46

幻灯片47

方便的导航元素

（2）

（1）

（3）

（4）

（5）

幻灯片48

人性化的PayPhase

l 输入一句话 轻松在线支付

l 买家可以把姓名/地址/付款资料通用一个句子与密码存储起来。结账时，你只需要输入你自设的这个句子与密码即可

l 在线购物程序的简化将会使得用户更多地使用在线购物方式购买商品。据调查，在此之前有半数以上的网民已经将商品放进虚拟购物车，但到最后因为支付过程过于繁琐而放弃购物。

幻灯片49

易于筛选和用户评价比较

l 方便地访问正面和负面评论

幻灯片50

让用户感到舒适

幻灯片51

亚马逊购物体验总结

l 把握住网站的焦点

l 只要有可能，应该为每个用户提供个性化内容。

l 给予用户为什么做出次选择的指导。

l 让用户尽可能多的接触到产品（内容）。

l 不要让用户感到有些产品/服务正在强迫他们购买

l 在适当的时候可轻松地访问重要部分。

l 在任何时候让顾客感到舒服和可控。

幻灯片52

Jakob Nielson博士交互设计的十项原则

l 1.让用户随时了解系统的状态

l 例如导入导出的提示功能

l 2.系统应该与真实世界相符合（使用用户惯用的词汇和概念）

l 3.给用户控制权和自主权

l 当系统出错或者误操作后能够紧急退出。
4.提倡一致性和标准化

l 相似的任务提供相似的元素

l 5.帮助用户诊断、识别和恢复错误。告诉用户大概的原因和解决办法

l 6.预防错误

l 7.依赖于识别而不是记忆

l 8强调实用的灵活性和有效性：输入搜索内容后直接按回车键就能搜索而不一定要点击搜索图标。

l  9．最小化设计

l 10.提供帮助及文档

幻灯片53

Ben Shneiderman交互设计原则性

l 力求一致性：高度一致性的界面能够给人清晰和整体的感觉。

l 提供明确的反馈

l 设计对话，告诉用户任务已经完成

l 提供错误预防和简单的纠错功能

l 应该方便用户取消某个操作

l 用户应掌握控制权（授课计划的跳过该动画）

l 减轻用户的记忆负担

幻灯片54

小任务

请根据前面提到的原则，找出4A或者是学习超市设计上存在的一到两个问题，截图并加以文字说明，以作品发布的形式发表在序列化活动中。

幻灯片55

交互设计需要哪些能力和技术？

l 交互设计师 Interaction Designer

l 1.有相关工作经历和作品者优先；
2.对各种常用软件有强烈兴趣并有灵敏触觉，富有创造力和激情，并有动手实践良好习惯；
3.逻辑思维能力强，熟练掌握业务需求分析、产品需求分解的技巧；
4.有大局观，可以在复杂的约束条件下找到平衡或创新的方法；
5.主动性高，具优秀的理解、沟通与协调能力，很强的文字表达能力；个性乐观开朗，善于和各种背景的人合作；
6.对交互设计过程有深入了解，能熟练应用站点结构图、流程图等交互设计方法；
7.有相关岗位的技术和技能，如视觉设计、XHTML/CSS等；
8.熟悉动画制作、高仿真原型制作者优先；
9.主动性高，具优秀的理解、沟通与协调能力，文字表达能力强；
10.有良好的英文阅读能力，英文六级优先；
11.工业设计、计算机、软件工程、心理学等相关专业本科及以上学历。

l 工作职责：
1.参与产品规划构思和创意过程；
2.分析业务需求，并加以分解和归纳出产品人机交互界面需求；
3.设计软件的人机交互界面结构、用户操作流程等；
4.参与公司前瞻性产品的创意设计；
5.制作相关仿真原型。

幻灯片56

l 1. 交互设计的经验，或多或少，当然经验丰富者优先。
2. 给出高质量的产品原型，流程图，线框图，清晰的表达自己的设计方案。
3. 优秀的沟通和协调能力，能准确的挖掘用户需求，结合商业目标，快速调整设计方案，并获得最终的认可。
4. 良好的视觉设计能力，Photoshop，Dreamweaver等设计工具熟练运用，能给出高保真度的原型。熟悉XHTML，Javascript，ActionScript 者优先。
5. 基本的程序开发知识，确保你在前期设计时能综合开发成本，给出高效可行的设计方案。
6. 人机交互，软件工程，工业设计，视觉传达，或者相关设计学科的学历。我们并不注重学历，当然高学历者优先。
7. 英文，能阅读专业资料，能应付日常工作中和外籍同事的交流。（日文也可以，我们也在招日文站的设计师。）
8. 在各个有趣的网站都有自己的注册帐号。眼界是能力的基础。
9. 最重要的一条：学习的心态！

幻灯片57