从用户的角度进行产品设计信息咨询部 翟天骄 2010.08.312whatwhyhow如果一个产品很难用， 我就不会经常使用如果一个产品我不需要， 我就不会用Focus on the user, and all else will follow.以用户为中心，其他一切纷至沓来。不同的人不同的人 不同的理解不同的理解不同的需求不同的需求 不同的设计不同的设计不同的设计不同的设计 不同的效果不同的效果心理 模型表现 模型实现 模型容易使用，体验良好记忆负担，体验较差最好的技术是消失在生活当中的技术8whatwhyhow以用户为中心的Web设计 的流程和用户体验的要素“AJAX之父”的Jesse James Garrett在2000年提出产品设计产品设计 市场调研 需求分析 详细设计研发发产品（软件、网站 ）建房子土木工程师装修设计师建筑设计师程序设计设计交互设计软件设计的艺术Terry Winograd (2004年度的ACM人机交互院士)名称解释名称解释 UI（user interface designer）:用户界面设计人员 UE（ User Experience ）：用户体验并不是指产品本身是如何工作的，而是指产品如何和外界 联系并发挥作用，也就是人们如何“接触“或者“使用” 它。是指用户在访问平台的过程中的全部体验，它包括平 台是否有用，疑惑或者bug程度，功能是否易用、简约， 界面设计和交互设计是否友好等方面。 UCD （ User Centered Design ） ：“以用户为中 心的设计12whatwhyhow设计者怎么想设计者怎么想需求集合功能集合出水写字出水写字保护笔芯的笔保护笔芯的笔 盖盖颜色墨水颜色墨水易擦墨水易擦墨水产品产品写字写字长久的写字长久的写字标识不同内容标识不同内容写新的内容写新的内容用户用户能当发簪能当发簪变形金刚？变形金刚？ ？要了解人，从而了解用户，更要习惯站在用户 的角度看问题。他们要“随时随地变成用户”产品功能重排产品功能重排口碑相传的产品设计之道口碑相传的产品设计之道 核心能力和速度 交互体贴细致，视觉简洁清爽 高端用户的关注 如何在良好口碑下持续增加功能要了解人，从而了解用户，更要习惯站在用 户的角度看问题。他们要“随时随地变成用 户”产品规划的流程定义产品规划的流程定义 产品规划流程对市场走势及客户需求进行分析，创建 合理的市场细分规则，对要投资和取得领先地位的细 分市场进行选择和优先级排序，从而制定可执行的业 务计划，并驱动新产品包的开发。过程交付件对应产品阶段用户需求收集产品候选概念用户需求分析和PK阶段市场分析市场评估报告制定规划产品路标规划书制定综合Feature List和规划PPT 例撰写策划产品需求规格说明书产品需求说明书 例制定业务计划产品业务计划书开发阶段？用户需求分析法（例：QQ秀）要素细分项目对应腾讯产品的元素$价格设计、可生产性、技术、原材料、生产、供应 商、制造、元件、人力成本、管理费用、装备付费Item的价格/包月价格A安全/质量行销、销售、渠道、分配、交货期、广告、配 置、定价、客户定制客服/投诉的响应P性能功能、吸引力、规格、功率、速度、容量、适 应性、多功能、尺寸用得爽不爽P包装风格、尺寸、数量、几何设计、模块性、体系 结构、界面、机械结构、同一性、图形、包含 的/不包含的页面好看不好看E易用用户友好、操纵控制、显示、人类工程学、培 训、文档、帮助系统、人为因素、接口、操作UI（界面操作性）A可获得性可靠性、质量、安全性、误差极限、完整性、 强度、适应性、动态特性、负荷量、冗余Q币购买/充值渠道L生命周期成本寿命、正常运行/停工时间、保险、责任、可 维护性、服务、备件、移植通道、标准化、基 础设施、运转成本、安装成本Item有效期S社会接受程度间接影响、顾问、采购代理商、标准组织、政 府、社会认可程度、法律关系、政治、股东、 管理层、工人、工作场所同龄人认可度/流行度如何排定产品功能的优先级各个功能本身并无“优先级”可言，对一支笔来说， “写字”和“当作发簪”这两个需求是平等的。但是 产品在不同的阶段有不同的目标和不同的现实情况， 这就成为判定产品功能优先级的唯一标准。产品阶段首要目标功能侧重点$APPEALS新产品上线吸引新用户、快速 占领目标市场“好用、方便、便宜”（注 意，“便宜”实际上是运营 的范畴）$价格、E易用、A 可获得性平台期留住用户、稳定收 入内容翻新、满足细分用户群 的需求（例子：高露洁牙膏 、飘柔洗发水）P包装、A安全/质量 、P性能产品更新换 代保留旧产品精髓， 加入新的创意元素“时尚、创新、新新人类的 需求”（例子：Swatch）S社会接受、L生命 周期成本市场分析市场分析用户分析用户分析 需求分析需求分析小案例：用户需求优先级排序小案例：用户需求优先级排序QQ发布第一个版本时，有以下用户需求 ： 卡通头像QQ表情聊天记录管理器看谁在线上安全性传文件很小的.exe文件视频聊天室语音反应速度快请从中选出最重要的三项，发布QQ1.0。？别让我思考(Dont Make Me Think)网站可用性三大定律人们使用WEB的几个事实1. 不是阅读，而是扫描 总是很忙 不必阅读所有的内容 善于扫描 2. 不做最佳选择，而是满意即可 总是很忙碌 如同消防员 3. 不追根究底，而是勉强应付 如果发现某个东西能用，我们会一直用它用户浏览网站不是在阅读，而是扫描注意力是有限的过多的内容。不追根究底，而是勉强应付Krug可用性三大定律1.别让我思考(Dont make me think )2.要点击多少次都没关系，只要每次点击 都是无须思考，明确无误的选择。 3.去掉每个页面上一半的文字，然后把剩 下的文字再去掉一半。Krug可用性第一定律1. 别让我思考(Dont make me think )a) 网页应该设计得不言而喻 b) 网页避免强迫用户思考的地方 c) 如果做不到一切不言而喻，起码做到让页 面自我解释麦当劳两则强迫我们思考的地方(1)强迫我们思考的地方(2)卓越网和当当网的搜索框当当网2006年1月1日首页快照什么是页面的自我解释？ 页面的自我解释即用户对页面稍加学习就 可以明白，用户能够更加专注于他要做的 事情。 特别是在进行一些崭新的，开拓性或者非 常复杂的页面设计时，也许只能做到自我 解释(Self-explanatory)。返回Krug可用性第二定律2. 要点击多少次都没关系，只要每次点击都 是无须思考，明确无误的选择。 a) 用户的挫折感限度不取决于到达相关网页 所需要的点击数而是点击的困难程度。 b) 经验准则：一次需要思考的点击等于三次 无须思考的点击。 例子www.netvibes.comwww.netvibes.comKrug可用性第三定律3. 去掉每个页面上一半的文字，然后把剩下 的文字再去掉一半。 a) 有力的文字都是简洁的。 b) 必须消灭欢迎词，必须消灭指示性文字。 Microsoft TechNet 欢迎词中国建设银行反馈表单指示性文字可用性实践中需要注意的问题1. 导航条(页头，页尾，页内) 2. 主页 3. 团队中可用性的讨论可用性实践中需要注意的问题1. 导航条 作用 a) 帮助找到想要的，告诉我们如何使用网站 b) 给人固定的感觉 c) 告诉我们身在何处 注意事项导航条(页头，页尾，页内)Bear looking at map of park with sign “You are here“导航条设计时需要注意a) 网站的每一页(表单可能例外)都需要导航 b) 次级导航都应该有返回首页的链接 c) 页面名称应该醒目(自我解释) d) 要提供简洁，没有无关选项的搜索框优秀的导航条示例:Amazon,Builder.com.cnAmazon. COM导航条Builder.com.cn导航条可用性实践中需要注意的问题2. 主页 主页的作用 主页需要额外考虑的问题主页的作用a) 准确、快速的传达一个整体形象 b) 网站的标识和起点 c) 内容更新导读 d) 服务以及搜索的入口返回准确、快速的传达一个整体形象主页要做到这点必须清晰的回答四个问题 1这是什么网站？ 2网站上面有什么？ 3我能在这里干什么？ 4为什么我应该在这而不是在别的地方？返回主页需要额外考虑的问题a) 每个人都想占一席之地 b) 想要参与的人太多 c) 设计要满足所有人返回站点的标识和口号没有什么比得上一个好口号每天五分钟，给思想加油。(blogchina.com) 理性，建设性。(eeo.com.cn)可用性实践中需要注意的问题3. 团队中可用性的讨论 a) 现状：无休止的信仰大战 b) 本质：浪费时间 c) 关键：没有什么所谓的普通用户 d) 唯一改变的方法：用户体验测试团队中可用性的讨论可用性最佳实践 提供增大网页字体的选项(国内网站) 为每张图片增加ALT文本 用户不可能在一个界面中接受过多信息， 而且信息量和页面长度不是正比关系为每张图片增加ALT文本返回交互设计Dont make me think“返回”的位置和做法很重要：这是整个QQMail的交互的“枢纽”，如同围棋中 的“玉柱”，也定义了邮箱的交互风格。 帮用户自动选中：在输入独立密码或加密folder输入密码时错误后，应该把输入 框内的内容select上，这样就可以直接打入而不用清除了 光标定位：之前的点“回复“时光标focus到正文的问题改好了,但却没有注意到点“ 转发“时光标,反而应是在“收件人“处而不是正文处, 因为一般总要填写转发人, 而回 复(包括回复全部)则是直接输入内容.交互设计符合用户习惯与预期类Outlook客户端操作，但比它做得更优秀 先字母排序，再优先显示最近联系人，减少键盘操作。这么细的体验，但一旦用 上，就觉得别的同类产品很粗糙了！交互设计符合用户习惯与预期兼容客户端邮件菜单习惯 在用TT或QQ/TM/RTX截屏后的图,mail原来在写信时用Ctrl-V可以贴出来，但右 键则不能。 不要随意去掉用户正在使用的功能 原来mail在做出了“HTML方式查看”后，去掉了“打开”功能 符合用户预期，点击其他地方，WEBQQ的浮动窗口隐藏到固定位置交互设计适时的提醒没必要的提醒不需要出现 而适时出现的提示或功能，用得好，不但不会骚扰用户，还是对用户的细致的关 怀（当未读邮件过多时，提示删除历史邮件） 数字和字母帐号不同方式；图片验证旁提示“不区分大小写”，细节中体现体贴; 修改前 修改后交互设计操作便利鼠标响应区域的大小，灵敏度和精确度，直接影响操作体验 示例：QQMail，业务导航区，QQ音乐QQ影音的快捷播放按钮：最初的设计改为方形扩大点击区域，考虑性能去掉按钮 显示最初的设计 优化后 最后鼠标动作需要精确的判断，捕捉用户意图（如：QQ影音的鼠标左键点击的精确判 断） 左键单击画面可以移动窗口 没有移动窗口时左键弹起才暂停画面，移动范围少于一定数值算暂停 右键菜单出现后的左击画面不执行暂停，视为取消右键菜单视觉设计制定规范，维持统一文字使用要规范，语法，大小，颜色，大小写都需要注意能用一个词表达的，不用一句话。能用一句话表达清楚的，不用两句话 每个概念都只有唯一一种表达。如”VIP”的概念 能用一种字体颜色的，不多用一种颜色 能用一种字体大小的，不多用一种大小 用标准组件 能用标准控件的，不自己画控件（一个button，就有focused,selected, up/down,enabled/disabled,tab顺序等多种状态要画和 处理，