碳酸志2010 by tan suan

碳酸志 2010 体验设计让我们的生活更美好…

碳酸饮料会到现在已经3个年头了，经历了很多事，认识了很多朋友。虽然由淘宝

UED发起，但发展到现在参与碳酸的设计师们早已不局限与淘宝UED了，很多来自其它公司的设计师加入我们的分享交流。一群彼此陌生满怀激情的设计师坐在一起分享知识的乐趣，享受成长的快乐，来来去去都已经成了见面不相识的老朋友。又到年末，按照惯例我们把优秀设计师们的知识成果和经验集结成册，以供不能参加分享的设计师们查阅，同时让不能尽兴的分享者们借助更加严谨的文章充分表述观点，传授经验。于是有了这一期的《碳酸志2010》。与以往不同，这次的碳酸志有机会付印。非常感激二当家，三通，天宏的支持。这一批的印刷版碳酸志，完全不是出于盈利目的，仅仅是作为礼物送给淘宝

UED的朋友们，知识和经验无疑是我们最好的礼物。当然我们依然会免费发布碳酸志的PDF文件到网络上分享给大家。再次感谢碳酸饮料会的前辈们：随然，语凝，青云，轻侯，是他们一手创办了这个组织，还要感谢猫儿对我们工作的支持。感谢我身边的战友们超群，淡月，钱树，晓荷还有离开的咏沙祝福她走的更好；尤其感谢钱树是她的督促和努力使《碳酸志2010》能准时和大家见面。感谢为这次碳酸志的出版牺牲N个周末和元旦假期的王三和浙大的张悦同学。感谢帮助过碳酸的集团研究院的盛振中，集团负责知识管理的张桥刚，还有麻省的张炜老师，特别感谢为《碳酸志2010》专门撰稿的张苹、陶嵘、蒋振辉几位老师。感谢曾经站在碳酸讲台上的所有分享者，和参与碳酸分享的所有听众，碳酸饮料会将持续为大家奉献精彩的内容……

—— 无酬

碳酸志 2010

项目经验 3

与LADY HOMEPAGE面对面淘宝商城商品详情页面改造访谈

8 17

数据与理论结合，让交互设计更专业友好的变革超级旺铺体验设计的机会与挑战

图片空间设计过程

图片格式与设计那点事儿

体验研究 37

基于生活形态的用户分群研究

用户体验量化方法研究

专家约稿 50

动因支撑理论对于UED研究的理论指导和行动借鉴

用户体验研究与设计的四重境界—匠、技、艺、道

浅谈社交购物站点的社交体验设计：社交购物站点纵览

创新探索 63

信息可视化

不一样的交互组件

如何架构和管理个人的知识体系

碳酸志 2010 交互设计指南 76

我们眼中的交互设计

操作入口明确

可及

适时帮助

简洁清晰，自然易懂

突出重点，一目了然

标签明晰，有效

100 避免迷路 104 深广度平衡 108 一次点击 110 别让我思考 113 减少记忆负担 116 避免出错 120 一致性 123 帮助用户从错误中恢复 126 反馈及时、有效、友好

项目经验碳酸志2010

碳酸饮料会第39期

与LADY HOMEPAGE面对面淘宝商城商品详情页面改造访谈文 / 轻侯（周峰）

飞飞是淘宝UED的早期成员之一，目前担当淘宝商城的主设计师，我之所以叫她为Lady Homepage，因为早期的淘宝网首页和目前的淘宝商城首页都是出自她的设计。如果你逛过淘宝商城，就一定在使用中接触过她设计出的产品。本文是2010年12月，我对飞飞关于改版淘宝商城“商品详情页面”的一次聊天式访谈。 3

碳酸志2010 项目经验

轻侯：还记得淘宝商城详情页面是几月份改版的吗？飞飞：是在今年（2010年）刚刚春节过后，那时候新组建的商城 UED团队接手了商城的改造，因为商城的页面都很旧了（图1），在用户调研中也发现了很多问题。当时，商城的负责人逍遥子要求商城建立自己的品牌形象，详情页面是今年改动最大的产品之一。轻侯：最开始做了什么呢？飞飞：一开始设计我就对当时的页面做了大胆的减法。我考虑了淘宝商城的两类主要用户都是对品质和快捷要求较高的用户，从这两点出发，视觉形象上借鉴欧

图1 / 旧版的商城商品详情页面

美的风格，尝试了多种形式（图2），在前期用来拓宽思路。（她笑着翻找以前的设计——早期的版本太多了，连她自己都忘记了）你看原来的版本（图1），这么大量的信息堆砌在用户决策的区域，其实是一种信息过载，实际上用户没必要接收到这么多的信息，所以我就开始减负，减负的目的是为了突出最核心的、能帮助用户购买的信息，其他信息都按照分类放在了右侧（图2）。

图2 / 画报式的商城商品详情页

项目经验碳酸志2010

轻侯：你提出了先减后加的理念，这里“加”是出于什么考虑呢？飞飞：嗯，最开始是比较理想化的方案，后来结合过去的历史方案做出相对现实的方案，之后结合商业目的和用户能够受益的信息来做出综合的决策。比如说这里（图3）有很多的支付方式供用户使用，但真正对用户购物决策有帮助的方式可能只有一两种，它存在的目的是促进用户的购买信心。

图3 / 少与多的折中

轻侯：你认为最满意的“少”是“少”在哪里了？飞飞：我最满意的是上面的核心区域（图4），实际上，Detail能呈现的视觉表现并不多，但是怎样合理排布、用什么方式来展现、和用户购物决策的顺序都要考虑到，这就有点像练内功。

改版前

改版后

图4 / 新老版本核心区对比

碳酸志2010 项目经验

轻侯：在改版的过程中，有没有遇到什么困难的地方呢？飞飞：应该说比较迷茫吧。因为有的时候，我并不知道困难在哪里，发现不了问题在哪里是最恐怖的。因为在产品设计中，不能只停留在皮肤漂亮不漂亮，颜色好看不好看。产品是拿出去给人用的，不是给人看的。当做到一定程度的时候，我可能会失去一些很感性的感知和理性分析的热情，这个时候我会寻找他人的帮助，借他人的眼睛看到一些问题。然后，需要找不同角色和不同部门的同事帮我找出我自己可能忽视的地方。轻侯：能举一个例子吗？飞飞：比如说当时请商城的负责人来看这个界面，他一眼就指出了文案上的问题：商城一直沿用着“一口价”的称呼，然而商城只存在正价的产品，并不存在拍卖价格，这个“一口价”显得特别不正式，但是对于设计师来说，每天都看到“一口价”这个字眼，根本没发现什么问题，这就是因为太熟悉了会产生一些盲点。（图5）所以，需要不断地想用户究竟是怎么用的，这些细节需要设计师不断与他人沟通，不能只从视觉一个角度来看这个问题。

图5 / “一口价”这个说法因为习以平常被忽略了

轻侯：除了视觉还有什么角度呢？飞飞：比如应该更多地从视觉层次的角度，来对信息进行分层。除了利用自身的经验，大部分来依赖于用户研究的数据，了解买家真正关心的是哪些信息，将其放在主要的位置，次要的和辅助的信息再次进行分层，并且，我会对全部信息做一个逻辑上的分类。比如商品详情页面，有些信息是和商品相关的，有些是和店铺相关的，虽然这些信息都很重要，但它们混在一个区域的时候，也会干扰用户。这时就需要对信息属性进行分类，将和店铺、卖家相关的信息都分别梳理到一起，放在左侧，这样一来相关的信息就都一目了然了（图6）。 6

项目经验碳酸志2010

图6 / 改版中不断修改的原型

这个信息既然是在页面上出现了，就有它一定的价值。其价值的重要度和逻辑性就体现在其处于页面上的位置，最后它用什么方式展现，取决于它对于用户的购买行为有多大的帮助。轻侯：Alan Cooper大概说过这么一句话：用户是不会理解布尔逻辑的，你怎么看呢？飞飞：我觉得用户不需要理解我们的逻辑，逻辑是我们来帮用户梳理的，用户并不需要了解设计花了多少心思、业务的结构是多么复杂，他只要很顺畅地、无障碍地完成购买就是最好的体验。轻侯：设计的时候也许经常会碰到一些需求，比如用户的意见、老板的要求，你怎么看待这个问题？飞飞：举个例子来说，其实用户、需求方、老板都有自己的道理，初步汇总过来的需求表面上可能是互相矛盾的，但是它们的根本可能存在规律性和一致性。比如：在设计详情页面的店招时就遇到了这样的问题，用户反馈并不需要店招，需求方却认为需要，这时候我们就要深挖这样的需求：需求方保留店招也是因为其认为用户需要而已，保留店招一个比较大的好处是 ——用户可以通过店招回到店铺的首页或访问相关页面。那么店招去掉了，用户是否就回不到店铺首页？最后我们发现，用户更需要的是明晰的导航，所以最核心的功能是需要保留的，去不去店招不是关键，关键是回到店铺首页的通道（图 7）所以，很多根本的需求，是隐藏在表面问题之下的。轻侯：谢谢飞飞，谢谢Lady Homepage。

图7 / 关于店招的思考注 / 飞飞（孙玉霞）淘宝UED资深视觉设计师 feifei@taobao.com轻侯（周峰）淘宝UED用户体验研究专家 qinghou@taobao.com

碳酸志2010 项目经验

碳酸饮料会第41期

数据与理论结合让交互设计更专业文 / 老三（王万林）晓荷（何立）

Pay.taobao.com是淘宝卖家订购增值服务的平台，收集的数据发现，现有订购流程存在用户订购成功率低、咨询量大的问题。不良的订购体验已经成为制约业务发展的瓶颈。因此，发起了订购流程体验优化项目，对平台进行优化改版，以降低咨询量提升订购成功率。改版项目非常成功，优化之后（图3），客服部门反馈数据显示，卖家咨询量由40%下降到7%。在此，与大家分享两点项目经验。

图1 / 优化前的软件服务订购页面

项目经验碳酸志2010

图2 / 优化后的软件订购中心首页（原来无首页）

图3 / 优化后产品列表页

碳酸志2010 项目经验

如何利用数据指导交互设计前期数据知己知彼，百战不殆。我们常说为“中间用户”设计，只有熟悉数据，了解数据，才知道谁是我们设计的 “中间用户”。通常，公司内部都会有数据部门，也会有后台系统。作为交互设计师，你应该有不少于业务线产品经理（PD）的后台数据系统访问权限，这样才能为设计和决策提供有力的数据支持。在设计软件服务订购中心时，我采集了以下几种数据:

基础数据包括原软件服务订购页面的PV、UV，订购的交易转换率，订购的成功率、失败率等数据。

业务数据项目在规划好时，PD 会事先知会交互设计师。然后PD 会写PRD（产品需求文档），交互设计师在此时应开始准备调取部分相关数据，在本例中，调取数据如图4所示。此份定量数据非常重要，对于后期用研的介入、设计的参考都起了很大的作用。拿到原始数据，用EXCEL做分析，我们可以得到以下数据（图5）。

图4 / 软件服务订购用户数据

不难看出软件服务订购主要由拥有X个（由于保密性，该数据不能透露）服务的会员所购买，核心消费人群为拥有X个服务的会员。大多数会员拥有的软件服务数为X。以上数据为前期设计提供了可靠的依据。访问量的变化、用户使用此页面的目标等因素决定了页面的 10

项目经验碳酸志2010

图5 / 用户行为分析

最后设计结果，以及设计该页面时投入的成本。同时，这些数据对于可用性测试的目标用户筛选，提供了明确的指导。

上线后数据 “任务可被完成，任务在无外界影响下可以被完成。” ——《交互设计指南》使用指南总则 by青云要知道我们的用户任务是否可完成，就得监控关键页面：订购成功与订购失败页面。软件服务订购中心的一个重要指标是充值的成功率和失败率。我们来看一下上线初始的1个多月来，出错页面的访问量（图6）可以看到：在上线初期，用户支付的失败率非常高。我们来分析一下当时的页面流程：

第一步 / 输入金额，弹出浮出层

第二步 / 点击去支付宝付款

图6 / 出错页面的访问量

第三步 / 弹出支付宝页面，付款完成后在旧有页面点击任意按钮，判断支付状态。

碳酸志2010 项目经验

看过此流程，不难发现，第二步显得多余，为什么不直接进入第三步呢？其实第二步的增加是为了解决支付失败率高。直觉反应应该是弹出层的问题，经过分析，原来是一些浏览器会阻挡非用户主动激发的弹出页面，故用户点击充值后并未弹出支付宝页面，用户就疑惑了，并随意点击一个按钮，从而导致出错页面访问量过高。将此处优化以后，错误页面的访问量有非常明显的下降（图7）。

图7 / 出错页面的访问量

用户反馈数据与用户对话，了解你的用户的想法，并逐渐的改进产品。与开发、PD、PM共同协商问卷中计划采集的数据后，再与用研同事合作，请他们协助整理出合适的题目。特别是一些在设计中担心的细节问题，如页面载入速度、CDN速度等、信息架构等。这份在线问卷的入口放置在订购中心首页左侧（图8）。打开后，是一份半开放、半封闭式的问卷。用研同学会将这些数据整理好，并出具报告。内容包括定量与定性统计两部分。来自用户的一手反馈能证明团队的工作，还能为后续优化指明方向（图8）。

图8 / 数据反馈步骤

项目经验碳酸志2010

例如：收到用户反馈字体很小（图9）。查看页面数据后，发现软件订购中心的访问者中，使用大分辨率显示器的用户是 1024 X 768用户的2 倍以上！于是有为他们

图9 / 反馈数据

做了专门的界面优化。

图10 / 访问者显示器分辨率分布图

良好的团队协作，提升UED话语权从非UED的角度去分析问题（与非UED同事协作）记得一位朋友讲过：要是两情侣吵架，闹得不可开交。忽然你重复我的话，我来重复你的话，两人会觉得很搞笑，自然矛盾也就和解了。生活如是，工作上也如是。运营、PD、前端、测试、开发提出的需求，我们换位思考一下，就很容易理解对方的立场了。如果你没有这些职位的经验，可以多和PD、运营交流，类似行业的变身还是很容易的。

掌握与PD\PM\开发测试人员沟通的语言为了与PD、PM、开发、架构师更好地沟通需求，我在完成交互设计任务之外，还专门去了解了后台复杂的计费模型、产品定义模型，这样才能更好地了解各项功能的实现成本。这些底层知识，在原型设计时发挥了重要的作用。例如，通过了解预付费模型，后付费模型。在设计计费详单、续费详单时思路会更加清晰，也就能更清楚的向用户展现整个收费过程。

站在架构师的角度讨论体验旧版的订购列表页面将所有服务罗列出来，操作中的订购按钮无论订购与否、一直有效（图11）。用户点击订购按钮后，根据用户权限判断进入订购页面或者错误页面。用户可能多次点击均进入错误页面，体验十分糟糕。为了减少用户不必要的操作，在新版的订购中心，用户在浏览增值产品列表页时，订购状态的逻辑判断移动到该页面（进入产品详情页前），如果该用户没有购买权限，会在当前页面就提示不能购买原因。同时，根据是否可续费显示续费按钮状态；根据是否可升级显示按钮的升级状态，并提示用户原因（图12）。 13

碳酸志2010 项目经验

正是这样，提高了订购流程的满意度。减少了订购中的咨询而增加了订购前的咨询。但页面需要根据每个用户的订购情况来分析应该显示的效果，架构师提出页面展现性能的担忧，该担忧是必要的。与前端交流后提出以下方案，并结合线上数据做分析：方案 A ：页面通过后台计算好之后再返回。优点是可以减轻前端工程师的工作量，缺点是页面完整展示的时间会增加。列表页面是否针对每个用户做出独立计算，将其所有的服务状态读取出来。我们可以参考之前采集的页面PV数据得到以下分析：请求量：?,000,000 *1*40 = ?, 000,000；不考虑网速的情

图11

/ 旧版的订购列表页

况下，页面响应相比方案B增加200 +ms。另外根据页面PV、

UV数据，服务器完全可承受该压力。方案B：页面渲染与服务订购状态异步渲染。即用户会首先看到整体界面，个性化软件服务状态在1S 以内会根据用户具体情况调整。异步获取数据的方案在淘宝的商品详情页面正在使用，适用于信息量大，用户逐步接受数据的页面。缺点是前端工程师需要增加额外工作。同时，如根据状态来判断是否开放短信订购入口，计费系统本身无法判断这些信息，需要调取外部接口，开发成本过高。所以只能枚举计费系统情况，覆盖了80%以上的权限情况。综合考虑前端工作量、开发成本、当前页面PV 等情况，最终选择了方案 A 。通过后续用户反馈入口收集到的数据：只有少量用户反馈访问速度慢。可以证明这次改进是有效的。

图12

/ 新版的订购列表页

项目经验碳酸志2010

与运营合作设计界面时，我就想到了营销手段。做产品列表页面时，预估运营的同事会如何在这个列表上完成他们的营销目标？比如：在超市中的促销商品会贴上折扣的信息，于是利用UED 的技能，为运营提供一些促销技巧。这样贴心的合作方式，大家都会感到合作非常愉快。

与UED同事协作作为一个平台，当其他服务接入时，我们通常希望能得到相关交互设计师、视觉设计师的配合。当该产品转交到其他合作者手里时，让他们理解你的思路，就CODING时候的注释一样，写在相关文件里面。因此，在我的原型里，除了页面，还加入了大量的注释：文案说明，统一平台的介绍语言（图13）；图标接入说明，为接入其他软件服务时视觉统一做准备（图14）；模块规范，前端有了这个，思考全局组件时更轻松（图15）。词语

说明(解释文案)

开启自动续费

开启自动续费后，系统会在软件服务到期前，利用“软件服务订购帐户”中的余额自动为其续费，确认开启？

关闭自动续费

关闭自动续费后，软件服务到期后需要手动为其续费，确认关闭？

关闭到期提醒

关闭到期提醒后，软件服务到期前，系统将关闭旺旺消息和站内信提醒方式，确认关闭提醒

开启到期提醒

开启到期提醒后，软件服务到期前，系统将会以旺旺消息和站内信形式提醒您，确认开启到期提醒吗？

到期时间

软件服务，提供的服务，虚拟化。

有效期

优惠券、卡券等实物。

使用期限

购买时详单中的记录。

图片13 / 文案使用规范

碳酸志2010 项目经验

总结通过前期数据采集、上线后数据分析、用户反馈数据分析等方法指导交互设计，与UED内部和外部同事良好的团队协作，最终提升了UED的话语权。让交互设计师走向专业、品质、协同！

模块名称

规格

图片目标

使用范围

50X50px

为用户提供扫描

管理软件服务页面，快捷浏览页面

80X80px

为用户提供参考

选购页面，从多个中选择软件

购买以及

服务。为用户提供购买参考

重点突出，选购

列表页面为推荐时使用。详情

时提供明显功能

页面描述图片

尺寸 120X 120px

暗示说明。

图片14 / 图标接入说明

模块名称

说明鼠标移开不会消失，点击关闭则消失。

鼠标移上时显示，移开则消失。

管理套餐时使用，为节省空间设计。

列表：如未做特殊说明，所有list 单行高度限定，超出部分截掉。图片15 / 模块规范，前端有了这个，思考全局组件时更轻松

注 / 老三（王万林）淘宝UED交互设计师 laosan@taobao.com 晓荷（何立）淘宝UED资深用户体验研究员xiaohe@taobao.com

项目经验碳酸志2010

碳酸饮料会第45期

友好的变革超级旺铺体验设计的机会与挑战文 / 在天（李佩瑄）

最近我们在实践一项从创意到设计，从UER和UED对用户和产品的把握，再到前端工程师对界面展示技术的深刻理解的新产品项目。

项目需求何来？客户A：比较林 / 4钻卖家需求点： “我希望把我的品牌理念在店铺中呈现的更加完美，让用户来到我的店铺就感觉到我们商品的独特魅力。” 客户 B ：开心张 / 5 心买家需求点： “搜了半天好像所有品牌的店铺都一样，就不愿意挑了。我希望轻松掌握每个品牌下商品的特征和迅速判断是不是我要的。” 客户 C ：唯美李 / 3年旺铺设计唯美经验需求点： “目前只能给网店修饰一些边边角角，真希望能让我放开手脚把理想中的网店样子设计和实现出来。” 综合看：淘宝网有150多万家“活跃”店铺，因店铺功能开放的限制。但更多只体现在商品更新数的活跃，而不能让整个店铺的营销、商品、客户关系整体活跃。目前旺铺版本难以满足日益增长的卖家品牌营销需求。致使千店一面，买家也难以从店铺内发现差异化商品。结论是：当店铺展示和功能上的扩展变革能改变一个市场的发展时，我们明白是机会来了。 17

碳酸志2010 项目经验

一举多得的新尝试既然要提升150万家店铺的展示结构和品质，显然我们投入多少设计和开发资源都是不够的。完全把皮肤分离交给市场上的设计师又会落入产品不够灵活的尴尬境地。条件和资源的现状让我们只能走一条路：通过前端语言的开放，让设计师能够灵活地设计和开发任意样式的淘宝店，再由卖家购买后直接使用。由此，一张简单而核心的用户流程就显而易见（图1）。

产品目标

卖家用户群：简单易用：在功能倍增的同时，保持产品的简单易用。个性化：千店千面，产品有足够大的空间让用户来个性化展示。行业特殊化：不同行业对于店铺展示和店铺功能的需求也不同，所以要尽可能多的做好扩展。

设计师用户群：更加开放：开放更多标签，后台属性给设计师来更大的自定义空间。低成本：在保证全新效果的同时降低开发成本。交易市场：公平公正的交易市场，保证卖家用户群容易获得模板，同时保证设计师能分到佣金。

全新的挑战如何从0到1 开发者面对复杂的开发体系及流程，我们如何能服务这类人群，使其降低学习成本快速上手。为此，整体的解决方案应有助于用户完成模板开发（图2）。

图1

项目经验碳酸志2010

什么样的模板才是好模板？有个困扰已久的问题：什么样的模板才是好模板？是最Cool的吗？一定不是，最快的？也不对。于是我们模拟普通消费者在店铺中购物，最终形成了一致的看法：体验好，才是真的好。它们是：1.模板美观实用； 2.更新简单易用；3 .网页打开迅速。这三个维度构成消费者对一个模板评价的综合标准。关于速度，我们在开发系统中放置了一个自动检测器（图3），可以帮助开发者检测当面页面加载资源情况和引导方式。

可怕的改版从过去的经验来看，UGC 类产品的改版意味着很多，比如：学新方式，改变旧习惯，情感依赖，抗拒新版，不理解，恐惧，迷失，不能返回等等。基与用户对旧版的习惯和对新版不适应的可能，我们做出了下面的改版和沟通过程（图4）。

图2

图3

碳酸志2010 项目经验

图4

最后，7年，这是淘宝的全部历史。7年，对于一个人而言，仅仅意味着刚刚开始。在业界非常优秀的互联网服务面前，淘宝还是显得稚嫩。向优秀的开发设计者学习，一起探索电子商务增长的奥秘，一起建设未来网络店铺的蓝图，仍将是我们未来的最重要的主题。如你所闻，电子商务正在全球范围内改变人们的生活方式，也取得了巨大的商业机会。淘宝网作为亚洲最大的零售商圈，2009 年全年交易额达到2083亿人民币，占据国内电子商务80 %以上的市场份额。2008 年， “大淘宝战略”应运而生。我们致力于成为电子商务的基础服务提供商，为电子商务参与者提供水、电、煤等基础设施，繁荣整个网络购物市场。据统计：到目前为止，淘宝网内部店铺设计这个细分行业，每天产生超过50万的模板交易。放眼未来。我们看得到，不同类型不同模式的电子商务业态正在遍地开花，有奢侈品店，有垂直点，有快速消费品店等等。店铺的表现形式千变万化，来满足不同属性的消费者喜好。淘宝网上的活跃店铺数已经超过了150万家，对于店铺展示的个性化需求非常旺盛。可以预见：网络店铺的建设需要更加优秀的开发设计者的加入，需要更加灵活开放的底层，才有可能满足与日俱增的商业展示需求，让品牌在淘宝这个巨大市场中落地和开花。同样在过去的7年里，淘宝店铺也仅仅是个稚嫩的孩子。当前，我们正致力于把它建设成中文领域最优秀的店铺产品，我们希望所有的设计开发者都能和我们一起，见证这个追寻理想的过程。让我们携手200 万淘宝卖家，帮助他们的品牌在淘宝店铺落地，共赢未来！这一切才刚刚开始。好在，刚刚开始。

注 / 在天（李佩瑄）淘宝UED资深交互设计师 zaitian@taobao.com

项目经验碳酸志2010

碳酸饮料会第31期

图片空间设计过程文 / 无酬（任爱松）

淘宝网的图片空间产品，肩负着保障商品浏览体验安全稳定的重要使命，如何在与众多的免费图片存储服务的竞争中取得优势，对产品设计提出了很大的挑战。如何建立淘宝网的图片存储服务的核心竞争力，体验设计师能做什么？下面的文章将向大家揭示图片空间二期项目的设计过程。网络上的图片存储服务很多，淘宝网的图片存储跟其他的图片存储服务有什么不同？在拥有几千件宝贝、数万张图片的淘宝卖家群体中，如何将图片管理成本降到最低？这是设计构思阶段考虑的两个主要问题。意识到淘宝网作为电子商务平台，所有的图片管理都是围绕商品进行。所以我想对图片管理工作的设计思路也许可以脱离图片本身而从商品的维度展开。如果图片的命名，分类，管理都以商品为维度，我们就可以创造出一种全新的电子商务型图片空间。

独特的图片检索方式：通过宝贝找到图片以往的图片检索服务都是基于图片名称，这种方式要求用户有一套系统科学的命名规则，来保证检索结果的准确性。淘宝网的图片主要放在宝贝描述里，而卖家查找图片也无非是为了对宝贝描述图进行维护或修改。所以我们建立了通过宝贝名称查找与宝贝相关的图片的检索机制（图1）。这样卖家就不再需要维护图片名称。因为他们只需要知道宝贝与图片的对应关系就可以了。

碳酸志2010 项目经验

图片分类方式：建立图片自动分类由于所有图片都与宝贝相关，而宝贝又与前台的店铺类目相关。因此图片分类完全可以通过这种关联关系建立基于前台店铺类目的图片自动分类（图2，图3）。

图1 / 将图片与宝贝名称关联

信息组织结构:以动态标签代替文件分类由于图片可能属于多个宝贝，而宝贝又可能属于多个类目，如衬衣同时属于“上装”和“正装”两个类目。这时候图片所属宝贝和所属分类都会出现多个。传统的文件分类方式显然不能满足这种复杂的信息结构。传统的文件组织方式，每个文件只能属于一个分类，如果要在多个分类中管理文件，就要产生多个副本。而在标签组织的信息结构里，文件是独立于分类之外的。它的组织方式依靠的是文件上的不同标签。具有相同标签的图片文件会被聚合到一起展现。

图3 / 图片自动分类规则

图2

项目经验碳酸志2010

图4 / 动态标签与自动分类的逻辑

但标签的组织方式有一个问题：对于淘宝上的大部分用户而言，标签是一个陌生的概念。因此在产品设计上采用标签分类逻辑的同时，表现形式依然呈现为传统的文件分类形式。让表现模型尽可能接近用户的心理模型，避免了标签给初级用户带来的困扰。自动分类的类目标签是动态的，宝贝所属类目变化后，图片关联的标签也动态变化。真正做到无需维护的智能分类。手工分类的类目标签是用户手工维护的，允许用户定义自己的分类维度。系统将手工类目转化为图片关联的标签之一（图4）。

产品创新的运营价值：淘宝网通过图片和宝贝之间的关联关系建立的检索和自动分类方式。是只有淘宝网才可以提供的服务。任何其他的图片存储服务商无法提供类似功能。因此可以树立竞争壁垒，对运营推广有非常大的帮助。

注 / 无酬（任爱松）淘宝UED资深交互设计师 wuchou@taobao.com

碳酸志2010 项目经验

碳酸饮料会第50期

图片格式与设计那点事儿文 / 平四（魏南衡）

我为什么想整理这方面的内容，就像油画家要了解他的颜料和画布、雕塑家要了解他的石材一样，作为网页设计师也应该对图片格式的特性有一定了解，这样才能更好的表达你的创意和想法。除此之外，我们在平时工作中也会遇到许多与图片格式相关的问题。比如设计师会奇怪为什么有些页面的产出物总是没法达到设计稿那样的品质和效果，什么样的设计才更适合Web页面；页面重构师和前端工程师则想知道在切图的时候应采用什么图片格式、如何进行参数设置才能达到品质和性能的最优化。有时候我们可能会因为一张格式不正确的图片而导致设计品质的下降以及页面性能的降低。了解图片格式的特性就是为了解答这些困惑从而让我们设计的产品更好、更快。

基本概念要了解图片格式的特性，首先得从一些基本概念开始。这部分内容读起来可能会比较枯燥，但如果你耐着性子读完它，相信会获益匪浅。

矢量图与位图矢量图-完美的几何图形矢量图是通过组成图形的一些基本元素，如点、线、面，边框，填充色等信息通过计算的方式来显示图形的。就好比我们在几何学里面描述一个圆可以通过它的圆心位置和半径来描述，当然还可以通过边框的 24

项目经验碳酸志2010

粗细、颜色以及填充的颜色等数据去描述它的样式。而电脑在显示的时候则通过这些数据去绘制出我们定义的图像。矢量图的优点在于文件相对较小，并且放大缩小不会失真。缺点则是这些完美的几何图形很难表现自然度高的写实图像。需要强调说明的是我们在web页面上所使用的图像都是位图，即便有些称为矢量图形（如矢量icon 等）也是指通过矢量工具进行绘制然后再转成位图格式在web上使用的（区别于像素绘制的图形）。

位图-神奇的拼图位图又叫像素图或栅格图，它是通过记录图像中每一个点的颜色、深度、透明度等信息来存储和显示图像的。一张位图就好比一幅大的拼图，只不过每个拼块都是一个纯色的像素点，当我们把这些不同颜色的像素点按照一定规律排列在一起的时候，就形成了我们所看到的图像。所以当我们放大一幅像素图时，能看到这些拼片一样的像素点（图1）。

图1 / 位图原理

位图的优点是利于显示色彩层次丰富的写实图像。缺点则是文件较大，放大和缩小图像会失真。尽管我们在web页面中所使用的JPG、PNG、GIF格式的图像都是位图，即他们都是通过记录像素点的数据来保存和显示图像，但这些不同格式的图像在记录这些数据时的方式却不一样，这就是涉及到有损压缩和无损压缩的区别。

有损压缩与无损压缩

有损压缩-你看到的不一定是真实的按照我的理解有损压缩就是在存储图像的时候并不完全真实的记录图像上每个像素点的数据信息，而是会根据人眼观察现实世界的特性（人眼对光线的敏感度比对颜色的敏感度要高，生物实验证明当颜色缺失时人脑会利用与附近最接近的颜色来自动填补缺失的颜色）对图像数据进行处理，去掉那些图像上会被人眼忽略的细节，然后使用附近的颜色通过渐变或其他形式进行填充。这样既能大大降低图像信息的数据量，又不会影响图像的还原效果。

JPG是我们最常见的采用有损压缩对图像信息进行处理的图片格式。JPG 在存储图像时会把图像分解成 8 * 8 像素的栅格（图2），然后对每个栅格的数据进行压缩处理，

图2 / JPG图片的8 * 8原理

当我们放大一幅图像的时候，就会发现这些8 * 8像素栅格中很多细节信息被去除，而通过一些特殊算法用附近的颜色进行填充（为了让大家看得更清楚我将图像的压缩比率调到很低）。这也是为什么我们用JPG 存储图像有时会产生块状模糊的原因。

碳酸志2010 项目经验

无损压缩-最精确的拼图相对有损压缩而言无损压缩则会真实的记录图像上每个像素点的数据信息，但为了压缩图像文件的大小会采取一些特殊的算法。无损压缩的压缩原理是先判断图像上哪些区域的颜色是相同的，哪些是不同的，然后把这些相同的数据信息进行压缩记录，（例如一片蓝色的天空只需要记录起点和终点的位置就可以了），而把不同的数据另外保存（例如天空上的白云和图3 / PNG图片的索引颜色表

渐变等数据）。

PNG是我们最常见的一种采用无损压缩的图片格式。无损压缩在存储图像前会先判断图像上哪些地方是相同的哪些地方是不同的，为此需要对图像上所有出现的颜色进行索引（图3），我们把称这些颜色称为索引色。索引色就好比绘制这幅图像的“调色版”，PNG在显示图像的时候会用“调色版”上的这些颜色去填充相应的位置。这里大家可能会疑惑既然PNG采用的是无损压缩为什么我们保存的PNG格式图片有时还会失真呢？这是因为无损压缩只是说它的压缩方式会尽可能真实的还原图像，但从它的压缩原理我们可以知道它是通过索引图像上相同区域的颜色进行压缩和还原的，这就意味着只有在图像上出现的颜色数量小于我们可以保存的颜色数量时，才能真实的记录和还原图像，否则就会丢失一些图像信息（PNG8最多只能索引256 种颜色，所以对于颜色较多的图像不能真实还原；PNG24则可以保存1600多万种颜色，基本能够真实还原我们肉眼可以分别的所有颜色；PNG 格式最多可以保存 48位颜色通道）。而对于有损压缩来说，不管图像上的颜色多少，都会损失图像信息。

JPG和PNG 关于JPG和PNG的基本信息介绍这里就不赘述了，有兴趣详细了解的同学可以去网上搜索一下相关信息：什么是JPG、什么是PNG。另外这里我们也不对GIF进行讨论，因为PNG就是为取代GIF 而生的，而且

PNG的压缩算法也要优于GIF，所以只要不是需要动画效果的地方强烈建议都采用PNG格式图片。这里我们不妨把JPG和PNG的一些特性进行简单对比：格式

压缩模式

交错支持

透明支持

动画支持

JPG

有损压缩

支持

不支持

PNG

无损压缩

支持

不支持

JPG的特性

支持摄影图像或写实图像的高级压缩，并且可利用压缩比例控制图像文件大小。

有损压缩会使图像数据质量下降，并且在编辑和重新保存JPG格式图像时，这种下降损失会累积。

项目经验碳酸志2010

JPG不适用于保存所含颜色很少、具有大块颜色相近的区域或亮度差异十分明显的较简单的图像。

PNG的特性 1.

能在保证最不失真的情况下尽可能压缩图像文件的大小。

PNG用来存储灰度图像时，灰度图像的深度可多到16位，存储彩色图像时，彩色图像的深度可多到48位，并且还可存储多到16位的α通道数据。

对于需要高保真的较复杂的图像，PNG虽然能无损压缩，但图片文件较大，不适合应用在Web页面上。

PNG8与PNG24 提到PNG 格式就不得不提到PNG 8 和PNG24，这种叫法并非官方定义，但由于广泛使用已经被大家普遍接受了。通过前面的介绍我们知道PNG采用无损压缩是通过索引色去存储和还原图像的，PNG 8 和

PNG24后面的数字则是代表这种PNG格式最多可以索引和存储的颜色值。 “8”代表2的8 次方也就是 256 色，而24则代表2的24次方大概有1600多万色。不仅如此，PNG8还支持1位的布尔透明通道，所谓布尔透明指的是要么完全透明要么完全不透明。而

PNG24则支持 8位（256 阶）的alpha 透明通道，也就是说可以存储从完全透明到完全不透明一共256 个层级的透明度（即所谓的半透明）。格式

最高支持色彩通道

索引色编辑支持

透明支持

PNG8

256色

支持

支持布尔透明

PNG24

约1600万色

不支持

支持8位（256阶）alpha 透明

可能通过以上特性的对比大家还不能很直观的理解在实际应用中到底应该选择什么格式的图片文件，我们不妨结合上面的基本概念通过几个例子给大家说明。

实际应用什么时候应该使用PNG 示例1 这是（图4）淘宝网最常见的一个图片即“立刻购买”按钮，这里我尝试用JPG和PNG 8 格式分别进行保存，可以看到保存的结果有两个值得注意的地方： 1.

JPG的文件大小是PNG文件大小的2倍。

JPG 不仅文件更大并且还出现了噪点（如图中红色方框标注）

那么是什么原因造成这样的差异呢？首先我们可以看出“ 立刻购买 ”这个按钮是在

photoshop中用矢量工具绘制出来的，其渐变填充是非常

图4 / (左)jpg 100%品质大小：8k （右）png8 大小：4k

碳酸志2010 项目经验

规则的线性渐变，文字颜色和描边等都是采用纯色，所以这个图像所包含的色彩信息非常有限。根据前面我们介绍的无损压缩的特性，当用PNG存储这个图像时，只需要保存很少的色彩信息就可以真实还原这个图像。而对于JPG 格式来说大小主要决定于图像的颜色层次，所以在这种颜色较少但对比强烈的情况下，反而不能很好的压缩文件。另外根据有损压缩的压缩算法JPG会在图像中通过渐变或其他方式填充一些被删除的数据信息来对图像进行压缩，图中红色和白色的地方由于色差较大，JPG在压缩过程中就会填充一些额外的杂色进去，反而影响了图像的质量。这也是为什么JPG不利于存储大块颜色相近区域以及亮度差异十分明显的图像的原因。

示例2 我们再来看另外一个应用场景，这是（图5）在淘宝彩票页面使用的一个 Banner图像。同样用PNG 8 和 JPG 进行保存，可以发现当用 PNG 8 保存时不仅保证了图像的质量且图像文件大小仅有 8 . 3 K ，而用

JPG100 % 保存时文件大小增加到44 . 2K，如果不经放大可能还看不出具体的差异，但实际和前面一样也会出现不必要的噪点。如果我们要达到PNG8的压缩率采用JPG 45%进行保存，则图像会出现较严重的失真。由此我们可以得出结论，具备以下条件的图像更适合用PNG8 格式进行存储： 1.图像上颜色较少，并且主要以纯色或者平滑的渐变色进行填充。 2 . 具备较大亮度差异以及强烈对比的简单图像（如 “立刻购买”按钮中的背景和文字）。根据经验具备上述条件的图像一般是使用

photoshop或其他软件中的矢量工具进行绘制然后再保存成位图的图像。

图5

什么时候应该使用JPG 示例1 从JPG的特性介绍我们知道JPG更适合用来存储摄影或写实图像，所以我们不妨先拿一张摄影作品（图6）做尝试。这是（图6）一副巴士车的照片，我们尝试用JPG 60 %（左上）、PNG 8 256色无仿色（右上）、PNG 8 256色扩散仿色（左下）、PNG24（右下）分别进行存储。可以看出当用JPG存储图像时不仅能够达到最大的压缩率，也能尽量保证原图的还原效果。而采用PNG8进行保存时图像文件大小更大，失真也较严重。只有在PNG24的格式下才能保证品质，然而文件大小却比JPG大很多。产生这种结果的原因也与JPG和PNG各自的压缩算法有关。对于摄影或者写实作品，由于受环境光线的影响，图像上的色彩层次十分丰富。比如巴士车上的红色区域由于反光、阴影以及透视效果会形成明暗、深浅各异的区域，如果用PNG去保存，则需要不同明暗度的 28

项目经验碳酸志2010

红色去存储这些区域。对于整张图片来说，PNG8的256色无法完全索引图像上出现的所有颜色，于是在存储时就会丢失许多颜色而产生失真。如果要保证图像的效果，则需要色彩范围更广的PNG24进行存储，相应的文件大小也会增加。而JPG的压缩算法则更利于对真实世界中这些复杂的色彩变化进行压缩处理，从而在尽量压缩文件大小的情况下比较好的还原图像的视觉效果。

示例2 那么是不是只有在存储照片时才需要用到JPG呢？我们不妨来看另外一个例子。这是（图7）最近比较火爆的某微博页面背景，在这里我们可以选择不同的风格，每种风格都会有一个非常有特色的背景图片。我们尝试用不同图片格式对背景进行保存时可以发现：当用JPG进行保存时（直接背景另存为）文件大小仅36 . 3 K ；而用PNG 8 256色无仿色去保存时大小增图6

加到 57.7 K，不仅如此由于颜色的缺失在图像上还出现了一些带锯齿的色块；为了降低这些色块对图像质量的影响我们对PNG8 增加了扩散仿色的效果，此时文件大小达到了156 . 3K；而当采用PNG24完全不失真的保存时文件大小是231.9K。尽管这幅背景图也是通过photoshop制作，但我们可以发现由于在图像上采用了很多的真实素材（比如白云、蚂蚁、绿叶等），而这些真实素材和摄影图像一样也包含非常丰富的色彩层次，所以也不适合用

PNG 格式进行保存。这个时候就应该采用JPG格式。由此我们可以得出结论：对于写实的摄影图像或是颜色层次丰富的图像采用JPG的图片格式保存一般能达到最佳的压缩效果。根据经验我们在页面中使用的商品图片、采用人像或者实物素材制作的广告 Banner 等图像更适合用 JPG 的图片格式保存。

总结由此可见在存储图像时采用 JPG 还是PNG主要依据图像上的色彩层次和颜色数量进行选择。一般层次丰富图7

碳酸志2010 项目经验

颜色较多的图像采用JPG存储，而颜色简单对比强烈的则需要采用PNG。但也会有一些特殊情况，例如有些图像尽管色彩层次丰富，但由于图片尺寸较小，上面包含的颜色数量有限时，也可以尝试用PNG进行存储。而有些矢量工具绘制的图像由于采用较多的滤镜特效也会形成丰富的色彩层次，这个时候就需要采用

JPG进行存储了。另外还有一个原则就是用于页面结构的基本视觉元素，如容器的背景、按钮、导航的背景等应该尽量用PNG 格式进行存储，这样才能更好的保证设计品质。而其他一些内容元素，如广告Banner、商品图片等对质量要求不是特别苛刻的，则可以用JPG去进行存储从而压缩文件大小。

思考与实践什么样的设计更适合web页面？慎用较“重”的视觉设计元素 Web2 . 0 时代网页设计的一大趋势就是越来越“轻”。除了对那些高光和圆角效果的审美疲劳外，设计师们也开始意识到好的设计应该是内容与形式的完美结合，而非形式的堆砌。所以设计师在应用那些较 “重”的视觉效果时，一定要想清楚这样做的目的和意义，以及是否与产品的特点和受众的气质相契合。 “轻量”设计一个比较典型的例子就是国内某知名网站（图 8），几乎没有采用任何需要图片的视觉元素，而是通过简单的CSS 样式去实现，这样不仅能够突出内容，更能提升页面的访问速度。所以我十分强烈建议视觉设计师也掌握一定的html和css知识（尤其是CSS 3实现了很多过去需要图片才能实现的效果，例如圆角和渐变），这样在做设计的时候能够全面的考虑产品效果。这个电子商务网站（图9）则采用过多无意义的视觉元素堆砌，不仅没有实现很好的设计效果，反而由于需要太多的图片元素而影响了页面的性能。如果由于产品需要，在设计中不得不使用较”重“的视觉元素，我们也可以根据图片格式的特点选择适当的表现形式以达到更好的效果。例如在下面这个例子（图10）中，第一个Banner应用了更适合PNG格式的设计风格（较多纯色和简单渐变的应用）不仅能达到热烈、突出的视觉效果，在保证图片质量的同时也更好的压缩了文件大小；而第二个Banner由于应用了过于复杂的渐变色和强烈对比，并且在局部区域采用太多的高光和阴影效果，导致图片的色彩层次过多，不论采用PNG还是JPG格式保存都无法实现图像质量和文件大小的最优化。当然举这个例子并不是要设计师在做设计的时候过分考虑页面性能问题，而是要清楚不同设计形式的效果和实现成本，在设计过程中多问自己为什么要这样做？

内容和形式的分离对于一些比较强调视觉效果的特殊产品，比如活动推广页面或MiniSite。我们也可以利用图片格式和一些前端知识对设计进行优化，比较常用的一种设计方法就是内容和形式的分离。如下面一些国外比较流行的设计风格（图11），以及前面提到的微博网站，都是通过大幅的背景图去进行意境传达和气氛渲染。这样做的一个好处就是能把需要用到图片的视觉元素进行集中的压缩优化同

项目经验碳酸志2010

图8

图9

图10

碳酸志2010 项目经验

时又不会由于加载太慢而影响用户的访问速度（前端实现时一般会用相近的背景色先进行填充，然后在逐步显示背景图）。个人认为好的视觉设计最重要是意境传达和气氛渲染，使用高光、阴影等滤镜效果的目的也仅仅是为了达到质感上的统一从而更好的去传达意境和渲染气氛，所以切忌为了质感而质感。即便是为了体现设计品质也不一定非要使用炫丽的滤镜，相较而言优美的布局和精巧的结构才是体现品质的关键！

通过较小的视觉牺牲换取较大的性能提升有时候为了提升页面的加载速度达到更好的用户体验，不得不对设计进行优化。这个时候利用我们对图片格式知识的掌握就可以更有目的性的去进行优化。例如是淘宝“双十一”大促活动的一个页头设计（图12），由于页面访问量非常大并且要使用较多的商

图11

品图片，不得不对页头设计进行优化以提升性能。这个时候我们就可以去掉一些不太重要的高光、渐变和阴影效果，从而大大压缩文件大小。

我们还可以做些什么？

Sprite图片二次优化由于目前国内很多互联网公司没有页面重构师这一职位，所以页面切图和静态代码实现基本都是前端工程师去完成。为提高页面性能目前普遍采用的实现方式是将与页面结构相关的需要用到图片的视觉元素集中在一个

PNG 图片上，然后通过 CSS 样式将其应用到页面中，我们称这个图片为Sprite图片。由于这个图片上经常要集中较多的视觉元素，在用PNG 格式存储时难免会产生失真而影响图像质量。这个时候就需要视觉设计师帮助前端工程师对Sprite图片进行优化，这样做的好处是不仅能提升图片质量，还能达到减小文件大小的效果，可谓一举两得。图12

项目经验碳酸志2010

这个优化前的Sprite图片（图13），由于视觉元素过多PNG8无法真实保存所有的颜色信息，于是便会产生颜色缺失和出现杂色。在前端工程师完成页面的静态代码之后，视觉设计师可以将定位好的Sprite图片进行像素级的优化（图14），去掉不必要的杂色，并用已存在的索引色对缺失的地方进行补充，这样不仅能压缩文件大小，也能提升设计品质。

Sprite图片的优化方式有很多种，比如通过索引色排序进行颜色的删减和替换，或是直接通过像素描绘进行优化。设计师可以根据具体的场景进行选择和处理。以上设计和优化的方法只是我在工作中一些经验的积累和总结，个人感觉每一个点展开来都有很多值得研究和讨论的地方，限于篇幅有限不能继续深入。关于图片优化的高级技巧有两篇比较经典的文章推荐给大家：Clever PN GO ptimization Techniques、Clever JPE GOptimization Techniques。

附录——Photoshop中各种参数的含义及设置技巧 PNG8的参数设置

图 14 / 优化后Sprite图片

图13 / 优化前Sprite图片

减低颜色深度算法与颜色指定用于生成颜色查找表的方法，以及想要在颜色查找表中使用的颜色数量。可以选择以下减低颜色深度算法之一（图15）： 1.可感知：通过为人眼比较灵敏的颜色赋以优先权来创建自定颜色表。 2.可选择：创建一个颜色表，此表与”可感知”颜色表类似，但对大范围的颜色区域和保留Web颜色有利。此颜色表通常会生成具有最大颜色完整性的图像。 “可选择”是默认选项。 3 .随样性：通过从图像的主要色谱中提取色样来创建自定颜色表。例如，只包含绿色和蓝色的图像产

碳酸志2010 项目经验

生主要由绿色和蓝色构成的颜色表。大多数图像的颜色集中在色谱的特定区域。 4 .受限(Web)：使用Windows和MacOS 8位（256色）调板通用的标准 216色颜色表。该选项确保当使用8位颜色显示图像时，不会对颜色应用浏览器仿色。（该调板也称为Web安全调板。）使用 Web 调板可能会创建较大的文件，因此，只有当避免浏览器仿色是优先考虑的因素时，才建议使用该选项。 5 .自定：使用用户创建或修改的调色板。如果打开现有的GIF或PNG- 8文件，它将具有自定调色板。使用”存储为Web和设备所用格式”对话框中的”颜色表”调板可自定颜色查找表。

图15 / PNG的优化方式

6 .黑白、灰度、MacOS、Windows 使用一组调色板。建议：一般情况下默认选择“可选择”项即可。

仿色方法和仿色确定应用程序仿色的方法和数量。”仿色”是指模拟计算机的颜色显示系统中未提供的颜色的方法。较高的仿色百分比使图像中出现更多的颜色和更多的细节，但同时也会增大文件大小。为了获得最佳压缩比，请使用可提供所需颜色细节的最低百分比的仿色。若图像所包含的颜色主要是纯色，则在不应用仿色时通常也能正常显示。包含连续色调（尤其是颜色渐变）的图像，可能需要仿色以防止出现颜色条带现象。可以选择以下几种仿色方法之一（图 16）：

图16 / PNG的几种仿色方式

1.扩散：应用与”图案”仿色相比通常不太明显的随机图案。仿色效果在相邻像素间扩散。 2.图案：使用类似半调的方形图案模拟颜色表中没有的任何颜色。 34

项目经验碳酸志2010

图17 / 对PNG图片透明度和杂边的处理

3 .杂色：应用与”扩散”仿色方法相似的随机图案，但不在相邻像素间扩散图案。使用”杂色”仿色方法时不会出现接缝。建议：一般只在图片颜色过多产生失真的情况下才需要选择仿色。建议选择扩散仿色，可以适当调节仿色的百分比以达到最佳的效果。仿色度越高文件大小也越大。

透明度和杂边确定如何优化图像中的透明像素（图17）。 1.要使完全透明的像素透明并将部分透明的像素与一种颜色相混合，请选择”透明度”，然后选择一种杂边颜色。 2.要使用一种颜色填充完全透明的像素并将部分透明的像素与同一种颜色相混合，请选择一种杂边颜色，然后取消选择”透明度”。 3 .要选择杂边颜色，请单击”杂边”色板，然后在拾色器中选择一种颜色。或者，也可以从”杂边”菜单中选择一个选项：”吸管”（使用吸管样本框中的颜色）、”前景色”、”背景色”、”白色”、”黑色”或”其它”（使用拾色器）。建议：强烈建议由视觉设计师根据实际应用场景在保存之前就处理好透明图像的背景。

交错 PNG、GIF 这两种图像格式都提供了一种功能，让图像能够更快地显示。图像可以以一种特殊方式存储，显示时先大概显示图像的草图，当文件全部下载后再填充细节。这起到一种很有意义的心理效果，因为这样使人们有东西可看，而不必坐着干等大型图像慢慢显示在屏幕上。建议：对于尺寸和文件大小相对较大的图片建议勾选此项。

JPG的参数设置

碳酸志2010 项目经验

品质从”品质级别”菜单中选取一个选项（图18），或者在”品质”文本框中指定一个值。”品质”设置越高，压缩算法保留的细节越多。但是，使用高”品质”设置比使用低”品质”设置生成的文件大。查看几种品质设置下的优化图像，确定品质和文件大小之间的最佳平衡点。

品质设置技巧 1.不要存100%品质的JPG格式图片。因为100%并不一定是最高的品质，而

图18 / JPG图片的设置

是一个优化算法的极限值，所以会增加不必要的文件大小。建议存储 95%品质的图片就可以最大限度的降低失真。 2.谨慎使用50 %品质以下的压缩率。使用50 %以下品质存储时会采用额外的压缩算法而导致图片失真更严重，尤其是对于有高对比度的图片。

优化选择”优化”创建文件大小稍小的增强型JPEG。建议使用”优化JPEG”格式以获得最大文件压缩量；但是，一些较旧的浏览器不支持此特性。建议：建议勾选此项，目前基本已经不存在不支持改功能的浏览器。

连续选择”连续”创建在 Web浏览器中连续显示的图像。图像将显示为一系列的叠加，使查看者在整个图像下载完毕之前，能够看到图像的低分辨率版本。连续 JPEG需要更多的内存用于查看，一些浏览器不支持该选项。建议：勾选此项在某些情况下可压缩文件大小（图片大小大于10 k时），某些情况下会增大文件大小，建议在保存是根据实际情况决定。不过IE6 及更早版本的IE浏览器不支持JPG连续显示，而是在图片完全加载后一次成像，用户体验上可能还不如不使用连续的逐步成像要好，所以建议慎选此项。

模糊指定应用于图像的模糊量。”模糊”选项应用与”高斯模糊”滤镜相同的效果，并允许进一步压缩文件以获得更小的文件大小。建议使用0.1到0. 5之间的设置。

ICC配置文件选择”ICC配置文件”将图片的ICC配置文件与文件保留在一起。ICC配置文件由某些浏览器用于色彩校正。（请参阅Photoshop中设置色彩管理。）

杂边指定原稿图像中透明像素的填充色：点按”杂边”色板，然后在拾色器中选择一种颜色。从”杂边”菜单中选取选项。原稿图像中完全透明的像素由选中的颜色填充，原稿图像中部分透明的像素与选中的颜色相混合。

注 / 平四（魏南衡）淘宝UED交互设计师 pingsi@taobao.com

体验研究碳酸志2010

碳酸饮料会第37期

基于生活形态的用户分群研究文 / 渡劫（范欣珩）

首先明确一下，本文主要是着眼于“生活形态”进行“用户分群”，将围绕着这两个关键词深入讨论。

一、常规的用户分群维度一：性别、年龄、地域、星座、生肖、血型（图1）；维度二：星级、规模、开店时长（图2）；维度三：使用意愿、使用满意度、价格敏感度（图3）。

图1 / 维度一

图2 / 维度二

图3 / 维度三

碳酸志2010 体验研究

每个维度中包含若干个分支，多数情况下，常规的分群研究会选取 1- 3 个左右的变量进行分群，或单独使用，或交叉在一起设定条件使用。例如给以下NBA 球员分群（图 4），我们多半会使用在球场上的位置、投篮命中率、肤色、身高、年薪等变量，不太会涉及心理层面的变量，也很少会想到把变量交叉在一起使用，为什么？主要是以上三个维度的分类逐级变得包含因素越来越多，越来越复杂，越来越需要进行辅助测量才能得到（图5）。单纯的以个别变量进行分析，好处在于变量相对易得、划分明确、结论简单清晰；不足则表现在忽略了复杂多变的情况，而交叉划分的层级会随变量增加越来越多。如何弥

图4

补这些不足呢？引入生活形态是一种有益的尝试，生活形态综合体现了生理、行为、心理等层面的信息，能够在一定程度上将问题化繁为简（图6）。

图5

图6

体验研究碳酸志2010

二、生活形态介绍生活形态（Life-Style）的概念源自社会学与心理学（1927），六十年代被正式引用到市场营销领域，运用其心理影射与多维度等特质，着力解释人口统计变量所无法解释的行为，描绘出消费者的态度与价值观等人性层面。

Engel，Blackwell和Miniard三位学者参考许多前人意见后，将生活形态定义为“个人生活及如何分配时间与金钱等资源的模式，反映出个人所从事的活动、有兴趣的事物及对各种议题的观点”，并强调生活形态是一种综合性的观念架构，是一个人价值观和人格特质综合影响下的表现行为。

1.生活形态的研究方法目前测量生活形态最常见的方法是

Wells 和 Tigert（1971）所发展的 AIO 量表（图7），他们建议采用适当的描述语句，直接询问研究对象的活动、兴趣及观点。其中，活动（Activity）指一种具体明显的行为（Manifest-action），如购物、看电视等，而这些行为可借助观察得知，但其原因却不易被测量出来。兴趣（Interest）指人们对于某些事物或主体产生的兴奋程度，能够引发特殊且持续性的注意。观点（Opinion）指个人

图7 / AIO表

对外界环境的刺激所产生的疑问，以及所给予的口头上或文字上的回应。李奥贝纳广告公司的Plummer在1974 年整合发展了生活形态 AIO量表，除了原有的三方面考量，另加入了人口统计变量进行综合性的描述，并整理出三十六个子项目。

Plummer建议的生活形态维度：活动

兴趣

观点

人口统计变量

工作

家族

自我

年龄

嗜好

家庭

社会议题

教育

公共事务

工作

政治

所得

度假

社区

商业

职业

娱乐

消遣

经济

家庭规模

社团

流行

教育

住所

社区

食物

产品

地理位置

购物

媒体

未来

城市大小

运动

成就

文化

家庭生命周期

碳酸志2010 体验研究

也有学者认为AIO量表过于繁琐，提出以价值观方法VSA（Value Systems Approach）取而代之，其中Kahle（1983）也提出更为简易的价值测量工具（List of Value，简称LOV）。

LOV呈现九种价值观: 1．归属感 2．刺激 3．与他人关系良好 4．安全感 5．自我实现 6．受人敬重 7．生活中的乐趣 8．自尊心 9．成就感

斯坦福研究所（Stanford Research Institute）的Mitchell（1983）提出VALS（Value sand LifeStyles）的测量方法（图8），在原本生活形态

AIO量表之外，又加入了价值观（Value）的概念。1989 年斯坦福研究所进一步修正VALS，发展出一套更完整的系统分类方式，整合了“生活形态”、 “价值观”与“时间、金钱等资源”三大概念，分析出八种美国消费者类型，成为非常基本且广为引用的概念。不过，张冠伦（1996）的研究发现，AIO 量表在细分、辨识消费者的生活形态上较 VALS理想；Hawkins（2001）表示VALS测量的价值观及人口统计不适用于特定的产品或情况。

2.如何测量生活形态

图8 / VALS测量方法

比较常见的是筛选出适合的生活形态语句，请被访者逐一进行重要程度 / 符合程度评价，以此进行测量。常用于AIO、VALS等研究方法中。

VSA 研究方法中，有三种衡量方法，一是要求被访者指出认为最重要的一种价值观（图9），二是对九种价值观进行排序，也可以使用九级量表逐一测量重要程度（图9）。一般而言，对生活形态语句进行逐一打分的方法最为常见，主要是此种方法相比排序和单选 /多选，可以做更多的后续分析。数据收集可以建立一套简单的网上系统，能够采用灵活的交互方式，后续也能快速高效地整理数据。

图9 / VSA中的三种衡量方法

体验研究碳酸志2010

3.如何用生活形态进行分群大家或许见过心理测量方面的网站，通过一些题目的选择，网站会立即反馈给你测量结果，这个就是基于以往统计的结果呈现。不论结果是否完全正确，至少会有一种互动的感觉。生活形态的测量也可以采用此种方法进行，经过长期收集，通过数据的不断迭代建模，就能够在新用户填答完之后，提供一份符合用户情况的生活形态简报（图10）。

图10 / 线上生活形态简报示例

生活形态分析的过程如下（图11）：第一步，建立符合研究对象条件的样本集合，对数据进行清洗；第二步，分析样本的基本信息，包括人口统计特征、生活习惯等；第三步，判断生活形态量表的鉴别力、信度和效度等，依据各统计量的数据表现，对量表语句进行取舍，最终萃取出适用的生活形态因子；第四步，利用生活形态因子对有效样本进行聚类分析，并进行判别分析验证分群的效果；第五步，对比不同群体在重要指标上的差异，形成对比分析。

图11

举一个例子，淘宝网2009 年第三季度的买家研究中，加入了15 个生活形态语句，基本涵盖了AIO的内容，因此，本文以此为基础尝试对淘宝买家进行分群研究。对生活形态量表进行多次分析尝试后，筛选出12 个语句。经项目分析可知，这些语句的得分在高低分组均存在差异，与量表总分都显著相关，Cronbach’s Alpha 信度达到 0 . 932，建构效度中KMO 值为 41

碳酸志2010 体验研究

0 . 939，Bartlett 球形检验的值为24513 . 93（df= 66）达到显著，非常适宜进行因子分析。最终萃取出4个公因子，依次为保守理财/消费/社交、意见领袖、追求名牌 /流行、购物倾向实惠 /尝新等，累积方差贡献率为 77.9%（详见下表），解释效果较强。

Rotated Component Matrixa 公因子生活形态语句

共同度

保守理财/ 消费/社交

意见领袖

追求名牌 / 购物倾向实流行

惠/尝新

钱是省出来的，不学会省钱就不会富裕

0.778

.828

我不喜欢负债消费

0.727

.722

我只喜欢结识和自己有共同语言或爱好的朋友

0.698

.710

身边的人购物时经常征求我的意见

0.839

.805

我比身边的人更关注产品或服务信息

0.846

.778

我乐于和他人分享购物经验

0.809

.640

我愿意多花钱购买名牌产品

0.804

.844

购买商品时，还是有广告的品牌比较可靠

0.755

.767

我喜欢追求流行、时髦与新奇的东西

0.716

.622

我喜欢尝试新的品牌

0.760

.705

我更在意自己喜欢的品质好的商品，是不是品牌无所谓

0.832

.697

即使价格便宜，好东西的品质也会不错

0.789

.616

特征值

2.555

2.383

2.269

2.146

方差贡献率

21.288

19.854

18.907

17.887

累积贡献率

21.288

41.142

60.049

77.936

Extraction Method:Principal Component Analysis. Rotation Method:Varimaxwith Kaiser Normalization. a.Rotation convergedin 8 ite rations.

利用4个公因子得分对 3087个有效样本进行谱系（Hierarchical）聚类分析，分别得到3 - 5 群的分群结果，再将有效样本按照7：3的比例分成分析样本和验证样本，对分群结果进行判别分析，综合比较后，判定 4 群较为合适，此时 3个判别函数均有统计意义，典型相关系数均在0 .7左右，判别效力较好，使用组内协方差阵计算时，分析样本和验证样本的正确率分别为82.7%、85 . 2%，交叉核实法的正确率为82.6%；使用各组的协方差阵计算时，分析样本和验证样本的正确率分别为83 .1%、85 .1%，达到较高水平。通过比较因子得分均值差异，可以给各族群命名，并结合基本人口特征（数据表格略）、在淘宝的网购行为详细描述其特征： Cluster by Ward Method Factors Mean

实惠派达人 N=909

名牌达人 N=1104

普通跟随者 N=581

保守理财/消费/社交

.126

.109

. 820

-1.100

意见领袖

.600

. 387

-. 860

-.944

追求名牌 /流行

-.670

.793

.132

-. 571

购物倾向实惠 /尝新

. 524

-. 351

.681

-.729

方差分析得知，不同群体在各因子上的得分存在显著差异；并经Scheffe两两检验颜色越深越倾向该因子

实惠派谨慎跟随者 N=493

体验研究碳酸志2010

最终得到的分群结果细化如下（图12）：实惠派达人：他们具有意见领袖的特质，广泛关注产品和服务信息，非常愿意与他人分享，并经常指导他人购物；他们愿意尝试新品牌，喜欢物美价廉的品质好的商品。与总体相比，实惠派达人女性更多，30岁以上的比重更大，已婚者更多，大专学历更多；他们每周浏览 1次淘宝的频率明显高于总体，更倾向有购物需求才会来淘宝，大多数情况下会购买商品。

名牌达人：他们非常愿意多花钱购买名牌产品，信任广告品牌，喜欢追求流行、时髦与新奇的东西；具有意见领袖的特质，比较关注产品和服务信息，愿意与他人分享，并乐于指导他人购物。与总体相比，名牌达人高学历更多，高收入（个人和家庭）的比重更大，31-35岁的比重更大；他们每周浏览4 -5次淘宝的频率明显高于总体，更倾向平时没事就喜欢逛淘宝，大多数情况下会购买商品。

实惠派谨慎跟随者：他们的理财观念、消费观念和交友观念都偏保守；很愿意尝试新品牌，更喜欢物美价廉品质好的商品；平时不关注产品和服务信息，不善分享购物经验。与总体相比，实惠派谨慎跟随者女性更多，低年龄的比重更大，单身更多，低收入（个人和家庭）的比重更大；他们浏览淘宝每月1次以下的比例明显高于总体，更倾向有购物需求才会来淘宝，大多数情况下不会购买商品。

普通跟随者：他们的理财/消费/ 交友观念不保守；平时不关注产品和服务信息，不善分享购物经验；不论是对新品牌、物美价廉的品质好的商品，还是对名牌产品、广告品牌和流行的东西都不刻意追求。与总体相比，普通跟随者男性更多，25岁以下的比重更大，低学历的比例更大；他们每天都逛淘宝的比例明显高于总体，更倾向平时没事就喜欢逛淘宝，大多数情况下不会购买商品。

图12

碳酸志2010 体验研究

4.如何应用生活形态直接使用主要的生活形态语句参与分析生活形态分群的过程中，能够判断出哪些语句对于区分群体起到关键作用。后续分析时，可以单独拿出此句与其他变量（星级、成交笔数等）做交叉分析，能够比较简单地了解常规划分群体的生活形态状况。当然也可以使用萃取出的公因子与其他变量做交叉分析，会得到更加综合的结果。如CNNIC的《中国互联网络发展状况统计报告》中就是用了此种形式： 2小时以下社会隔离

信任与安全

2-5小时

5-10小时

10-20小时

20-40小时

40小时及以上

互联网时代，我感觉更孤单

17. 3%

19.6%

19.0%

20. 2%

21. 5%

20. 8%

互联网减少了我与家人相处的时间

27. 3%

24. 3%

27.9%

29. 3%

35 .1%

33 .9%

我在互联网上填写注册信息是真实的

41.0%

43 .9%

47.0%

48 .6%

52.6%

55 .0%

在网上进行交易是安全的

22. 2%

23 .1%

26 . 8%

29.0%

33 . 8%

36 .1%

不同上网时长网民对生活形态语句的认同度

社会隔离

信任与安全

3个及以下

4-6个

7-9个

10-12个

12个以上

互联网时代，我感觉更孤单

24. 3%

19. 2%

19.0%

19.1%

22.4%

互联网减少了我与家人相处的时间

30.4%

27. 5%

28 . 2%

30. 3%

35 . 5%

我在互联网上填写注册信息是真实的

40. 5%

42. 2%

48 . 2%

56 .9%

59. 2%

在网上进行交易是安全的

16 .9%

21. 2%

25 .0%

42. 3%

55 . 5%

不同应用数量网民对生活形态语句的认同度

建立人物角色生活形态做好分群后，可以对每一群人做细化描述，结合设计师关心的指标，能够勾勒出不同人群的特征。用此种方法建立的人物角色，能够弥补定性研究资料的主观判断缺陷，更加全面地鲜活地展现不同人物，给设计师更具价值的参考。上文中的例子，如果能更多地结合设计方面的内容，就能算做一个比较有用的人物角色了。

寻找更合适的可用性测试目标用户经过长期收集用户的生活形态，能够建立一套稳定的生活形态分群体系，能够判断出不同群体的用户使用各类产品的差异。如此，在筛选可用性测试的目标用户时，可事先规定出哪种生活形态群体更适合做可用性测试，通过包含生活形态题目的甄别问卷请用户填答。用户认真完成后，根据以往生活形态数据建立的模型，立刻判断出该用户属于哪一类用户，是否符合测试目的，一定程度上避免了测试用户不符合深层需求的情况发生。注 / 渡劫（范欣珩）淘宝UED资深用户体验研究员 dujie@taobao.com

体验研究碳酸志2010

碳酸饮料会第40期

用户体验量化方法研究文 / 剑虹（尹志博）

这几年，用户体验一词铺天盖地的出现在网络上、书本中。而在众多的用户体验相关描述中，认知度较高的包括：（1）用户体验是用户在使用产品的过程中所感受到的、所获得的全部内容的总和；（2）用户体验是衡量产品质量的一个重要标准，是一种与交互相关的集合。与此同时，无论是用户体验的相关工作人员，还是众多企业的高管，都意识到好的用户体验不仅能够满足用户的需求，同时能够提高企业的经济效益。而此时，用户体验的相关工作人员所面临的问题是如何评测产品给用户带来的体验呢？这就需要我们通过一定的方法对用户体验进行量化。在诺曼、Robert等学者所作研究的基础上，我们在用户体验量化方法上进行了大胆的尝试。在用户体验量化方法的研究过程中，我们首先通过分析用户体验的流程来建立用户体验的层次；其次，以该层次为基础来寻找每个层次的组成要素以及要素间的相互关系，并依照层次的划分提出用户体验量化的方法；再者通过案例详细阐述用户体验量化方法的运用。在这里，我将分三次向大家展示整个方法的研究，今天要和大家分享的是用户体验层次模型的建立。

用户体验层次模型的构建

为了研究用户体验量化方法，我们首先需要明确用户体验是如何产生的。这就需要我们建立一个囊括全部要素在内并能表明各要素间相互关系的用户体验层次结构。诺曼认为用户体验是一种与交互相关的集合，这为用户体验层次结构的构建提供了依据。于是我们结合诺曼的理论从用户体验的流程出发对用户体验进行模糊的层次划分，之所以称之为模糊的层次是因为对于不同的操作者以及不同的产品，甚至是不同的任务来说，各个层次中各要素的划分不尽相同，这一点会在其他的研究中涉猎，但在《用户体验量化方法研究》的系列中将不再详细陈述。用户体验模糊层次模型如（图1）所示。 45

碳酸志2010 体验研究

图1 / 用户体验模糊层次模型

本图（图1）展示了用户体验的产生流程，元素处于整个用户体验模糊层次的最底层，包括产品层面要素和行为层面要素。以手机为例，产品层面的要素包括手机所发出的声音、光，手机所呈现的图片、视频等；而行为层面的要素包括按、长按、单击、双击等。行为交互层是指使用户与产品进行交互的单元，不难发现，用户与产品间的交互都可以通过图1中所示的最小单元来形成；若干个行为交互形成了用户的体验行为；用户的若干个体验行为形成了用户体验。将图1的内容按照发生的先后顺序进行重新构建，我们可以得到用户体验的逻辑层次，并称它们为目标层、行为层、体验层，如（图2）所示。这三个层次与诺曼所提出的本能层、行为层、反思层的理论相吻合。

图2 / 用户体验层次模型

体验研究碳酸志2010

在目标层上，需要用户对自己的目标进行识别，得到为完成实践目标所需要的信息与操作方式从而进入行为层；在行为层中，用户完成若干个行为交互，最后进入体验层；在体验层中用户会产生不同的主观感受，这需要通过问卷方法对用户的主观感受进行度量。三个层次间相互关联、互相影响，是用户体验形成的必然组成要素。用户在体验层形成最终的主观感受，而目标层、行为层即是用户主观感受的原因，又是用户主观感受的客观记录，通过对目标层、行为层的分析，可以获取用户相应的主观感受。这一点在后面所提出的用户体验方法中有明显的体现。

用户体验的量化方法（1）以任务为中心的量化方法

以任务为中心的量化方法是从目标层出发，通过对客观事物的评测来量化用户在使用产品过程中的体验。这个过程将是对每个任务进行定量分析的过程。在用户体验层次模型中的目标是针对用户的需求而言的，在此之所以将从目标层出发的量化方法称为以任务为中心的量化方法，是因为任务是用户为完成目标所作出的行为的客观表象。在实际的操作中，用户往往是在有了一定目标之后，为了完成这个目标而首先为自己制定若干个阶段性的任务（阶段性的目标），每个阶段性任务的完成伴随着某个阶段性目标的实现。因此目标和任务之间存在这样的关系：目标=任务={ 阶段性任务}。目标和任务间存在这样的关系，这一点对于实现从目标层出发的用户体验量化提供了很大的帮助。如何从客观角度出发来评测任务？这就需要我们来了解下任务是如何完成的。对于有产品介入的人任务，任务的完成与产品的功能息息相关。为什么这么说呢？因为产品的功能决定了我们可以用它来完成什么样的任务、如何来完成。而产品的功能是客观的存在，我们可以对功能进行分析与量化，因此从目标层出发的以任务为中心的量化方法，是通过对产品功能进行定量分析来实现的。在这里我们以手机为例，来阐述下以任务为中心的用户体验量化。对于手机而言，它的功能包括打电话、短信、拍照、字典、照相机、闹钟、计算器、日历、备忘录、游戏、音乐播放器等等，同样，我们可以利用手机的这些功能来完成打电话、发短信、拍照等任务。这些功能在用户中受欢迎的程度不同，各功能的操作难易程度不同，甚至各功能为用户提供信息的效率也不同、准确性等对产品你的各功能进行评测，从而来评测各功能对用户体验的影响情况。而任务评测如（表1）所示。任务描述

与手机相关的任务（功能）

评测描述

常用（common use）：经常进行的任务

打电话、短信、闹钟、日历等

功能使用的频率

非常用（uc）：特定情况下进行的任务

字典、计算器、备忘录等

个性常用（pc）：特定人群经常进行的任务

拍照、游戏、音乐播放器等

功能操作的难易程度功能给予用户信息的效率功能提供信息的准确性等

表1 / 任务评测

任务（T）可以分为常用任务Tc、非常用任务Tuc以及个性常用任务Tpc。我们将Task（i）的score记为S （Ti），则有STi=STci+STuci+STpci。若将用户体验的量化记为UX，则有：

UX=

（1）

碳酸志2010 体验研究

实践表明，Tc、Tuc、Tpc三者的比重不同，我们用WTi来表示Task（i）在{task}中的权重，则三者所对应的权重为WTc、WTuc、WTpc且有 WTc+WTuc+WTpc=1，则有STi=WTc×STci+WTuc×STuci+WT

pc×STpci，那么UX可表达为： UX=

（2）

在以任务为中心的量化方法使用的过程中，重点是通过评测描述中的各个点来计算各个任务在体验过程中的影响权重（这因产品而异），我们将在后续的研究进行深入的探讨，本系列文章将不再详细阐述。

（2）以行为为中心的量化方法以行为为中心的量化方法是从行为层出发，通过研究客观因素来量化用户体验。在以行为为中心的量化方法中，我们需要分析行为过程中存在哪些变量，这些变量间存在什么样的关系，以最终获得可以衡量目标完成情况的具体数值。为了更清晰地解释以行为为中心的量化，我们首先将行为交互的过程具体地表达为：信息的输入、动作（用户的操作行为）、信息的输出这个循环过程，如（图3）所示。

图3 / 行为交互示意图

行为（Ti）要素

行为（Ti）要素分析

步骤

有多少个步骤？（Pti）

时间

花了多少时间？（Tti）

行为结果

信息接收的情况？

表2 / 行为的构成分析

对（图3）进行文字表述如（表2）所示。其中步骤与时间是过程，与（图3）中的Act 直接关联；行为结果是指信息的接收情况，通过借助以体验为中心的量化方法得到的确切数值，Ti表示图1中的行为i，定义行为

i所带来的体验程度为Sti，那么Sti与Pti、Tti之间存在： Sti=

f(Pti,Tti)

然而，以行为为中心的量化方法不能独立存在，是要借助以体验为中心的量化方法才能运用的，用户（3）体验量化方法研究（三）中将通过具体的案例对此方法的运用进行具体说明。

（3）以体验为中心的量化方法以体验为中心的量化是通过对体验过程中的满意度、情绪反映以及审美反应的综合计算所得到的，即体验的程度。（注：此处参考了雷田的论文《基于信息构建的用户体验设计研究》）该方法是从用户的主观因素出发对用户体验进行量化，需要通过问卷的方式辅助完成。将满意度记为C，情绪反应记为F，审美反应记为A，体验程度记为E，有：E=C+F+A。对应以用户行为为中心的量化方法，Sti与E等价。

体验研究碳酸志2010

案例研究前面的文章中介绍了三种用户体验量化方法。通过这篇文章，我们将通过案例来一起研究以行为为中心的量化方法的使用。案例需要借助以体验为中心的量化方法来得到以行为为中心的量化表达式，并将其与以体验为中心的量化结果进行比较。具体情况如下：首先，通过认知实验来获得行为交互过程中的时间与步骤。我们选择了小范围样本取样的方法，有24 人参与了该实验，年龄分布在22～27岁之间。任务是通过两款外观相似、键盘布局相似以及档次相同的手机分别完成照片拍摄并将照片以彩信形式发送的任务。在拍照的过程中，操作者在统一的平台下完成，以尽量减少环境因素以及其他外界因素对操作过程的影响。并通过录像的方式记录操作者的操作步骤以及操作时间。其次，在每次任务完成后操作者及时回答满意度、情绪反应、审美反应问卷，从而及时记录整个过程中操作者的主观体验感受。最后，在数据的处理过程中，时间和步骤是通过对录像的分析得到的；主观体验程度是通过对满意度、情绪反应以及审美反应综合计算的结果。如（表1）所示：满意度C 情绪F 审美A 体验程度E

87 266 161 18.81

96 265 159 16.65

78 250 170 20

81 244 160 22.75

79 194 188 19.7

96 266 195 21.61

60 173 188 17.41

80 182 179 22.05

96 269 171 20.92

103 272 164 22.45

89 266 132 20.12

89 259 146 20.35

满意度C 情绪F 审美A 体验程度E

92 242 107 20.71

65 196 147 16.43

92 267 127 20.21

95 246 177 21.41

74 214 168 18.42

71 218 159 18.03

82 268 164 20.04

79 228 175 20.51

79 229 156 18.91

77 229 173 19.32

78 265 187 21.07

85 284 178 21.94

表4 / 体验程度计算

表2是在行为过程中所获取的P、T数据。步骤（次）P 290 396 时间（秒）T 520 594 体验程度E 18.81 16.65

437 790 20

255 428 22.75

427 625 19.7

261 373 21.61

204 361 17.41

128 203 22.05

129 210 196 211 296 310 20.92 22.45 20.12

211 374 20.35

步骤（次）P 303 269 时间（秒）T 483 482 体验程度E 20.71 16.43

231 293 20.21

255 394 21.41

258 497 18.42

224 366 18.03

274 578 20.04

181 322 20.51

304 226 236 536 331 385 18.91 19.32 21.07

223 338 21.94

表2 / 以行为为中心量化方法的实验数据

最后，需要构建体验程度与步骤、时间的函数关系Sti=f(P,T)=E。通过对实验整体数据的分析初步构建了如下的模型：

Sti=log0.63(P/T)[165(P/T)2-109P/T+25 .4] 将实验中后 9 组P、T数据带到拟合公式中进行计算得到结果为Sti，与以体验为中心的量化方法中所得（1）到的数据E进行对比，如表6所示：体验程度Sti 体验程度E

21.10 21.41

17.62 18.42

20.36 18.03

16.32 20.04

18.96 20.51

19.11 18.91

21.54 19.32

20.38 21.07

21.29 21.94

表6 / 以行为为中心量化方法的实验数据

对比分析Sti与E，它们间的平均差值为1 .72，Sti与E间形成的差值比为8 . 6 %。而结合用户在操作过程注 / 此案例为量化方法研究初期所完成的，存在一定的不足，后期研究已经有所改进，有机会再与大家进行分享。研究思路方面还希望能够给大家一些参考。

中的表现，我们发现Sti数据趋势更加贴切的描述了操作者的体验趋势。由此可见，从主观角度出发的以体验为中心的量化结果与从客观出发的以行为为中心的量化结果间还是存在一定的差异。而只有结合三种量化方法，充分考虑到主客观因素所带来的量化上的差异，这样的用户体验的量化才是比较准确的。注 / 剑虹（尹志博）淘宝UED用户体验研究员 jianhong@taobao@.com

碳酸志2010 专家约稿

动因支撑理论对于UED研究的理论指导和行动借鉴文 / 张苹赵宇翔

用户体验设计（UED）强调通过工具、设备、产品、系统或者服务的交互式设计带给用户正面的体验感和满足感[1]。这种理念植根于人类工效学、可用性工程以及人机交互等领域，并在此基础上有所发展，从更为整体客观的角度将用户与设计目标、设计方法和设计所涉及的技术紧密结合，同时借鉴大量行为学研究范式的理论和方法进行深入探讨。然而，目前不少设计者和公司对于这一概念还存在着一些认识上的误区。知名UED设计师 Whitney Hess曾撰文讨论该主题，并罗列出10 条常见的认识误区 [2] 。本文将有选择地引申并阐述其中的四条，分别是：

Misconception 1: UED is user interface design 用户界面设计（UID）经常被当作UED的代名词，某种程度上说UID的确是UED中非常重要的一部分

[2]。然而UED的研究对象和研究范畴要广得多，除了前端的交互式界面设计以外，还需要考虑中端和后端的流程结构、框架规范、以及机制体系等问题。因此，UED的思维模式是基于全局观的。

Misconception 2: UED is a step in the process 一些设计者将UED 视作其研发设计过程中的一个阶段或者步骤[2]。比如在原型产品（prototype）设计结束后邀请用户进行体验式试用，抑或是邀请一些用户在设计之初进行头脑风暴，UED 往往被当作一个程序化或模块化的功能键。然而，真正的UED思想不仅仅是交互设计中的一个步骤，而是动态地贯穿于整个研发过程的始终，需要不断地了解用户，倾听他们的需求，对他们的行为做出反馈，从而持续地改进、完善产品和服务。

专家约稿碳酸志2010

Misconception 3: UED is just about usability Nilsen的可用性工程（Usability Engineering）的概念要比UED的提出早10多年 [3] ，因此当UED初入江湖之时，不少人觉得它和可用性并没有多大的区别。然而，UED不是单纯的可用性研究[2]。可用性研究的重点是效率和有效性，而UED在此基础上还关注其他一些重要指标，如用户的可学习性、情感、喜好、可获得性、可信度、感知有用性等，这些因素更多从用户的心理和认知角度进行讨论。因此，UED具有多维度的研究视角。

Misconception 4: UED is about technology 在技术崇拜的年代，UED难免会被打上技术的烙印。然而，真正的UED只是将技术作为其手段和工具，最终的目的是帮助用户提升其体验感和满足感[2]。因此，UED并不一定要通过界面去实现，甚至可能和计算机都无关，它广泛地存在于交互的每一个角落，如影随形，它可以整合其一切需要利用的资源，草木皆兵。在UED的王国里，用户才是王道。综上所述，UED 是一个具有全局观的、动态的、多维度的且基于用户的设计范式。这个领域近几年无论在学界还是业界都受到了高度的重视。业界素来崇尚“从实践中来，到实践中去的”箴言，诸如Nielsen 和Mack 提出的可用性设计的10 条相关原则[4]，Shneiderman和Plaisant 提出的用户界面设计的8条黄金定律[ 5 ]。这些启发式的（Heuristic）经验已经在业界广为流传并付诸实践。然而，启发式经验更像是一种通过干中学（learn by doing）而获得的智慧的结晶，它并不能够完全替代理论研究对于回答设计学中 “是什么？为什么？以及可能怎么做？”等问题。从学界的角度出发，学者们尝试着构建、推演以及融合各种理论，并试图检验其有效性、理论边界和局限性，从而为业界的实践活动提供相关的指导和借鉴。总的来说，目前UED的理论研究和行业实践比起来还远远不够，尤其是可以指导各类系统的UED的理论探讨。就本文作者之一张苹来说，较早期的理论研究包括90年代末开始的The Two-Factor Model of Satisfier-

Dissatisfier for Website Design and Evaluation[6 ,7, 8]和 The Kano Model for Website Design and Evaluation[9,10]；较近期的研究包括以人机交互为中心的大型信息系统的设计开发方法学以及相关的原则和指南等[11]。本文简介张苹在这方面的最新研究成果，即于2007及 2008 年发表的动因支撑理论（Motivational

Affordances Theory, MAT）[12,13]，并举例阐述该理论对于UED的可能的积极影响和参考价值。

动因及支撑[12,13] 设计学的理论可以从不同的视角切入，如信息处理的视角、动因的视角、经济的视角、政策的视角等

[14 ]。其中，动因视角与UED的联系最为紧密。现代动因研究尝试回答两类问题：（1）哪些因素会导致用户行为？（2）为什么用户行为的强度有所差异？相关的动因理论源自不同的学科领域、不同的情境和不同的视点。总体而言，动因可以分为两大类：内在动因和外在动因。后者主要通过将环境变量转换为各种对用户行为产生直接或间接影响的激励因素，从而提升用户在使用过程中的功能感和满足感，这不是本文所讨论的范畴。本文主要集中在内在动因的研究上，强调人的需求（needs）、认知（cognitions）和感情（emotions）三大要素。其中，需求又包括生理需求、心理需求和社会需求。认知主要指与精神和心智相关的因素，与人的思维方式紧密联系，包括信仰、期望和自我概念。感情主要指人们对于生活中某一具体事物所产生的情感，是某一具体事物在的价值关系在人的头脑中的主观反映。根据UED 全局的、动态的、多 51

碳酸志2010 专家约稿

维度的以及基于用户的四个主要特征，我们将内在动因的来源主要锁定在心理的、社会的、认知的以及感情的层面上。美国心理学家James Gibson 提出 Affordance 一词用来描述事物被认识或使用的属性，最初旨在推翻笛卡尔的自我内在认知处理外在感官的理论框架，提倡以客观事物的诱发为中心的思维模式 [15 ]。

Norman将这一概念引入到设计学中，希望设计者创造的Artifact（人工制品）与用户的心理需求被尽可能地等同映射起来，即设计者应该摆脱主观臆断的心智模式，对人们的生活方式及其细节进行深入了解，从而设计出支撑和满足各种动因需求的产品、系统和服务[16]。因此，动因支撑理论基于内在动因的四个主要来源，整合相关的理论依据，提出UED 相关的设计原则（Design Principles）。值得注意的是，设计原则和设计指南（Design Guidelines）是有区别的，前者针对UED的高层次目标，属宏观性框架，普适性强而对具体情境的依赖性较小；后者主要指为实现UED的设计原则所必须遵循的具有较强专指性的设计规范，对具体情境的依赖性较强[11]。本文中动因支撑理论的主要目的并非展示一个完整的设计原则总集，而是尝试对UED的理论和行动给出一个合理的、可行的且富有成效的指导和借鉴，具体如表1所示。表1 动因支撑理论的整体框架[12,13] 动因来源

设计原则

心理层面：自主（autonomy）与自我（self）

原则1：支持用户自主，在概念层面以及实际操作层面赋予用户更多的主动权；

认知层面：实力（competence）与成就感（achievement）

原则 3 ：提供因人而异的挑战，即对不同层次的用户提出相应难度的目标；

原则2：促进用户实现自我认同，满足用户认识以及表现自我的需要；

原则 4：提供及时的、积极的反馈，这些反馈可以帮助用户了解自己实现目标的进度，从而获得成就感；

社会、心理层面：关联程度（relatedness）

原则5：支持用户与用户之间互动，满足用户的群体归属需求；

社会、心理层面：领导力（leadership）与追随力（followership）

原则7：满足用户希望影响他人的需求，即用户有时希望成为领袖；

感情层面：感情（emotion）和情感（affect）

原则9：通过Artifacts的外观设计特征引出用户的正面感情/情感意向；

原则6：展现用户社交纽带；

原则 8：满足用户希望被他人影响的需求，即用户有时希望成为追随者；

原则10：通过 Artifacts的交互设计特征引出用户的感情/情感意向；

主要理论依据 Self-determination theory (Deci et al, 1985)[17 ]

Flow theor y (Csikszentmihalyi, 1975 ; Csikszentmihalyi, 19 9 0 ) [18 ,19]; Goal theories (Elliot et al, 1997 )[20] Social capital theory (Nahapiet & G h o s h a l , 1 9 9 8) [ 2 1] ; S o c i a l interaction theor y (Baumeister et al, 1995)[22]; Common bond theor y (Prentice, Miller & Lightdale, 1994 )[ 23 ]; Weak ties theory (Granovetter, M. 1973)[24] Affect control theory (Heise, 1985) [25 ]; Social identity theory (Tajfel, 1979 ; Ely, 19 9 4 )[ 26 , 27 ]; Social proof theory (Cialdini, 1998)[ 28 ]; Social loafing theory (Karau et al, 1993)[29] Affect and emotion studies (Russell 20 03 ; Sun et al, 20 0 6 ) [30 , 31]

UED设计原则推理[12,13]及实例自主与自我自主性和自我性是人在日常决策和实际行为模式中的一种由内而外的心理需求。很多时候人们希望可以自己决定做什么、怎么做、什么时候停止，抑或是重新做选择等。因此从UED的角度，如果能够给用户提供具有弹性空间和灵活性的功能或模式，用户的体验感和满足感会得到极大的提升。这种心理变化可能体 52

专家约稿碳酸志2010

现在交互设计的各个层面，如增强了用户的自我效能、提高了感知的可控性、增加了用户参与的机会、提升了用户的绩效和成就感、促进用户自我学习的能力和创新性，以及契合了用户的偏好和使用习惯等。同时，设计师也必须考虑到自主与自我需求的多样性和层次性，即不同级别的用户（这种级别应该根据具体设计环境和产品特征而定）有不同的心理和行为需求。鉴于此，MAT 提出两条设计原则：原则1：支持用户自主，在概念层面以及实际操作层面赋予用户更多的主动权；原则2：促进用户实现自我认同，满足用户认识以及表现自我的需要。实例：目前已有不少UED 遵循了这两条原则，其中最为典型的支持方式是个性化。个性化既可以体现在让用户自己决定自己的使用背景和环境，如QQ空间、开心网、人人网等社会化网络（SNS）里面的自定义聊天场景、自定义头像、空间装扮等；网络游戏里面的自定义角色初始属性、装备、派别以及参与的剧情等；又可以让用户自己决定他想要的内容、功能和技术，如新浪、搜狐等新闻门户网站的自定义版面（财经、文化、娱乐、政治等），SNS工具栏的自定义设置、各种开放应用程序的自定义添加以及不同系统之间的交互接口设置（如提供一键转帖、一键推荐等功能）。然而值得注意的是，在提供各种个性化支持功能以帮助用户实现自主和自我展示的同时，也必须关注这些附加功能可能给用户造成的信息焦虑、视觉疲劳和认知负荷等问题。因此，UED要满足用户随时中断、退出方便、改变自如等需求。

实力与成就感实力是一种心理需求，而成就感是一种后天习得的社会需求，两者之间存在着紧密的联系。从用户的角度，两者主要体现在认知层面，即在某个具体的环境中用户为了完成某些具体的任务或目标而必须通过相应的实力去应对相关的挑战，并能收到完成情况的反馈以获得成就感。Csikszentmihalyi的心流理论（flow

theory）重点研究能力、兴趣、挑战、体验和完成情况几个构念[18,19]。他认为人在完成某个目标的过程中，会有许多相应的挑战被设定，这些挑战的难度不一、层次各异。在完成挑战的过程中，需要及时得到各种反馈，尤其是正向的反馈，能够产生较强的激励作用。在UED中，当任务的难度、感知的成效、积极的反馈与用户的动因达到完美结合的时候，用户的体验感会空前高涨，产生强烈的心流感。因此，UED设计师应该考虑在交互设计中：（1）清楚地展示任务或活动的目标；（2）提供及时的反馈并告知用户完成任务的进度；（3）提供不同难度的目标以及完成目标的多种可能的途径和未知的结果。鉴于此，MAT提出两条设计原则：原则3：提供因人而异的挑战，即对不同层次的用户提出相应难度的目标；原则4：提供及时的、积极的反馈，这些反馈可以帮助用户了解自己实现目标的进度，从而获得成就感。实例：针对一些社会化媒体、社会化网站以及网络游戏的UED 设计，这两条设计原则非常重要。如一些网络对战游戏会根据用户的战绩和表现自动调整游戏的难度和剧情，即“适当难度引擎”；用户在申请淘宝达人的时候，可以在申请条件旁边随时查看“我个人的成长记录”，这种可视化的方式提供了及时且积极的反馈。一些网络学习系统，如会盘的教学系统，会一步步指导用户如何完成任务，且难度依次增加，同时每一步的成功都会奖励用户更多的网络共享空间。前一阵子风靡网络的“开心农场”等小游戏也充分体现了心流理论的魅力，即通过不同的任务获得不同的积分，并实时显示用户的等级和任务进度，同时将其他相关用户的进度也清晰展示。然而值得注意的是，尽管这种“目标—— 挑战——反馈”的模式能够增强用户体验，但这种体验感和心流感的持续性还需要UED 设计者密切关注，这也在某种程度上验证了UED的动态性，即设计者必须迭代式地了解用户的需求以做出相应的改进、调整和反馈。

关联程度关联程度是一种社会和心理层面的需求。从本质上说，任何人都需要和他人建立各种关系，并从关 53

碳酸志2010 专家约稿

联纽带中找到归属感。从社会心理学的角度来说，关联程度预示着社会资本（关系、人脉）、社会交互能力、主观规范、强关系与弱关系等各种因素。进入Web 2 . 0 时代后，计算机辅助通讯交流（Computer-

Mediated Communication, CMC）的发展前景更是如火如荼，博客、社会化网络、在线社区、微博、视频共享网站等都是这一时代的产物。近两年盛行的社会化商务在很大程度上就是将各类社会化媒体融入电子商务的理念、模式、机制以及流程中，UED 设计师如果能够在这一过程中从设计的角度促进人与人之间的交流、沟通与互动，并以一种清晰、显性、可视的方式展现这种社交纽带关系，则可以极大地提高用户的体验感和满足感。鉴于此，MAT 提出两条设计原则：原则5：支持用户与用户之间的互动，满足用户的群体归属需求；原则6：展现用户社交纽带；实例：目前在不少UED交互设计中已经贯穿了这两条原则，并获得了较好的用户反响。比如在一些群体协作游戏界面中嵌入了即时通讯接口，便于玩家进行实时交流；在一些电子商务网站中嵌入或者连结相关的社会化网站，前者如淘宝开发的淘江湖SNS，后者如Amazon.com与Facebook的账户对接；在一些社会化网站中为用户提供了多渠道的消息传递机制，如短消息、评论、评级、推荐等各种形式；在个性化推荐机制中，用户间的互动也得到了充分体现，如卓越会在用户购买某商品的同时，告诉他有多少比例的用户也会同时购买另一个商品；淘江湖的淘分享中，用户可以通过社会化搜索（Social Searching），根据他人分享的心得体会进行购买前的决策支持等。在展现用户社交纽带方面，已有不少可视化工具充分发挥了作用。如touchgraph的

friend cloud图形化人脉、FOAF project的社交地图、人立方、相册圈圈、Google的日历行程等。

领导力与追随力影响力是指人对于改变世界和社会的一种主观需求。这种需求通常由两种因素决定：某人天生的影响力追求和社会环境[32]。影响力主要体现在优势度、声誉、地位、身份等方面，对于影响力有较高追求的人希望自己能够成为某个社群或者更大范围内的领袖，从而通过自身的影响力去引导、感染或者控制他人。同时，人们也会对自己关注、感兴趣、欣赏、崇拜的人进行追随。这种领导力和追随力并非是相互排斥的，很多时候在某一个情境中具有领导力的人也会去追随另一个情境中的风云人物。因此，UED 设计师如果能够把握影响力、和追随力这两个要素，并将其很好地融入到交互设计中，即满足某些用户希望通过使用产品或服务而对其他用户产生扩散的影响效应，以及某些用户希望通过关注和追随等方式满足其猎奇感、学习感或归属感等，便会极大地提升用户黏性、体验感和持续使用的动力。一些社会心理学的理论，诸如

Affect control theory[25]、Social identity theory[26, 27 ]、Social proof theory[28]等也都很好地支持了这两个要素。鉴于此，MAT 提出两条设计原则：原则7：满足用户希望影响他人的需求，即用户有时希望成为领袖；原则8：满足用户希望被他人影响的需求，即用户有时希望成为追随者；实例：这两条原则对于交互式网站设计、社会化网络的开发以及社会化媒体的运营起着非常重要的作用。微博是一个非常典型的案例，大量的用户通过其实现了自己影响他人的领导愿望，也有大量的用户在追随他人的过程中收获良多，自得其乐；淘宝达人类似于一种社群领袖，通过淘分享、淘心得、叽歪等用户生成内容（UGC）去影响其他的用户，而跟随购则是用户赞同其他“内群体”成员的一种情感和行为上的表示，在有限理性的假设下，这种领导力和追随力很多时候会催生用户的感性购买，即所谓的羊群效应；淘江湖中的淘帮派功能充分体现出SNS中物以类聚，人以群分的特征，可以让好友、兴趣相似的用户以及领导者和追随者形成小团体，便于进行聚划算（团购）、跟随购等在线交易活动。因此，设计师可以通过UED去促进用户成为领袖和追随者的机会，为前者提供更多的指导和帮助，同时也为后者提供更多的便利和实惠。

专家约稿碳酸志2010

感情和情感感情是人各种的感觉、思想和行为的一种综合的心理和生理状态，是对外界刺激所产生的心理反应以及附带的生理反应，是人脑对于某一具体事物所产生的情感以及该事物的价值关系在人的头脑中的主观反映[30]。情感是指人在认识客观事物的过程中所引发的对客观事物的某种态度的体验或感受，是人对客观事物所产生的心理与态度上的反映[31]。这两者都与人的内在动因紧密联系，很多时候会直接或间接地影响人的思维和行为方式。理论研究证实人的感情和情感受到两个同步系统的激发与管理，即本能的生物学系统和现代的认知系统，这两个系统之间互相影响并左右着人的自适应感情/情感机能[30]。Norman从设计心理学的角度，以本能、行为和反思这三个设计的不同维度为基础，阐述了情感在设计中所处的重要地位与作用，深入地分析了如何将情感效果融入产品的设计中，为UED的设计理念和设计范式提供了夯实的基础[33]。同时，UED动态性的特征也体现出时间维度对于交互式设计的重要性，即用户对于产品或服务初始的感情/情感以及持续使用后的感情/情感是设计师所必须关注的两个问题。鉴于此，MAT 提出两条设计原则：原则9：通过 Artifacts的外观设计特征引出用户的正面感情/情感意向；原则10：通过 Artifacts的交互设计特征引出用户的感情/情感意向。实例：这两条设计原则从时间维度的角度强调了UED设计并非是毕其功于一役的。一个好的设计要在用户刚刚接触该产品的时候便能留下深刻的印象，用户一般会在初步使用后产生一些感情 /情感，诸如美感、视觉冲击力、质感、可用性、易用性等，设计师必须让他们的Artifacts给用户留下一个好的第一印象。然而，一个好的开头只是成功的一半，设计师必须细水长流地关注其产品，关注其用户，关注两者之间的互动情况，通过各种交互式设计特征推动用户的持续使用动机，如密切倾听用户的反馈意见并及时修正给用户造成使用不便的Bug，利用关键成功因素法（CSF）诊断流程中存在的问题并有针对性地改进，借鉴最佳实践（Best Practice）的经验和其他相关产品和设计的有效模式，不断设计或者兼容新颖的且能够吸引用户注意力和使用意图的功能模块，从而提高用户的忠诚度和体验感。这也正是“永恒的beta version”所折射出来的魅力。

结语本文通过理清UED 4个认识上的误区，归纳出UED的部分特征，即全局观、动态性、多维度以及基于用户。在此基础上，从理论推演的角度引入动因支撑理论，并简单介绍其来源、分析层次以及整合框架的理论基础。本文旨在从用户需求、认知和感情的角度将动因支撑理论与UED进行概念映射，通过动因支撑理论中的10 条设计原则为UED 提供理论指导和行动借鉴。值得注意的是，针对不同的设计环境、设计目标以及任务特征，这10 条设计原则并不能一味地“照单全收”，而是需要根据具体情况做具体分析和应用

[12,13]。如在某些情境下有些原则可能并不适用，而另外一些原则却有极高的应用价值；在某些情境下可能原则之间存在着执行上的冲突，因此必须“舍车保帅”，结合设计目标优先考虑最主要的设计原则；在某些情境下可能设计原则还需要结合设计环境和任务特征深入思考，从而制定出有的放矢的设计指南和规范。因此，本文提出的动因支撑理论还需要得到更多UED实证研究和实践活动的验证和完善。参考文献： [1] Mcclelland, I. (2005). “User Experience” Design: A new form of design practice takes shape. In Proceedings of CHI 2005 , April 2-7, 2005 , Portland, Oregon, USA, 1096 -1097. [ 2 ]Whitney, H. (2009). 10 Most Common Misconceptions About User Experience Design. http://whitneyhess.com/ blog/2009/01 /10/10 -most-common-misconceptions-about-user-experience-design/ [Retrieval date: 2010 -11- 02] [3] Nielsen, J., and Molich, R. (1990). Heuristic evaluation of user interfaces, In Proc. ACM CHI' 90 Conf. (Seattle, WA, 1- 5

碳酸志2010 专家约稿

April), 249 -256 . [4] Nielsen, J., and Mack, R. L. (Eds.) (1994). Usability Inspection Methods, John Wiley & Sons, New York. [ 5 ] Shneiderman, B and Plaisant, C. (2005 ). Designing the user interface: Strategies for effective human-computer interaction. Addison-Wesley, New York. [ 6 ] Zhang, Ping, Gisela von Dran, Ruth Small, Silvia Barcellos (1999), Web Sites that Satisfy Users: A Theoretic Framework for Web User Interface Design and Evaluation, Proceedings of the International Conference on Systems Science (HICSS 32), Hawaii, January 5 - 8 , 1999 [ 7 ] Zhang, Ping, Gisela von Dran, Ruth Small, Silvia Barcellos ( 2000 ), A Two-Factor Theory for Website Design, Proceedings of the Hawaii International Conference on Systems Science (HICSS 33), Hawaii, January, 2000 [8] Zhang, Ping and Gisela von Dran (2000), Satisfiers and Dissatisfiers: a Two-Factor Model for Website Design and Evaluation, Journal of the American Society for Information Science (JASIS), Vol. 51, Issue 14 , November, 1253 -1268 [9] von Dran, Gisela, Ping Zhang, and Ruth Small (1999), Quality Websites: an application of the Kano model to website design, Proceedings of the 5th Americas Conference in Information Systems (AMCIS' 99), August 13 -15 1999 [10] Zhang, Ping and Gisela von Dran (2001), Expectations and Rankings of Website Quality Features: Results of Two Studies on User Perceptions, Proceedings of the Hawaii International Conference on Systems Science (HICSS 34), Hawaii, January, 2001 [11] Te'eni, D., Carey, J., and Zhang, P. (2007 ). Human-Computer Interaction: Developing Effective Organizational Information Systems. John Wiley & Sons, Inc., New York. [12] Zhang, P. (2008). Motivational affordances: Fundamental reasons for ICT design and use. Communications of the ACM, 21(11). [ 13 ] Zhang, P. ( 20 08 ). Toward a positive design theor y: Principles for designing motivating information and communication technology, in David Cooperrider and Michel Avital (ed.) Designing Information and Organizations with a Positive Lens (Advances in Appreciative Inquiry, Volume 2), Emerald Group Publishing Limited, 45 -74 . [14] Malone, T.W. (1985). Designing organizational interfaces, Conference on Human Factors in Computer Systems (CHI), ACM, 66 -71 . [15 ] Gibson, J.J. (1977 ). The theory of affordances. in Shaw, R.E. and Bransford, J. eds. Perceiving, Acting, and Knowing, Lawrence Erlbaum Associates, Hillsdale, NJ. [16] Norman, D.A. (1999). Affordances, conventions and design. Interactions, 6 (3), 38 - 43 . [17 ] Deci, E.L. and Ryan, R.M. (1985). Intrinsic motivation and self-determination in human behavior. Plenum, New York. [18] Csikszentmihalyi, M. (1975). Beyond boredom and anxiety, Jossey-Bass, San Francisco, CA. [19] Csikszentmihalyi, M. (1990). Flow: the psychology of optimal experience. Harpers Perennial, New York. [20] Elliot, A.J., and Church, M.A. (1997 ). A Hierarchical Model of Approach and Avoidance Achievement Motivation, Journal of Personality & Social Psychology. [21] Nahapiet, J., and Ghoshal, S. (1998). Social capital, intellectual capital, and the organizational advantage. The Academy of Management Review, 23 (2), 242-266 . [ 22 ] Baumeister, R.F., and Lear y, M.R. (1995 ). The need to belong: Desire for interpersonal attachments as a fundamental human motivation, Psychological Bulletin (117 ), 497- 529. [23] Prentice, D. A., Miller, D. T., and Lightdale, J. R. (1994). Asymmetries in attachments to groups and to their members: Distinguishing between common-identity and common-bondgroups. Personality & Social Psychology Bulletin, 20 (5), 484 - 493 . [24] Granovetter, M.(1973). The strength of weak ties. American journal of sociology ( 78), 1360 -1377. [25 ] Heise, D.R. (1985 ). Affect control theory: respecification, estimation, and tests of the formal model. Journal of Mathematical Sociology (1), 191-222 . [26] Tajfel, H. (1979). Differentiation between social groups: Studies in the social psychology of intergroup relations In: Academic Press. [27 ] Ely, R.J. (1994). The effects of organizational demographics and social identity on relationships among professional women. Administrative Science Quarterly, 39 (2), 203 -238 . [28] Cialdini, R.B. (1998). Influence: The Psychology of Persuasion (Revised ed.): Collins. [29] Karau, S. J., and Williams, K. (1993). Social loafing: A meta-analytic review and theoretical integration. Journal of Personality and Social Psychology, 65(4), 681-706 . [30] Russell, J.A. (2003). Core affect and the psychological construction of emotion. Psychological Review (110 :1), 145 172 . [31] Sun, H., and Zhang, P. (2006). The role of affect in IS research: A critical survey and a research model," in: HumanComputer Interaction and Management Information Systems: Foundations, P. Zhang and D. Galletta (eds.), M.E. Sharpe, Armonk, NY. [32] Winter, D.G., and Steward, A.J. (1978). Power motivation, in: Dimensions of personality, H. London and J. Exner (eds.), Wiley, New York, 1978 . [33] Norman, D.A. (2004). Emotional Design: Why We Love (Or Hate) Everyday Things. Basic Books, Cambridge, MA.

注 / 张苹 School of Information Studies, Syracuse University, Syracuse, NY, USA 13244 , pzhang@syr.edu; 赵宇翔南京大学信息管理系，南京，江苏 210093 , yxzhao@smail.nju.edu.cn）

专家约稿碳酸志2010

用户体验研究与设计的四重境界 ——匠、技、艺、道文 / 陶嵘博士

If I had asked people what they wanted, they would have said faster horses. --Henry Ford

入行几年的用户体验从业人员，基本都会有一个疑问：用户体验行业发展的前景是什么？我们大家做的真的是一件有规律的事情吗？这个问题似乎很难用一两句话说清楚。先说一个题外话，我的父亲退休之前是楼外楼的行政总厨。他的拿手绝活儿是杭州名菜西湖醋鱼。我在北京、上海工作多年，在外地工作的人对于家乡菜似乎都有特殊的偏爱。因此，每次在京沪两地进杭州菜馆，我必点西湖醋鱼。但总觉得外埠的饭店做这道菜基本都是完全走样，不得要领。类

Henry Ford 美国汽车工程师与企业家，福特汽车公司的建立者

似的例子，还有在北京街头，小吃店的招牌上满眼都是“杭州小笼包”字号，但你最后能品尝到的往往是用发面做的胖乎乎的“小肉包儿”。一个简单的结论是：杭州菜，特别是一些精细的菜式完全没法像麦当劳、肯德基那些洋快餐那样大量的标准化的制作、贩售。大厨的精妙手艺不是一天练成的，单照着菜谱做菜肯定无法烹制出美味。 57

碳酸志2010 专家约稿

回过头再来看本文开始提出的那个问题，基本大家都感受到了目前“用户体验”这道大餐的制作方法是“百人百味”。我们不妨仔细来看看这道美味到底该如何来烹制。匠——至少在我小的时候，还能够看到在杭州城里穿街过巷的各种工匠 —— 木匠、篾匠、皮匠等等。工匠的最大特点是“具有某一方面熟练技能”。用户体验研究与设计的第一重境界即类似于“匠”的境界。首先要解决的是从无到有的问题：是否设置了特定的岗位，或者是否有人专门负责特定的业务。脱离了对可用性工程持续的投入，对交互方式的创新的关注，对图形用户界面潮流的把握，如此种种，又反过来高呼“用户体验非常重要”，是把我们的工作陷于海市蜃楼。我们的工作需要配备很多基本的技能构成元素，一旦缺失，研究与设计就成了一句空谈。在企业内推广“打折扣”的以用户为中心的设计流程，是为了让用户体验研究与设计工作更加顺利的进行，而不是为忽视流程和制度的行为提供借口。技——这里的技，指的是技巧。古往今来，似乎人们对于“淫奇巧技”，对于追求完美的工艺与流程相当不以为然。但又没有人能够否认，任何的技术或艺术成就都离不开对于技巧孜孜以求的探索。庖丁解牛，丝丝入扣，刀刀见功力。反复的操作，找到最合理、最便捷的方法，这应该是做研究与设计的第二重境界，即完成了从看量到重质的变化。在现场/在线用户研究中，提炼需求挖掘的规律；在对各种现有交互模式的学习 —— 归纳 —— 创新过程中，理解交互设计的本质；在对层出不穷的功能实现中，思考代码的规范与复用。就像做西湖醋鱼，光是对照着大师的菜谱是烹饪不出“色、香、味”俱全的杭州名菜的。反复磨练与体会，手法与技巧才能不断的提升。用户体验研究与设计的技巧就在一次次平淡无奇的做项目过程中在每个人心中发芽成长。艺 —— 用户体验研究与设计的第三重境界，如何彼此配合，成就“大体验”。今天的世

专家约稿碳酸志2010

界是一个分工合作的世界，基本上一个人无法完成所有的工作，对于用户体验亦是如此。在部门发展初期，可能会不分彼此，以一人之力，去承担从用户研究到交互设计到视觉设计，甚至前端开发的工作。但你无法期待团队中每个成员都是全才，如何让平凡人（在相互配合下）做非凡的事才是我们追求的工作模式。每个人都精通各自领域的业务，整个用户体验团队才能不断表演一场又一场的“精彩大戏”。道——大音希声，大象无形。掌握了基本的技能与方法；在项目实践中，不断总结提炼技巧；在分工与协同过程中，将用户体验工作做精做深。那么如果要再深入一层，应该是一个什么样的状态呢？如果有一天我们停止了对于用户体验工作上方方面面的抱怨（资源、理解、配合，等等不一而足），并把精力重新投入到了最基础的业务中去。那么小到团队，大到部门，乃至公司整体用户体验研究与设计工作就取得了阶段性的突破。毫无疑问，理解“匠、技、艺、道”，用心做好“用户体验”这道大餐，我们的用户才会像老饕们那样，只认我们这家百年老店。

注 / 陶嵘浙江大学心理学博士，中国人类工效学学会理事, 阿里巴巴资深用户研究专家，前三星中国设计研究所用户体验总监

碳酸志2010 专家约稿

浅谈社交购物站点的社交体验设计：社交购物站点纵览文 / 陈婧蒋镇辉

一、方兴未艾的社交购物社交购物以其快速发展的势头和可以预见的巨大潜力成为了过去一年中当之无愧的互联网发展趋势。在 2009 年，47％的美国在线零售商计划增加他们在节日期间社交网络方面的宣传投入。而这一领域的代表性站点之一Groupon更是在短短两年的过程中实现年营业额突破 20 亿美金的傲人业绩。社交购物的各种版本的定义均表达出社交购物是社交媒体与电子商务的结合体，即将社交网络的关键要素——朋友、群组、投票、评论、讨论 —— 聚焦到消费活动上，从而实现社交购物。由此人们可以拥有更广泛、更快捷、更频繁的人际互动，进而实现多种多样的社交体验，并最终在购物的同时得到一系列心理需要的满足—— 安全感、爱与归属感、自尊与自我实现，甚至感受到由这些体验所引发的种种情感。可见，社交体验正是社交购物的核心价值。

二、社交购物站点的三种类型根据所创造的社交体验的不同，社交购物可大致分为如下三类：

1.产品信息聚集社交购物站点将在线产品信息的产生方式由少量专业站点进行发布转变为每个人都来贡献自己的所见所知。一方面，以Stylefeeder为代表的平台允许人们通过偏好类型测试、产品偏好打分，记录自己的产 60

专家约稿碳酸志2010

品偏好并更好的找到喜欢的产品；另一方面，以Blippy为代表的平台协助人们充分记录自己的购买清单、表达自己的产品体验。这两种类型的站点都能整合大量的用户参与，显著强化用户对于其他用户的存在的感知，并以此为基础引发不同层次的、广泛的社交互动。

2.产品创意设计这类站点可以让任何人参与到一件商品的设计和决策中来，也就是说，用户参与同产品相关的各种活动的空间被延伸到产品完成之前。每个人都能享受创造或者表达意见的乐趣，并在兴趣相近的用户之间找到自己的归属感。例如，在 Threadless 上，任何用户可以上传他们自己完成的 T 恤设计图案，也可以投票选出他们喜欢的设计；而只有最受欢迎的商品才能被制作成商品进行销售。

碳酸志2010 专家约稿

3.团体联合购买社交购物站点通过构筑人们的在线社交网络，可以很好的实现群体购买行为的快速协调，实现单一个体无法实现的目标，并在此过程中强化个人与集体中其他人间的联系。除了广受关注的以Groupon为代表的团购类站点，近期业界还出现了以Loligift为代表的团体赠礼站点。这类站点为用户提供了多人协作购买礼物的平台，通过多人出资共同挑选礼物的方式，帮助自身预算有限的一群人购买一件比他们个人购买力所及更为理想的礼物。综上所述，现有社会媒体购物类站点主要提供的上述三类社交体验均很好的将社交元素嵌入购物活动之中，实现了用户消费与情感的双重满足。目前淘江湖社区中也已开始出现部分上述板块，包括淘宝达人、聚划算、淘分享、帮我挑等等。如何真正让这些板块发挥其效力，关键在于站点设计与运营的整个过程中充分实现用户在不同种类板块中可以获得的社交体验。这既需要站点在技术层面的支持，也需要用户体验设计师针对目标社交体验，协助设计更为顺畅的界面与使用流程。谨希望本文能在社交体验设计方面提供一定的参考价值。

注 / 陈婧 Ph.D. Candidate, Center for Collaborative Media and Technologies, Department of Information Systems, National University of Singapore, Email: chenjing@nus.edu.sg 蒋镇辉 Associate Professor，Director of Center for Collaborative Media and Technologies, Department of Information Systems National University of Singapore, Email: jiang@comp.nus.edu.sg

创新探索碳酸志2010

碳酸饮料会第30期

信息可视化文 / 老雪（吕雪峰）

图1

仔细看图 1 。发现了几个熟悉的身影？阿童木、擎天柱、

Wall-E……这副图片传达的信息是：脍炙人口的机器人，再来看几副：图2不仅使用图片，还配合大量的箭头和文字，来表达马里奥是如何Power-Up的，看过美剧《LOST 》的童鞋们，还图2

记得这些鲜活主人公们之间的关系么？看看图 3 ，你会更加容 63

碳酸志2010 创新探索

图3

易的知道到底“ Who’s who”了；图 4 是色彩与文化的对照 “表”，可以查阅到不同地域文化里色彩所代表的含义。看过以上的这几副图，我们一起试想一下，如果用纯文字完整传达这些信息，将会是多么庞大的文字量？这本叫做《看图说话》（图5）的杂志不知道有多少童鞋们曾经看过，其实信息可视化在某种意义上就是用图像在说话。信息可视化（Information visualization）是一个跨学科领域，旨在研究大规模非数值型信息资源的视觉呈现，利用图形图像方面的技术与方法，帮助人们理解和分析数据。是由斯图尔特卡德(Stuart K. Card)、约克.麦金利(Jock D.Mackinlay)、

图4

乔治.罗伯逊(George G.Robertson)于1989年提出的。为什么在这个定义中特别强调了“大规模非数值型信息资源”呢？其实，信息可视化这门跨界学科，在21年前是在”夹缝“中产生的，当时，还有两门盛行的学科，分别是“科学可视化”和“可视化分析论”，科学可视化主要专注在具有天然结构的数据处理，例如医学中的MRI数据、气象学中的气流数据等;可视化分析论则专注于挖掘数据图形的背景与原因。在这样的环境下，信息可视化处理的范畴主要是抽象数据结构，例如树状结构或图形。 21年间，互联网的兴起极大促进了信息可视化这门跨界学图5

创新探索碳酸志2010

科的发展，现如今，信息可视化其实已经渗透到生活的各个角落，例如手机中的天气预报（图6）：这个Android天气Widget 展示了温度、湿度、风速等数据信息，也通过面积图展示了数据随时间维度的变化。再例如开放数据Google Public Data实现了数据与时间维度的动态展现：http://www.google.com/publicdata 信息可视化已经与科学可视化和可视化分析论由契合发展为交融。今天的信息可视化（Information visualization）定义可以更改为：信息可视化是一个跨学科领域，旨在研究大规模信息资源的视觉呈现，利用图形图像方面的技术与方法，帮助人们理解和分析数据和信息。

信息可视化的优势： •

增加认知资源如利用某种可视资源来提高工作记忆能力；

•

减少搜索如利用较少的空间表达大量的数据；

•

加强对于各种模式的识别比如，当按照信息自身的时间关系，在空间当中对信息加以组织的时候；

图6

•

易化对于各种关系的知觉推理否则，归纳起来会更加困难；

•

对大量的潜在事件加以知觉监控；

•

提高一种便于操作的，不同于静态图的媒介，从而成就对于参数取值空间的探索。

信息可视化的具体技术和方法： •

分支图（系统发育）

•

色彩字母表 Color alphabet

•

树状图 Dendrogram（分类）

•

信息可视化参考模型 Information visualization reference model

•

图形绘制 Graph drawing

•

晕轮法 Halo (visualization technique)

•

双曲树 HyperbolicTree

•

多维尺度分析 Multidimensional scaling

•

问题求解环境 Problem Solving Environment

•

矩形式树状结构绘图法最后，关于信息可视化的延伸，可以更多的去参考伟大的WIKI百科，国内还有一个

小站叫做图研所。

注 / 老雪（吕雪峰）支付宝无线支付产品体验高级经理 xuefeng.lv@alipay.com

碳酸志2010 创新探索

碳酸饮料会第30期

不一样的交互组件文 / 乐乘（吴春松）

交互设计是一个创造性的工作，利用创新的方式漂亮地解决产品问题，是一个交互设计师价值的体现。当创新的交互设计被用户认可、被业界同行学习，更是一种巨大的职业满足感。这种创新不一定是惊天地泣鬼神的革命性设计，一个小小的交互组件的创新就可以让产品体验增色不少。今天就通过一些案例聊聊交互组件创新的四种常见方式，与大家共勉。

一、滚动条的创新【重构法】我们先来回想一下阅读 PDF 文档的两种滚动方式：1、手型工具拖动 2、滚动条。要翻看后面的信息，用手型工具向上拖动，用滚动条则是向下拖动（图 1），两种操作方式的原理是什么呢？把文档分成可视区域 A和整体区域B。滚动条滑块对应的是文档的可视区域A。因此滚动条拖动的是可 66

图1

创新探索碳酸志2010

图2

图3

视区域A，而手型工具拖动的是整体区域B，两种操作方式拖动的主体不一样，所以方向恰好相反（图2）。滚动条可以理解为文档在垂直方向上的缩略图，滑块可以表示可视区域当前位置，可视区域占整体区域的比例。随着文档整体区域不断增高，可视区域所占的比例越小，因此滑块高度不断变小。统计过IE、FF、Office等常用软件，一般滑块高度到8px时就不再缩小。当滑块高度只剩8px时，滚动条的拖动体验就相当的差（图3）。

Google wave对滚动条做了大胆的创新(图4)： 1.

上下按钮与滑块连在一起（好处：从滑块到上下按钮的鼠标运动距离变短；问题：点击上下按钮，滑块无法跟随运动）

滚动条的滑块高度固定不变（好处：解决了滑块极小的问题；问题：无法表示可视区域的比例）

图4

这两处修改优化了传统滚动条的问题，却引发滚动条基本属性（“位置”与“比例”）问题。为解决引发的新问题，google wave的滚动条引入了两个新元素： 1.

半透明灰色块（点击上下按钮，滑块无法跟随运动，则半透明灰色块运动—解决位置问题）

终止条（wave内容不断增多，终止条位置不断向下，用来表示内容整体高度—解决比例问题。可惜这个终止条视觉效果让人以为是可拖动的，容易引起疑惑。）

Google Wave花了这么大心思创新滚动条，也面临着滚动条复杂化后引发的用户习惯问题。个人认为这个滚动条创新是因产品需要而做的，wave一个页面可能同时存在4个滚动条，当4个传统滚动条同时出现在一个页面上效果可想而知。Wave滚动条无论视觉还是交互上都是很“轻”的设计，与产品整体上还算贴切。苹果对滚动条的改进则简单有效：加锚点。 67

碳酸志2010 创新探索

图5

mac官网（图5）：加锚点横向滚动条，点击锚点，滑块滚动到相应位置；iphone音乐专辑列表（图6）：加锚点的滚动条，轻触字母，列表滚动到相应位置。加锚点的方式让滚动条增加了导航和准确定位功能，变得更加易用。

二、组合搜索框的创新“组合法” 常见的带条件搜索框是“输入框+下拉菜单+按钮”三个控件组成

图6

的，合适的控件组合可以带来更好的效果。

“输入框+下拉菜单”组合新浪微博的搜索框（图 8），将下拉选项融合到输入框提示里，选择搜索范围的操作更加便利。

Google reader 这样的带输入操作的下拉菜单（图9），让

图7

下拉菜单更加易用。（这种控件组合在word、photoshop等软件里很常见，如字体选择控件）。

“按钮+下拉菜单”组合豆瓣与 Flickr 的搜索按钮后面加了一个下拉箭头（下页图 10），按钮与下拉选择操作合二为一（flickr 这个设计与它网站主导航条体验一致，豆瓣用这种设计在其整站看来则略显突兀）。

三、文件上传组件的创新“瘦身法”

图8

标准的文件上传组件是由“输入框（伪）+浏览按钮+提交按钮”组成。之说以称之为“伪输入框”是因为它主要承担显示文件路径的作用，于是Firefox下点击这个输入框是开始文件选择操作，chrome更是把伪输入框改造成了按钮，还原控件最原始的作用（图11）。使用标准文件上传组件经常会出现两个提交按钮，以图12 为例，最经常的误操作就是：选完文件后，直接点击“保存头像设置”，于是杯具了。

Gmail附件上传的设计对文件上传组件做了两次瘦身手术。 68

图9 / Google reader 下拉菜单和Photoshop的字体下拉选择器

创新探索碳酸志2010

图10

过去的gmail附件上传步骤见图13： 1.

点击“添加附件”（点击后出现一个不带提交按钮的上传组件），

选择文件（选完后自动开始上传）。去掉了那个提交按钮。

图11

现在的gmail附件上传步骤见图14：点击“添加附件”（点击后自动开始上传，且有上传进度条）。去掉了输入框和提交按钮，只剩下一个浏览按钮，上传只需要一次点击操作。

四、翻页的创新【替代法】图12

传统的翻页方式是“上一页 + 页码 +下一页”，大家最熟悉的设计（图15）。而近年兴起的这种“无尽滚动翻页”的翻页方式，即滚动条拖动到最底部后开始加载后面的内容，而不再有“上一页+页码 +下一页”这样的链接（下页图16）。

图13

相对而言twitter、Iphone app store这样的“递进式翻页”则没那么激进，保留了一个翻页按钮，是介于传统翻页与无尽滚动翻页的一种折中方式。（图17）

图15

图14

碳酸志2010 创新探索

图18是Google book search一个巧妙的翻页设计，鼠标悬停在文档底部一个局部区域（高度约 50 px）时，出现一个半透明的层，点击这个层开始翻页。这个巨大的辅助翻页按钮，大大提升了翻页的便利性，且对界面影响很小。这里讲到的翻页组件创新，是用新的翻页方式替代传统翻页组件。从信息的结构来看，传统翻页是将信息分段，而 “无尽滚动翻页”属于信息滚动。这两种方式对应现实生活中的原型是：书籍和电影胶片（图19），书籍把信息拆分到每页里去翻动，电影胶片的信息则一帧帧的滚动而过。从信息流动速度和翻页便利性来看，“信息滚动”远远大于“信息分段”。这两种翻页方式应该如何选择？我想这应该取决于用户对后面内容的需求强度，像google搜索结果页这种越往后信息质量越低的场景，用户对翻页需求并不那么强烈。Google reader 这样不是按信息质量排序的场景，提供高速的翻页方式是个相对必要的做法。需要注意的是，滚动翻页不利于内容准确定位和信息回溯。

图17 / 做Twitter翻页右Iphone app store翻页

图18

图16 / Bing图片搜索翻页和 Google reader 翻页

创新探索碳酸志2010

信息流动速度对信息接受者心态有很大影响，流动速度越快信息吸收量相对越小，所以阅读pdf文档比阅读纸质书籍心情急躁，忍不住去翻页，是在“扫描”而不是“阅读”。由此也延伸出一点，交互设计师的工作职责除了架构信息，还应该控制信息的流动速度和供给量。最后，以一张图片（图20）总结交互组件创新的四种方式，一家之言希望对大家有所启发。

图19 / 信息分段（左）信息滚动（右）

图20

乐乘（吴春松）资深交互设计师 yuecheng@taobao.com

碳酸志2010 创新探索

碳酸饮料会第32期

如何架构和管理个人的知识体系文 / 坏人（杨朔）

每一天24个小时，我们都在不断的接触信息，每天我们都在沉淀着工作经验，这些沉淀下来的东西，就是我们个人的知识。就像一个仓库，每天来来往往，进进出出，时间长了就会有很多的工作量来进行管理，我们可以看到传统企业的仓库管理甚至是一门专门的课程和众多的学科相关。我们的知识也一样，需要经常梳理，因此需要有一套属于我们自己的管理知识的系统和方法。为什么我会关注这个领域，在09年年底时，总是感觉时间过的很快，总是感叹一天天转眼就没了，经历了一些项目和事情，无论是时间还是收获，都呈碎片状。什么都会，什么都不会，什么都了解，什么都不深入；工作过程中做的时候太多，少了思考，少了总结，少了去问为什么，去总结怎么样；串联不同层面的碎片的需求也越发的强烈；有沉淀就有输出，知识的输出成了一个有困难的事情。基于上面的情况，知识的管理，我个人这个仓库的打理就显得迫在眉睫。接下来的我从个人的情况出发，讲需要什么样的知识结构，回到知识本身，最后考虑怎么整理。梳理出了三个纬度： 1.

如何建立自我的知识架构。（总结了3 种方式）

如何分解知识，区分对待。（区分资讯，信息，知识的差异和对待的态度）

如何进行知识的管理，信息的分类和整理。思考这些问题前，追踪溯源。我的知识架构是什么？我想要什么样的知识？我是谁？我要成为什么样

的人？庖丁需要的是杀牛，解牛的知识技能，要掌握牛的骨架和肌肉分布的知识。王婆需要的是卖瓜的知识，吆喝的水平，西瓜的知识，贩卖的学问。思考自己需要的是什么知识？接触的是什么知识？想要了解和吸收哪方面的知识？是知识管理的第一步和大家分享一下我常用的分解知识的三种方法：核心法、树形结构法、目标分解法。 72

创新探索碳酸志2010

分解知识的三种方法：核心法：想象一个熟透的桃子，果皮新鲜，分量十足的那种。知识就像这个桃子，由鲜美的果皮，可口的果肉，和最内部的核构成。什么是核心？学过生物的同学都知道，果核是果子发育成长的最核心的部分。这个果核就像我们的知识里面的最核心的部分。对王婆来说就是怎么种瓜，怎么卖瓜。对庖丁来说就是心中的那头牛，怎么去杀牛和剔除牛骨分出牛肉。是我们的核心价值核心竞争力的知识储备。什么是肉？桃子最好吃的部分。就是我们围绕核心价值的增值服务部分。就像在工作中一样，一个知识上的天才却是一个现实和工作中的傻子，是没有价值的。假如你的核心价值是个优秀的设计师，那设计能力，绘图能力，就是你的“核”。在个人发展工作发展中的，沟通能力，表达能力，理解能力，书写能力就是你的“果肉”。果肉一定是围绕核心竞争力的果核的拓展。什么是知识架构的果皮呢？我们买水果一定挑选那色彩鲜美的，果皮水嫩嫩的。对，这就是果皮的价值。用一个词来形容就是“锦上添花”。构成我们知识体系的果皮一定是能给我们锦上添花的东西。譬如：兴趣，爱好，所带来的知识部分。一个有着优秀专业技能的人，在专业周边的沟通等方面也有不错的表现，最后又在某个兴趣爱好方面有优秀的表现。那么这个人，这个人的知识结构一定是完善的。核心法，一定是在清楚自己的核心竞争力和周边知识需求的前提下进行的，所以，想清楚很重要。

树形结构法：树形结构法相对核心法就更好理解。我们知道树枝的结构都是父子关系一级一级在延伸。对待我们的知识，一样如此。举例说明：首先我们是一个互联网人，那我的知识体系的树干主要就是“互联网”（树干），我关注和从业三个方向，电子商务，交友，移动互联网（三个大的树干），然后再这样一层一层，一级一级的分解下去，最后在末梢有很多末端需求，你的知识需要按这个结构进行补给，梳理，分类，打理。

目标分解法：目标分解法相对前面两者来说有种倒叙的感觉。假如有个老太太叫王婆，她不是卖瓜的，她是种地的。后来她立志要做一个最牛的卖西瓜的。于是，她花了3年的时间去找瓜农斌哥去学习怎么去种植西瓜，花了3年时间去找市场上最好的卖肉的辉哥去学习怎么卖商品，又花了3年的时间去找市场上最了解顾客的鸦叔去学习怎么和别人打交道，怎么了解客户心态。9 年下来，王婆从一个种地的成功的转型成为了一个优秀的卖西瓜的。目标分解法就是根据目的和需求倒推需要哪些知识，针对这些知识进行管理，进行调整和学习。最后，怎么加强自身知识架构。如：从厚度和密度入手等。经常也遇见一些朋友说不知道怎么下手，反复的思考这个问题后。我想起了中学学的物理。知识就像一个物品的质量，质量取决于密度和体积。若我们期望有个比较重的质量，能做的有两种方式，加大物体的体积，或者加大物体的密度。对于知识可以从阅读，写作，记忆等量的积累（密度）开始，最后会转化为质。知识来源于信息，把握了信息的本质才能更好的转化为我们的知识。究竟什么是信息? 信息如何分

碳酸志2010 创新探索

类？分类的差异性在哪里？最后和大家分享一下怎么来应用：

什么是信息？我们每天其实都活在信息的海洋里面，im上的消息，公交车上喇叭里面的内容，收音机电视台传出来的资讯内容，我们看到的文章，新闻等，包括这篇文章都是信息。信息的分类；我把大的信息分为三类：资讯，信息，知识。

资讯什么是资讯？例如：传闻xxx网站和xxx合资建立 xxx公司，x月x日上线。相对我们业界同学来说经常会遇到这样的信息。我把其定义为资讯，所谓的资讯在新闻，事件，公关，时效性很强的信息较多。对我们的价值：了解事情的发生时间，业界的发展和行业的动态知道大致的概念。

信息这里的信息是指相对狭义的信息。譬如“深圳电子商务网站逼退阿里巴巴”这个信息，具有一定的时效性，内容，行业方向和数字分析。这样的信息对我们而言，它的价值在于：一些数字和分析，一些方向性的东西的前瞻性，我们可以通过积累这样的信息的来了解我们的周边和行业。

知识知识具有行业的跨越性和实用性。譬如这篇：比例和比率有什么区别？知识的特点是：细节的，碎片的，深刻短小有道理的可以跨越应用的。三者的差异性在什么地方？我们如何来对待？资讯对我们了解行业增加视野有着积极的作用。如：报纸；信息是我们来判读实物和观点的切口，是我们做出一些推测的参照物。如：参考消息；知识是我们可以跨领域和跨工作可以应用的材料。如：石油。有限的时间，有限的精力，这么多的内容和信息。合理的分配和有效的对待是有挑战的。我对待三者的态度是：了解资讯，收集信息，学用知识。（学用：先学然后换个环境去应用让知识发挥价值是更重要的。）

坏人（杨朔）原淘宝ued交互设计师 yangsu2004 gz@gmail.com

交互设计指南碳酸志2010

交互设计指南

《交互设计实用指南》其实是收集和总结了交互设计上的一些问题，肯定有很多老生常谈的东西，是不是老生常谈其实不是问题， “问题在于，这些老生常谈的东西有没有被积累，有没有被传承，有没有被体系化。”（青云语）《交互设计实用指南》的读者群涵盖了许多行业，而且就算是交互设计专业的读者也存在经验和水平的差异，所以读者们对《交互设计实用指南》有很多不同的声音。我们期待你们的声音，你们的认可是对我们的支持，你们的批评是对我们的鞭策，有了你们我们才能把事情做得更好，为行业做出更大的贡献。本书未涉及的交互设计指南的其它部分将在2011年淘宝UED的另外一本书中补充，敬请期待。

碳酸志2010 交互设计指南

交互设计指南系列之

我们眼中的交互设计文 / 宗羲（包季真）

交互设计 (Interaction Design, 缩写IxD或者 IaD), 是定义、设计人造系统的行为的设计领域。人造物，即人工制成物品，例如，软件、移动设备、人造环境、服务、可佩带装置以及系统的组织结构。交互设计在于定义人造物的行为方式 (the“interaction”,即人工制品在特定场景下的反应方式) 相关的界面

(Wikipedia)。通过对界面和行为进行交互设计，从而可以让使用者使用人造物来完成目标，这就是交互设计的目的。从用户角度来说，交互设计是一种如何让产品易用，有效而让人愉悦的技术，它致力于了解目标用户和他们的期望，了解用户在同产品交互时彼此的行为，了解“人”本身的心理和行为特点，同时，还包括了解各种有效的交互方式，并对它们进行增强和扩充。交互设计还涉及到多个学科，以及和多领域多背景人员的沟通。在《交互设计实用指南》里，我们认为，交互设计，应当是创造承接人类与计算机之间的界面即人机界面(Human-Computer Interface)(见下图)。交互设计的出发点在于研究用户和计算机交流(dialog)的时候，人的心智模型和行为模型，并在此研究基础上，设计界面信息及其交互方式，用人机界面将用户的行为翻译给计算机，将计算机的行为翻译给用户，来满足人对软件使用的需求。所以，交互设计一方面，是面向用户的，这时交互设计所追求的既是可用性(Usability)，这也是交互设计的目的所在；交互设计的另一个方面是面向计算机实现的，这时我们关注于“软件工程化”。（见上页图）

面向用户根据上文中，我们提到的满足人对软件的需求，其目标既是我们所说的“可用性”。可用性指的是一个产品可以被特定的用户在特定的使用情况中，有效、高效并且满意得达成特定目标的程度(ISO9241)。我们

交互设计指南碳酸志2010

认为，其中所诉的有效、高效和满意即为可用性的三个递进的层次：有效性：有效性是指用户完成特定任务和达到特定目标时所具有的正确和完整度。如果用户不能完成他们的目的，那么无论体验是长时段，容易还是复杂，这个产品可能都没有意义。 90 年代的时候，某品牌机厂商推出的台式机都预安装了一个“我的家”的软件。该软件是个系统功能的导航软件，它将你电脑的例如Office、音乐、电影、浏览器、计算器等这样的工具安排在一个充满隐喻的图形化的屋子。例如你要听音乐，那么你必须走到卧室，然后点击那把吉他，如果要使用 Word，你可能需要点击你书桌上的文档。这样当时在厂商看来十分吸引消费者的东西——它认为这样能够解决新手使用电脑的问题—— 却被市场所否定。许多消费者根本找不到相应的功能放在哪儿。于是，当连功能都完不成的时候，软件就缺失了有效性，即使这个充满隐喻的图形化的屋子做得再逼真，软件价格再低也不会有消费者觉得可用，软件也失去了价值。高效性：高效性是指用户在完成特定任务和达到特定目标的容易程度和时间长短。这可能会牵涉到许多因素。例如，我们的软件启动速度太慢，处理速度太慢，这会影响到软件的高效。再比如，在一个呼叫中心使用一个更高效的呼叫中心系统，操作员每天就能够处理更多的电话数。对于网站来说，一个良好的信息架构对于高效性的提升是十分有效的。良好的信息架构能够让用户在更短的时间，也更容易地找到他们想要的信息。

Flickr 和Picasa都是著名的照片管理网站。Flickr 注重的更多是社区化的应用，用户群体相对摄影技术较好。而Picasa 注重的更多是个人的相册，用户群体相对摄影技术也较差。他们的首页也迥然不同。

Flickr 和 Picasa的个人首页

Flickr 的登录后的首页大部分是社区性的信息，例如最近的活动，你的联系人最近发表了什么照片，还有你参加的小组等等。另外复杂而有条不紊的导航也允许中高级用户造访更多的Flickr 的功能。相比之下，

Picasa首页基本只是所有的相册的列表。这样的迥异之下，Flickr对于他的用户群是高效的，Picasa 对于他的用户群也同样高效。不同的用户在他们的页面之下都容易找到他们自己需要的内容。另外，减少用户的认知负担也是提高软件高效性的有力措施。能不能让用户少些机械的操作？能不能让用户尽少思考？能不能让用户别记着那么多的东西？

碳酸志2010 交互设计指南

满意度：满意度是指用户在使用软件产品过程中所感受到的主观满意度和接受程度。在用户能够有效、高效地使用软件的基础上，给予用户一些更多地“体验”，考虑那些更多内涵。这也是我们交互设计真正的水平所在。例如：我们需要避免用户出错，也同时能够提高方法让他们从错误中恢复；我们需要让软件易学，以便让新手快速成长为中间用户，让需要的中间用户成为专家；我们需要做精美的页面让用户喜欢；我们需要塑造我们的品牌风格，让用户“膜拜”…… 交互设计就是设计软件上可提供的交互方式，来满足人对使用软件的三个递进层次的需求。也就是说，首先，应当保证软件的有效性，如非有效，一切皆空。接着，保证软件的高效性，软件虽然已经完成了他的目标，那么是不是可以在这个基础之上，缩短完成目标的时间长度或者是降低认知成本等，最终达到提高生产力的目的。在完成了这两点之后，我们可以继续考虑提高软件的满意度，这里可以通过一些视觉的提升、品牌效应和创造新的体验(苹果一直是这方面的好例子)等方法来提高软件的满意度。

面向实现交互设计立足于软件工程中的一个环节，所以谈到交互设计，特别是在软件工程中的交互设计，就必须涉及面向实现的部分—— 也就是我们谈论的“工程化”。 “工程化”问题，涉及到三个方面：标准化：这是指在进行与交互设计的相关工作，我们需要满足相关的标准和规范。标准化有助于提高产品的兼容性、互操作性、可重复性、安全和质量。举个例子，例如我们在制作原型的时候，有可能需要参考

UED团队的栅格标准或是垂直栅格。这样，对于视觉设计师，他们可以减轻像素对齐的负担，对于前端工程师，套用相应的代码即可完成标准栅格的摆放。当然，还有很多标准和规范，例如：有些公司拥有交互方面的Guide-line，可以保持整个产品形象的一致性，降低用户认知负担。可行性：这是指在设计交互的过程中，应考虑到技术上是否可行。可行包括两个层面：第一个是技术可以完成，更高的一个层次则是需要考虑在现有的资源(时间、人力、技术能力等 )的情况下时候可以完成。我们可以设计一个拖载的动作，但是，如果这玩意儿告诉你要在山寨非触屏手机的浏览器内实现，那么这显然是不可行的交互；如果告诉你这玩意儿在浏览器中将多加载100 kb数据量，平均延长加载时间7s，那么这也很可能不是可行的。交互式设计师需要参与方案的实现，以确保方案实现是严格忠于原来的设计的；同时，也要准备进行必要的方案修改，以确保技术的可行，当然，修改不该伤害原有设计的完整概念。创新性：其实，具体的说，交互设计就是关于创建新的用户体验的问题，其目的是增强和扩充人们工作、通信及交互方式(《交互设计—超越人机交互》)。虽然说到创新，各位可能很容易想到炫目的交互，大量的动画等等，但是，别忘了“技术驱动创新”：创新应当尽量在上面所述的标准化和可行性的框架内进行。面向实现的这三点互相制约，相辅相成，也同时约束了我们的交互设计工作需要在一定范围内实现。为用户而设计，考虑实现，一起做一个精明的交互设计师吧！

达到可用性我们刚才谈到了交互设计面向用户既是为了追求可用性。并且，可用性具有三个递进的层次，他们是：有效性、高效性和满意度。那么如何达到可用性目标，也就是说如何达到这三个递进层次呢？《交互设计实用指南》系列文章，正是我们对这个问题的解答。

宗羲（包季真）原淘宝UED资深交互设计师

交互设计指南碳酸志2010

交互设计指南系列之

操作入口明确文 / 尚轩（孔晶晶）

“操作入口明确”，就是指产品的任何一个功能都要有明确、合理的入口。 “操作入口”，指的是产品内部不同模块之间的转接元素，例如在 Web产品中，按钮控件、输入框、文字链等都属于操作入口； “明确” 指的是入口的视觉感是清晰的、可识别的； “合理”是指入口的出现是符合用户操作逻辑的，适时的。之所以要提出“操作入口明确”，是因为用户在使用产品的过程中，往往遵循的是可分析的行为逻辑。对于产品本身而言，必须有相对应的操作提示来引导用户最有效地获取信息，还原为实现层面就是明确、合理的操作入口。如果说首页是整个网站的门户，那么操作入口就是连接各个子页面的枢纽。设计师的终极目的，就是通过对这些枢纽的优化让用户利用最有效的方式在最短时间内完成自己的预期任务。对于基于 WEB的电子商务而言，核心价值是信息资源，而能否将这些海量数据合理地推送给用户，则是产品生存的关键。操作入口的设计，甚至可以看做“通过对引导方式的优化间接达到对信息资源的归类”— 这很像图书馆中的书类标签管理，用户可以根据不同的类目标签找到自己想看的书。失败的操作入口所带来的后果往往是灾难性的，功能失效、位置隐蔽、信息干扰……都会给用户带来严重的挫败感，使其绝望地湮没在茫茫的信息海洋中。所以，明确合理的操作入口设计，是对产品“有效性”的保障，更是对用户体验的尊重。那么，在具体的设计中如何做到“操作入口明确”呢？

1、强化重点，弱化周边星爷《唐伯虎点秋香》中的精彩片段，一声“美女”换来诸多牛鬼蛇神的壮观回眸和秋香MM的惊鸿一

碳酸志2010 交互设计指南

瞥 ——“美女这东西是要需要比较地”。WEB产品也一样，尤其是海量信息的电子商务网站，由信息架构衍生出的各类功能入口相当复杂，部署在页面的各个角落，一不留心就被疏漏。通常有两种方法来解决这类问题：一是增加入口数量，即“广撒网”，同样的功能入口有多个，以此增加功能模块的使用率，不过这种方法存在较大隐患，后面会详细分析；二是“强化重点，弱化周边”，即在视觉上将入口模块凸显出来，采用精妙的布局，并适当弱化周边的信息展示，加大二者的权重对比，客观上增加用户识别的准确性。例如地球人最熟悉的Google首页：浓郁艺术气息的 LOGO 作为唯一的色彩元素有效地抓住了浏览者的视觉中心，输入栏和

Button作为功能核心占据了页面的心脏位置，这种组合让用户通过第一视觉便能够准确理解页面所表达的信息逻辑—“输入关键词”+“点击按钮”=“Everything you want”。再看一个反例，如图：面对这样一个下载页面，面对这样一个抢眼的大Button（标记②），相信即使是电信用户，也会很大方地支持下网通……但是，点击之后弹出的却是下载遨游浏览器的窗口，崩溃之余再仔细查看，终于发现在华丽的广告位旁边蜷缩着一个毫无特色的“立刻下载”（标记①）—刹那间，无数用户被这种饱含“让贤”哲理的设计深深震撼了！

2、入口信息明确易识别上面提到，增加入口数量虽然在一定程度上有助于提高功能模块的使用率，但也存在致命的缺陷—— 入口信息不明确。因为“入口”等同于用户的“选择”，入口越多，选择越多， “过多的选择等于没有选择”，这势必会造成用户使用产品时的疑惑：这几个链接和按钮好像都一样啊，该选哪个呢？所以，要根据页面本身的信息量严格控制同功能入口的数量，保证有效的识别性，让用户迅速找到正确的入口。这次用我们可爱的兄弟产品“支付宝”为例，看看改版前后的细节变化：

改版前

改版后

通过对比，我们可以发现，管理页面中部分相同功能的入口出现了多个，对于新手用户来说，很可能造

交互设计指南碳酸志2010

成不必要的困惑；而在新版本中，每个功能模块只有一个入口，明晰简洁。另外，对于入口元素本身而言，需要通过适合的展现形式来提示用户此入口的功能属性。例如，一个标准的按钮控件，用户会知道“可以点击”，但点击后会发生什么交互行为，需要通过其他视觉元素进行信息提示（如按钮上的文字或者具有标识性的ICON），告诉用户当前的情况和可行的操作方案，这点有些类似生活中的“指示设计”。下图是eBay首页的注册区，通过按钮文字和辅助文本信息，新手用户也能够很清楚地了解眼前这两个

Button代表的意义。

3、根据用户定制合适的入口交互设计离开用户研究便是闭门造车，在设计产品操作入口的同时，要充分考虑到不同用户的需求。用户划分维度很多， “中间用户”和“专家”。《About Face3 . 0》中根据与产品的相关度将其分为“新手”、这三类用户对产品的了解程度并不一致，操作行为习惯也大相径庭，若再通过其他维度将其细分（如“有无目的”、 “性别年龄”等），会相当复杂，在对产品进行进一步优化时，应当考虑到操作入口对不同用户的适用性。 “在交互和界面设计中，如何用同一个界面满足新手用户和专家用户的需求是长久以来存在的难题之一。虽然大多数中间用户倾向于保留在这一类型中，但新手不会永远是新手。要维持高水平的技术程度很困难，因此专家门也在快速变化。新手的变化更快，新手和专家随着时间推移都会倾向于成为中间用户。” （《About Face 3 . 0》第三章），所以针对用户的定性研究和定量分析会显得尤为重要。不过，无论如何划分用户人群，有一点共性是至始至终的——产品操作入口设计的终极目的是让用户迅速有效地完成核心需求。

小结综上所述，对于信息庞杂的电子商务网站而言，出色的操作入口设计好似科幻片中的“星际之门”，能让用户随心所欲地抵达任意空间，享受完美的交互体验；同样，失败的设计也能让用户犹如坠入希腊神话中恐怖的克里特岛迷宫，郁闷不可自拔。 “操作入口明确”，是所有优秀交互产品的共性之一，也是每一个设计师“想用户之所想”的职责所在。

尚轩（孔晶晶）淘宝UED交互设计师 shangxuan@taobao.com

碳酸志2010 交互设计指南

交互设计指南系列之

可及文 / 化龙（杨延龙）

可及，通俗的说是“可以达到”，加上主语和宾语，在“交互设计”这个大的语境下，含义应该是“用户可以达到自己的操作目标”，这不是和“有效性—用户的操作是有效的”重复了吗？其实，在交互设计实用指南中， “可及”是一个狭义的概念，是放在有效性下面的，具体解释为“色盲、肢体残疾等特殊人士可以完成基本操作”。更扩展一下，这个特殊人群应该还包括老人儿童，文盲等对信息使用不擅长的人。也就是说，交互设计实用指南所定义的“可及”就是“信息可及”。具体解释为在产品设计应用过程中，应当考虑到特殊人群的使用状况，让这部分用户享受无障碍设计带来的便捷，在浏览，使用网页时能很顺畅的使用该网页所提供的相关资源。

交互设计主要考虑的几个特殊人群： 1.色盲据统计，这个世界上有大约8 .65%的男性和0.43%的女性，在识别部分或者全部颜色时有困难。我们通常笼统地称这种缺陷为色盲(Color Blindness)。其中，轻度的色觉异常称为色弱。

2.肢体残疾而仅仅在我国，残疾人数就约有8300万，占总人口的6 . 34%，其中肢体残疾者2412万人，占29.07%。肢体残疾人士在精神智力方面和正常人是没有太大分别的，这部分群体由于活动不便，对于以电脑，移动终端为媒介的网络产品有着更为迫切的使用需求。

3.老人，儿童（5～12岁） 82

交互设计指南碳酸志2010

更值得关注的是人口老龄化的趋势在中国越来越严峻，有一个预测的数据显示，到2050 年中国将有 4 . 3亿的老龄人。老年人退休了，时间相对充裕，除了从传统媒体获得信息外，对于网络信息获取的需求也在日益增长。家长们为了开阔子女眼界的需要，也会允许儿童在特定时间上特定的网站来开发智力，学习娱乐。

4.文盲另外从文化程度的差异来看，在中国文盲的数量仍然占人口总数相当大的比例，现在我们的青壮年文盲占5 . 8 %，这部分人群虽然网络基础知识几乎为零，但是一旦接触到网络，他们会有很高的学习欲望和热情，如何帮助他们尽快的使用网络，也是Web交互设计师应该关注的一个问题。

5.其他其他对信息使用不擅长的人

交互设计的方法：对于如此多的特殊用户，无论是出于专业精神还是商业利益，Web产品设计师都应该去关注他们，这也是作为一个设计师社会责任所在。那么，所设计的产品如何能够满足对特殊人群的“可及”呢，这就要求设计师在设计一个产品的时候，时刻要提醒自己不能忘记特殊人群，换位思考，站在特殊人群使用的角度上来设计 Web产品的整体布局，各个元素的具体形态及操作行为。关于这一部分，交互设计实用指南也给出了一些基本的思路，以下是一些可借鉴的设计方法。

1.使用形状+色彩的信息提示这一点对于色盲这类人群尤为重要，和普通用户相比，他们的缺陷是在颜色识别方面，也就是说如果设计师在某个地方仅仅使用了色彩作为信息提示的话，那就有可能带来问题了，下面的例子：右上图是苹果的官方网站

一般用户看到的：

色盲用户看到的：

一般用户看到的：

色盲用户看到的：

曾提供的一个在线工具，帮助用户来查询哪些专卖店明天有货。苹果的设计师用绿色填充的圆圈表示有货，红色的圆圈表示没货，貌似挺清晰的，对于普通人当然没问题。但是对于绿色色盲用户来说，就不容易了。其实，我们只需要优化提示 ICON 就能解决这个问题，修改如右下图：这个例子告诉我们，在使用设计元素时，要尽量使用形状 + 色彩的方式来表现信息，

碳酸志2010 交互设计指南

或者使用文字的提示。这样对于正常用户和对颜色识别有障碍的特殊用户，都不影响他们的识别。有一个小技巧可以使用，在完成设计时，可以把自己的设计图做去色处理，然后一项项的去做交互测试，如此可以有效的避免色彩的识别问题。

2.简化操作方式无论是老人还是文盲对于网络产品的操作都有信心不足的情况，一个简便的操作方式，令他们快速实现目标，对于增长信心非常有帮助。对于肢体残疾人士，他们的困难在于使用交互输入设备，如鼠标和键盘比正常人更不容易，也需要简化操作方式。比如在设计操作时尽可能地采用“选择” 的方式而不是“填写”（避免给手指残疾的用户增加负担）。比如右图这个输入日期的设计：

3.容错和及时帮助这也是交互设计指南中两个非常重要的部分，对于特殊人群来说，这两点显得更加重要。具体的设计方法可以参考后续文章。

4.使用视觉、听觉，触觉等多元化的手法传达必要的资讯在产品设计中，对于重要的操作及信息提示，可以使用语音提示来配合视觉样式来提示用户操作的状态。比如在一些智能手机产品上，点击触摸屏数字键盘时，不但被选中的数字键的底色会发生变化，而且屏幕还有震动的触感提示。

5.使用辅助性的工具以目前的技术，语音识别可以部分解决单纯的输入问题，比如

Windows7的语音指令功能，在操作者说出“打开Word”这句话时，电脑就可以自动启动该软件，也可以为视力不好的老年使用者逐字逐句地朗读电脑上显示的任意文章，但是要靠语音识别完全解决人和电脑间大量的快速的交互行为还要走很长的路。在未来，也许大脑可以直接来操控电脑，这方面已经有了一些研究成果。右图为谷歌手机中文语音搜索的界面：另外可以内置辅助残疾人的工具，Windows7有一个新的功能，叫做OSK，即屏幕键盘（右下图）。不习惯使用键盘的人可以用鼠标来点这个屏幕键盘，肢体不是很方便的使用者，可以把屏幕键盘上的按键放大从而提高准确性；视力不好的老年使用者，可以把按键上的字放大，以便阅读。

交互设计指南碳酸志2010

6.容易浏览及合理的信息架构对于老年人来说，看互联网会觉得眼花，他们感觉所有的字都太小，不容易浏览。所以在设计时要考虑到，能切换到可以适合老年人查看的字体和网页样式。比如百度推出了老年搜索来满足这个需求，字体较大且突出老年人常用的功能,如下图：

小结：以上抛砖引玉提了几点为“信息可及”设计时可以考虑的方法，对于特殊人群的无障碍设计需要更深入的挖掘特殊人群的需求，根据他们的生理和心理状况，有针对性的开展设计工作。随着社会文明的提高，交互设计对特殊人群的关注度也越来越高，可及即无障碍设计的理念也越来越得到绝大多数设计师的提倡。在我国，互联网协会网站于近期正式开通了信息无障碍样板专栏，专栏介绍了国内外无障碍行业标准的内容和链接，其中有一些设计的规范，有兴趣的话，可以下载，对于网站的设计有一定的参考价值。据联合国经济和社会事务部发表的研究报告，目前全球 100 家主要网站中只有3家能够满足残障人士的需要，这方面要走的路还有很长。

化龙（杨延龙）淘宝UED资深交互设计师 hualong@taobao.com

碳酸志2010 交互设计指南

交互设计指南系列之

适时帮助文 / 谷隐（姚愿）

任何一个交互过程的操作，对于用户来说都有学习成本，谁也不能保证所有人都可以准确无误地走完一个流程。交互设计师在设计时应该考虑适时地给用户相应的帮助，这一点非常重要。适时帮助，是指在用户使用流程中，在需要的时候能及时地得到帮助；反之，在不需要帮助的时候,不要出现信息干扰。不及时的帮助会造成用户使用进程中断，或者增加用户达成目标的难度。无效的帮助则可能给用户造成干扰，影响用户完成任务。 “适时帮助”是一个偏正结构，首先是帮助，然后制约条件是适时。我们分开来讲。在理想的交互设计状态下,我们当然希望用户在使用过程中”无师自通”,但受制硬件、使用环境、用户层次等各种原因，有一个”老师”帮助用户是非常必要的。韩愈在《师说》里一开始就讲到：古之学者必有师。师者，所以传道受业解惑也。人非生而知之者，孰能无惑？同理，我们的帮助也是相似的作用，传道授业解惑。 1.

传道：传道主要是理论上的帮助，告诉别人这是什么，主要指一些名词解释，规则说明等等。

授业：授业主要是操作上的帮助，告诉用户怎么作才能完成整个流程。很多当前操作提示，流程示意图等都属于这个范畴。

解惑：解惑主要是在用户迷惑不解的时候提供解决方案，比如对用户操作出错的建议，某分流程结束后的帮助提示等等。

然后主要来说一说“适时”。这就要讨论用户在什么时候需要帮助。一般有以下三种情况：

A.在用户第一次使用某产品功能的时候。当新用户使用一个产品的时候需要帮助，或者老用户在使用一项新功能的时候，由于认知不足，用户 86

交互设计指南碳酸志2010

会觉得陌生，不知所措。此时帮助应该及时出现，但不能一直强制出现，应该让用户有选择的余地。

B.在用户已经出错或者将要出错的时候。当用户在流程中不小心与系统现在规则有了冲突的时候应该及时提醒，不能任其为之，到最后显示一句“对不起，你出错了”，这样可能会造成用户主动中断流程。

C.在用户遇到不明白的问题的时候。用户遇到不明白的名词或者操作时，应该及时给出解释。用户了解信息主体时候，如果有必要的补充说明也应该及时出现。

当出现以上三种情况的时候，我们应该采取适当的方法来为用户提供帮助。 1.帮助信息明显，提示方式灵活。 google文档的新功能帮助信息，第一次访问时，用明显的形式出现，用户点击关闭以后再也不会出现；如果点击以后提醒我，帮助信息会暂时关闭，下次访问还会出现。

2.及时反馈操作，防止用户出错；分析错误原因，给出合理建议。左图针对错误页面的帮助提示，分析用户可能出现的原因，并给出了一些建议。我们再来看看下面这个反面案例。

碳酸志2010 交互设计指南

用户在注册过程中，用户已经存在的情况下，输入是没有提示的；直到所有资料填写好之后提交，才弹出结果页面，说用户名已经被注册，然后让用户重新填写。这个帮助信息来得太晚了，如果在注册用户填写用户名的时候，就检测该用户名是否有效，就不会让用户觉得前功尽弃了。

3.及时补充，信息完整再看 QQ 会员页面，在开通会员的大按钮下有一个“QQ 会员是什么”的帮助信息，这个帮助就是为了让用户首先在理论上对QQ 会员有一个认知。对用户不了解的信息给出了通往答案的道路。总之，帮助在交互设计的有效性里有相当重要的地位，而适时性是帮助的重要关键点。我们可以用两个词组合起来，形容适时帮助的特点，那就是”聊胜于无，过犹不及”。只有及时而不多余的帮助信息才能更好地帮助用户，从而完成一个具有“有效性”的交互设计。

谷隐（姚愿）淘宝UED产品设计师 guyin@taobao.com

交互设计指南碳酸志2010

交互设计指南系列之

简洁清晰，自然易懂文 / 青云（杨光）

我们生活在信息繁杂的社会，尤其是在互联网时代，人们开始通过网络接触越来越多的信息，那么，如何获取 /传递有效而准确的信息将非常重要。在网页交互设计中，我们提出：信息获取和传达的过程必须是简洁清晰，自然易懂。这样用户才能够有效的获取这些信息，并迅速作出决定。

什么是“简洁自然，清晰易懂”？简洁清晰：使信息最简化 “少即是多”。提倡使用最少的元素来表达最多的信息。如果信息繁杂，将使用户承担大量的信息负担，造成信息过载，影响效率，不能帮助用户解决问题。自然易懂：使用用户语言用户获取信息的方式多样，并且对信息的理解程度也各有不同，所以使用用户平时使用和理解的表达方式去传递信息，更容易被用户所接受。

信息表述的种类与设计原则在网页交互设计中，传达给用户以有效信息的方式有多种，其中包括：页面布局，交互文本，界面色彩，图像与图标，声音等。

碳酸志2010 交互设计指南

1.页面布局

界面中的信息布局，会直接影响用户获取信息的效率。所以，一般界面的布局因功能不同考虑的侧重点不同，并且会让用户有一种“区块感”，方便用户对信息的扫描性浏览。界面布局尽量有秩序，排列整齐，防止过紧或过松，有明显的“区块感”。切忌混乱。布局要充分表现其功能性，对于每个区域所代表的功能应有所区别。如：标题区，工作区，提示/帮助区等。页面中最重要的信息所在的模块将是在屏幕中最明显的位置上。并且，应该是最大的。布局中的信息需要有明显的标志和简单介绍，比如标题栏和标题等。信息的位置保证一致性，让用户可以无需重新建立对页面信息分布的理解。

2.交互文本交互文本指产品界面涉及交互操作中需要用户理解并反馈的所有的文字：包括标题、按钮文字、链接文字，对话框提示、各种提示信息、帮助等。这些文字直接影响用户在交互过程中对预期的理解，好的交互文本设计，可以提高用户完成任务的效率。表述的信息尽量口语化，不用或少用专业术语；表述语气柔和、礼貌，避免使用被动语态，否定句等；简洁、清楚的表达，文字较多要适当断句，尽量避免左右滚屏，折行。对于同种操作的交互文本，操作行文字保持统一性。字体使用默认 /标准的字体，大小以用户的视觉清晰分辨为主；

3.界面色彩人眼一共约能区分一千万种颜色，所以用户与界面中颜色的关注度非常的高，有效的使用色彩区分信

交互设计指南碳酸志2010

息的级别，分类等，有助于用户对信息和操作产生关联，有效减少用户的记忆负担。根据不同的产品使用“场景”，选择其合适的颜色。如，管理界面经常使用蓝色。考虑颜色对用户的心理和文化的影响。比如，黄色代表警告，绿色代表成功等。避免界面中同时出现3 种以上的颜色。颜色的对比度明显，如在深色的背景中使用浅色的文字。使用颜色指导用户关注到到最重要的信息。

4.图像图标相对于单纯的文本，图像以及符号化的图标更加符合用户的认识习惯。往往表述一种信息，一张图片或者一个标识能让不同用户更好的理解与接受。适当的使用图片与符号化的图标，会让用户很自然的建立起认知习惯。表意清晰，明确，有高度的概括性与指向性，让用户能够快速的联想到对应的功能和操作。同类或同一纬度的信息，在形式和色彩风格上尽量保持一致性；仅在突出重要信息，用户可能产生理解偏差的情况下使用。避免滥用。尽量与交互文本结合使用。

5.声音在网页的交互设计中，用于声音的信息表述方式相对与视觉来说不是很多。一般应用于提示，提醒，帮助等信息的表述。此类信息表述让用户通过听觉获取反馈，更加的直接与有效。表述清晰，语气亲切，不生硬，有礼貌。使用符合用户认知习惯的声音。如，使用敲门声提示好友来访信息等。使用不让用户反感（如：恐怖，恶心，烦躁）的声音。在用户可预知的情况下发出声音。

小结对于不同的信息表述方式，我们都要求设计师在表达信息的时候做到简洁清晰，自然易懂，尽量让用户觉得这是自然而然，而且又是清晰明了的信息。就像小溪流水一样自然，就像军人命令一样明确。这样才会让用户快速，准确的完成任务。

青云（杨光）淘宝UED高级视觉设计师 qingyun@taobao.com

碳酸志2010 交互设计指南

交互设计指南系列之

突出重点，一目了然文 / 宗羲（包季真）

看到这张照片（图1），我们一眼能够看到天宏 ( 图中这位 UED 俊男)的眼睛。我们能从他的表情里读出一些他的性格。一幅好的摄影作品，最重要的一点，就是这张照片是否有焦点，照片的主题是否一目了然。而摄影作品的用光、构图、景深等等手法，其实就是在让一张照片能够有其焦点，并且利用这些艺术手法来烘托气氛，提升主题。一个优

图1

秀的页面亦如此：应当突出重点，一目了然。相信大家也知道，一个用户在浏览网页的过程中，只是扫描页面，而不会像是在看书似的阅读每一处地方，每一行文字。一个网页呈现在用户面前的时候，应该在5 秒之内，就能理解：这个页面是干什么的？我大致能通过这个页面做些什么？接下来我该去哪里？我们网站上的每个页面都可以是任务流上的一个点。这个点上包含着用户需要的信息，也许是继续找到任务流的下一个点的信息(例如导航)，也许是用户想找到的最终内容。而一个页面上存在着上百甚至上千个链接（淘宝的宝贝详情页面通常有700多个链接），要在这样茫茫大海中找到用户需要的链接，可见， “突出重点，一目了然”是多么重要。

交互设计指南碳酸志2010

测试您的页面测试您的页面是否达到“ 突出重点，一目了然 ”，能够让用户在短时间内找到他们所需要的信息，其实可以是个低成本的小型测试。

fivesecondtest.com这个有趣网站是一个专门做5 秒测试的站点。测试者上传一张站点的截图，然后被试观看截图5 秒，然后说出刚才看到了哪些东西。另外一种方式是被试看到截图，在5 秒的时间中，点击他所关注到的所有焦点，最后给出每个焦点他认为的描述。图3是本文开篇的时候8个用户的测试结果：这种测试比起眼动仪来说，测试的成本要低得多，而且能够明确得测试出你的页面的浏览者是否能在第一时图2 / 淘宝首页测试结果

间发现他们所需要的内容，并且可以比较出，这是否符合你设计的初衷。

达到“突出重点，一目了然” 那么，如何达到这样的“突出重点，一目了然”呢？据鄙人不完全归纳，可以有以下方法：

为扫描而设计，不是阅读你几乎需要把每个用户都想象成大忙人—— 他们没有时间停留在你精心设计的页面上，去阅读每一行你辛苦撰写的问题，去欣赏你精心设计的高光与圆角—— 他们想要的只是尽快地找到有用的信息。如果找不到，互联网图3 / 照片测试结果

上也许有很多替代品，可能是你的竞争对手，用户可以轻而易举地到其他网站上去寻找他们需要的信息。《点石成金》这本书也比较详尽地描述了这个要点。相信大家都应该阅读过了。《点石成金》里谈到关于“为扫描而设计，不是阅读”时，给出了几种方法： 1.

尽量符合用户习惯的设计，让人接受陌生的东西需要代价，除非我们觉得这个代价是必须的。

在页面把越重要的东西越突出，建立清楚的视觉层次。

可以点击的地方必须突出，让人明显知道可以点击。

把页面划分成明确定义的区域

省略多余的文字

Yahoo Small Business的页面改版很具有代表性（图4）。我们可以发现，改版后的页面（见图 5）视觉层次得到了很大的提升。白色内容区域、浅蓝色右边栏和深蓝色的注册区域渐渐递进，深蓝色背景上的强烈反差的黄色按钮“Sign Up”，引导着这个页面的主要目的，亦是重点。另外，大家可以发现，内容文字部分比先前的老版本少了一半一半再一半再一半。。。相应的，图4 / yahoo small business改版前

使用列点和大图的方式传递了相同的信息。 “Sign Up”显而易见，而且视觉 93

碳酸志2010 交互设计指南

上有突起的渐变效果也马上让人知道，那是个按钮。

将功能“藏起来” 部分产品经理有一个这样的通病，他们每每作出一个新功能，就爱向用户炫耀新的工作成果。看起来，这样挺好，一来让用户知道本网站还没死，而且还在为他们不断的制作新的功能，二来辛苦开发了数天甚至数月的功能要是没人用，那该多“杯具”啊！于是乎，你就会发现，长期“坚持 ”下来，界面上的元素越来越多。假设某一天，这样的产品经理全部被谷歌挖走，那么谷歌的首页将会是一个放满“杯具”的餐桌(图6)：

图5 / yahoo small business两次改版后

还有一个例子来自于某

BSP，它的博客顶端存在着一个工具栏 ( 图 7 )，有 30 个左右的链接。而这个工具栏在4年前他的用户高速增长期其实并不存在。如果你了解 20 - 8 0 原则，你应该知道：80 %的用户只会使用 20 % 的功能。所以，为什么要让那些少人使用的80 %的功能总是放在显眼的位置，扰乱那些只需要20 %的功能的大部分用户呢？

(此句有些拗口，我承认，麻烦看官们可能要反复阅读几次…) 其实那些 8 0 % 的功能大部分是专家用户所喜欢的，我们应当将这

图6 / “杯具”版Google首页

些功能“ 藏起来 ”，目的就是不影响新手和中间用户，并等着他们去发现，然后大叫： “哦，居然这个网站有这个功能，太棒了！”我们来看看Google Reader iPhone/

Android 版本最近的小改版：

图7 / 某BSP网站

交互设计指南碳酸志2010

大家可以发现，原来占据垂直空间的 N ew

items/all items的切换、mark all as read等功能，全部藏匿在右上角的下拉按钮中。Refresh 被替换成了一个可以容易理解的Refresh图标，顶端其他产品的链接也祛除了下划线。关于将功能“藏起来”、功能肥胖症是个说不完的话题，《哈佛商业评论》早在06 年的时候也详细探讨过这样的问题，这部分内容，我过段时间也整理整理，为大家奉上吧，本文中，就不作深入探讨。

关注于用户的主要任务流图8 .1 / Google

Reader

关注于用户想要的，而不要强迫用户查看、理

改版前

解与操作无关的事情，是关于“突出重点、一目了然”的UCD方法论的延伸。这个想法，解决了什么元素该被“突出重点”从而达到界面“一目了然”的图8 . 2 /

Google Reader

改版后

问题。从用户角色到场景，到任务流，可以决定每个界面— 也就是任务流上的节点最重要的元素是什么。加之融合商业目标，即成页面的重点。其他非重点的元素应该尽量“藏起”或是“显得暗淡”些。我们来看一个来自于Magic Ink(by Bret Victor)的例子：这是个书籍的搜索结果页面(图9.1)。我们能够发现，这个页面觉得凌乱不堪。各种大小，各种颜色，各种粗细的字体混杂在一起，眼花缭乱。就像《气球》这首歌唱的：黑的白的红的黄的紫的绿的蓝的灰的

图9. 2 / 搜索结果改版前

你的我的他的她的大的小的圆的扁的好的坏的美的丑的新的旧的各种款式各种花色任你选择说实话这么多种气球还真不知道该选哪个。如果我们可以通过UCD（或者是其他方式）分析出，这个书籍的结果页，用户需要这些信息：书籍内容。这本书标题是什么，是关于什么的？书籍评价。这本书好吗？别人对它的评价如何，这些评论可信么？

图9. 2 / 搜索结果改版后

根据这个目标，重新设计后的结果（图9. 2）. 95

碳酸志2010 交互设计指南

我们可以看到，这本书内容和评价都一目了然，信息结构利于扫描和比较。重要的信息大而具有色彩，次要信息成灰色的小字。关于这些更详细的叙述可以参见原文。

总结本文描述了什么是“突出重点，一目了然”。如何测试页面是否“突出重点，一目了然”，以及如何达到 “突出重点，一目了然”。有句话我挺喜欢，作为结局吧。在《What’s Next in Web Design?》中说道的： “Simplicity is when someone takes care of the details.” “简单而不简陋！”(谢谢青云给出的翻译！) 我们所追求的界面或者功能做得简单，不是粗制滥造，而是需要把现在创造更多无用功能的精力转向优化现有功能的细节上。做出来容易，但是做好做精难啊！

宗羲（包季真）原淘宝UED交互设计师

交互设计指南碳酸志2010

交互设计指南系列之

标签明晰，有效文 / 淡月（王旭）

导航标签彼此互斥、完全穷尽导航标签其实就是一种文字表达形式，我们用标签来代表网站上的各种分类信息。比如“联系我们” 这个标签，代表的内容通常会包括公司名称、电话、地址、邮箱等信息。它可以是文字，也可以是图片。在英文里被称作“Label”，并不同于我们常说的“tag”标签云图。说简单一点，我们就是要为网站的信息做分类，并为它们起一个通俗易懂的名字。这其实是任何人都可以做的一件事情，所以在导航设计流程中，它的重要性也常常被忽略。在设计产品时，常会听到这样的话： “这个栏目该叫什么名字？恩……先别管吧，把更重要的工作做了再说。” 然而，站在用户的角度，导航标签代表的是整个网站的内容、产品的结构，他们必须依靠标签的内容和组织方式来寻找网站中的信息。标签是访客行为的触发词，好的标签能吸引访客注意力，引导他们准确地找到信息。导航标签是访客预测目标页内容的重要依据，紧跟着它的就是导航中的关键点，网页的过渡，所以尤为重要，有歧义的标签逼人猜测它的意图，甚至让用户走错路或迷失方向。比如这个网站的标签（图1）

图1

碳酸志2010 交互设计指南

这个网站的导航标签比较极端，首先标签之间的互斥性差， “淘宝潮流榜”、 “爱物秀场”、 “败家俱乐部”等，含义和实际内容都非常接近；其次是一致性差，标签的粒度不同、长度不同、语气不同，甚至还有英文出现，可谓五花八门；最糟糕的是，在标签的选择上，用了很多自作聪明的词语，如“爱骚谈资”，用户很难预测到链接背后是什么内容。设计标签的过程，实际上就是对信息分类的过程，我们应当坚持MECE 原则，也就是彼此独立、完全穷尽（Mutally Exclusive,Collectively Exhaustive）。这是一种客观的角度。你也可以站在主观的角度进行分类，但必须做到标准清晰、在目标群体中能获得充分共识。怎样的标签才能称作好的标签？它应该满足这几个方面： 1.

好的标签，应该使用客户的语言，避免使用术语、行话、缩写词等用户难以理解的词语；

采用描述性的标签，避免使用“信息”、 “细节”等过于宽泛的词语，尽量以某种方式加以限定 , 如： “给买家的信息”、 “交易细节”。

标签之间的互斥性要强，尽可能地寻找差异化；

使用聚焦地标签，如，能把猫、狗、仓鼠等归纳为“宠物”，就不要用“动物”。

在粒度、语法、展现、用法等方面保持标签的一致性；

较长的标签往往比短标签更好，但并非越长越好，请尽量控制在12个字以内（这不是一个硬性规定）。

那我们设计标签时的词汇从何而来呢？是凭空想象出来的吗？当然不是啦，你可以从以下几个方面获得词汇：

1、你自己的网站或产品你的网站和产品，在前期建设中，已经积累了很多标签。我们要做的，就是遍走整个网站，尽可能收集所有标签，然后用表格进行整理。比如,我们在淘江湖改版时，对现有标签系统进行了一次整理，在表格（图2）的帮助下，比较容易看出现有标签系统存在的问题。类别

名称

标题

淘江湖首页-淘江湖-淘宝网

我的江湖我的好友

顶部导航

我的好友

栏

有来往的

谁来看过我-淘江湖-淘宝网

好友

我去看过谁

好友

我去看过谁-淘江湖-淘宝网

邀请好友

邀请好友-淘江湖-淘宝网

我的消息

千城的消息中心 -淘江湖-淘宝网

系统消息

全部系统通知

投票评论淘金币

千城的好友-淘江湖-淘宝网

谁来看过我

好友

图2 / 淘江湖标签整理

我的好友

有来往的

邀请好友我的消息

Title

交互设计指南碳酸志2010

2、类似网站或竞争对手网站如果你还没有网站和产品，那就要去同类型网站或竞争对手网站去收集标签了。相信这一做法，在互联网上，几乎是无师自通的。你可以通过对同类型网站标签系统的观察和比较，得到一些行业类比较通用的词汇，降低用户的理解成本。你可以用同样的方式，收集同类型或竞争对手网站的标签，以供参考：类别

名称

标题

我的首页-**网

首页好友

Title

我的好友

好友

我的好友-**网

群

群-**网

消息中心

消息中心 -**网

好友管理访问脚印

顶部导航

查找朋友群

我的群好友的群

栏

全部群消息

短消息系统消息留言板

图2 / 某社交网站标签系统

3、受控词表或叙词表这是由图书馆员和特定领域的专家所建立的资源，这些词汇都是专家们付出很多努力的成果，表达方式精确且一致，而且这些资源通常是公开的。其实信息架构的很多理论，都来源于图书馆管理。在完全没有依据的情况下，我们必须设计新的标签系统时，应该怎么办呢？你可以对通过对内容进行分析、要求内容的产生者提供、或者象专家或你的直接用户求助。卡片分类法也是比较流行的一种做法。

卡片分类大概有4个步骤： 1.

招募志愿者，大部分项目适当的卡片分类志愿者人数是15人，大型项目可以达到30人。个人觉得如果只是想对自己想法进行验证的话，5 -10人即可。

准备卡片，写上你预先设定好的标签（这些标签必须是你们内部讨论或请教过专家的结果）。

让用户进行分类，你可以观察用户的分类过程，以及对标签的理解。

对卡片分类的结果进行分析，如果数据庞大，你可以借用软件进行分析，推荐工具有IBM EZSort、

CardZort、WebSort等。对卡片分类感兴趣的同学可以进一步查阅资料，我们在这里就不详细说明了。参考文献《 Web 信息架构：设计大型网站》（美）莫维里，（美）罗森费尔德著《 Web导航设计》（美）卡尔巴赫（Kalbach，J.）著淡月（王旭）淘宝UED资深交互设计师 danyue@taobao.com

碳酸志2010 交互设计指南

交互设计指南系列之

避免迷路文 / 淡月（王旭）

任何位置都能明确“我在哪里？这里有什么？从这里能去哪里？” 迷路可不是一件好玩的事情，试想你驾车行驶到高速公路分叉口时，却看不见任何路牌，那该会怎样地困惑、沮丧、愤怒和恐惧。为了避免迷失方向，我们发明了各种导航工具，大到卫星定位系统，小到指南针，人类在这一事情上，极具创意。在网站上迷失方向，虽然不是什么生死攸关的事，但会带来许多负面影响，如：用户体验下降、任务不能完成，用户流失等。我们可以通过良好的导航系统来避免这个情况发生。好的导航系统可以帮助人们找到在网站中的位置，并帮助他们制定更好的查询策略，增进对内容的理解。在制定解决方案前，先了解他们为什么会迷路： 1.

当人们不能理解信息时，会产生迷惑。

人们在查询过程中迷失，不知道下一步该做什么。

人们可能会在网站中失去方向感，无法回到以前的页面，甚至是首页。比如在右图的这个网站中游走，你容易陷入进退两难的境地。上

图中，两个点击打开的页面，都没有导航信息，甚至没有任何离开当前 100

交互设计指南碳酸志2010

页面的出口。 4 . 人们在在信息系统中偏离了方向，分散了注意力。人们因众多的、喧宾夺主的信息而偏离了主要任务。关于这一点，可以参考交互指南之《突出重点，一目了然》。右图中的登录页面，可谓琳琅满目，信息的丰富程度毫不逊色于首页，难道设计者的目的，是希望用户放弃登录这个主要任务，去往“更重要” 的地方吗？你也许会想，让用户不要迷路，不是非常简单的事情吗，我只要在所有页面中放入全局导航，使他们能在网站的核心内容之间移动。然后放入面包屑，让他们了解自己所处的位置，一切不就完事大吉了。但事实上果真如此吗？全局导航也许能帮助用户了解你网站的核心内容，但在具体的任务中，比如下图中的淘宝全局导航，如果放入在挑选商品或支付的页面中，恐怕非但不能指引用户，还会干扰到任务的完成。

小心，别让自己陷入导航系统的过度设计中去。我们所要做的，是使用人物角色和场景作为参考，确定人物角色会选择的到达内容的最佳路线，而不是提供所有线路，更不需要将网站的全部结构复制到每个页面当中，造成页面信息负担。好的导航系统让人们感知不到它的存在。就好象在观看体育比赛时，裁判会做出许多正确的判定，而我们往往忽略他的存在，但一旦裁判员做出了一个错误的判决，就会引来场上观众的一片唏嘘。那么，我们应该怎样做，才能保证用户不在网站中迷失呢？

首先，我们要帮助用户定向，也就是确定“当前位置”。即便GPS卫星定位系统如此强大，它都必须随时在地图上标明我们的“当前位置”，才能真正为我们导航。而与现实世界不同的是，在网络世界中没有南北之分，也没有地理位置，我们必须利用导航系统的各种因素，来为用户创造可以判断当前位置的情景：

1、重视网站的品牌信息

101

碳酸志2010 交互设计指南

用户应该一直知道自己在浏览什么网站，将组织的名称、标识、和身份识别图放进网站的所有页面中，是达到此目的最显著的方法。

2、细节创建情景我们可以通过页面内标题、页面文字，向用户传递当前位置的信息。浏览器标题和URL也是用户进行判断的依据。当前导航选项的高亮状态，也是常用的方式。

3、面包屑 “面包屑”也是标明当前网站位置的好工具。此外，面包屑还能传递网站结构信息，以及记录用户的访问足迹。

4、逃生舱模式逃生舱模式也是帮助用户确定当前位置的一张底牌。也就是在网站的所有页面上设置统一的出口，无论什么时候点击这里，都可以回到首页。大部分网站都把逃生舱设置在网站LOGO上，已经成为惯例了。

其次，根据用户需求，确定导航机制。用户的需求决定了我们应当放置何种导航链接。在不同类型的页面，用户所产生的问题不尽相同。我们需要预测这些问题，然后在设计导航的时候，也问自己同样的问题。一般情况下，用户会问：“我在哪里？”“我在这里能做什么？”“我还可以去哪里”；在电子商务网站，他们也许会问，我该如何找到想要的产品信息；具体在某一产品，他们也许会问： “我该如何联系客服人员？”“我到哪里可以找到相关产品”。我们所要做的，并不是想出所有可能发生的问题，相应的，我们也不可能把所有问题的答案都放入页面当中。这个时候，人物角色和场景，将发挥很重要的作用。对于不同的页面，弄清楚每个用户角色要去哪里，放置他们最需要的导航。比如：你的人物角色需要随时从一个栏目跳转到另一个栏目吗？如果是的话，请保证顶级栏目的链接一直可用。

102

交互设计指南碳酸志2010

一旦确定了用户想要到达的内容，就要思考达到这一目标所需要的最简单、最容易的方案。比如在图4 中，也许你的人物角色需要的，只是一个“下一组”链接。

最后，通过压力测试检验页面的导航能力。怎么样测试页面的导航能力呢? 1.

随机从你的网站上选择一个页面；

把这个页面打印成黑白的，并把页面头部的浏览器地址栏和下面的版权及公司信息部份去掉；

假装你是第一次进入这个网站，并试图回答下面的问题(详见下列问题列表)；

在一张纸上写下你所想的和答案；

问题列表: 1.

这个页面是写什么内容的？在页面的标题处画一个方形或在纸上写清楚；

这是个什么样的网站?把网站的名字用圈圈起来，或者自己写在纸上；

这个网站主要的版块是什么? 用x标识；

这个页面中主要的版块是什么？用三角形围着x 来标识；

我怎么样到达这个网站的首页？用H标识；

我怎么样才能到达网站的顶部呢? T来标识；

每一组链接分别代表什么? 把页面上的主要链接圈出来，并写下标识；

D:用来标识更多，详细介绍及这个版块的子页面等； N:在同一版块的其它相邻页面； S:在同一网站上但不相邻的页面； O:离开这个网站的页面； 8.

你是通过怎么样的路径到达这个页面的呢？请写出你到达这个页面的路径，选择1>选择2>选择3… 让你们团队的其它成员或熟悉你网站的朋友也与你做同一试验，大家象跳伞一样的进入网站中的任意

一个页面，然后把回答记在纸上，你就可以看出导航存在的问题。关于导航压力测试更详细的内容，请参考四娘的文章（http://ued.taobao.com/blog/2009/01 /19/

yaliceshi），我们就不详细说明了。

参考文献《 Web 信息架构：设计大型网站》（美）莫维里，（美）罗森费尔德著《 Web导航设计》（美）卡尔巴赫（Kalbach，J.）著《Designing Interfaces》（美）Jenifer Tidwell

淡月（王旭）淘宝UED资深交互设计师 danyue@taobao.com

103

碳酸志2010 交互设计指南

交互设计指南系列之

深广度平衡文 / 温侯（余子翼）

相信大家对街边林林总总的房产中介并不陌生，那么我们先看看下面这张图片。从右侧这家店的橱窗里，我们能迅速分清哪些是租房信息哪些是售房信息。因为店家很贴心的将房产信息进行归类，并且在视觉上做了一些划分，让我们对信息能一目了然。借这个小案例引出我们今天要分享的话题：深广度平衡。

什么是深广度？其实“深广度”本身并不是一个单一的概念。在网站的信息架构中，有一种组织结构叫做树形结构：网站首页视为链接层级中第一级，与其有从属关系的页面视为链接层级中的第二级，一般称其为二级页面。通过二级页面又可以继续得到第三级页面，依此类推可以得到一个完整的树形链接结构。这样一个完整的链接结构，我们称它为树形结构。在整个树形结构中，链接的层数被称为网页链接的【深度】（depth）。而在树形结构里，最底层页

104

交互设计指南碳酸志2010

面包含的页面总数被称为网页链接的【广度】（breadth）。我们可以通过图2 来理解深度和广度的概念：

为什么深广度需要保持平衡？我们回到开篇的小案例。左侧那店铺采用的是“只有内容链接的模型”（它们之间没有层级结构；链接没有模式可循；且没有某种导航方案将他们分离开）（注 1）在这里每一条房产信息都可以看成一个内容链接，整个橱窗就像一张错综复杂的大网，让人头晕目眩。图2

而右侧的店铺采用的是“结构化浏览模型” （只有一组链接，作为获取网站信息的途径；导航区域与布局中其他内容有视觉上的分隔；要到达另一区域的某个页面，必须沿着树向上导航，再沿着另一个分支向下）（注 2）店家将信息进行了规整，在房产信息上增加了一个分类，并且对不同类型的信息使用了不同的颜色，高效的将租房信息和售房信息区分开来。一个网站的链接深度和广度最好有一个合适的均衡关系，深度过大的网站不利于用户快速获取信息，广度过大的网站则容易让用户在无数并列的超链接面前不知所措。图3的上图说明了又窄又深的层级系统，用户必须点击 6 次才能到达最底层的内容。对又宽又浅的层级系统而言（相对而言），用户必须从6 个类别中选择，才能找到 6 个条目。就像图 3 的下图所示，用户会面临主菜单上太多选项，而当他们选了一个选项，却没看到什么内容时，就会产生不良的观感。（注3）我们再来看一张用户对于不同层级结构所需反应时间的图表（注4），图4（见下页）总共 512 项内容，组成了三种不同的分级方案，X 轴是分级，Y 轴是反应时间（秒）。可以很清

图3

晰看出，在过深和过广的分级方案上，用户所需要的反应时间都比较长。因此我们在组织网站信

105

碳酸志2010 交互设计指南

图4

息的时候，需要仔细平衡深度和广度之间的关系。

如何保持深广度平衡？

图5

106

交互设计指南碳酸志2010

我们在处理网站结构时，常常会使用按组分类的方法来组织信息。而信息的分类我们能使用时间序、主题或科目、地理、字母序、受众群体以及任务等方案。现在我们再来看看深广度平衡在web上的应用。图5（见上页）是某电脑公司的官方网站，他们的导航本身就是一个站点地图。他们将14 项内容分级组成了一个两层的结

图6

构树，每个分支上都有3- 4项内容。对于这样一个信息量不是很庞杂的网站来说，使用主题或科目的方案，将信息组成一个两层的结构树，就是一种深广度平衡的方式。再来看个案例，图 6 是某软件官方网站的一个下载区块，这个区块里密密麻麻罗列了N 个下载链接。有不同的版本、有不同的下载工具、有不同的外站下载。这些链接在没有进行任何组织的情况下呈现给用户，体验是非常糟糕的。对于那些信息量很大很杂的网站来说，单纯的使用某一种按类分组的方案已经不太适用了。一般来说，广度比深度的效果更好。在深结构的各级别

图7

间选择，比起在广导航的各选项间扫视，要付出更多精力。眼睛比起鼠标点击（和页面载入）要快得多。虽然用户在深结构更容易迷失方向，甚至可能迷路，但也不要在广度上走得太远。任何时候都把所有链接展示出来会吓倒用户，让他难以选择。用户会点击看起来适合他们需要的第一个选项，或者干脆放弃，图7清晰的阐述了用户放弃率和深广度之间的关系。图8

图8淘宝首页类目地图大概有300 个类目，使用了三层结构将他们清晰得展示出来，每层类目都是4～12个之间，是一个深广度保持平衡的典型案例。

小结对于不同类型，不同信息量的网站，在深广度平衡上应采用不同的策略和方式。本文仅以个人在工作中的经验来对深广度平衡的方法论进行一些实例化的分享。对这方面有兴趣的同学欢迎留言探讨。

注1：摘录《 Web导航设计》第1章第一节导航的需要（P 6）注2：摘录《 Web导航设计》第1章第一节导航的需要（P 9）注3：摘录《 Web 信息架构》第5章第四节组织结构（P70）注4：摘录微软论文《 Web page design: implications of memory, structure and scent for information retrieval》

温侯（余子翼）淘宝UED交互设计师 wenhou@taobao.com

107

碳酸志2010 交互设计指南

交互设计指南系列之

一次点击文 / 定侯（李继鹏）

有一次去超市换货，本能的找到服务中心，服务中心说这个业务在超市旁边一个房间里，由于忘记带小票，那个小房间的人让我去另外一个小房间调电脑里的记录，调出来我拿着记录单去了卖货的地方才换货。其实超市退换的需求也不少，整个过程服务态度很好，但是很麻烦。其实我们日常生活中很多事情，办起来过程很罗嗦，办事的工作人员说这是应该的，都这样做，可应该不应该，谁是评判标准呢？交互设计一个很重要的目地就是让用户方便快捷的执行任务和完成工作。在互联网产品的交互设计中，尽可能的消除每一个附加工作，做到尽可能一次操作而完成任务。一次操作是个概念，并不是完成任务只能点击一次，而是减少用户操作次数。使之提高工作效率。交互产品经常包括一些不必要的具有繁重工作量的交互，对于用户而言，这些就是附加工作，附加工作不直接实现目标，但对于实现目标是有用因素。附加工作的问题是它们在消耗我们的精力，而不是直接实现我们的目标，如果能够消除附加任务，我们就能让用户更加有效率，更有生产率。并且能够改善软件的可用性。作为一个交互设计者，你应该对附加工作的存在非常敏感，用户界面中附加工作的存在是造成用户不满的首要原因，因此每一个设计者都值得关注各种形式的交互附加工作。（About face 3 ,第11章：消除附加工作）那么，如何减少用户的附加工作，保证用户工作效率呢？

1，保证主操作以及用户常用功能的方便展现。这是用户快速完成任务的核心。比如播放器需要突出播放按钮，而收起了快进功能。ps的滤镜里会第一个展示出你上次应用过的滤镜效果，方便再次应用等。 108

交互设计指南碳酸志2010

2，合适的关闭与隐藏新手培训工具用户不会长期停留在新手状态，所以新手的任务对于中间用户和高级用户来说就是附加工作，需要关闭或者隐藏。

3，平衡好视觉装饰元素对用户操作的干扰适度的装饰性元素会有助于创造特殊情绪和氛围，以及产品个性便于品牌记忆。但是过度的装饰会干扰用户工作效率，因为用户不得不分析、破解，以区分哪些是关键信息、操作功能等。这点对从视觉转过来的交互设计师尤为重要，视觉设计在缺乏系统的用户交互行为认知的情况下，很容易使设计浮于表面，从而做到吸引用户眼球后又让用户不明白如何方便的应用，这也是产品设计和广告设计的根本区别。

4，不要轻易打断用户操作流用户高效的使用工具会进入一种自然流的状态，这个时候需要一些努力才能打断，例如突然电话响了。错误消息对话框就是如此。一些打断是不可避免的，但另外一些则不是必要的。

5，改善导航更好的利用导航将保证用户的任务操作，明晰导航里将详细讲述。下面讲一个关于不要轻易打断用户操作例子：在windows xp系统以前，用户点击关机后，会弹出一个提示窗口，一定要用户再次确认下关机（图1），这对用户快速关机存在着强行的打扰，很多人甚至按机箱按钮强行关机（非常不好的做法）。

图1

在 vista 之后，关机终于可以一键关机（图 2），并把以前弹出框里的功能收起（非常用功能），vista 还是保留了两个按钮：关机和锁定，而且是图标显示，在

win7中，只保留了关机，其他都收起，并且关机按钮使用文字，更加清晰了用户操

图2

作的思路。提高用户的效率，就在这些常用操作上的改善，能不能快点？步骤再少点？再清晰点？

定侯（李继鹏）原淘宝UED交互设计师 dinghou@taobao.com

109

碳酸志2010 交互设计指南

交互设计指南系列之

别让我思考文 / 定侯（李继鹏）

以前经常吃公司旁边的食堂，人多，排队。夏天的时候，我们总要找一个靠窗口通风好的地方坐，没有空调只有风扇，风扇很多，开关都集中在一个地方，应该是方便操作人员统一管理，有时自己头上的风扇没开，当我要去开这个风扇时，麻烦来了，很多排的风扇开关，到底哪个是我头上的呢？生活中有很多总让我们感觉莫名其妙，或者停下来需要思考的情况，有时不得不求助，到了互联网上，可能很多情况发生了也没什么求助的方法，只能自己猜，不猜了就只好关掉。网页上每项内容都有可能迫使我们停下来，进行不必要的思考。比如内容信息看不懂，操作功能不明确。例如，文案。常见的罪魁祸首是那些很酷或者自以为很聪明的名字、带有营销倾向的名字、和具体公司有关的名字以及生僻的技术名词。（Don’t Make Me Think 第一章）当我们访问 Web的时候，每个问号（让用户不明白的地方）都会加重我们的认知负担，把我们的注意力从要完成的任务上拉开。这种干扰也许很轻微，但它们会累积起来，有时候这样的干扰不用太多，就足以让我们抓狂。况且，人们通常不喜欢苦苦思索背后的原理。建造网站的人没有让它们明白易懂（而且容易使用）会让我们对这个网站以及网站的发布者失去信心。按用户心智模型去设计产品，下面列出一大堆访问者在访问网站时不应该花时间思考的事，例如：我在什么位置？我该从哪里开始？他们把××放在什么地方了？这个页面上最重要的是什么？

110

交互设计指南碳酸志2010

为什么他们给它取这个名字？

不让用户思考过多，原则上就是设计符合用户心智模型。大致可以从下面几个方面来讲：

1.文案需要让人容易理解，快速记忆。根据不同产品定位，找到恰当的切入点，文案过长或者使用用户不理解的情景，如技术用词，营销用词等，都会使人不知所云。省略多余的文案，比如过分修饰，欢迎语，多余指示性语句，这些罗嗦的词语会影响用户对关键信息的阅读理解和判断，必须干掉。

2.图形好的图形表达是优于文字的，但是图形没有把内容表示明确，反而适得其反，给用户造成理解上的困扰。很多情况下，我们好像都很喜欢做一些很炫的icon 来表达某些内容，这些是会起到吸引注意力的作用，但要记住一点，你的图形是不是很好的阐释了内容，如果不是，那就去掉吧。不如放大标题来的更好。每个网站需要有它的独特性来吸引用户，但表达这些独特性的元素，例如图形，一定不能对用户理解内容产生干扰。很重要的一点，我们设计是要表达什么，为了什么，怎样更好的帮助用户来理解这些表达，是我们一定要做到的。网站不是炫技场，设计要为内容服务。

3.信息信息其实是文案、图形等形式的混合体。信息之间，是否建立了相应的关联度，不相关联的信息之间是否产生了干扰。大量的信息是否进行了合理的分类，以减轻用户的寻找时间。信息分类处理上，有个深广度问题，广度站点因为层级少，可以让用户不需要点击过多就可以到达底层；深度站点需要点击更多次，但它在每一层次上可以做到让人的思考最小化。关于信息的深广度，详细（交互设计指南之深广度平衡）。所以，有效合理的信息分类可以帮助用户快速准确浏览和完成任务。

4.引导通过菜单，导航，面包屑等手段有效引导用户行为路径，让用户方便去他想去的地方，回他想回的地方。在路边我们希望有路牌指示；在杂志上我们希望前面有目录，在每页我们还希望有页码，在网站设计中我们引导好用户需要浏览的内容；在用户需要的时候给予网站工具来方便完成任务，在这点上很多时候我们总是希望上新功能，把功能做的突出，殊不知用户是不是也这样想，他到底在这里需要什么。

5.操作方式

111

碳酸志2010 交互设计指南

充分顺应用户的心理思维，来设计功能的操作，可以使用户快速上手。汽车方向盘往左打，汽车就往左开；插排电源按下去灯亮；相关内容旁边放置相关操作，操作尖头朝下说明有下拉内容，等等。这些操作方式都是要符合用户心智模型的。

6.一致性设计在同产品（甚至同类产品）中保持一致性，可以大大降低用户理解成本，使用户快速上手，增加用户的使用率。这里的一致性包括颜色，形状，内容，操作方式。比如红绿灯如果各地都不一样，外地人来了

岂不会导致交通混乱。同一个网站也应该有这样的一致性，有些都可以保持行业的一致性，比如页面上使用一样的翻页等，既可以降低制作成本，又对用户的使用有良好的认知帮助。到一定程度，也会提升一个品牌的认知，比如阿迪达斯到处使用的三道杠。下面看个例子：这个是某期宝贝传奇的宣传页面，进来以后甚是让人看不懂！没有很好的根据用户心理预知和相关内容的合理放置来设计。这只是一个活动，如果是一个长期产品，用户接受程度可想而知。我们都知道别让我思考最经典的页面是google首页：logo起到网站认知作用，搜索框紧跟logo并最大化使其最容易被使用，其他信息按归类放置，并根据等级高低依次减弱。虽然大多产品都有其他商业性需求考虑，但设计师不能被这些冲昏头脑，机械性的表现内容。多花心思把繁杂信息理清楚，要知道，设计师都不是很清楚信息的关系，用户就更不会明白。

定侯（李继鹏）原淘宝UED交互设计师 dinghou@taobao.com

112

交互设计指南碳酸志2010

交互设计指南系列之

减少记忆负担文 / 谷隐（姚愿）

科普《辞海》中“记忆”的定义是： “人脑对经验过的事物的识记、保持、再现或再认。” 记忆是人类一个非常重要的心理活动，它是人类很多其他思维活动和行为的基础。在所有的认知心理活动中，记忆和软件交互的关系最为密切。我们脑内的神经元反映的信息在需要用的时候可以被准确的再次呈现，也就是储存在DNA链上的信息基因，在适当条件下，指导合成信息蛋白并呈现的过程。在信息处理的角度，我们都关心怎么找到信息，而找到信息的结果，也正是再认、再现的目的。按先后阶段顺序，记忆分为三种类型：感官记忆、短时记忆、长期记忆。由于互联网产品的特性，用户在使用过程中，通常只用到感官记忆和短时记忆。感官记忆是指个体凭视、听、味、嗅等感觉器官感应到刺激时所引起的瞬间记忆（一般按几分之一秒计算）。感官记忆只留在感官层面，如不加注意，马上就会消失。感官记忆的时间非常的短，然而在试验中我们会发现，在视觉刺激后留有暂时的余像，比如卡通动画就是连续静止的画面在我们面前快速运动产生。除了余像，声音也会有短时间的余留，然而余音、余像现象只在一秒内，甚至半秒内完成，所以对于提高记忆力或减少记忆负担没有什么意义。一般的短时记忆只能保持二十秒左右，最长不超过一分钟。在这么短的时间内我们能储存多少信息呢？答案是7±2即5 ～9 个项目，平均为7个项目。这是美国心理学家约翰.米勒在其论文《魔力之七》中证实的。这个七是指什么呢？七个数字，还是七个人名，或是七件东西？其实都可以。

113

碳酸志2010 交互设计指南

定义根据一般人的短时记忆存储规律，我们把产品给用户带来的记忆挑战或困难叫作记忆负担。这里分为两种负担：一是产品给与用户的记忆负担，包括产品的内容信息，操作功能等。二是用户自己的记忆负担，包括自己的个人信息，安全问题答案，输入内容，上次操作行为，操作流程等。

分析人在短时间的注意力是集中和少量的，基于识别的用户界面在很大程度上依赖于用户所关心对象的可见性，显示太多的对象和属性会让用户很难找到感兴趣的对象。用户不喜欢经常重复性输入一些信息，比如个人帐号，安全信息，操作习惯，上次操作行为等，这些工作占用了用户完成其他重要任务的时间。

如何减轻用户的记忆负担呢？ 1.使用常用交互方式和文案,力求简洁美国科学家研究发现，大脑会“优待”较常用的记忆内容和操作形式，有意抑制那些相似但不常用的内容，以便减轻认知负担，防止混淆。从某种程度上来说，习惯就是一种”熟知记忆”。可以不出现的内容尽量不出现，即使需要出现也要用最简洁的方式出现（交互设计指南系列之《简洁清晰，自然易懂》）。图1是某银行网站上的流程说明，充满了专业词汇和不必要记住的内容。个人以为，既然是需要线下办理的流程，不如用最常用的交互方式和文案来说明。比如学习一下移动公司：请到银行网点办理，具体银行职员会详细说明。然后银行出具一张纸质清单，反正别人也记不住这么多电子信息。

图1

2.保持正确的对应关系在用户的操作流程中，必须保持正确的对应关系，一个流程只有一个最重要的操作，一次操作只有一个结果，逻辑清晰，有先有后。比如有操作步骤提示的时候，就严格按照12345步来排列，不能一会跳到第3 114

交互设计指南碳酸志2010

步，一会又跳到第2步。流程的对应关系混乱会加大用户的的记忆负担。

图2 / 新手进入Flickr 流程说明

3.控制信息量神奇的数字 —7,多数情况，用户记忆信息在7加减 2个左右，1个记忆最牢靠，3个很清楚，7个以上就需要给对信息进行分类，来帮助用户理解和记忆。通过合理的设计手段，来使信息有效的推送给用户，或者帮助用户轻松完成任务。图3的评分系统有十个选项，用户在评价的时候需要鼠标浮在蚂蚁图标上获得提示。但是有十个提示，用户很可能看见几个提示之后已经忘记最开始的提示内容了，这样的收集到的评价肯定不准确。这个交互设计案例中有一个缺点之一就是信息超量，用户很难记住过量的信息。(当然还有其他缺陷，比内容展示不明显，信息传达不准确等。)

图3

4.帮助用户记忆记住用户的操作与信息，保持操作的一致性来降低用户对于不同操作的记忆。我们可以先记住用户的行为，让用户自己去修改他的行为。比如：用户在输入密码错误之后，刷新后的登录页面仍然保留用户刚输入的用户名；很多网站有收集用户个人资料的需求，也会有状态提示已经完成的百分比，并提示哪些资料还需要完善，帮用户记住未完成的操作等等。这些方式都是在帮助用户记忆，以减少用户记忆负担。如图4案例，就是帮助用户记忆的体现。一款很少有记忆负担的软件产品，肯定更

图4

容易得到用户的青睐。减少记忆负担，对于产品和用户来说，可以增强用户黏性，提高工作效率，提升任务成功率。交互设计师在设计产品的时候，要注意到这些方面，才能把产品交互作得更加人性和易用。

谷隐（姚愿）淘宝UED产品设计师 guyin@taobao.com

115

碳酸志2010 交互设计指南

交互设计指南系列之

避免出错文 / 千城（魏萌）

一、如何理解本条内容: 一个“简单”和“复杂”的例子在我和开发人员沟通一个项目需求的时候，他们频频慨叹Mockup的设计所考虑情况之细致，很多程序要实现的预判和“非基础功能点”让开发人员望而却步不情愿去实现。相比较设计师为了让用户避免出错而绞尽脑汁去设想和考虑，开发人员更倾向于直接给到一个只能容许的操作行为，其他非法请求全部报错： “程序是严谨的，他错，我报错，以不变应万变。简单一点不好吗？”程序员们甚至笑言： “考虑他们的体验那么多，我们开发的体验真不好，please，咱们能不能不要把事情搞那么复杂”。在这个例子里，程序员看来，对于用户在和系统交互的过程中可能出现的各种情况均予以考虑，找寻用户理解起来最明确、操作最简单的、用户犯错最少的设计是缺少效率且浪费时间的。设计师这样做，是在将简单的事情复杂化。OK，现在就有这样一个问题，什么是“错误”？每当程序要处理错误的请求，是否是用户真的在“犯错”？

1、问题一，是谁的错？我在某一天使用了一个网站的相册功能时，遇到了这样的情况（下页图1）: “普通上传”是当前的选中状态，而上传“取消”的Button 也是同样的样式。因为选中状态具有“肯定、确定”的潜在暗示，这样消极操作和积极操作的状态完全混淆了，用户在上传过程中很容易出现错点 “取消”Button当作确定完成上传任务的误操作。

116

交互设计指南碳酸志2010

图1

如果真的发生了这样的情况（应该不在少数，像我就发生了在本地好不容易选择好的图片误点了很像 “确认”功能的“取消”而做无用功的情况），是的，用户犯错了，但是责任难道在用户吗？“本来我不会犯错，是你的设计使我犯错，或起码增加了我犯错的几率。”类似这样的错误，系统可能会报错，也可能不会；但真正应该检讨的却是系统本身，即：用户对界面的理解和本身的系统意图出现误差，系统设计的歧义等固有缺陷导致用户出错。让用户频繁碰壁、产生挫折感的设计，其原因不是用户的愚蠢、而是设计的愚蠢。

2、问题二，这是不是一个错？关于“错误”一词解释的第二点主要针对用户对系统的行为层来说，即：用户在人机界面交互过程中的误操作，系统未能通过更好的设计减少和避免用户的误操作带来的损失。还是以“上传照片”为例（如图2）: 一个模态的警示框，赫然告诉你，你想在这里上传相片，根本不该使用除了ie之外的浏览器！除了事先不打算通知你之外，同时

图2

也没的商量，因为我没有给你提供别的替代性方案和其他选择。可以想象,用户想要使用这个上传相片的功能，之前已经需要经历过许多步骤，比如要打开自己相册存放的线上地址、要成功登录进入管理后台、要寻找到上传相片的功能模块等等，已经付出了相当一部分的操作成本。但是系统却很残酷的让用户的所有工作都白做了，不仅如此，还很野蛮的方式告诉用户：你从一开始就错了！在这个情况下,用户对系统的理解并不存在误差，但还是在交互过程中产生了严重的挫折感。但是，这真的是用户的错误和需要承担的责任吗？我认为不是： “严格说来，我不是犯错，我只是不清楚我能做什么、以及应该怎么做的规则。” 由以上两方面的案例，我想已经可以初步回答程序员同学的问题了： “是的，简单总是好的，但是在交互过程中，事件永远是复杂的，所可能发生的情况的可能性永远是那么多的，不是你为他考虑的多，让他简单；就是他自己试验和受挫的经历更多，更复杂，体验更差”。

3、问题三、该如何做：关于容错设计的三个境界： 117

碳酸志2010 交互设计指南

保证不是我们自己的错：屏蔽会引起歧义的设计、本身不合理的设计，不让用户因为系统的设计缺陷而导致犯错。

把简单留给用户，把复杂留给自己：通过系统的优良设计约束和指引用户的操作，把出现错误的可能降到最低。

减小错误的代价，帮助用户做对：当用户还是犯了错误，通过设计引导用户走向正确的方向。对交互设计师而言，第一条是本应遵守的设计底线，二三两条是设计时可供遵循的设计指南。其中的

第三条，关于出现错误后如何帮助和引导用户做对，尚轩同学接下来会专门撰文探讨这个问题，此处暂不赘述，下面主要就第二条谈一些看法:

二、如何做到避免用户出错： 1、给予用户适当的行为约束——为用户封闭掉不正确的道路

图3

图3是Gmail的邮件处理区。上面表示当没有选择任何一封邮件的时候，操作项被置灰，不可点选。这样在有效避免了误操作的同时，也展示和预告了当符合操作要求时， “更多操作”内提供的全部功能的内容。下面则是已有选择邮件的时候，操作项全部激活为可用状态时的情况。对比上一张图未激活的状态，可以注意到除了激活与否的状态差别，还有其中的“加注星标”功能在初始激活状态下是只有加注而隐藏了删除功能的、充分考虑了加注和删除功能的互斥性而予以隐藏。通过用户的使用状态，通过有选择性的设置功能项激活、待激活的状态，以及功能项展示、隐藏的状态，是有效避免用户误操作的常用手段。这个考虑细心周到的设计在很大程度上预防了用户可能发生的操作失误。

2、给予用户必要的预判性错误提示——告诉用户，这样走可能会错图4Msn的登录界面。

118

交互设计指南碳酸志2010

当光标定位于密码输入区时，如果此时键盘的大写锁被不小心打开了，界面会提示用户此时处于

Caps Lock处于启用的状态，很可能会出现密码输入的错误。这样处理比用户输入完成点击提交之后再提示用户出了什么问题要来的友好和有效很多；比只是一味的批评用户“你错了”从头至尾完全不告诉

图4

用户出了什么状况的界面要友好太多。当用户的一个行为很可能会引发预见性的错误，越早提示用户，并给出可行性的建议，错误越容易被接受和改正，用户的损失也就越小。

3、告诉用户操作所处的状态和正确的操作方式——告诉用户，怎么走才对

图5

Flickr的媒体上传页面。对于用户在这个页面需要做什么、可以做什么有清晰的划分，对现在需要进行的、当前所处的操作阶段予以高亮显示，吸引人进行操作；对于还未进行到的操作阶段也预先做了一个介绍，很清晰的介绍了完整的任务流程。让用户知道在一个流程之中，自己已经完成了什么，将要做什么，还有什么没有做和应该怎样做，才能使任务成功，是避免用户出错的很积极的一个应对方式。让我们摒弃作为设计师的中高级用户视角，深入挖掘用户行为习惯和心智模型，真正从用户的角度去分析使用上可能会出现问题，通过系统的设计去尽量避免错误的发生——“把简单留给用户、把复杂留给自己”。About face3 .0第25章“错误、警告和确认”中讲到一条重要的设计原则：让错误成为不可能。很美好。以此与各位设计同仁共勉之。

千城（魏萌）淘宝UED交互设计师 qiancheng@taobao.com

119

碳酸志2010 交互设计指南

交互设计指南系列之

一致性文 / 化龙（杨延龙）

一致性解读: 一致性是交互设计需要遵守的重要原则之一。查了一些资料，找了一条较为通用的定义。描述如下： “交互系统的一致性首先是指系统采用一致的方式工作，要求系统工作方式或处理问题的步骤尽可能和人的思维方式一致；其次是指系统不同部分及不同系统之间有相似的交互显示格式和相似的人机操作方式。”从这个定义里，我们可以解读出如下的信息：

1.系统工作的方式和人的思维方式的一致（心理一致）不同类型的目标用户有不同的交互习惯。这种习惯的交互方式往往来源于其在现实生活中对实物界面已经有的交互经验,或者是已使用的网络或软件产品的的交互流程等等。在设计产品界面的时候设计师应该充分考虑到这一点。尽可能的将生活中的使用经验或者已有的产品界面设计，交互流程结合进自己的设计中。

2.同一系统的不同部分或不同系统间有相似的显示格式（外观一致）这一点主要是强调整体显示风格的一致，包括控件、窗口结构、颜色、字体、大小、间距等等，首先让用户从视觉上就认同是同样的一个控件或功能，进而会采取同样的操作步骤。

3.同一系统的不同部分或不同系统间有相似的操作方式（行为一致）交互对象在使用相同的交互方式后产生的交互结果保持一致。对于同样外观的交互控件，对其操作的步骤和结果都应该是一致的。

120

交互设计指南碳酸志2010

对于一致性的定义还可以再补充一点：

4.交互设计的目标是一致的（概念一致）也就是说，如果追求操作简单的交互目标，那就要贯彻始终的朝着这个目标前进，不能在系统的某些部分是简洁的风格，其他部分是繁复的风格，让人感觉不是一个设计思想指导出来的设计。

交互设计一致性的优点: 一致性的设计能给用户带来什么好处？ 1.改善了易用性和易学性一致性可帮助用户把他们目前已经有的在交互操作上的知识经验推广运用到新的系统、新的产品，新的功能中去，大大减轻了用户对于新事物重新学习和重新记忆的负担。用同样的方法操作同样的控件产生同样的行为，由此及彼，推测使用，这本来就符合人一贯的认知。

2.有效降低产品的开发成本,保证质量和效率。对于同样的功能和控件使用不同的外观和操作逻辑将成倍的增加开发的工作量，也容易造成没必要的产品风险。另外由于一致性导致的产品易学性的提高，产品设计时对于教育用户的功能设计方面，比如帮助等也可以做相应的减少，降低了资源投入，节约了产品成本。而且一致性的设计可以复用交互逻辑，视觉资源和开发代码，降低风险保证产品的质量，同时也有利于开发效率的提升。

3.帮助企业树立品牌对于同一企业的产品,良好的一致性设计能够提升品牌识别,当用户在遇到同样的展示或操作流程时,自然而然的想到了该企业。比如钓鱼网站就充分利用了这一点，欺骗了不少的网络产品使用者。

4.提升用户满意度当一个用户在使用某产品中看到了一个他熟悉的功能，而且在操作后得到了一个符合他以往使用经验所预期的结果，所获得的成就感一定会提升他对此产品的满意度。

保证设计一致性的方法: 1.研究用户的心理和使用习惯，尽量将用户现实世界中已有的使用经验延续到产品设计中。面对这样的界面（图1），用户的第一反应是按图中相应的黑白区域，这是实物交互延伸到界面交互设计中的一致性。

2.研究同类产品中用户已经非常有使用经验的的设计，将其用到自己的产品中图1

121

碳酸志2010 交互设计指南

抛开是抄袭还是借鉴的争论，同类产品的体验一致性还是不能忽视的，比如同为聊天工具，QQ（图2）是默认用ctrl+enter确认发表的，旺旺（图3），MSN 是用enter确认发表，当用户同时使用这几个聊天工具的时候，如果不设置一下，还真是有点错乱。

图2 / QQ聊天窗口

3.同公司的一系列产品，需要通过规范来统一界面风格，文案，信息提示，布局，操作流程等各个方面，从而实现一致性的设计。设计规范的一个重要作用就是保证一致性这个基本的体验要素。规范一般分为交互规范，视觉规范，

图3 / 旺旺聊天窗口

分别用来规范在交互流程方面和视觉展示方面各个控件，各个设计元素的一致性。各个公司都有自己的设计规范来保证品牌和品质，比如淘宝有总的交互视觉规范，在总规范的大框架下，各个业务线也根据自己的实际情况制定各业务线的规范。但即使有规范限

图4 / 手机淘宝页头

制，在实际产品中也会有因为各种原因造成的不一致现象。图4的手机淘宝网页头，一个有面包屑，一个没有，造成了不一致。

4．对于同一产品中同样的功能模块，一般的情况下，需保证其设计一致性。对于同一产品的同样功能，如无特别的需求，尽量保证其在展现和操作方式上的一致性，使用户在使用时不至于产生困惑。淘宝网的登录模块（图8）在不同的用户情景中，保持了一致性的设计。图5 / 淘宝登陆框

5.保证产品各个细节的设计有同样的理念在具体控件和元素的设计时，要注意风格，细节等方面的一致性。比如在图 6 的图标，各个图标之间虽然在表意元素方面各有不同，但是在视觉风格上是统一的，这样才能使整个界面看起来协调一致。以上说的这几点，只是在一致性设计中经常应用的几种思路，最主要的是要有一致性的思维，在设计中，时刻注意自己的设计是否符合了用户的经验，是否符合产品的规范等，才能避免不一致的问题产生。

图6

另外一致性并不意味着僵化。产品会随着用户经验的增长，市场需求的变化不断演进，为了更好地服务用户和他们的目标,有时必须打破规范，重新进行设计规划。这里就不做更深的探讨了。化龙（杨延龙）资深交互设计师 hualong@taobao.com

122

交互设计指南碳酸志2010

交互设计指南系列之

帮助用户从错误中恢复文 / 尚轩（孔晶晶）

人非圣贤孰能无过，对于用户来说，出错行为在所难免，因此在忽略犯错动机的前提下（主要是避免部分极端用户的主观试错），需要设计师为产品的可用性提供“退路”或者“其他路线”。换句话说，当用户在操作过程中触发了错误事件，需要有合理的交互反馈来帮助用户排除使用障碍，继续未完成的操作——回归到 WEB产品本身，即提供“返回入口”和“文案提示”，确保用户能“转移”到正确的操作流程中去。就出错行为的主体而言，可分“知错”和“不知错”两种。前者是知道正确的操作行为方式，但由于大意疏忽导致错误的发生；后者是完全不知道已经在进行错误操作，无意识犯错。对于“知错”，最有效的解决方法是提供“返回”、 “取消”之类的入口（有时甚至是模态对话框），让用户能撤销之前的错误行为；而对于“不知错”，往往要通过信息提示等交互方式给予引导。

关于信息提示 WEB易用性大师Jakob Nielsen曾经对出错提示信息的设计规则作出归纳，这里我们结合实例进行更深入的分析：

1、提示信息明确直接（Explicit）：明确指出用户的错误，有提示总比没有好。这是出错提示信息的设计底线，没有任何说明的错误反馈只能证明产品本身的失败。反面案例（图1）：某产品论坛，如果用户在未登录状态下点击了某贴的“回复”按钮，会弹出警示框， 123

碳酸志2010 交互设计指南

但是没有给出解决方法，无法引导用户进行修正操作。

2、可理解性（Human-readable）：提示信息是可以被用户理解的。拿最常见的 404 错误页面来说，传统的IIS 报错页面（图

图1

2）显得苍白而艰深（大多数用户根本看不懂），过度技术化的语言往往让用户对产品的印象大打折扣。可喜的是，很多出色的设计师很早就发现了这一问题，并提供了大量正面的优秀作品（图3）。毕竟，温和的文字和诙谐的视觉元素会让产品更具亲和力。

3、注意措辞（Polite）：提示文案温和有礼貌，避免因粗暴的提示给用户带来强烈的挫败感。用户出现错误就已经很郁闷了，为避免出现摔键盘砸电脑

图2

的民事案件，富有技巧的文案提示显得尤为重要。一般来说，要尽量避免含负面情绪的冲击性元素出现，比如红色的大叉。例如，淘宝的 detail页面（图 4），如果用户在未登录状态下点击了“立即购买”按钮，弹出的不是错误提示框，而是登录框，这样处理即避免了错误警示给用户带来的心理负担，也有效地引导用户修正操作（登录）。

4、表达精确（Precise）：提示信息要表达精确，不要出现模棱两可的表述。图3

记得西乔同学曾在《愤怒的用户》中生动地讲述了一个由不明确提示文案引发的血案，由此可见，对于错误原因的精确描述是衡量一个产品成熟与否的重要标志。

5、建设性意见（Constructive Advice）：提供建设性的解决方案。这点的关键之处是提供给用户的解决方案是合理准确的。相对于“避免用户出错 ”，引导用户解决问题更具针对图4

124

交互设计指南碳酸志2010

性，设计师和用研同学要对用户的出错的环境和前置条件进行全面分析，通过评估错误本身的可能性和原因，提供出一套或者多套解决方案。

关于交互方式的人性化处理对于触发操作行为的用户来说，已经产生了一定程度上的消极情绪，甚至从心理上对产品形成了一层接受壁垒。对设计师来说，除了人性化的文案，贴心的交互细节能够有效缓冲这种负面影响。

1、提供数据保存功能（Preserve）：尽可能保存用户之前填写的信息，用户在修正错误的时候只需要修改错误部分即可。当用户花费很大精力填写完整套表单，却因为输错了一个小数点而要重新输入所有信息，这种粗暴的交互方式对用户的操作信心造成很大的打击。

2、及时反馈（Feedback）：如果用户在操作过程中出现错误，应当及时反馈，千万不要等用户乐呵呵点击提交按钮时弹出提示 “您第一步设置错误，请重新设置所有信息”。

3、减少操作步骤（Reduce The Work）：尽可能用“选择”代替“输入”，例如通过一个下拉控件让用户重新选择正确的信息，而不是再次手工输入，减少重复劳动能明显提升纠错的有效性。综上所述，对于一款优秀的产品，理想状态是“避免出错”，即“将杯具扼杀在摇篮里”，当错误的很难避免时，需要靠 “文案提示”等方式将用户重新拉回到正确的操作轨道上来。《左传·宣公二年》有云： “人谁无过，过而能改，善莫大焉。”作为交互设计师，我们要做的就是提供给用户改过之策，共勉。

尚轩（孔晶晶）淘宝UED交互设计师 shangxuan@taobao.com

125

碳酸志2010 交互设计指南

交互设计指南系列之

反馈及时，有效，友好文 / 千城（魏萌）

如何理解反馈及时，有效，友好先说一个我遇到的案例：某次我使用一个网站的分享旅游经历的功能时 ( 图 1 )，由于看不出哪些是必填项目，我选择填写了几个项目后就点击提交，结果一个模态的弹出层出现，提示我提交不成功，因为有一个项没有填写。而我填写完该项后再次提交，仍然不成功 , 不同的是这次是告诉我还有一个项目是必填的！系统似乎不愿意把合格提交的规则一次性告诉我，而是选择单项校验，每点击提交一次，

图1

就告诉我，你犯的一个新的错误。于是，未免遭受多次打击，我乖乖的把每项内容都填上，保证无项目为空，小心翼翼的再次尝试提交。这时候， “我的印象”一栏给出的校验结果让我彻底崩溃： “‘我的印象’写的太少了，多写一点吧！”实在让人忍无可忍（下页图2）。

126

交互设计指南碳酸志2010

首先，这个对用户录入数据进行校验的时机是不“及时”的，在用户还未输入时就提醒用户需要录入的格式和要求，以及在用户输入完成光标离开时就即时校验数据都是体验更好的做法。其次，这个校验的内容是不能算“有效”的，起码没有完成它需要完成的全部反馈任务。 “填写的太少了，多写一点吧”：“太少”是多少？“多写一点”要多多少才被认为是合格的可以提交的数据？

图2

我的错误是什么以及应该怎样做才是合格的，我从这个反馈中还是不能够搞清楚。最后，这个反馈在方式上是不够“友好”的，使用独占式的弹出层、多次粗暴的打断用户的操作流，多次让用户感受到强烈的挫败感。在日常生活中，我们每做一件事情，都要讲究做的时机、做的方式方法和做事情的结果；在用户与系统的交互过程中，这些因素也毫不例外的左右着任务的完成情况乃至用户目标的达成，只是相对来说，这些影响因子在一个交互事件中的体现将更加具体化和特殊化。用户通过对系统的操作，想要通过与系统的交互迅速、成功、愉快的完成任务，也同样涉及到这几个方面的因素：时机、效果和方式。

如何做到反馈及时，有效，友好 1、及时首先必须澄清一个问题：及时是否简单等同于“要多快有多快”？新华字典对于“及时”一词有如下解释：及时：①正赶上时候，适合需要②不拖延；马上；立刻它告诉我们，及时，并不能简单的等同于“立刻”、 “马上”、 “要多快有多快”，它包含两层意思：一，是适时，是在最恰当、最适合需要的时间；二，才是立刻、马上，在最短的时间。对应到交互设计层面，可以对“及时性” 做以下两点解释：立刻：让用户经历最短的等待时间适时：在最合适的时候回应用户的操作。关于第一个“立刻”层级的含义，此处不想多谈，举例说明一下第二层“适时”所表达的含义：

首先，不是“要多快有多快”，而是应当做到反馈响应的速度适当：以下是yahoo的首页（下页图3），左边的菜单栏内的每个项，在鼠标 mouseon的时候都会展开一个新的遮盖层。鼠标依次从这些菜单项上划过可以发现，每一个层的展开、和层与层之间内容的切换并不是

127

碳酸志2010 交互设计指南

图3

即时触发的，而是要鼠标停留等待大约零点几秒的时间。对于一个触发后对屏幕内容改变如此巨大的操作（展开的层几乎遮罩了整个显示区的内容），我们可以称之为：反模式的方式，需要给用户一定的反应和接受时间，以使得用户将能在视觉上更好的适应这个显示的变化，同时更容易理解这个切换显示的内容和菜单之间的对应关系，更易于定位用户真正想要展开的菜单项。如果此处设计成每一个层都是悬停即现，即刻触发， “要多快有多快”，未必是一个反应速度最适当的设计。

其次，不是“要多灵敏有多灵敏”，而是还应做到反馈给出的时机适当：图 4 是 taobao 的商品 list页的搜索结果筛选区域，使用过的用户应该都会发现，并不是每个条件项的设置改变了，搜索结果页都会刷新按新的条件显示结果的。在中部的筛选关键字输入框，以及一系列

checkbox列出的筛选条件，单个改变不同的勾选条件或是关键词是不会触发页面刷新的，需要点击“确定”。而其他的条件项，如顶部的tab和底部的下拉框，都是点击后直接刷新搜索结果的。

图4 / 淘宝网list 筛选器

对于中部的一系列可复选的筛选条件来说，单个的改变一个或几个项的设置，是一种“微调”的行为，如果稍一改动系统就即刻刷新，用户会被系统的“反应过度”搞崩溃。作为一个智能的系统，并不是“要多灵敏有多灵敏”的对用户的任何操作都不假思索的给出反应，而是有选择性的分析用户的行为和意图，在最恰当的时机给用户适度的反馈。

128

交互设计指南碳酸志2010

图5

2.有效看一个 Flickr 管理照片的例子（图 5），这个管理工具的下方是相片库，上方是编辑操作区域，只要把所需要编辑的相片从下部拖到上部区域就可进行所需要的操作：一个添加照片到达编辑区的交互过程：首先，在选择好所需要编辑的照片时，就有玫红色的钩边highlight 选中的照片，同时位置稍稍上移，表示处于激活状态；

图6

接下来，当按住选择好的项目向编辑区拖放的过程中，集合的照片底部会有被选中相片的总数值提示，同时以淡色半透明的缩略图告诉用户，拖动操作完成后照片将要被放置的位置、同时暗示用户释放操作目标即可完成操作。最后，当用户释放鼠标（图6），照片被成功保留在了编辑区域，系统给出提示，究竟成功添加了多少个项目，同时给出了没有添加成功的项目及没有添加成功的原因。这个简单的拖放操作从选择目标到拖放完成，每一个细小的步骤系统都给出了明确的反馈，表示操作是否成功的同时给接下来的操作提供指引。还记得牛顿第三定律的内容吗？对每一作用力，必同时产生一个反作用力，且两者大小相等，被称为：作用力与反作用力。对应到交互设计层面，即指交互力反馈的对称性。系统应当对用户的每个操作行为给出反馈，让用户可以明确自己的操作是否有效以及产生了怎样的效果。

3.友好 1.

不批评用户和打扰用户。

将用户想象成非常聪明、但是非常忙的人。

129

碳酸志2010 交互设计指南

图7

关于第一点，此处不专门举出事例说明，不过我想很多人都深有体会：那些可怕的模态弹出框，告诉我们你错误的做了某事，导致了一个怎样失败的结果，而你现在唯一能做的事情就是点击确定，承认这个失误。或是自以为聪明的给用户一大堆的建议和提示，给用户提供早已知道的或者不需要的信息，中断用户的操作流。此处只想对第二点做一个诠释：将用户想象成非常聪明、但是非常忙的人。

Google的注册页面（图7），要求设置密码，密码的强度会随着左边的输入字符内容而做一个实时的判断，是否足够安全。这个设计首先很智能，因为它实时判断了我的密码是否设置合理；其次很友好，因为它并没有不容许我设置安全性相对较低的密码，给出的判断和建议点到为止，对用户很宽容。

Taobao 的心得点评打分系统（图 8）。首先它向我发出一个邀请，邀请用户点击左边的星星为产品打分，这个邀请同时暗示了为产品打分的操作成本较低。当我鼠标处于mouseon星星的状态，系统实时的对鼠标滑过的星星予以上色，是一种再度的邀请，邀请用户留下期望的评分结果，于此同时在右边也对应的介绍了每个不同星级的评价含义，整个评分过程的交互很简洁，评价分值的含义也向用户介绍的很明确，是很友好的评分页

图8

面。

千城（魏萌）淘宝UED交互设计师 qiancheng@taobao.com

130

感谢以下几位老师为《碳酸志2010》撰稿

张苹博士

《动因支撑理论对于UED 研究的理论指导和行动借鉴》p 50

张苹博士是美国雪城大学 (Syracuse University) 信息学院教授。她是信息系统协会 (Association for

Information Systems) 人机交互分会（SIGHCI）创始人及首任主席，现任信息系统协会学术主期刊 Journal of the Association for Information Systems（JAIS）高级编辑，以及 AIS Transactions on Human-Computer Interaction (THCI) 创始主编。张教授担任以下基金会的评委:美国国家科学基金会，加拿大国家科学基金会，欧洲科学基金会。以色列科学基金会，及香港研究经费委员会。自2002年以来，张教授多次应邀对以下国家进行了学术交流和讲学：加拿大，芬兰，德国，日本，阿拉伯联合酋长国。最近几年内张教授曾多次回国与国内同行进行学术交流及讲学，包括北京大学，清华大学，人民大学，复旦大学，中科院，香港科技大学，香港城市大学，以及其它几所大学。张教授毕业于北京大学计算机科学技术系（学士和硕士）和美国德克萨斯大学奥斯丁分校（信息系统博士）。她被认明为德克萨斯大学奥斯丁分校模范外国教员，其模范教书事迹被奥斯丁市报纸报道，并获得德克萨斯大学奥斯丁分校商学院最佳教书奖。张教授于2006 年被评选为全球最有影响的信息系统界学者之一。已发表100 +篇学术论文并曾在国际学术大会上获得四次最佳论文奖，两次最佳论文奖提名。她于 2006出版了两部学术专著，2007出版了一部面向非计算机学生的有关信息系统及人机交互的教科书。

陶嵘博士

《用户体验研究与设计的四个境界》p 57

陶博士是阿里巴巴资深用户研究专家，浙江大学心理学博士，中国人类工效学学会理事。2006 年加入三星中国设计研究所，组建了三星电子在中国的第一个用户体验研究设计团队，建立了UCD实验室，负责三星电子从白色家电产品、数码多媒体产品到手机产品的用户体验研究与设计。还曾在英特尔（亚太）研发公司、诺基亚（中国）投资有限公司从事用户体验研究、设计、管理工作。

蒋镇辉博士

《浅谈社交购物站点的社交体验设计》p 60

蒋镇辉博士是新加坡国立大学信息系统专业的副教授，他在英属哥伦比亚大学管理信息系统专业获得博士学位，在清华大学获得硕士和学士学位。他的研究兴趣包括：人机界面的设计和评估、电子商务、在线社交网络以及信息隐私等。至今，蒋镇辉博士已在信息系统领域的多个国际顶级刊物上发表论文，包括：MIS Quarterly，Information Systems Research, Journal of MIS, Journal of the AIS, 和 IEEE

Transaction on Engineering Management 等。目前他正在开展新加坡教育部支持有关社交网络购物的研究项目。蒋镇辉博士目前还是Journal of the AIS，AIS Transactions on Human-Computer

Interaction和Journal of Database Management等期刊的编辑委员会成员。

131

赵宇翔

《动因支撑理论对于UED 研究的理论指导和行动借鉴》p 50

赵宇翔是南京大学信息管理系在读博士研究生，2010 年获得国家公派留学基金资助赴美国雪城大学（Syracuse University）信息学院联合培养，师从张苹教授。他的研究兴趣包括：人机交互中的用户研究、社会化媒体与用户在线行为、网络信息资源管理与评价等。目前已在国内外核心期刊和会议上发表论文 36篇，包括：Scientometrics，Research Evaluation，Journal of Library and Information

Science Quarterly，情报学报等。获得2010 年度教育部第一届博士研究生学术新人奖、第十四届亚太信息系统年会（PACIS 2010）博士生论坛最佳论文奖、上海市高等学校优秀毕业生以及复旦大学和南京大学的奖学金和优秀学生奖。目前正在主持江苏省研究生科研创新课题一项，并重点参与了国家社科重点项目、江苏省高校哲学社科重点项目以及教育部人文社科规划项目等多项国家和省部级课题。

陈婧

《浅谈社交购物站点的社交体验设计》p 60

新加坡国立大学信息系统专业博士研究生。目前的主要研究兴趣为社交媒体环境中的电子商务。本科毕业于南京大学商学院电子商务专业。

132

主办:

淘宝UED

编委会:

碳酸饮料会.组委会

所在地:

杭州.西湖区

文字编辑:

晓荷（何立）

美术主编:

王三（崔磊）

运营总监:

钱树（章希春）

艺术指导:

三通（毕志卫）

封面设计:

王三（崔磊）

排版设计:

王三（崔磊）无酬（任爱松）

文字校对:

全体碳酸志作者

特约供稿:

张苹陶嵘蒋镇辉赵宇翔陈婧吕雪峰杨朔

淘宝UED: ued.taobao.com 碳酸饮料会豆瓣小站: site.douban.com/108454/ Slideshare: www.slideshare.net/tansuan 组委会邮箱: wuchou@taobao.com

真正的思想者从未停止思考真正的理想主义者从不吝于分享我们期待你不一样的思想和声音…… 分享交流联系： wuchou@taobao.com