2009
4 2009我们这一 34 故事板 38 淘UCD心得
os s O 48 假用户Cr
56 有效降低用户
封面设计 /游仙 主办 /碳酸饮料会 策划 /无酬 咏沙 淡月 超群 设计 /淡月 编辑 /咏沙 无酬 超群 希春 摄影 /在天 合作 /
64 瞬间的设计
80 项目开发伦理
88 我的文案优化
100 用户心智模型
104 设计师挖掘用
一年
s s Over 真砖家
户门槛
116 信息架构之有效的导航设计 124 眼未动，心已动 128 网络广告互动体验设计 142 EVE2012 146 世界之窗浏览器设计 154 淘公仔诞生记
理
164 求解
化四部曲
176 佩瑛情报站
型与隐喻
182 碳酸饮料会周年庆
用户需求浅谈
184 什么是碳酸？
我们这一年 摄影 /在天 宗羲 胡斐 霍天 淡月
编辑 /淡月
诚然，当你启开这一页时 2009，已成为过去 年轻的岁月悄然掠过 我们青春的断片、艺术与梦想 都散落在了时间的尽头，成为生命中的一部分 而我们使彼此真实 使彼此的2009欢乐和短暂 镜头是沉默的见证，不经意得令人感动 谢谢，这一路有你
2009，我们在去年的尾声中拉开序幕。 淘宝年会 /在天摄
这是一个充满奇迹的年度。
我们见证过伟大的成就。 阿里十周年 /在天摄
阿里十周年 /霍天摄
放
放飞过希望。
许下过直到永久的誓言。 阿里集体婚礼 /在天摄
2009，我们付出过爱。 探访希望小学 /宗羲摄
淘
淘宝小二义工行 /宗羲摄
同时也得到爱。 淘宝卖家 /宗羲摄
2009，我们相互给予过鼓励。 淘宝群音会 /胡斐摄
相互给予过欢乐。 万圣节夜游 /宗羲摄
相互给予过陪伴。 深夜UED办公室 /在天摄
参加UPA时，在上海地铁站 /在天摄
2010，你好！ 2010年1月1日，淘宝办公楼下 /淡月摄
文/阿福 (交互设计师 )
故事版是什么？ 故事版，起源于广告行业。在电影电视中，故事版的作用是来安 排剧情中的重要镜头。他们相当于一个可视化的剧本。 故事版展示了各个镜头之间的关系，以及他们是如何串联起来， 给观众一个完整的体验。 用图文结合的形式来描述一个完整任务或是交互动作的可视化剧 本。
故事版在UI 设计当中的应用 • 故事版是用特定的脚本连贯的分镜头，可以用来展示一系列的交互 动作。 • 故事版用于突出显示某个关键交互动作，从而使整个用户体验过程 中相对应的关键某个任务得以凸显。 • 通过故事版用于寻找产品的用户群。
故事版的优点 •对于老板及产品经理来说： 故事版可以体现产品的“感觉” 故事版可以体现更广泛层面上的用户体验 •对于执行层来说 故事版讲述的是用户的正常浏览行为，可以帮助 大家迅速的，直观的了解产品逻辑和目的。 •其他相关人员，新成员 故事版可作为产品的说明
对技术团队的支持 •显示产品运作的模式 •显示产品的特性以及他们的关联 •显示用户特征，以及他们使用产品的目的
故事版对设计工作的好处 •故事版在向使用者收集反馈和行为模式时 的效果好于线框图。 •当使用者与设计师身处异地时，故事版可 以更好的帮助设计者引导初次使用者了解 产品逻辑。
m , I 阿福
小贴士 •帮助挑选更具表达力以及更具吸引力的脚本 –专注于新观点以及新互动 •不用着力使故事版简单易懂 –从多个角度解构脚本 –每个层面显示一个鲜明的任务 –清楚显示激活每一步交互的事件 •故事版并不能解决所有问题，它只能当作用户体验的一部份存在。 它只能解决一部份问题。 •用文字说明来丰富故事版 –使用 p e r s o n a 的来阐明故事版 –包涵用户目的 •对细节的控制 不必显示每个鼠标点击或文字输入引发的事件。能说明问题即可。
案例一：Y A H O O 故事板
案例二：四格漫画
案例二：人物P e r s o n a
淘UCD
文/ 晓荷（用户
CD心得
户体验分析师）
项目背景简介 淘心得现状 ——原站点，又名点评库，针对标类产品的点评平台 ——上线至今：总点评贴数6 0 + 万，但用户认知较低
图 1
图 2
图 1
图 3 淘心得改版目标 ——提升1 0 倍以上点评数 ——改版内容（与U E D 相关的）： d e t a i l 页面优化；l i s t 页面优化；首页页面优化；
我们做了什么 标准U C D 流程——
淘心得U C D 流程——
我们怎么做 专家评估 •专家评估的价值： –识别高级用户体验问题： 超越基础可用性，关注细节，关注效率、情感体验等维度 专业的改进建议 –快速，节约时间、金钱成本 •淘心得现有版本的专家评估 –青云组7 名设计师参与 –耗时2 小时
•专家评估：你可以怎样做？ 邀请组内的成员参与，自己当主持 –准备提纲 –控制节奏、气氛 –找人帮忙记录
常见提纲 –提出目标：“我们要找出至少1 0 个易用性的问题” –提炼总体感受：收集关键词 –流程分析 –逐个页面分析：导航、交互、视觉、内容分析
人物角色 •人物角色的价值： –将用户群维度特征、属性“打包”， 从而明确区分不同用户群的：动机、目标、需求 –使项目组对产品的体验目标有更一致的理解 –使页面的功能、界面设计更具针对性 •淘心得的人物角色：
•人物角色：我们怎么做？ 创建人物角色的基础： –站点用户需求调研报告： 0 9 年8 月，问卷调研 有效问卷1 0 1 3 9 份 –站点下半年核心商业目标报告 分析思路： –穷尽：头脑风暴所有可能维度 –排除： 以用户目标差异化为检验标准 以可产出设计方案为导向
•人物角色：你可以怎样做？ 创建人物角色——7 步骤： –收集一些数据：定量调研、淘数据、互联网 –头脑风暴可能的维度：如行为、态度、能力、动机 –识别明显差异性行为特征，决定维度 –验证维度：采访若干用户 –归纳各个角色的目标与特性 –检查完整性与重复性：M E C E （“相互独立，完全穷尽”） –丰富细节 将人物角色文档化并应用在后续的设计中 需求与痛点分析 •需求与痛点分析的意义 –痛点：目前的缺陷、瓶颈；需求：对产品的期望 –客服痛点+ 实现需求= 理想体验 •淘心得需求与痛点分析： –焦点小组：口碑网7 名小二 –总结分析
•需求与痛点分析：你可以怎样做？ 获取需求与痛点： –准备访谈提纲 –根据人物角色，各角色选取若干用户 –线上焦点小组 或 线上一对一访谈 –数据整理（树状图、表格） 归纳出理想体验愿景
评估 •眼动仪辅助的可用性测试 –参与用户 •评估：你可以怎样做？ 准备测试大纲 –设计包含关键流程与主要功能的任务 –编造故事，为用户提供场景，但不提供操作任务的步骤 找几个小二（非设计师） 进行测试 –集中注意力观察操作的细节 任务是否能完成？流程是否流畅？ 期望的信息是否找到？ 用户是否理解自己在做的事情？碰到了什么问题？ –询问与倾听： 你最喜欢哪三点？最不喜欢哪三点？ 如果你愿意改变某处设计，你会选什么？ 你会愿意去用吗？为什么？
淘 UCD 心得 •关键成功要素： –P D 在时间上的宽容以及对U C D 的配合 –设计师对U C D 流程的充分支持与积极参与 –良好的组内互助气氛 –灵活运用方法，以解决问题为导向 •不足： –没有实现迭代 –各角色（用研、设计师、P D ）之间沟通尚待加强 –方法、流程未规范化 •启发： –U C D 是一种态度，一种价值观，更是一种科学的、可行的方法论 –U C D 并不复杂，可被灵活运用（拆分、简化等），从而使U E D 尽早 介入产品设计的前期阶段
文/ 晓荷（用户体验分析师）
背景 作为一个分工具体的用户体验团队中的一名用户研究员，笔者与其他研究员常 常就如何在开展用户测试前向设计师提出U I （用户界面下同）设计建议进行探讨。 实践中发现，某些设计问题的确是无需通过用户测试去验证便能识别的，但设计师 可能会质疑用户研究员在交互、视觉设计方面的专业性。那么，站在用户研究这个 角色的立场上，怎样能在用户测试前较有效地把U I 存在的问题传达给设计师呢？无 疑，一个客观合理的评估方法会有助于保证对U I 的分析和反馈是具有建设性的。换 句话说，挑毛病人人都会，但找茬也应有理有据。同时，从成本和效率的角度考虑 ，该方法应该是简单易操作、并适用于整个用户体验团队的成员去快速发现并解决 问题的。以上两方面的考虑是促动笔者进行摸索的背景和初衷。
方法论简介 1. 理论基础 在可用性研究的理论框架中，包括测试、探寻及检视三种方法论（图1 ）。其中 ，检视法是不涉及真实用户的，常被称为专家评审法。本文所述方法属于检视法。 所谓 “假用户”，源自对认知过程走查法的简化，指模拟用户体验使用U I ； “真 砖家”则源自启发式评审法，指使用经验准则等评审U I 。“假用户C R O S S O V E R 真砖家 ”，即为一种角色代入式的U I 评估法。
1. 1为何不直接使用这两种方法？ 正如前文所述，笔者希望探讨相对易懂易操作的手段。而无论认知过程走查法 还是启发式评审法，都有相对严谨复杂的执行过程，在企业中运用存在时间成本高 、通用性不足（需用户研究人员介入）等问题。将它们进行简化，目的是提供可操 作性较强的、高效的解决问题途径。也正如假用户、真砖家这两个命名，是简单易 记的，去学术化的。 1. 2为何要代入角色？ 代入用户这个角色是为了尝试贴近真实用户的心智模型。真实用户往往感性、 直接地与U I 进行互动，通过仿拟他们使用U I 的过程，能避免因专业性过强而抛弃了 用户视角，造成对一些基本问题的麻木与无视；也可获得更宏观的感受，为后续理 性分析打下感性基础。 代入砖家这个角色则是为了理性、详尽地对一个U I 进行分析，要有一定的系统 性和理据，才能起到说服、沟通和协作的作用。砖家这个角色要借助可用性经验准 则（即一些设计理念、原则）、要对产品概况，如用户群、产品目标、技术约束等 有所了解，还要具备一定的用户体验领域的知识。至于为何名曰“砖”家？原因有 三： •真正名副其实的专家，需在业内有长期（至少6 1 0 年？）的沉淀和经验积累 。而中国的用户体验业界才起步不久。 •降低门槛，让不是专家的人也能做出积极、有建设性的评估； •这个动辄“专家说”的年头，专家还真不如有实力的砖家！ 2.方法论的目标 •提出系统客观的评估分析意见，从而探索解决方案。每个U I 都是设计师的心 血结晶，“找茬”者应用客观的态度和方法来找出并解决问题，诸如“好难用”、 “超难看”等意见对设计师不会有实质帮助。本评估法最重要的目标就是提供分析 的切入点。 •快速改善设计，将问题扼杀在襁褓中。作为一种时间、金钱成本最低的评估 法，该方法一方面能保证在缺乏用户测试支持时能尽可能挖掘问题，另一方面力求 将评估过程简化，以实现高效的迭代设计。 •完善用户测试所用原型的质量。不少问题可在用户测试前被解决掉，无需用
户来验证。
实际操作 1. 时机 越早使用该方法对U I 进行评估越好，并鼓励迭代操作（原型阶段、视觉化阶段、开 发阶段）。 2. 对象 用户体验团队的任何一个人，都可以既当假用户，也当真砖家去评估其他设计师的 作品。而设计者本身可邀请用户体验团队以外的人或团队里的同事充当你的假用户 ，因为自己较难地充当自己作品的用户。但可以代入砖家的角色进行自评。 3. 过程及内容 3. 1作为假用户 该过程有两个步骤： 1 )安排若干相关任务并使用U I 完成任务 无论是邀请他人还是自主去做假用户，可安排若干该U I 皆在帮助用户完成的任务（ 即主要功能点）。这样做的目的是为了更自然更投入地使用这个U I ，避免一开始便 带着职业眼光去挑问题。 2 )反思使用过程中的行为、感受： 在完成任务后，可思考以下四个问题—— • U I 是否易于理解和操作？ • • •
U I 是否符合使用习惯？ U I 是否易导致出错？ U I是否有吸引力？
问题的答案如同一些“信号”，帮助你在第二阶段、作为真砖家的分析过程中找出 相应的切入点。
3. 2
作为真砖家
该过程有三个切入点：交互设计、视觉设计和文案撰写。严谨来说，还应有功能（ 产品逻辑是否合理）这一切入点。但在大多数企业中，到了原型开发阶段，理论上 来说产品的需求、逻辑功能应该是已经过核定的，因此不纳入本过程中。 1 )交互设计 对交互设计的评估包括交互控件与交互过程两部分。控件是各个零散的元素；将控 件组织起来，引起交互行为，形成交互事件，即为交互过程。 对交互控件的评估是指审视是否正确选择并使用某控件。正确是指： •符合控件使用规范。 在著名的雅虎设计模式库中（图2 ），科学、严谨地对每个模式该何时使用（U s e
•符合使用情景（c o n t e x t ）。 即使控件符合其使用规范，但用在了不恰当的使用场景中，也是不妥的。 •前端开发性价比高。 对交互过程的评估可考虑三大方面。 •B u g ，即是否存在技术性硬伤。 •导航。 导航可以十分宏观（网站整体级别的），也可以细微到一个特定的交互过程中。在 评估导航时可关注这些问题： -是否提示任务进度、状态？
-是否支持前进、返回？若存在大量对后退键的依赖，则说明这方面做得不足。 -当前交互过程结束后的引导。当前交互过程结束后的导航值得关注。举例来讲， 注册流程是否到注册成功就结束呢？对于新用户，很多数据皆为空，所以流程结束 后，不应把用户悬置，还应考虑下一步该将他们导向何处。 •交互事件（引导用户完成任务的交互行为）。 可从图3 所列举的四方面评估交互事件。这四方面是递进的：可用性是基础，效 率是在保证此基础后的进一步要求，而反馈、一致性能更好地提升用户满意度。 须指出的是，可用性问题往往更常在用户测试中曝露。原因后面会述及。而砖 家的价值就在于对后三方面的评估，因为这往往是普通用户在测试中较难直接指出 的。
图 3 •可用性：基础任务是否能完成？ •效率： -认知负担是否繁重？即用户是否需要思考良久才操作，或操作过程中反复停顿下 来思考？ -鼠标操作、视线追踪是否迂回曲折（图4 ）？当用户完成思考开始操作时，操作流 是否流畅？可通过画出可能的操作流程箭头图来进行评估。 -是否容易造成误操作？即使操作流不复杂，还应进一步考虑是否易导致误操作。 -是否已考虑极端使用情景？要考虑数据量增大时对效率的影响，以及是否提供相
图 4 -是否容易造成误操作？即使操作流不复杂，还应进一步考虑是否易导致误操作。 -是否已考虑极端使用情景？要考虑数据量增大时对效率的影响，以及是否提供相 应的检索工具（搜索、排序、筛选等） •反馈： -反馈的时机：是否需要反馈？反馈何时出现？ -反馈的强度：视觉、文案是否有效、恰当地传达系统信息？ •一致性：交互上的一致性是指，一些相似交互事件的交互过程（如步骤、反馈等 ）应保持一致，否则会在一定程度上造成用户的不安。 2)视觉 视觉评估本是较主观、并需要一定美学素养过程，但本方法中对视觉的评估并非针 对美感、风格等美学元素，而是以格式塔原理为基础，尝试对视觉进行客观分析。 主要内容包括—— •亲密性： -相关元素是否组织在一起？ -不相关元素是否存在可能误导用户的亲密性? -是否有太多孤立的元素？
•对比：完全不相同的元素是否截然不同？ •对齐： -U I 元素是否整齐有序？ -对齐是否统一、有条理？ •重复：元素是否有一致性？ 3)文案 对文案的评估包括用词和行文两部分。用词是指分析： •用词是否保持一致性？即同一概念在不同情境下是否使用统一词汇进行表达。 •是否使用用户的词汇？ 行文则是分析： •是否清晰无歧义？ •是否存在冗余信息？
本方法能否代替可用性测试？ • 作为经常接触互联网产品的设计师，操作水平较高，敏锐度较强。而用户更 多是普通甚至初级的互联网用户。 • 对产品或网站整体过于了解，影响我们对基础问题的判断。 • 不了解目标用户的使用情景( c o n t e x t )。以笔者工作的电子商务公司为例， 用户群体各异。除了基本的买卖家之分，买卖家群体本身也有不同类型的细分。同 时，用户的操作水平、教育水平等也是各异的。设计者不可能了解所有用户的使用 行为。
小结 本文尝试论述一种结合了认知过程走查及启发式评审这两种可用性检视法、并予以 简化的U I 评估方法。这种方法包括仿拟真实用户体验使用U I ，以及以砖家的专业性 对U I 进行交互、视觉、文案三方面的评估。该方法的目的在于科学、快速地进行U I 评审（见附录的评审清单），从而提出合理的设计改进建议，提升用户体验水平。
文 /在天（交互设计师）
在开始之前，先一起思考几个产品： Googl e：简单一个搜索框，它希望你把问题告诉它，它为你准备好了最优的答案。 这个简单又小巧的搜索框有一天给你的答案越来越不准确了，它也就失去了存在的 意义。从搜索这个产品来看，G o o g l e的使用门槛就是一个搜索框，他们的工程师则 趴在这个搜索框的后面不停的去听去看你如何使用产品，希望得到怎样的答案。然 后调整机制和算法，给你点击搜索后最好的答案。 Twi t t er ：一个输入框，任意输入 1 4 0个字符，发送出去。这，就是使用门槛。从人 ： 交换信息的另一个方面理解，它的门槛又是如此之高：一个陌生人闯入公共空间的 对话能力收到极大限制，对话能力不平等等问题。 Cr ai gs l i s t ： ：这个服务值得研究，一家美国分类信息网站，几大分类栏目涵盖了人在 社会中生活的基本需求。界面上看不到任何图片，保留最基础的文字和链接样式， 界面 设计宛如扳手和螺丝刀，去年盈利超过 1亿美金，超过 1 0年皆为保持全球 A l e x aT o p3 0 ，目前员工人数 3 0 ＋。只是从使用门槛来看，除了要求付费部分的栏 目之外，你只需要输入你发送信息的标题和内容就完成了整个过程。关于垃圾信息 干扰，信息真实性等棘手问题。别担心，他们早已用机制和机器来解决了。 从他们身上，我们可以看到一点共同点： · 优秀的互联网基础服务。 优秀的互联网基础服务 · 足够低的使用门槛推动了用户的几何增长 · 持之以恒的优化体制、机器 O k a y ，我们回到主题。 我以自己设计产品的一个例子为 D e m o －淘宝网店铺产品，和各位分享从产品生长策 略和产品 U E优化之间的平衡中改进的思考方法和过程。 一、了解现状，用户把时间花在产品中哪些地方？ 首先要去了解用户在使用产品中的现状，再结合产品长期策略来权衡如何优化机制 和机器的作用。经过了分析了解后，我把这些用户行为简单归类为以下几个部分。
· 维护分类：添加、删除及编辑店铺内的商品分类； · 归类宝贝：把商品归纳如已建立好的商品分类； · 装修店铺：编辑店铺各个页面及模块，实现个性化展示效果； · 上传及管理素材：上传及管理店铺和宝贝所使用媒体素材，如图片、视频、F l a s h等； · 查看分析数据：查看分析店铺经营数据，如上周哪个商品卖的最多，哪个型号颜 色最畅销等数据变化； · 营销促销及推广：根据数据变化及经营策略，开展营销推广或者促销活动。如使 用品牌广告、直通车、淘宝客、钻石展位、超级卖霸、口碑营销和事件营销等营销方式。 二、分析结构，找出重点 O k a y ，看到以上 ，看到以 6项用户每天为止忙碌的事情。我们需要思考在线下领域，作为经 营管理一件生意，需要涉及的方面和上面用户的行为有哪些重合。很容 易发现，除 了最后两项之外，其他事项只是因为使用了互联网这个媒介而产生的“ 冗余 ”劳动。 这些事项对于凸显生意价值意义不大，却占用了用户太多时间来学习 和使用它们。 既然是因为“ 系统 ”而产生的冗余劳动，这些事情就需要我们用机器的方法去考虑， 如何使用改进产品的方法来帮助用户降低使用门槛，把时间和精力 放在更能凸显商 业价值的领域中去。 三、为改进设定目标
这里我以前两项为例，来继续分享分析方法和改进方式：维护分类和归类宝贝。我 们需要了解 1 ，它们是做什么的？ 2 ，用户现在如何使用它们。3 ，分析用户行为之 间的共性和差异性，为机器的出现提供逻辑依据。4 ，解决以下问题：· 降低用户 使用门槛（特别是商品多的用 户）· 解决新手用户不知道如何分类的困惑 · 统 一买家体验，使消费者能在不同的店铺中按照一种逻辑路径来发现商品。 接下来我们看看用户目前如何使用分类和归类功能：显而易见，店铺商品分类是为 不同属性的商品归类。典型逻辑是用户需要首先在后台创建一个分类属性，如手机。 然后发布一件手机商品，再回到后台把这件手机商品放到分类中去，接下来周而复 始这个漫长的过程。接着搜集目前存在哪些使用方式，我简单归类了几种 常见类型， 如下图。 在页面加载的时候考虑了用户慢速连接的使用情况，减少样式的加载，使用备选方 案保证主要内容可见。 继续分析，它们的分类方式分为以下几个方式 继续分析，它们的分类方式分为以下几个方式： · 按商品属性分类 · 按品牌属性分类 · 按优惠促销分类 · 按新品上架时间分类 · 自由分类 四、找出简单的规则和规律 如何以机器的形式来大幅降低以上方式所需的操作门槛。拿一个分类为例子：从表 现的共性中，比较容易看出来，只需要用户简单的勾选操作，一切就可以很简单的 完成这些复杂操作。比如商品属性分类，用户在发布商品时已经选择了 一次商品分 类，我们只需要把前台的发布的商品关键属性路径迁移到店铺分类中即可。用户只 要发布了一款 N o k i a手机，那么他的店铺类中将会自动出现这个类 目，并把宝贝归 类进去。当商品下架之后，这个属性和宝贝将会一起被下架。又如按新品上架时间 分类，现在的情况是用户需要把新品一个一个全部归类进去分类，而更换商品时则 需要繁琐的将旧商品移出分类，把更新的商品一个一个归类进去，新的方案只需要 用户指定某段时间内发布的新宝贝则自动归类和替换循环。
五、确定优化的展现形式 这几个机器模型已经产出，接下来遇到一个问题就是：加上店铺原有的手工分类， 和我们刚才提到的新的自动分类。形成了两种分类方式，究竟是完全分离开来还是 合并在一起呢？ 这三种设置和展示方式各有利弊，最终我 们考虑还是使用方案 C 。主要考虑： · 统一买家购物体验，只出现一种商品 划分逻辑区域； · 店铺分类是一个完整的功能，完整性 是用户对功能认知的基础； · 在策略上希望引导未来以自动分类为 主来降低操作门槛，同时满足用户的个性 化需求，允许手动调整。 六、友好的改版
方案确定后，紧接着遇到了来自设计上的几个挑战：挑战 1 ：分类页自动出现大量 自动分类，夹杂在原有手动分 类中，很难区分各自的任务。挑战 2 ：自动分类可以 任意移动至手动分类中，分类穿插。容易混淆。挑战 3 ：用户对于新的分类方式心 有顾虑，对于新方式理解不清晰，对其实现功能认知模糊。 面对这几个挑战，我接着对产品进行一些优化，形成一个 B e t a版：
视觉层次：无论是新手用户还是中间用户，很难通过文字的区别来判断两种不同的 分类方式。故采取颜色层次对比来区分这两种方式，尽量减少信息的干 扰。具体表 现为普通手工分类方式为蓝色边框，自动分类类目为绿色边框。以此来清晰区分手 工分类和自动分类的差异。让用户更加灵活的使用这两种工具为自己所用。 初次产品学习机制：当用户订购此服务后。进入宝贝分类管理页面，系统自动默认 定位锚点到自动分类首位，知会用户新特性的位置。并以弹出气泡的形式 描述功能 重点。重点知会三个方面：
1 .它是什么样的？位置在哪里？ 2 .我该如何快速使用它；3 .它能帮我做什么？ 至此我这个店铺产品的“ 自动分类 ”降低产品门槛例子就列举到这里。 最后，如果非要有一点结论的话： 1 .准确衡量产品价值天平，降低门槛。 找出产品真正的价值区间，无法凸显用户价值的繁琐功能是调整重点。把节省的成 本和时间用在促进用户实现价值的产品领域中去。 .分析昨天、观察今天，为明天设计。 2 从用户的行为和动机中划分产品的门槛结构，并观察用户如何操作和使用产品，有 什么特殊习惯，哪里容易出错。最后需要领会产品一个季度甚至更远的策略计划。 从U E的角度来推动产品的友好的生长和进化。 3 .改版的过程比发布新产品更重要。
文 /咏沙 （交互设计师）
瞬间的设计是什么？ 良好的用户体验，全在于那些完美的瞬间。当一位用户从购物搜索结果页 面跳转到某个店铺的时候，他第一瞬间可能是想看看这个店铺的风格及其 信用；而下一个瞬间可能就开始琢磨如何使用页面中的导航来观看某个宝 贝介绍。再然后则可能是询问怎验购买，从哪里注册，或者看看商品是否 打折，尝试联系这个卖家。每一个瞬间对于完整的用户体验来说，都是不 可或缺的一部分，因为他们都有可能加强也可能摧毁用户对某个产品或公 司的信心。
设计师要做什么？ 我们的工作不是设计花哨的页面，而是要设计美好的瞬间。在用户进行选 择的瞬间，我们要帮助他们做出正确的决定，我们要留意创建怎样的交互 行为以及鼓励人们输入、编辑、搜索和共享，激励他们完成所有的他们希 望做的事情，可以说这就是我们要做的——设计一些东西来支持用户达成 每一个目标，而不会干扰或者妨碍到他们，同时，把这些完全不同的部分 凝成为一个整体。只有这样他们才能相信我们产品，喜欢我们的服务。 好的设计绝不是单纯的因为天才的创意或者灵感爆发的一瞬间而产生的 好的设计绝不是单纯的因为天才的创意或者灵感爆发的一瞬间而产生的， 只有设计师在“ 持续改进 ”的迭代方法中才能达到好的效果，你必须通过 不断的“ 质疑自己 ” ，在不同的设计种找到缺点，并寻求 更好的方案来改 进它。B i l lS c o t t在他的《W e b界面设计》里提到了关于富交互设计的六 个原则告诉我们如何发现并找到解决的办法，我遵循这些设计原则，通过 实例和数据来和大家一起分析一些有趣的瞬间，指导我们的设计。
一、直接操纵原则 直接操纵原则就像 A l a nC o o p e r在《A B O U TF A C E2 . 0 》中陈述的那样 ” ： “ 在哪里输 入，就在哪里输出“。例如编辑内容的操作完全可以不用重新打开页面，而直接在 当前页面进行就可以了。 f l i c k r是用到即时编辑照片信息的网站。这种方式更直截了当，用户不用切换当前 页面就能完成。他们将更乐意为他们照片改名字，那么也就意味着会有更多与照片 有关的元数据被记录下来，方便其他用户更好的搜索和浏览。我们先分析一下在这 个操作的交互瞬间。
每个交互元素在不同触发事 件下所表现的响应状态。其中橘黄色区域是隐藏在初始 状态后面发生的动作和出现的元素。
邀请编辑——当鼠标悬停在标题上，标题立刻显示黄色背景条和一个“c l i c kt o e d i t ”的提示条出现，告诉用户当前区域是可编辑的并引导他们去点击。 编辑——单击以后，就立即进入到编辑模式，标题原位置出现了标题表单和 ” s a v e ” “c a n c e l ”按钮，用户就能非常清楚他们是在编辑标题。 （这种方式的缺点就是多出 来的按钮会把照片顶到下一行，造成排版不稳定） 完成——保存方式有很多种，f l i c k r采用了文本的 ” s a v i n g … “ 临时替换标题，一 旦保存完成，新标题就会以非编辑的样式出现。 上述例子只有在鼠标移上去时才能被用户发现是可编辑性的，那么很可能存在一部 分用户没有用鼠标移上去而忽略这些邀请。为了让功能更易被发现，可以采用在标 题边放 ”编辑“ 链接。 （不过这也会影响到页面的视觉干扰问题，如果有过多的功能 提示会造成页面噪点过多，可用率下降。 ）
二、保持轻量级 D i g g在早期的时候，用户想要推一篇文章，需要经过两步操作。而现在的改进版只 要单击 ” d i g “ 马上就可以记录一次投票。就因为 ”单击、结束“ 容易了一点，带来 g 了用户活跃度和网站点击率的飞速增长，这正是交互轻量级设计的一大作用。 1. 费茨定律 费茨定律指的是：移动到目标上的时间 ( T )和移动距离 ( D )的对数 ( S )成正比。用 公式表示为： T=a+bl o g 2(D/S+1)来计算。其中 D ：鼠标达到目标的距离 S ：目标的宽度（尺寸） 我们可以简单的理解为：目标定位越容易，距离鼠标当前的位置就应该越近，目标 占用空间应该更大。为了简单，我们可以把功能都集中到一块（如放在菜单栏和工 具栏中） 。但是这样就违反了费茨定律（找起来会很费劲，距离也会增加） 。通过上 下文工具把操作放在相关内容附近是不错的办法。
2. 实时可见的工具 d i g g在每篇文章旁边，有一个推举的记分卡，下方的 ” d i g gi “ 按钮要比其他的操 t 作显得明显。鼠标悬停的时候 ” d i g gi “ 的按钮边框变成黑色突出显示，单击 ” t d i g “ 后，投票结果马上记录并在记分卡上实时更新。同时 ” g d i g “ 按钮灰掉不可点， g 标签文本也变成灰色 ” d u g “。 g
i g g一样，豆瓣的打分也是网站的核心功能。因此明确的操作（评级）邀请非常 和d 重要。打分后，用户可以随意更改打分分值，对评价作出删除和修改。
s h u t t e r s t o c k把加入的收藏的图片总是显示在页面底部的遮罩层中，用户可以随时 看到并编辑自己添加的图片。
3. 保持关键内容可见
G m a i l在页面加载的时候考虑了用户慢速连接的使用情况，减少样式的加载，使用 备选方案保证主要内容可见。
淘宝的 l i s t i n g页面一次改版，鼠标悬停在宝贝图片上时，不仅出现大图，同时还 在时间维度上对卖家推荐的商品轮播显示，用户同样可以点击下方的小图来选择查 看。不仅保证了关键内容可见，同时解决了多信息的展现和交互。
4. 只做一件事情 L i n k d i n消息列表中， “ 用户名 ”承载着两个交互行为：鼠标点击后跳转到用户资料 页面。 ，鼠标悬停 0 . 5秒以后出现弹出层，显示该用户简介。如果我们不做 0 . 5秒的 限制，就会出现用户在鼠标以上去时立刻显示弹出层，那么很可能会有用户认为这 个链接只具备这一种操作功能，而忽略了它可以点击的功能。所以对一个交互行为 只赋予它一种功能，多种功能需要考虑用其它方式去实现。
A m a z o n用另外一种方式来解决多功能的展现。星星打分的信息包括两方面：鼠标悬 停展现弹出层显示每颗星的打分人数；鼠标点击后显示评价详情页面。如果把这两 个信息同时通过点击星星来实现就会出现上述类似问题。A m a z o n则是通过增加一个 类似下拉的按钮来承载鼠标悬停的交互行为，把点击行为只留给星星。
三、不要打断任务流 用户在每选择一个操作时都希望当前的任务是连贯的。页面刷新会人为的造成用户 体验——或者说用户心流的中断。[在由 h a r p e rp e r n n i a l出版的《心流：最佳体 验的心理学》一书中，把心流定义为：当人们进入一种全神贯注的状态时，他会感 觉一切都是水到渠成，不费吹灰之力。] 1. 三个重要的交互相应参数 J a k o bN i e l s e n提出了关于交互的相应参数，这三个准则 3 0年后的今天依然是不变 的。[ M i l l e r1 9 6 8 ;C a r de ta l .1 9 9 1 ] 0. 1秒 是用户判断系统瞬时反应的时间，意味着在该时间内显示反馈结果用户是可 以接受的。 1. 0秒 是用户保持不间断的思维流的限定时间，即用户会注意到这样的延迟。如果 没有特别的信息反馈该操作超过 0 . 1而少于 1秒，他们会比较难以忍受。
10秒 是保持用户关注当前对话框的极限时间。对于长时间的延迟，用户会想在等 待计算机完成期间处理其它事务。所以需要显示计算机将要完成的时间（通常选择 进度条或百分比来表示） ，不然用户期待会大打折扣。
另外，用户的反应时间不仅仅有上限，同时也有还有下限，也就是说他是一个阈值 区间。在视觉感知领域，人眼观看物体成像于视网膜上，并由视神经输入人脑而感 觉到物体的像。当物体改变时（时间小于等于 0 . 0 5秒） ，由于视神经对物体的印象 不会立即消失，因此感受不到它的变化。人眼的这种性质被称为“ 变化视盲 ” （c h a n g eb l i n d n e s s ） 。因此我在上述 3个响应参数的基础上，加入了 0 . 0 5秒这个参 数，作为衡量人眼对计算机作出反馈的最小值。[注：也有数据显示 0 . 0 4秒 ]
Gt al k 我的 G m a i l里通常嵌入 g t a l k 组件 ，在我的鼠标移动相关好友名字上时，该好友 区域高亮显示，且显示覆盖层显示该好友详情。鼠标移出时该覆盖层消失。这两个 过程的覆盖层响应时间都控制在 0 . 1秒时间内，用于响应用户的反馈。另外，当鼠 标悬停后快速（< 0 . 0 5秒）离开高亮区域时， 覆盖层并没有随之消失， 这是为什么呢？ 由上述的用户最小反应时间可以看出，正常情况下用户操作鼠标移开的时间也应大 于0 . 0 5秒以上，如果小于这个值，多半属于非正常情况下的用户操作行为。比如： 手指不小心碰了鼠标一下等。这时候设计师将这种情况判断为防止用户误操作而依 旧显示覆盖层信息，想的所么体贴啊！
2. 用虚拟的视觉效果 当页面加载时间过长时，用虚拟的视觉效果提前给用户展现，来满足他们的预期， 是个不错的办法。 l i v e的图片搜索在图片加载过程中将数据正在读取的图片用灰色背景填充而不是显 示空白，让用户感觉这个加载的时间不会太长。
3. 缓解长时间的操作疲劳
T E D是一个关注分享科技、娱乐、设计等领域前沿思想的视频网站。这个网站不单 单是我常去汲取灵感的好地方，他们的播放器设计也是我认为做的最细致的。上图 正在播放一个教授的演讲，鼠标移动到播放进度条上时我们会发现：当前视频被自 动化分出不同片段，你可以 h o v e r查看详细文字提示并点击定位到该片段去播放。 很棒对吧？该设计充分考虑到用户长时间观看视频带来的疲劳，或者被迫中断以后 重新定位的不便，于是将大于 1 6分钟视频做了划分。
四、提供引导邀请 我们有句古话： “ 酒香不怕巷子深 ” 我们有句古话：叫 。可是在互联网你如果遵循这句话就会死得 很惨。因为我们的服务实在太多了，用户如果找不到他们想要的信息，会毫不犹豫 的离开。提供邀请有利于帮助他们建立熟悉的体验。
上图是 A b s o l u t e l y网站的设计师的个人 b l o g ，他的 b l o g独特点在于每个页面内容 都经过精心设计。而 T w i t t e r是他积累思想和灵感的常用工具，因此在页面的首页 都大大的显示了“f o l l o w ”的信息提示和邀请。在这里关于邀请的细节他做了很多尝 试，我们不妨来看看。
可以看出， 设计师仅仅改变了邀请文案， 从之前的“ 我做什么 ”改成“ 你可以做什么 ” 到“ 你可以在哪里做什么 ” ，就将 f o l l e w e r s的百分比提高了 2倍。
可以看出， 设计师仅仅改变了邀请文案， 从之前的“ 我做什么 ”改成“ 你可以做什么 ” 到“ 你可以在哪里做什么 ” ，就将 f o l l e w e r s的百分比提高了 2倍。 Googl edoc s
2. 动态邀请 动态邀请适合提示用户当前页面包含什么功能。用户一般没有耐心去看文字，利用 动态邀请可以在交互过程中吸引用户，并引导他们进行下步操作。 Googl emap G o o g l e m a p增加的“ 街景 ”模式浏览用小黄人引导发现新功能。
五、过渡转化的使用 在《m i n dh a c k 》一书中揭示了人脑鲜为人 知的工作原理。其中提到了“ 突然的移动或 闪烁会吸引人的注意力，这正是负责视觉处 理的第二块区域的功能。这就说明“ 动画 ” 或“ 动态的变换效果 ”会成为 w e b界面中吸 引人注目的地方。过渡的使用它会造成视觉 干扰，扰乱我们的思维，只有在特定的情况 下使用特定的方式才能达到到理想的效果。 展开 /收起 苹果网站左侧分类导航栏采用了响应式展开 收起的动画方式，不仅节省了空间，还把注 意力聚焦在当前的 t a b下面。 位置变化 g o o g l e （不是谷歌）的个性化搜索帮助在用户登录时对每条搜索信息进行相关操作， 你可以发表评论，将该信息置顶或删除，用来维护自己想要的信息。点击关闭按钮后， 他就通过瞬间气体消失的动画生动的表现当前的信息已经删除。点击那个小箭头， 当前信息会动态漂移到最顶部。告诉你他的位置已经出现了变化，如果不用这个动 画效果，你可能会莫名其妙，甚至没有发现它的变化。
告诉当前的状态 f l i c k r批量上传时，通常系统处理时间会比较长，甚至还有可能产生错误导致操作
中断。他们采用了对每个照片的上传进度进行实时反馈为了，告诉用户当前的状态， 从而给他们的错觉认为 该过程不是那么长，加速了用户的等待时间。
i g o o g l e在页面又是个告诉当前状态的例子。用户带开页面时会提前显示各个组件 的样式框，同时显示“ 正在加载 ”的状态告诉用户内容还在处理中。
六 即时响应 用户进行的每一步交互，都希望看到清晰、及时的提示和上下文反馈。A p p l eH u m a n
I n t e r f a c eG u i l d e l i n e早有提到过“ 反馈和沟通 ”原理，对其有如下描述：
告诉当前的状态
实时更新 B i n g T w e e t s是一个由微软、T w i t t e r和 F e d e r a t e dM e d i a共同打造即使搜索的独立 网站。它的好处就是可以搜索 t w i t t e r上最新最快的消息。你可以从不同 t a b下的 标签里实时哪些是当前最热的（大号字体显示） ，由于 t w i t t e r的更新非常频繁，因 此这些标签也是动态变化的，这一分钟和下一分钟看到的最热的标签都不同。
案例 淘宝的注册页面交互过程很复杂，及时检验显得很重要。他能够告诉用户当前输入
是否正确，而不用再点击提交时再做判断。比如说：在点击输入表单给予操作提示； 输入出错离开焦点给予错误提示； “ 会员名 ”输入时有 5 2 0个字符的限制，为了告 诉用户当前输入的字符数（有的用户不理解什么是字符）等。
最后的最后 写到这里，应该结束了。不过我还想分享关于“ 乔布斯 ”的 3个小故事。 在m a c i n t o s h系统开发阶段，设计团队竟然花了 6个月时间用于细化滚动条，大家 知道滚动条在任何操作系统里都是很重要的，但却不是用户界面中最显眼的要素。 尽管如此，乔布斯还是坚持要对滚动条改成希望的样子，设计团队不得不修改了一 个版本又一个版本。 设计工程师说： “ 乔布斯可以一个像素一个像素地进行对比，来看看是否匹配。若 是有出入，某些工程师可就要挨一顿臭骂了。” 在i t u n e s发布会的前 2 0分钟， 乔布斯还在和其他设计师针对左上角的字体进行讨论， 而其他的高层却急得火烧眉毛，因为他们似乎还有更重要的事等待他确认。 设计的品质在于细节，只有偏执狂才能成功。我一直以这些小例子作为激励我设计 路上前进的动力，每次在我纠结这个地方用下拉框还是 r a d i ob u t t o n的时候，用 1 2号宋体还是 1 4号雅黑体的时候，我都不会在认为这是浪费时间，是的，也许这 些微小的细节和瞬间我们很容易忽略掉，但是正是这些细小的东西在潜移默化的 改变着人们的生活，还有什么比做这些事情跟激动人心的呢 : -)
w e b . c n . c o m
文/ 无酬 （交互设计师） 在项目开发团队中，团队成员之间的沟通过程中经常会出现各种各样 的冲突和摩擦，仔细分析这些冲突的根源，你就会发现。大部分冲突 的产生都有一个共同的特点即：引发冲突的事务的决策权不清晰，或 受到了某种程度的干扰。 以下是几个引发冲突的案例： 【案例 1 】运营看到视觉设计师的方案，运营： “ 我觉得这个秒表的图 形应该用圆形而不是方形 ”
【案例 2 】交互设计师发现一个需求时向产品经理建议加上某功能，产品经理： “这 个功能我知道有用之前也考虑过，但担心交互上太复杂用户理解不了就没加。” ——产品经理基于自己对交互复杂程度的猜测而放弃了某个产品功能，忽略了交 互设计师的角色定位。
【案例 3 】交互设计师要用新窗口的方式代替弹出层方式，已经和产品经理达成 一致了。开发工程师： “ 我不接受！…” ——只有项目管理者才有拒绝设计方案的权利，开发工程师利用自己在项目进度 中的制约作用行使不属于他的决策权。
引发冲突的根源 这些对话引发冲突的一个共同的根源在于：项目开发团队各个角色间的决策权是 混乱的，一个角色可以跨越自身的职责范畴干扰其他角色的决策权，开发可以做 出产品经理的决策否定设计方案，运营的意见左右视觉表现。这种决策关系的混 乱最终反映到产品上就必然导致产品的混乱。 决策权受到侵犯存在以下两种情况 : 决策权受到侵犯存在以下两种情
显性侵犯 案例 1中视觉设计师的决策权受到非视觉专业领域人士的直接干预，属于显性侵 犯。这种侵犯肯定会遭到抵抗。面临这种情况时被侵犯者需要具备一定的职业技 能和较强的沟通技巧，才能完全不受这些非专业意见的影响。虽然只要具备了上 述能力设计师就能保护自己不受侵犯，但做出专业决策要依赖于非专业技能这件 事本身就是一个严重的问题，首先非专业技能的学习需要付出高昂的学习成本，
另外即使具备了这种技能也会有很多时间浪费在无效沟通上，尤其是对新设计师 而言他们很难保护自己的决策权不受侵犯。最终导致非专业意见跨越职责分工影 响产品最终形态。
隐性侵犯 还有一种侵犯属于隐性的，比如案例 2中：产品经理在产品功能规划阶段砍掉了 还有一种侵犯属于隐性的，比如案 一个用户需求量很大的功能， 原因是他推断此功能交互方式太复杂用户难以理解， 这个过程是发生在产品经理头脑中的思维过程，是完全不可见的，产品经理根据 自己对产品交互方式的理解作出“ 太复杂 ”的判断显然是不恰当的，对交互方式 复杂程度的判断应该属于交互设计师的决策范畴，但由于砍掉产品需求这个过程 是隐性的很难被发现的。所以交互设计师甚至没机会察觉自己的决策权被侵犯， 就已经失去了决策机会。
以往的工具及其局限性 针对这种决策权混乱的情况，我们已经有一些基本的管理工具，比如流程管理就 在一定程度上避免了混乱，他通过划分每个角色的职责范畴来规定各个角色在项 目开发事务中分别拥有的决策权，但这种划分只能解决项目主干任务上的决策权 界限问题。对与项目分支任务中的细微决策点和决策权的隐性侵犯问题却不能有 效解决。 在分支任务中的决策权混乱和决策权的隐形侵犯问题有没有更好的解决方式呢？ 制定更加详细的流程，规范项目开发的每个细节？繁复臃肿的流程会大大降低系 统的执行效率这样做显然不可行。因此，就需要建立另外一种规则，它不具有流 程的强制执行的特点，因此更加灵活变通不会影响效率，但同时它又需要具有一 定的约束力。这就是为什么我们要引入伦理的概念。
伦理工具的特点 伦理具有以下特点使它能够成为制止混乱的有效工具： 伦理在一定程度上起到了调节社会成员之间相互关系的规则的作用，类似于约定 俗成的交通秩序，引申为人在社会上为人处世的规则。它试图从理论层面建构一 种指导行为的法则体系，即“ 我们应该怎样处理此类处境 ” ， “ 我们为什么 /依 据什么这样处理 ” 。并且对其进行严格的评判。 伦理这种“ 约定俗成 ”和“ 指导法则 ”的感性特征使他可以影响我们处理事情的 伦理这 方式，但又不具有强制色彩。而且它通过公众评判产生约束力（例如古代贞节牌 坊的象征意义，就是对受封者守寡行为的约束） ，在项目团队中这种约束力来自 项目成员对规则的普遍认同，对不遵守规则的成员进行评判。
项目开发伦理的基础内容 为了解决决策权混乱的问题，我们需要项目成员彼此尊重对方的角色定位和职业 分工。这也就形成了项目开发伦理的基础内容：尊重角色定位和职业分工，不同 的角色对自己职责范畴内的事务拥有最终决策权，其它角色可以提出意见和建议 但是角色本身掌握最终决策权。
尊重伦理的作用机制及其有效性 这种伦理将会给我们带来什么样的好处呢？我将通过以下案例说明： 在某项目中，设计师对产品经理的产品方向提出质疑认为功能设计不合理，并通 过用户调研手段发掘出了真正的用户需求。但产品最终并没有体现这些需求，设
计师是应该利用自己对项目进度的影响为了用户的利益“ 坚持到底 ” ，还是将产 品的风险告知产品经理并且尊重产品经理的最终决策权“ 点到即止 ” 。
坚持到底 好处：产品在我们的坚持下，虽然付出了一定的变更成本，但最终做出了有利于 用户的改动。我们得到了一个好产品。 坏处：一旦我们为了满足某些用户需求质疑产品经理在产品方向上的决策权，就 会破坏尊重职业分工的伦理，在这种伦理被破坏的情况下每个项目成员的决策就 都有可能受到其他项目组成员的反复质疑。系统的整体执行效率必然大打折扣。 产品经理在本项目中的失误没有暴露出来，因此系统无法识别自身的薄弱环节， 因此为下一个产品埋下了隐患。
点到即止 坏处：这个产品不能满足一部分用户需求。 好处：我们尊重产品经理的最终决策权（虽然不一定信服） ， 在相互尊重的伦理中， 系统高效运转项目顺利完成，尊重伦理保证了系统的执行效率。由于产品对市场 的把握不准确，产品经理团队内部做出了调整。我们形成了一个更有战斗力的项 目开发团队。 从上面的例子可以看到，尊重伦理保证了项目开发团队本身的良性发展和进化。 因此，单个产品的成败，和系统的整体强健高效相比显得微不足道。
尊重伦理的基础 相互尊重建立在职责分工明确的基础上，只有在职责分明的情况下才能识别哪个
角色拥有优先决策权，流程工具保证了主干任务的明确分工。在分支任务中如果 存在角色职责模糊的地带，就需要遵循能力尊重原则，设计师深入理解用户行为 的能力使他对产品细节有相对优先决策权。产品经理对市场的把握能力，使他在 产品方向上有相对优先决策权。
如果不能明确职责分工，设计师干扰产品策略，开发干预产品设计。不但会影响 适当的人作出正确的决策，当产品出问题时，系统也无法识别出错环节，不利于 系统的进化。
尊重伦理在团队中如何形成？ 一方面：要求角色有能力证明自身决策的权威性和正确性
其实很多质疑者的质疑习惯源于以往的质疑成果的激励。质疑者大多在之前有过 成功质疑的经验，并且认为自己的质疑使产品更加完善。这种成功质疑的对象必 然是那些没有能力证明自己决策的正确性和必然性的不成熟的角色。如果质疑者 的每次质疑都被成功说服。那她的质疑习惯就会被尊重习惯和信任习惯所取代。
对与设计师来说，就是自己的每一个设计决策都要禁得起质疑。能在每一次受到 质疑的时候给出充足的理由。在经过多次合作后，其他成员自然会建立起对你的 信任和尊重。质疑声会逐渐消失。最理想的情况是设计团队的大多数成员都具有 这种能力，那整个部门都将收到足够的尊重，即使是部门中少数不成熟的成员（这 里的不成熟是职业技能而非专业技能） 也可以享受这种尊重成果并尽快成熟起来。
另一方面：依靠所有成员对尊重伦理的认同。
所有伦理的产生都源于，利他利己原则，利他是为了利己。就像红灯的时候让别 人先走。是为了自己在绿灯的时候不会受阻一样。尊重伦理也是同样的原理，通 过案例教育使成员认识到尊重原则的重要性，尊重别人是为了让自己的决策更受 尊重，当大家都对这个伦理产生一至认同的时候伦理建设就基本完成了。
什么时候可以突破尊重伦理（推倒贞洁牌坊）？ 虽然贞节牌坊制造了“ 和谐 ”的社会风气，但也束缚了广大妇女同志追求性福的 虽然贞节牌坊制造 脚步。严重的甚至有可能对“ 偷情 ”的小寡妇造成人身伤害，因此有必要的时候 我们必须要推翻它，
伦理在保护角色决策权的同时，有可能会屏蔽一些合理意见。当产品的大方向不 会受到影响的情况下，这种负面的影响在可接受的范围内。但是如果产品目标出 现严重偏差，而且有可能会威胁到用户的核心体验时。是有必要突破伦理的。
何时突破伦理有一个模糊的界限：产品形态跟产品目标出现严重偏差时有必要突 破尊重伦理。
至于什么程度算是严重并没有明确的标准，只能根据具体项目具体评估。
作者 Bl og：www. s hi t web. cn Emai l : as i s oon@gmai l . com
面对涉及大量页面的产品，文案优化从何下手？看它不爽，却想不到更好的 文案方案？文案优化4 步曲，让文案变得简单、不枯燥。当面对一个产品线或一 个产品时，我们可按下面四步，去优化文案：
第一步 确定范围 确定范围的目的是为了控制工作量。 例1 ：交易线文案优化项目“范围的确定” 我们会确定它的起点、终点，以及起点和终点之间暂时不修改的几块内容。 起点：点击“立即购买”按钮 终点：买家确认付款，交易成功 暂时不修改：虚拟物品、机票彩票、退款相关页面 第二步 找出所有页面 确定范围之后，我们就要找出所有页面。那么，如何找全所有的页面？我的方法 是画出流程图或者框架图，根据流程图去测试到所有页面。 第三步 找问题 总方针：坚持两手抓，一手抓整体，一手抓细节。这两只手都要硬！
抓整体 1 . 按流程图，完整操作一遍：了解文案需求点、每个场景及场景间的逻辑、各方限 制条件、目标用户。 这是整个找问题的基础，当我们了解了场景间的逻辑后，就能帮助我们发现一些文 案B U G ，所谓文案B U G 就是有逻辑错误的文案。 例：文案B U G 这是一个旺旺提醒消息，本身就无回复入口，却写着：本信息由系统自动发出 回复 无效 。
2 . 试着为文案归类 那么，哪些文案可以归类？先看下面例子。 例：一个模式 第1 类文案叫一个模式，所谓一个模式就是同一种展现形式。 比如旺旺提醒消息都 是弹出框的形式。 例：一个场景 第2 类文案叫做一个场景，所谓一个场景就是同一种情况。 下面连两幅图片都是浏 览页面出错的时候所跳转到的出错提示页面，都是“浏览出错”这种情况下发生的
例：一个事件 所谓一个事件就是同一件事，但是他可能有几种不同的展现形式。 比如下面三个图 片，主题都是一样的，叫做: 您有一笔订单中的宝贝被卖家部分取消交易。说的是同 一件事，但却有3 种不同的表现形式：分别是旺旺、站内信邮件 。
例：一个功能 所谓一个功能就是指起到相同的作用. 比如下图两句话“还剩5 秒跳转至店铺街，轻 轻松松找店铺”和“直接去店铺街看看，那里有千万买家寻找的好店铺”，它的功 能其实是一样的，它有两个重复点： 都是为了让买家最后能够跳转到店铺街；都是 为了宣传店铺街 。
例：一个概念 所谓一个概念就是指含义相同。比如下面5 个图片，来自不同的页面。在这些页面上 都出现了买家、卖家或者宝贝所在地区的这么一个概念，但是它却用了不同的词去 表示这一个概念。
我把例子中这种文案归类的过程，就叫做“五个一”工程。这“五个一”分别是： 一个模式；一个场景；一个事件；一个功能；一个概念。 3 . 为同类文案制作模版 那么，哪些类别的文案，适合定模版？ 答案是“一个模式；一个场景”，因为这2 种情况下的同类文案量特别大，给它们定模板可以帮助我们提高效率、并且让文案 更一致更专业。下面2 个例子，告诉你如何为“同一模式”和“同一场景”的文案制 作模版。 例：为旺旺提醒消息制作模版（同一模式 文案模板） 我们要让它有：统一的开头,统一的结尾, 统一的正文格式, 同类内容格式统一 （如 下图中“查看详情”和“退订此消息”都是为了告诉用户下一步可以做哪些操作， 去哪操作。属于同类内容，我们也要把他们的格式统一起来。）
例：浏览页面出错（同一场景 文案模板） 关注它有几个 逻辑块 组成。我们在写文案的时候就要按照所定的逻辑块去写。 出错提示模版： 1 . 标题；2 . 可能的出错原因；3 . 出口提示。
抓细节 在优化具体文案时，常常看它不爽，却没有更好的文案方案？这时我们可以：去帮 助中心找找以往的说法; 去e b a y 、p a i p a i 、有啊看看类似说法；P D 、交互设计师讨论 ，但最重要的，还得借助六脉神剑。六脉分别是：不说、少说、一致、白话、清晰 、无误。
i ) 不说：交互、视觉代替 所谓不说，就是指：能用交互和视觉解决的问题，就不要用文案解决。 i i ) 少说：减量+ 突出重点 减量？减哪些？：减字数：省略重复、不言自明、用户不关心的内容、不必要的“ 介词、连词、句号、形容词 ”；选同义词中，字数更少的。减信息：据主要目的， 给主要信息 ；避免抛出所有信息。 突出重点？哪些是重点？：后果、结论等首要信息；动词（只需告诉：要做什么） 例：优化“卖家关闭交易理由” 下图是卖家点击关闭交易按钮后，所弹出的选择关闭交易理由的弹出层。存在问题 ：字数非常多，而且有重复的情况。 第一步、归类。我把它归为5 类，归类是为了帮助我们接来下进行减量，我们可以去 掉重复内容。 第二步、减量。首先减字数，比如说“交易不成功”是不言自明的内容，这边已经
在让卖家选择关闭交易理由，说明交易已经不成功了。其次减信息，比如说这句“ 买家没有开通网上银行，已经通过银行汇款给我了”，前半句不是我想说的重点， 我要说的重点是买家已经通过银行汇款给我了，所以还必须减去次要信息，只给出 主要信息。 另外，本来希望把第三类合并为一类，但P D 希望通过这几个关闭交易理 由的选择获得一些数据，所以最后没有合并，分别进行减量。 第三步 调整顺序 根据每个关闭交易理由的使用频率调整顺序，使用频率越高，放在越上面！
i i i ) 一致：用词、基调、标点、格式都一致 例：统一 交易线中 与“价格”有关名词 在交易线中，很多页面都涉及到了与价格有关的名词，但用词却非常不统一。主要 问题表现在：一个概念，多个词语表示；甚至一个名词，却代表了多个概念。 第一步、列出所有的词汇。把交易线页面上出现过的与价格相关的词汇都列出来， 看看一共有多少名词 。 第二步、列出所有含义。看看在交易线页面上，我们想要传达给用户的与价格相关 的含义一共有多少种？ 第三步、为每个名词重新定义。让每个名词只对应一个含义。定义完毕后我们拿出 第二步中列出的含义表对照一下，看看是不是把所有需要表达的含义都表达了：如 果没有表达完全，那就再加新的名词；如果表达完全了，我们再看看是不是有多出 来的或者含义重复的名词。比如这边的“商品总价”和“总价”是一个含义，我们 可以把它们合并 。
第四步、经过第三步后我们就可以得到这张名词定义表。每个词只对应一个含义， 并且把所有该表达的含义都表达了 。
第五步、根据第四步得到的名词定义表，回到页面上，调整词汇 。 v i ) 白话：对方的语言、绝大多数人的语言 v ) 清晰：内容清晰+ 视觉清晰 内容清晰是指：不用 不够直接 或 空洞含糊 的词句 视觉清晰是指：当一个句子有多个含义，用“标点符号、空格、分段”等方式分割 。 例：优化W C 提示信息 下图W C 里的提示信息，没有分段也没有标点符号，首先就不符合视觉清晰。 第一步、分段。当一个句子有多个含义，用“标点符号、空格、分段”等方式分割 。这么一大坨东西，其实要表达含义只有2 个，一是要爱护坐便器不要损坏坐便器， 二是万一损坏了要顾客买单。 第二步、减量。如何减量在第2 脉“少说”中已经说了，不再重复。 第三步、优化。做到内容也清晰。内容清晰是指 “不用 不够直接 或 空洞含糊 的 词句”。比如这边说“请正常使用坐便器”，那么怎么才算正常使用？其实就是要 顾客爱护坐便器。再比如说“由顾客承担责任”，到底承担什么样的责任？其实就 是要顾客自己买单。我们要把这些含义说清楚。 i v ) 无误：语法正确+ 无概念歧义 例1 3 ：“概念歧义”实例 下图旺旺提醒消息，是在买家刚刚拍下宝贝还未付款时，自动弹出提醒买家的。它 的标题是“买家宝贝”。
第四步 批量解决问题 文案优化四步曲的第4 步是“批量的解决问题 ”：怎么解决在第3 步找问题中已经说 了，如果我们能够很好的应用文案分类的方法、制作模版的方法，就能让我们事半 功倍，批量解决问题。 结语 文案优化能带给我们什么？从宏观上说，它能带给用户更好的体验 ，提升网站品牌 、品质。说的更具体点，文案优化可以帮助我们“提高产品使用效率、减少用户流 失率 、提高P V 转化率 、间接的减轻客服工作”。 文案优化四步曲的核心是两点论：一手抓整体，一手抓细节。抓细节部分我已补充 到襄襄之前整理的文案规范中，版本也升级啦【文案规范 V 1 . 2】，供大家参考。
用户心智模型与 文 /淡月（交互设计师） 上季度咱们组一直在整理U E D 的交互设计指南，每周都会进行一次讨论，这 实在是个有趣的事情，也会有很多意外的收获和提高。 前几周在讨论“符合用户心智模型”时，发现这个概念跟“隐喻”有些纠结 不清，我理了理思路，试图进行一些解释。 不过在此之前，先讲一个故事吧: ) 有段时间，老爸老是问我一个问题：“你们网站什么时候做完啊？做完了你 是不是就得下岗啊？” 很囧的问题：）实在有点回答不来，在他的一再追问下，我只好说：“北京 城修了多久您该知道吧。之前的咱就不说，就说这建国后，修了人民大会堂 又修歌剧院，修了国家博物馆修北京博物馆，这鸟巢水立方，也才刚竣工， 中央电视台那还修着呢，您说这北京城啥时候修完啊？”老爸点点头，再也 不问了。 很显然，在我老爸的理解中，建设网站就好比在修一栋房子，不管多大的房 子，也都有修完的一天，这就是他在这件事情上形成的“心智模型”。而我 一开始，想通过向他讲述互联网的方方面面，来使他明白。这是典型的以“ 实现模型”为中心的做法，虽然这样做并没有错，可惜老爸在这个问题上， 只想得到一个简单的答案，而不是成为一个知识渊博的人。所以，因为我最
与隐喻 后打的比方，也就是我的“表现模型”，与他的认知和判断比较相近，他很 容易就明白了这个概念。 这里衍伸出一个问题：我通过一个比喻，解决了这个问题，“比喻”是交互 设计里常说的“隐喻”吗？那我究竟是用了一个“隐喻”还是“符合了他的 心智模型”？ 在回答这个问题之前，我们先弄清楚“隐喻”是什么： 作为交互设计师，我们的大部分工作，都是在做信息的可视化。“信息可视 化”是一个很宏大的命题，往简单了说：你日常的工作，是不是都在将各种 概念和信息，用视觉的方式最后呈现出来？ 在视觉化的进程中，“隐喻”是我们常用的一种方法。比如，你设计了一款 写日记的产品，为了让用户更容易理解，你画了一个日记本样子的I O C N 来表 示它。这就是一个隐喻，用户看到这个图标，就能知道这是一个什么产品。 弄清楚这一点，前面的问题就迎刃而解：“隐喻”是做设计的方法和手段， 而“符合心智模型”是做设计的原则。方法有好有坏，但原则必须遵守。很 多时候，我们通过“隐喻”使产品更靠近用户的“心智模型”。 将信息可视化，常用的方法有三种：实现为中心、隐喻、习惯用法。在之前
的讨论中，我发现这几个概念其实也是容易混淆的，忍不住想再罗嗦几句: 各位同学还记得D O S 时代，我们是怎么与计算机交互的吗？ 那个时代，你只能在学习了一大堆计算机原理和语言后，才能对着黑乎乎的 屏幕，做一些枯燥的操作。。。那是一个全面以“实现为中心”的时代，虽 然我们都明白这很糟糕，但那时候的交互就是这样的。 后来，激动人心的W I N D O W S 来了，可视化的界面让我们很快就能上手操作电 脑。通过各种各样的图标，我们知道了，原来“桌面”“硬盘”“内存”就 是这个样子的啊！（实际上真是这样吗？）隐喻的时代全面来临了。 “隐喻”既然这么好，很多人都会产生“隐喻是用户界面设计基础”这一错 误概念。实际上，“隐喻”有很大的局限性，比如我负责的“淘江湖”这个 产品的时候，需求方曾经提出，希望能把界面直接设计成充满隐喻的“江湖 ”模样，古香古色，有山有水，有浓厚氛围。相信如果真的这么做了，是很 危险的。首先，“江湖”是什么样？如果设计师理解的江湖与客户有很大出 入，怎么办？再有，这样的界面扩展性一般都很差。而且，当用户做为新手 时，他们也许会容易接受，但这毕竟是一款希望用户天天使用的产品，在用 户成为资深用户时，冗余的界面将成为一种负担。 那“习惯用法”又是怎么一回事呢？让我们再回忆一下，你是怎样学会用鼠 标的，怎样学会使用关闭按钮、滚动条、最大化按钮。。。。在现实世界中 ，这些东西都没有实际的对照物，我们必须经过第一次的学习，才能理解和 掌握，所幸学习他们并不难，当我们学会并反复使用后，他们就成为“习惯 用法”。在用户经过长期教育后，我们的交互设计，很多解决方案，都是建
立在习惯用法之上。 你会发现，“隐喻”与“习惯用法”很多时候容易混淆，其实有个很简单的 区分方法，在现实世界中有对应的东西，才叫“隐喻”。而所有的习惯用法 都必须学习，好的习惯用法只需要学一次。 那如何让用户进行第一次的学习呢? 在这里又要引出一个概念–“手动启示 ”。 人们有一种天性，看见合乎手指大小的 东西，总要试着去按一按，点一点。 比如你看见大门上有个按钮，你伸手 一按，发现原来是门铃；当然也可能 伸手一按，地板裂开一条 缝，原来是陷阱。 不用担心人们不会 去尝试用鼠标点击 一些看上去可点的东 西，虽然他们很多时候 并不知道点击之后会怎样。 而用户的第一次教育就是这 样完成的。 以上是我的一些思考，欢迎 大家进一步讨论！
对于设计师， -挖掘用户需求，具有什么样的价值？ -挖掘用户需求，能做些什么事？ -挖掘用户需求，保持怎样的心态？ -挖掘用户需求，实践中可以怎样做？ 俺的宗旨，尽量把自己的实践方法介绍给大家，重点在 于HOW。 但俺根本的宗旨，不是教大家花很多时间去执行这些方 法，而是培养一颗贴近用户的心。
掘 师挖
设计 求浅谈 户需 用
计师
设 /交互 漓 月 ’M I
WHY针对4个对象的9点必要性 我们，或是莫名其妙的开工，根本不清楚自己接的什么产品；或是M R D \ P R D 一应 俱全，却是依葫芦画瓢，只专注于界面的设计；又或者热情高涨，很有见解，却 P K 的不是那么有理有据。这就是我工作一年来的前世今生。 当然我们的终极目的并不是尽早拿到一份数据翔实的M R D 或者缜密完善的P R D ，这 个产品/ 项目概念是什么，动机是什么，怎么做比较好等等，才是设计师们前期 想要了解的，而且希望是越早越好、越多越好。 也许有人说，有了运营、P D 、用研的达人们，设计师为什么也要凑上来围观呢？ 答：因为我们是一群自以为的、不明真相的体验专家。
【对于设计师】 做好本职工作的入门课 之前看了篇文章，作者主张先做行业专家，然后才有资本做体验专家。设计师具 备了一定U E 领域的专业知识，但只有加上对行业的用户行为、行业规则、行业特 点深度了解，才算具备谈体验的基本条件。 我是豆瓣的忠实用户，我是G o o g l e 的热情粉丝，但作为电子商务的设计师，我们 可能是天然的买家，但大都没有开过店，或是小本经营，对于卖家群体依然很陌 生，所以贴近用户深入持久地了解这个行业是似乎是我们的入门课。而即便在用 研团队介入的情况下，设计师依然需要关注和参与整个研究的过程。 一句话：先把自己打造成行业的专家或者至少是资深用户。
使设计师关注大交互 如果只是抱着M R D \ P R D 依葫芦画瓢，我们就只会专注于交互方式是否优异，控件 用的是否合适这样的交互细节。不是说细节不重要，如果产品的功能设定有问题 ，细节处理的再精妙也只是舍本求末，缘木求鱼，因为那不是用户需要的，他们 t o t a l l y 不c a r e 。关注用户、关注行业可以在不经意中把我们的注意力转移到产 品的大交互上来。方向指明了，更利于精益求精。 一句话：不要先入为主，不要陷入细节 。
提升设计师的专业技能 学工业设计的时候，在市场调研这课的设计流程中，前期调研是一个必经环节。 虽然学校时调研往往流于形式，使设计总充满学院味，但可见这项技能重要性。 掌握独立研究的方法和流程，可以帮助我们更有效的开展工作。而且方法是通用 的，即便不是设计师的角色，习得此项技艺也会受益良多。 一句话：师夷长技以进取。
【对于项目】 保证项目顺利，明确表达产品意图 要保证项目顺利执行，交互和视觉设计能够更好的表达产品意图，设计师须要对 这个产品的前世今生有个了解，不能望（P R D ）文生义。
验证商业与用户需求的契合度 可以帮助P D 去验证产品的规划和功能点是否与用户的需求有太大的差异，当差异 过大时，及时作出判断，适当调整产品方向
增强认同感与使命感 即便我们所得研究结果与P D 前期的规划内容一致，所做过的事依然不是徒劳。它 可以让团队对将要做的事抱有强烈的认同感和使命感，更好的把产品实现出来。
【对于产品】 摸清用户的底线，抓住核心体验 T A 没想到的，你给了，T A 未必高兴；但T A 想要的，你没给，那T A 就不能接受了。 基础的就是核心的，抓住了用户基础需求，改善基础体验，才能降低用户的门槛 （A 宣语录），这才是用户最离不开这个产品的原因。
有利于产品的可持续发展 我们这里的设计师们大都身兼数条产品线，每天都是多任务处理，很难对自己的 产品有很深入的认识，开发亦然。举例某产品的前端开发工程师一年换了5 人， 工作量大的话，他们只能按照我的描述去纯写代码，因为没有时间了解业务。不 同的P D 规划了不同的方向，不同的设计师设计了不同的风格，不同的开发人员写 了不同的代码，致使产品不能持续发展，严重影响了用户体验。 如果设计师可以持续跟踪用户的需求变化，并形成文档记录，一来方便自己对产 品的理解，二来可以降低其他人的学习成本，即便换了人也能把产品的原主旨贯 彻下去。
【对于资源】 在没有用研团队支援的情况下，通过快捷、便利的方法，独立研究，产生结论。
WHY
设计与艺术都是富余创意的，它们的区别在于设计是为解决问题而存在的创造性 活动。日前在U P A 参加了E l i z a b e t h 女士关于创新与创造的工作坊，区分了三个概 念：C r e a t i v i t y （创意）、I n n o v a t i o n （创新）、I n v e n t i o n （创造）。其中“ 创造”即是发现问题并解决问题。所以设计的本质在于解决问题。
WHAT1套步骤得到5个结果.... 设计与艺术都是富余创意的，它们的区别在于设计是为解决问题而存在的创造性 活动。日前在U P A 参加了E l i z a b e t h 女士关于创新与创造的工作坊，区分了三个概 念：C r e a t i v i t y （创意）、I n n o v a t i o n （创新）、I n v e n t i o n （创造）。其中“ 创造”即是发现问题并解决问题。所以设计的本质在于解决问题。 之前说过我们是一群不明真相的专家，我们“不明”的就是产品到底存在怎样的 问题。所以要解决问题，当然要先找到问题。发现表面的问题很简单，难点在于 如何攫取本质。 记得上学时有个很经典的设计课题：《坐的设计》。大家于是就是一哄而上Y Y 各 种各样的椅子，“不就是画椅子嘛！”那么沙发呢？沙包呢？树桩呢？这些何尝 不能用来坐着，可见椅子只是万千中的一种答案，这个问题的本质在于解决坐的 问题，只要可以支撑人体重量的方案都是可考虑的。没有看清本质，局限了我们 思路的广度。 我们可以尝试通过如下的步骤发现问题，消耗时间比和难度是我根据自己的实践 给出的评估：
【收集信息】 时间：全部的50%；难度：三星 信息的收集是一种带有技巧的体力活，耗费的时间较多，掌握一定的访谈和测试 技巧后，设计师也是很容易上手的。和专业用研同学的区别在于提问的质量，和 整个流程的熟练度。但总体不影响信息的收集工作。
【分析信息】 时间：全部的30%；难度：四星
A .整理信息，使之可用 B .筛选信息，使之有效 C .信息分类、关联、比较，使之明晰 分析的目的在于发现问题，本阶段会总结一些比较表面化的问题，进而得到较浅 层的答案。这个过程需要学习分析的技巧，训练思维方式，一些具体的方法会在 后文中说明。
【挖掘本质】 时间：全部的20%；难度：五星 通过收集信息了解大量（6 2 % ）的表面现象，通过分析信息找到一定量（3 1 % ）的 答案，最终为了深入剖析，挖掘那极少量（7 % ）的本质。这个阶段比较困难，但 是提升前两个步骤的质量可以帮助我们找到问题的本质。 另外，设计师的研究可以得到如下几种结果： 1 . P e r s o n a s ——给谁做 2 . 用户需求清单——做什么 3 . 重要性排序——先做什么 4 . 风险点清单——不做什么 5 . 产品设计建议——怎么做 至于产出物的形式可以具体情况具体分析，只要便于你的团队理解和运用就好: )
WHAT
HOW -5项心理建设 【主动出击】 当作自己应该做,且乐于做的事 ×主动联系项目其他角色，索取已有数据和资料比如向B I 和运营要数据，检 测产品日常数据动向； ×通过I M 、社区等途径，和你的用户保持联系比如建立了产品的群组征集建 议和反馈； ×主动作用户体验讨论的发起人，带动你的合作伙伴比如邀请其他成员关注 你的研究结果，打印一张简单的邀请卡，当然记得附上你研究的主要结果。
【TA的立场】 避免自以为，客观看待得到的反馈 尼老爷有篇文章说用户并不像我们一样关注创新，他们使用产品一定是具有某种 需要的，优化（前提是真的“优”）可以使他们开心，但为了创新而创新就不一 定了。 ×多看、多听用户是怎么做、怎么说； ×少说“我觉得怎样怎样” 很俗的道理，但是最常犯这类低级错误。
【高执行力】 制定计划，贯彻始终，产出结果 ×制定专项计划的日历； ×给自己一点压力，定时按照计划检查进度； ×给自己一点奖励，或者Y Y 老板们能看到俺们的苦心吧
【团队力量】 协同工作，搞研究应该结伴而行，三人行必有我师 ×想让别人帮助你，要做好充分的准备——比如给大家留个作业 ×完全自由参与 ×让大家觉得同样受益——比如之前给大家分享一下和用户在线访谈的技巧 ×让大家分别整理自己获得的信息——比如提炼关键词句，做成告示贴 ×集体讨论——白板汇聚信息，每个人描述自己的关键词句，给告示贴分类 关于如何利用团队和告示贴做好定性资料分析，我在U P A 2 0 0 9 参加了相关的工作 坊，觉得比较适合设计师的快速研究，后续单独分享吧: )
【心态平和】 不急功近利，做了就比没做好
HOW -3步走，重在参与 【收集信息】 努力了解那62%的现象 如果允许，最好经过定量的方法，可以获取很多可靠的数据，论据更充分。 ×在用研团队的支持下先行收集问卷，分析数据，整理出报告 ×没条件时，建议在相关产品的页面自行设计问卷，或设置入口收集用户反馈。
收集资料的渠道 ×线上：I M 访谈 在线问卷 帮派收集 邮件拜访 在线焦点小组 ×线下：面对面访谈 电话访谈 可用性测试 实地调查 以身“试”法 过往的资源
其它项目的资源
用户访谈 方式：一对一现场、一对一I M 、电话 数量：8 1 5 人 准备：访谈提纲 交付物：访谈的整理记录 视频或录音
观察法 ×测试观察 数量：3 6 人（依条件） 准备：测试设备（用研）、观察的要点清单 方式：笔记、工具辅助、清单标注 ×实地调查
准备：相机、录音笔、观察的要点清单 交付物：调查报告 现场照片 录音/ 视频
偷窥法 数量：不定 方式：每天给自己半个小时，去帮派转转 其他途径搜刮用户工作、生活的描述 交付物：笔记 聊天记录等 不限
【信息的整理、筛选和分析】 为了发现那7%的本质 如果允许，最好经过定量的方法，可以获取很多可靠的数据，论据更充分。 ×在用研团队的支持下先行收集问卷，分析数据，整理出报告
信息的整理 ×集合所有渠道的信息，整理成附录 ×回顾所有信息，尤其是那些别人收集的
信息的筛选 ×甄选有效的信息，可以用批注、记笔记、引用原话的方式 ×提取关键词、关键句，他们可能隐藏着潜在的需求信息
信息的分析 【分类】 ×制作成告示贴，摆开、贴出来比较直观 ×建立坐标系，设置一个维度，把告示贴贴上去
【联系】 ×视觉化思考，图表方式便于我们找到各个点之间的关系 ×谁在什么时间在哪里怎样的做什么，把点串联起来 【比较】 ×发现不同用户角色的共同愿景 ×比较不同用户角色关于同一事物的差异 ×用户需求权重排序
【信息的展现和运用】 以期对项目和产品发生作用 ×展现结果的类型： 描述性结果用户需求清单（含排序、建议）、风险点清单 差异性结果—p e r s o n a s ×运用方式： 建立产品的资料库，做积累沉淀，将文档共享给项目组或想要了解的人 主动邀请项目组成员，对他们做一个或连续报告，去推动需求变为现实
HOW
信息架构之
有效的导航设计
I nf or mat i onAr chi t ect ur e 文 /青云 (交互设计师 )
信息架构，原文是I nf or mat i onar chi t ect ur e，简称 I A。 I A的主体对象是信息，由信息建筑师来加以设计结构、决定组织方 式以及归类，好让使用者与用户容易寻找与管理的一项艺术与科学 。
r e 青云
信息架构，原文是i n f o r m a t i o na r c h i t e c t u r e ，简称 I A 。 定义： 1 . I A的主体对象是信息，由信息建筑师来加以设计结构、决定组织方式 以及归类，好让使用者与用户容易寻找与管理的一项艺术与科学。
2 . 信息架构就是合理的组织信息的展现形式。
web导航的定义 导航的定义： 1 . 引导飞行器或船舶沿一定航线从一点运动到另一点的方法。 2 . 信息的引导，指引，带领，使达到一定的目的。 w e b 导航的定义： 1 e b 上人们如何在页面间移动的理论和实践。 .关于W 2 .目标导向的、查寻和定位超链接信息的过程；W e b 浏览的过程。 3 .所有链接、标签和其他的元素，它们提供页面的获取途径，帮助人们在与 特定网站交互时确定方向。
W e b 导航设计与链接有关，它决定了网站上内容和页面的重要性与相关性。在 信息页之间建立起有意义的联系需要判断力。作为一个整体，导航的元素不但 决定了人们能不能找到想要的信息，而且决定了信息的体验。
web导航模型 1 . 有内容链接模型
2 . “液态信息”模型
3 . 过滤器模型
3 . 搜索模型
4 . 结构化浏览模型 1 . 导航系统
5 . 导航系统 网站中混杂着这些模型，包括结构化导航、内容链接以及搜索和过滤机制。每 个都可能支持不同的查寻模式。因此，针对W e b 信息的导航工具会有多种形式 。 一个W e b 导航系统能够提供高效和平衡的访问途径。
5 . 导航的双刃剑超链接 W e b 最基本的组成要素。链接是一个 页面中的文本或图形，它与另一个页面或 者同一页面中的另一位置相连。它们使想法间的关联性跳转成为可能，这是一 个强有力的概念。你从正在阅读的一篇讲述中 国外交政策的文章，跳转到中 国人口统计详情的页面，还要感谢链接。但是，链接不是仅能把页面关联起来 而已，它还能展现重要性和相关性。 6 . 不要为导航而导航： 人们不会奔着导航而来，还要冒迷路的风险。他们访问网站是要获得答案或者 完成任务。这样说来，W e b 导航可被看做是达到目的的手段。它一定是好的吗 ？如果导航行为毫无意义，为什么要让这个可能让人糊涂的东西来增加人们的 负担？ 7 . 以用户为中心的导航设计： 产品或服务开发的U C D 流程把人放在注意力的中心。它用诸如访谈、观察与各 类测试的方法，以用户行为研究取代了猜测和假定，把用户当作开发过程中不 可分割的一部分。最终，网站的整体设计应该反映用户对主题有何理解，以及 他们对寻找信息有何期望。
请注意，以用户为中心并不代表“用户让做什么就做什么”或者“忽略其他的 项目约束”。毋庸置疑，业务目标和技术很重要；毫无疑问，导航设计者的直 觉也有不可或缺的作用。但是U C D 方法能完善设计者的直觉，并最终能更好地 达到业务目标。这是项目的起点和焦点。以用户为中心的设计把用户体验作为 其首要的目标：所有其他的目标都在其次。 8 . 导航的必要性： 1 . 提供获取信息的途径 2 . 显现站内的位置 3 . 显现网站的（相关性） 4 . 反映品牌形象 5 . 影响网站可信度 6 . 影响商业目标 链接是W e b 上的基础流通物。它把W e b 上的两份内容有意义地连在一起。这是一 个强有力的概念。W e b 导航是系统化的链接组织方式，提供信息的获取以及有 意义的联系。导航在我们整体的W e b 体验中发挥了关键作用。难以想象没有导 航的W e b 会是什么样子。 只提供信息的获取还不够，提供的方式更重要。浏览网站与仅做搜索的体验就 不同。导航提供情境和解释，告诉用户他在网站中的位置，不但让他在网站结 构中找到方向，而且还有助于他熟悉内容的含义。导航揭示了网站主题的范围 ，以及它与某个具体需求的相关程度。 W e b 导航也为品牌的宣传发挥作用。类别、选项顺序和标签的语气，都传达了 公司的理念和价值观。构建良好的导航还会为网站的总体可信度做出贡献。人 们会信赖看来组织清晰、容易导航的网站。最后，W e b 导航会影响公司的商业 目标。寻找信息的成本很高，然而找不到信息的成本甚至可能更高。
9 . 有效的导航设计 1 . 结构平衡 广度（b r e a d t h ）与深度（d e p t h ）的平衡是指单个页面上可见菜单项的数目与 层级结构中级别的数目的平衡
2 . 易于学习 1 . 导航的意图和功能必须一目了然！ 3 . 一致性与不一致性 4 . 反馈 5 . 效率 6 . 明确的标签 7 . 视觉清晰 8 . 与网站类型相称 9 . 与用户目标一致
成功导航的定义与网站的类型、业务和用户目标相关。但是，一些导航的基本 特征和评价工具能够预测其在各种情境下的有效性。良好的导航结构是深度和 广度的平衡，在到达网站中的目标内容时，没有多余点击或页面。一般而言， 广度比深度更有效，但也并非总是如此。
在W e b 上，完全可以假设人们不想要花费大量时间去学习如何使用导航系统。 不要使用聪明过头的机制或有歧义的标签，让访客去猜该怎么办。正如第5 章 所讨论的，明确的标签对于导航的成功是不可或缺的。
合理地，而不要僵化地使用一致性。你需要在位置、颜色、标签和导航展现的 数量上做变化，以创造在网站中的行进感。评价导航时，将重点放在不一致性 如何使用上，并确定它们对导航体验是有益还是有害的。
清晰度和视觉逻辑对于有效的导航是很重要的。提供明确的站内位置反馈与诸 如鼠标悬停的特效，来帮助用户选择和点击导航。这样用户会迅速地、自发地 领会到机制的意图。你创造的视觉层次会指引他们如何使用导航。
所讨论的，明确的标签对于导航的成功是不可或缺的。 合理地，而不要僵化地使用一致性。你需要在位置、颜色、标签和导航展现的 数量上做变化，以创造在网站中的行进感。评价导航时，将重点放在不一致性 如何使用上，并确定它们对导航体验是有益还是有害的。 清晰度和视觉逻辑对于有效的导航是很重要的。提供明确的站内位置反馈与诸 如鼠标悬停的特效，来帮助用户选择和点击导航。这样用户会迅速地、自发地 领会到机制的意图。你创造的视觉层次会指引他们如何使用导航。
引言： 设计师常有这样的疑惑，如何知道用户浏览网页的习 惯？如何设计出符合用户使用习惯的网页？如何从搜索 引擎带来更多的流量？ 眼动研究可以帮助我们记录用户浏览网页快速变化 的眼睛运动数据，包括：注视点、注视时间、眼跳方向 、眼跳距离和瞳孔直径等多种参数，还可以绘制眼动轨 迹图，直观而全面地反映眼动的时空特征。 在这期《眼未动，心已动》的分享上，轻侯以淘宝 的经典案例为例，让我们亲身体会了眼动仪实验的过程 和对数据结果的分析，同时详细介绍了：
1 . 眼睛的生理、心理构造 我们的眼睛有两根轴线，一个是光轴， 一个是观察时视线的视轴。简 单的说，视网膜与视轴相交处从内而外可以划分为：中央窝、近窝区、边缘视 觉。中央窝是最集中的视觉区域，当离开中央窝后分辨率 急剧下降, 并且越远 越低。近窝区预先阅读中央窝的信息，边缘视觉善于捕捉运动和对比。
我们浏览网页主要分注视和扫视，注视时眼睛相对较旧的“固定”在一个特定 的区域，主要信息通过中央窝获取。扫视时眼睛快速、短暂的浏览，主要信息 通过近窝区和边缘视觉获取。
2 . 眼动研究的历史及意义 眼动实验的原理主要是：在实验当中，主试利用一小束对人体无害的微 弱光束，射向被测试人的眼睛，这束从眼球表面反射回来的光就记录了眼球运 动的情况。它的意义在于通过对结果进行分析，我们可以了解：用户如何观看 一个界面和挖掘影响观看行为背后的设计因素，从而识别界面尚待改进的地方 ，提供客观的数据来指导设计。 眼动研究在前期主要有观察法、机械记录法、电流记录法等。 观察法是用肉眼直接观察被试的眼动情况，是一种比较原始的眼动实验 法。实验时在被试的面前放一面镜子，主试站在被试后面，由镜子里观察被试 的眼动。后来又出现了一种窥视孔法，就是在被试阅读的材料中间穿一个直径 为0 . 7 6 c m 的小圆孔。主试者可以通过小孔观察被试者阅读时的眼动。观察法简 便易行，可以在没有仪器的情况下使人了解眼动方面的知识。但这一方法只能 对眼动进行比较粗略的研究，结果不够精确。很快就被新的方法所取代。 机械记录法是通过把眼睛与记录测验装置用机械传动方法联结起来实现 的。主要有头部支点杠杆法、气动法、角膜吸附环状物法等类型，眼动的机械 记录法装置复杂，调整起来很麻烦，其实验结果的准确性也较低。 电流记录法原理是：眼球运动可以产生生物电现象，角膜和网膜间存在 一个电位差，当眼睛注视前方不动时，可以记录到稳定的基准电位。电位的变
化由置于皮肤相应位置的电极导入放大器的电流计显示在示波器上。也可由记 录器在记录纸上描记电流变化的波形图。这种方法可以记录到离开注视点7 0 ° 的眼动，其精确度为1 . 5 °— 2 . 0 °。
3 . 眼动研究F A Q 问：热点图是否越红= 越好，没颜色= 没用？ 答：不一定。需结合场景，用户的主观解释及其他（点击）分析；颜色代表相 对趋势，没颜色不代表绝对看不到。 问：注视时间越长越有吸引力？ 答：不一定，注视时间长也可能表示该区域难以理解。 问：我的项目是不是直接拿眼动仪就行了 答：眼动数据不能解决一切问题，且眼动研究对样本数要求高，测试设计要求 更严谨。
健刚（视觉设计师）
网络广告在将来将逐渐取代传统广告成为全球第一大的广告投放媒介。与 此同时，目前的按点击收费将向按效果付费过渡。互联网经济的不断发展 要求我们制作出创意更佳、水平更高、互动性更好的网络广告、才能吸引 水平越来越高的受众。
1. 网络广告分类 网络广告（Web/Internet Advertising）是确定的广告主以付费方式运用 互联网媒体对公众进行劝说的一种信息传播活动。其目的在于影响人们对广 告商品或劳务的态度，进而诱发受众行动使广告主得到利益。 网络广告按形式和技术手段大概分为以下类型:
1. 1Banner 横幅广告
网络广告最初的也是目前最常见形态。如何吸引受众点击成为前期BANNER广告 创意设计的重点。
1. 2PopUp弹出式广告 弹出式广告又分为全屏式的弹出广告、浏览器背投广告以及弹出窗口广告几种。
由于弹出式广告对受众的产生的负面影响非常大，因此该类网络广告力求 在形式上创新，使广告融入背景浏览页面中。
1. 3Keywor ds关键词广告 有别于百度将广告信息埋藏在搜索结果里的做法，GOOGLE将关键词广告与搜索信 息作了明显的区分
1. 4EDM 群发电邮 越来越多的EDM群发电邮广告采用了诚实告诉消费者的形式，在邮件标题注明（AD） --我是一个广告邮件。
1. 5Pr omot i on专题推广
宝贝传奇（单一品牌推广）
C 2 C 产品推广页面
淘宝的专题推广分为“宝贝传奇”类的品牌推广以及C2C类的综合商品推广两大形式。
1. 6Br andWebs i t e品牌网站
M c d o n a l d s 中文网上与受众互动的方式
N I K E 品牌网站
品牌网站与受众间的互动性，是网络广告推广极其重要的形式。
1. 7St r eami ngMedi a流媒体视频广告 流媒体广告用于受众观看视频之前或者中间插播。也有将网络广告以电影的形式 展示，但这种方式成本非常高。
A B CN e w sW o r l d N e w sT o n g i g h t 前插播的1 0 秒广告
1. 8I nGameAdver t i s i ng游戏内置广告 游戏内置广告包括像SMS的视品道具等，也可以直接以广告形式插入大型网络游 戏里。
S e c o n dL i f e 是I G A 的典范
1. 9品牌互动游戏广告 小型品牌游戏既是游戏，也是广告。是专为某个品牌的产品量身定做的FLASH互动 游戏。
麦当劳与K F C 的食品互动游戏
2. 网络广告互动体验设计的意义 2. 1Web2. 0是一个大众生产的网络时代，因此网络广告传播 必须符合该时代的特点。 受众由传统的广告信息接收终端变成了信息的发布和传播者之一。他们本身就是一个 传播媒介，这主受众产生了巨大的参与创作和发布热情。
新的网络广告特点在于广告信息通过公众廉价复制，主动传播给其它受众，从而扩 大自己的知名度和影响力。像病毒一样通过受众亲朋好友之间主动扩散，因此可以 在极短的时间内使被信息“感染”的人数呈现几何级数增长。 信息传播过程中的高度互动性、可操作性以及可控制性使网民感受到对信息驾驭 的能力，从而让他们产生巨大的再生产（再创造）以及继续传播出去的热情。因 此网络广告必须具有更高的互动性、可操作性以及注重信息的平等对话。
2. 2互动类型网络广告的特点 网络广告设计的重点在于设计“体验”，而不仅仅是“画面”，因为在新的网络 感观时代下，要想真正吸引住消费者，网络广告必须是可以被“触摸”的，而不 仅仅被“观看”。 吸引眼球只是未来网络广告设计的第一步，更高级的网络广告是那些能与受众发 生互动的形式。通过用户主动参与到网络广告中，潜移默化地把品牌形象传递给 消费者，这样才能在按点击付费到向按效果付费的网络广告时代中取得成功。
3. 如何设计互动类型的网络广告 3. 1创意草图必不可少 3. 1. 1一个概念的发散性思维导图 所有设计创意都包括两个方面：一是创意思维 idea；二是表现形式 skill。一 个概念的放射性思维是将托尼•巴赞的思维导图引入创意思维训练课程的发展和 尝试。
3. 1. 2思维导图的训练步骤为
S t e p 1 S t e p 2 S t e p 3
以品牌概念为中心，对概念进行分析，然后从中心出发，设定出若干条不同的路 线，让思路尽量打开。在各条思维上尽力开发元素，进而展开捕捉闪光点的过程。 将有新鲜感的元素用图形画出来。最后将几个有趣的闪光点连接起来，发展成一 个创意雏形，继而提炼创意文案。
3. 1. 3思维导图的要求 3. 1. 3. 1主动参与 不管是“有天赋的人”（想象力丰富）还是先前被认为是“平庸的”人，充分 发 挥你的想象力，写下你想到的所有东西，都会找到闪光的灵感。
3. 1. 3. 2使用图形 图形经常比语言更具感如召力，更精确，也更易于触发广泛的联想，从而加强创造 性思维和记忆力。
从众多思维导图的创意中找到用户最 希望得到的图形，然后进入了表现形 式的修改过程
案例：运用思维导图构思TaoMobi l eLogo创意
3. 2如何训练网络广告互动设计思维 3. 2. 1网络广告的互动类型
3. 2. 1. 1鼠标移入响应( Rol l over ) Rollover互动效果多数应用于banner级别的网络广告。因为无法使用点击响应 （一点击则自动进入超链接页面），因此要充分利用用户的鼠标移动来发生互动。
I N T E LB A N N E R 广告， 左右移动鼠标以接住 金币
3. 2. 1. 2鼠标点击响应( Cl i ck) Click互动效果多数应用于FLASH小游戏级别的网络广告。这种广告的互动效果 更丰富，游戏性更强，同时开发的时间和成本更高。以游戏的方式与受众互动。 K I T K A T 广告， 点击正在偷吃 巧克力的小和尚
圣诞大淘宝游戏， 将点击、拖曳 等交互动作结合
3. 2. 1. 3多种响应方式复合应用 通常应用于较大型或互动效果更为丰富的FLASH网络广告中。涉及更为复杂的 actionscript开发。
3. 2. 2设计互动效果的两种常用方法 为了使用户对呈现在他们面前的网络广告互动形式不至于感到陌生（反感）， 避免因此而产生的拒绝接触的情绪，网络广告的互动效果必须设计得亲切和友 好、以吸引用户学习提供的交互形式。
3. 2. 2. 1方法一：模拟现实动作以减少受众学习成本 模拟现实生活中动作来设计互动效果，可以大大减少广告受众重新学习交互形 式的时间和成本，另外也可以降低受众因对未知互动效果而产生的恐惧和抵触 心理。 雪碧P O PU P 广告，鼠标点击 易拉罐时、“喷”出广告信息.
3. 2. 2. 2方法二：制作戏剧性、惊喜的触发效果 每一个暗示有互动剧情的元素都会让受众充满期待，祈求鼠标经过或者点击以后可 以产生惊喜。我们如果能制造出让受众意想不到的互动或者视觉动画效果，将有利 于用户对该网络广告留下烙印，记住品牌特性。
淘宝2 0 0 9 儿童节L O G O ，点击儿童时，会有礼物 从天而降 李宁新年F L A S H 贺卡
3. 3故事板辅助设计将有利于把握和控制整个网络广告的故事情节
3. 4动画制作阶段
单帧动画及小游戏根据之前的故事板制作
Flash动画广告大体分为单帧动画及互动场景动画
3. 4. 1单帧动画就是传统意思上的动画绘制模式、 工作量巨大，但缺乏互动
F L A S H 单帧动画制作原理与传统定格动画无异
3. 4. 2互动动画可以让受众参与到广告中来，在于广告交互中获 得广告信息
互动动画在制作之前应该有详细的结构规划
3. 5最后一步，就是前端的Act i onScr i pt 开发 无论最简单的动画短片Flash网络广告或者最复杂的互动游戏广告，都或多或少 地需要Flash Action Script语言来支持和控制，这样才能实现各种天马行空 的效果和想法。
最后送上劣作一张，祝大家新春快乐！
EVE2012
世界之窗浏览器皮肤设计 创意来源： 大家好，首先我来谈下这套E V E 2 0 1 2 浏览器皮肤的灵感来源，相信大家都应 该看过《W e l l E 》这部电影，这部电影的主角是两个机器人，一个是W e l l , 一个 是E V E ，他们都很可爱，而在这部电影里我却是比较喜欢E V E 这个前卫的机器人的 风格，流线型的体型，显得特别的“性感”，而且从工业造形上，很简洁，充满 了未来和时尚感！还有他脸上的“电子屏”的表情是相当的丰富，所以这个浏览 器的整体的设计风格也是借鉴了E V E 脸上的“电子屏”为浏览器设计的主要元素 。
制作过程： 这个E V E 2 0 1 2 是第一次制作浏览器的皮肤，之前都没有接触过浏览器皮肤的 设计，都是一边了解一边制作，而且时间也比较紧张，都是利用业余下班时间来 设计的。所以出来的效果也并不是非常完美 整个制作过程也是比较简单，因为世界之窗浏览器这个皮肤制作的工具的操 作比较简单，可惜的是有很多模块的设计是不能更改，所以设计出来的风格也不 能把视觉的实现最大化。制作的过程都是用P H O T O S H O P 工作制作完成。 希望大家喜欢这款浏览器。 皮肤下载地址：h t t p : / / b b s . i o a g e . c o m / c n / t h r e a d 1 1 6 6 0 0 1 3 . h t m l
EVE2012
世界之窗浏览器皮肤设计
工具栏（X ） 字体大小（X ） 网页缩放 编码（X ） 页面元素 界面语言 停止
E s c
停止全部 刷新
F 5
彻底刷新
C t r l + F 5
刷新全部
S h i f t + F 5
源文件 切换全屏显示
F 1 1
设 计 师
觉
面 视
界
www. about i con. com
以上图标大部分是今年作品，应用在淘宝的各个角落，总结如下：
就本身设计而言，优缺点共存。当初设计图标的时候，手底下只有一张
在比较短的时间内有效的完成任务；缺点就是没有实际页面效果的支持 多少问题，当加到页面里则显现的不自然。 造成这个结果的原因有三： 1，经验不足，像素类图标做的较少，商业的更少；
2，淘宝业务庞大，页面多，图标一直还没有具体分类，从页面上找图
3，技术的原因：由于要支持I E6，还一直在采用PNG8格式的图标，不
在08年末，已经形成一套较完整的图标需求提交流程，09年推出了图标
匹配页面，而非页面匹配图标，因此图标制作前务必提供图标使用环境
对全站新增项目图标的全面支持，已形成较为完善的图标制作方法，保
www. about i con. com
张旧图标汇总图，好处是做起来会比较快，也不会有遗漏的地方，
持，没有了应用环境，图标就会比较孤立，单独放在一起还没有
图标的方式来做也不太实际；
不支持半透明效果，表现上有很大约束。
标具体分类标准和制作规范，另外，有一点需要强调：图标
境）；
保证了风格的统一；
浏览器结构（世界之窗）：
顶部：标题栏，菜单栏，工具栏，收藏栏，标签栏，其中表现空间最大的为工 中间：侧边栏； 底部：查找栏和状态栏，另外还有诸多的图标分散各个区域。 一，pr act i cal 实用型（书安）
做之前要想好做那一种类型，出发点是什么，自己又擅长哪一种表现方式，列 古韵（笔墨），大众（实用）。最终，选择了大众。
界面上，选择饱和度低的灰蓝作为基调色，淡淡的，有点雅（自我感觉），它 之后，对这一种渐变做了无限的复制，尽量保持风格的统一；
图标也在同步进行，尽快的和界面相匹配。处理时间比预期高2倍，看着最后
www. about i con. com
工具栏；
列下了几个关键词：花俏（颜色丰富），酷炫（对比强烈），淳朴（淡雅），
它来自大雄的一组照片；
后的效果，还是很满意的。
2009年冬天，淘宝好友总动员正式启动，配合活动推出的， 还有18个惟妙惟肖的小公仔。一时间，淘宝社区里到处都有会员 在追问：“怎样才能得到淘公仔？这些可爱的小家伙，征服了所 有人的心。现在，就让他们的创作者奇灵，带领大家看看小公仔 们的诞生过程吧！
1. 首先，我和马瑜对应相关的好友印象的文字，进行第一步的草图设计
2. 草图通过以后开始上色，我们是在FL ASH里完成上色这个环 节的每个公仔都需要画正反面…
3. 所有效果图通过以后，我们接下来就是要联系工厂制作了
4. 现在做搪胶的厂家很多，但能符合我们要求的却不多， 我和行政MM盼盼多方考察以后选定了一家上海工厂来生产。
5. 到了厂里我们就直奔主题，看上色的公仔样
6. 这些是确认好的玩偶.
7. 这是制作玩偶的糖胶工厂
8. 这是设计出来的单独公仔的包装盒
最后，淘仔们来张合影吧！
Q
求解议题 1
项目过程中
UED如何往前站？ -无酬
介绍：在项目中面临解决方案型需求的最直接原因在于，我们的介入点处于整个产 品设计过程的末端。如果对用户体验因素的考虑处在产品设计的起点，可以在很大 程度上避免解决方案型需求。往前站能做什么？怎么做？往前站有哪些需要注意的 事项？
A
求解答案
往前站：PD&UED合作方式 及阶段目标 -梁宽 (产品经理 )
1：业务发展预沟通： 产品经理需要提前一个季度，将下个季度的业务产品计划列表与 u e d团队进行 沟通； 目的：让 u e d团队提前了解业务团队未来的发展，并且提前准备配合，为业务 发展提供资源保障 2：业务规划阶段： 产品经理和业务团队收集整理商业需求，并制定业务规划； 产品经理和业务团队收集整理商业需求，并制定业务规划 产出业务需求文档，和 u e d团队进行沟通 ; 目的：让 u e d团队理解商业需求，了解产品背后的商业意义； 同时也可以提出自己的意见和想法，让产品经理和设计师在产品萌芽期就达成 默契； 并且可以在产品萌芽期就可以构思产品雏形；
3：产品需求规划阶段 产品需求整理阶段，设计师可以帮助产品经理共同构思产品， 产品需求整理完成时，设计师需要开始进行交互设计； 目的：设计师支持产品经理进行产品设计可以让设计师更了解产品；设计出更 满足产品需求的交互设计； 产品经理也会得到设计师的建议调整产品设计； 4：立项阶段 立项前：设计师完成交互设计通过交互设计指导产品团队更好的理解产品设计 立项后：设计师分别产出产品视觉设计，这个时候产品轮廓可完全产出； 目的：设计师在立项阶段的参与起到了参与产品研发的工作；保障了产品的产出； 其中 1 ，2阶段产品经理要全力推动，这是让双方早日达成默契的重要阶段；
Q参差不齐的图片列表 求解议题 2
—谷隐
介绍：图片列表的显示问题。因为图片的不规则性和用户层次的不统一导致图片列 表参差不齐。 面对这个问题，各网站的处理方法也不尽相同，我们需要找到一个平衡点。 问题描述：详见附件 P P T 。 原因分析： a .图片自身问题：图片本身就有一个长宽比例的问题。 （延展讨论：最佳长宽比例 是多少？ 4 : 3 ? 1 6 : 9 ? ） b .用户的问题：一般会出现这种问题的图片列表都是读取用户上传的图片。用户 不会处理图片，或者不想处理图片，或者不可能都处理过。 （延展讨论：我们从程
序上能给用户作些什么？） c .图片种类无限制：我们发现有些图片列表的显示一直是规则而美观的： 比如电子杂志的列表。 比如大部分电影网站的图片列表。 比如有些摄影网站的图片列表。 最典型的是友情链接的图片：8 8 * 3 1 这些网站或者说行业已经给图片的展现方式定下了规则。 这些网站或者说行业已经给图片的展现方式定下了规则 （延展讨论：我们需要规 则么？）
A
求解答案
针对图片列表参差不起的显示问题，经过碳酸饮料会的讨论，暂定解决方案是让用 户自己处理（裁切）上传的图片。我们可以提供裁切图片的程序，以帮助用户统一 图片的大小。
优点：可以使图片在视觉上达到统一，图片列表页更加美观，产品显示更加清晰。 缺点：增加了用户上传图片的时间和难度。 没有最好，只有更好，希望大家能有更有效的方法来解决问题。 没有最好，只有更好，希望大家能有更有效的方法来解决问题
Q
求解议题 3
变幻莫测的导航 -玲珑
背景：淘宝的有些频道在运营过程中，会根据应景的需求，变化频道名称。比如“ 促 销 ”频道每个季节结束时会把标签改为“ 清仓 ”或者“ 春装 ”等。礼物频道，频道 的特点是跟据节气来推广。所以会把“ 礼物“ 频道根据节气改为“ 母亲节 ”等。 问题：客观上频道名称的修改给频道 p v带来短时间的大幅提升。但是频道名称的 变换，不利于频道品牌效应的积累。如：之前在“ 促销 ”频道买过宝贝的朋友，下 次再想光顾的时候，在首页的导航就找不到“ 促销 ”了，可能这个时候促销频道的 名字已经变成了清仓。 矛盾： 如何平衡商业（频道的 p v与它特色的运营）与用户（保持良好的“ 位置感 ” 与频道品牌）
A
求解答案
方法一：开辟活动专区 从修改标签这个需求看，有部分原因是该频道的运营将频道赋予了活动的特点。如 果在淘宝首页导航标签不修改状况下，我们开启一块活动专区的资源，让用户知道 当季的“ 促销 ”频道正在清仓哦 ~或许也可以解决这个矛盾。 方法二：hov er提示 不修改导航标签的前提下，当用户鼠标悬停在导航“ 促销 ”标签上，短暂的几秒钟 不修改导航标签的前提下，当用户鼠标悬停在导 出现“ 清仓中“ 等。这个方法有个遗憾，就需要用户先移在促销标签上才能清楚当 下的频道主题。 方法三：频道导航标签的“ 促销“ 修改 当频道进行特色主题的运营时，将“ 促销“ 改为 ”促：清仓“。
方法四：频道导航标签气泡类的提示 给“ 促销“ 频道增加气泡的方式来说明当下频道主题。
邮件讨论 : 发件人 :无酬 [ m a i l t o : w u c h o u @ t a o b a o . c o m ] 我也倾向第三种方案 气泡的做法虽然最大程度保持了导航的稳定性但是，气泡属于暂态元素不适和长期 存在。另外气泡的形式不适应多个频道的变化需求，现在就有促销和礼物两个频道 有类似需求，
第三种方案也有改良的余地，我们可以借鉴超市里的促销标签形式
将促和礼做成标签，标签的控制在 1 0像素宽度内。这样可以最大限度的节省导航 的水平空间。
另外那天讨论中有一些有价值的想法记录一下： “ 淘宝频道的灵活性是它的优势，我们应该考虑怎样推动这种灵活性发挥最大的运 营效果。” ——口碑木头 “ 我经常看到一些很感兴趣的频道，但过几天再找的时候找不到了。我们提供访问 频道的历史版本的功能 ” ——中莲
发件人 :书安 [ m a i l t o : s h u a n @ t a o b a o . c o m ] 变化莫测的导航部分，我觉得第三种方案比较好，最后一种加气泡的不建议采用， 会很多的，每隔几天换个花样（气泡） ，还是没解决问题
Q
求解议题 4
一次眼动测试的发现 -晓荷
背景：上月底做了一场眼动研究，其中一个任务是让用户搜索“ 运动包 ” ，然后浏 览结果。页面跳转后，第一屏为图 1的内容。其中列表部分，上半部分是大类目所 有选项的罗列，下半部分是品牌属性所有选项的罗列。 图1 ：测试用页面（部分）
颇为有意思的一个发现是，用户在无目的浏览一个大量属性（5 0 + ）列表时，注视 热点呈现了图 2的 T字型趋势：
图2 ：4 5秒内累积相对热度图（数据量 = 1 2人， 4 5秒 =平均跳离页面时长） 虽然本次测试人数样本量偏小，但似乎呈现了 这个规律：在四列属性值中，中间两列比第一、 第四列关注度更高。其中第一列似乎最不受关 注。也就是说，以同一行比较的话，系统认为 优先级最高的项，抢眼球能力很有可能不如次 优先项。 问题：有什么设计因素引导了 T字形的浏览？ 问题： 2 .设计师认为，进一步研究用户浏览列表的视觉模式是否有价值？
A
求解答案
引起 T形浏览的原因分析 1 .受电脑、互联网使用习惯影响，左边栏多为非内容区。 2 .由于列距大于行距，用户更倾向将每一列视作一个整体（格式塔原理） 。且列距 较宽，用户的眼睛横向扫描较累 对设计的启示
1 .列表跨度不宜过宽 2 .列距不宜过宽，或可适当扩大行距 3 .考虑视觉引导与系统排序是否一致
Q
求解议题 5
淘宝虚拟客服构想 -晓荷
目前淘宝电话客服日均会接到 1 0 0 0通左右的电话，询问如何搜索及购买商品。是 接入量排名第 5的问题。 目前用户获得帮助的途径，除了电话客服，就是到帮助中心搜。电话客服的障碍在 于难打通。而帮助中心，除了使用户不得不从目前的页面跳开，还是认知负担较重 的过程：要想到合适的关键字，要从结果中筛选、判断。 是否有更好的方式来为用户，尤其是新手用户导购呢？例如，一个点之即来，挥（鼠 标）即去的虚拟客服。 目前，一些网站也有使用这种技术。例如 I K E A的虚拟客服安娜 ~ ~ ~ 目前，一些网站也有使用这种技术。例
虽然安娜大妈不太智能，如果问她有的没的她就会崩溃（表情还会变哦） ，但是输 入的是商品名的话，就会自动切换到所对应页面哦！
这家网站的小芝麻也蛮有意思， 就是要盘问你 N久才给你答案， 烦死啦 ~ ~！
M S N的机器人小美，是个话唠。 其实，我们的卖家已经在实践这件事了。 在上周的实地调研中，猴猴和襄襄发现卖 家在使用智能旺旺客服哦。 总而言之，我的问题就是，淘宝是否可以 考虑开发这么个针对新手（比如只在她未 完成过交易前出现）的虚拟客服呢？怎样 的虚拟客服能给用户更好的体验？
A
求解答案
在讨论开始前，青云提供了两条帮助的交互设计的基本原则：适时反馈、最简原则 讨论分了两方面：
1. 如何引导买家完成初次购买 将注册延长一步：在天提出，在注册成功页，先略带强制地（不提供其他出口） 引导用户去了解购物流程或开始一次引导式购物流程（ “ 一元试购 ” ） 。 （例见 f l i k r注册成功页） 引导式试购：杜素提出，S K U初上线时会根据 C o o k i e判断，在该 c o o k i e头 三次进入有 S K U页面时浮出气泡提示。引用这个思路，可在初次购买时，在屏幕某 些区域浮出帮助气泡 试购明信片：宗羲提出，可让用户试购一张引用淘宝简介的明信片，当 T A 一周后收到，会感到惊喜，还能加深 T A的印象
2. 如何提供实时帮助 实时帮助有别于目前帮助中心的地方在于无需页面跳转，即满足适时反馈原则。 百纯 J J提到，可以做一个类似 O F F I C E帮助回形针的即时帮助 月漓提到，可做一个类似目前店铺可伸缩侧边栏的帮助区域，点击展开、收起 机器人阴谋论：宗羲提出，采用人工智能的虚拟客服不是好想法，会让用户有两种 感觉：要么觉得太智能，太吓人；要么发现其实不是人，是骗人的 ~ ~ ~
佩瑛情报站一直是碳酸饮料会上，很受大家欢迎的栏目。 作为UED竞争对手分析师的佩英，会不定期地为大家带来大量新鲜 的业内资讯，以及深入到位的分析。 我们无法全部刊登，只挑选了其中两篇，做一次小小的回顾。
报告目的：通过介绍目前互联网上主流的社会化网络站点的发展特色 ，分析用户对于SNS服务的需求点，淘宝( 电子商务) 与SNS的结合点 结合点1：为用户在互联网上摘录商品提供方法 我们有看到在Vans的网站上，提供了Shopwi t hme的功能，用户可以方便的 在商品详情页上进行“ 分享” 、“ 讨论” ，征询t a信赖的朋友的意见，从而促进购买， 缩短路径。 Fl ui dI nc认为：线下购物，远远不止是“ 购买” 这么简单；真正的Soc i al Shoppi ng不应该是看看陌生人的评价就ok ay 了，而应该是那些来自购买者信任的朋友 、家人的评论。
还有很多网站通过浏览器插件，帮助用户收集其他网站商品信息。比如k a b o o d l e 的F F 插件“A d dt ok a b o o d l e ”。 用户方便的添加站外商品到站内的分享列表中 ，同时可以使用列表来组织购物、从同好那里发现感兴趣的新产品 。
结合点2：利用淘宝的资源特色开发社区化应用 首先，交易是关于人的，人是活在社区中的，那么发掘淘宝与社区功能有结合点的 类目，并充分的将其与人的关系结合在一起，发掘更有特色的应用。比如e l o n g 的“ 一起飞”： 用户在e l o n g . c o m 订购机票以后，在机票预订成功页面（机票已确认， 已付款），会看到以下提示：想认识和您同一航班的旅客吗？搭个伴同行，聊聊天 ，拼拼车……
当然也可以使用社区进行线下活动的组织和管理，拉动线下朋友加入淘宝S N S ，而且 ，还利用支付宝A A 付款的优势，进行活动中的款项管理。
结合点3：提供双向的信息聚合方式 一个方向，是将用户的相关购买记录向淘江湖聚合 （对于用户购物记录的f e e d 注意 隐私设置 ）；一个方向是，建立淘宝的O p e n S o c i a l ，将社区信息向外融入到卖家展 示的过程中。对于卖家，与平台A P I 整合，将淘宝的用户网扩展到站外，允许大卖家 在独立的网站上添加淘宝O p e ns o c i a l 模块，展示自己的朋友群、买家群等等。也可
替代目前店铺中的“友情链接”模块，升级为社区化的“卖家友情网” 同时可以拉 动用户加入淘江湖。 G o o g l eO p e nS o c i a l 产品：
结合点4：通过F ol l ow类应用， 方便卖家与买家之间的沟通 T w i t t e r&B e c o m eaf u n( F a c e b o o k ) 等都属于F o l l o w 类的服务。他们的共同点：本 身是一种开放式的信息广播工具，是偏公开的，可分享的。将这种方式延伸到淘宝 上来，那么卖家（o r 企业）就可以更方便的发布促销信息等公告。也相当于我们提 供了一种简易的客户关系管理工具，包括：可见的感兴趣的客户群；在最快的时间 里回答客户的问题，并同时告知其他客户；提醒特定的或者是所有的客户他们所应 该知道的信息，如服务及产品的变更或者升级；管理客户的@ r e p l i e s ，实时获得意 见和建议
评论系统简析
1 9 9 5 年7 月，亚马逊正式开始线上售书，从一开始就非常重视用户对于图书的点评 ，不仅提供在线图书销售，还可以查看其他用户的点评信息。 A m a z o n . c o m选择了6 位平时积极参与商品评论的普通客户，组成假日客户评论团， 给出自己选择假日礼物的评论。同时这些客户还代表亚马逊参加媒体采访，给出什 么t o p 1 0 礼物的建议等等。评论团是从普通客户中按照活跃程度选拔出来的，使用 户看到了积极参与评论的认可；成为假日客户评论团的一员，即代表着该用户的评 论和文章将具有更高的影响力和公信力。从而刺激用户更加活跃的发表评论。而且 ，这种利用用户产生的公关效果，还能提高亚马逊评论给人的公平感。增强买家对 评论的信任程度。同时，用户认为一个评论环境是否会被“公平对待”也影响了该 用户是否会在这个环境中留下自己的评论。
在A m a z o n . c o m 上，还有一个传奇故事三狼与月，一个评论者通过一则“离奇”的 故事和对T 恤的五星级评价，引发了一些列搞笑和无厘头的评论故事，随之而来的是 ，这件平淡无奇的T 恤曾经一度是A m a z o n 衣服类别中，排行第一名、卖得最好的。这 个「三狼与月」的营销案例，关键就在「第一则评论」！商家若再更创意的去发挥 、经营第一则评论，或许哪天就被你卖出一套和「三狼与月」同样畅销的作品，一 口气超过之前所有努力的总合！
乐天的评论体系相对完整、区分明确，激励体系非常健全，尤其是通过卖家实现间 接激励买家进行评论的方式，值得参考。乐天对于不同的评论内容，有不同的门槛 限制 另外乐天会在产品详情( S P U ) 页面显示商品评价和产品评论：在页面右上方显示最新 产品评论，产生口碑营销的效果，同时页面中部的导航t a b 中可以查看关于商品的评 价、以及这个产品的全部评论内容，商品评价中，乐天也提供了卖家店铺的入口， 方便用户在任一决策时刻进入店铺进行购买
e B a y 的评论，读写入口都不是非常明显，但是e B a y 更加注重用户产生信息，尤其是 使用纯w i k i的形式来收集产品信息。e B a y 也根据不同类型的信息收集工具采取不同 的门槛政策。 在e B a y 的产品详情（S P U ）页面，T O P 评论是被“永久”显示的。若所发表的评论被 其他用户认为“有参考价值”比例最高，则有机会一直排在产品详情页的前两条评 论的位置，用户设置评论l i s t 排序方式也不会影响到这两天评论信息的展示。
2009年 6月 4日，在碳酸饮料会一周年之际，我 们回顾了过去的分享成果， 一年多来，已经有 1000 人次参与其中， 一共做了24期分享， 有23个设计师 参与了分享话题，有10余篇专业文章诞生。庆典上温 馨感人又激情的碳酸一周年回顾短片、壮观的碳酸开 罐仪式、特殊贡献奖及分享达人奖获奖人发自肺腑的 获奖感言、宗羲和无酬的幽默主持、董建明博士精彩 的分享都让我们记忆犹新。 碳酸饮料会能够做的不仅仅是一个交流的平台， 我们希望碳酸饮料会能够：让每个演讲者收获点什么 ，让每个听众听到有价值的东西，让他人了解到设计 师的进步，为了实现我们最终的愿景——成为地球上 最专业的交互设计分享会，相信它会走的更远。
chaoqun
@t aobao. com 报名请 与我联系
超群
碳
什
碳酸 用户 我们 你有 快来
碳酸饮料会
什么是碳酸？
酸饮料会是UED每两周一次的交互，视觉， 户研究相关的讨论交流会。 们目前有3个栏目：佩瑛情报站，分享，求解。 有了什么新的积累和体会吗？ 来报名加入我们吧！
碳酸饮料会
插图/ 奇灵（视觉设计师）
I ’ m
交互设计师
I nt er act i onDes i gner
申请以上岗位请发简历到：yuni ng@t aobao. com
申请此岗位请发简历到：xi aoma@t aobao. com
I ’ m
前端开发工程师 WebDevel oper
I ’ m
界面艺术设计师 WebDes i gner
申请该岗位请发简历到：f ei f ei @t aobao. com
申请此岗位请发简历到：t i anhong@t aobao. com
I ’ m
用户体验分析师
Us erRes ear cher
更多信息，请关注
淘宝UED Bl og ued. t aobao. com
淘宝UED：ued. t aobao. com 联系我们：chaoqun@t aobao. com