当然，也不应该否定，赚钱从而成为好友中佼佼者，这对用户也是很大的驱动。或者可以说，人之间的互动和赚钱取得的成就感这两者都是用户追求的目标吧。

那我们就来说说这个人之间互动的事情。

我们设计一个游戏就是应该想办法去让用户更好的完成目标。让用户更好的去偷别人的菜，同时保卫自己的菜。这里说的“更好”并不单纯指更容易偷到和更不容易被偷。既然互动本身是目标，那么让偷与被偷更好玩才是最根本的目标。

如何让用户更好的完成目标？我们可以从一个实际的案例中得到些经验。

实际上这里例子大家也许都知道，最初农场里是没有标注哪些好友的哪些地块是可以偷的，后来添加了这个功能，反响一片良好。

从这个例子中我们可以看到，标注出哪些是可以偷的，方便了用户的操作。之前猜测的点击绝大部分操作都是无功而返的。由于缺少这些必要的信息而带来了大量的无效操作，这些操作本身并不能带来探索的乐趣，不仅如此，大量无效的操作反而阻碍了用户去完成目标：偷别人的菜。我们对这个产品的设计就是在让用户更好的完成目标，那么，这个阻碍用户完成目标的缺陷当然应该干掉。

我们再来设想一个极端的设计。如果我们设计一个功能让用户可以点击一个按钮就把好友中所有可偷到的菜一网打尽… 是的，这样的功能显然不行，因为它使得人之间的互动索然无味了。或者干脆说，没有互动了。这么做影响了用户完成目标，嗯，是干掉了用户的目标，这当然就错了。

从上面的分析，我们可以看到，确定用户目标，然后为用户的目标去设计，让用户能更好的完成目标，这是我们产品设计的实质，也是我们取舍一个功能的标准。

如果说“让用户能更好的完成人之间的互动”是我们工作的实质，那么我们可以再发散一下，或许让把农场中的留言与偷菜操作更紧密的结合是一个好的思路，因为这能让人之间的互动更有趣。让主人无需点击打开多个窗口，互相比对，而是一目了然的看到：一个好友来偷走了3个南瓜，还留下一句话：“嚯嚯~ 你家狗狗没咬到我~”

在上面的文字中，我一直很严谨的使用了一个概念：目标。这并不是一个随手打出来的词，它与我们平时所说的“用户需求”并不是一回事。“目标”这个概念源于交互设计的鼻祖alan cooper，什么是“用户目标”呢？我试着解释一下：

八百年前，梁山好汉李逵要回家探母，他带上盘缠，走路下山，坐船出水泊，向家走去，一路上吃饭、住店…最终到家，探望到了母亲。
八百年后，深圳的李钊要回家探母，他网上订机票，打车到机场，坐飞机，下飞机坐大巴… 最终到家，探望到了母亲。
这两段故事中相同的部分：回家探母，这相同的部分就是“目标”。目标是用户根本的诉求。
这两段故事中不同的部分：主人公为了探母而做的一系列事情。这不同就是“任务”，任务是用户为了完成目标而不得不做的一些列操作。
完成任务并不是用户想要的，只要能实现目标，任务约简单越好。

通过这组故事我们区别了“目标”与“任务”，我们平时所说的“用户需求”则是更不可靠的概念，有时是指用户任务，有时也是用户目标，有时干脆只是用户的一句抱怨。

在农场例子中，我们之所以能判断哪些功能是好的，哪些是坏的，甚至做出了一些未来方向的构想，都是源于我们首先分析出了用户目标。

源于用户目标的实例还有很多，比如：“一键登录”功能。如同李钊是要回家探母，而不是要做大巴一样，用户来是为了查看一条好友的赠送记录（或者其他什么），而不是要来输入账号、密码、验证码，所以，登录繁琐的操作，能省则省。简化为一键登录让用户更高效的完成了目标，这当然就是好的了。

很遗憾，我在这里没法给出几条放之四海而皆准的分析用户目标的准则来，但至少希望“从用户目标出发”的思路能多少引起您的一点儿思考。从上面的几个例子中，或许您也能找到一些分析自己产品用户目标的线索。

导演也并没打算让“有人即将出现”这个信息当做一个必须要传达的信息，100%的传达给观众。并并不是所有的观众在看这一段的时候都会主动的去想。当然不去想也不等于就没能欣赏到这部电影。一位观众虽然没有主动去预测，但是，当主人公出现在门口时，这位观众却很可能会觉得影片很自然，叙事很流畅。看完整部电影后，这位观众可能会说：“导演很会讲故事。”即便他在刚才那个瞬间并没有主动的去预测。
这位观众认知到了那个门口的镜头了吗？如果那个镜头对他完全没产生任何作用，那他也不会有后面的正面评价。如果说这位观众理解了，显然也不对。
那么，我们姑且把这种情况称为“部分认知”吧。

我们再假设，另外一位观众，看到这个镜头的时候与上面这位观众的情况类似，但对那个的感触稍微多些，以至于看完影片后对这部电影大加赞赏，认为导演非常棒，自己非常喜欢，但是似乎也说不出什么具体的来，不能很学术的分析出其中的好到底是什么。
第二位观众和第一位观众都是“部分认知”，但程度还不同。是的，“部分理解”是个区间，而不是一个值，完全没认知至完全认知之间都可以称为“部分认知”。所以，理解是个程度的变量，并非只有yes 或 no两个值，它不是二进制的。

上面这种电影手法的另外一个应用是电影《孔雀》中也有，在一场车间之前，先是在屋里看到的一扇门，空荡荡的门，门外白花花一片什么也看不到，门内黑乎乎一团什么也看不清，整个画面很不好看，基本上是中间一块白，四周一圈黑。然后，一个人出现在了门前…

实际上，《阳光灿烂的日子》的摄影指导就是影片《孔雀》的导演。也就是前一阵子出了“车震事件”的那位顾长卫大师。好吧，这里不说社会新闻了，继续说电影…

这个画面来自电影电视《兄弟连》第九集开头，开头就是一个2分15秒的一个长镜头。你是否意识到了，是马车将我们的视线从搬运转头的老人带到了废墟上搬运家具的人们身上？实际上整个2分15秒的长镜头一直在运用这样的手法让观众环视了整个广场：两位MP大兵，抱着转头的老人，马车，断腿儿的桌子，两人抱着地毯，餐椅，最后将观众的视线带到了二楼上E连的5位士兵。
观众也许并没很明确的意识到导演是在运用这些人和物品在穿针引线，但是没关系，只要能感受到自己很流畅的环视了整个广场就够了。

电影《辛德勒的名单》是部线索很多的鸿篇巨制，其中大量运用了上面提到的这种电影手法，使得通篇可以不断的在多个情节线索内跳转。

在运用这个电影手法的时候，导演恐怕还真不希望观众完全认知了，观众们都庖丁解牛般的完全看清了这些手法，电影反而不那么好看了。

很抱歉的通知您，一直说到这里，我才意识到，我原本是希望通过电影说交互设计的。

你猜，我打算根据上面电影这些事儿分享出啥交互设计上的问题？
“设计时也可以通过暗示，引导用户接收下一步即将出现的信息。”是这个？
不是。真的不是，完全不开玩笑的说，确实不是要说这个。
我要说的是：用户对一个网站，一个网页同样存在“部分认知”的情况。用户并不见得完全搞清楚了设计师的设计理念，设计思路。

QQ秀商城中，84*84px的图片是一个个item，点击后会穿在左侧的试装预览图上。假如在某一个页面上，一些84*84px的图，点击之后不是不是试装，而是其他什么反应。恐怕不会有几位用户立刻能明确的意识到出问题了。甚至，在上千万的QQ秀用户中不会有几位能很主动的意识到“点84图是试装”这样的规律。但是，对于整个QQ秀这个产品来看，让用户形成“点84图是试装”这样的印象是有价值的。大多数用户对这个设计是“部分认知”，如果局部地区不一致，更有可能的结果是，用户对这个糟糕设计的“部分认知”累加起来，最后形成个整体印象：QQ秀商城这个网站挺不好用的。但并不能说出些什么具体的问题。这是因为，用户实际的使用时，通常都是部分认知。部分认知现象是实际情况，是我们应该接受的。

电影手法并不是要观众完全透彻的认知；设计也不是非得要用户完全看懂才有价值。页面表现上为了保持整个网站的一致性而做的牺牲，为建立清晰的网站信息构架而花费的大量精力，这些设计是不是有必要？是的，这样做是对的，是有必要的，并不见得要用户完全能认知才需要去做。

“用户真能意识到这个吗？如果不能，我们何必要费劲儿的做这样的设计呢？”用这样的标准来取舍一个设计是不对的。认知是一个区间的变量，在0%-100%之间存在着无数的认知度。判断一个设计的标准应该是：看它是否能有助于更好的传达信息，从而让用户更高效的完成既定的用户目标。

蒸汽时代，因为发明了蒸汽机，随之产生了一大堆的现代工业产品，纺织机，火车头…

现代主义设计，因为有了相对成熟的工业加工技术，可以大批量制作钢管，织物，混凝土预制件，玻璃幕墙。设计师们应用这些技术成果设计出了现代主义的建筑、家具。

web2.0，诚然，有那么多所谓的互联网思想家宣称web2.0是一个互联网的社会行为，是互联网用户需要更为社会化的交流促成了web2.0，但是如果没有开放的API，没有表现与内容分离的页面代码，没有ajax，怎么2.0?
我们也可以从技术为出发点来分析web2.0：技术上的创新，使得某一个主题可以被引用到不同的页面中；使得一个第三方公司可以基于某一个网站的开放平台制作自己的app；给每一位注册用户在网站中一块自己的空间…产品的设计师们研究这些功能，将这些功能设计成产品，在网站中给每位用户留出一个单独的空间，让用户在属于自己的空间中订阅感兴趣的主题，在个人的空间中使用用户选中的第三方功能插件。让用户使用这个网站实现社会化的交流、沟通。

当然人的创造性思维才是不断创新的本质动力，然而，技术是现实的要求。能创造出什么，必须受限于当前技术所能达到的水平。

既然设计需要以技术为依托，那么，与其被动的接受技术的局限，不如主动的去接受，利用技术上的局限和特点。目前，关注可用性的交互设计，注重视觉效果的GUI都是这样的。好的设计思路应当是：在目前的技术可实现条件下，尽可能的应用、利用技术手段，很好的信息传达。而不是，凭空想象一个最完美、最理想的方案，然后略带鄙夷的摇头长叹技术实现有困难，不得不退而求其次，最终认为是因为程序员水平有限而葬送了自己的伟大设计。
一个没能充分考虑可实现性的设计方案本身就是不够好的。

（本文首发于内刊“交互设计组月报”第十二期。）

只有这样的共识，还不够。因为我们会遇到这样的情况：我希望把这段文字设计成蓝色，这会更有感觉、更舒服。但是，使用蓝色可能会让用户迷惑，因为这段文字没有链接，且这个页面中，有链接的文字都是蓝色。“更美丽的信息传达也是设计的目标啊~”

所以，要让设计的目标能更有效的指导设计工作，我们还需要再做些什么—进一步规范“更好的”各项具体要求。

更高效的是基本要求，是需要首先被落实的。“更优雅的、更美丽的”则是更高的要求。这类似与“温饱”与“小康”的关系。

为什么这么说呢？
1. 用户是来使用产品的，而不是来欣赏的，即使是apple.com也是同样的。要欣赏就去美术馆了，十几英寸的显示器上能欣赏出啥来呢？
2. 视觉设计中很多涉及功能的视觉表现本来就应该以科学、社会学、心理学为基础，而不是凭空的、随意的“创造”。比如，绿色普遍被理解为“可行的”“允许的”“正确的”，那么，页面出错的信息用绿色背景就是不好的，甚至可以说是错的。

“更高效”是个无条件的要求。不应为了实现其他设计目标而受到损失。

如何保证“更高效”？
保证“更高效”，是不是保留页面原型中的所有信息不变就可以了？不是。不说也知道，如果要是的话，显然就不用在这里特意说了。那，为什么不是？

视觉设计中有这样两类工作：
1. 渲染气氛，表现视觉风格。通过内容单元框的形状、颜色，文字颜色，背景色，背景图形…表现出特定的视觉风格，渲染气氛，让用户在浏览网页的时候感受到或温馨、或可信、或可爱…
2. 用图形元素直接或者辅助传达信息。比如：图标的设计，按钮样式的设计，重点信息的图形展示…

做这些工作，不随意删改页面原型中的内容，只是基本的要求。渲染气氛的过程中干扰了正文信息的显示是不对的；使用图形元素达意不恰当也是不对的，不需要传达信息的地方用图标来装饰更是不对的。
在视觉设计过程中保证信息传达的高效水平不被降低甚至是能更高，这是项难度很大的工作。
之前我曾经给了个简单的结论“视觉表现元素不应带有信息量”，这是一个可以直接执行的结论，是设计目标的产生出来的一个具体要求。也就是说，如果你不愿意去理解设计的目标，更高效、更美丽谁在先，谁在后，如果是，那么，你只直接执行“视觉表现元素不应带有信息量”这个结论就行了。
这样看来，从设计的目标中还能产生出更多的类似“视觉表现元素不应…”结论。我还没想到，想到再说吧。

（本文首发于内刊“交互设计组月报”第十二期。）

我们都试图去理解自己所身处的世界，是吗？

为什么要去理解？因为我们希望在这个世界中更好的生活。这是积极的，如果不，那大概就得想着怎么自杀了。试图去弄明白，这是人们有意无意间都在做的，也许有时候你没意识到，但是你确实是在不断的去了解，学习。

“为什么后面的几张菜单比前面的矮些呢？”在味千拉面餐桌上有一个小盒子，可以用作插新菜宣传单。靠近她的那么卡片比较高，远离她，她一眼看不到的那面的纸片比较矮。她转过盒子，“哦，短的是餐巾纸。”

这是IKEA的导航图，你会关注上面的哪些信息？“您当前的位置”也就是图中的橙色原点是一定会看的，是吗？通过这个橙色的点，虚拟的地图和顾客真实的位置产生了联系，顾客清楚了自己当前在这个环境中所在的位置，进而知道自己下一步该如何走了。

在一个step by step的网站流程中，用户需要知道现在是第几步了，后面还有几步。甚至是，之前已经完成几步了。这也是在了解状态。
载入页面或者动画时的loading也是类似的。

在一个网站中，状态可以分为两类：
1. 对于step by step流程，流程中的第N步；
2. 在正常的页面中，当前页面在整个导航中的位置。
这两类与现实生活中的时间与空间有些类比关系。

是这样吗？
“用户不在乎你网站的结构是什么样的，只是在看页面上的信息，按照信息的提示去点击。”是的，经常有这样的观点。

我们来假设一下，在一个现实的购物中心里，你和朋友要吃午饭了，会看到一家饭馆想也不想就进去吃吗？你要买一件衣服，会看见一件不错的，直接就买下来吗？

类似上面的问题，有些时候答案是肯定的，会直接就进去吃，会直接就买下来。但那通常并不是你最满意的处理方法。是你不想带着朋友再花半个小时寻找、对比其他饭馆了。是你不愿花费更多精力去选择更合适的衣服了。也就是说，如果可以，你不会那样做。

用户因为邮件中的一个宣传单，因为朋友的介绍，因为看到某篇枪稿的推荐，或者其他什么原因，来到了一个网站中，这个时候，他对这里的环境是陌生的，第一反应是按照最可靠的（他看的到的，看的懂的）信息去操作。这是一个不良状态，暂时的状态。当他下一次再来的时候，他会对当前的环境了解的更清楚，尽量搞清现在是在网站的什么位置，什么状态。

这个说法对吗？我们来用一个更实际的例子对比一下，当你第一次进入一个陌生的环境中，比如去一家公司上班入职的第一天，如果有人给你个表格要你填写，你会断然拒绝吗？应该不会吧。当你在这家公司工作了1，2年后，再有人要你填一个表格的时候，你就会先做判断，“这个人是做什么的？”“他为什么要我填这个表格？”“填这个表格是我该做的事情吗？”这些判定是需要的，是有价值的，能做这些判断来自与你对这个公司组织框架的了解，能清楚这个公司的组织框架取决于这个公司的组织框架是可以学习的。如果框架原本就是混乱的……

好的设计应该是可以理解的，不信你试试…
设计出色的web产品都是可以理解的，yahoo是个好例子，如果你还不太了解yahoo，可以做一个简单的实验：打开yahoo.com，随意浏览十分钟，然后在纸上简单的画一画整个yahoo网站的组织构架。
能画出来吗？大概就是下面这样的：

简单吧~ yahoo将所有的信息组织成一个最简单的框架，易学，易理解，易记忆。

Amzon也是个好例子，我们可以重复一下上面的方式，浏览几分钟，然后画画简单的结构图：

很简单？没啥技术含量？那你再试试开心网，先浏览上十分钟，然后试着画画，你能画出来什么来？反正我是画不出啥来。

(本文于09年4月5日首发于内部期刊—交互设计月报第十一期)

我们在设计一个产品的过程中，经常会有这样想法：“这里，可以通过教育用户来实现。”有这个想法的时候，往往是感觉到目前的设计方案还不够容易理解，可能会有用户不懂，那么，我们教育嘛~

首先，想教育用户，这个说法是不够好的。我们要以用户为中心的去设计，视用户为上帝，这都意味着要尊重用户，难道我们敬仰的上帝需要我们来教育？

当然，随着互联网上的应用越来越复杂，想要用户一看就明白，甚至不看都能猜明白并不现实。在设计中有这样一个说法—“用户的学习能力”。我们需要通过对用户的研究，或者是有把握的猜测，判断出什么是用户能学会的，什么是不能的。而不是将一切不够好设计的都寄希望于教育用户。

那么，什么是用户可以学会的呢？如果我们能罗列出一大堆设计方案模块，确定这些设计都是用户可以学会的，然后在具体产品的设计中组合使用这些模块…这当然是最理想的，但显然也是不现实的。至少我做不到。

那我们能做什么呢？心理模型是个好办法—符合用户心理模型的设计是更容易被学会的。

Apple公司努力创造的产品概念是个符合心理模型好的例子。
几年前，apple产品中最高性能的台式机命名为G系列，G3，G4，G5… 现在apple的这类台式机称为Mac pro。

以前还有一种更为平民化的产品叫iMac，现在这个iMac名称不变，而把以前的G4、G5改名为Mac pro，和iMac看齐了。另外还有其他产品—Mac mini。也就是说，所有台式机的名称都是Mac。而所有的apple笔记本都叫MacBook。这样当我想买个apple的台式机时，我就很容易作出判断：“我要买个Mac”，要买笔记本就是要买个MacBook。了解apple各个产品的时间成不缩短了。

这样的产品概念设计就要比其他笔记本厂商复杂的命名更容易理解，更容易学习。如果你对thinkpad不是很熟悉，也许你不知道T系列与R系列有啥区别，那X系列又是什么呢？

科学松鼠会是个讲科学知识的blog，其中有一篇译文《比我们想象的更奇怪》，其中提到这样的例子：一块石头中，我们通常会想象它是由很多很多非常小的石头原子紧密排列堆积而成的。而实际上，一个原子，只有原子核是实心的，原子核外面很大的空间都是空的，我们的相信是错的。
关于原子的结构，其实我们上初中、高中的时候也都学到过，但我们还是会有错误的认识，这是为什么？因为，这样的错误认识已经足够指导我们的现实生活了，甚至是更容易指导我们的现实生活。也就是说，那错误的认识，是我们的心理模型。

我大约两年半以前买过一把电推剪，是用来给自己剃头的。（是的，我的光头是我自己剃的。）

侧面是开关，向前推是关闭，向后推是开动。
我平均每两周使用一次，两年半的时间大约使用了60次。每一次使用，反复开关2-3次。这多次的使用，直到最近一次使用，我仍旧会在要关闭的时候向后推（实际上那是开动）。我的心理模型总是向前（刀头的方向）是让一个机器运转起来，有促进的意思。而向后则是撤力，类似釜底抽薪的含义，所以我总是不能适应，总是会错。当然也许会有人和我的心理模型正相反，那这个设计对于他来说就是好的了。不过，我始终相信，我的本能反应来源于人类与生俱来的一种普遍思维，不然，怎么会两年半的时间我总是错呢，难道就我笨？

最近经常去打台球，平时经常玩的是一种所谓的“美式球台”，如下图：

这种球台的一个特点：球无论调入球台上的哪个洞，都会滚到球台一端的出球口，就是图中球台下靠近我们这端的那个大盒子。这样的设计似乎是挺方便的，要捡球就到那里去捡。而实际情况呢？
我们大约是从去年11月开始比较频繁的打台球的，平均每周两次，一次玩3-5小时。总共打了…嗯…很多次。捡球的次数更是很难计数。但直到上周，我们一起打球的一位同学，仍旧在球进洞后，走向球洞去捡球。
“从那里掉下去的，当然应该从那里拣出来。” 这个球台的设计不容易让用户形成心理模型，或者说，不符合用户以往的生活经验，即使是经过长时间的训练，仍旧容易出错。

Qzone工具体中有个快速导航，从这里可以进入到当前Qzone空间的“日志、相册、个人档、留言板”。

这儿快速导航中只有这4项，是不是会产生这样的疑问：“为什么只给这4项，这个Qzone空间只有这4项？原本一个空间的导航应该有很多项的吧~” “这4项导航和空间中的导航是什么关系？”用户需要再建立另外的心理模型去理解。也可以说，这里的设计破坏了之前的用户心理模型。

对比一下google的快速导航：
我们知道，google所有的服务比较多，大概有30-40项，全展示出来能摆一屏幕。

Google阅读器是其中一个产品。在这个产品的页面中提供了一些相关的、常用的产品链接。

横向排列的6项+下拉菜单中的9项显然不是google所有的服务。下拉菜单的最下面一行还有个“更多”链接，指向上面那个“更多谷歌产品”页面。

通过上面的描述实际已经说明了google将所有产品组织成一个最简单、最好理解的组织结构：有一大堆产品，你现在在用某一个。
看到Google阅读器的快速链接模块时，虽然采用了不同的表现形式，但仍旧表达了相同的结构关系。用户形成的这个心理模型仍旧是对的。

当我们在产生打算教育用户的时候，建议大家先想想，这是不是能教育的会的设计。

而用户是不是能学会，除了心理模型的问题，还取决于用户是否愿意花更多的时间成本去学习，这个问题实际上是关于投入与受益的问题，大概可以算作经济学的问题吧，经济学方面我不在行，不然我怎么总是会没钱花呢…

应该说，贴近用户心理模型的设计，易于用户形成心理模型的设计，是让用户学习的必要条件，不够好，则不容易学会，无论用户是不是肯学。

(本文于09年3月5日首发于内部期刊—交互设计月报第十期)

原始人带骨制的项链，为的是看上去很美。在身上弄纹身，显然也不是拿自己的皮肤当记事本用。（现代人中，michael scofield是个例外。）

现代人新修缮的前门大街。这条大街的北段，基本上是依照原有建筑翻新的，可以理解为新古典主义吧。南段则是新建的房子，由于没有明确的参照，设计师可以自由发挥，这给饱学了现代主义理念的设计师提供了机会，设计了很据现代主义的房子—无装饰的，平顶，方方正正的（也许可以节约建筑成本，至少在现代主义兴起的阶段是这样考虑的）。作为一条传统商业街上的建筑，使用了与周围大杂院一致的灰色，门窗上适当使用了一些传统元素。大概应该算是后现代主义吧。

前门大街南段

前门大街北段

由南至北走过来，明显能感觉出，南段显得更为冷漠，没人气，虽然最高只有两层楼，但走在其中还是会觉得压抑。与北段相比，同样是作为商业街，南段显得缺少亲切感，没有繁华闹市的氛围。当然这差异和在营业的店铺数量也多少有些关系。（前门大街重修后，正在招商，很多铺面都还没有商家入住，北段入住率更高些。）现代主义、后现代主义对追求纯粹的视觉效果“不感冒”，这使得这类风格的建筑视觉效果上相对单调、枯燥。

google的产品是清晰、简单的，它的设计是不特意追求视觉美感的。

adobe.com网站信息传达清晰、明确，同时通过视觉设计使网站看上去科技、有品味、有现代感、有… 在保证了信息传达准确性、高效的基础上使浏览者得到更好的体验。

对美的视觉效果的追求是人本能的需要。

然而，由追求视觉美感所引发出的一些问题又使得我们不得不提出一些要求、建议、原则来限制那些不恰当的视觉设计。

以下是我们已有的一些观点：
● 避免使用纯粹装饰性的图标。

● 链接应该用蓝色，非链接不要用蓝色。

● 不要使用英文作为装饰性元素。

……

这些纷繁的观点是不是可以再概括？
可以这样概括：
为了追求视觉效果的设计过程中，不应产生新的信息。

图标不可避免的会传达信息，无论是画个小旗子还是整个小房子，都会代表特定的含义，传达了特定的信息，所以我们之前说到，不要使用装饰性的图标，要用图标就是用图标表示特定的含义，比如，“添加”使用一个加号，“关闭”使用一个叉子…

蓝色在网页上通常表示链接，这个惯例使得蓝色也传达了特定的信息。那么，文字颜色不可以滥用蓝色。

英文也是文，虽然看着不如中文明白。对于绝大多数比较年轻的中国人，多少都懂些英文，在中文标题旁边加上英文译文，翻译的不准确反而会让用户误解，即使翻译的正确也是在增大信息量，显然没必要一个标题写两边吧~
这样说来，如果用大家都看不懂的阿拉伯文之类的放在中文标题下做装饰或许倒更好些，全当是个花边儿了…

“是否传达这个信息”应该是有计划的、理性的，而不应该是在设计视觉效果的过程中high着决定的。不应该在追求视觉效果的过程中产生新信息。

（本文转载自腾讯ISD交互设计组月报第九期）

理解交互设计
交互设计是一个设计工作。
交互设计是一门技术。
交互设计在目前阶段的主要使命是提高产品可用性。
通过对界面和操作行为的设计提高产品可用性。

互联网产品的特点
1.变化快。
2.质量低。
3.功能操作与信息传达并重。
4.高速创新从而带来的无标准。

那么，互联网产品的交互设计应该怎么做？

互联网产品的交互设计方法分享
经过长期的摸索、体会腾讯互联网产品，我们总结出了几个较为有效的设计方法：
方法一. 自然语言法。设计交互细节的方法。
方法二. 结构图法。设计产品信息构架的方法。
方法三. 任务走查法。对现有产品进行优化的方法，全面普查产品，包括对交互细节和信息构架。

这三个方法的思路，是基于对交互设计工作内容如下的分类：
1. 信息构架
2. 交互细节

但，严格来说，这样的理解是不对的。交互设计工作原本就是“交互细节”工作。另外有信息构架师来解决信息构架的问题。然而，上面提到了互联网产品快的特点，更多的研发步骤显然更容易将研发周期拖的更长，把信息构架工作和交互细节合并起来，减少一个环节，更适应互联网产品的研发特点。
“为什么不把信息构架工作交给产品经理来做呢？”如果说交互设计工作的核心是表达（这个观念，最后还会提到），那么，信息构架和交互细节都是表达的重要手段。信息构架不清楚的产品，怎么谈得到表达的清楚、明确呢。所以，交互设计的工作包含了两部分：信息构架和交互细节。

那么，下面我们就开始具体介绍这三个方法：

方法一. 自然语言法

使用自然的语言来表达页面信息。
这是一个设计界面交互细节的方法。
界面表达的要求是：清晰，明确，简洁，得体。
想象着用面对面的交流来传达信息，再将面对面的传达变为书面表达，再用界面语言翻译书面表达。

除了思路，我们还需要必备的原则、常用的表达方式和具体操作步骤。

页面表达原则：
1. 更少的信息量更好。
2. 结构化更易于理解。
3. 信息的表达应该清楚、明确、直接。
4. 操作可识别。
5. 操作前，结果可预知。
6. 操作时，操作有反馈。
7. 操作后，操作可撤销。
8. 让用户知道身处何地。
9. 避免内容看上去象广告。
10. 不提供多余的功能。
11. 相同的功能，在不同的页面中应保持一致性。
12. 措辞统一。

常用的页面表达方式：
1. 从左到右，从上到下。
2. 大字更突出。
3. 图形更吸引人。
4. 动画会被误认为是广告。
5. 内容逻辑：并列关系；从属关系。
    
6.多项并列的信息用

7.不同的排序方式VS筛选内容

具体操作
第一步. 概括待表达的信息
第二步. 将概括好的信息排序
第三步. 使用界面语言翻译

实例：中信银行卡

第一步. 概括信息：
描述应该是概括的，尽可能简短。例如：
● 您选择了回邮方式办卡，概括解释这个办卡方式。
● 接下来您应该 下载申请表
● 回邮办卡的全过程是这样的…
● 一系列注意事项。

第二步. 排序：
就是上面的顺序，没有变化。
有些时候排序会遇到困难，需要借助界面语言才能准确反应表达顺序。这正是界面设计的价值，它可以胜任一些单纯适用文字表达表达不好的情况。下面的黄钻续费案例中也许你就会遇到类似的问题。遇到这种问题时，记录下排序遇到的问题即可。在翻译过程中问题可能就解决掉了。

第三步. 翻译：

与之前界面对比：
● 开头几句信息顺序需要整理，使上下文关系更清晰。
● 对过程的描述可简化。
● “说明”应更结构化。

这里所说的“与对比界面之前”只是因为之前的需求文档中有相对具象的页面原型，而这并不意味着这里的工作是“优化页面原型”。需求的传达总会有一定的形式，也许是简单的页面原型，也许是一份需求文档。甚至可以更简单。有时相对具象化的信息记录或之前的页面反而会是干扰设计者以明确的思路来设计，尤其需要小心。

我们有了一种成型的方法，但这并不意味着我们设计出的页面就只有一个样子了。实际上不同的设计者使用这个方法会设计出不同的页面。下面这是另外一位设计师给出的思路，或许这是更好的方案：
1. 您选择了回邮方式办卡，概括解释这个办卡方式。
2. 第一步. 下载、填写申请表并回邮给中信
3. 第二步……………………..
4. 第四步……………………..
这样的信息概括和排序页面表现将是什么样子？你可以自己试着画画~~

练习：QQ空间黄钻催费页面

说明：
黄钻贵族是QQ空间中的VIP用户，黄钻贵族用户可以免费适用空间中的装扮，另外还可以享受到日志信纸、超大容量相册等诸多特权。
当用户的黄钻贵族身份即将到期的时候，从QQ聊天主面板上的“我的钱包”提示：“钱包”闪动，点击后用一个490*300px的小窗口告知用户续费的详情。
左侧图片在实际页面中是一个flash动画，若干张图片切换，显示黄钻用户可以装扮出的更好的空间效果。
右侧的续费方式希望在所有的续费方式中选择出两、三种比较常用的方式，直接显示出来（就是现在页面上的“家庭、网吧”两种方式），方便用户。同时提供“支付中心”链接（http://paycenter.qq.com/cgi-bin/showopenservice.cgi?service_type=home），让用户可以在全部续费方式中选择。

请使用上面介绍的自然语言法重新设计这个界面，让信息表达的更高效、清晰、明确。

参考方案
需要表达的信息：
● 某某某，您的黄钻要过期了。
● 黄钻贵族很棒滴~~
● 现在续费黄钻还有额外的优惠。
● 续费方式…

更好的信息：
● 某某某，您的黄钻要过期了。
● 您要是不再是黄钻了，就有XXXXX损失啦~~
● 现在续费黄钻还有额外的优惠。
● 续费方式…

总结“自然语言法”
自然语言法的基本思路是把界面表达转化为自然的人与人交流。人与人的交流是我们每天都会发生的，相对更容易，这个技能也更容易提高。
这里涉及到的两个例子都是比较偏向于信息表达的，对于操作较多的界面，这个方法仍旧适用。

方法二. 结构图法

这个方法的思路：抛开页面细节只考虑信息的组织形式。抛开页面细节，是的，就是上面讨论的那些具体的页面细节，只考虑信息的整体构架，而页面的细节留在确定了信息构架之后，用自然语言法来解决。

信息构架的原则：
1. 一个页面一个主要内容。
2. 个人信息&公共信息。
3. 网页基本内容有两种：列表和文档
4. 更少的信息更好
5. 一个用户自己生成内容的document页，有两个状态：浏览状态&编辑状态。
6. 信息树应该尽量窄而浅，并且尽量保持平衡。
7. 与现实生活经验相符
 ● 页面在网站中需要有一个固定的位置。
 ● 同等级的内容应表现成并列的样子。
     ……

信息构架的常见模型：
1. 列表+详情页+列表聚合页
2. Wizard模式。第一步->第二步->第三步…
3. 主页+若干个“临时”页面。例如：google帐户

具体操作
第一步. 明确描述全部内容。总结归纳产品所需要表达的所有信息。
第二步. 画树状图。
第三步. 用纸画各页草图。草图中需要包含的关键元素：页面标题、导航、重要的链接和按钮。
第四步. 模拟演示网页操作行为。

实例：黄钻等级



第一步. 总结归纳内容：
● 用户个人的的黄钻等级信息
● 等级介绍
● 黄钻功能特权介绍
● 黄钻贵族可免费领取的道具
● 黄钻活动

第二步. 树状图：
如果单纯的按照上面概括的信息罗列，则可以规划出一个黄钻贵族的网站，树状图如下：

然而，信息构架的设计往往要建立在对现有产品深刻的理解基础上。


Qzone的现状：一个社区，成千上万个个人空间。如何在现有的基础上设计新的黄钻等级？
我们的方案是这样的：

第三步. 草图：

这里需要强调：纸原型中应包括页面标题、模块的标题、导航、重要的链接和按钮，而不只是页面最顶端的导航。有了重要的链接和按钮才能清楚的演示出各个页面之间跳转的关系。

最后，第四步. 手握原型，演示页面间的跳转，确保整个流程的顺畅。

练习：QQ空间日志、心情、私密记事本

参考方案
总结归纳内容：
1. 日志
2. 心情
3. 私密记事本

树状图：
方案一：
● 主页
● “大日志”
    ■ 日志
    ■ 心情
    ■ 私密记事本
● 音乐盒
● 留言板
● 相册
……

方案二：
● 主页
● 日志
● 心情
● 私密记事本
● 音乐盒
● 留言板
● 相册
…

根据上面两种不同的树状图方案，接下来的页面草图也会是不同的，你可是试着画画…

方法三. 任务走查法

这是一种优化现有产品的方法。成本低，见效快。对产品整体上影响小。

以用户任务为线索，以可用性准则为依据。是的，这个说话很好记，类似“以事实为依据，以法律为准绳。”
“用户任务”是指用户实际使用这个产品时需要完成的任务。这个方法中，需要操作者依据主观判断制定用户任务，而不是通过用户研究。这虽然有可能造成更大的误差，但同时节约了时间成本。实际工作中，参与这个产品设计的同学坐在一起讨论一下，通常是可以比较准确的描述出用户任务的。
“可用性准则”在这个方法中是指：页面表达原则、信息构架原则、视觉表现规范，这三部分。页面表达原则和信息构架原则就是前面提到的，视觉表现规范是专门针对视觉设计而制定的。这个方法要处理的问题是现有产品，因此，不同于产品原型，更多了视觉表现这一环，在视觉设计过程中出现的问题也应该在走查中一起发现。

视觉表现规范
1. 滚动条看上去应该象滚动条
2. 表单的对齐方式
3. 重要的内容显示在第一屏
4. 导航应出现在第一屏上半部分
5. 尽量避免使用装饰性的图标
6. 避免内容看上去象广告
7. 光标样式
8. Tab需要有三种状态而不是两种
9. 红色表示警示，绿色表示ok，黄色表示提示
10. 灰色通常表示“暂不可用”（disabled）

具体操作
第一步. 分析并总结所有任务
第二步. 根据任务进行评估

评估中需要注意：
1. 不影响任务的问题不记录
2. 被记录的缺陷是有根据的（根据可用性准则），而不是根据自己的感觉。

实例：QQ秀快速换装

第一步. 任务列表：
● 换一套新形象
● 换表情
● 换心情
● 随便逛逛
● 换一个自己以前的形象

第二步. 评估。以“换心情”任务为例：

问题1 副标题表意不明确
描述：

这句说明仍旧没能说明“这里是什么功能”。如果能通过这句话说明：“在这里添加文字内容，显露您的心情”，说明的效果会更好。至于“让好友都知道！”这几个字几乎是没有用的，没有传达任何信息量。
依据：页面表达原则：信息的表达应该清楚、明确、直接。

问题2 “请输入心情秀”表意不明
描述：

“请输入心情秀文字”其实是第二层要表达的信息，第一层应该是：“这里还没有输入文字”。没有第一句，直接是第二句，需要用户花些时间来推断，推断出，这里显示“请输入心情秀文字”是因为自己没有写文字进去。
依据：页面表达原则：信息的表达应该清楚、明确、直接。

问题3 拖动心情秀时，光标使用不正确
描述：

光标在框中的是link的手型，实际上应该是十字箭头。现在会被误解为有点击操作。
依据：视觉表现规范：光标

问题4 “心情秀”概念不清
描述：

“心情秀预览”暗示出，“心情秀”是指外框+文字内容。
“换心情秀”功能只是换框，这意味着“心情秀”是指外框。
措辞上的含混使得同一个名词出现两种不同的定义，不易于理解。“既然心情秀是指外框+文字内容，那么当我点击“下一个”后，其中的文字内容是不是也会变化？”
依据：页面表达原则：措辞统一

问题5 换心情秀外框操作不便
描述：

“上一个”“下一个”的操作不方便。无预览图，无法确定当前选项在全部“框”的列表中所处位置。
依据：页面表达原则：操作结果不可预知

问题6 “预览”按钮视觉效果不佳
描述：

预览按钮视觉样式比较象disabled
依据：灰色通常表示“暂不可用”（disabled）

问题7 “脱掉”按钮不易找到
描述：

“脱掉”按钮在框的有下角，很多时候看不到，并且文字超小。
依据：页面表达原则：信息的表达应该清楚、明确、直接。

练习1：QQ秀照相馆

练习2：Qzone滔滔心情

总结任务走查法：
为什么要强调是“按任务”。因为，类似“保存形象按钮太难看啦~~”之类的问题是不应该提出来的。因为用户在实际使用的时候，这个问题是远远不如“误以为预览按钮不能点击”重要。“按任务”是在确保评估更接近真实。

“按任务”很多时候与“按栏目”差不多的，但是按任务的优点在于：
1. cover到了各个栏目之间跳转可能出现的问题。
2. 抓住了重点的问题，而放过了无关紧要的问题。比如：“申请红钻”按钮。

总结任务的过程实际是简化了的“人物角色-情景描述-任务分解”方法。

最后最后的总结

从狭义的交互设计的定义来看，交互设计的主要任务是：表达。通过清晰、准确、简洁的表达进而实现人机交互。
互联网产品的交互设计应该怎么做的问题，就演化成了：互联网产品应该如何去表达。
以上方法都紧紧围绕着“什么样的方法才能让产品的表达更有效”这个核心展开。

那么，
let’s talk
let’s talk
let’s talk
……

( 注：本文是UPA user friendy 2008中由我主持的一个同名工作坊的讲稿。
另附PPT文档：互联网产品的交互设计方法.ppt )

传统的博客服务提供商（Blog Service Provider，简称BSP），比如：Qzone、新浪博客、网易博客…他们提供的博客服务，不仅仅是为每一位注册用户提供了一个属于自己的blog空间，还有用于bloger间彼此交流的平台。也就是说，信息构架是：个人空间+社区平台。

“个人空间+社区平台”是什么样子的？
一个个的blog彼此独立存在，再由一个社区平台将这些blog聚合一起，通过内容聚合在一起。

左上角的第一个表示主人态，主人可以看到BSP提供的所有服务，其中的B、D、E是他自己已经使用了的。
而下面一个个的是其他人的blog，其他人的blog包含的内容各不相同，有的用了相册，有的用了日志，有的用了视频…目前多数的BSP都是简单的把ABCDEF都简单的呈现给客人，不管主人用不用。
图中右半部分是社区平台，以内容为维度，展示内容，进而展示用户。比如，A代表日志，社区平台上会有个日志栏目，其中展示出很多有意思的日志，要看这篇日志，就到达另外一个人的blog了。交流实现了，所谓平台，价值也就在于此。

Blog原本就是一个个独立的，有了BSP提供blog服务后，才出现了社区平台，让用户能更方便的找到其他人。不仅仅是自己写给别人看，更可以用方便的找到志同道合的人，让众多bloger形成一个社区。

这样的结构有好处：
1.结构清晰。这结构我一说，你就明白了。估计我不说，你也能明白。
2.扩建容易。这是针对BSP来说的。要添加一项新的服务，可以分成两个步骤来进行，在个人blog中提供功能是一步，在社区平台上提供交流是另外一步，如果开发资源有限，可以不必同时做。比如，要提供一个视频服务，可以先在个人空间中提供给每个用户上传、展示视频的功能，暂时社区平台上没有视频方面的聚合内容也没关系，等有精力了再做不迟。

这种“个人+社区平台”模式的缺点：
各个blog之间的沟通比较困难。每个blog都属于个人，要从一个blog进入另外一个blog有两条路：
1. 通过blog中的好友、留言作者名称。我在一个blog中留了言，阅读到这个留言的人就可以通过这个留言的作者名进入我的blog。
2. 页面最上面的类似“进入社区平台”的链接。
这两个渠道的能量都很有限。空间中的好友是主人自己添加的。这个空间主人要是人缘差，没好友，没人留言，那第一条路就没了。“进入社区平台”链接只是个链接，点之前啥都看不到，我干嘛要去点？点了能有啥有意思的？

上面说的这种是传统BSP的信息构架。搞清楚了这个我们再来看另外一种比较新鲜的构架—facebook、myspace…的构架。

facebook的构架和“个人+社区平台”有个显著区别：主人信息是打散到社区平台的各个栏目中，因为这个区别，我在这里姑且给这种构架起个名字—“一体式”。

来看看“一体式”的结构：

既然主人页面中有个“日志”，社区平台也有个“日志”，那就合并成一个好啦。“我自己”就没啦，全部的构架就只剩下一个按内容分类的结构了。因为主人的信息是打散到各个ABCD…栏目中，这就需要给主人一个自己有关所有自己的聚合页面—主人的首页。方便用户查看所有与自己有关的所有信息：

真是页面是这样的：

打开网站中的一个栏目，比如，打开C，会显示为：

真实的网页是这样的：

进入到某一个人的空间中，别人的这个空间也不再是一个独立的小网站了，而是只用右侧来显示某个人的信息。左侧的内容分类导航则固定不变：

真实的网页是这样的：

这种信息构架的好处：
优点一.我自己的信息和别人的信息联系的十分紧密，当我查看我的相册时，直接就看到了其他人相册的一些信息。要了解其他人不再需要跳到单独的社区平台上了。这显然增进了互相的交流，所以在类似facebook这样的网站交友更容易。

优点二.提供了专门给主人的主页，于是可以提供更多专门给主人看的信息：谁最近又上传了照片啦，谁要加我为好友啦，谁又和谁成为好友啦…东家长西家短，可以向主人唠叨很多八卦。这些信息显然也有助于用户之间的沟通。

“一体化”模式的缺点：
缺点一.展示其他人的空间信息变得很受局限。
只有右侧栏可以显示当前空间的内容。当前空间（某个客人空间）的信息不能再做页签式的导航了。也就是说，不能显示成下面这样：

因为在左侧已经出现一套ABCDEF了，再在右侧出现当前空间主人的ACD，就混了，“要看这个人的A栏目内容，到底要点哪个A？”
关于这个主人的信息有很多很多，又不能用页签式的导航，要展现这么多信息自然吃力。当前主人的空间的二级栏目就只能加个“返回首页”的链接了，象下面这样：

这种“返回首页”类型的导航没有明确的展示出当前页面在网站中的位置，用的多了，看着就比较晕了。

缺点二.给主人自己的导航比较混乱。
上面提到需要给主人一个首页，用于显示所有和他相关的信息。除此以外，主人还需要知道别人看自己会是个什么样子。Facebook就给这两个页面分别起名叫：home 和 profile ：

看到的效果就是我有两个主页，一个是给我自己用的，另外一个是别人看到的样子。也就是，主人模式首页和客人模式首页。

主人模式或客人模式又有很多共同的功效，比如：有好友在我的相册里写了一条评论，我可以在 home页中查看到，点击后进入相册：

也可以在profile中主动点击进入相册发现这条新评论：

这两个主页再加上上面提到的“返回首页链接而不页签”，实在就是够乱的了。在这里面转经常感觉像是在酒吧中灌下若干喜力后找洗手间的情形：东撞西撞的一眼看到了“洗手间”的牌子走进去就对了。下次再去还是不知道洗手间在什么地方。

对比两类构架：
对比两类比较典型SNS的信息构架模式，可以看出，第一种“个人空间+社区平台”模式，结构简单，但交流不畅。在越来越强调用户间互动的大潮下，这样的结构显得心有余而力不足。第二种 “一体化”模式，个人信息与公共信息浑然一体，在用户交流方法提供了更多的引导，但也是因为这个“浑然一体”，使得导航起来比较痛苦，结构看上去混乱，用起来迷糊。我相信，即便是除去英文这个语言因素，也没有谁敢说自己一上来就能很顺手的使用这个网站，总是得要学一阵子，还不见得能学明白。

这个的观念可以用下面的例子来解释：

一个软件公司要设计一款专门供财务人员使用的软件，产品的设计者会有很多想法，想象着用户会要XXX功能，如何如何的功能归类会很方便用户使用… 但是通过实际调查发现，真正的用户—财务人员，想要的原来根本不是这些，他们更需要的是快速的完成任务，让自己显得不那么笨（能顺利的操作此款软件）…

要想单纯的通过主观判断就能做出真正的财务人员满意的软件，需要设计者能按照财务人员的方式来使用这个软件。如果你真能按照一位财务人员那样来使用这个软件，那…那你基本上就得改行了，显然，同时作为一位合格的财务人员和一位交互设计师是不太现实的。

这个例子说明，产品的研发者不是产品的用户，要设计出好的产品，需要进行科学严谨的用户研究，于是才出现了“人物角色”、“情景描述”等等方法用于避免出现类似上面的错误。

我参与的一些项目中会有这样的情况：有些参与者会说：“用户需要…”,“这是有用户需求的…”这样的说法很多时候会被交互设计师之类的有UCD思想的同学质疑，我就是这些同学中的一个。我的质疑通常是：“为什么用户需要XXX？”“你怎么知道的？”“谁是用户？”… 这些质疑是本着UCD的思想，更是寻着上面具体例子思路的。这几个问题一出，对方基本上就哑火了。能有这样的质疑与哑火，双方都是建立在这样的基础上的：设计者不是产品的用户。

然而这种疑似把自己主观意见当作用户意见的情况却总是出现。害得我不得不总是重复上面这几句质疑。为什么会总是出现，又总是被质疑，被质疑后又总是哑火？仅仅是因为这些同学缺乏基本的UCD常识？不懂得“产品设计者不是用户”这个基本观念？另外一种可能的原因是：把自己当用户一种尚未被充分认识到的正确思路。或许我们也应该来质疑一下“产品设计者不是用户”这个观念。

来看看具体情况：我所从事的工作都是互联网产品的设计。互联网产品通常是针对最广泛的互联网用户的。这不是否定“一个产品为一类特定用户服务”的观点，而是在强调互联网产品没有专业鸿沟。一个网络相册，是对一类特定用户服务的，想用网络来储存、分享照片的人嘛。你是想上网查天气预报的，是用不着网络相册的。但是，网络相册却是谁都可以用的，不象上面提到的财务软件，就是给财务人员用的，有专业门槛，有特定工作需要的门槛。网络相册是给普通老百姓用的。

说清楚了这个区别，问题也就解决了。对于网络相册这个产品，任何上网的人都可能会成为它的用户，这个产品也应该为所有想用网络相册的人服务。那么，我是设计网络相册的设计师（或产品经理），我为什么不能用？只要我不是本着测试产品的目的，不是想着商业目标来用的，准确点儿说，我就是象一个正常的用户那样用的，经常会来上传新的照片，期待着看到网友对照片的评论，有时还会把照片引用到其他地方，比如：日志中，视频中。如果我是这样在用的，那我就是一个用户，用户会遇到的问题我也会遇到，我的需求为什么不是真正的需求？

产品设计者作为用户，会有这样几个好处：
一．自己成为用户，为自己设计，想法会更多，设计起来会更主动。如同给自己买衣服会比给别人参谋更上心一样。
二．可以减少一些用户研究工作。互联网行业开发周期短、更新频率高，软件公司中的流程很难直接应用，想必应该有不少同学有体会。自己是用户，研究自己，比起打电话约用户，当面访谈、测试，之后总结要快的多了。而且可以避免沟通中的误解、分析用户意见时的误差。
（应该还有其他的好处，暂时没想到。）

交互设计在软件行业相对成熟些，在这个背景下形成了很多的观念、理论，“产品设计者不是用户”就是其中之一。交互设计在其他领域相对更加稚嫩，比如互联网行业，这个时候，拿来主义就比较多，以至于缺少必要的分析、理解，简单、被动的拿来就用。

在本文最后的最后，不得不再次强调一下观点：对于没有专业鸿沟的互联网产品，产品的设计者可以是自己产品的用户，象处理用户意见那样处理自己的想法，但必不可少的前提是：在作为用户使用产品的过程中必须放弃掉作为一个研发者的身份，否则将是产品设计观念的倒退。

面对这两个情况，恐怕大多数人都不会嫌麻烦，反而应该觉得服务的太周到了。能得到这样的服务，想必是有位贤惠的老婆吧。

然而，就是这样的服务，在另外的条件下，却有着出人意料的结果。

不久前，去某个酒店参加了一次培训，早餐、午餐都是自助餐。早餐中就有刚才提到的吐司，旁边放着吐司机，和各种各样其他的食物放在一起。在整个培训的三天中，我所观察的时间段内，没有一位客人去碰它。午餐的时候，有上面提到的咖啡壶，同样是和各种各样其他的饮料、食物放在一起，同样是没有人问津。

为什么没人问津？因为其他的食物相对更“易得到”。吐司的旁边有小馒头、炒河粉、奶黄包…咖啡壶旁边有橙汁、酸梅汤，还有各种广东靓汤。这些食物都更加容易得到。操作吐司机恐怕还得学习一阵子，必定多数人家里没有这玩意儿。倒咖啡还要自己调配，适量的奶和糖，如果嫌麻烦，只倒上一杯纯咖啡，对于多数中国人来讲，那基本上就等于自己给自己找罪受了。

相对的不易用，使得吐司和咖啡无人问津。

我们来看一个网页上的例子：

搜索器和热门搜索关键词放在一起。这里的四个热门关键词会有很高的点击量，但如果拿这四个词的搜索量与用户在输入框中输入的关键词相比来判断哪个词更热门，显然就不准确了。实际上在搜索器旁边放上这些热门关键词一定程度上也会搜索器的使用量。因为摆出来的热门关键词更加“易得到”，或者说，点击热门关键词的操作成本更低。

在一个界面中，某个功能是否够易用，不仅仅取决于功能设计的本身，也与它所在的页面中其他功能的易用性有关。当其他功能操作成本更低时，相对操作成本更高的功能使用量会降低。

由这个结论我们还可以推导出更多的结论：
● 当希望引导用户使用某个功能时，应当减少它周围操作更为简便的功能。
● 要提高某个功能的可用性，将其表述的比其他功能更为直白是一种好方法。即，让这个功能更容易看懂，比使用其他功能的学习成本更低。
……

显然，这个规范对视觉设计的局限是比较大的，所以视觉设计师才不愿意去遵守。在网页的开发流程中，留给视觉设计的时间是很有限的，并且往往要求有比较绚丽的视觉表现。这样的条件下，再要视觉设计师顾及这个规范确实也比较难。

那么，我们来设计另外一个规范，让文字链接同样能表现的很清楚，做到“操作可识别”，同时，又让视觉设计比较容易做。

方案如下：
将文字链接分为两种，区别对待。
第一种. 对于较大的列表，默认时不显示下划线，光标经过时才显示下划线。

上图中这样的内容是一个个列表，一个新闻标题的列表，一个日志标题的列表，一个网友昵称的列表…显然是可以点击的。那么，好，既然能猜到，就不下划线了。只在光标划过的时候显示下划线，“嗯，对的，是可以点击滴！”

第二种. 对于混杂在页面文字中零散出现的文字链接，默认时候就出现下划线，光标经过的时候，样式不变。

散布与一大堆文字中的链接，如果在默认的时候不加以区别，就完全没法识别了。

这个规范的优点：对文字颜色没有要求。
不要求链接文字全部用蓝色，给视觉设计留出了足够的空间。不要求链接文字全部加下划线，避免了页面象横格本一样的满篇全是横线。

这个规范的缺点：对有链接的文字用了两种不同的处理方法，有的默认有下划线，有的没有。这两种情况同时显示在一个页面上时，加了下划线的文字显然会更明显的表示出：“这个是可以点击的。”于是，页面中的大列表可点击，表达的就不那么明显了。而页面中的大列表往往又是重点内容，是希望用户关注的内容。类似下面这种情况：

这个缺陷需要通过视觉设计来弥补了，背景颜色、字号、加粗之类的办法。

要说的就是这些。最后来看一下gmail，大体上就是按照这个方案来处理文字链接问题的。

贴在屏幕上的工具栏是过分的。页面上闪动的广告也是过分的。这些设计超越了表达的尺度。

在设计这个页面的时候，设计者考虑的往往是：怎样才能让用户注意到这个功能。偏执的考虑让用户用着顺手（用着顺手本身并不是错误的观念），主观的认为这样做才够方便，用户用起来效率才会高。在这个时候往往不会去考虑用户是否乐于接受。这如同做父母专心于把最好的食物给孩子吃，但却不考虑孩子是否饿。

什么样的尺度是合适的？
 “网页后面躲着一个人，他是设计者，在通过网页和用户交流。”
与面对面交流相比，这种交流方式更间接，但仍旧可以用人与人之间面对面的交流方式作为参照，来判断设计者向用户表达的尺度是否得体。

也许你很关心孩子的学习成绩，但是你不能每天对孩子说上N遍“要好好学习！”
如果你爱一个人，但却从来都不敢和她说话，那很可能就会导致电视剧中常见的单相思，你显示是那个主角。过与不及都不能达到最好的效果。人与人的交流是非常复杂的。所以才会衍生出那么多专门的学科：社会心理学、人格心理学、社会关系学……好在人与电脑的交互并不需要在重新来过，建立另外一套电脑社会科学体系，只要我们按照社会生活中人与人沟通的尺度来做就可以了。

不久前的一天，我正在上班，接到一个10086的电话，向我推销某某新的接听“套餐”。我当时正在工作，并且对这个优惠完全没有兴趣，我委婉的告诉对方说：“我现在正在工作，比较忙……”不等我说完，对方马上说：“只需要几分钟的时间！我们这项优惠活动……”于是我只得听着他把一大套活动介绍背诵了一遍。在他看来，把活动介绍的信息告诉用户是高于一切的。想必让这位业务员来设计网页，他会很自然的设计出一个贴在屏幕上的div来，或许还不止一个。并且要劝说他，还是比较困难的。

贴在屏幕上的浮动div、默认就不停闪动的动画、默认就播放的背景音乐…这些都是电脑科技所带来的新的表达方式，由于有了新技术，我可以这样向你表达了，但是这并不等于，我这样向你表达是合适的。以前没电话，要追个姑娘要蹲在胡同口一下午才能见上一面，好不容易见了面，我一害臊，还没说出话来。现在方便了，随时可以打她手机，不面对面还能让我胆子更大些，但是，我也不能一天到晚总是打电话跟她说：“俺喜欢你！跟俺好吧！”

要把握这个尺度，需要怎么做？
注重接受者感受，问问接受者当然是最有效的方法。但是，显然这样做并不总是可行。至少在设计网页的时候，通常是来不及的。那么，我们不得不找出一些相对普适的方法。

网页上有很多的表达方式，其中，安静的显示在页面上文字和图片是最为传统的，也是我所认为的比较适度的表达尺度。这样的方式与传统的纸媒体的表达方式类似，是受众从以往的社会生活中已经习来的经验，自然也就成了受众普遍接受的表达尺度。

如果你把自己设计出的网页转化成口头的表达，告诉一位目标用户听，让对方听的清楚明白，又不觉得你啰嗦，更准确的说，让这位用户觉得你的表达是很好的。如果能做到，那么，这个设计应该是比较好的了。实际上，我们现在的工作中，常常会用到类似的方法来解释原型的设计方案，只是这种方式还没有被整理成一种规范的、严谨的设计方法。

总结
人机交互的最终目标是为了消除电脑带来的沟通障碍。如果这个目标是对的，那么，用人与人的沟通尺度来实现人机间的沟通，依据已有的表达方式来实现人机交流，这样的方向，也是合理的。

那天不小心，左手食指被二手写字台的桌角划破了一个小口子，不到一厘米，很浅。深圳潮热，包上创可贴捂着反而不好。心里想着晚饭要吃什么饭，随手拿出棉签，伸进红色的“红药水”瓶子里蘸了一下。当沾满碘酒的棉签接触到伤口的一瞬间，山崩地动，撕心裂肺，肝肠寸断，痛不欲生……刘胡兰、江姐、赵一曼、王佳芝这些英雄的伟大，我一下子就全都理解了。

错误的颜色暗示误导了用户。

Gmail左侧tabs使用的颜色：“Spam”和“Trash”使用了灰色背景，其他tabs都是蓝色。通过色彩将左侧10个tabs分为了两类，让用户更清楚的意识到“垃圾邮件”与“已删除邮件”有某些类似的性质。都是些被遗弃的，没价值的内容。而其他8个tabs是一伙儿的。

正确的运用色彩可以帮助表达内容。

如果说，交互设计的核心任务是表达，那么，视觉设计也是交互设计的一部分—用视觉符号来表达。与交互设计的目标一样，视觉设计需要准确、快速的将信息传达给用户，在这个基础上，如果能做到赏心悦目当然更好了，这也是对视觉设计更高的要求。然而，目前视觉设计的指导思想往往是反过来的：追求赏心悦目的视觉效果，在这个基础上尽量少损害信息传达的准确性与效率。这是不对的。视觉设计不是画装饰画。

如果视觉设计的标准只是好的视觉效果，那么，进行这个工作的过程中，设计师就经常会陷入无所适从的境地。采用什么样的视觉元素来表达完全是出于感觉，而衡量设计是否够好的标准仍旧是感觉。很不幸的是，现在的视觉设计往往是这样。要脱离这个窘境，就需要设计师回到理性中来，认识到，视觉设计工作是在表达内容。采用什么样的视觉符号是出于对内容表达的需要。如同在会场上做报告，干巴巴的念书面报告可以，但是听众不喜欢。如果能用生动的语言来说，听众会更喜欢。视觉设计正是这些丰富的词汇，优美的措辞。想象一下，在干巴巴的书面报告中加入一些好不相关的华丽辞藻是多么可笑。目前的视觉设计很多时候正在这样做。

不是用户主动找的内容，而是设计者有意推送给用户的内容，假设这些信息都称谓推荐信息，那么，这些推荐应该怎么推？当然，简单的说，推荐的信息应该适度，适时。怎样才算适度？

北京的前门有个历史悠久的自行车商店，大概是我在上高中的时候，有一次去那里买自行车配件，买一个后轮上的挡泥板。这次购买经历，我至今仍记得很清楚。

进了商店，找到了卖配件的柜台，跟售货员描述了我要的配件：26车后轮用的挡泥板。开票儿，付款，拿货，一切正常。举着挡泥板我问售货员：能不能给安装上？“出门，右转，胡同里有个门儿，是我们店的维修门市部，那有人专门管安装。”我推着车，举着刚买的挡泥板，转到小胡同里，维修门市部很好找。“师傅，给我装一下这个挡泥板啊。”“啊，成。哎？你没辐条啊？”（注：辐条是指连接挡泥板与后轴的电镀铁条。）“啊？噢。店里有卖的吧？”于是我跑回店里，再买两根辐条。开票儿，付款，拿货。临走时，我问了售货员一句：“安装的时候，螺丝要自己带嘛？”“你要几个？”我太聪明了！差点儿又多跑一趟。

自行车配件算是专业的原件了，普通老百姓通常不那么熟悉。如果在买挡泥板的时候，售货员能多问上一句，能给我减少很多麻烦。即便是顾客不需要，只多问一句也不会让顾客太反感。该推荐的时候没推荐。

我的门。这是在屋里照的。贴小广告者的技术明显高于北京。竟然可以贴到门里面，还贴的挺端正的。广告的内容是搬家。在深圳我也曾多次搬家，搬家时找不到搬家公司也很着急。但是此时此刻我并不需要，恐怕也没谁喜欢自己的门上总会是不是的被贴上这样的小广告。

要搬家的时候，找不到搬家公司，我直接的想法是去找找小区的物业或者小区门口的保安，不知道你会想到去哪里找。或者会想到也许一楼的公告栏里？当然还可以上网找。这就另当别论了。

无论是那种方式都好，只是没必要因为担心您找不到搬家公司就隔三差五的在您家门上贴个广告。与之对比，往门缝里塞快餐店的外卖单倒算是合理的了。在深圳很多都是来打工的外地年轻人，自己不做饭是很普遍的。比如，我。住在这里好几个月了，厨房的门只打开过四次。其中还有一次是为了拆掉厨房的灯泡。因为厕所的灯泡坏了，厨房的灯没用，拆下来换到厕所。

QQ秀商城中，单独购买了一件QQ秀后，成功页面上会根据用户的性别推荐更多的整套装扮：

这个时候这样推荐合适吗？
我刚刚买里一条绿色的裤子，给我这样一个页面，要我作何感想呢？“你们推荐的这几套真好看啊，早怎么不给我推荐啊？要再买这个推荐的套装，我那条绿裤子没法搭配啦，废啦。”

Amazon也做推荐：

把一台数码相机放入购物车后，他们推荐了很多商品，“买这件商品的顾客还买了：”、“买这件商品的顾客还在其他分类里买了：”…林林总总推荐了一大篇。
显然，在进入购物车的流程中，卡用户一下子，单看购买流程，或多或少会减少支付成功率。然而，这时候推荐，也许100位顾客里有1位会流失，但是另外99个人却买了更多的商品，成总金额要高于100个直接进入购物车支付的总金额。这是从商家的角度来看，从顾客的角度来看也是有益的。对于只想买这部相机的顾客来说，这些推荐就像超市结算通道上的口香糖、巧克力，或许买上两块也不错。这是经继学研究的课题吧，我不懂。对于我，买一部相机是为了拍下门上贴着小广告的样子，（上面的图片是用手机拍的，明显是光线很暗，画面颗粒很大）同时买个闪光灯很必要。如果这里不推荐，我有可能就直接买单了。之后再买闪光灯还要再付一次运费。

这样的推荐就更恰当。

买挡泥板的时候该推荐而不推荐，累了顾客的腿。门上的小广告不适度；QQ秀的推荐不适时。对用户都不太好，商业效果也不是最佳的。存在推荐的信息，广告也罢，具体商品也罢，本身并不是问题，问题在于什么时候推荐，推荐到什么程度。看嫦娥升空的报道，旁边的广告栏在卖汽车…我没兴趣。