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

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

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

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

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

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

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

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

如果说“让用户能更好的完成人之间的互动”是我们工作的实质，那么我们可以再发散一下，或许让把农场中的留言与偷菜操作更紧密的结合是一个好的思路，因为这能让人之间的互动更有趣。让主人无需点击打开多个窗口，互相比对，而是一目了然的看到：一个好友来偷走了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秀的推荐不适时。对用户都不太好，商业效果也不是最佳的。存在推荐的信息，广告也罢，具体商品也罢，本身并不是问题，问题在于什么时候推荐，推荐到什么程度。看嫦娥升空的报道，旁边的广告栏在卖汽车…我没兴趣。

看到过很多人在说，细节决定成败。我也赞同细节很重要，但是，网站整体的构架更重要。在设计良好的构架基础上精雕细琢可以锦上添花。只单纯的宣扬细节决定一切的观念很多时候也许是无法驾驭大局情况下无力的自我安慰。

关于导航，需要解决的问题有很多很多，很多很多：

导航应该放在哪儿？
如何展现导航的层级关系？
导航层级过多怎么办？
面包屑导航是不是一个解决多层级导航的完美方案？
使用路标后，当前页面下一级分类如何展示？
如何处理信息树失衡？
什么时候用横向导航，什么时候用纵向导航？
下一级分类中有50项，怎么表现？
如果当前界面只能用于展现具体内容，没空间展示导航信息，怎么办？
多维度的分类怎么处理？
导航与排序方式的区别
……

只是这样粗略的一列就已经一大堆了。我曾经不止一次的想完整的琢磨一下导航的种种问题。但始终觉得这个事情规模太大。现在把这些导航问题拿到薯片会讨论了。每期讨论一点儿。大家集思广益。这样似乎效果更好。

这里介绍一下薯片会。薯片会是我们组（腾讯互联网业务系统 交互设计师团队）的一个讨论会，除了我们组的成员还有公司其他部门的交互设计师。薯片会原则上是每周一次，但是由于工作紧张有时不得不延期。其间，食薯片，话设计，故名薯片会。在薯片会上讨论导航的问题，已经有两次了。应该还会继续。

关于导航的种种问题，欢迎大家去薯片会网站上讨论。

www.shupianhui.com

让我试着解释一下这个设置功能：
区分两类人：所有成员和部分特权成员。操作分为：读操作和写操作两类。可以先给这两类用户分配不同的权限，然后再在下面选定特权成员。
写操作是比读操作更高级，有写操作权限的成员显然是可以读的。即，如果“可发文章、评论”项选中，则对应的“可阅读”变为选中的不可操作状态。
特权成员是成员中更高级的一部分人，权限只会比普通成员高，不会比普通成员低。如果对所有成员都开放写权限，那么特权成员就没什么特权了。第二行特权成员的选项应全部选中并且不可操作。如果普通成员有读权限，那么特权成员自然也应该有读权限。实际上此时特权成员只有读权限就没什么“特”的了，应该同时还有写权限。
把上面这种种规则都表现出来后，这里四个复选框的操作就变得很复杂了。假设现在是四个复选框全未选中的状态，第一个操作如果勾选了左上角的复选框，则四个复选框将全部变为选中，并且不可操作。如果第一个操作是勾选右上角的……
我实在不想说了，太累了。恐怕我有耐心写，你也没耐心看了。
太复杂并且太不容易理解了！每次操作后，结果都会出乎意料，勾选这个，其他的也被勾选了，并且有些人不可操作了。为什么？

我们来想想办法，简化一下。实际上这里的四个复选框是一组排列组合。我们来罗列一下所有可能出现的情况：
1．普通成员不可读，特权成员可读；
2．普通成员不可读，特权成员可读、可写；
3．普通成员可读，特权成员可读、可写；
4．普通成员可读、可写，特权成员可读、可写。

可能出现的情况就是这些，再考虑这个页面内容的实际情况，“普通成员不可读，特权成员可读”这种设置没什么实际的用处，去掉。只剩下三项了：

我们直接把这三种情况作为三个单选项放在页面上，就可以了。用户在使用的时候，只要三者选其一就可以了。操作后没有出乎意料的结果，不需要更多的分析、理解。

在普通用户中分出一部分特权用户，对这两组用户分别设置不同的属性值。这是技术实现的过程，直接表现出来，太难理解了。在这个例子中，我们的设计工作就是将这些技术实现的过程先理解清楚，把技术性的表达再向前推进一步，用更简单、直白的方式表达出来。

第二个例子：

这是一个提供给某些QQ空间主人的功能。主人可以发布一个活动，让访客来参与。活动有三种不同的类型：征集类是指那些征集logo，征集宣传语之类的活动；问卷类是主人发放问卷调查，一张问卷，上面有若干个选择题，让访客来作答；投票类是主人提供一个候选人列表，访客来投票，最终候选人中得票最多者得奖。

现在出现了第四种需求：主人希望先让访客来报名，然后将报名者展示出来，让其他访客来票选，类似“红楼梦中人”那种电视节目的活动方式。怎么设计？这个需求实际上只要用户先发起一个“征集类”的活动，再发起一个“投票类”的活动就可以实现了。但是，太复杂了。“发布一个选秀活动，其实是先后发布两个活动，先发布一个征集类活动，再发布一个投票类活动，然后…”恐怕写多少温馨提示也说不明白。那么，我们来设计一下，将主人要搞的这种活动单独包装出来，作为第四种活动类型供主人选择。

我们为主人做了前面的思考，使得产品从提供功能向产品设计推进了一步。

隐约有些印象，记得曾经见过一个国外的交友网站，其中有一个查找功能，大概是这样表述的：
○ I’m a man,want to meet a woman
○ I’m a man,want to meet a man
○ I’m a woman,want to meet a man
○ I’m a woman,want to meet a woman
这个例子有些夸张了，直白的简直有些啰嗦了。但是，如果改成两个下拉选择框（或者两组单选按钮）来表达，是不是又没有上面这样的四选一简单呢？

“向前一步”是要把原本的技术模型表现的更易于理解，更心理模型。很多产品所谓的设计实际上只是提供功能，并没能通过设计者的聪明才智将程序员实现的功能转化为易于用户理解的产品。

我们需要先从设计的含义说起。
“所谓设计，指的是把一种计划、规划、设想、问题解决的方法，通过视觉的方式传达出来的活动过程。”—王受之

设计是计划、规划的过程，比如我们设计一个洗衣机，要考虑把所有的操作按钮放在统一的一个区域内，在这个区域内再将操作性质相似的按钮放在一起，并且画个圈把它们圈起来。“相似信息有相似的表现。”基于电脑的软件产品的设计，也有这样的设计思路。

但是，如果要无条件的恪守这个原则，那么，下面这样一个tabs就有缺陷了：

这是一个邮箱。第一个tab是所谓的主页，第二个是收件箱列表，后面两个是分别打开的两封邮件（当然，还可以打开更多这样的tabs）。如果要保证内容的逻辑性，不同类型的tabs是不是就要区别表现了呢？分别打开的单封邮件们类型是一样的，应有一样的变现；收件箱算是个单独的类型，单独表现；主页也是特殊的，也需要单独表现；其实还会出现撰写新邮件的tab，又多了一种。这么做的结果就是tabs变成了调色板，肯定不成。要严格遵循内容逻辑的要求，不仅不会使这些tabs更容易理解，反而是混淆视听。

撤一个更远一点儿的例子。“一个由主人生成的列表需要有添加、修改、删除功能。”这也是个有价值的设计原则。那么，下图中的这个订阅列表，是不是有缺陷呢？

每个订阅的条目后面都应该跟一个删除按钮才对啊。然而在实际的使用中，添加一个新项是比较经常的操作，而删除现有的项并不常用。把删除按钮藏起来，不仅页面重点内容（订阅的标题）更突出了，同时可以避免误删除操作。考虑实际的使用情况，把删除按钮藏起来是更合理的。

那么，设计的过程中怎样考虑实际情况？实际情况到底是哪些？考虑实际情况是不是意味着设计工作是无据可依的？

设计的目的是为了弄一个易用、好用、用户喜爱的产品出来。前面说的这些原则是一些手段、工具，为的也是实现这样的设计目的。是否遵循设计原则并不是衡量设计质量的标准。那么，什么才是衡量标准？帮助用户高效的完成任务才是标准。这里说的“任务”是指通过人物角色设计、情景描述总结出的用户任务。用户任务就是实际情况。这些任务是可知的。

再次看“上传照片”按钮这个问题。设计人物角色，一定会有一位这个网络相册的注册用户，他需要的时候会来使用相册。情景描述中也一定会有这么一天，他旅游归来，想把旅游拍的照片上传到网络相册里。分解出的任务中就必然有这样一条：登录网络相册，上传照片。象前面说的，他会是在需要的时候来使用，并不是天天来。所以他对界面并不那么熟悉。那么，如果登录进来的首页（“照片集”页面）上找不到能“上传照片”的字眼儿，也许他就要犯难了。他的任务，上传照片，完成起来就比较困难了。
当然，你可能会质疑上面的种种假设，“如果他是天天来用相册呢？”“不把上传照片按钮放出来也许他也能找到呢？”……这些问题都是其实关于如何设计人物角色的，不是这里讨论的重点，就不多说了。（当然，也许是我多虑了，专业、聪明的您，也许根本不会有这样的质疑。）

“上传照片”按钮的去留问题可以很清楚的决定了。做出这个判断不是靠现有的设计原则；不是靠某人的经验；不是靠大老板的决策；不是靠与会人员的举手投票；不是靠扔鞋…

设计的衡量标准是看是否有助于完成用户任务，而不是对设计原则的遵守情况。设计原则是一些源于实际经验的总结，为的是给实际的设计提供指导。即使没有所谓的设计原则，运用人物角色这样比较科学的方法也可以设计出很好的产品来，只是可能要多费些力气。

之前的很多小文里也经常会提到有关行为设计的问题，几天前如厕时偶然意识到关于行为设计的一些问题联系起来考虑会更有助于设计。

啥是网页上的行为？看到一个链接，左键点了一下，打开一个新页面。
当然行为也有更复杂的，填写、提交一份注册资料；删除我日志中的垃圾评论；打开一个视频，调整音量，全屏观看…

关于这些行为，我们可以分为三个步骤，并对每个步骤提出相应的准则：
第一步.操作前，操作可识别；结果可预知。
第二步.操作时，操作有反馈。
第三步.操作后，操作可撤销。
（文字排列的还挺整齐的，怪像诗的哦。好吧，借以沉痛悼念即将远去的诗人：白龙。）

如果你深谙设计之道，恐怕已经知道我说的这几点是什么了。那么本文看到这里对你来说已经足够了。将这些设计问题联系起来考虑，在设计一个行为的过程中能有意识的考虑这一系列问题，应该会有助于你的设计。

如果你还有兴趣再具体了解一下上面说的这些准则，我们继续。

第一步.未操作前；操作可识别，结果可预知。
这是两个准则。操作可识别，是说按钮应该象按钮，链接应该象链接。《麦当劳两则》中的第一则提到了“链接应该看上去象链接”；第二则提到了操作应该给用户明确的提示。
按钮应当是有立体感的，看上去就感觉像是可以点击的。《接受伪按钮》《谁是按钮？它在干嘛？》都是在说有关按钮的事儿。不过与现在说的这个主题似乎不是很一致，还是别去看了。

操作可识别是为了保证用户触发操作的有可能性。如果看不出那是个链接，恐怕就没人去点了。
QQ空间中有个不好的例子：

有输入框，但却看不到验证码图片，读了上面一行文字才知道，光标点进输入框后验证码图片就会出来了。“没看到图片我怎么知道要输入什么？”“不知道要输入什么，我就不去不输入啦。”操作前表现的不够清楚，会影响触发操作的可能性。
（上面那行温馨提示算是个补救措施，但并不能解决问题。如果都靠提示就可以了，那么就不需要设计师了，有作家就够了。）

“结果可预知”是说，未进行一个操作之前，应该让用户大致能猜测到操作后会是什么样的结果。或者说，操作的设计应该和用户的期望相同。那些只写成“返回”“上一步”“下一步”的链接，如果可能，最好还是写清楚些为好。比如写成：“下一步 进入购物车”、“返回首页”…还有些时候，让结果变的不可预知是因为观念上的问题。设计者故意给用户一些意料之外的结果。《他想要什么？》中有些例子，说的更清楚些。

第二步.操作时，操作有反馈。
进行了一个操作后，需要页面上有反应。

使用系统按钮也算的上是一种反馈吧。点击一个系统按钮时，按钮会动一下，告知用户：“您点了一下。”当然这个反馈还不足够。还需要执行这个按钮应该有的功能。

QQ空间商城的页面很短；QQ秀商城左侧固定，右侧可滚动，这些都是为了保证点击了一个商品后，用户能看到页面页面上的变化。与之对比，天下秀等网站的操作都存在类似的问题。（说别人的坏话，这样不好，很不好。）

第三步.操作后，操作可撤销。
执行一个操作后，应当允许撤销，允许用户反悔。操作执行前的提示、二次确认并不能完全解决问题，几天前，我在删除垃圾评论的时候就遇到了这样的问题，错误的删除了一条评论，虽然之前有二次确认的小窗口，但是仍旧是删了。之后我追悔莫及，需要的是撤销刚才的操作。但是，WP里删除评论是不许撤销的。为此我特意致歉了一下，那段致歉就写在了那条评论牺牲的位置上。

有些时候，不提供撤销操作是故意的，设计者妄图通过这样的设计达到自己不可告人但又尽人皆知的险恶目的。当然，这样的情况越来越少了。大家都知道，网页上最简单的操作是关闭该网页，想牵着用户鼻子走，通常是很难的。

当然更多时候，不提供撤销操作是设计的时候没考虑周全。比如西宁邮政宾馆的热水器：《西宁邮政宾馆与博客网》，由那个热水器带来的恐惧使我直到现在还是只洗凉水澡。

添加更多的功能会使一部分人更爽而另外一部分人更不爽。通常在讨论的时候，会说，这是个trade off（在两者之间取舍）的问题。被这样定性之后，基本上就剩下掷硬币拿主意了。这是个取舍问题，但有些取舍问题只能靠掷硬币，而有些则不是，嗯…还可以扔鞋的…

鉴于在会议室中扔鞋或者硬币都有失斯文，我们不得不找些更体面的办法。要决定这个取舍问题只要解决一个问题就可以了：上面提到的“一部分人”和“另一部分人”都是谁？之后，我们就可以很从容的判断了，我们的产品是要讨好“一部分人”呢，还是要讨好“另一部分人”？

Alan.cooper的书里把用户分为三类：新手，中间用户、专家。我在这里只想说互联网产品，对用户的分类似乎可以更简单一点，只分为新手和老手即可。初来乍到的是新手，如果他们持续的使用这个产品则可能会转变成老手。这是套搬Alan.cooper三类用户的原理。

针对互联网，我想还需要补充一下。某个网站的新手用户并不见得总是想成为老手。他们一直是新手，对这些用户来说，做个新手就够了，或许他只是想查一下小说《青铜时代》的作者是谁，查完了就离开了。当他下次想查《黄金时代》的作者时，也许还记得上次这个网站，就再来查了，仍旧是查完就离开了。也许这两次访问间隔了两个月（我看《青铜时代》大约就花了两个月），我们可以说这位用户已经使用这个网站两个月啦！但是他仍旧是新手，以这种使用方式，即便他使用这个网站两年也仍旧是新手。他并不打算通过这个网站完成自己的人生目标。对于互联网产品更多的是需要为新手服务。

当然，互联网产品在发展，又越来越多的产品真的是会让用户每天都来使用的，甚至是整体泡在上面。比如，blog、网络阅读器…也就是说，使用这些产品的用户会更为老手，更希望老手一些。

上面说了，“一部分人”需要这个新功能，他们是老手；“另外一部分人”不需要，他们是新手。针对特定产品，考虑是否要添加某个功能的时候，只要想清楚这个产品是要给新手用户的，还是要给老手用的就可以了。

一个实际上是为新手提供服务的网站，经常容易把自己错误的定位成为老手服务的。产品的主人会出于个人美好的主观愿望希望用户能天天都来自己的网站，每天都泡在自己的网站上。即使用户说：“要有光！”，主人也会想办法给产品加上个发射光的功能。
（这句话源于圣经，上帝说，要有光，于是有了光。是的，我们把用户想象成上帝是对的。）

产品是为什么人服务的与产品主人希望为什么人服务并不是一回事。前者是可以通过一系列用户体验的方法分析出来的客观事实，儿后者则是开发者对产品的市场定位。一个生产扫帚的公司可以进行用户跟踪、用户访谈了解到使用扫帚的人是什么样的人，他们需要的扫帚是什么样的，从而改进自己的产品。这个公司的研发部门也可以主观的希望通过迎合更高的消费需求，给自己的产品镶金带银，买一万块钱一把，以为这样可以给高消费能力的用户带来尊贵感。然而，实际上，有那么多钱的人都不自己扫地了。

很遗憾，我说不出什么普遍适用的方法，让您应用一个原理就能抉择如何设计自己的产品。因为，某个特定的产品是要为某些特定用户服务的。需要具体分析才能做判断。

不过，通过上面对功能取舍问题的分析，我们确实可以看到，对产品的设计是建立在对产品用户分析的基础上的。不搞清是为谁服务的，单纯的冥思苦想产品应该如何设计，还不如扔鞋，鞋底朝上则取，鞋底朝下则舍。

有感而发的一顿胡言乱语似乎没能解释什么实际的问题，但是…嗯…通过这篇小文至少又给您介绍了一种古老的决策方法—扔鞋。

改版面临的问题一：旧版设计的缺陷

旧版大头贴有一些设计上的缺陷。我们可以通过界面截图了解一二。

默认首页（照片合成页）：


点击中间左排的“高级图像处理”按钮（“照片”图标按钮），界面变为：

在主界面上点击中间右列的“文字设定”按钮（A图标按钮），界面变为：

“摄像头拍照”页签：

其中存在的缺陷就不详述了，相信您也都能看到了。

（前面说到了，大头贴是让用户将照片加上外框的一个图像编辑工具，这里的截图只是整个界面左侧部分，界面右侧是大头贴外框的物品列表。这次改版的设计主要在于左侧部分，所以，这篇总结没有提及右侧列表部分。）

改版面临的问题二：合成单张VS合成多张；摄像头拍摄VS上传现有照片，两个维度的交叉

这是一个由新功能引发的问题。旧版只允许插入单张的照片合成大头贴，新版则提供给用户合成动画大头贴的功能，允许用户上传多张照片合成逐帧动画的大头贴。要合成动画，需要一个“时间轴”，用来顺序排列多张照片，编辑动画。界面大致是这样的：

对于旧版中合成单张大头贴的功能，通过用户反馈，决定加入多张对比的功能。即，用户可以相中了某一个外框，然后尝试着搭配多张照片，反复对比，最终选择一个满意的搭配。这就需要一个备选照片列表，让用户随时点击对比。界面大致是这样的：

合成单张与合成动画是两个不同的任务，各自有各自的界面。听上去很合理。

无论是合成动画还是合成单张，都有两种插入照片的方法：用摄像头拍摄和上传现有照片。这样一来就出现了两个维度：合成单张VS合成动画；摄像头拍摄VS上传现有照片。

如果直接将上面这个维度关系转化成界面，是这样的：

这样设计有很多缺陷：

用户看到了“用摄像头拍照”功能，但是只能拍摄单张，要想拍摄多张，合成动画，就得先选择页签“合成多张动画”，再点击“用摄像头拍摄”。“为什么现在不可以用摄像头拍摄多张？”“我怎么知道要进到合成多张动画页签里才能拍摄多张？”

原本要合成单张大头贴的用户如果发现可以合成动画大头贴也很可能想尝试一下。而用户面对现在界面很可能发现不了“用摄像头拍摄多张照片”的功能。

原本合成动画的用户拍摄了多张照片之后改变主意了，本以为删除其他的照片，只留一张就是合成单张了，但是却不行（按这样的设计，需要用户去点击合成单张的那个页签）。

重新设计大头贴面临的主要问题大致就是这样的了。下面我们需要通过设计解决这些问题。这样的设计工作，我们称之为“交互设计”。

在开始设计之前，我们先来明确几条相关的原理：
1.相似的操作放在一起。这样可以保证较好的内容逻辑，让界面更容易理解，更容易使用。
2.不要让一个按钮在不同的情况下有不同的功能，一个按钮一个功能。
3.更少的界面更好。
4.为“新手”用户服务需要产品设计的简单、清楚； “中间用户”、“专家”则需要高效率。
5.为一类用户用户提供一个界面，而不是多类用户共用同一个界面。

这几条原则，在《about face 2.0》中都能找到。当然，交互设计的原理有很多，这里列出来的这几条，只是和当前这个大头贴设计有关的。在下面的设计过程中，您将看到，我们是如何运用这些原理指导具体的设计的。

开始设计！让我们滚动！（let’s roll!—摘自盗版《兄弟连》DVD中的字幕）

交互设计工作往往可以分为两步：
1.搭建信息构架
2.细节设计

大头贴的信息构架就是关于“单张VS多张”、“摄像头拍摄VS上传现有照片”这两个维度的表现。第4条设计原理是关于“新手用户”“中间用户”“专家”的。这个产品面对的是“新手”用户（没谁会天天都来合成大头贴），更需要产品表现的简单、清楚，或者说表现的直白一些、傻瓜一些。之前根据内容逻辑关系画出的界面显然难度太高了。

通过第4条设计原理，我们可以判定，这样的设计还不够好，而不要给自己找接口“用户应该能看到合成多张的那个页签的。”

第5条设计原理说：为一类用户设计一个页面。合成单张大头贴的用户和合成多张的用户是不是两类用户呢？不是。前面提到了，在合成大头贴的过程中，合成单张与合成多张的操作很可能会互相切换。那么，无论是“单张”还是“多张”都是一类用户，想要合成大头贴的用户。因此，我们应该设计出一个界面来，而不是两个。更少的界面更好（原理3）。

要设计出一个界面来，关键问题在于如何统一“合成单张”和“合成多张”这两个界面。


将它们统一成一个界面，这里需要一些思想的火花。在一次和产品经理的讨论中，我们画出了下面这个界面：

缩略图的列表里可以存放多张照片，既可以当作时间轴，又可当作备选照片库。点击“合成单张”按钮，把当前帧输出，合成单张的。点击“合成动画”按钮，则把全部照片一起输出，合成动画。

把“单张”和“多张”整到了一个界面里之后，只剩下“插入现有照片”和“用摄像头拍摄”这一个维度了。在界面中同时提供这两种添加照片的功能按钮就可以了。

信息构架的问题解决了，再来设计细节。

设计原则1说：相似的操作放在一起，可以使内容之间的逻辑关系更清晰。
“现有照片”和“摄像头”这两个按钮都是添加照片的功能，放在一起。大头贴有很多编辑照片的功能（比如，放大、缩小照片），也应该放在一起。现在又有了动画合成功能，相应的一个操作也应该归在一起。这样界面上就应该有三组功能按钮了：

编辑照片的功能中有“高级图像设置”和“文字设定”这两个功能操作起来比较复杂，需要较大的界面来展示。在旧版中，点击这些按钮，界面替换：

点击中间左排的“高级图像处理”按钮（“照片”图标按钮），界面变为：

之前的“选择本地照片”按钮变成了“返回”按钮。虽然充分利用了空间，但是不好用。用户刚刚形成了一些隐约的印象：下面中间那里是个“选择本地…”的功能。想要“返回”就不会上那儿去找了。

设计原则2中说：一个按钮一个功能。把这个原理引申可以理解为：某个位置上的按钮应该是固定的。

无论是设计理论还是对实际的分析，都说明在统一位置上变换按钮不是件好事。那么，“高级图像设置”和“文字设定”的具体功能怎么显示？给它们另外一个单独浮起的界面就行了。“插入现有照片”和“用摄像头拍摄”两相功能也是类似的。

至此，大头贴的主要设计完成了。最终的设计效果：

新版的大头贴已于7月27日正式发布了。访问方式：
访问qzone.qq.com，
登录，
点击“进入空间”（如果您之前没有开通过qq空间，则需要先“开通”），
在您个人的qq空间中点击右上角的“装扮空间”进入qq空间商城，
在商城导航中选择“大头贴”。
（有点复杂哈，显然，设计上要做的事情还很多。）

愚下希望能借此总结反应出一些设计原理在实际中的应用，或许其中只言片语与您有益。

第一个问题：

点击标题，不是进入这篇文章，而是进入“图领风骚”栏目，如下图：

这篇文章属于这个“图领风骚”栏目，但是在第一屏看不到这篇文章。
尽管还有不少人不认同，我还是觉得：这是一个简单的错误。

第二个问题：


点击了分类中的“MP3”，进入的页面中，第一屏满满当当的显示了“MP3”分类的下一级分类，第二屏才开始显示所以属于“MP3”分类的商品列表。

这个设计最直接的问题在于，点击了商品列表的“下一页”后，页面应该如何显示？使用锚点，让页面保持在当前位置？不成，刷新出的页面中看不到logo，看不到导航，看不到“路标”，这个刷新出的页面是什么？恐怕还得滚屏到最上面看明白了之后再滚下来。（与“页面内跳转”的错误相似。）点击了“下一页”后，跳回到页面顶端？不行，又看不到商品列表了，原本点“下一页”是要看下一页的商品，看不到了，肯定不中。这是最直接的问题，而更重要的是：我要看MP3啊，MP3在哪里？

解决办法：把下一级的分类放到左边去。这办法不是我想出来的，我只不过是看过amazon.com。

第一个设计中，设计者的理由是：不仅给用户当前文章，还给他（她）们更多的文章，岂不更好？也许这是真实的想法（当然，也许只是借口）。如果按照这个理由来理解，我个人认为，设计者过分主观的判断了用户需求。设计者认为他们这是在为用户好，用户会需要更多的新闻。需要给用户做这个主吗？第二个设计也类似，设计者认为自己所提供的更进一步的分类是用户需要的。

在“下一级分类”和“商品列表”中选择，上来就显示“下一级分类”不对，难道上来就显示“商品列表”就对了吗？要是有用户需要再选择，分类放在了旁边不那么显眼了，人家没找到怎么办？谁敢保证没有用户会被新闻中心的其他新闻吸引呢？显然，这样的质疑没人能绝对的反驳。

“干嘛要看其他图片？人家点了那个标题就是要看那条图片，给更多的就是干扰！”
“谁说的？！我就会看其他图片啊，能看到更多的内容对我来说很好啊，我平时时间有限，不可能整天主动的去找有意思的内容去看……”（发言长度视发言者口才而定，很可能一下子说上二十分钟。这段发言结束后，部分与会者被发言者详实的描述说服，相信这个描述很真实，就是真正用户的使用情景。另外一部分与会者听的烦了。于是，上面这个“图领风骚”的设计就被确定下来了。）

我相信在这两个设计产生的过程中，一定有类似的质疑，所以最终孕育出了这样两个设计。在设计的过程中，也许其中的不合理之处并不象现在看到的这么明显。

那么，用户想要的到底是什么？是“下一级分类”还是“商品列表”？从上面这两个例子中，我想，可以总结出一个原则。关于这个原则让我从家门口的麦当劳服务员开始说起。（我其实是为了说的更透彻，所以才要从这个跨国的快餐店说起，绕的是有点远了，如果想直接看结论，请跳过下面的情景描述，从“通过这个…”开始。）

在家门口的麦当劳买东西通常是这样的：
我走到柜台前，说：“要一个辣鸡腿堡套餐，打包。”
服务员几乎是在我说话的同时对我说：“你好，要不要试试我们新的至尊牛堡。”
我尽量表现出礼貌的摇摇头：“辣鸡腿堡套餐。”
服务员说完上一句后，看到我不点头，几乎不停顿的继续说：“新的，很不错的，要不要试试。”显然，她这句话，又是在我说话的同时。
我心里厌烦，不愿纠缠，但仍尽量体面的摇头。
服务员看没戏了，于是问我：“您要什么？”刚才我在说话的时候，她也在说话，所以肯定是没听到我说的话。
我第三次背诵：“辣鸡腿堡套餐！”
服务员：“好的。”
服务员熟练的在点餐收款的机器上操作后，说：“十八块五，谢谢。您是在这儿吃还是打包？”
我为之…

通过这个描述，上面想要说的原则已经很清楚了—尊重用户的要求。

什么才是用户想要的？怎么才算是好的用户体验？（啊！用户体验，我烦这个词了，到处都是这个词，任何讨论中，要说服对方，发言者都会用上这个词儿。）尊重用户的要求是一个基本的准则。人家说要看那条新闻了，就先给人家看，用页面中最大的篇幅，写成大字，好好展示给人家。人家说要看“MP3”这个分类，就把这个分类下的商品列出来先，即使这个分类比较宽泛，也应该先列出来，既然我们觉得应该有这样一个分类。

妈妈问你要不要吃粽子，对她最大的尊重就是回答她，“嗯，吃！”或“待会儿吧，现在吃不下…”
—借以庆祝“端午节”，并怀念远方的妈妈。（晚上她发短信来说：“真想你在…”，我为之动容。）

这样的指示可谓够全面了，也够有品味了。但是，我在这个楼道里停留的十几分钟内，男男女女的大约有5，6位来找洗手间，几乎没有一位能找到。

问题在于位置不对。gentleman和小红人都没放在门上。

不需要进行目标用户的调研，我们也可以描绘出人物角色和场景：XX岁的XXX，参加好友的婚礼，席间饮啤酒若干瓶，内急，需“洗手”。他来到这个楼道里，XX年的社会生活经验告诉他，洗手间应该是一个房间，并且必定有个门。强烈的自然召唤促使他不顾一切的找到那扇门，而门旁边的装饰画暂时恐怕没心情去欣赏了。

情景大概是这样了。找不到洗手间也是自然的了。

说到这里，我自然的想到了我的这个blog。（看到厕所就想到网页，这似乎不是头一回了。）

我这个blog中，每篇日志下都有评论，随便谁都可以发评论。但是，我的这个服务器总是不那么稳定，有时候会提交不成功。提交之后，显示一个错误页面，页面上显示“…没有权限…”之类的话。其实不是什么权限问题，只是数据没正常的提交，通常再提交一次就正常了。而按浏览器上的后退按钮后，之前在文本输入框里写的内容又没有保留。因为这个抓狂的朋友不是一个两个了。要根本解决这个问题，单凭我一己之力确实不成。为了减少出错，我只能是在首页的公告栏中写了个提示：“有些时候发表评论会提示什么“没有权限”，其实是网络或者服务器的问题。可能需要再试一次，或者改天再发。sorry！”然而，抓狂现象出现的频率几乎没有变化。因为这个提示离“发表评论”太远了。

“对这个事儿的提示在那里。”由于这个原因，仍旧很多人丢失了评论内容；由于这个原因，很多人找不到洗手间。如果洗手间的标志就在洗手间的门上，如果对“发表评论”的提示就在发送按钮的旁边，他好我也好。

五一期间，昼夜颠倒，深夜无眠，遂记小事，聊以自娱，亦饲网友。词陋意浅，切莫见怪。

以建筑设计为例，要让大众都能享受到工业革命的成果，需要建筑造价低、易于维修，室内宽敞、明亮。现代主义设计师大量使用了玻璃幕墙、混凝土预制件建造出了大批造型简单明快，实用性强的建筑。由注重实用性引发出的现代主义设计创造出了明显区别与以往的鲜明风格。现代主义设计思想影响深远，直至今天仍旧随处可见。小到ipod shuffle，大到北京的后现代城，都或多或少的带有现代主义风格。

Ipod shuffle

北京后现代城

现在主义认为设计是个理性的创造过程，否定了各种古典主义中的繁复的装饰。然而，现代主义设计所造就出的作品却往往是冰冷的，缺乏人情味的。于是出现了“后现代主义”、“反现代主义”等等更人性化的设计理念。

这里只是粗略的、不准确的介绍了一下“现代主义”。要更详尽、更准确的了解现代主义，推荐您看王受之的《世界现代主义设计史》。

互联网刚刚兴起的时候，网页是否便于用户使用不是设计的目标，设计被普遍理解为界面美化。设计师所做的工作往往是给网页画花边、添背景，这种设计十分类似于一百年前在火车头上雕刻花纹图案。

随着互联网的应用越来越复杂，需要在产品开发过程中做一些工作使得用户能理解、会用这个产品。可用性被关注了。如同建筑设计中要求房屋更易于为大众服务。一座居民楼，每个房间都应当宽敞明亮，并且建造成本低，易于维修。

对设计上新要求，连同技术上的新标准混合在一起形成了所谓的web2.0概念。现在被普遍接受的web2.0式的网页通常是：
1．白色背景
2．没有多余的图标
3．如果可能尽量不用边框
……
这样的页面与现代主义简洁、实用的产品外观十分相像。然而却又和现代主义一样难免走向极端：冰冷、生硬、缺少人情味。

现代主义的大师米斯.凡德勒在他个人事业的后期将现代主义发展为更极端的“极简主义”（那句著名的：less is more就是他老人家说的），不惜牺牲掉产品的功能而营造出简单的产品外观。互联网顺应着web2.0的浪潮，也很自然的出现了类似的极端表现：

页面中右下角有一个“保存全部”按钮，是指保存哪些内容？
如果能利用图形界面语言表现一下内容之间的关系，对“保存全部”按钮的理解会更容易，也更快速。如下图：

Web2.0要求网页更好的体现产品的功能，更快的页面下载速度…简洁的视觉效果只是为实现这些要求而采取的一种手段。单纯追求形式而不顾根本的目标：使用性，这样做的后果就是，嗯，就是“保存全部”按钮不那么好理解了。

一百年前，大批天才的设计师本着更好的为人服务的理念创造出了现代主义，然而现代主义由于本身的高度理性化，缺少了人情味最终也走向了没落。Web2.0所营造出来的几乎没有修饰的界面风格也类似。

没有修饰的界面设计最终会被更人性化的界面设计所取代。从google reader、google calendar……这些产品已经可以看到，同样是简洁的、无装饰元素的界面，正在朝着更好的视觉效果上努力。更为典型的是微软，live具有相当强的视觉风格，让人赏心悦目，但却不损害可用性的基本原则。

web2.0是现在主义设计理念在互联网上的实践。它们有着共同的目标：更好的为人服务。当整个行业尚处于无序、无指导思想的时候，需要一些理论。这些理论必定是强调理性化的，这样才容易实践。从简单的进行表面的装饰到高度理性化的演变是必然的。建筑领域的现代主义设计为的是让更多人能住进舒适的房子；互联网的web2.0为的是让用户能更好的使用网路，享受到互联网的便利。在满足了基本的使用需求的基础上，网页设计也必将会朝着更加人性化的方向发展，让用户在网站中感觉到亲切、温暖或是沉稳、可靠—Norman大师称之为“体验设计”。

稍做尝试我们便会发现，点击“右箭头”按钮，列表向左移动是更“习惯”的，也是比较普遍的做法。比如下面几个例子：

news.yahoo.com

www.6rooms.com

看过了这种滚动的缩略图列表，再来看一下电子地图：

map.baidu.com
按“右键头”按钮，地图是向左移动的。

再来看视窗界面：

视窗界面中的滚动条，按“右箭头”按钮，界面向左移动。

按“右箭头”按钮，应该是往右移啊？！

是的，按“右箭头”向右移，按“左箭头”向左移。超级玛丽中操纵玛丽兄弟就是这样的，所有的人应该都习惯吧。

横向滚动条中的“左、右箭头”按钮原本是用来控制拖动手柄的。拖动手柄在整个滚动条中的位置对应着整个界面在窗口中的显示。按“右箭头”按钮，拖动手柄向右移，窗口中应显示整个界面更靠右边的部分，因此，整个界面向左移动了。

电子地图、滚动的缩略图列表经过了“进化”，滚动条被简化了，只剩下了方向键（yahoo新闻的例子中还能看到一些进化的痕迹），而方向键实现的功能还是不变的。

在实际的设计工作中，会遇到各种不同的具体情况，不仅需要我们清楚上面所说这种种左右对应的关系，还需要能分辨出哪些是“拖动手柄”，哪些是“被间接控制的界面”。来看个实际的例子有助于进一步的理解：

http://qqshow.qq.com/act/2006/zrshow/upload.html

这是一个让用户自己上传图片、加工图片作为个人形象的工具。用户选中本地的图片后，图片会直接显示在331×347px的图像显示区域中。140×226px的黑线框内是个人形象应有的大小。用户可以缩放、移动图片。

方向键操纵的是图片，140×226px的黑线框是不动的。通过缩放，图片可以比整个图像显示区域（331×347px）更大或更小。

被操纵的图片到底是“拖动手柄”还是“被间接控制的界面”？图片被放得很大的时候，在331×347px的图像显示区域里无法完整显示，更象那张无限大的地图。图片似乎应该是“被间接控制的界面”。图片被缩得很小的时候，方向键更像是在操作玛丽兄弟。但是，显然不能随着图片的缩放，方向键的功能也变化吧。

这里提供的功能是让用户调整图片作为个人形象，在140×226px的区域内显示。140×226px的区域是真正的可视窗口。用户上传的图片应当至少是一个能充满整个140×226px窗口的图片。窗口是140×226px的黑线框，图片只会比窗口大，不会比窗口小。这样来理解，图片显然应该是“被间接控制的界面”。接下来只需要修改一下界面上的视觉效果，正确的表现出上面的理解就ok了。修改效果如下图：

――――――――――――――――――――――――――――――――――
本文中的基本结论是在一次和seven的讨论中得出的，之后，我又进行了一些整理、分析。
和seven经常有类似的讨论，另外一次讨论下拉箭头的问题，seven已经整理成文：《下拉箭头怎么拉？》也许以后有精力应该将类似的讨论都系统的整理、记录下来。

很多的互联网产品中都会遇到这样的问题，比如，一个在线杀毒软件，是否要自动帮用户更新病毒库？自动的更新似乎应该是件好事儿，免去了很多手工的操作。但是，在没告知或询问的情况下就自己行事了，似乎又有些问题：没有给用户自主的权力。试想，当我打开电脑，联上网，电脑自己就开始了很多动作，我不知道它都在干些什么，后果会是怎么样的，也不知道如何才能让它停下来。嗯…我想，我会有些害怕的。

这些自动功能做的事儿，通常情况下，是用户需要的，为的是方便用户。但是，太智能、太自动了，会让人感觉有点儿象流氓软件，悄悄的行事，似乎左右了用户的意旨。当下，那些风云人物们为了制造新闻，把流氓软件问题炒的火热，似乎软件的流氓比真实的流氓更招人恨。我们这里说的问题，并不是真正的流氓软件问题，只是为了方便用户而实现的一些自动功能，本意是要学雷锋做好事，要是被当作流氓，那可就太冤枉了。给用户知情权，让用户能驾驭，这是设计上的原则。

不过，总是询问又太骚扰了，偏向了“技术模型”，即，把技术实现的过程都展现给用户，让用户来做决定。太多的复杂的技术问题，用户恐怕是很难回答的，也不会有兴趣去研究。把产品设计的简单、易用，这也是设计上的原则。

“这些原则都是谁编出来的？自相矛盾啊？！”

解决这个问题最正常的思路大概应该是：互相迁就一下，有点儿自动，又不太自动。这是对的，是有效的。不过，也是比较笼统的，或者，干脆说是比较虚的。需要具体情况具体分析才有意义。中庸之道嘛，每个中国人大概都能给出这个解决办法。

设计中另外一种惯用的方法：给一个缺省的设置，同时提供用户自定义的设置。这也不失为一种解决办法。这样的设计大概需要这样几部分的内容：
1．有更新的时候，给一条消息，告知用户；
2．消息的下面要有个设置功能：“下次不提示，自动更新……”
3．菜单栏中有“常驻”的设置功能，让用户设置，是否提示，是否自动之类的。
这……恐怕已经太复杂了，和“自动的更新，没有询问”相比，复杂的太多了。“自动的更新，没有询问”想要实现的就是简单，如果为了解决其中的不妥之处，而改变这个设计的初衷，那恐怕就没什么意义了。

我在这里提供一种供参考的解决办法：
1．自动的操作，但，不能打扰用户的正常使用，比如，自动下载、更新，但不能影响用户正常的使用电脑；
2．允许撤销。如果用户对自动操作后的结果不满意，可以方便的撤销。

这种解决办法源于对办公室内清理字纸篓工作的理解。

我们的办公楼里，每人有个字纸篓，大约每天下午4点半左右会有清洁工来清理。字纸篓里的垃圾袋会被“自动更新”。

这个收垃圾的过程不会不打扰正在办公的人。如果收垃圾的过程象庙会里的跑旱船一样的声势浩大，恐怕大家都会要求不要每天来收垃圾了。这就是上面说的第一点—不打扰用户的正常使用。

我曾经假设过，如果我突然发现之前曾经把一张写有重要内容的纸扔到字纸篓里，并且字纸篓已经被“更新”过了，那该怎么办？我是不是可以找清洁工去算帐？“干嘛把我的字纸篓倒掉？干嘛不先问问我？我那里面有重要的东西，你给我找回来！”（啊…我只是假设一下，实际上我不是那么混不讲理的人。）清洁工当然不可能在浩如烟海的垃圾中找到我的那张纸，除非他会变魔术。在软件中，是可以变魔术的。自动更新了，如果您不喜欢，那可以撤销。转瞬间，昨天那装满各种垃圾的字纸篓又呈现在我面前了，我是多么的兴奋啊！

界面是一个交流的方式，我们通过界面和用户间接的交流。这种方式与真实的交流相比，没有太多本质上的区别，只是更间接些。对于收垃圾这件事，如果清洁工能做到“不打扰”且“可撤销”，是非常棒的。如果，用户对于软件的更新和字纸篓的更新需求是相近的（我觉得是的），那么，用同样的交流方式来处理软件的更新，我想，应该也是比较好的。我对“更新字纸篓”的过程理解还是比较肤浅的，毕竟没有过切实的体会，更没有经验。也许，明天下午应该跟那位来收垃圾的清洁工聊聊，或许会有更多的收获。

明天，会不会是个可爱的MM来更新字纸篓呢……

之前虽然也有很醒目的文字提示，但是还是有人要开窗，因为上面有个把手，有把手意味着可以扳动。即使有提示，那个试图开窗的人还是会给自己想出一些看似合理的解释，比如，“是不是有人恶作剧？”“是不是说，不建议打开？其实，打开也不要紧的”……

之后拆掉了把手，不再有人去尝试强行打开了。既然不希望用户去操作，那么就不提供操作手段。仅仅是告诉了用户正确的信息还不够，还要避免出现不正确的暗示、引导。

我们设想一个更极端的例子，如果给马路上的井盖上装上一个把手，显然会有行人试图打开它，尽管并没有什么提示邀请行人这样做，并且，行人也不会有打开井盖的需求。错误的引导会引发出错误的操作，即便那个错误的操作看上去是荒谬的（如果是要偷井盖卖钱那就不荒谬了，那是可耻）。

下面回到网页上来：

这是一个发表评论的功能。
未输入内容前，点击“张贴评论”按钮，会弹出对话框提示“请先输入评论”。对于这个发表评论功能，将按钮初始状态设置为“disable”是比较合适的。“因为，现在还不可以张贴，所以，那个按钮不可以点击”。如下图：

下一个例子：

先介绍一下：
这是Qzone商城。Qzone商城是一个让用户购买装饰物装扮自己Qzone空间的产品，在这里，用户可以买到背景、鼠标指针、各种小装饰，还包括用户自己Qzone空间导航栏的皮肤（图中右侧部分）。

点击商城中商品的小图片，就可以即时的在页面中预览到实际效果，为了让用户预览到自己空间中的导航换上皮肤的效果，这里显示出了用户个人空间中的导航。显然这里并不希望用户通过它离开商城。但是，这里的“主页、日志……”却是可以点击的。既然这里不希望用户点击，为什么要让这些链接可点击呢？如果你使用过Qzone就会感觉到，这个导航的引导效果甚至比“井盖上的把手”更强。

为了挽留用户，且避免误操作，不得不弹出一个对话框：

“保存更改到新的方案吗？”……中文确实是世界上最难的文字。

为了挽回一个错误的设计，不得不再设计一个邪恶的弹出窗口。而更复杂的设计，意味着出错的几率更高。

似乎也可以说，在这里用户看到自己Qzone空间的导航，是有点击导航进入相应栏目的需求的。但，这个需求产生的前提是：先有了这样一个导航，并且看上去就像是可以点击的样子。在这个前提下，要点击它的需求才出现了。如同那个窗上的把手，把手在那里，并且上面没有大便，看上去就象是可以扳动的。

我们可以尝试着设计一下：
1．让这个导航看上去就不象可点击的样子；
2．在商城页面上部加上明确的链接允许用户返回到自己的Qzone空间中。
满足了上面两条，还会有多少人非要在Qzone商城中直接进入自己的“留言板”呢？

PhotoshopCS2中，一个工作窗口可以拖动的范围更大了，如图：

以前的版本只能这样：

与以前的版本相比，最顶部的80px也可以用作显示工作窗口了。PhotoshopCS2提供了更大自由度的操作。但是，这80个象素原本也不是空着的，如果把工作窗口拖上去，菜单栏、辅助工具栏就会被遮挡住。在遮挡住的状态下，要想点击“显示变换控件”这个复选项，又不得不再把工作窗口拖下来。更糟糕的是，也许有些用户会根本就找不到这个功能了。

我们来推测一下设计者的想法：“缺省的位置不会出现遮挡，如果用户需要更大的工作区域，这样的设计也是能满足的。”这似乎是一个更周全的设计。

既然工作窗口是用户自己拖上去的，是用户自己的操作、自己的意愿，哪些区域被挡住了，用户显然是看到了的。这甚至比吸烟室窗上斗大的字条更加显而易见。然而，在使用中，我还是经常会不经意的把自己挡住。并且，我相信，不是因为我笨。

在photoshop CS3中，这个功能被取消了。（遗憾。如果是在CS3发布之前就提出这个问题，似乎会显得更有先见之明，唉，现在，马后炮了。）

总结一下，好的设计，不仅应该把正确的引导传达清楚，还需要避免不正确的引导、暗示。

出现不正确的引导、暗示往往源于提供了太多的自由度、太多的功能、太多的选择，而出现“太多”则是为了“保险起见”。“所以的操作都在这里了，您想用哪个就用哪个吧。”没有引导的设计更象没有设计。

设计的职责不仅仅是把所有的功能都展示出来，也需要拆掉窗上的把手。

电影《重庆森林》里讲：生活中，选择太多，姑娘可能就跑了。多么沉痛的教训，应该足以引起注意啦。

我们目前的工作中，界面原型基本上确定了网页的排版，而界面原型是由交互设计师完成的。看到这个95％的观点，我暗自欣欣然。然而，我想，这个95％的观点有待商榷。

交互设计目前的主要任务是可用性，所以排版很重要。
交互设计的任务包括：
1．创造出高可用性的界面；
2．让界面有良好的体验－让用户在使用过程中有愉悦感、成就感，感觉到被尊重…

这里所说的交互设计是指创造出用户界面以及相应的交互操作的整个设计，并不是仅仅指一些公司中被称谓交互设计师的那些人所作的特定工作。也许，您是一位美术设计师，您设计了一个表示下载功能的图标，这个图标能让用户更快的找到下载功能。您的工作也对提高可用性有贡献。因为，您设计的图标使得用户，在“找到下载功能－点击下载”这个与网页的交互过程中，效率更高了。

提高可用性是目前设计工作的主要任务，是产品质量的基本保障。良好的体验是更奢侈的要求，短期内，web设计是很难顾及到的。我们现在常说的“这个体验好…”往往只是意味着这个设计用户能看懂了，这个设计不会给用户带来太多的麻烦了，实际上，只是可用性高。又有几个网站能让用户在使用过程中有成就感，有愉悦的感受呢？让用户不骂娘已经很不容易了。开发周期短、开发流程差、人员水平低…这种种因素的限制，使得目前的web产品设计只能着眼于更高的可用性。

怎样才能提高可用性？界面设计最根本的任务是－传达，以及更复杂的要求－交互。“我们这里有一些信息要告诉您，要让您看明白…”“我们为您提供了一项服务，它是这样操作的…”把这些交代清楚了，让用户看明白了，可用性就高了。而可用性的XX条准则，无非是为了实现上述任务的具体方法。

怎么就能传达清楚了呢？面对面交流使用的工具是语言，web设计师与用户之间的交流工具是网页。通过排版，设计师向用户说明内容之间的逻辑关系，向用户说明哪里是重点内容。“可点击的文字应该能够直接被识别出来”，类似的可用性准则在设计过程中是需要遵守的，不过，这样的准则是相对固定的，只要我们有共识就好了，相对来说，比较容易做到。而“哪部分文字需要用加粗的18px宋体？”“哪部分内容应该放在页面左上角？”要解决这些问题，需要深刻的理解产品，深入的了解目标用户的需求。排版需要花大量的精力。

目前设计工作的着眼点是可用性，提高可用性除了注意遵循那些准则，更多的精力要花费到如何传达，如何排版上，所以，排版很重要。

更好的视觉体验是件奢侈品，现在很难“重要”。
几年前，网页设计师是指那些“美化”网页的人（也曾经是我的饭碗）。难道这一阵“用户体验”之风吹来，“让网页更好看”就只剩下5％的价值了吗？

真正好的web美术设计应当是“大像于无形”的，或者说是比较抽象的图形设计。而不是给界面原型画花边儿。因为，表面上的“视觉美化”往往降低可用性。“那个花边儿吸引了用户的注意力，使得这个重要的按钮看上去不那么显眼了！”好的美术设计应该是不损害信息传达的。

美术设计更大的价值在于带给用户良好的视觉感受。良好的视觉感受是“良好体验”的一部分。赏心悦目自然比冰冷、生硬更令人愉悦。“这个网页看上去就舒服。”“不会让我觉得是在面对一个冰冷的web服务器。”

快速到达目的地是重要的，要是同时还能很舒适，并且一路美景相伴，当然更好。然而，web产品开发的现状往往是：开发周期中，美术设计师能得到的时间有限；开发流程中，美术设计师被孤立在产品设计的讨论之外，对产品的理解不够；部分美术设计师的水平有限…在这种现状下，要更舒适，风景更好，同时又不影响速度，很难。能保证网页有较高的可用性已经不容易了，为了保证可用性不得不否定掉一些质量不高的美术设计。又没条件做更好的美术设计，所以只好少“美术”一些了。

我的住所只有10平方米，我也喜欢一人多高的景德镇花瓶，但是，摆上几个大花瓶，就没地方睡觉了。

从这个角度来看web2.0的视觉风格，可以这样解释：“我们目前无法创造出既赏心悦目，而又不损害可用性的页面，所以，我们暂时不理会美不美的问题，只用最简单、最朴素的图形样式。”类似的，兴起于上世纪初的现代主义设计最初的理念也只是要制造成本低，易于维修的建筑，而视觉效果只是这种设计的衍生。现代主义设计大师们称这种设计为“好的设计”。之后的几十年中，这种“好的设计”真的作为一种风格被广泛的接受了，如同现在的web2.0风格被越来越多的接受。或许，web2.0的设计可以成为第二个“好的设计”。

总结
目前，我们能做的只是基础的设计－实现较高可用性的设计。清楚的传达是首要目标。所以，排版显得很重要。不损害可用性前提下的良好的视觉体验是件奢侈品，现在很难做到。

这并不意味着美术设计师将不再有价值了。当web设计的可用性水平普遍较高的时候，实现“良好的体验”就将成为设计工作的重心了（这也就是所谓的：未来的设计是体验设计）。那个时候，由美术设计师设计出赏心悦目的页面将是更为必要的一项工作。

在网页的设计中，经常会遇到这样的问题：“这是一个很重要的文字链接，我们是不是应该把它做成一个按钮，这样会更突出……”

关于按钮的问题，我曾经写了一篇《谁是按钮？它在干嘛？》，先简单复述一下：目前网页上普遍的有一些按钮并不是真正意义上的按钮，只是一个文字链接，我称他们为“伪按钮”。伪按钮不应该使用按钮的表现形式。

那篇文章里并没有给出一个更好的方法来表现伪按钮，现在，我不得不说，或许伪按钮还是要用按钮的形式来表现。

伪按钮需要存在
在现实生活中，电视遥控器上有按钮，门铃是按钮，手机上有按钮，您面前的电脑键盘上也是一大堆按钮。按钮清楚的告诉用户：“这个可以点击。”正是因为它表达的够清楚，所以在电脑的图形用户界面中也模仿现实的样子，出现了按钮。按钮最本质的含义是“可点击”，而点击后的效果则是后来被设计师强行赋予的。也就是说，我们完全可以说，按钮并不意味着将要提交什么表单。这样说来，将一个很重要的文字链接表现为按钮似乎也没什么不对的。

一个网页不能期望着自己的用户象使用word软件那样熟悉自己的网页，网页设计面临的总是比较“新手”的用户，绝大多数页面对于用户来说都是陌生的，在面对一个陌生的页面时，一个斗大的按钮无疑是一盏指路的明灯。

没有其他的表现方式，伪按钮还只能是按钮的样子
一行带下划线的蓝色文字也表示可点击，但是，如果把他们做成按钮会更突出、更抢眼。

显然，把这个文字链接改成按钮后，在页面上会更突出。但是google却没有这样做，实际上，google的网页上根本没有伪按钮，他们不会把一个文字链接化妆成按钮来引导用户。而这种做法显然不能满足大多数网站的需求。即使是象flickr这样设计的很精良的网站也需要下图这样的伪按钮：

或许可以把文字链接图形化？但是图形化后又很容易被误认为是广告。

由于找不到一种比按钮形式更好的表达方式表示“可点击”，伪按钮还只能是按钮的样子。而伪按钮的存在违背了图形用户界面的设计标准。那么，

尝试着区分真、伪按钮
“设计两类不同样式的按钮”—这似乎是个好办法。然而，却并不容易做到。首先，需要设计出两个样子不同的图像，让用户知道这些东西是可点击的，是按钮。它们应该是有立体感的，上面还要能足够清楚的显示文字。

除了看上去像是能点击的，他们两个还要表达出文字链接与按钮的区别：文字链接指向另外一个界面，点击后不会出现什么严重的后果，如果您后悔了，那就点击一下浏览器上的“后退”按钮。而按钮就比较恐怖了，点击后，邮件将发送到对方的邮箱中，文章将被成千上万的人看到……两个这么抽象的概念，要想通过两个方寸大小的图像表达出来是很困难的，yahoo进行了偿试：

在鼠标经过“My Yahoo！”的时候，会出现下划线，与这个页面上的其他文字链接的样式一样。看上去是一个按钮，但是不失时机的告诉用户这个“按钮”和页面上的其他文字链接有某些相似的地方。而“Web Search”这个真按钮就没有类似文字链接的表现。设计者用这个下划线来区别真按钮与伪按钮。

另外一种相似的做法是，按钮的文字上始终显示下划线。虽然具体的形式上有些不同，但是思路是一样的：让伪按钮既有文字链接的样子又有按钮的样子。

然而这样的设计恐怕还不足够好，多数用户首先会看到那是一个按钮，如果有耐心仔细研究一下，恐怕也只会觉得那是个有点儿奇怪的按钮，即便确实分辨出了这个“My Yahoo！”与“Web Search”有所不同，又有几个人能明白这样的区别意味着什么呢。

这样的偿试目前为止并不成功。

还有一个办法！
“不区分真按钮与伪按钮，把他们都做成一样的按钮。”这是amazon.com给我们提供的解决办法。

既然那些重要的文字链接需要看上去象个按钮，我们又很难让用户理解一个页面上有两种不同性质的按钮。那么，就不要区分了。给用户看到的只是文字链接和按钮两种元素。而点击按钮将出现的后果由按钮上的文字来说明。

这样做虽然不符合widow图形用户界面的设计原则，但是在很大程度上却是符合用户使用心理的。我们不可能幻想着用户在浏览一个网页的时候知道什么叫<form>，用户也不会去判断一个按钮是否会把一些数据写入数据库。用户面对一个页面的时候，会被页面上的按钮吸引，阅读上面的文字，确定那个按钮是自己想要做的事后，就点击了。那么，不管是“进入结算流程”还是“登录到我们的安全服务”只要在点击前清楚的交代了点击后的效果就够了。样子并非一定要不同，也并非一定要相同。而相同的好处在于减小了用户的学习成本。不同的网站上的按钮样子往往是不一样的。用户面对一个页面的时候先要学习，认清什么样子的东西是按钮。如果整个网站上的按钮全是一个样子，显然会更容易学习。（amazon.com上实际有不止一种的按钮，为的是区别重要性，与是否提交表单无关。）

使用这种设计方法，不用再强迫图形设计师画出两种几乎不可能画出来的按钮样式了，更重要的是，用户看到的页面更简单了。

不区分真、伪按钮的做法需要我们花更多的心思判断哪些文字链接是可以被“升级”为按钮的。因为把文字链接“升级”为按钮意味着他很重要，而一个页面上不应该有很多重要的内容。同时，按钮上的文字表述也是需要花很大精力的，尤其是对于我们。我相信，在中国多数的网页设计师，象我一样，并不具备很强的文字表达能力。在按钮上显然又不可以长篇大论，要用几个字描述清楚点击后的效果并不简单。但是，却很必要。

需要强调的是，这整齐划一的一个按钮样式不应该是系统标准按钮，因为系统按钮是“真按钮”的标准造型。想象一下，把“了解更多”弄成一个系统标准按钮的样子，绝对会比阿扁现在的言行更可笑。

总结一下
要解决真、伪按钮的问题有两个办法，方法一.是象google那样，文字链接就是文字链接，再重要的文字链接最多也就是显示的稍微大一点儿。这种方法通常不会通过评审的，那么，可以试试第二种方法，不区分真、伪按钮，只使用一种按钮样式，斟酌适用范围，确保页面上重点突出，而不是重点泛滥。推敲文字表述，确保清楚的描述点击的后果。

我不得不承认，这种办法是与《谁》一文中相悖的。但是，我仍旧认为，对于目前的大多数网站，这种不区分真、伪按钮的方法是最好的。

一个网站中，提供给用户自己管理的个性化空间通常叫做：“我的XXX”，比如：我的音乐站、我的博客、我的节目、我的收藏、我的信箱、我的订阅、我的好友、我的小组、我的主页、我的豆瓣……或许这些都是源于第一代互联网中类似“My Yahoo！”这样的称谓。早期的网站功能简单，与用户的交流也相对较少。现在的网站动不动就得跟用户互动一下，尤其是所谓的web2.0，强调的个人信息发布、分享，网站社区化……这些都使得“我的XXX”越来越多了。“我的XXX”，称呼用户为：您，这两个字之间的矛盾也越来越突出了，比如：

是“你”？是“我”？似乎只是一个字眼儿上的小问题，但在实际的网页设计中，却会造成不小的麻烦。

在douban.com登录后的首页是这样显示的：

页面上面部分中：我的豆瓣、我读、我看、我听、我去、我不是臭鱼，用户感觉自己是这里的主人，可以操作、掌控这里，不错的感受；而页面下面部分又有一个栏目叫“豆瓣猜你会喜欢……”这里是以“豆瓣网”为第一人称的，“豆瓣网猜你—臭鱼会喜欢下面这些内容……”，“豆瓣网”又成了这个页面的主人。单独看上面的设计或下面的设计都会让用户感觉很亲切，很温馨。但是，合在一起就糊涂了。

上面这个例子中提到了“我不是臭鱼”这个功能，这实际上就是“切换用户/退出登录”功能。表述成“我不是臭鱼”是希望这个功能看上去能更亲切些。但是，谁？谁不是臭鱼？同样是这个功能，amazon.com上的表述是这样的：

旧版的Live.com是这样处理的：hello,chouyu (not you? Sign out)。这样是不是更亲切了？看来，并不是非要用“我……”才能让用户感觉到亲切、自然。

是“你”？是“我”？的问题，即使是很牛X的网站也存在。来看ebay.com：

在ebay网站中，“My eBay”是个固定的称谓，如果有一天突然改成了“Your eBay”恐怕会有很多用户不习惯，所以，设计者只能坚持使用“My eBay”这个词。

然而，在上图右面的表述中，如果写成：“If I am a member, sign in to My eBay account.”恐怕就成了笑话了。只能是“If you are…”，所以，设计者不得不在后面表述为your eBay account，这样可以避免单纯的出现your eBay这么个词。

为什么右侧页面第一行需要一句欢迎语呢？又为什么欢迎语要写成：“Welcome to My eBay for Guests!”而不是只写成：“Welcome to My eBay！”不是更简单、清楚嘛？为什么要加“for Guests”？设计者试图告诉用户：My eBay 是这个网站专门为客人提供的一个服务。左面是My eBay，右面是If you are a member, sign in to your eBay account，要让用户自己理解：“sign in to your eBay account就能进入My eBay”，这个逻辑太难了。所以，需要这句欢迎语来过渡一下，大致可以这样理解：“欢迎来到My eBay 这个专门为客人提供的服务空间，您当然就是我们的客人啦，所以，这个My eBay就是为您准备的啦，如果您已经是会员了，就请登录您的eBay帐户吧，这样您就可以进入My eBay了。”这句欢迎语并不是专门为了欢迎一位未登录用户的。（如果要欢迎也更应该是在首页上就欢迎了，而不是到这里才欢迎）

开头的时候说过“My Yahoo！”，这个称谓比“My eBay”更加为用户所熟知，更是改不得的。

Logo下面是“My Yahoo!”按钮，旁边需要邮箱的按钮，叫做“My Mail”是很合理的。下面一张图是首页上右侧的截图，这里需要先让用户确信登录的帐户是正确的，因此，打个招呼：Hi! eugene_chouyu，但是这一打招呼，却把页面的“主人”确定了，是yahoo网站在跟这位用户打招呼。那么，下面要显示邮件的摘要功能，只能不出现“My Mail”这样的字眼了，只叫“Mail”好了。

上面所说的这些例子，基本上还都是让人觉得有些别扭，不至于出什么更多的问题。如果只是为了让人阅读起来更顺畅一点儿就要挑战用户多年的认知习惯确实有些没必要。然而，这个是“你”？是“我”？的危害还不只于此。

这是一个网络礼品盒，每位用户有一个属于自己的礼品盒，按照所谓的习惯用法，被称做“我的礼品盒”。上面看到的这个界面是我收到一份礼品时看到的，页面上部的两个小盒子里是两件礼物，下面的粉色框是礼物卡片，“这两个是你想要的QQshow么？”这句话是送我礼物的人写的。

请注意右下角的按钮“去我的礼品盒”？去谁的礼品盒呢？实际的功能是去我自己的礼品盒，这样可以查看这两件礼物是否确实已经放到里面去了。但是，上面卡片里说“这两个是你想……”，虽然主语不是这个网页，但是，谓语是我。下面突然变化了，“去我的礼品盒”了，难免让我觉得会进入送礼人的礼品盒。

这里的出现的问题已经不是阅读起来有点儿别扭的问题了，而是有可能误导操作了。

一个更加误导操作的例子：
我要访问某一个好友的Qzone空间，只需要点击QQ中他的个人资料卡上的那个Qzone链接，但是，如果这个好友并没有开通自己Qzone，此时，我会看到这样一个页面：

再重复一下，这是我点击过对方Qzone链接后看到的页面。看到这个页面，我的第一反映是点击绿色的按钮—“进入我的Qzone”。我点击的是好友的Qzone链接，我预想着将看到这位好友自己的主页，那个页面的主人应该是这位好友，那个页面中的主语“我”自然也应该就是这位好友他自己。现在有这么一个按钮“进入我的Qzone”，那当然是他在说话了。而实际情况是，我进入了我自己的Qzone。

作为产品的设计者、提供者，我们是站在网页后面的人，如同银行中的业务员，商店中的售货员，列车上的乘务员。我们通过网页间接的与用户交流。

我们对用户说：“我们提供了这样一个网站，可以帮您做这个，还有那个。您在这个网站里可以拥有一个属于您自己的空间，如果您愿意，我可以带您进入您的空间。在您的空间里，您可以建立自己的相册。当您的朋友访问到您的空间时，他（她）们会看到一个完全属于您的主页，其中当然也会显示您的相册。朋友们将看到相册的名字是“我的相册”这是我们事先帮您起的名字……”。

当然，也有很多网站设计者已经意识到了“我的XXX”这个问题了。比如amazon.com中的“Your account”、“Your Lists”，Flickr中索性就把属于用户自己的栏目叫做“You”。

如果你的网站还没有象yahoo那样著名，其中的个性化栏目还没有象My Yahoo!那么深入人心，或许可以考虑把网站中的“我的XXX”改成“您的XXX”。

然而，现实却不得不让人痛心，恐怕QQshow商城中“我的QQ秀”这个称谓还要继续使用下去。

最近经常回家很晚，常去门口的麦当劳吃晚饭。在那里注意到两个很有意思的设计。

第一则：厕所的门

这是在麦当劳厕所外面拍摄的。可以看到，所谓的门把手就是钉在门上的一个金属板。这个门要怎么打开？没法往外拉，没法横向推拉，只能往里推。

这是深圳的一家麦当劳的厕所门，现在回想一下，似乎北京麦当劳的厕所门也是这样设计的。

关于这个设计，之前曾经在blueidea的用户体验综合版里说起过。

我们来看看这样一个设计对web的交互设计有什么启发。这个设计使得用户在操作之前就已经知道要如何操作了，而不用去尝试。在网页中，也存在着类似的需求—文字链接。

用户打开一个页面后，需要能知道哪些内容是有链接的、可以点击的。不应该让用户用光标去尝试，这会大大降低使用效率。这其实是可用性中一条很明确的要求，但是，却总是不被注意。

上图所示的页面中，“您所在的位置：”是不可点击的，“QQ首页”是可以点击的，“新闻频道”是可以点击的，“走马灯、正文”都是不可点击的。

类似的问题几乎各大网站都存在，请您随便想出几个常去的网站，sina？163？中国新闻网？无一幸免。

第二则：番茄酱

这袋儿番茄酱在包装上很清楚的给用户提示了撕开包装袋的方法。实际上，并不是只有包装上指示的锯齿位置才能撕开。这显然是为新手用户设计的。如果您是第一次使用，不知道该怎么操作，那么，就按照提示来做吧。多用几次之后，您就会发现沿包装袋两端任何一个锯齿都可以撕开。

也许这个设计看上去有些多余甚至可以被认为是一种对用户的误导，误导用户从指定的位置撕开。不过，这样的误导并没有给用户造成太多负面影响，并且为新手用户提供了有价值的帮助。如果您不是新手，不要在意这个提示就行了，它不会让您有太多不好的感受。如果您是新手，面对这样一袋番茄酱也许会不知道如何下手，其痛苦感受我们大致可以想象的到。并且，如果操作失误，里面的番茄酱还会有喷射而出的危险。被一袋番茄酱弄的好像不幸中弹一样，显然会给您的心灵造成巨大的创伤，并留下严重的阴影。因此，这个包装袋上的提示是很有价值的。

软件设计里也会有类似的提示。请随便打开一个windows文件夹窗口，确保“查看”菜单中的“状态栏”被勾选，并且窗口不是“最大化”显示，此时，窗口右下角就会出现一个三角形图标，提示“拖动可以改变窗口大小”。而实际上，拖动窗口的任何一个边或者一个角都可以改变窗口大小，就像番茄酱包装袋上沿任何一个锯齿都可以撕开包装袋一样。

大多数软件也沿用了类似的设计。Gtalk，MSN都有这个小三角，并且四个边四个角都可以拖动。但是，也有一些例外，比如realone，有可拖动的小三角，并且只能拖动小三角，其他地方不许拖动。其中的不便，想必大家都有体会。

再来看网页的设计。在一个文章列表页中，一篇文章后面的评论信息要怎么显示？

MSN space是这样做的：

“添加评论、阅读评论”，有必要这么罗嗦吗？有必要。就像番茄酱包装袋上的提示一样必要。

―――――――――――――――――――――――――――――――
此文是在公司内部一次小组交流会上的发言。

web界面表述的信息可以无限的多、也需要无限的多。
对于一个1024×768分辨率的显示器来说，网页浏览器窗口提供的显示区域大约是1000px×620px。但是，一个web界面的大小却是1000px×无限，因为可以滚屏。理论上说，一个网页上可以显示无限多的信息。

Web界面中，待表现的内容非常多，以douban.com的一个页面为例：

（http://www.douban.com/subject/1029553/ ）
需要显示的内容包括：“此书的基本信息、在哪儿买…、此书的简介、豆瓣成员给这本书添加的标签、喜欢这本书的人也喜欢、豆列推荐、此书的论坛、豆瓣成员的书评、搜索功能、你读过这本书?、我来评价/评价汇总、谁正在读这本书?、谁读过这本书、此书被哪些小组收藏”。共14类不同的内容。

这样一个页面中就需要展示这么多的内容，如果完整的展示这些内容，那么，界面真的需要无限长了。（还好douban不是这样做的）

用户却不可以在一个界面中接受过多的信息。
虽然，网页和书本一样是一个传达信息的平面媒介，但是，用户却不会象考试前看教材那样一字不漏的细心阅读一个网页。

（http://chatshow.qq.com/ ）
在QQ音乐场景的用户测试中，很多用户打开页面之后，先点击了一个图片，发现左面一个很大区域有了变化，紧接着就看到这个区域下面有一个表述很完整的链接：“挑选场景音乐”。“挑选什么音乐？好吧…”于是用户离开了这个页面。整个过程不超过20秒钟。当然，这样的操作是由于设计上的缺陷造成的，这里不想多说了。让我们从另外一个角度来看，显然，20秒钟的时间里，用户根本不可能完全理解页面上的内容，以及内容之间逻辑关系。设计者的精心安排用户完全没有注意到。离开这个页面对用户来讲不是什么损失。

用户的注意力是十分有限的。而作为设计师，我们显然希望传达一些重要的信息，并且引导用户的行为。实际上，这也是用户需要的。那么，要想正确传达主要信息，正确引导用户行为，需要设计者珍惜用户有限的注意力。网页不应该显示过多的不重要的信息。然而，

web界面经常会出现信息量过大的设计错误。
实例一：QQshow结算界面

（http://qqshow.qq.com/ 需要先登录）
在这里设计者希望告诉用户：“所选的商品可以放入礼品盒，如果一起购买推荐的商品可以得到优惠，可以选择其他的支付方式，要如何购买，可以使用购物券，申请开通红钻有很多优惠……”

想要说明的太多了。实际上这里最应该向用户表述的就是“您刚才选择的QQ秀是这些，确定吗？”而这两句话却被其他的那些信息淹没了。

实例二：产品首页上的登录框

（http://qzone.qq.com/ ）
各个产品的首页左上角几乎都有登录框。登录框在告诉用户“来登录吧！”而这个页面上又展现了很多推荐的内容，比如：“我看世界杯 我上英雄榜”。这在告诉用户：“看，这个内容多有意思，进来看看吧！”类似的还有很多其他的推荐。那么用户到底应该先干什么呢？

一个顾客去商店买衣服，售货员首先会先向顾客推荐服装。用户有了比较明确的目标后，需要宽衣解带的试穿时，售货员才会告知顾客试衣间的位置。去试衣间只是整个买衣服过程中的一个步骤，必要的时候才有价值。如果顾客是要给自己买一双手套……而如果按照这些产品首页的设计方式开服装店的话，那么，即便仅仅是一位路过的顾客，售货员也要冲上去告诉他（她）：“往前走，右手边是试衣间！”

实例三：QQ音乐场景的导航

这个页面里提供了导航栏，还提供了路点（也被称作层级式导航）。两者表述的信息相同，用户喜欢哪种就可以用哪种。但是用户应该用哪种呢？这种与哪种有什么不同呢？
（现在访问这个页面，您会发现，层级式的导航已经被去掉了。http://chatshow.qq.com 赞一下吧。）

实例四：QQ秀的商品列表

（http://qqshow.qq.com/ ）
“试穿、加入希望盒、购买、赠送、向他人所要”所有可能的操作都显示在列表也中，希望能尽可能的满足用户的需求，方便用户。但是，面对满屏幕的文字和图片，用户应该怎么操作呢？“我是新手，我现在该干什么了？其他人都是怎么做的？”

信息量过大的错误设计源于对”操作简单”不恰当的理解。
误解一：只要减少界面，就能提高用户的效率

产品首页的登录就是这种思路的体现。

误解二：在一个界面中提供更多的功能可以给用户带来更多的便利

商品列表中展示全部的功能就来自于这种思路。

我们已经看到过多的表述信息存在的问题了，那么怎么精简信息量呢？
精简单个界面信息量的方法：
方法一：分布表述

在qqshow支付页面中，只在用户帐户余额不足的时候才在出现另外一个附加页面引导用户选择充值方式。在正常的情况下只显示一个链接，给用户提供一个选择其他支付方式的入口就够了。

一个页面上主要说一个事儿肯定要比一个页面上说两个事儿更容易说清楚。

方法二：在适当的时候表述，而不是随时展示

后面一张是当当网的搜索结果页，前面一张是某一本书的详细信息页。

“放入暂存架、点击看大图”这些功能是在详细信息页才显示的，在列表页并没有。列表页的功能在于告诉用户“我们为您找到了这个，这个，还有这个。您对哪个感兴趣，就点击进去看吧。”列表页中展示的商品的相关信息只是为了描述“这个”是什么。

方法三：应用新技术，弱化不重要的信息

一个来自live.com的设计：鼠标经过或点击more时，打开一个浮动的层，显示该文章的简介，并显示更多的相关操作。这些操作并没有直接显示在界面上，虽然那样做可以减少一次点击。

“live.com有这么大的界面空间，直接显示出新闻的摘要也没什么不可以的”，或许这样说也不见得没道理。但是，在“Google桌面”中使用了类似的设计显示新闻内容就显得很必要了。

方法四：通过图形界面设计，强化重要的信息

Amazon.com的商品详细信息页。这个页面上有超过2800个英文单词。虽然信息量非常之大，但是却表达的很清楚。即使不很会英文也知道要如何操作。

严格的说，这种方法并不是精简信息量的方法，但是，确实可以更好的突出重点信息，正确引导用户。

总结：
以上几种方法，显然不是精简页面信息量的全部，也不是众多方法的系统概括，只是抛几块砖罢了。

最后，类比雷锋同志的名言：用户的接受力是有限的，页面的信息量是无限的，我们要把无限量的信息设计到有限的web界面中去。
（人的生命是有限的，为人民服务是无限的，我要把有限的生命投入到无限的为人民服务中去……
―――雷锋）

――――――――――――――――――――――――――――――――――
本文是2006.06.27在腾讯用户研究与体验设计中心成立会上的发言稿。
再次祝贺设计中心的成立，并预祝中心能在未来的工作中取得更辉煌的成绩！

所有的这些，都是信息的交流。
用bt下电影和QQ聊天似乎是两个完全不同的事情，而实际上，它们都实现了信息的交流。我朋友的电脑里有一部电影—《撞车》，他推荐给我看，做了个种子。我用这个种子下载，下载完成后，观看。电影《撞车》这个信息就这样在我们俩之间实现了交流。如果是一个比较简单的信息，比如，“以色列换总理了”，我的朋友可以在几秒中之内用QQ告诉我。虽然用时很短，但，和下载电影《撞车》一样，这也是一次信息的交流。

一位雷锋式的好站长将一张道德观念所不容但却深受群众喜爱的色情图片上传到了网站上。一位用户打开了这个网站，看到了这张图片，或许还另存到了自己的电脑中。一次信息交流实现了。

我将今天的一段奇遇写了下来，发布到了自己的Blog中，我的一位朋友看到了，为之惊叹，为之开心一笑。这个信息又被交流了。

所有的互联网产品都在实现着信息的交流，有的简单，有的复杂。

“即便用bt下电影和QQ聊天都可以被认为是信息交流，但它们必定不同啊，差别相当大啊。”是，信息的交流有很多的形式，也有很大的差别。

信息交流有“直接”和“间接”的属性。
人与人最直接的交流方式是面对面的交谈。目前，最接近面对面的交流方式恐怕是视频会话。通过屏幕和音箱，可以看到对方的表情，听到对方的声音。这样的功能已经在一些IM产品上实现了。更间接一点儿的方式是单纯的语音对话，打电话就是这样的。同样，不只一个的IM产品也能实现这个功能。更间接的大概就是互发文字的聊天了。手机短信就是这样的。这也是IM产品的核心。MSN和QQ都有一项功能是“个人消息”，用户写入一些消息，他（她）的朋友直接就可以看到。我曾经帮一个朋友找兼职的翻译工作，就在“个人消息”中写入了“谁要找兼职的翻译……”。这个方式比起文字的对话来，显得更间接。我并没有去对某一个特定的好友说这些话，但是，好友们却知道了。我喜欢称之为“消极的信息交流”。更“消极”或者说更间接一些的方式是Blog。我将要说的话放到Blog中，而不是直接去和朋友说，朋友们能看到，也可以评论、trackback什么的。如果，我是某个网站的主编，我就可以将某一篇文章放到网站上，让其他人来看。对于其他人来说，就是在“看新闻”。此时，信息的交流已经相当间接了。一位读者要想对文章作者阐述自己的想法已经比较困难了。至于象ftp、电驴、bt，要实现信息的交流则更间接了。至少用户需要先下载、观看，这要比读一篇文章更费时间。又有多少人知道如何找到某个bt种子的作者呢？信息的发布者与接收者通过间接的方式实现着信息的交流。

我们可以通过一个示意图来表明从直接到间接的整个区间。

如图中所示，视频对话并不是直接交流方式的尽头，也许以后还会开发出更接近真实对话的方式。同样，FTP数据分享也不是最间接的交流方式，只要有需求，谁知道还会有多少种更间接的交流方式将被创造出来呢。

“直接的信息交流”和“间接的信息交流”都是有需求的。
我们为什么会选择发短信而不是打电话？似乎最重要的原因是“短信更便宜”。然而这却不是唯一重要的原因。很多人都会有这样的经历，有时候，打电话一两分钟就能说清楚的事，我们却不愿打，而是发短信，经过若干次短信往来才搞定。算起来经济上并不便宜，而且花费了更多的时间。这是因为我们觉得这件事用间接一点儿的方式交流会更好。在实时的通话过程中，10秒钟的停顿会让对方产生很多猜测，“喂，你在听吗？”“现在说话不方便？”“怎么了？我说错什么了？”而短信的交流过程中，花上几分钟考虑该如何回复是很正常的。更间接的方式让一些人不善言词的人交流起来更从容。IM中的文字聊天与语音聊天同样存在类似的情况。

上面提到的“找兼职翻译”的例子也是一种对间接交流方式的需求。也许我知道有几个朋友可能能帮上忙，但是我却不愿意逐个的去问，只是将这句话写在那里，“谁有兴趣就来联系我”。IM产品为用户提供了这样一种交流方式。

互联网产品的发展方向并不是为用户实现最直接的信息交流方式，而是实现尽可能多样化的信息交流方式。

信息交流有“主动”和“被动”的属性。
除了直接与间接的属性，信息交流还存在“主动”与“被动”的属性。信息的交流需要发布者和接受者两个人。发布者是主动的，接受者是被动的。最小的信息交流单元是：发布者将信息发布出去，接受者收到。

在比较直接的交流方式中，一次交流通常会由很多信息交流单元组成，发布者与接受者的角色反复交替，比如，网上的文字聊天。你有来言，我有去语。无论是交流中哪一方，都既是接收者，又是发布者。在整个聊天过程中，某一方既不是主动的也不是被动的。

在比较间接的交流方式中，一次交流中的信息交流单元比较少，比如，ftp上传与下载。我将一个文件上传到ftp空间中，一个朋友去下载。发布者与接受者角色明确，主动与被动关系清楚。

我们将主动与被动的属性加入到信息交流模型中，信息交流的模型图就显示成了下面这样：

象直接与间接一样，主动与被动也都是用户需要的。我们需要被动的接受信息，了解NBA的战况、汤姆斯杯的战况、F1战况、海湾战争战况。传统的新闻网站提供了海量的信息，现在更有RSS之类的方式让接收信息效率更高。我们也需要发布信息，表达自己的想法，所以，我会去投稿，争取把这篇文章发布在蓝色理想上，让别人看到。

Web2.0使得间接的方式不再是一个点，而是变成了一条线。
以网络相册为例。传统的网络相册，一个用户可以是信息发布者，可以是信息接收者，也可以兼备两者，仅此而已。

Web2.0造就了flickr。用户可以发布照片，可以浏览别人的照片，可以给别人的照片加Tags，评论别人的照片，可以加入group……一个用户可以任意选用这些功能中的几个。那么，这样一个用户到底是信息发布者呢，还是信息接收者呢？他（她）应该处在接收端与发布端中间的某个位置。

Web2.0让用户可以自由的选择位置，在由上至下的线段中任意的游走。所谓的“web2.0让用户更好的参与”，实际上，就是意味着原本只是被动的接收信息的用户可以往“主动”的那一端移动了。

随着技术的发展，更多的间接的交流方式都将能实现由主动到被动的连通。而更多的更自由的交流方式显然是有价值的，或者说是有需求的。

信息交流的方式有无限多种。
一种信息交流方式具有特定的主动被动属性，在主动－被动的直线中有无限多个这样的点。从理论上说，信息交流的方式有无限多种。

实际的互联网产品往往不是只实现一种信息交流方式。比如，MSN，可以文字会话，也可以语音，也可以视频，个人消息，形象照片……实际上，覆盖了“直接－间接”维度上的一个区间。

现有的互联网产品就是这样一个个区间，或者点，或者面，或者…嗯，怎么说呢？看下面的图吧。

众多的互联网产品有些彼此距离较远，有些彼此距离很近，有些部分重叠，也就是所谓的竞争对手。在整个图中，有些地方产品的密度较高，有些地方则比较空旷。那么，在空白的地方插一脚显然要比在满是对手的地方拼命容易很多了。这正是互联网产品创新的一个思路。规模较小的公司往往倾向于这种做法，“绕开大块头的猛兽，去填补空白。”而那些大块头的做法则是不断加大自己的覆盖面积。如果在一个产品上就能实现所有的信息交流需求，对用户来讲，当然比“东市买骏马，西市配鞍鞯”方便多了。这正是大公司的一个优势。

互联网只是实现信息交流的一种途径，除此以外，还有很多其他的途径。
在前面也已经提到了诸如手机之类的终端。如您所知，互联网、个人电脑都只是一种工具，是实现信息交流的一种途径。如果另外一种设备能提供和PC＋web相同的所有服务，并且还具有某些独特的优势，那不是更好吗？是的，比如，手机，就正在朝着这个方向发展，手机上可以浏览网页了，可以使用IM了，可以看视频了……不过，一切都还在进行中，至少目前为止，手机还不是上面所想象的那个理想的设备，至少，在手机上还不能让用户痛快的玩CS。

与手机类似，电视也是一个终端。让电视去实现更多的信息交流方式也存在可能。微软的维纳斯、盛大的盒子，都是针对这个思路的尝试。

某个终端并不是排他的。并不是我们拥有了更强大的手机就不在需要PC或者电视机了。不同的终端在不同的情景中会有自己的优势。更为理想的情况应当是，当我坐在电视前就可以用电视搞定一切。当我钻进被窝里，就可以用手机为所欲为。实现各种信息交流都不再局限于某种终端。手机、PC、电视机或许还不够呢。

当然，目前为止，和您一样，我也还是用电视机看电视节目，用手机打电话的。可是谁知道若干年后，烟灰缸会不会成为一个新的信息交流终端呢。

关于这个问题，在《About Face 2.0》中有详尽的分析，分析得出的结论是：使用图标能提高中间级用户的使用效率；而使用文字，对于新手用户更合适。这里所说的“新手用户”是针对某个特定界面而言的，并不是指缺乏电脑使用经验的用户。中间级用户也是如此。

新手用户对于界面的认知十分有限，多数情况下，不知道特定图标的含义。当我第一次使用Word软件写文档的时候，“哪个是‘粗体’功能？”我只能用光标一个个的去试探，还好，第一个图标就是了。要使用这些功能，鼠标经过时显示的文字对我更有帮助。

用户对软件更加熟悉后，逐渐变为了中间级用户，图标就更方便了。因为，文字本身并没有视觉传达功能，用户不能只通过识别字形就猜出它所表达的含义。即使是中文也做不到。中文是从象形文字演化发展而来的，每一个字都能独立的表达一定的含义。但是，演化到现在，中文已经不是象形文字了，不能完全实现图标的功能。

图标是有视觉传达功能的。“那个功能是绿色的，圆的，在工具条中间偏左……”。

一个中间级用户可以通过这样的记忆找到Word的“插入超链接”功能，而不需要阅读具体的说明文字。

软件的设计是针对中间级用户的（—Alan Cooper），而web的设计却不是。

web界面设计需要针对新手用户。
web界面面临的首要问题是：“告诉用户有这么个功能”。而“如何更快捷的找到这个功能”退居到了第二位。虽然，软件界面设计也同样面临着“告知”的问题，但，与web相比，软件对用户的黏性更大，用户不会因为某一次没有在Word中找到“居中”功能，就放弃使用这个软件了，但却会很轻易的放弃访问一个网站。

与软件相比，用户在网站上要完成的任务往往不那么重要，因此，愿意为之所付出的学习成本也就会更低。用户会为了学习使用photoshop钻研上几个月，甚至还会报上个什么培训班。但是，却不会在flickr的图片编辑工具上花太多心思。

所以，flickr的图片编辑功能都有文字说明。
ps:上图中的照片是青海湖，位于我国青海省，异常美丽的内陆咸水湖。

用户会为了第二天的报告而一整天都面对着PowerPoint，但是，却不会一整天都面对着新浪的新闻中心。web界面面对的用户更加缺乏耐心，所以，web界面需要更直接，让用户学习的过程更短。更多的使用文字，把要表述的功能直接呈现给用户，往往效果更好，比如google，

如果使用图标，Gmail的界面看起来会更简洁、美观。但是，那样的话，Gmail就不会象现在这样“好用”了。和其他web界面一样，Gmail的用户主要是“新手用户”。即使每天都使用Gmail收发邮件，Gmail对于您来说也不会比网页浏览器更常用。（这是显而易见的，您需要使用网页浏览器来访问Gmail，只要另外再访问一个其他什么网站，您使用网页浏览器就会比使用Gmail界面更频繁了。）所以，同样是表述“刷新”功能，Gmail界面用文字，而网页浏览器用图标。鉴于目前对google的溢美之词过分泛滥，我们就此打住好了。

当然，web界面中并不是只能使用文字而不能使用图标。对于某一个网站，有些链接或功能是用户要经常用到的。此时，用户确切的知道界面上有这样一个功能。恰当的使用图标，可以缩短用户操作时间。Yahoo.com首页左上角就设计了3个自定义的图标位置，并为其网站的27个重要频道设计了图标，供用户选择。

但是，如果不能正确认识图标在web界面中的作用，那么，将会造成图形元素的泛滥。不幸的是，目前，我们的网页设计经常是这样。

图标被毫无节制的滥用，那些原本有价值的图标被淹没在众多“网页设计素材”中。类似界面的设计师们不仅没有意识到web界面中，图标和文字链接给用户带来的不同体验，甚至其中有些人还只是把图标当作页面上的装饰元素。当然，设计出类似界面也许是迫于某些压力。（噢，好像又要说到公司老板和客户了。不是说您，不是不是，绝对不是，别多心。）

在web界面设计中，要使用一个图标，需要确定，不会因为使用这个图标而让用户找不到这个链接了，并且，需要确定，这个图标确实能让用户更快捷的找到这个链接。图标并不总是能让界面更易用。

面对“是否需要使用一个图标？”的问题，首要的判断依据不是界面的视觉表现是否需要，其次的判断依据也不是视觉表现的需要，最最次要的判断依据仍旧与界面视觉表现无关。

在英文网站中，一个文字列表可以简单直观的按首字母顺序排列，而中文网站中的文字列表应该按什么顺序排列呢？

目前，中文列表排序最常用的方法是按拼音的首字母。然而，汉字必定是汉字，视觉表现上始终不是字母。也许看到“中国”这两个字你很快就能反映出它们的拼音是“zhongguo”，但是，在界面中却从未出现过任何一个字母。无论用户对中文文字与拼音之间的对应多么熟悉，按拼音首字母顺序排列始终是间接的。

在一个中国各省、市、自治区的列表中，用户要想找到“湖南”，需要先想到“hunan”。然后，有选择性的在头脑中拼写其它若干个条目的拼音“guangdong、guizhou、hubei…”以确定“hunan”的位置。当然，前提是用户要知道26个字母的排列顺序。还好，全部的省、市、自治区加起来只有30多个……与之对比，一个英文用户，查找美国50个州中查找“Minnesota（明尼苏达州）”：

……
Kansas
Kentucky
Louisiana
Maine
Maryland
Massachusetts
Michigan
Minnesota
Mississippi
Missouri
Montana
Nebraska
Nevada
New Hampshire
New Jersey
……

即使，他（她）不知道Minnesota确切的拼写，也知道要在8个首字母是M的条目中挑选，找到那个看上去最象Minnesota的单词就可以了。在选择的过程中，用户也不需要完全读懂每一个条目，只需要阅读前几个字母，确定它不是“Minnesota”就可以了。当然更不用把每一个条目翻译成其它什么语言了。

与英文用户相比，中文用户的操作难度要大的多。

确定的内容与不确定的内容：

列表从内容属性上可以分为“内容确定的列表”和“内容不确定的列表”两类。上面的例子是内容确定的列表。用户确信列表中一定会有“湖南”，对自己要找的目标有百分之百的信心。对于这样的列表，用户即使通过浏览一下子没能找到目标，也不会丧失信心。

内容确定的列表中有一类比较特殊的例子：品牌列表。

品牌本来应该是一类很固定的内容。但是，同样是因为中英文对照的问题，使得品牌的列表也不那么容易表现了。上图是众多数码相机品牌的列表，国外品牌往往都有一个中文名，比如，nikon的中文名是“尼康”。这原本是为了方便中文客户的识别与记忆。但是，在产品的列表中却给用户带来了一些麻烦。当用户试图在品牌列表中寻找这个品牌的时候，是应该寻找“Nikon”，还是应该寻找“尼康”？一个目标对应着两个表述，中文用户，乃至所有的非英语用户，都面对着双倍信息量的列表。

上图中的例子应该算是一个处理的较好的例子。当用户看到这样一个列表的时候，能迅速的了解到“这个列表中的条目前面是中文，后面是英文。”

不过，偏偏有一些“走国际化路线”的国内品牌只有英文标识，比如，TCL、UAT…噢？竟然是国内品牌；而象“DEC中恒”这样中英文混合的品牌标识，则似乎是故意在给设计师找麻烦。

如果上面的列表中能提供品牌的logo或许会更好，logo是一个品牌的视觉传达，用户可以仅通过色彩或形式就找到自己的目标。

图像化的logo显然比文字更容易吸引用户的注意力，与图像化的“Canon”相比，中文“佳能”两个字就比较不现眼了。如果一位用户对这个品牌logo并不熟悉，只是知道“佳能”这么个名字，那么，这里硕大的红色英文标识，不仅没有帮上忙，反而起到了阶级敌人起不到的作用。

另外一类是“内容不确定的列表”，这类列表中的内容完全是由设计者确定的。内容的不确定，使得查找更加困难了。

以sina首页上的导航为例，

导航栏中共有14×4＝56个栏目，这些栏目要如何排列呢？

假设这56个栏目标题是按照拼音首字母顺序排列的，当用户想要到这个网站上买一个数码相机的时候，或许他（她）认为这个网站上应该有一个叫“购物（gouwu）”的频道，但是，在拼音首字母是F、G、H的中文频道名称附近却找不到这个“购物”。于是，他（她）意识到猜错了，“或许是‘买卖’？”，当然，他（她）又猜错了。也许他（她）第三次会猜到正确答案—“商城”，但是谁能保证他（她）不会猜成“拍卖”呢？

实际上，用户在开始猜测前往往都已经预想到上面所说的情况了，所以在选择条目的一开始就会是“猜测＋浏览”的方式，一边搜寻着自己的既定目标，一边分析着现有条目与自己目标的差距。

既然按照拼音首字母排列并不能给用户带来多大的便利，那索性就按其他什么规则好了。

如上图中所示，排列的规则似乎是根据用户的访问频率，加上sina市场推广目标，再加上其它一些我们猜不到的规则。顺序也不是简单的从左到右，从上至下。

当然，英文网站同样存在着类似的问题。不过，由于单词首字母与单词本身联系紧密，再加上英语词汇的贫乏，使得上面的问题并不象中文网站中这么突出。

不同的表现方式：

列表有很多的表现方式， 比如，下拉列表。来看看Monster.com首页右下角选择国家的下拉列表：

“有怪兽，有怪兽，有怪兽，缠～著我，有怪兽，大怪兽，丑怪兽，粘～著我……”“安静！安静！ 嗯，嗯，下面继续……”

下拉列表中共有233个备选项。显示区域同时只能显示30个条目，用户要在这样艰苦的条件下选择自己的目标，听起来难度似乎仅次于在大海里捞一根红河牌香烟（谁会为了捞一根针跳到海里呢？）但是，实际上，备选项是按首字母顺序排列的，每一个用户都清楚自己的目标，只需要按照字母顺序查找。即使是一个土耳其人（Turkey），不知道字母T排在S后面，当他拖动列表时，也是很容易找到字母T的，因为所有T开头的国家名都排列在一起。较多的条目反而在一定程度上帮助了用户确定目标范围。

flickr中tags栏目创造出了另外一种列表的表现形式。

这个页面中的“All time most popular tags”显示了被使用频率最高的145个tags，按首字母顺序排列，被使用频率较高的tag字号较大。首字母和使用频率这两个特性分别以空间上的先后和大小来表现，整个列表简直可以称为是一件文字艺术品（typegraphic）。

BlogBus的“热门tag”页也使用了类似的表现形式：

字号大小同样代表被使用的频率。但是，这些tags是按什么顺序排列的呢？我确实猜不出。但似乎应该是有规律的，因为，至少英文是排在前面的。

“请说出上面列表中词的排列顺序。限时30秒。”一道多么好的智力测试题，开心词典节目为什么没有出过这道题？

或许设计者认为根本没有必要让用户知道热门tags的排列顺序，不过，面对这个列表，总是会让人想起东施愁眉苦脸的表情。

问题要如何解决？

列表条目之所以需要有固定的排列顺序，是因为列表中有大量的项目，用户很难在大量的、无序的条目中找到自己的目标。

如果找不到足够好的排列规则，尽可能的减少列表中的项目或许可以算作一个解决办法。如果列表中的项目足够少，那么，用户则不需要按照某种既定的排列顺序了。对于类似sina导航这样的问题，似乎是可以通过减少条目来解决。

内容确定的列表该怎么办呢？如果要将全世界200多个国家和地区用中文显示，如何排列才是足够方便的呢？我们无论如何也没有办法减少其中的条目数量。

如果精简备选项是个好主意，那么可以将这些不可增减的备选项分组，这样，每一个组中的备选项则会少很多了。但是，这个表现方式的实际效果却并不理想。组的名称给用户带来了额外的负担。比如，将全国的省、市、自治区分在不同的“地区”中：“华北”、“华中”、“华南”……江西省是在华中还是在华南呢？分组的做法对于下拉列表更是挑战，如果下拉列表中的备选项被分组了，下拉框由一个变为两个，先选组，再选具体项，这将意味着用户永远无法同时看到所有备选项。所以，分组通常不是个好办法。

中文排序问题到底怎么办呢？或许今夜梦回原始社会能遇到仓颉，该叫他老人家教我个好办法。

几千年前的老祖宗们在造字的时候，竟然没有考虑到中文在电脑上应用的问题。所以，几千年后，我们这些互联网时代的倒霉蛋儿自然责无旁贷。希望中文在电脑中应用的种种问题能在我们这个时代就解决掉。几千年后，当中国人面对那些现在根本想不到的高级设备时，不会再为中文问题发愁了。

另外，如果哪位知道BlogBus的热门tags的排列规则，请在评论中教我。

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
本文于2006年4月3日发布于蓝色理想

“网易部落（bulo.163.com）”是网易为用户提供的blog服务。本文是受约为“网易部落”后台管理部分做的评测。据说，网易部落近期要改版，希望我的拙见能起一点儿参考作用。

评测的内容主要是用户的blog后台管理界面，在必要的时候会涉及到相应的前台显示界面。

这个评测中不包含：

1． 用户登录问题。网易部落是网易提供的众多服务之一，这些服务彼此交错，要评测登录问题，需要对网易的全部产品有一个整体的了解。目前，我对网易产品的了解十分有限，所以，没法分析清楚，更提不出有建设性的意见。

2． 技术问题。类似“搜索结果不准确”这类的问题，我相信网易的同行比我了解的更清楚，也正在努力的去改善。我这里就不再喋喋不休的了。

3． 可访问性问题。因为，页面底部已经注明了“请使用IE5.5以上版本的浏览器访问”，所以…也就没什么可说的了。只是…这样的要求实在不合理。Blog是web2.0的先锋，web2.0的目标之一就是为了提高可访问性。希望在改版中能更多的考虑可访问性的问题。

当然，还不包括很多别的，我暂时还没想到。

下面正式开始：

整体功能构架问题：

目前，网易博客所提供的功能信息树大致如下：

―――――――――――――――――――――――――――――――――――――――
●发表文章

●个人信息
●快速设置
●修改昵称
●修改头像
●修改标题
●设置个性化域名
●查看博客页面

●详细设置
●修改密码
●自定义连接阿
●访问量统计
●留言管理
●绑定手机

●文章管理
●文章列表
●专辑管理
●首页设置
●我的参与文章

●我的朋友
●朋友列表
●验证朋友
●我的黑名单

●我的纸条
●未读纸条
●纸条记录
●写纸条

●圈子管理
●我的圈子
●我要创建圈子
●圈子基本常识
●部落圈子地图

●模板设置
●页面风格
●页面布局
●页面调整
●页面效果
●保存设置
●恢复默认

● 我的相册（直接跳转至网易相册）

―――――――――――――――――――――――――――――――――――――――

整个功能信息树的分布中，有些只有一级，比如，“发表文章”功能，而有些则有三级。功能信息树的分布不均会给使用造成一些麻烦。有些功能只要点击一次就可以使用了，有些则要点击三次。

如果，用户需要管理留言，则需要先进入“个人信息”，再点击“留言管理”。这不仅仅是多一次点击的问题。“留言管理”功能在“个人信息”中，“为什么会在这里呢？留言是一种个人信息？我的纸条却不是一种个人信息？”

窄而浅的信息树是每个设计者努力追求的，当信息量较大的时候，“深”还是“宽”就成了一个难以权衡的问题。我们上面看到的这些功能原本并没有层级关系。为了使信息树不至于太宽，设计者需要将一些比较相近的功能合并到一起，使得树略微深些。在合并的过程中，如何掌握相似性是最重要的。如果设计者与用户的理解差异较大，则会出现上面例子中的问题。

网易部落现有的功能，如果能适当合并一些功能，使之在一个页面中显示，将减少整体的功能数量，比如，快速设置中的多个功能。适当加宽信息树可能是另外一个好办法。也就是，增加一级栏目，这样做并不见得总是错的。相反，猜测一级栏目的含义并反复进入更深的子栏目中寻找，对用户来讲可能是更麻烦的。

整体功能构架的显示上，目前，页面最上端黑色的功能条中提供了部分一级栏目的链接。对于象blog这样一个功并不算太多的界面来说，无需做“醒目的常用功能＋完整的功能列表”的设计。对于Microsoft Word这样的软件界面是合适的，并不意味着blog界面也需要。并且，目前在黑色工具条中提供的功能并不比列表更显眼。相反的，彼此不相同的文字表述更会让用户迷糊，比如，“博客管理”指向的是“个人信息－快速设置－修改标题”。

功能列表从右到左的排列顺序不符合阅读习惯。还是以“个人信息”为例：用户需要先从右到左的阅读“个人信息－快速设置”，进入“快速设置”后，又需要从左到右的操作其中的5项功能。

更理想的功能构架：

交互设计中的一个原理是“可输出的内容允许用户输入”。将这个原理应用于blog的管理界面，可以理解为：后台管理与前台显示保持一致。这样，后台界面这个可输出（可显示）界面中的内容则允许用户输入了。例如，用户需要管理留言时，只需要在显示留言的地方找，就能找到“留言管理”的链接了。前面所说的“适当加宽信息树”也就不会给用户造成更多的负担了。

对于一个浏览blog的用户，blog上的多个单元是可以接受的。浏览者知道最大的列表是日志列表，最新留言、最新评论、访问量统计等都在较窄的一栏里。那么，对于管理blog的用户也可以接受相同的功能安排。管理日志就通过日志列表来操作，修改个人档案就在显示档案的地方，修改整个blog的名称就在页面最上端显示blog名称的地方。将十几个功能的链接做成一个列表，用户选择起来是比较困难的，但是将这十几个功能安排在它们他们本来的位置上，问题就解决了。

技术的发展使得web界面更趋向于软件界面。在软件界面中“可输出的内容允许用户输入”的原则无处不再。在photoshop中，给图片添加一行文字，操作过程中，用户看到的就是文字最终显示的效果。然而，对于软件的设计者来说，让文字单独显示在一个文本域中是更容易实现的，更符合技术模型的，但是，那样将使用户的使用难度加大。一些交互设计上更出色的BSP正在努力的使管理界面与浏览界面尽可能的保持一致，比如，yahoo 360，MSN Space。

当然，“后台管理与前台显示保持一致”的设计将增加开发成本，photoshop将这些困难留给了软件开发者，而网易部落将困难留给了用户。

下面依据网易部落现有的功能划分，逐个功能分析界面中的问题：

发表文章：

1． 标题的表现方式不统一。发表文章部分的标题背景图，标题文字的字体、颜色都与其他页面不同。多数页面的标题在页面的左上角，发表文章部分的标题在右上角，似乎是因为在这个页面中，右上角有一块儿空地儿。背景图片上，看不清的一篇英文除了“丰富”页面视觉效果，并没能发挥其他作用。遗憾的是，页面上多了个图画并不能使用户的使用体验更愉悦，用户只会因为页面上多了一个元素，而操作效率更低。

2． 注释文字“不能超过25个中文”。此处使用一个红色背景的惊叹号图标，类似的图标原本表示严重的警示。在整个部落中，注释文字普遍使用了这个图标，显得过于夸张了。

另外，注释文字的位置缺乏统一的安排。这里的注释文字出现在标题右侧，而下面两个关于正文的注释则出现在被说明对象的下面。

3． “管理专辑”链接。当用户希望把文章归入一个新的文集的时候，需要进入“专辑管理”功能。用户建立了新文集后，页面仍旧返回“专辑管理”中，在“发表文章”页面中并没有显示新建立的文集，只能通过刷新页面才能显示，而刷新过页面后，原先用户录入的文字也会被刷没了。如果用户是在发表文章的最后一步才决定将文章归入到新文集中，那样，损失会很严重，用户很生气。

此处的小标题是“归入文集”，但是，在后面的文字链接是“专辑管理”，所指向的页面也是“专辑管理”功能。称谓上的不统一会使用户更难理解。

4． “摘要最大字数为127个中……”，此处的文字说明，也是注释性质的，与其他加惊叹号图标的文字性质相同，却没有加惊叹号图标。

没有提供“不显示文章摘要”的功能。

5． 正文字体。正文字体缺少英文字体。

6． 两个添加图片功能。第一个图标是正常的添加图片链接的功能；第二个图标指向网易相册。如果是为了推广网易相册，应当让它在这里的表现更出色。机械的加入一个网易相册并不是方便用户的好方法，只会让用户不知所措。对于用户来说，无论是通过URL地址还是通过网易相册都只是给自己的日志中加入了一张图片。

“插入图片”的图标上有一个黑色三角箭头，通常三角箭头表示有下拉列表，或许，部落的设计者也想到了将“插入网易相册中的图片”功能合并到第一个“插入图片”中来，并用下拉列表显示，只是还没有实现这个功能，先改了图标。

7． “文章内容不能超过32000个中文……”且不说这样的要求是否合理，只说这32000，用户怎么数清楚到底是多少字呢？并不是所有用户都会使用Word中的“字数统计”功能，并且，即使是用户会用，也没有理由要求用户这样做。

如果必须要对输入的文字数进行限制，应当提供更方便的功能，比如，显示剩余字数。仅仅将自己的技术要求甩给用户不仅是无礼的，有些时候也是用户很难做到的。

8． “确定”与“取消”按钮的表现形式。部落中的按钮普遍采用了经过样式表设置的系统按钮，只有“确定”和“取消”按钮使用的是图片。采用更相似的按钮会使用户更容易识别。“部落中的按钮是单色的、有各种按钮状态的、无装饰的…”

“确定”按钮显然是引导用户点击的，现在的“确定”按钮却比“取消”按钮更小、对比度更低。

9． 没有traceback，没有tag。Blog失去了很多根本的特征。

个人信息：

1． “快速设置”真的快吗？“快速XXX”往往被理解为对于复杂操作的一种提炼，比如，快速登录，用户将不需要进入登录页面，直接在现有的输入框中就可以完成登录。再比如，window系统的快捷方式。此处的“快速设置”并不是对下面“详细设置”等5个功能的提炼。或许是因为“快捷设置”中的五个步骤是按照一个所谓的用户流来设计的，用户操作起来更快速，所以才起了这样的名字。这个所谓的流真的能使操作更快速吗？

2． “快速设置”中的5个步骤。对于用户来说，修改这些设置没有必要按照这5个步骤来操作。难道一定要先修改昵称才可以修改头像吗？必须把前4个步骤都完成才能“查看博客页面”吗？

3． 快速设置中，修改昵称。“修改后的昵称将在哪里显示？这是个大问题。”用户要修改昵称，意味着用户希望在自己的blog中以那个称呼出现。所以，浏览界面中所有出现作者名字的地方都应该是这个昵称，而不要在留言板单元中继续使用用户原先的登录名；所以，应该允许用户以自己的填写的昵称显示，而不是擅自给用户填写的昵称后面加上“@-XI-I”之类的无法理解的标记。

4． 点击“确定”意味着用户认可现在的输入结果；点击“跳过”意味着用户不希望在本页面进行操作。在部落里，修改昵称页面中，不修改则不允许点击“确定”，因为“新昵称和旧昵称一样”，噢？！要怎么分析这个设计问题呢？据说为了论证“1＋1＝2”这个命题，数学家们绞尽了脑汁。论证公理是很困难的，我还是量力而行吧。

5． 快速设置中，修改昵称里，“昵称不允许重复！”怎样算是重复？我将昵称改为“臭鱼臭鱼”算不算重复？如果只是不允许与其他用户的昵称重复，那应该在用户输入后自动检测并告知用户检测结果。有使用惊叹号的必要吗？如果“重复”了，也不过是再输入一个别的昵称罢了，电脑不会爆炸的。

6． 快速设置中，修改昵称里，“昵称不能超过6个汉字……”但是输入框中却可以完整的显示10个汉字；“1汉字为2个字节”这是一堂电脑知识普及课，但用户根本不需要知道这个。

7． 快速设置中，修改头像。从“Browse…”中选择了图片地址，点击确定，经历了一系列弹出窗口后，页面转到了下一项“修改标题”。可是，我上传的图片是怎么个效果啊？快速设置中，这个5步的任务流还没有真正满足用户的任务需求。

8． 快速设置中，修改标题里的称谓问题。标题的表述是“3.修改标题”，文本框前的提示是“博客主题”。

9． 快速设置中，设置个性化域名。域名只允许修改一次。当用户修改过域名之后，以后就再也不能修改了，这项功能就成了永远没有用的一项功能，那么它为什么还总是会出现？并且是出现在一个设定好的设置流程中。

10． “详细设置”中，称谓问题。浏览器上的title显示“详细设置”，左上角的标题是“个人详细信息”，称谓同意的问题总是出现，还会出现。

11． 详细设置里，“生日”项，“填写后将不能修改”。部落里总是暗藏着这样可怕的选项。

12． 详细设置里，设置简介是否显示。“个人简介默认是不在个人主页上显示的，如果需要显示请在页面布局处设置。”填写简介的地方却不可以设置是否显示，在这里写了33个字，却只是告诉了用户“办这个事儿，要去那里。”此处，用户只是需要一个复选框能够自由设置是否显示简介。

13． 详细设置里，“当前头衔：幼儿园”，幼儿园三个字是不可以修改的。上面三项：性别、生日和简介的右侧内容都是可以修改的。

“参加圈子”后面有下拉框，但是，里面没有选项。“如果我想参加一个圈子，应该怎么操作？”这里提示了用户可以参加圈子，但是却没有提供进一步的功能。

“可选头衔”是幼儿园，只有这样一个选项。下面说明了关于头衔的问题，但是，“头衔说明”怎么会和前面那些可输入项的表现方式一样了呢？头衔说明的内容是一项注释文字，应该是那种带惊叹号的啊？

14． 详细设置里，页面中的两部分内容分别有两组“确定”和“取消”按钮。这是图形用户界面设计中一个典型的错误。如果，用户不仅修改了“简介”还修改了“参加圈子”，应该点击哪个确定按钮呢？

15． 修改密码页面只是告诉用户“去那里完成这项操作”。本身并没有实现修改密码的功能。前面也出现了类似的问题。部落的后台管理是一个管理界面而不是一个功能索引界面。将网易的其他服务或部落自身的功能有机的结合在一起是产品设计中很重要的工作，时髦的说法叫“整合”。就是要给它们整到一起，而不只是链接到一起。

16． 自定义链接界面中的小标题。当前如果没有自定义的链接，注释文字“链接数量最大为100个”下面只显示“链接名称”四个字，没有其他内容。“链接名称”这个小标题显得孤苦伶仃，并且无法理解。

17． “自定义链接”这个称谓本身值得商榷。对于浏览用户看到这个标题只能知道这一部分是blog作者自己设定的链接，并没有传达出更多的信息。实际上，这个“自定义链接”就是通常的友情链接。网易部落似乎总是在创造着新的概念，从“部落”这个概念本身开始，“圈子”、“自定义链接”……合理的功能创新可以方便用户，适度的图形界面创新可以吸引用户，但是过多的文字概念创新只会督促用户去好好学习。

18． 管理现有自定义链接的方式不合理。对于各个条目都具有的相同操作，合理的设计方法是：复选框＋功能按钮。而不是每个条目都伴随一组操作按钮。

19． 留言管理，打开了新窗口。上面几个按钮可没打开过新窗口啊。

20． 留言板页面的入口在哪里？在前台浏览界面中添加浏览后，转入一个留言板的页面，但是在blog的首页上似乎没有这个留言板页面的链接。

21． 自动登出后，管理留言板。用户登录后，进入后台管理，之后，由于未操作时间过长，自动登出。此时，从后台界面中点击“留言管理”按钮，页面将转入没有管理功能的留言板页面。用户并不知道自己已经登出了，看到的只是没有管理功能的留言板。（登录功能比较庞杂，我没有进行系统的测试，不多说了。）

文章管理：

1. 文章管理里有4个二级栏目，其中前两个的页面中有标题，后两个没有。前面的“个人信息”部分也有这样的问题。

2. 文章列表页中，列表的上下都有的相同的“删除”和“移动到专辑…”功能。这是在列表较长时，为了方便用户而设计的。原本是很好的做法，但是现在的实际情况是：上下的表现方式不完全一致。用户需要经过观察、对比才能明白，“原来下面的功能与上面是一样的”。

3. 文章列表页中，“移动到专辑…”功能，表现方式不理想。由于使用了类似与“删除”功能的表现方式，用户会出现直接点击文字的误操作。（有待具体的用户测试来验证）

4. 文章列表页中，“跳转至XX页”。但是，页面上却没有写共有多少页，当前是第几页。并且，不知道如何提交。

5. 专辑管理页与自定义链接页操作相似，问题也相似。值得一提的是，注释文字中提示的“专辑数量建议不要超过6个”。过多的专辑会使页面显示出现问题，或许能想出更好的办法解决，甩给用户总不是给好办法。用户要遵守的规矩已经太多了。

6. “首页设置”这个功能的标题表述的不清楚。如果不打开页面看到里面的内容，恐怕多数用户猜不到这里面的功能。

7. “首页设置”里，显示数量的默认值是“0”。难道不在这里进行设置，blog浏览界面中将一篇日志也不显示？而实际效果并不是这样。或许这可以归为一个技术问题吧。那就不多说了。

8. “我的参与文章”，标题没有表述清楚。“我的Blog中的文章都是我写的，为什么我的参与文章竟然一篇也没有？”

我的朋友：

1. “朋友列表”中的用户ID。在“朋友列表”中，要添加好友则需要输入用户ID，但是从用户第一次申请“通行证”开始，到用户日常的登录，始终没有出现过“ID”这个概念。ID是什么？是不是跟IC、IP、IQ之类的差不多？当用户不知所搓，打算离开的时候，却找不到“返回”按钮。

2. 在“朋友列表”中，“搜索好友”的功能。没有说明是在用户现有的好友列表里搜索，还是在整个网易用户中搜索。

3. “验证好友”。要给一位好友发纸条，要给一位好友捐赠，要“加黑”一位好友、要删除一位好友，要添加一位好友，要搜索一位好友都是在“朋友列表”页里完成的，唯独要验证一位好友却要在另外一个页面中操作。

我的纸条：

1. 标题的称谓问题。“未读纸条”、“纸条记录”和“写纸条”，三个界面中，只有“纸条记录”界面左上角的标题能与右侧相应的按钮对应上。

2. 三个界面顶端都提供了部分与右侧按钮相同功能的链接。或许在页面顶端增加功能链接是为了让用户更方便的找到需要的功能，然而，减少页面上的元素或许是更好的方法。

3. 在“写纸条”中，“从好友列表里添加”将进入“朋友列表”（再次出现了称谓问题，朋友还是好友）。如果用户先写好了纸条内容，再通过“从好友列表里添加”选择好友，那么，纸条的内容将无法保留了。

“我的朋友”与“我的纸条”的关系。“我的朋友”类似与一个B/S结构的IM产品，有朋友列表，还有黑名单，俨然一个QQ的建制。在“我的朋友”列表中，可以给不同的朋友发纸条。对于“我的朋友”来说，发纸条类似于在线或者离线的留言功能。单独看“我的纸条”部分，可以将其理解为一个简单的邮件系统，朋友列表则是邮件系统中的通讯录。这两种理解方式都有一定的合理性。无论以哪种方式理解，至少应该承认，纸条功能与朋友功能联系是很紧密的。那么，如果能把这两个功能和而为一，则可以简化功能信息树，简化界面，更易于用户理解。唯一的损失恐怕就是部落里将减少一个陌生的概念。

圈子管理：

从约这篇稿子的“小混”那里了解到：网易部落不只是博客，还包括圈子。那么，大概可以这样理解：网易博客＋部落圈子＝网易部落。之后又阅读了关于“圈子基本尝试”的那篇帖子，里面说到：“部落圈子是网易博客的特色……”。那么，部落圈子应当是网易博客的一种功能。一个北京市加上全中国等于什么呢？只能还是全中国。这样说来，网易部落＝网易博客。到底是部落还是博客，我始终没能弄明白。

之所以在这里字句推敲的考量这几个名词是因为，对于用户来讲，这实在是个基本需求。用户需要知道自己到底是在哪里，在做什么。网易博客为了强调自己博客的独特优势，额外制造出了“部落”和“圈子”这两个概念。或许这样可以吸引来更多好奇的目光，但是，一个难于理解的产品很难真正得到用户的认可。

由于对圈子的实际功能我没有做什么具体的测试，所以，下面只能就界面表现提几点肤浅的建议：

1. “圈子管理”的缺省页。进入一级菜单的“圈子管理”，缺省项是二级菜单中的第一项，名字还是叫“圈子管理”，并且页面中没有实际内容，只是提示：“请在子导航选择你需要的功能操作！”实际上，第一次点击“圈子管理”对于用户是毫无意义的。只是获得了选择二级菜单的权力。之后的四个二级菜单按钮都是新打开一个浏览器界面显示的。这恐怕就是建立一个空白的缺省页的原因吧。毕竟到目前为止，部落里的其他功能都是在同一窗口中打开的。到了这里，用户在部落里刚刚建立的使用习惯被打破了。

2. “我的圈子”上面的工具条。工具条里为了“我的圈子”新加了功能。这应该是在新窗口中打开的原因之一吧。不过，这个做法的效果却并不太好。用户在部落其他的页面中已经形成了对顶端黑色工具条的认识，知道工具条上有哪些功能了。这个时候，在工具条中加入新的功能，用户并不容易注意到。

3. 点击进入“部落圈子地图”，新窗口中是“部落地图”页面（称谓问题又出现了）。圈子从功能上分为系统圈子和个人圈子。从页面上显示的内容分类上，又有“个人圈子、部落推荐圈子、专业圈子、原创圈子”。即便是看过那篇基本尝试的帖子，恐怕也不容易一下子就弄清楚圈子不同属性间错综的关系。

模板设置：

1. “模板设置”中的前四项功能，四个功能修改同一个页面。这四个功能都是用于改变浏览界面视觉效果的。改变的是同一页面的效果，但却在四个不同的界面中操作。这如同在photoshop中，每一个图层都是单独在一个窗口中显示。如果photoshop真的是这样的操作，恐怕Adobe早就倒闭了，而网易部落则没有。如同设计者还没有充分意识到web交互设计的重要性一样，用户也还没有意识到。

2. 前四个功能的标题表述不清。这实在是一个很难解决的问题。因为这四个功能都是完成一个任务的，只是由于功能表现的局限，才强行将“调整页面显示效果”这一个功能分成了四个。标题表述上的含混不清，使得用户无法通过标题名称找到自己想要的功能。只能是逐个尝试，并希望自己能有好运气。

3. 标题中的英文。在其他页面的标题中也出现了英文，但是都比较小，“模板设置”部分的英文相对比较突出。显示英文的意义何在？为了英文用户？显然不是。如果加入英文只是为了装饰，那我建议可以改为加入阿拉伯文，毕竟认识阿拉伯文的用户会更少，翻译错了也没关系，并且阿拉伯文本身也有很强的装饰效果。

我的英文水平不足以判定这些标题翻译的是否准确，但是“页面调整”和“页面效果”都用adjust，至少有一个翻译的不合适吧。

至于“保存设置”页面使用了和“页面风格”页面一样的标题，那只能说……怎么说呢？这就如同小学的时候，分析自己考卷中出的错误一样，总是分析不出什么，最后，只能归咎于粗心了。

4. “页面风格”中，只提供了一个按钮—“提交并查看页面效果”。如果不提交则无法查看页面效果。可是如果不先看看页面效果，用户怎么决定提交哪一个呢？缩略图只有60×60px，并且只显示了局部，用户需要预览功能。

5. “页面调整”中，页面上部7个备选项的显示效果与下面的表格缺少必要的对应，只通过橙色背景下的标题，用户很难分辨当前是在调整哪个部分。

6. 在“保存设置”页面中保存我的模板，被保存的模板却在“页面风格”页中显示。在工商银行存入的钱，却被打进了农行的存折里了。

7. 前面五个按钮都打开了页面，第六个却没有。第六个按钮“恢复默认”与前五个按钮表现方式一样，按钮中同样也有那个文件夹图标，但是点击它却只弹出了个小提示窗口。“恢复默认”按钮前的文件夹图标是永远也打不开的。

总结：

部落圈子为blog的交流提供了更便捷的方式；将功能拆分细化的设计思路也有很多值得业界同行参考的价值（当然，这种思路运用的不恰当也会产生一些问题，如开头部分所说的那些）。网易部落的成绩不容忽视。当然，部落也还存在不少问题：

纵观网易部落，比较明显的一个问题是：功能之间的衔接不很理想，比如，修改密码问题，朋友与圈子问题…衔接不理想还表现在界面视觉效果上，各个功能页面之间缺乏统一性，标题的统一、按钮的统一、称谓的统一。

部落的另外一个问题是：创造新概念。部落里提供了太多的新概念，圈子、纸条、文集……对于大多数中国互联网用户来说，blog本身就是一个全新的概念。当用户们试图了解blog的时候，却发现，这个新概念是由其他更多的新概念来解释的。这使得用户的学习过程无止境的延长。

预祝网易部落即将开始的改版成功。

在IE6中，当向下滚动滚轮时，则页面被“拖拽”长了。用户会很容易记住滚轮滚动方向与页面变化之间的关系。在IE7 btea中，当用户向下拖滚轮的时候，页面的显示比例变小，页面向上运动，缩小了。即使不考虑老IE用户的使用习惯，这个操作至少也不容易让用户正确的记住滚轮滚动方向与页面变化的对应关系。

一个构造复杂的工具，没有必要向用户完全解释清楚内部的工作原理，而用户在使用过程中却往往需要在某种程度上理解这个工具，以便更好的驾驭。此时，用户往往会以自己的方式来理解这个产品。有可能用户的理解与产品实际的工作原理完全不符，但用户却可以通过自己的理解正确预测产品的使用效果。我父亲称这种做法为“琢磨规律”，在交互设计中成之为建立用户的心理模型。

大部分汽车的转向灯控制器都是在方向盘左侧的后面，一个连接在方向盘轴上的拨杆，向上拨动，则右侧转向灯亮，向下拨动，则左侧转向灯亮。对于第一次接触汽车的驾校学员来说，这是个完全陌生的操作。通常教练是不教学员如何记住这个操作的。不过练习了几个小时之后，大多数学员就都能自如的操作了。学员们各自建立了自己心理模型，而这些模型几乎是完全一致的：要向右转时，方向盘是向右侧转动的，左手是从下向上的运动，所以转向灯拨杆也是从下向上拨，反之亦然。实际上，汽车转向器是通过电路控制的，向上或向下拨只是给出了一个相应的电信号。不过驾驶者却不需要去了解真正的工作原理，通过自己的经验总结，建立这样一个简单的心理模型就已经能完全掌握了转向拨杆的使用规律。这也正是转向拨杆设计者希望看到的。一个良好的设计，使得用户更加容易建立正确、简单的心理模型。如果转向拨杆被设计成类似“手刹”一样的操作，那么无论向上拉是左转向灯亮还是右转向灯亮，恐怕都不容易记住了。当然如果能够使驾驶者方便的左右调节来控制转向灯当然是更理想的。

与汽车相比，电脑上运行的软件显得更加复杂。恐怕只有极少数软件工程师才能真正明白某一功能的工作原理，即使他们能明白，恐怕也不会通过背诵软件开发流程图来记住如何使用软件。

在电脑游戏“魔兽争霸3”中，变换玩家视角的功能也是一个关于心理模型很好的例子。

在游戏的3D场景中，默认状态，玩家是以接近45度的俯视视角观看。向上滚动鼠标滚轮，则视点更接近地面；向下滚动滚轮，则视点远离地面，更接近于垂直的俯视。根据不同的战场情况，改变视角可以更便于观察，对不少玩家来说，这是个常用的功能。

要如何才能记住滚轮滚动方向与视角变化的对应关系呢？“当我要更贴近地面观察的时候，我就去推动整个空间，让显示器向后倾斜。所以我要推动鼠标滚轮。”只需要解释到这里就足够了，向下拉滚轮的操作也已经可以记住了。也许对这个操作你会有不同的理解，只要合乎逻辑并且能正确反应此功能的操作规律，都是不错的心理模型。游戏设计者给出了合适的条件让玩家能总结出简单的、合理的规律。

对于某一功能只存在着唯一合理的操作设计吗？对于“魔兽3”中的这个功能，让我们来假设一个相反的操作：向上推鼠标滚轮，则视点提高，接近于垂直俯视；向下拉滚轮，则视点降低。这样可以吗？恐怕也可以给出合理的解释：“如果我想从更高的视点观察，我需要让眼睛处于更高地位置上，我的眼睛就固定在鼠标滚轮上，需要向上，再向上……”如果这个解释不比前面的解释更复杂，那么我们这样相反的处理这个功能的操作就是可以接受的，合理的。

不过，IE7 beta中的“缩放页面”操作与原先的“文字大小”操作相反的做法，似乎就不那么合适了。向下滚动鼠标滚轮，页面向上收缩。这类似于在开车的时候，向左转动方向盘，则车向右转。或许驾驶者也能为这样的操作给出一个合逻辑的解释，以避免自己操作失误，但是，这个解释恐怕不会比“向左转方向盘，则车向左转”的心理模型更简单。“方向盘与车轮相连，转动了方向盘，则车轮也随之被转动了。”这个心理模型如此之简单，以至于我们根本不需要有意的去建立这个心理模型，便完全可以正确操作。

与“魔兽”的例子相比，IE7有着明确的视觉反馈，用户更容易联想到现实生活中的经验，并且需要此处的操作能符合自己的经验。设计者即使不能为一个功能设计出十分理想的操作，主动地去暗示用户，引导用户创建心理模型，至少也不应该阻碍用户去理解产品。

用户的心理模型往往基于对现实生活的经验积累。我们在打开一本挂历的时候，卷轴随着手向下滚动，可视的面积逐渐加大。所以，IE6中的“文字大小”功能是比较容易理解的。

用户的心理模型是简单的。心理模型是工具与用户操作之间的桥梁，借助这个桥梁，可以更容易的理解并使用工具。心理模型越复杂，它的存在价值就越小。如果心理模型需要用户要花很多的时间进行思考，那么他（她）往往更倾向于通过实践操作来找到正确的使用方法，在实践的过程中，又会总结出新的心理模型，新模型将比旧模型更简单，并且比实践操作来的更容易。

用户最终会忘掉心理模型。创建心理模型是为了更容易的学会使用工具，随着用户熟练程度的提高，逐渐地就不再需要花时间来思考了。操作变成了一种自然的反应。有一定驾驶经验的驾驶者打转向灯之前不需要先考虑“左手要向上运动，因此…”不过，最初的心理模型仍旧是这个操作的基础。因为驾驶者合理的理解了转向灯拨杆，所以，在他（她）后来的使用中能轻松的驾驭这一功能，并且在某些特殊的情况下，当驾驶者再次遇到操作困难的时候，心理模型又会被唤醒。我曾经与一位有多年驾龄朋友饮酒达旦，最后由他开车送我回家，此时，他自然早已经是成仙了，临近一个路口的时候，他是这样说的：“咱们现，现在是该往左转，左转弯儿了，是吧，那就是得这么转（方向盘），所以，就得往这么拨拉（转向灯拨杆），哎，这样，这样就对了，左箭头不是亮，亮了嘛，我跟你讲啊，开车这个是，是有窍门的……”

我在使用IE7 beta中的“页面缩放”功能时，想起了他那天的教诲，写下了这篇小文。

本文是应约为ChinaHR新开发的职位搜索部分（ http://searchjob.chinahr.com ）进行的启发性评估。内容包括一级栏目“找工作”下的“找工作”、“高级搜索”和“分类搜索”。

由于启发式评估通常需要多人分别进行，所以，这里我的评估只能作为一部分不足够客观和准确的意见加以参考。

在进行启发式评估时，测试者采取“角色扮演”的方法，模拟典型用户使用产品的情形，从中找出潜在的问题。我将在整个测试中以一个求职者的身份分别通过ChinaHR提供的“搜索引擎”和“分类搜索”查找“网页设计师”一职。

关于启发式评估的更多介绍请参见：《如何开展一个启发式评估》（ http://www.fjunicity.cn/blog/article.asp?id=89 ）

我将对我所遇到的违反可用性原则的设计进行概括并提供相应的解释，并对部分问题进行适度的分析。

下面正式开始：

在“找工作”中：
（ http://searchjob.chinahr.com/Index.aspx ）

1.一级栏目“找工作”中，第一个二级栏目标题为“找工作”。二级标题重复了父级标题。
这样的重复不易于用户正确理解层级关系。实际上二级标题中的第一项“找工作”可以理解为“找工作”栏目的首页。在二级栏目的第一个位置显示与父级标题相同的文字并且使用相同的表现形式，不利于理解。

将 http://searchjob.chinahr.com/Index.aspx 的链接直接赋予一级栏目标题不仅可以使二级栏目项减少，而且，可以直接通过视觉上的表现表示出不同页面的层级关系。

另外，二级栏目“找工作”有链接，并且指向自身页面。页面中始终不应出现指向自身的链接，除非是有提示的刷新功能。

2.“个人会员登录”单元是否应该直接提供登录功能？
在此页面中应只提供指向登录页面的链接，而无需直接提供登录功能。原则上，登录是用户在提出更多需求时出现的一个附加步骤。应该在有必要的时候才出现。比如，在用户需要进入“我的英才网”的时候，当用户要申请某一职位的时候，当用户需要订阅的时候，转入登录页是合理的。而此页面上的内容并没有引发用户登录的需求。用户并不需要先登录才能使用此页面。正是因为用户没有明确的需求，在此处登录后，显示的两个链接“简历中心”和“订阅职位”显得有些勉强。如果用户需要这两个功能会直接进入“我的英才网”。

对于总是希望处于登录状态的用户，应提供相应的“直接登录”功能，用户可以收藏“我的英才网”，以后访问时，通过收藏夹中直接登录，进入“我的英才网”，直到用户删除了cookie。

时刻提供登录功能并不是方便登录最好的方法。相反的，会给用户造成“英才网时刻在督促我登录”压迫感。能够将登录设计成用户进行某些操作的中间过程，或许效果更好。

3.如果需要保留此处的登录功能,那么“忘记密码”和“新用户注册”应有相同的表现，都有或者都没有下划线。

“让容易被忽略的文字链接随时保持下划线，对显而易见的文字链接只在hover时出现下划线。”这是处理文字链接表现形式很好的方法，但是，需要清楚的界定哪些文字需要随时保持下划线。 www.yahoo.com 是运用这个原则的典范，不妨做个参考。

4.如果需要保留此处的登录功能，登录按钮应向右对其。图形用户界面的规范，不过多解释了。

5.在当前页面登录后，不关闭页面，新打开一个浏览器页面，再次进入 http://searchjob.chinahr.com/Index.aspx ，此页面没有识别出用户是已登录状态。即使用户因为误操作关闭了已登录的页面，重新打开浏览器访问英才网时，也需要网站能记住用户的已登录状态。

6.登录后，此单元中显示“使用之后请务必退出”显得过于“周到”了。过多的文字会加大阅读的负担，只显示“登出”已经完全能表达清楚此处的含义了。

“使用之后请务必退出”与“忘记密码”和“新用户注册”使用相同的表现形式，容易出现误操作。

7.对于未登录的用户，“我曾使用的搜索”单元只能记录此次访问的内容，用户关闭浏览器后，再次访问英才网，并没有记录下之前的搜索记录。长期保存用户搜索记录功能如果只是为注册用户提供的，应该在此处明示，达到引导用户注册的目的。现在所表现出的功能更会让用户觉得英才网提供的功能不够好，反而会打消用户注册的积极性。

8.“我曾使用的搜索”单元中，“搜索”按钮与“保存并订阅”按钮应横向排列。图形用户界面的设计规则。如果“搜索”需要更强调，可以使用更为醒目的视觉表现方式，而不是放在靠上的位置。

9.“我曾使用的搜索”单元中，执行登出操作，搜索记录仍旧显示，再刷新页面后才消失。

10.“我曾使用的搜索”单元中，“保存并订阅”按钮的语义表达不明确。在下面的帮助中提示：“保存现在的搜索条件……”是否意味着，如果不执行此操作，下次访问时，将不保存现有的搜索记录？

在弹出的订阅小窗口中，按钮显示为“保存搜索条件”与原页面中“保存并订阅”按钮不符，在小窗口中的操作是不是只能“保存”而不能“订阅”了呢？

如果希望更多的用户订阅，更清楚的介绍订阅的好处会有效。混淆的表述会让更多的用户因为畏惧而放弃订阅。

11.“我曾使用的搜索”单元中，“（是什么？）”表述不够清楚。按钮更多时候会被当作一个图形元件，将按钮内外的文字连读是一个创新的做法。这与通常习惯的理解方式距离过大了，会给阅读造成障碍。虽然不至于没法理解，但是至少是降低了阅读的速度。

“有下划线的文字是有链接的，点击后将转入另一个页面”这是web页面的基本规范。给有下划线的文字一个漂亮的title属性是用户乐于接受的，但是没有新链接则太不正常了。

12.“搜职位”中，“期望职位类别”加了*号，但却没有解释。特殊的标记需要必要的说明，即使*号比较特殊，常用做“必选项”的标记，此处也应说明为好。在高级搜索页中，是有说明的。然而，即使不选择此项，只输入关键字，也能得到搜索结果。实际上，“期望职位类别”是“期望具体职位”的必选项。

对于有从属关系的表单元件，图形用户界面的规则是：如果暂时不能使用，则显示为灰色，用户不能点击。每个使用过Microsoft Word的用户都见过这样的表现。

“期望职位类别”的*号还不止是这些含义，在“高级搜索”部分还会继续讨论。

13.“搜职位”中，“使用按钮，配合浮动层，并将选择结果显示在按钮之后”，这整个做法过于创新，象“有下划线的文字没有链接”一样创新，不符合网页使用惯例，延长了用户的学习过程。

视觉感受上，用户已选择的内容不如网站提供的按钮更醒目。“在前面选择，在后面显示”用户将第一次在这里得到这样的使用经验。重复的“选择/修改…”字样出现在页面的最显著的区域让人心疼。“以按钮激活浮动层”的做法，我相信Amazon.com在设计他们著名的浮动层功能过程中是讨论过，并且最终被否定了。按钮被赋予的功能是提交表单，用按钮来打开一个层，显然是太冒险了。Amazon.com不愿冒这个险，我想英才网也没必要这样做。

如果是因为选项太多而不便于使用下拉菜单，那么应该精简选项，并增强关键字搜索的功能。因为用户同样不愿意看到太多的选项。选择项对于用户来说只是搜索关键字的辅助功能。

14.“搜职位”中，“期望职位类别、期望具体职位、期望工作地区、 职位名称关键词 ”表述不够简练。“期望”二字没有太大必要。用户访问英才网这个行为，已经表达了“期望”的含义。只写“职位类别”，用户完全能明白了。

15.用户的所选项与关键字搜索的示例区别不明显。相同性质的内容应有相同的视觉表现形式。这是提高用户阅读速度的一个手段。不同性质的内容，显示为相似的视觉效果，则会给用户造成更多的麻烦。

“（是什么？）”与“更多详细分类>>”也存在类似的问题。

16.当我潇洒的输入了关键字“网页设计师”后，更为潇洒的用右手小拇指敲了一下回车，之后，极为潇洒的点燃了一根“红河”，以最大的肺活量吸了一口，接着，仪式性的弹了一下烟灰。持烟而坐，为之四顾，为之踌躇满志。此时才发现，页面根本没有变化。呵呵，太沉闷了，活跃一下气氛。不用多说了，表单“焦点”问题。

17.“搜公司”中的“高级搜索”链接与“搜职位”中的“高级搜索”指向的是同一页面，这个链接并不是一项有差异的功能，不应该放在浅黄色区域中。“搜职位”与“搜公司”各自的浅黄色区域中的内容应该是彼此区别的，这正是标签栏的含义。

18.“搜职位”与“搜公司”功能是否可以合并？
我不了解这样做的技术难度有多大，但是对于用户来讲确实是再正常不过的要求了。使用标签栏虽然避免了单选按钮引发的问题（在《不要拦着我，我要找工作！》中已经说过了），但是，如果我想搜“英才网的网页设计师”职位，就只能进高级搜索了。需要多点击一次。为什么登录那么方便，想搜索就要多点击一下？

19.“搜职位”与“搜公司”的标签栏，在当前栏中的文字都有链接，倒是不能称为指向自身的链接了，因为点击后页面根本没刷新。

这两处文字链接hover时，变为蓝紫色，待选项在橙色背景下，显示得不醒目，不如原先的白色文字更醒目。

20．“职位分类搜索”、“行业分类搜索”和“地区分类搜索”被称为“搜索”是否合适？
对于普通的互联网用户来说，google是搜索，百度是搜索…搜索在用户心中有着特定的模型。另外，文字上的含混不利于用户理解页面内容。“这个页面上是不是一共又四个搜索？普通搜索、职位分类搜索、行业分类搜索和地区分类搜索？偏偏看上去最象搜索功能的单元没有写着是搜索，只写着搜职位和搜公司。”

如果能不考虑文字上的工整，直接叫做：“职位分类”、“行业分类”和“地区”文字表达上或许更清楚。

21．“职位分类搜索”共显示了31个分类，在“分类搜索”的页面共有34类，只差了3个，恐怕不太容易理解。

22.点击“职位分类搜索”中的“经营管理类”，直接进入搜索结果列表页。“经营管理类”下又分了若干子类，但是在“经营管理类”的搜索结果列表页中却没有提供简单的子类列表。

地区分类搜索也有相似的问题。

23．“职位分类搜索”、“行业分类搜索”和“地区分类搜索”的标题有链接，但却始终不出现下划线，这可能是“找工作”栏目唯一一处始终没有下划线的文字链接。更糟的是，点击进入“分类搜索—职位分类搜索”页面后，此标题不再有链接了，却与首页中的表现形式完全一样。仅仅是光标的变化不足以表现一个文字链接。

24．“更多详细分类>>”与“高级搜索”使用了相同的图标，是否说明它们有某些相似之处呢？

25.“行业分类搜索”列表只比“分类搜索—行业分类搜索”中少了2个条目。仅仅是为了让“更多详细分类>>”链接更有价值才去掉2个条目吗？对“行业分类搜索”感兴趣的用户，点击了“更多详细分类”发现基本没什么变化时，肯定不会感谢这个“更多详细分类”链接服务的体贴。

如果在首页上就可以完全显示，那么就没有必要屈从于形式，在“分类搜索”中再建立一遍“行业分类搜索”。用户多一次的点击，多几秒的等待不应只是为了网站设计者技术模型的完整。

26．“地区分类搜索”中显示“新疆自治区”，“分类搜索—地区分类搜索”中显示为“新疆”。

27．“职位分类搜索”、“行业分类搜索”和“地区分类搜索”是否有必要同时显示？
这三个分类彼此独立，用户不能同时选择一条以上的条件组合“搜索”。并且，在“分类搜索”栏目中，这三类是以标签形式显示的。

28．页面右上角的“加盟ChinaHR”，单从文字表达上很难分清是提供给求职者的还是提供给合作公司的。实际是英才网自己网站的招聘信息。在“关于我们”中，表述为：“本网招聘”，这样表述已经足够清楚了。指向同一页面的链接自然应该是相同的表述。

在“高级搜索”中：
（ http://searchjob.chinahr.com/AdvanceSearch.aspx ）
（在“找工作”部分提到的相关内容此部分不再重复。）

1. “请选择期望的职位、行业、地区等搜索条件”和“如果您继续设定下面的搜索条件，可以得到更精确的结果”两个标题文字过多，且内容的层次关系表现得不正确。

“请…”部分是高级搜索的正式选项。“如…”部分是更进一步的“高高级搜索选项”。但是，目前的视觉设计却没有正确表现这样的关系，似乎这两个部分是并列的两类搜索选项。要正确反应这两部分选项，应删除第一个标题栏，第二部分选项的视觉表现应表达出“隶属于”的内容层次关系，比如使用整体的单色背景。同时，第二部分的内容应提供可收缩/展开的功能。另外，第二个标题应简化，比如，改为：“更多搜索条件”。

另外一种方法是：将两个标题全部删除。

2.如果只选择工作地点，则不能提交。但是在“分类搜索—地区分类”中却可以只选择工作地点搜索。

3．当选择条件不够的时候，弹出窗口提示“请选择职位类别或者填写至少2个字符的职位关键字或公司关键字！”

“2个字符”是一个典型的技术模型，只要提示用户填写职位或公司就足够了。用户知道只填一个“啊”字和没有填写是一样的。

不要使用“！”一定不要使用。只要不是让用户的电脑系统崩溃，没有什么操作是那么重要的。惊叹号是无礼而粗暴的，用户就是因为在职业介绍所受到了这样的对待才来网上找工作的。

此处不应该存在搜索条件不够的情况。高级搜索提供的功能应当是：罗列出一系列搜索条件，搜索条件之间没有相关性，用户可以任意选择其中的若干项。如果非要将“职位类别/职位关键字/公司关键字”之一作为必填条件，那么，应该在高级搜索首页（AdvanceSearch.aspx）只显示这三条，用户填写后，再显示其他条件。

弹出窗口说：“职位类别/职位关键字/公司关键字”之一是必填条件。但是在页面上只有“职位类别”是加了*号的，哪个是准确的呢？用户并不能理解设计者的苦衷：没法用星号表明“三者之一是必填项”。用户多数时候是直接输入关键字，点击搜索，出现了结果列表，一切正常。“啊，看来那个*号没什么用。”

4．前三个搜索条件与“找工作—搜职位”视觉表现相同，操作方式类似，但是功能却不相同。在高级搜索中“职位类别”和“具体职位”能够多选。如果在高级搜索中提供了更强大的功能，应当告诉用户，而不是让用户通过尝试自己去发现。并且，现在使用相似的视觉表现，更会误导用户，出现“故意隐藏这些高级功能”的效果。

5．“职位类别”和“具体职位”：用户的已选项分为两列显示，右侧一列不易被看到。高级搜索的条件普遍使用纵向排列，这里出现了横纵混合，打破了用户的阅读惯性。

6．“职位类别”、“具体职位”和“工作地区”中，用户已选项的显示方式与“找工作—搜职位”中的显示方式不同。用户不会因此而判断出两处的功能不同，只会感觉阅读更麻烦。

7．在“职位类别”打开的层中，如果在下拉菜单中选择了没有下级分类的条目，比如“公务员类”，仍旧需要再选择那个唯一的复选框。

“工作地区”选项功能存在相同的问题。

8．选择“发布时间”意味着什么？
在《不要拦着我，我要找工作！》中已经专门对这一问题进行了探讨，不再嗷述。

如果需要加“发布时间”这个搜索条件，至少应该向用户解释清楚发布时间的选择到底意味着什么。

9．“我的工作经验：不限”、“我的学历：不限”都存在语言表达上的缺陷。主语都是求职者，而“不限”的主语是招聘者。

10．只输入关键字“网页设计师”，搜索出144条职位信息（于2006年2月19日 01:43）。输入关键字“网页设计师”并选择期望月薪为“1000以下”（于2006年2月19日 01:45），搜索出的结果也是144条，其中包括了4000~6000等其他月薪的职位。设计者恐怕是考虑到没人希望少挣钱，所以将高于用户条件的职位也列了出来。但是用户选择期望月薪的操作却变得没有意义了。

11．用户只搜索关键字“网页设计师”，进入搜索结果列表页中，“您目前使用的搜索条件是”中显示的是“面议 + 网页设计师”。“面议”不是用户输入的条件，即使用户知道“面议”是什么意思，也没有理由在这里强加给用户这样一个条件。如果用户试图删除这个条件，打开修改搜索条件单元，会发现根本没有哪条是“面议”。“面议”成了一条永远也删除不了的条件。

12．在搜索条件为“面议 + 网页设计师”的情况下，结果列表里“职位月薪”一列中，有些职位标注为“面议”，也有标注为“3000~4000”的。这样显示说明“面议”和“3000~4000”是此栏中是彼此不同的两个值。如同在简历表的“民族”一栏，我填入了“汉族”，则意味着我不是雅利安人或其他什么种族。然而，糟糕的是，同时出现“面议”和“3000~4000”的结果却是在搜索条件是“面议”的情况下。“面议”既与“3000~4000”彼此独立，又包含“3000~4000”。“面议”到底是什么意思？

13．在搜索结果列表页中，直接点击用户当前的搜索条件或点击“您目前使用的搜索条件是”都可以打开修改功能，如果用户通过点击自己的搜索条件打开了修改功能，就比较不容易找到合拢这部分的链接了。

14．在搜索结果列表页中，进入搜索条件修改功能后，“您可以查看或修改”这8个字可以删除，下面功能的展现已经说明了这些搜索条件是可以修改的。

“其他为未选或未填项，您可以继续选择或填写。”同样可以删除。

在此处的说明文字只需要提示黄色背景是用户的已选项就够了。

15．在高级搜索的首页（AdvanceSearch.aspx），搜索条件都是12px的灰色文字，比如“期望职位类别”，在结果列表页（SearchResult.aspx）中，其余的搜索条件仍旧是灰色，只有前三项搜索条件改用了黑色，与注释文字颜色相同。这样显然不利于用户阅读。

16．在高级搜索页中的两个橙色大按钮应横向排列。

17．搜索结果列表页中，“立即申请”、“浏览所选职位”和“收藏所选职位”三个按钮显示在页码之外，表示这三个按钮将控制全部页面的复选项。而实际上，这三个按钮只能控制当前显示的列表中的复选项。应该将这三个按钮安排页码范围之内，“全选”功能旁边。

三个按钮的彼此间距不同，是否说明后两个按钮的功能有更多的共同性？

18．通过“浏览所选职位”按钮同时打开一个以上的搜索结果（BrowseMulitJobInfo.aspx），“您选择浏览的职位”单元与下面的各个职位详细内容视觉表现过于相似，没有反映出“索引与内容”的关系。

在“您选择浏览的职位”单元中，灰色背景中的白色区域是列表的单数行；在下面的详细内容单元中，灰色背景中的白色区域是该职位的基本信息。这样相似的视觉表现误导着用户的阅读。

19．搜索结果列表页中，“查看职位简要信息”与“查看职位详细信息”两个互相切换的功能。

实现互相切换的功能有两种比较常见的方式：第一种方式是使用同一个链接，比如：“隐藏/显示”。这样使用的前提是，用户清楚当前的状态。即，当前是隐藏状态还是显示状态。第二种是只显示其中之一，比如：在blog编辑状态下，只显示“浏览我的blog”；在浏览状态下，只显示“编辑我的blog”。

目前此处的问题：出现指向自身页面的链接；文字表述冗长；不符合使用惯例。

20．四个下拉菜单的问题：

第一个下拉列表里共有6项。后三个下拉列表中各有5项，四个下拉列表彼此有重复项，重复3－4项不等。第一个下拉菜单可以控制第四或第二个下拉列表的变化。或许此处的设计蕴含着强大的功能，我也试图理解去确切的功能，但是，实在是没能搞清楚。

强大功能也应当提供便捷的操作。如果要提供一个职位更多的相关信息，不妨直接在列表中显示出来。能允许用户横向自主排列，应当通过更直观的操作方式实现。

21．搜索结果列表，各列彼此交叉。

22．搜索结果列表上下均有橙色工具条，但是，两个橙色工具条中的功能却不相同。这与页码、三个橙色按钮的设计思路向悖。其中，只有“全选”功能是上下对应的。

23．职位详细内容页中（BrowseOneJobInfo.aspx），出现了两个“立即申请”按钮，大小不同，功能一样。

“查看该公司所有职位、收藏职位、E-mail给朋友”也有相同的问题。

24．职位详细内容页中，“查看公司信息”链接对应的不是用户预想的“公司信息”而是“公司介绍”。

25．职位详细内容页中，小括号，中括号内是什么内容？除了一部分小括号显示了辅助说明以外，其余的小括号、中括号内所显示的内容几乎都没有使用括号的必要，比如：“（是什么？）、（查看公司信息）、（查看公司信息）…”括号在文字表达中有自己特定的含义，不是装饰元素。

26．公司详细内容页中（BrowseCompanyInfo.aspx），职位列表中，“发布日期”旁，可点击的上/下箭头缺少必要的提示。毕竟，页面中类似的图标只是装饰（或者说提示），比如，“高级搜索”链接前的图标，“加盟ChinaHR”前的图标。

27．公司详细内容页中，职位列表下面的“共X条，当前1-X条”，其中的“X”和“1－X”用红色显示，与右侧的“查看职位简要信息”颜色相同，但是一个是注释性文字，一个是当前标题；一个没链接，一个有链接。文字的颜色需要整体规划。将某一处文字设计成某一个颜色，是因为功能表达的需要，而不是因为页面需要更多的色彩。

28．公司详细内容页中，职位列表中所显示的工作地点均被特意设定成了“显示为手形”，但却没有链接，只有title。“手形”是有链接文字区别于无链接文字重的要特征。有title的文字不需要显示为手形。

另外，所显示地区的tilte是为了显示原本无法完全显示的内容，如果直接在列表中完整显示会更方便阅读。

29．在“找工作”和“分类搜索”页面右上角都有“使用指南”，但是“高级搜索”中却没有。

在“分类搜索”中：
（ http://searchjob.chinahr.com/OccCate.aspx ）
（说的实在太多了，并且，后来忘了活跃气氛，如果您看到这里实在坚持不下去了，那就去mop.com散散心吧。其实，后面也不会很长了，因为我认识的汉字基本上都已经在前面用上了。）

“分类搜索”部分只说一个问题—如何显示分类列表？

从这个页面的地址就可以看到“分类列表”的英文：category。category式的分类列表是一种特定的分类显示方式，历史悠久，也有着比较成熟的设计模型。category式的分类列表普遍应用于多层级、树状分布、且信息量大的内容分类，如ebay.com、旧版yahoo.com…英才网的职位分类信息也具有上述特点，十分适合使用category式的分类列表。我的意见：英才网的category式的分类列表应完整的使用最经典、最成熟的设计模型。关于这个category模型可以直接参考 http://hub.ebay.com/buy 。

目前英才网“分类搜索—职位分类”总体上使用的是category式的分类列表原则，但是，并不是完全按照category式最完整的模型设计的。这引发出不少设计上的问题，下面简单列举一下：

1．一级分类与二级分类在同一页面中，且没有通过图形设计加以明确的区分，不利于用户理解分类关系。

2．使用锚点转向二级分类，容易使用户忽略橙色标题栏中的一级分类是可点击的。

3．查看没有二级分类的条目需要点击两次：先转向锚点所指的橙色标题栏，再进入结果列表。

4．直接显示所有一、二级分类使页面相应时间延长，同时给服务器带来更大负担（我不知道分类的条目是否为动态显示，如果是静态的，那么这个问题并不严重）。

5．在OccCate.aspx这个似乎是无限长的页面只有一个“top”，显然不够用（我在没有看到最下面的“top”时，试图返回页面顶端，一共滚动了9次鼠标滚轮）。

6．“地区分类”中，安字母段只显示头尾两个字母不够方便，比如，“Q”是在“H-N”段还是在“O-Z”段？一下子恐怕反应不过来。况且，应该允许不会背字母表的用户使用。（这个问题似乎应用category模型也无法解决。只要把26个字母都列出来并且多分一些组就可以了，或者只说明“安字母顺序排列”，更简单。还好只有34个。）

可访问性：
分别使用Firefox、Opera、Netscape浏览器访问上述页面，在Firefox和Netscape中都出现了较为严重的显示问题，Opera中相对较好。虽然，目前IE浏览器的市场占有量仍旧是压倒性优势的，但是，Firefox也正逐渐被更多的用户所接受。可访问性的问题正在越来越受到重视。

总结：
英才网此次改版的“找工作”栏目，开发出了更多的新功能，为用户提供了更多体贴的服务。在国内几家权威级人才招聘网站里，英才网的线上服务水平，应该说是相当出色的了。不过，也是由于一些新功能的加入，出现了不少“独创的”、不符合使用惯例的设计缺陷。希望英才网能够在产品设计上投入更大的精力，为广大求职者提供更方便、周到的服务。

由于我本人能力所限，再加上对英才网具体业务了解很少，评估中不免错误层出。望指正。

先来说一下宋体中文的显示效果。宋体文字显示成12px、13px、14px、15px、16px、18px以及25px+的时候，效果是比较理想的。

下图是宋体不同字号文字在浏览器（IE7 beta除外）中显示的效果：

从图中可以看到，当宋体显示为17px、19px－24px时，易出现锯齿、笔画不均的现象。显示为25px以上时，文字边界被平滑处理，但是明显不如12px或14px时显示的那样清晰。

浏览器是如何放大页面文字的：

当我们将网页上的文字放大的时候，实际上是使文字以另外一个较大的字号显示。比如，在Firefox中，一个14px的中文被放大一挡的时候，显示为15px；再放大一挡则显示为17px。当Firefox将文字放大为17px的时候，显示效果也是不理想的，象IE中显示17px中文一样的不理想。

在我们的印象中，似乎是IE浏览器不能缩放，而其它浏览器（比如，Firefox、Opera…）可以，可以缩放文字甚至是整个页面。而实际上它们的区别是，IE浏览器只能对相对字号起作用，其它浏览器对相对、绝对字号都有效。不过，无论是哪一个都没能克服宋体“12－16px、18px”的局限。

下面，我们来看看目前几个主流浏览器的缩放功能：

Mozilla Firefox

Firefox的“缩放功能”是缩放文字大小，而不改变页面上的其它元素。在“查看－文字大小”中，用户可以选择放大或缩小文字的显示。无论使用的是相对字号还是绝对字号，一视同仁。

Firefox的“缩放功能”只提示通过chtrl+“＋/—”可以放大或缩小文字，并没有显示当前的缩放倍数。所以，在这里，我只能用“放大一挡…”来描述。下表是12px的宋体文字在Firefox中，逐级放大后的效果:

在12px－18px的区间里，出现了17px。虽然，用户将12px的文字放大4档，显示为17px的可能性并不大，但是，将12px放大两档，显示为14px的需求还是存在的，而此时，页面上原本是14px的文字正好显示为17px。原本完美的14px变得惨不忍睹了。

Opera

Opera的缩放功能是将页面整体缩放，文字、图片、gif动画、flash动画，网页上的所有内容无一漏网。这个功能最接近真实的放大镜。“如果您觉得网页太小了，那就给您来一个放大镜。”这个放大镜最多可以将页面放大为原先的1000％，当然，多数用户是没有必要这样浏览网页的，并且此时浏览器的响应异常缓慢。这种整体放大可以保证页面的布局基本不变。在IE7 beta出现之前，Opera是唯一一个能将页面整体放大的浏览器。

下表是12px的宋体文字在Opera中，逐级放大后的效果:

在12px－18px的区间里正好跳过了17px，完美！使用1024×768分辨率的用户如果希望放大写显示页面，可以将显示比例调整为120％。这样原本12px的文字变成14px，原本14px的文字显示为16px。页面宽度由760px变为912px，在1024×768的分辨率下，浏览器的显示宽度约为1000px。一切都这么理想。难道是在天堂？

Netscape

Netscape的缩放功能与Firefox相似，只缩放文字，图片不变。使用ctrl+“＋/—”操作，页面可以逐级被放大为120％、150％、200％。下表是12px的宋体文字在Netscape中，逐级放大后的效果:

似乎放大比例的变化量太大了。实际上，Netscape还提供了更精确的缩放功能，通过菜单栏的选择，用户可以输入任意的整数，调整缩放比例，只是操作起来不方便。

Internet Explorer

IE6的windows版中只支持文字大小的缩放，似乎和Firefox、Netscape相同。不过，IE的“文字大小”功能只针对相对字号的文字。相对字号在“文字大小”不同的设置中显示出的字号，如下表所示：

如果页面使用的是绝对字号，那么IE6则完全不能缩放文字。这在《用外国人的手写中国字》中已经讨分析过了。下面来看IE7 beta。

在IE7 beta版中，保留了“文字大小（Text Size）”功能不变，另外提供了页面缩放功能。在页面的右下角用一个百分比的下拉菜单显示。

这个功能是将整个页面放大、缩小，页面上的其它元素也随之变化。不管是固定字号还是相对字号都可以缩放，与Opera的功能一样。只是在显示为140％的时候，12px的文字显示为17px，而Opera是16px。下表中可以看到，宋体12px的文字在不同缩放比例中的字号大小：

再重复一遍，这里说的是“页面缩放”功能，而不是“文字大小”功能。IE7 beta中“文字大小”功能与IE6相同，仍旧是针对相对字号的功能。对于使用相对字号的网页，在IE7 beta中可以将“页面缩放”功能与“文字大小”功能配合起来使用。

在12px－18px的区间里出现了17px，遗憾！不过，还好，IE7 beta对文字显示进行了优化，这些原本显示得很难看的字号变得漂亮了不少。

IE7 beta对文字显示的优化：

下图左侧是12px－26px的宋体文字在IE7 beta中的显示效果，右侧是文章开始时候看到的那张图－－－在除IE7 beta以外的浏览器中的显示效果：

这个对比中我们可以看到，IE7 beta对于原来显示时有锯齿、笔画粗细不均的字号进行了优化，比如，17px，19px…文字的边缘做过平滑处理后，虽然不如14px那么清晰，但是至少比原先有锯齿且笔画粗细不均的显示要好很多了。25px＋的字号也略有改善，比原先更“黑”了些，看上去更清楚了点儿。

浏览器的升级带给我们什么？

在IE7 beta推出之前，IE是唯一一个不能调整绝对字号显示大小的浏览器（但是却占有绝大部分市场）。如果在IE7的正式版中仍旧保留beta版中的页面缩放功能的话，那么主流浏览器就全部能支持“调整绝对字号显示大小”这个功能了。如果是这样，那么，“是否需要将文字设置为相对字号？”的问题就解决了。

软件功能的改善，解决了一个网页设计的问题。让我们为IE欢呼吧：“IE，你好伟大啊！你终于实现了别人早就有的功能了！”

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
本文于2006-02-13发表于蓝色理想

网上购物有很多好处。不必受奔波之苦，也不容易被奸商忽悠。男士不必担心误入女士内衣专区的尴尬，女士不必害怕心有余而力不足。不去商场，自然也不必担心手机、钱包不翼而飞。

尽管有这么多优点，也许你还是不在网上购物。

也许你终日网聊，
也许你整天在“网游”中血雨腥风，
也许你能对“互联网英雄”如数家珍，
也许你在“坛子”里灌水不辍，
也许你为了写自己的blog通宵达旦，
但是你却未必会去网上购物。

为什么？不在网上购物的人通常会说：“没有上网购物这个习惯。”

“没有上网购物这个习惯。”这个说法到底意味着什么？为什么会没有这个习惯？这仅仅是个习惯问题吗？实际上，很多没能形成“上网购物”行为习惯的网络用户是出于惧怕。不了解网上购物的流程；不知道如何付款；担心自己的手机号会被泄漏，嫌注册、登录手续太繁琐；感觉通过网站搜索一个商品太难……对于普通网络用户来说，网上购物是个充满未知的领域，需要大量网络知识。然而这些障碍实际上是可以通过良好的交互设计解决的。是购物网站设计上的种种缺陷，将许多用户拒之门外。下面列举六个在线购物网站存在的设计问题：

问题一.让新用户感到恐惧

恐惧源于不了解。你也许曾经对一个看上去面目狰狞的家伙心怀恐惧，但对他了解多了以后，你也许会逐渐感觉到，其实他是个善良并且随和的人。

初次接触购物网站会让很多用户感到恐惧，多数感到恐惧的用户不会再做进一步的了解，而是直接离开了。用户到底在害怕什么呢？

首先，“网上购物需要似乎需要很多条件？”很多用户会有这样的疑问。“是不是非得有信用卡才行？”“是不是需要我的银行卡号和密码？”“好像得成为会员才行…”在我进行的用户测试中，这些疑问都确实存在。提供诸如信用卡、银行卡之类的支付手段是为了使用户的付款行为更便捷，而不是为了吓唬用户。当用户看到一大堆似曾相识的银行logo时，不会感到新奇、兴奋，只会感到恐惧、不安。“这些卡我一个都没有，我该怎么办？”

其次，“网上购物的过程可能会很复杂。”实际上一个网上购物的过程只需要“挑选商品－填写送货地址－货到、付款”。这是网上购物流程的概括，也是用户的心理模型。不幸的是，目前大多数购物网站将这一过程复杂化了。“购物车”、“暂存架”、“藏书阁”…这些在线购物网站专有的名词加剧着潜在用户的恐惧；“开户、订货、送货时间、礼品包装、付款方式、确认订单…”一长串的购物流程让用户感觉如同在长征。当用户选中了商品准备结算的时候，会发现万里长征刚迈出了第一步。

被迫学习各种新概念，不得不面对复杂的手续，不清楚操作将导致什么样的后果…这些都会让新用户感到恐惧、烦躁。购物网站应当向他们解释：网上购物很简单。可是，购物网站不仅没有做这样的正面宣传，反而用实际的设计说明：“网上购物很复杂。”

问题二.搜索功能

分类展示是商店中的货架，搜索功能是商店中的售货员。糟糕的搜索功能是个呆头呆脑的售货员。先来看第一个例子：

顾客：“请问有《盟军敢死队3》吗？”
售货员：“没有。不过，我们这里有些相关的商品，也许您会感兴趣，比如《盟军敢死队3》…”

第二个例子：

顾客：“三星的mp3有几种？”
售货员：“这5种。”
顾客指着货价上另外一个商品说：“这个是不是三星的mp3？”
售货员：“也是。”
顾客：“那个呢？那个是不是三星的mp3？”
售货员：“也是。”

用户的目的性越强，使用搜索功能就越频繁。网站的商品越多，搜索功能也就越重要。现实中，商家可以通过扩大卖场来展示更多的商品；购物网站却只能用一个显示器屏幕来展示。搜索功能的完善是个技术问题，但用户看到的不是技术，而是搜索结果。

问题三.一个商品，多个页面

一个商品在一个商店中有单一的价格，这似乎再正常不过了，但在网上购物，同一个商品却经常会有多个价格。

在上图中，搜索“康定斯基论点线面”（俄国构成主义大师康定斯基的一本著作），搜索结果列表中有两个结果，名称完全相同，出版社也一样，用户无法区分，但是这两个商品的价钱却相差很多，这显然会给用户的选择造成麻烦。出现这样问题的原因可能有两种：一种原因是，两个相似的商品在搜索结果页中没能展示出彼此的区别，“康定斯基”的例子就属于这种，实际上，搜索结果中较贵的一本是中文译版，而便宜的一本是原文版。另外一种原因是，人为失误造成的，一个商品的价格调整后，维护人员没有去修改原有的发布信息，而是新发布了一条商品信息。比如下图中所示nano的搜索结果：

在商场中购物，当顾客不知道如何取舍的时候，通常会问售货员：“这两个有什么不同？”在网上购物，用户却没处去问。更系统的展示商品可以让用户轻松的了解到不同商品的区别，不需发问。

问题四.如何介绍一个商品

商品的详细信息页是全面展示商品的空间，用户到底需要了解些什么呢？

在网上购物与现实中购物最大的区别在于用户无法真正接触到商品实物，因此，对商品基本信息的了解也需要通过网页来实现。以图书为例，在书店中，顾客拿起一本书马上就能了解到书的名称、作者、出版社，如果作者是外国人，那么打开书马上就能知道是这本书是中文翻译版的，还是英文原版的。之后，顾客可能会看看简介或目录。也许用户会信手翻开一页，快速的阅读一下，了解一下此书的语言风格。少数目的性较强的用户会查看一下此书的印刷时间、版次。

在下面的页面上，要想判断定价为￥19.30的和定价为￥33.80的两本《康定斯基论点线面》哪本书是中文译版并不容易。

第一.定价为￥33.80的这本书在“作者”一项，其中写着“…罗世平等译”；
第二.定价为￥19.30的那本没有注明译者；
第三.“翻译是一项有价值的工作，被翻译过的应该买的贵些…”。
经过以上三个分析，用户应该能够判断出，定价￥33.80的那本是中文译版。而在现实的书店中，这样的判断只需举手之劳。

当然，或许不是每个用户都必须要经过上述三个分析才能下结论，但是，网上购物是一项直接与用户经济利益相关的行为，这是显著区别于其他网上行为的，没有人愿意浪费自己的钱，用户会很谨慎，而此时，谨慎就意味着麻烦，因为网页上没有一处明确的标出“中译本”之类的字样。

图书的书名、作者、出版社、撰写语种、定价这些基本信息，在现实的书店中，顾客可以非常方便的了解到。因此，在网页上这些信息也应当是用户最容易看到的。而诸如印刷时间、版次、ISBN号之类的信息，对于读者来说，并不是识别一本书的必要信息，所以这些内容应当在网页比较次要的位置上。在图书中，这些信息也通常是写在扉页背面，而不是写在封面上的。应当通过页面设计，使得用户阅读一个图书详细信息页的过程与在现实中了解一本书的过程尽可能一致，而不是象下图那样，将一本图书的相关信息按字数多少来排版设计。

问题五.价格问题

几乎所有的购物网站的商品都标有“市场价”，市场价到底是什么？对于图书类商品，市场价就是封底上标的定价。每一本书都标有市场价、此网站的优惠价以及各级别的会员价，详实、清楚。与之相比，现实中的书店对于优惠的说明反而没这么清楚了。书店中偶尔的打折通常是在结算的时候给顾客一个“意外的惊喜”。对于非图书类商品，购物网站标出的“市场价”往往不是很有说服力。如果留意商品详细信息页中其他用户的评论，就会发现，经常会有用户抱怨，一些所谓的市场价远高于商场中的销售价，购物网站上的“市场价”只是个“先涨价再打折”的把戏。当然，这样的评论通常会在第一时间内被网站的管理人员删除。

购物网站的“虚假市场价”真能打动用户吗？对“虚假市场价”失去信任的用户自然不会再关注它了，只会在乎实际的销售价，也就是此网站所谓的优惠价。对“虚假市场价”内幕并不知情的用户会相信它吗？在现实中，顾客要想在不同商场中对比一个商品的售价是比较麻烦的，至少也要上楼下楼，出门进门…要货比三家，自然更是辛苦。但是，在互联网上想了解一件商品的价格就简单的多了。通过搜索引擎进行关键字搜索，用不了5分钟就能掌握此商品的真实售价。即使是要货比三家也是信手拈来。“打折骗局”在互联网上更容易被戳穿。“虚假市场价”不会想商家想象的那么奏效。当然，如果“市场价”不是虚假的，显然它还是很有意义的。如果在线购物网站能对所标出的市场价做进一步的说明，说明“市场价”的由来，比如，某某专卖店的市场指导价，那么显然会提高“市场价”的可信度，标注“市场价”也才能真正能体现此网站的优惠幅度。

问题六.结算过程混乱、复杂

不能象现实中那样面对面的交流使得结算变的不那么方便，在线购物网站没有通过设计尽可能的简化结算过程，而是出于自身的利益考虑尽可能的细化结算过程，以减少无效订单数量。用户的利益被忽视了。当用户点击“购买”按钮后，网页会转到“购物车”页面，页面的最上面一行通常会说明整个购物流程分为的若干步，当前是在哪一步。这种的购物流程少则4、5步，多则7、8步。光是这些步骤就足以吓跑一个心怀畏惧的用户了。对于老用户，通常会显示已经跳过的步骤。如下图所示：

老用户会产生这样的质疑：“那几步怎么跳过去了？我是不是错过了什么？为什么不让点击？”如果真的要简化老用户的操作，应当只显示用户所需要完成的操作，并为有可能出现的修改提供链接。购物网站所设计的“购物流程”本身就是个不符合用户心理模型的技术模型，在预先设定好的格子里玩儿跳棋，用户不会着迷，只会昏迷。

当用户准备结束购物，去结算中心的时候，网站却要用户先登录，如果你是新来的，那就得先注册。更糟糕的是，新用户按照要求注册后，网站还要求他（她）登录。这样蹩脚的要求，总让人联想起一些迂腐的政府机构的办事作风。无论是注册还是登录，对于网上购物的用户来说，过于郑重了。“我只是要跟这家网站确定一下送货地址罢了，有必要搞这么复杂嘛？”

用户认为只要填写送货地址，货就应该能够送到了，或许再填写一下自己的电话号码，作为备用的联系方式，这就足够了。而至于“email、邮编、我家附近有什么明显的建筑物”之类的问题显得太过繁琐，甚至荒唐了。
“如果我不记得我家的邮编，你就不给我送货？”
“我已经写了我住在天桥，它竟然问我是不是在三环以内？！”
“问我写的地址是家庭地址还是单位地址？“京广中心8层”，你说是家庭地址还是单位地址？我是来买东西，又不是报户口。”
……

在付款方式中，“货到付款”通常是与其他的方式，比如，邮局汇款、银行电汇、信用卡等，混淆在一起的。而用户测试的结果是，多数用户是明确的将“货到付款”与其他方式区分看待的。这并不难理解，实际上这也与我事先的猜测相符，各种非“货到付款”的方式都是先付款后发货，这是与“货到付款”本质的区别。出于对自身利益的保护，多数第一次在网上购物的用户都选择了“货到付款”。在用户眼里，支付方式分为两类：先付款和后付款。而不是现在购物网站所表现的那样“付款方式有若干种，请您选择其中一种。如果您没找到‘货到付款’那一项，那可太好了，我们可以先收钱再发货了。”

在现实的购买行为中，顾客将大多数精力花在选择商品上；而在网上购物，用户在结算中心耽误了更多的时间，用户对于填写这些手续并不感兴趣。

网上购物，不是习惯问题

对于互联网，不同的人有不同的使用习惯，这是可以理解也可以接受的，但是，如果根本不使用，那就不是习惯问题了。

为什么我们更习惯于坐着，而不是站着？我们在第一次会坐的时候就积累下了这样的经验“坐着比站着舒服”。如果在网上购物也能比去商场购物更舒服，也会有更多的人养成网上购物的习惯。

至购物网站设计者：网上购物行为直接关系到用户自己的钱包，所以，用户会对自己的行为更加谨慎，也会对购物网站的交互设计更加挑剔。所以，请原谅我以挑剔的眼光所做的上述评论。

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
本文于2005.01.26发表于蓝色理想

一.相对大小的字号

在英文页面中，固定字号被称为“ frozen font sizes”，使用固定大小的字号是一个明显的错误，很多交互设计的专家都对此做过研究。使用相对字号是那么的正确，于是，中文网页的文字也被设计成了相对字号。这种做法主要集中在英文网站的中文版的设计中。然而对于中文，相对字号却不如预想的那么好。

很多的字号的中文是不能清晰显示的。比如，10px的Arial字体显示英文是清晰的，但是10px的宋体中文就变成一个黑疙瘩了；再比如，20px的英文大而清晰，但是20px的中文就会出现明显的锯齿，笔画粗细不均。我曾经在《文字，你到底能多大？》一文中对中文字号进行过讨论，12px、14px、16px（或18px）显示中文是比较理想的。实际上12px－16px大小的宋体显示的效果都是不错的。

相对字号允许文字以不止一种的实际字号（以象素为单位的字号）显示，调整浏览器的设置，文字大小可以缩放。下面我们来看看，使用相对字号显示的中文是什么样子的：

相对字号分为：-7、-6、-5、-4、-3、-2、-1、标准大小、+1、+2、+3、+4、+5、+6、+7，共15种。这其中“-2”以下的字号与“-2”一样小，“+4”以上的字号与“+4”一样大。实际上就剩下了-2、-1、标准大小、+1、+2、+3、+4，这7种相对字号。我们逐一来试验一下每一个相对字号的显示效果。

以IE浏览器为例，如果页面上的文字被设置为相对字号，那么它可以有五种不同的大小缩放：“最小、较小、中、较大、最大”。下表中是不同的相对字号在IE浏览器的不同设置中所显示的实际字号（以象素为单位的字号）。

从表中可以看到，没有一种相对字号可以始终落在12px－16px区间内，也就是说，如果IE浏览器的“文字大小”选项从“最小”逐步调整为“最大”，那么，无论相对字号设置成什么，都不能始终保持理想显示效果。从表中还可以看到，被设置为“-2、-1、标准大小、+1、+2”的文字，在调整浏览器的“文字大小”过程中，有些时候显示出的字号落入了12px－16px区间中。在一个页面中往往需要大小不同的多种字号以区别不同的内容，应该选择哪几种相对字号呢？中国的设计师的选择并不多。

使用相对字号的设计方式将自主权交给了用户，这显然是好的，但是，中文网页中使用相对字号却达不到英文网页中的效果。也就是说，实际上中文用户没能得到英文用户那么大的自主权，中文用户在浏览器中选择“文字大小”时不仅要考虑哪种大小适合自己阅读，还要注意所选的文字大小显示效果如何。

一些英文网站的中文版按照英文原版的相对字号进行设计，会出现一个糟糕的效果：用户无论怎么调整浏览器的“文字大小”选项，都没办法让网页上的所有文字都清晰的显示（即，在12px－16px区间内显示）。

二.斜体字

斜体字是英文中常用的一种表现方式，对于英语用户来说，“斜体”和“加粗”的使用频率几乎是相同的，从微软的office系列软件的设计上我们就能看到，“加粗”功能“B”按钮和“斜体”功能“I”按钮都放置在很容易点击到的位置。但是，中文自古以来就没有斜体这个概念。或许是近代革命家的行书、草书给我们的印象太深了，使得我们很容易的接受了斜体的表现方式。

对于打印的文稿，斜体的中文问题不大，因为打印是以较高的分辨率来显示的。在显示器上则不同，显示器上的显示是72象素/英寸。这种差异几乎每一个使用过word软件的人都有体会，在显示器上要阅读文档中的斜体非常吃力，打印出来就好多了。

网页的浏览是以显示器为主的，那么斜体的中文则是一种很糟糕的表现方式。然而这糟糕的方式却在照搬英文网站的过程中被不加思索的拿了过来。

博客的BSP是这一做法的先锋，几乎所有的中文博客在撰写新文章的工具栏中都有“斜体”功能按钮。增加一个功能会增加用户学习界面的难度；增加一个没有用的功能会降低用户的使用效率；增加一个烂功能会误导用户编辑出糟糕的文章。“斜体”就是个很烂的功能。

在英文博客中，trackback地址往往使用斜体，这是一个约定俗成的表现法式，于是中文博客中也将这种表现方式照搬过来。糟糕的表现倒是与糟糕的功能配套了，目前大多数中文博客提供的服务中traceback功能都不能用，开发者恐怕是这样考虑的：反正用户也看不清文章最下面那一行字写的是什么，自然也不会需要用这个功能的。

我们可以品尝西餐，但却没必要象西方人那样饭前祈祷。学习的目标是青出于蓝，而不是东施效颦。

三.过小的字号

过小的文字往往出现在英文网站的中文版上。前面说过，英文字体在10px的大小就能清晰显示，在设计中文版的时候，只是机械的照搬英文版的设计，将文字翻译成中文，还使用10px的样式，显示的效果就像下图这样：

这个截图来自“Apple中国”，页面地址：http://www.apple.com.cn/itunes/download 。不管用户怎么放大文字大小，这些文字始终是这么大。在“Apple中国”的网站中几乎随处可见类似的现象。或许他们的设计师根本不懂中文。类似的问题在“macromedia中国”、adobe的中文版（http://www.chinese-s.adobe.com/main.html）、ups中文版（www.ups.com/asia/cn/chsindex.html ）…都或多或少的存在。

上面提到的三种错误虽然是可以通过设计加以避免的，但是，我们应当看到，之所以以西方人的方式写中国字会出现问题，根本的原因在于现有的中文字体存在缺陷，不能象Arial、Helvetica、Verdana这些英文字体在电脑显示器上清晰的表现。这些英文字体都是在20世纪初，为了适应工业时代的需求而设计的。而中国在那个时代是列强殖民、军阀混战，我们“宋体”是在一千多年前为了活字印刷术的需求而设计的。从西方的现代主义设计运动一开始，我们就已经被落在后面了。

—————————————————————————————
本文2006-01-18发表于蓝色理想

在uigarden上看到Don Norman的《以人为中心的设计是有害的》，标题骇人听闻。我们刚刚知道了UCD（或者HCD）是个啥，人家又说这是不对的。

为了验证是不是中文翻译过程中将标题有意或无意的进行了曲解，我去Norman的网站（www.jnd.org）上找到了这篇文章：《Human-Centered Design Considered Harmful 》，翻译上还是贴切的，看来外国人还是敢说啊，骂总统都随便，何况写这样的文章呢。

我们真的应该放弃“以用户为中心”的观念，转而投奔所谓的“以行为为中心”吗？

作者确实是经过认真思考的，但并不意味着这篇文章是完全正确的。作为读者，我们也不应当只是简单的支持或反对。

接下来，我想针对此文逐个部分的进行分析：

“了解你的用户”中，作者指出“这个世界上的大多数东西都是在没有得益于用户研究和以人为中心的设计方法的情况下被设计出来的，不过这些东西仍然工作得很好。”事实正如作者所说的那样，汽车、菜刀、打字机都不是在系统的设计中完成的，但是汽车的设计延续了上百年，有哪个软件产品能等待上百年慢慢的设计呢？汽车的设计是在漫长的摸索中才逐渐完善的，设计者们正是意识到这样缺乏理论支持的原始设计过程成本巨大，于是才总结出各种各样的设计理论，“以用户为中心”就是其中被普遍认可的一个，应用这些理论，设计上会少走很多弯路。这正是“实践—理论—再实践”的过程，人类的生产实践过程都是在遵循这个规律。这也是马克思历史唯物主义的观点（扯远了。没办法，受毒害太深了。）

人类的社会实践过程并不一定是最理想的。如果仅仅因为菜刀是件好的工具，而它的生产过程并没有经过“以用户为中心”的设计，就说“以用户为中心”的设计并不合理，我认为不妥。菜刀的设计者并不是不需要“以用户为中心”的设计观念，奴隶制社会那会儿没有这样的理论。

“以行为活动为中心的设计”，在这一部分的最后，作者得出的结论是“对于以人为中心的设计团体来说，工具应该是看不见的，它不应该成为一种防碍。而对于以活动为中心的设计来说，工具恰恰就是要达到目的的途径。”
作者的逻辑是这样的：钟表是工具，打字机是工具，小提琴是工具，学习使用这些工具是必要的。以人为中心的设计团体的设计目标是否定工具的。所以以人为中心的设计团体错了。
这个逻辑存在的最大问题是：什么是工具？以人为中心的设计是在反对小提琴吗？当然不是。以人为中心的设计所反对的工具是由于设计上的不当而出现的冗余的操作。当用户使用一个搜索引擎时，只要输入关键字，然后按“回车”就完成了，操作十分简单，以至于用户感觉不到是在使用什么特定的工具。不需要用户面对一大堆的选项，一系列的输入框…用户仍旧需要先学会如何使用鼠标和键盘，知道什么叫浏览器，就像需要学会看钟表上的指针一样。

“为什么以人为中心的设计可能是有害的？”在这一部分的一开始作者就讲到“产品越成功，它就越不可能在将来也适用。”“随着个体在使用中变得越来越熟练，他们将会需要和他们还是初学者时不同的界面。”显然作者对Alan Cooper 的“新手、专家和中间用户”观点完全不了解（参见《ABOUT FACE 2.0》第一部分 3新手、专家和中间用户）。

在最后这一部分中作者才说明白自己的观点“过多地倾听用户”可能会给设计造成负面的影响。所谓的“以行为为中心”就是在强调不要太在乎用户所说的，而要在乎他们做的。这是非常正确的。在心理学的研究中早就有过了研究：人的行为并不总是和他（她）的态度一致的。“失调理论”、“自我知觉理论”都是在解释这个现象。（关于心理学在行为与态度上差异的研究可以参看《心理学与生活》第16版，第17章中的“态度、态度改变与行为”）。

建立“以用户为中心”的观念是为了避免设计者以自己的主观经验为中心的错误，而不是为了反对“关注用户的行为”。“以行为为中心”只是“以用户为中心”的一部分。行为是什么？是用户的活动。除去行为以外，用户还有很多其他的表象，比如：态度、情绪…是不是还会有更多的中心呢？如果把“以行为为中心”这个说法完整的写出来，似乎就清楚些了—“以用户的行为为中心”。

“以用户为中心”的观念确实还有很多缺点，“一个晚上读工商管理硕士的37岁的单身母亲”是对一个软件的设计起不到多大的实质性作用。可是想想，菜刀是在几千年前就出现了，到现在也还不是让人十分满意，每天还都有新样式涌现。相比之下，“以用户为中心”的设计观念才刚刚开始，为什么就不能多给“37岁的单身母亲”一些时间，让她好好想想，是不是能为软件的设计做些什么呢？

Gmail也有自己的问题：

1.“撰写新信邮件”中，发信人地址没法选择；
当用户在“收件人”的文本框中键入字母后，Gmail会将“通讯录”中符合键入字母的mail地址列出来，供用户选择。精彩的设计。但是Gmail却没有为收件人输入框提供导入mail地址的功能，如果发件人完全不记得收件人的mail地址了怎么办呢？当mail地址与收件人的真实姓名没有直接联系时，忘掉收件人的mail地址是比较常见的。比如要给“张三”发信，但是他的mail地址是“eugene1234@gmail.com ”。当用户需要发邮件时，点击“撰写新邮件”是很正常的，也是设计者所希望的，但是当用户撰写完了正文和标题，突然发现自己想不起收件人的地址了，这可就糟了，“通讯录”的页面甚至不允许在新窗口中打开。经过艰苦的寻找，发现页面右上角有个图标，是“在新窗口中撰写”的功能，不过没有alt提示，谁能猜到它的作用呢？这个功能正是为现在这种情况预备的。点击页面右上角的这个图标，新打开的窗口中将保留用户已经撰写的内容，同时原页面跳转至“通讯录”中用户最近一次打开过的收件人地址。这似乎是对忘掉收件人地址这一错误的补救方式，然而对于发件人来说，这原本就不是一个错误。如果不记得收件人的地址，发件人最好先进入“通讯录”去选收件人的mail地址，然后在“撰写”。如果记得地址，则应该直接进入“撰写新邮件”。同样是发信却需要不同的操作。

2.列表中鼠标经过时状态没有变化；
在列表中，比如“收件箱”列表、“已发邮件”列表，一封邮件所在的整行都可以点击，鼠标经过时的效果只是光标由箭头变为手型，而邮件是一行行紧密排列的。这样设计的结果是光标只要处于列表中，就始终是手型，如同鼠标经过了一张有链接的大图片。如果能为鼠标经过设计一个更突出的hover，比如颜色翻转，用户在选择列表条目时，反馈会更加清楚。

3.删除邮件不简单；
删除邮件的操作被安排在“其他操作…”的下拉选择框里。要删除一封邮件，需要点击下拉框，再选择“移至已删除邮件”，这个条目在“贴标签”之上，如果用户创建了若干标签，这个“移至已删除邮件”将处在下拉列表的中间—一个最不容易选择到的地方。可能Gmail的设计者就是希望用户不再需要删除邮件，象他们自己所说的那样“自从有了超过 2000 MB 的存储空间，再也无需花费精力去删除邮件！”可是整理自己的空间，使之便于自己浏览，确实是用户的一个并不过分的要求。

4.VI标示不统一。
Gmail的文字写法是“Gmail”，只有“G”是大写，而logo中的“m”虽然个头不大，但却使是大写。大概广大用户也会象接受ebay那样接受Gmail。

相关链接：《新的Yahoo! Mail，新的用户体验》

关于西宁邮政宾馆的热水器，之前我曾经说起过—《西宁邮政宾馆与博客网》。这里所说的提示音还是这个这个热水器的，呵呵，这个热水器的故事还真多啊。

在西宁邮政宾馆里，服务员告诉我，合上电闸，热水器开始加热，加热完成后，会自动发出声音，提示我，我应该去拉开电闸，然后就可以洗澡了。下面是我录下的一段视频，当时就是那样。

点击播放媒体

http://www.56.com/n_v21_/c9_/6_/0_/chouyuchouyu_/1172756883_93_/28317_/0_/12505339.swf

(需要flash player 8)

热水器就这样被我关闭了。住在这家宾馆的几天里，每晚都能听到来自宾馆各个房间热水器的此起彼伏歌声响起，又很快的被掐死。

这个幽默的设计当然不是故意的，也许以后这家宾馆配备了更好的热水器，就不会再有这样的歌声了。也许再过若干年，热水器的设计师会真正去设计一款配备幽默提示音的热水器。

注：这里所说的设计中的声音并不是真正意义上的VUI（Voice User Interface），关于VUI，可以参见www.hci.com.cn的文章—《语音用户界面—VUI》。

于是我们上网，寻找精神的家园，然而互联网让我们感受到的是更加粗鲁的对待，更多的不知所措，更大的冷漠。

“谁让它是个机器呢，一个愚蠢的机器……”，“还好不是在大庭广众之下，凑活了吧……”我们只能默默接受。

终于有一天，勇敢的人站出来，高声说：“互联网应该设计的让我们满意！”我们这才意识到，自己原本就应该是那个“永远正确的上帝”。于是我们揭竿而起，开始了这场虚拟世界中的虚拟革命。

互联网用户的这场革命也许注定只是理想主义者脑细胞中的肥皂泡。“现在互联网这免费而粗糙的服务不是也挺好嘛。”

至少让我们向着那无人喝彩的胜利迈上一小步吧，因为那可能是我们渺小的一生中最有价值的努力了。

在这里，仅以三家规模较大的人才招聘的专业网站为例，分析人才招聘网站的站内搜索功能（位于各地频道首页中），它们分别是：

智联招聘网（www.zhaopin.com）

中华英才网（www.chinahr.com）

前程无忧网（www.51job.com）

如前所述，人才招聘网站的站内搜索主要的使用者是求职者，因此，在下面的讨论中，“用户”这个称呼专指“求职者”。

是否需要选择行业或者职业或者职能或者其他什么？

在站内搜索功能的最前面，三家网站都需要用户限定搜索职位的类别，以此来缩小搜索范围，提高精确度。

智联招聘网使用了一个下拉选择框，需要用户选择职位，默认选项没有写“请选择职位”之类的说明，而是根据不同城市提供了不同的默认项，用户浏览选择框中的内容可以理解这里要他（她）做什么。这个职位选择可以与后面的关键字结合起来使用，也可以只按选项搜索，不输入关键字，但是却不允许不选择—选择框里没有“全部职位”之类的选项。这样的设计看上去是合理的，用户必定是有针对性的搜索，知道自己要找的职位。先选择大的范围，再通过关键字精确定位。

但是这样却不能完全满足用户需求。以搜索“用户体验工程师（UE）”职位为例，输入关键字为“UE”，用户是应当选择“工程师（计算机、信息工程）”呢？还是选择“工程师（电讯类）”？或者是“网站管理，设计与制作”？实际情况是在不同的选项中搜索结果数量是不同的。用户的需求是：搜索出这个网站中全部与UE有关的职位。而现在的功能设计会让用户迷惑，到底哪个结果才是这个网站中全部与UE有关的职位列表呢？结果数量最多的一个？是否全部包含了其它结果页中的结果了呢？如果用户没耐心对各个结果页进行比较，那就得逐个浏览不同的搜索结果页，才能确保自己没有错过任何求职机会；即使用户真的耐着性字将不同搜索结果页一一对照，并且确认结果最多的确实完全包括了其它结果页（根据我个人不完全的测试，似乎确实是这样），用户还是会再产生疑问：是否选择别的选项还会出现更多的结果呢？

中华英才网使用了两个下拉选择框来限定职位的类别，先“选择行业的类别”再“选择职业的类别”，这两个选择是彼此独立的。“行业”和“职业”这两个词是一般人都能理解的，但是这两个分类的确切定义是什么呢？恐怕并不容易讲清楚。《现代汉语词典》中“行业”的解释是：工商业中的类别；泛指职业。“职业”的解释是：个人在社会生活中所从事的作为主要生活来源的工作。看了这样的解释您恐怕会更加迷糊了。是的，我想设计者和用户也都在迷糊着呢，所以用户只是把那这两个选择框当作两个可以限定范围的选项—选项1和选项2，所以设计者也没有努力去区分这两个选项，以至于在“行业的类别”里第一项是“计算机”，而在“职业的类别”里第一项是“计算机/互联网”。这两个选项到底有什么区别？设计者恐怕也估计到用户会对这样的设计感到困惑，于是仁慈的将这两个下拉选项设计为可选项—“要是实在搞不明白，您就别选了。”

相比之下，前程无忧网更夸张，用来描述职位类别的选择框有3个—“请选择职能”、“请选择职位”和“请选择行业”。有谁能清楚的区分这三个选项？如果您能，那我也敢负责任的说，您的解释绝对于此网站上的设计不一样。第二个选择框“职位”是附属于第一个选择框“职能”的，只有在第一个中选了某个选项，第二个里才会有内容；第一个选择框“职能”又与第三个选择框“行业”彼此独立。这里的问题显而易见：
1.第一个选择框“职能”与第三个选择框“行业”如何区分？这与前面讨论过的问题相似，只是这里被冠以不同的称谓，也同样设计为可选项，算是使用了同样的解决办法吧；
2.第二个选择框如果是附属选项，为什么在初始状态时就可以操作？点开下箭头，里面只有“请选择职位”这样一个选项；
3.三个不同性质的下来选择框为什么表现形式一样？宽度一样，颜色一样，文字表述一样，只有最后一个词不一样，这不一样的词用户还没法明确区分；（实际上第三、四个下拉选择框比前两个下拉选择框多了一个“-”字符，这应该算是个表现上的区别吧。）
4.真的有必要使用这么多的选择框吗？这里只是个简便的搜索，我们可以看到下面还有一个“全能搜索器”的按钮，不知道会复杂成个什么样，我原以为3DMAX是世界上最难学的软件了…

要完全区分“行业”、“职业”、“职能”、“职位”如此众多的名词需要用户至少具备文学硕士以上水平，但真的是文学硕士恐怕也不能确切理解这些词在人才招聘网站上的含义。用户只是希望在需要的时候能有一个辅助的选择框能帮助他（她）限定一下搜索范围，如此繁复的选项不知是给用户帮助？还是给用户添乱？

是否需要选择发布时间？

在三家人才招聘网站中，只有前程无忧网在首页的快速搜索上提供了“选择发布时间”的下拉选择框，并且作为必选项。

要想弄明白这个发布时间是怎么回事儿，就需要先了解一下人才招聘网站为发布信息者提供的服务。对信息发布者的服务是收费的，信息发布者能获得的服务是：在一段时间内（比如一个月内）在此网站上发布几个职位招聘信息（5个，10个。收费不等）。在这段时间内，信息发布者可以更新发布的信息，以确保信息能排在比较靠前的位置，但是每条信息每天只能更新一次。这样，只要信息发布者愿意，他（她）可以让自己发布的几条招聘信息在一个月内每天都显示为当天发布的新信息。对于前台的浏览用户来说，发布者的“新发布信息”和“更新信息”是相同的，都显示为“发布时间：某年某月某日”。这就是信息发布的过程，电子商务类网站也为卖家提供相似的“更新”服务，于是我们看到人才招聘类网站和电子商务类网站可以骄傲显示自己的服务平台上每天都有海量的新信息。

再来看看求职者用户（以下继续简称为“用户”）对发布时间的理解和需求。当用户第一次访问某家人才招聘网站时，他（她）希望能看到此网站上与自己求职意象相关的全部信息，这时，发布时间显然是没有太大用处的，只要是有效的招聘信息对于用户都是有价值的。那么在前程无忧网上，他（她）就得选择一个足够长的“发布时间”，确保所有没过期的招聘信息都能被搜索出来。假设此用户浏览了全部的相关信息，但并没有找到自己满意的，3天后，他（她）再次访问这家人才招聘网。此时，他（她）已经不需要看到3天前的信息了，那些信息他（她）在3天前已经全都看过了，没有合适的，所以只需要看在这3天之内新发布的招聘信息，这时，“选择发布时间”有用了，他（她）可以选择选项“近三天”，但是根据前面介绍的发布规则，搜索出来的结果与用户需要的并不相同，其中即有这3天内新发布的信息，又有在这3天内更新过的旧信息，用户仍旧需要在一篇篇的列表中选择“似乎是没有看过的”信息。

实际上，目前几乎所有的人才招聘网的信息列表默认都是按时间顺序排列的，在配合以恰当的链接visited属性设置，完全能够实现“选择发布时间”选择框的功能。如果要想确实满足上一段中所描述的用户对发布时间的需求，恐怕要从“发布与更新”的规则入手，进行整体改造了，如果有可能，也许我们可以在以后专门讨论。

是否需要选择地点？

三家网站都在默认的首页上进行了用户分流，用户可以在首页上选择地点。选择地点的任务通常在这时已经完成了。但是还是存在一些特殊情况：

一.用户选择失误。如果在首页分流时，用户不小心选择错了，那么在搜索职位的时候有“选择地点”的选项似乎是很方便的。但是，实际上更为合理的设计是：返回刚才的首页，重新选择。只需要在适当的位置显示“返回首页”的链接即可。因为用户符合逻辑的想法是：“在刚才的首页上，我应该选择上海，结果我选成杭州了，我得回刚才那个页面重新选择……”。在A页面上的失误却在B页面上修改，对于用户来讲并不是方便，而是混乱。当然，除了返回首页，还可以在“高级搜索”中完成“重选地点”的任务。

对于异地求职的用户，如果在首页分流的时候选择的是目前居住的城市，而实际上求职的目标是另外一个城市，那么他（她）需要选择再次选择城市。这种情况也可以认为是一种用户操作的失误。对于这种情况，三家网站都做了很好的设计，在首页分流的时候，可选择的城市列表标题表述为“城市频道”、“各地招聘”，而没有表述为“选择您所在的城市”。这样已经尽可能的减少了异地求职用户选择地点失误的问题。

二.用户没有失误，选择其他城市搜索求职信息是用户正常的需求。在多城市求职，希望比对不同城市的招聘概况等等，这样的用户需求也是存在的，不过必定这样的需求是少数。少数人在少数时候需要的功能可以被视为“高级功能”或“特殊功能”，在“高级搜索”中提供，而没有必要为了满足少数人的需求而影响大多数人的使用。毕竟一个设计不可能为全体用户服务，汽车的设计是这样，网站的站内搜索也是。

关键字输入框当然是需要的

是的，关键字的文本输入框是需要的，而且是非常需要的。（关于用户对搜索的心理模型可以参看 Jakob Nielsen的《Mental Models For Search Are Getting Firmer》）如果您看了Jakob Nielsen的文章，我想无需我再多说，您肯定已经充分意识到文本框对于搜索的重要性了；如果您没有看，那，我也不多说了，因为您在长期使用google、百度等主流搜索引擎的过程中已经建立起了心理模型—“搜索就是输入关键字，然后点搜索按钮”。然而恐怕这三家网站的设计者都还没有这样的心理模型，或者还没有注意过这个事儿。关键字输入框在他们的搜索功能区里都显的那么的不起眼：

在智联招聘网中，由于辅助的选项比较少，文本输入框还是比较明显的。但是在页面设计上，唯一的一个下拉选择框却与文本输入框紧紧挨在一起。我作为用户，与您一样，凭借我们对图形用户界面丰富的经验，还是能识别出，那个“下箭头”和前面那个文本框是一家子。

中华英才网的快速职位搜索单元一共有3个下拉选择框，一个文本输入框，两个单选按钮。这个文本输入框被隐藏在第四行，三个选择框下面，两个单选按钮的上面，搜索按钮的左边，总之，位置很糟，输入框的宽度看上去完全是为了适应这个旮旯的大小。

前程无忧网的文本输入框规规矩矩的排在第五行，4个下拉选择框的下面，两个单选按钮和搜索按钮的上面。如果我硬说这个文本输入框看上去象是4个选择框和单选按钮、搜索按钮的分割线，那显然太牵强了，所以我不能那么说，“这个文本输入框不是什么分割线啊，不是！大家看仔细喽，不是！对，要看仔细！你要不看仔细吧，还真不太容易……”

是查找公司还是查找职位？

在前程无忧网和中华英才网上都有这样两个单选按钮，用户可以自己选择是要查找职位，还是要查找公司。真的想严肃认真的讨论这个问题，可是，可是，当我在文本框里输入了关键字“联想”，难道你们还不知道我要找的是个公司吗？难道有叫“联想”的职位吗？难道我还非得再选一下吗？难道你们有必要知道吗？难道你们不能把所有跟“联想”沾边儿的信息都给我列出来吗？难道你们你们就非得拦着我吗？

当您走进麦当劳，对服务员说：“请给我拿两个巨无霸。”这时服务员问您：“您是要食品呢？还是要饮料呢？”您该怎么办呢？现实生活中不可能发生的事，在虚拟的网络中却可能经常发生。

总结

当众多的“千里马”在无垠的互联网中奔驰，寻找伯乐的时候，他（她）们多么需要一个指路人。人才招聘类网站就是这样的指路人，请不要因为一些不经意的设计缺陷使自己变为了一个给“千里马”们设置障碍的人。伯乐原本就难求，再加上些原本不该出现的麻烦……“千里马”们好辛苦啊。

大约一个小时后，“我从天上来，带着兰花草…”的乐曲声突然从热水器的电子小喇叭中传出，我从床上兴奋的跃起，冲进卫生间，拉开电闸。我在青藏高原上的第一次淋浴即将实现了！我以迅雷不及掩耳盗铃的速度脱掉衣服，其速度决不亚于A片中的主人公。进入卫生间，按刚才服务员的介绍，拧中间的旋钮，“还怪紧的…”哎呀我的妈呀！水是出来了，可是，可是这水热的完全可以涮羊肉啊。就这一个钮，也没地方能调节水温，刚才光想着赶紧洗了，也没打听清楚。赶紧关上吧，这可难了，开关旋钮在喷头的正中间，把手伸到中间去拧开关，却对是自取残废啊。最终，我用毛巾包着手在无限痛苦中总算是节流了。我真想马上跃出门外好好问问服务员，当然还是理智战胜了冲动，我还是先去穿衣服了。

服务员的回答是，水温确实没法调节，洗澡不用非得等着热水器唱歌，中途自己试试，温度合适就可以了，现在只能是等水自己晾凉了。我不光是白等了那么长时间，而且是还得白等更长的时间—让水晾到合适的温度，我大概等了有一个半小时。其实我大概只需要烧20分钟就可以洗了，结果一下耽误了两个半钟头，还挨了回烫。

在后来的这一个半小时里，我总结了一下教训：如果在开始烧水的时候，我就被告知，合上电闸是将水加热，而加热到热水器的额定温度，比如是80摄氏度，热水器会发出提示音乐，那么我就会明白，应该在适当的时候，自己去试试水温了。如果热水器已经加热到了80摄氏度，此时仍旧允许我以较低的温度放水，甚至是只放凉水，象没有加热以前一样，那么也不会有问题了。一个产品的设计应该告诉用户他（她）要进行的操作将产生什么样的后果，并且允许用户撤销操作。旋钮开关应该算作另外一个问题，当然也应遵循这两条规则，当用户执行了“打开”的操作，应当允许用户撤销，显然，让用户在喷涌的热水中关闭开关不能算作是允许用户撤销。

这个糟糕的热水器似乎只是生产力欠发达地区的一个不完美的产品，其实不然，前一阵子，我在使用博客网（www.bekee.com）的博客后台管理界面时，也遇到了一个类似的设计。

在博客网的博客管理界面中有一项功能叫“模板”，是让用户选择自己喜欢的页面模板的，同时还可以自己修改样式表，使页面更个性化。我的遭遇是这样的：我先选定了一个模板，后来发现能自己改样式表，于是我开始一点点儿的修改，因为不是自己创建的样式表所以修改起来相对困难些，再加上操作步骤上设计的一些不合理，我每修改完一处都需要先按“保存修改”按钮，再按一次“发布到首页”，然后再刷新一次首页，这才能看到效果，诸多的麻烦使得修改的很艰辛，改了好几天才基本改到我满意的效果。几天之后，我想看看其他模板是什么样子，于是就在模板的列表里点着看，灾难就在这时发生了！如果点击模板的照片则会在新窗口中显示此模板的截图，而如果点击图片下的文字则是选择此模板，无论是所略图还是下面的文字都没有任何说明。我无意中点击了某个模板的文字，于是我的blog立即变成了这个模板显示的样子。我虽然也可以再选择原先的模板，但是对原先模板的个性化修改都无法恢复了。我为修改样式表的全部努力全歇了。

与西宁邮政宾馆的热水器那么相似，在操作前没有说明操作的后果，操作完成后又不许用户撤销操作。那个热水器我只要沮丧的等上一两半小时就能晾成我希望的水温，如果我想要还可以继续等，让水完全变凉（撤销加热操作），而博客网的模板功能，不管我怎么等，它也不会恢复了。

当然，西宁的邮政宾馆还是给不错的，我去的时候不是旅游旺季，标准单人间才55块，如果你去西宁，还是建议你去住的，你也可以再去看看，他们的热水器换了没有，不过我估计十之八九是不会换的，就像博客网不会修改自己的设计一样。

第一种和第二种做法比较容易使用户建立起正确的心理模型，也就是说，用户很容易理解，但是这两种做法都存在一定缺陷。

第一种做法的缺陷：只要点击就会打开一个新的浏览器窗口，一种类似于病毒的行为方式，浏览这样的网站，很快用户电脑的任务栏上就会充斥大量的任务标签，标签过多，使得标签上无法显示文字，无法识别。使用这样的网站，用户需要时常关闭一些已经浏览过的窗口。

第二种做法是一些可用性大师所倡导的，比如Jakob Nielsen在他的很多文章里都提到这个问题，他的建议是“除去PDF之类的“non-Web documents”，所有的链接都应当在同一浏览器窗口中打开。”在他所进行的调查中，网页设计者将链接设置为在新窗口中打开的理由是：这样做可以留住用户（Designers open new browser windows on the theory that it keeps users on their site.）。

但这种始终在同一窗口中打开的方式却并不是最理想的。当我在浏览Nielsen的www.useit.com网站时，我的做法经常是将自己感兴趣的多篇文章先都在新窗口中一一打开，然后关掉索引页，再逐篇阅读。因为我会担心也许几分钟后我会被其他事情打断，再回到电脑前的时候可能就会忘记再拜读他的其他文章了，即使我当时有充足的时间慢慢浏览，我也会觉得如果现在先进入到一篇文章中阅读，读完后再返回原先的索引页，查找下一篇文章，那样的话，我需要再次面对索引页，即使我不久前见过这个界面，它对于我来说仍旧是陌生的，至少不是十分熟悉，仍旧需要花费时间了解、认识这个页面，我希望只了解一次索引页就找到所有我需要的链接。线性的，反复操作会降低效率。

“用户总是把绝大部分时间花在其他网站而不是您的网站上”—《专业主页设计技术》Jakob Nielsen著。用户总是在面对新的界面，即使不是全新的，至少也不是他（她）十分熟悉的，那么对一个界面的认识过程就确实存在，花费时间也确实存在，能减少认识界面的次数可以提高效率。

我相信这种需求不是我个人独特的怪异的行为习惯，更不是为了反驳Nielsen而特意编造出来的，这种行为习惯是来自于生活实践中的：在你编辑一个页面的代码时，如果需要你给一篇共有20段的文章每一段都加上p标记（即，在每一段文字的开头加上“

”,在每一段的结尾加上“

”），你会怎么操作呢？刚一开始，也许你会逐段的添加，但是很快你就会发现，如果先复制了“
”然后逐个选择每段的开头位置进行粘贴，再复制“

”进行类似的操作，效率会高的多。类似的经验产生了习惯的行为模式，“将相同的操作集中起来完成是高效的”。应用这种经验出现了社会分工，“一个人只负责整个生产流程中的一部分，比每个人都负责整个流程效率高。”还是应用这种经验，出现了上面描述的那种网页操作行为。因此，“在新窗口中显示”这个需求是存在的，也是合理的，当然，“在同一窗口中显示”的需求也是存在的，比如，在一个注册流程中，当用户要进入第二步的时候，通常不需要保留第一步的页面。

在设计页面的过程中，我们往往需要构造用户的“任务流”，“用户希望先做什么，接下来，用户需要做什么了，之后还要做什么…”根据这样的任务流设计相应的页面，然而从上述的“窗口问题”我们可以看到，任务流并不总是存在的，更准确的说，用户的任务并不总是在一个页面中就能够完成的。当用户的下一步任务需要在多个窗口中完成时，就需要打开新窗口了。一个典型的例子是google的搜索结果页，恐怕很少会有可用性专家职责google的搜索结果页每一个结果都是在新窗口中打开的，那么“所有的链接都应当在同一浏览器窗口中打开”这一准则是不是还应该再加一个google的限制条件呢？会不会再有第二个google呢？这个准则的适用范围到底有多大呢？谁能保证互联网的发展不会催生出更多的新服务呢？这些新服务又有多少应该被划定在这一规则之外呢？

我质疑Nielsen得出此结论的过程和理由，我相信在新窗口中打开的设计不仅仅是为了留住用户，但并不反对“链接应在同一窗口中显示”这个结论，“在新窗口中打开”与“在同一窗口中打开”相比较，“在同一窗口中打开”能够保证一个页面既可以在原窗口中打开也可以在新的窗口中打开，只要用户在点击之前按下shift键或右键选择“在新窗口中打开”，而“在新窗口中打开”不征求用户的意见，总是在新窗口中打开。相比之下“在同一窗口中打开”为用户提供了更多的选择，更大的自由度，同时也要求用户付出更大的操作成本。

为了能在适当的时候打开新窗口显示，出现了第三种显示规则，但是第三种做法本身又存在缺陷：由于对“索引页”的定义并不十分明确，使得这种方式的应用并不规范，在用户看来，这种方式更象是无规则的，用户很难在使用过程中注意到这种显示规则，也很难确切的猜到设计规则。

始终在新窗口中打开是一种带有互连网风格的设计，互连网在开始之初，主要的功能就是以索引的方式展示信息，这对于交互的要求相对是比较低的；始终在同一页面种显示是一种带有软件风格的设计，在通常的软件中，用户的使用状态是不断的完成一个个任务流，用户有着相对明确的目的性，当然，这对于交互设计的要求是高的，设计师需要清楚用户随时的需求。随着互联网的发展，在网站所能实现的功能越来越复杂，网上交易、在线银行、网上社区…这使得web界面需要更接近软件设计才能满足这些要求，于是在同一页面中显示方式表现出它的合理性。网站对交互设计的需求是复杂的，不同类型的网站的交互应用水平是不同的，即便是同一网站内，不同的栏目，交互应用水平也是存在很大差异的，所以选择那种显示方式才会始终不能达成共识。

我曾经有意识的注意过，在即将点击开一个链接时我自己的心理，到底是希望在原有页面中打开呢，还是在新页面中打开，实际的结果是，有时我希望在同一页面中打开，而有时我希望在新页面中显示。这样的现象说明，即便进行更大规模的用户调查也不能在“同一页面中显示”和“总是在新页面中显示”两者之中选择出一种，用户群的需求不是单一的，甚至对于同一用户来讲，这种需求也是变化的。

面对“窗口问题”，新的浏览器给出了新的解决方法。在Maxthon（MYIE2）中，在释放鼠标左键之前，将光标拖动，离开原来链接的位置，则可以将原本在同一窗口内打开的链接在新窗口内打开，这种拖动操作代替了IE浏览器的按下shift的操作，用户省去了左手的配合操作，并且比点击右键，在菜单中选择效率要高很多，这种方式不仅给“窗口问题”一个好的解决办法，同时也为web界面的交互设计提供了一个好的思路。web界面由于受技术的限制，很多图形操作系统中的操作都无法实现，比如拖动、圈选、左键双击…web的交互设计也因此受到了很多限制，Maxthon解决“窗口问题”的办法给出了这样一个思路：将web技术上的问题留给浏览器，浏览器是客户端软件，能够实现图形用户界面的全部功能，整个web界面的交互功能由界面本身和浏览器共同实现，对于“窗口问题”，一个始终在同一窗口中打开的网站加上Maxthon浏览器就是个不错的组合。不过，Maxthon的这种解决办法并不是完美的，window界面中对于鼠标点击的操作是这样设计的：对于web上的链接、表单中的各种元件，比如按钮、单选按钮、复选按钮…“如果用户在鼠标按键按下时，移动光标离开控件，那么控件就会回到未按状态。尽管知道释放鼠标按键为止，输入焦点仍然在控件上。但当释放鼠标按键后，输入焦点切断了，任何事儿也没发生。如果用户改变了主意，这也是一条方便的逃逸途径。”—《ABOUT FACE 2.0》 而在Maxthon中，对文字链接的这种操作被赋予了新的功能，表单元件仍然不变，这样一来，第一，文字链接失去了这种“逃逸途径”，第二，这种拖动的操作在Maxthon中有了两种不同的功能，对于表单控件是“逃逸途径”而对于文字链接是在新窗口中打开，用户需要时时牢记才能确保操作正确。

目前最为可行的方法仍旧是在同一页面中打开，使用这种方式的前提是，确信该web界面所面对的用户群都知道在按住shift键的状态下点击链接，链接所指向的内容会在新页面中打开，至少也应该知道在链接上点击右键可以选择在新窗口中打开。这样，用户在希望打开在新窗口中打开链接内容时，只要按下shift键就可以实现了，当然，用户至少又要多占用一个左手的手指了，也许当时用户左手里正拿着一支红河牌香烟，而烟灰也许会在他按下shift键的同时掉落在键盘上。

－－－－－－－－－－－－－－－－－－－－－－－
本文曾发表于chinaui ，转载于蓝色理想 、视觉艺术互联

打开地址簿，

用户的心智模型：
1．选择联系人
2．确定

Yahoo邮件系统的地址簿提供了比较多的功能，所以要想清楚的表现联系人列表和“确定”按钮并不容易。在这里界面使用了一个很明智的做法，用明确的功能按钮圈定了联系人列表的范围，同时表达了“确定”功能，在某一内容区域的开始位置和结束位置都添加功能按钮的做法贯穿于整个Yahoo邮件系统。 这使得用户明白，即使不操作之上和之下的内容也足以完成他的工作。 不过，理解Cc和Bcc这两个缩写，对于用户未免要求过高了。

三、添加附件

用户的心智模型：
1.选择附件内容
2.上传
3.完成，回到原邮件

用户选择好文件地址后，点击“附加文件”按钮，开始上传，系统进入上传状态。

上传过程中用户不需要其他操作，只要等待。这里采用了无模态的设计，让上传过程在一个独占的页面中显示，而不是弹出窗口，这样做避免了打破用户的工作流（workflow），而使用弹出窗口存在的问题将在下面对263邮件系统的分析中进行说明。
但是在这个界面中却存在一个失误：缺少“取消”功能，由于网络不畅用户可能会丧失耐心，也许用户会突然发现选错了文件，总之，用户改变主意了，想中止当前进程，这里没有给予用户选择放弃的权力。
当上传完成后，进入第三个界面。

在这个界面中，最明显的按钮是“回到原邮件”按钮，如果要添加多个附件并且又没有在第一个“附加文件”页面全部选择好，那么可以在这里点击“附加更多文件”，这种行为有可能是由于长期使用其他某种邮件系统造成的，有一些邮件系统要求用户逐个文件上传，或许这也是一种合理的工作流。不过，在这里这个链接不是很清楚，淹没在其他文字中，不太容易看到。

四、返回原邮件

撰写正文，发送。

五、发送、完成

用户的心智模型： 发送完成后返回收件箱（收件箱是用户的“根据地”）。

在这个页面中“返回收件箱”取代了前一个页面中输入信息的位置，是“发送”操作的反馈。很容易被注意到。 当然也可能用户会继续再发新邮件，用户会认为再发新邮件是重复刚才发信的过程。“查信”和“发信”两个按钮是界面中的固定按钮，在发第一封信时，用户就是点击的“发信”按钮，那么既然是重复前一次的过程，自然也应该点击相同的按钮。点击“发信”，撰写一封新邮件。

接下来将对263邮件系统进行分析，在两者的对比中，我们将能够看到263邮件系统的设计问题。

在263的邮件界面中可以看到不合理的布局。

二、地址簿

首先，当用户需要同时填写“收件人”“抄送”“暗送”三个地址时，需要分别点击右侧对应的图标，先后打开同一个“地址簿”。

打开地址簿后，

用户的心智模型：
1．选择联系人
2．确定

因为没有提供更多的功能，263的地址簿界面比yahoo的更为清楚明白，用户更容易操作。

三、粘贴附件

当用户要上传附件时，却发现附件的输入框样子上虽与“收件人”、“主题”等项目的输入框相同，但前四个可以输入，而附件后面的输入框却不行。负责添加附件功能的按钮距离输入框如此之远，如上图所示。


用户的心智模型：
1.选择附件内容
2.上传
3.完成，回到原邮件

在这里需要用户逐个文件上传（粘贴），这也是可以接受的方式，不过请注意，“粘贴”按钮并未与左侧输入框对齐，这个按钮的操作到底会作用于那里呢？
粘贴完成后，点击“完成”按钮，窗口将关闭，然而这个按钮却并不在一个“完结”的位置上，它被安排在页面的中间，并且上下都各有一个按钮。三个样式相同的按钮，只需要点击前两个就完成了全部上传附件的工作，“真的完成了吗？”
“删除”按钮的功能是：删除与其对应的左侧下拉框中选中的文件。“删除”与“完成”和“粘贴”的表现相似，但“粘贴”和“删除”只能操作一行内容，“完成”却能关闭整个窗口。

“粘贴附件”界面是一个弹出窗口，一个典型的“模态”设计，“粘贴附件”窗口与发信的主窗口没有直接的关联，用户可以在“粘贴附件”窗口处于任何状态时，在发信主窗口点击“立即发送”将邮件发出。作者进行了一个测试，在“粘贴附件”窗口正在上传文件的过程中，回到发信主窗口将邮件发出，页面给出一个友好的反馈“您的邮件已成功发送到……”收信人将收到一封没有附件的信。当“粘贴附件”窗口上传文件完成后，点击“完成”，窗口自动关闭，上传的文件永远的消失了。邮件系统对作者的错误操作没有给予任何提示，它彬彬有礼的对待用户，却对用户的失误坐视不管―――一个城府很深又老于世故的邮件系统。

四、返回原邮件

在这个界面中，全部输入内容无法同时显示，需要拖动右侧滚动条。当用户填写完正文之后，显然要先滚动一下鼠标滚轮，试图找到“发送”按钮，“没有，不在这儿。”其实“发送”被安排在设计师心目中最醒目的位置了。

五、发送、完成

263邮件系统将“返回”设定为返回发信的界面。

通过与yahoo邮件系统的对比，可以更清楚的看到263邮件系统存在的问题了。然而， yahoo邮件是免费的，而263邮件是收费的。

图片的浏览从设计上可以分为两类：列表式和幻灯式。

列表式是指：相册中的各个图片文件以列表排列，点击后在新的页面中显示完整的大图。列表可以是文字列表，也可以是所略图列表，显然所略图的列表更便于使用。这种方式的特点是文件列表和最终的显示在不同的页面中显示。

幻灯式是指：相册中的各个图片文件或横向或纵向在页面中占用一小部分空间排列，页面中的主要区域作为“图片显示区域”，用于显示实际的大图，点击文件列表中的某一项，其实际大小的图片在页面中的图片显示区域显示。文件列表和大图显示在同一页面中。

下面针对这两种显示模式各选一个代表加以分析：列表式的代表是“yahoo！相册”，幻灯式的代表是“MSN Space相册”。

yahoo！相册的浏览界面主要由三个页面组成：
1。相册的首页，用所略图显示全部的相册；
2。XX相册页，显示某一相册内的全部照片的所略图；
3。最终显示页，显示某一张照片，并提供照片的相关信息和功能。


yahoo！相册的管理界面与浏览界面基本一致。在管理界面中，用户可以看到的内容则可以编辑，并为这些编辑功能设计了相应的操作页面，比如，选择上传文件页面，编辑标题和简介页面。这种可见即可编辑的设计将在本文的后半部分详细分析。

yahoo！相册的设计保证了每一个页面显示的内容量较小且性质相同。在相册首页只显示此用户的所有相册；在XX相册页只显示当前相册的标题、介绍和此相册中的照片所略图；在最终显示页只显示用户选中的照片。这种单一化的显示尽可能的减少了干扰用户的信息，使得用户的任务流清晰、快捷。

列表式的显示模式是图片浏览常用的模式，随便打开一个大型网站，几乎都有“图片”栏目，其中整合了这个网站中所有的图片新闻，以列表显示，点击后打开相应的图片新闻。常用的图像浏览软件ACDSee也使用着类似的方式，由于是客户端软件，可以使用鼠标左键双击来切换列表与最终显示。

但是在web界面中应用列表式的显示模式也存在缺陷：由于所略图列表与最终显示页不在同一页面中，用户需要反复在列表页于显示页切换，而在web界面上，切换操作又没法象ACDSee那样通过双击左键来完成。

幻灯式的显示模式相比之下应用并不那么多，但是这种方式确实提供了更好交互功能，典型的代表是MSN Space。

MSN Space的幻灯式的浏览界面只有一个，在页面顶端有一个下拉选择框，用于选择不同的相册，页面正中最大的区域显示大图，实现了最终显示页的功能，页面下部有一个类似视频播放器的控制台，可以对相册中的照片实现一系列浏览操作，并且提供了此相册中全部照片的所略图，这个控制台可以在适当的时候隐藏，基本上解决了“干扰信息”问题，同时避免了反复切换页面的麻烦。

设计幻灯式的显示模式通常会面对“所略图列表如何排列？”的问题，无论是横向还是纵向都要限定在一定的空间范围内，因为如果页面过宽或者过长，“大图显示区”会移出页面，此时点击所略图，只能将页面跳转至“大图显示区”来显示用户希望看到的照片，而用户刚刚点击过的所略图却跳出了页面外。如果是横向排列，用户的鼠标通常是没有横向滚轮的，想要浏览列表需要拖动“拖动条”；通常鼠标是有纵向滚轮的，似乎列表纵向排列是合理的，但这个幻灯式的整体界面对于不同分辨率的显示器很难保证始终不出现纵向拖动条，那么，在这个页面中很有可能出现两个纵向拖动条，两个纵向拖动条的不便，我想大家在撰写email的时候都有体会了。

MSN Space选择了横向排列，并且结合其控制台上的其他功能将有可能出现的横向拖动条设计成了视频播放器中常见的“进度条”。干脆让用户不要把它理解成拖动条，那么拖动条的不便之处也就“与我无关”了。

除去上面说的这个问题，MSN Space这种显示方式存在的更为深层次的问题：编辑状态与浏览状态不统一。

在Alan Cooper的《ABOUT FACE 2.0》中提到一条重要的“公理”：“在有输出的地方允许输入。”对于web界面来说，显然不能做到随时的输入。对这条“公理”我们可以引深理解为：可以输入的管理界面应当与前台的显示界面一致，也就是说，后台管理与前台浏览的输出效果一致。管理界面可以理解为一个添加了编辑按钮的浏览界面，于是，管理界面这个有输出的地方同时也有允许输入了。

图片的管理，到目前为止，比较理想的方式仍旧是列表式的。当用户需要管理自己的相册时，应当看到相片的所略图列表，对列表中的各个文件进行删除、重命名、移动等操作，对管理操作而言，用户通常对自己要管理的照片比较了解，在加上网络带宽带来的显示延迟，用户往往并不希望一个幻灯式的显示模式下管理自己的照片。MSN Space的管理界面虽然在“照片”的首页也采用了幻灯片式的显示，但是真正的管理操作却都是在列表式的显示界面中完成的。

MSN显然也认识到了“编辑与显示不统一”这个问题，为了最大程度上消除这一问题，使用了一个比较巧妙的方法：将用户管理操作的最后一步设定为返回幻灯式的显示界面。

在MSN Space的相册中，用户的管理操作可以分成三类：添加相册和照片、编辑现有相册和删除现有相册。

对于添加相册和编辑现有相册两个任务流，当用户最后一步点击“完成”的时候，系统将保存结果并返回幻灯模式，显示用户刚刚保存的结果显示在自己的space上将是什么样子。虽然在操作过程中用户并不能随时看到自己space的显示效果，但是只要完成一个完整的任务，就能显示一次修改的结果。

对于删除操作，由于交互过程相对简单，所以在幻灯模式下就能够完成，对于当前显示的相册执行删除操作，相册很简单的就被删除了，但是，删除之后却出现了一个小麻烦—页面上该显示些什么呢？MSN的设计人员意识到给用户显示下一个相册是不合理的，用户的操作只是要删除当前相册，并不意味着删除后打算看下一个相册，并且也许下一个相册中有大量的照片，由于要显示所略图，页面将有可能进入一个相当长的载入过程，于是MSN的办法是：什么也不显示。在页面顶端的下拉选择框中显示“选择相册”条目，示意用户当前并没有在任何一个相册中。我曾问过许多朋友：“MSN Space的照片栏目中，下拉选择框中的这个“选择相册”是干什么用的？”始终也没有得到过有说服力的解释，看到这里我想我们都应该明白这个“选择相册”条目的作用了。我们可以将这个设计理解为：幻灯式显示模式的主体是针对一个相册的显示，而用户在操作过程中将有可能出现不在任何一个相册中的情况，那么则显示“选择相册”。这个设计终于可以理解了，但似乎仍旧不可接受。

之所以会出现这样奇怪的显示，归根结底还是幻灯式显示模式在管理操作中的不良反应。如果是列表式显示，用户要删除某一相册，删除按钮会在现有相册的列表页，返回的结果页也是现有相册的列表页，这样的显示显然更容易理解，在现在的相册列表中，刚才选择删除的相册消失了，用户的删除操作得到了良好的反馈。

幻灯式的显示来源于windowXP操作系统中的“幻灯片”模式，而列表式的显示则源于window传统的文件所略图浏览模式。使用用户熟悉的方式显然是好的思路，减少了用户学习新界面的过程。

网页似乎是可以无限长的，无论是列表还是图片显示区理论上都可以无限制的排方放在一个页面中，但是用户的接受能力是有限的，当用户专注于某一部分内容时，其他的内容往往是多余的，有干扰的，另外过多的所略图列表会使很多所略图远离图片显示区，用户点击时，页面将大幅度的在一个页面内跳转，经常面对这样的操作，用户会出现胸闷，憋气，头晕、恶心等不良反应，不知道最近报道的“上网时间过长，导致猝死”的事件与糟糕的网页设计是否有直接关系？至少我们应该承认，用户对一个页面中的内容是有一定的承受限度的。

互联网似乎是无限大的，但是用户的接受是有限的，即便是雷锋也只能将有限的接受能力投入到无限的互联网世界里，而我们要做的是将无限的互联网设计成有限的接受能力所能接受的样子。这种将大象装进冰箱里的任务完全不是笑话，我们每天都在面对。如果你还没有为这个问题苦恼过，也许是你还没意识到冰箱有多小，大象有多大。

－－－－－－－－－－－－－－－－－－－－－－－－－－－－
本文曾发表于chinaui

1．在某一个blog中，搜狐网站“印记”过多。这些“印记”主要在页头和页脚中—搜狐博客logo，ChinaRen 、17173 、焦点房地产 、GoodFeel 、页脚的10个链接和搜狐版权声明。

用户希望自己的blog是一个属于自己的空间，而不喜欢其中贴满服务商的广告，况且在用户的blog中显示搜狐自身的链接并不见得能收到好的效果—有多少用户希望在访问搜狐的某个博客过程中看到搜狐“焦点房地产”呢？

与完全独立建设blog相比，使用服务商提供的现成服务最大的缺陷就是blog中留有服务商的“印记”。因此，“印记”越少就越能赢得用户的好感。搜狐博客、新浪博客、博客中国、MSN共享空间……相比，搜狐博客是“印记”最多的。

服务商付出的是网络空间和服务，用户的使用本身就是对服务商的回报。

2．当用户A访问用户B的blog时，“欢迎您：A 管理我的博客 离开 帮助”这些内容都是针对用户A的，不应该出现在用户B的blog页面内部。

3．blog与传统网站相比，最显著的区别就在于对文章之间相互关系的理解不同：传统思路认为文章是分类的，某一篇文章一其他一些文章属于同一类，而与另外一些文章不属于同一类，因此，网站的规划是分栏目的，栏目下再分子栏目……而blog在很大程度上打破了这种思路，将文章按时间划分，认为某一篇文章与其他一些文章是属于同一时间段的，而与另外一些文章不属于同一时间段。产生这样的思路是由于网络日志本身特点决定的。

目前的栏目设置似乎是将一个blog理解为由“首页”、“日志”、“相册”和“档案”4部分组成的，这就又回到了对网站理解的传统思路上—分类，分层级。

4．文字与背景的对比不够强，造成阅读困难。虽然页面营造了清新、纯净的视觉氛围，但却牺牲了用户阅读的基本利益。文字与背景对比的问题是网页设计中普遍存在的问题，搜狐博客也未能幸免。

5．当前栏目页面缺少明确的提示，既没有从图标显示上加以区别也没有明确统一的标题说明，用户需要通过记忆或页面具体内容来判断当前页面属于导航栏8个栏目中的哪一个。

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

“管理”与“预览”状态的比较：

1．新用户，在未添加内容情况下，基本上无法区分“管理”状态和“预览”状态的首页。实际上，在这样的情况下，两者的区分在于右上角的4个圆形按钮，不过对于新用户很难识别清楚，两种状态的页面表现区别不明显。录入日志后仍旧很难区别。

2．在“管理”状态下，点击日志标题，在新窗口中页面显示的是预览模式下的日志内容—“预览”与“管理”两种模式之间有多个通道，并且用户要面对不止一个搜狐博客页面，这就需要用户经常判断当前页面所在的状态。

3．“预览”和“管理”这两种状态的首页都出现了指向自身页面的链接。应将“博客预览”与“管理我的博客 ”作为一对互相替代的链接，在“博客预览”页面中有“系统设置”、“布局管理”、“模板设置”3个链接。“管理我的博客”状态使用更“原始”的视觉效果，既可以于“预览”状态区别又可以暗示其“后台”身份。

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

“管理”状态下：

1．页面上部的导航栏内，左侧的“首页、日志……”四个图标按钮的鼠标经过状态与正常状态相同；而右侧的四个图标按钮的鼠标经过状态与正常状态相比，对比更强。―――相似位置的图标按钮应有相似的表现形式。

2．部分页面“模板”中，页面中的标题栏、按钮、文本输入框3者的背景颜色比较相近，不易区分。

首页：

1．点击左侧X型按钮，关闭各模块时，弹出窗口提示文字为“确认要隐藏该模块吗？”，点击“确定”后，再弹出窗口提示文字为“成功移去”。对这一功能的称呼不统一。

2．在首页上可以逐个隐藏模块，但却不能添加模块，即，操作不可恢复。用户在隐藏一个模块后发现无法恢复会产生恐惧心理。

3．删除文章与隐藏模块使用了相同的X型按钮，但所实现功能的性质却不完全相同：隐藏了的模块还可以通过“布局管理”重新显示，而删除了的文章则无法恢复。如果功能不同则应该使用不同的图标。

4．页面中划分每一个内容单元的线框表现效果不理想，不足以清楚区分出不同的内容单元。

日志：

1．在修改日志页面中，“日志内容”录入窗口的左下角和右上角都有“添加图片”的功能，并且功能相同。如果需要强调这一功能，应当突出显示，而不应重复显示。

2．在修改日志页面中，“心情”符号的选择在标题之后，在管理状态的首页和日志栏目列表页“心情”符号显示在标题之前，在预览状态始终不显示“心情”符号。如果“心情”符号的确是不显示给其他浏览者的，那么在设置“心情”符号时应该给用户解释清楚，让用户知道操作的后果是什么。

应允许用户不使用“心情”符号。

3．在修改日志页面中，标题可以使用ubb代码进行编辑，但是却没有文字注释，也没有象正文编辑那样使用“切换到代码视图 ”功能，从侧面加以说明。如果不希望用户通过编辑代码改变标题，应该从技术上禁止这种功能。目前的情况使得这个功能更像一个bug。

4．标题输入有字数限制，但却没有说明。

5．点击“修改”进入修改日志页面，页面标题为“撰写新日志”，而功能却是修改原日志。撰写新日志与修改旧日志只是初始数据的差异，因此，程序员使用了同一个页面。这种技术模型，不应该要求用户理解和原谅。

6．如果日志内容设置了字号大小（即，使用了相对字号），在列表页先将浏览器字号设置为最大，然后进入修改日志页面，再缩小字号，此时文字换行出现问题。

7．用户在修改原日志时，有撰写新日志的需求（有待通过实际的用户测试进行证实），而在修改日志页面却没有“撰写新日志”功能。

8．在修改日志页面中，“日志内容”输入的字号设置功能默认值是“小五”，但是正文的默认设置并不是“小五”，而是固定的12px。当用户尝试改变字号后，无法在“设计视图”中恢复默认设置，只能通过进入“代码视图”修改代码才能实现，但是显然不是所有用户都会编辑代码。

9．“从剪切版恢复日志”是针对“日志内容”的操作，但现在距离“日志标题”更近，排版位置不妥。

或许根本没有必要把ctrl＋v单独设计成一个功能，并且用8个文字的按钮表现。

相册：

1．用户已经登录，在自己的blog中上载图片还需要再次登录，激活自己的“图片公园用户”。对于用户来说，“日志”、“相册”、“档案”是3个并列的栏目，都是自己blog的一部分，如果“日志”和“档案”在登录后就可以修改，那么“相册”也应该可以。这种流程上不顺畅是源于sohu网的技术模型，这个技术模型显然不符合用户的心理模型。

2．“在图片公园”中，“缩略”、“标准”、“幻灯”3中显示模式使用标签的表现形式，但是标签的位置在3个不同的页面中的位置不同，不便于识别。

3．相册与其他页面的页面表现区别过大，明显与其他页面分离。

档案：

1．加*的注释文字与其他文字的颜色和字号完全一样，不便于区分。

2．“Msn”大小写不正确，应为“MSN”。与MSN官方表现一致有助于用户识别。

3．“MSN”和“Email”的文本输入框较短，通常不足以完整显示输入的信息。

4．加*的注释文字显示的位置不统一，有显示在相应功能右侧的，也有显示在下面的。

5．“联系方式”缺少注释，应说明此处用户应输入什么内容。不作限制说明虽然可以给用户更大的自由度，但是也会让用户更迷惑。

6．“主人档案”输入框内的内容可以由用户任意修改，缺省状态下输入框内有提示信息（姓名、年龄…），一旦用户删除了提示文字并保存后，无法再恢复原有的提示信息。

7．“主人档案”输入框内的提示信息中有年龄一项，在“预览”状态下在左侧用户头像下的显示“主人档案”，而档案栏目中也显示年龄，此处年龄是由出生日期计算出的用户年龄，如果用户在“主任档案”中写入了错误的年龄，那么将出现两个不同的年龄，并且会在同一个页面（档案栏目页面）中显示。

8．注释文字“*请将*号去掉，填写正确的个人档案，个人档案将显示在您的博客的导航栏中。”通观全页用户才能知道“*”是注释文字的提示符，而第二个“*”是表示输入框内的缺省文字。

另外，注释文字表述为“个人档案”，而标题表述为“主人档案”，文字表述不统一。

9．“个人图片”标题出现了两次，如果此处的图片修改能与录入日志中的实时图片添加相同，此处输入框便能于预览图片同步，“个人图片”标题下，先显示图片，下面是图片地址路径输入框（未修改前输入框为空），不再需要注释文字，也不需要两个标题。同时保持了整个blog中图片上载有相同的形式。

10．同样是称呼当前使用的用户，这里表述为“个人照片”，又与上一项“主人档案”的表述不一致。

11．没有标示哪些项目将显示在首页左侧，哪些会显示在“档案”栏目。

布局管理：

页面中包含3组功能：1.选择模块（两个文本框和左右两个箭头）、2.调整模块顺序（“使用中的模块”文本框和“向上”、“向下”两个按钮）、3.预览和保存。页面中的注释文字是针对“向上”和“向下”按钮的；“保存”和“预览”是针对“选择模块”和“调整模块顺序”两功能的整体操作。在目前的页面布局中3组功能之间的关系表达不够明确。

模板设置：

1．flash特效：对于配置较低的电脑， flash特效可能不仅不能达到预期的页面效果，反而会加重浏览器负担，影响鼠标操作，影响阅读，但是，这种可能出现的负面效果在添加特效的页面中却没有提示，主人浏览自己blog中的flash也许效果很好，但是其他用户如果使用配置低的电脑访问时，效果会很糟，但是主人自己可能始终不知道。

2．flash覆盖在页面，部分flash特效会遮挡链接，使链接无法使用。

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

“预览”状态下：

1．当用户A访问用户B的blog时，B的blog页面右上角显示为“欢迎您：A 管理我的博客”此处“管理我的博客”实际是指向用户A自己的blog管理页面，而文字表述却象是用户B在对用户A说：“欢迎您来管理我的博客。”文字表述不清晰的问题，在这里后果表现的很严重。

2．与上面的问题相似，右上角的“离开”链接功能是让用户A退出登录，但是仅从文字上理解，可以理解为“理解离开这个页面”。

首页：

1．“暂无分类”、“暂无收藏”、“暂无评论”等文字使用的是相对字号，由于行高限制，放大后会重叠。

2．当目前访问页面为“某一天日志内容”页面时，在日历中，此日期与其他有链接的日期显示相同。这使得用户无法通过日历判断当前页面显示的是哪一天的日志内容。并且，当前页面本身不该有指向自身页面的链接。

3．在blog中，对于“当天页面”（即，与现实日期相同的页面。如，今天是05.11.19，那么点击日历上19日所打开的页面。），由于在访问过程中当前页面仍有可能被更新，因此，“当天页面”应有刷新功能。这种刷新功能应当明确表现，在日历中允许当天日期被点击虽然也实现了刷新功能，但是这样的方式不够明确，不可取。

（其他日期的页面虽然主人也有可能“修改”，但很少会大量且长时间的处在变化状态，所以不需要设置刷新功能。）

4．日历“收缩”后，再打开，有链接的日期与背景错位。

5．页面顶端的blog地址和用户名都指向此blog首页，那么在首页上这个blog地址和用户名不应该有链接，不应出现指向自身的链接。

日志：

1．日志详细内容页中，如果日志内容文字使用了相对字号，通过IE浏览器放大文字，文字行距没能同时放大，行与行之间出现重叠。

2．如果用户使用代码改变了标题显示，则代码将在详细内容页的title中与标题文字一起显示。

3．如果使用代码将标题字号加大，由于行高限制，在详细内容页的标题栏将可能无法完整显示该标题。

4．日志列表页中，每一条日志都有“评论”、“引用”、“固定链接”3个链接，其中“引用”和“固定链接”点击后现有页面被拉长，在原页面中显示相应内容，而点击“评论”后却跳转至日志详细内容页。这3个链接虽然有相似的表现形式，但是，点击后的效果却不同。

5．日志的准确发布时间在“固定链接”之后，而发布日期却显示在标题之上的左上角。同是显示日志发布时间，应作为一个整体显示。

相册：

1．从“幻灯”转到“缩略”或“标准”是弹出新页面，而从“所略”转到“标准”或“幻灯”是在原页面中打开，从“标准”转到“缩略”或“幻灯”也是在原页面打开。

2．对于“幻灯”模式，如果用户不是在第一时间看到该页面，就很可能看不到上部的控制器，自己选定显示的图片会不停的变，并且不知道如何让它停下来。

档案：

1．主人未填项，应不显示，而不是只显示项目名称而不显示内容，容易被浏览用户误认为是系统错误，部分数据未调出。如果主人一项都没有填写，应显示“用户未填写档案”以避免空白页面带来的误会。

2．在“首页”和“日志”中会显示flash特效，而在“档案”页面中却不显示。

你是否琢磨过为什么google的设计风格会是这个样子？－－－几乎没有设计，只是使用不同的大小的文字排版，在必要的时候加一道黑线。

如果你是一名网页设计师，你是不是也抱怨过人家为什么能够使用这样的设计，而自己的公司老板或客户却完全不能接受这样的设计，以至于你根本不敢做这样的尝试，因为那样你很可能马上就丢掉工作，只是会给你的老板留下很糟的印象－－－这个家伙根本不会设计。那样做无异于自杀。

是的，我也在琢磨，直到我想到了前苏联的两种轻武器：AK47和ppsh41（波波沙冲锋枪）。

请相信我，我不是在信口开河或者哗众取宠。先让我们来回忆一下这两种武器：
AK-47


全长870 mm，口径7.62mm，有效射程300m，最大杀伤力射程1500m。
AK-47的枪管与机匣螺接在一起，枪管镀铬；弹匣用钢制成；击发机构为击锤回转式，发射机构直接控制击锤，实现单发和连发射击；发射机构主要由机框、不到位保险、阻铁、扳机、快慢机、单发杠杆、击锤、不到位保险阻铁等组成。
AK-47的动作可靠，勤务性好；坚实耐用，故障率低，无论是在高温还是低温条件下，射击性能都很好，尤其在风沙泥水中使用，性能可靠；结构简单，分解容易。
－－－摘自“枪炮世界”

ppsh41（波波沙）

口径：7.62mm，弹容药量：71rds’弹鼓/35rds’弹匣，理论射速：900rds/min，有效射程：100～200m。
PPSh41大部分零部件都采用钢板冲压、焊接、鉚接制成。具有结构简单、加工工艺好、易于大量制造，火力猛烈。
在二战当中，苏联的PPSh41以其结构简单、动作可靠、性能优良、火力猛烈而且造价低廉而饮誉武器界。
在卫国战争中，入侵的德军宁愿使用缴获的PPSH41也不使用德军的标准装备MP38/40冲锋枪。
－－－摘自“搜狐军事”

这两种武器有着一些相似的特点：
1.制造成本低；
2.宽容度高，即使枪体中有灰尘的时候，也能正常工作；
3.维护简单，使用者可以很容易的拆卸部件，进行保养；
4.操作容易，使用者很容易掌握。

现在回到刚才google的问题上来，google的简单、朴素的风格同样存在着类似的特点：

1.制造成本低，对于网站产品来说意味着设计成本低，同时简单朴素的设计使得用户下载文件量小，保证了浏览速度，也减轻了服务器的负担。使产品开发商和用户的成本都降低了。

2.宽容度高，对于网站意味着可访问性高。简单的设计即使不完全按照web2.0的标准进行页面制作，在不同的浏览器上页面表现的差异也不会很大。提高可访问性的价值在Zeldman的《网站重构》一书中已经进行了充分的说明。

3.维护简单，对网站来说有利于更多的设计师协同工作。修改别的设计师的设计稿会更加容易，同时多位设计师的作品可以更好的统一风格。

4.容易操作，使用者容易掌握。
对于一个产品，容易使用是最重要的了。对于网站也不例外，用户体验工程师将其称之为网站可用性。简单朴素的设计风格本身就能够提高网站的可用性，因为大量的分散用户注意力的装饰元素不见了，页面上显示的是用户真正想要的。
在现实生活中，人们喜欢使用看上去简单的工具，因为这样的工具很容易掌握，它的工作原理很清楚，更多的呈现在使用者面前，使用者更容易建立正确的心理模型。网络产品也是一样，一个输入框和一个按钮已经清楚的告诉用户：先输入关键字，然后点按钮，您想要的东西就出来了。简单的设计会减少用户对网站的距离感。对于用户来讲，朴素的、亲切的、平易近人的页面更容易接近。

当你在家休息的时候，你会穿什么样的衣服呢？最舒适的。也许是一件穿了多年的绒衣，或许还有已经开了线的秋裤。它们显然不象你的正装那样赏心悦目，可是有什么关系呢？不幸的是，我们现在大量的网页设计更追求表面视觉上的绚丽，apple风格的水晶效果，特殊的字体，牵强的使用icon，背景花纹……如果继续用服装来类比网页设计，那么这样的网页更像动物园服装批发市场里的廉价的时髦的外套，到处是金色的拉链，人造皮毛做装饰，故意显露针脚的缝纫，或许还有个“US ARMY”的徽章。穿着这样的服装是中学生廉价的张现个性的需要，而一个网站是为用户服务的，开了线的秋裤才是更合适的。

虽然，我自以为已经有充分的理由把网页设计的更简单些了，但是，和其他设计师一样，我也仍旧无法这样做，因为毕竟看这篇文章更多的还是设计师，而不是老板，尽管他们在家的时候也穿开了线的秋裤。

（只看小标题您就能知道这一部分要说什么了，为了避免罗嗦，在此文发布前决定把此处300余字删除，只保留了下面这一句。）
对于一个设计的好的网站来说，用户浏览时间最长的是文章正文。

中文网页文字的现状：

中文网页普遍使用12px和14px的宋体（simsun），这两种文字都可以加粗（font-weight: bold）。这个规范似乎也成了网页设计师的基本常识。

中国的网页设计师有这4种可供选择的文字表现方式，仅仅是4种，只有这4种,4种很小的文字。其中12px的宋体加粗效果还并不太理想。

危机逐渐显现了，文字在变小！

显示器在逐渐变大，分辨率在逐渐提高，尤其是液晶显示器的普及—pc液晶显示器技术日趋成熟，笔记本电脑也开始家用化了。
液晶显示器根据不同的尺寸往往需要一个特定的分辨率，以17英寸液晶显示器为例：最佳的分辨率是1280×1024，在这个分辨率下，显示文字才是清晰的。

下面用两台显示器来做个比较：

第一台显示器是一台古老的14英寸显示器，宽是11.2英寸，高是8.4英寸，分辨率设置为800×600。

第二台显示器是一台17英寸显示器，宽是13.6英寸，高是10.2英寸，分辨率设置为1024×768。与14英寸显示器相比，显示同样象素尺寸的文字，文字的高和宽缩小为：800/1024×13.6/11.2=600/768×10.2/8.4=95%。

5％的变化似乎用不着大惊小怪，但是，很多人办公室中的显示器恐怕是15英寸的，并且理所应当的在使用1024×768的分辨率，那么文字就将缩小16％，如果您和我一样，希望在家中更好的享受电脑，买了一个17英寸的液晶显示器，那么文字就将缩小24%！没剩下多少了！

或许应该劝告使用19英寸液晶显示器的朋友不要上网了，估计上去基本上也看不清什么字。

更换大显示器本来是为了看的更清楚，不过，看来目的没达到，至少是看网页的时候不会更清楚了。除非您使用原来800×600的分辨率，您会吗？随着显示器尺寸的逐渐变大，分辨率在逐渐提高，而网页上的文字却看上去越来越小，人的视力又没法越变越好。显然我不能建议您使用更小的显示器，那么，应该把文字变大。

（如果上述理由还不能让您相信网页文字应当变大，那么您不用浪费时间继续读了，不过肯请您不要留言骂我，我比较喜欢听表扬。）

网页上的文字能变多大？

为了让文字变大，设计师们在努力尝试着各种字体与字号的组合。

但是这些尝试主要是针对标题的显示，对于大量文字的显示显然并不合适，那么正文怎么办呢？

在文章的开始已经说过，对于一个好的网站来说，用户浏览时间最长的是文章正文。宋体除了12px和14px以外还有另外两个字号也是比较理想的：一种是16px，另外一种是18px。目前已经有一些网站在使用16px的宋体作为文章正文了，18px的则比较少见。

在目前所见到的这些应用中，16px宋体的表现都还是让人满意的，没有出现笔画粗细不均匀、明显的锯齿等现象。18px宋体也有同样令人满意的显示效果。

同时使用12px、14px、16px、18px，网页文字岂不是就能有4中大小不同的显示效果了？天大的喜讯啊！可惜，实际情况并不是这样。从字面上看18px的文字应该比16px的文字大两个象素，但实际上差距并没有这么大。

16px宋体“文字实际显示尺寸”为15px（宽）×16px（高），18px宋体“文字实际显示尺寸”为16px（宽）×16px（高），见下图：

18px只是在宽度上比16px宽了1px。

16px宋体“文字占用的显示空间”为16px（宽）×18px（高），18px宋体“文字占用的显示空间”为18px（宽）×21px（高），如下图：

请注意这里的宽度，16px宋体“文字占用的显示空间”宽度为16px，系统所定义的字号就来自于此。通常用户会认为16px的文字的高和宽为16px，而实际上电脑所呈现出来的是：占用显示空间的宽度为16px的文字，其相应占用的显示空间的高度为18px，用户所看到的“文字实际显示尺寸”为15px（宽）×16px（高）。

如果我已经解释清楚“文字实际显示尺寸”与“文字占用的显示空间”的区别了，那么，我们继续。

上面的分析说明，在网页上使用18px宋体与16px宋体看上去差别并不大，每个文字只宽了1px，因此，我的观点是：如果希望在页面上使用较大的文字，可以选择16px的宋体或者18px的宋体，在同一页面上同时使用这两种字号实际意义不大，这两种文字的大小差距并不象想象的那样大。

如果您刚才没有离开，并且看到这里仍旧不觉得讨论一个大号文字有必要费这么多话，这的确让我难堪，如同一个人极尽表演之能事，眉飞色舞的讲了一个很长的冷笑话。

目前无论是16px还是18px确实都还没有得到广泛的应用，似乎文字的大小真的并没那么重要。的确，目前在中国，视力衰退的老年人使用互联网的的确不算多，我曾经问过我父亲：“为什么不爱上网呢？”他回答：“那上的字儿太小，看着费劲。”

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
注：此文完成于2005.11.16，在后来的测试中又发现了18px宋体与16px宋体的另外一个差别：在显示数字和字母时，18px宋体将数字和字母显示为粗体，视觉效果很突出，而16px宋体的显示更接近与12px、14px的显示效果，因为选用16px宋体作为正文更为合适。

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
本文曾发表于chinaui ，转载于蓝色理想

真正的按钮

真正的按钮有两个作用：
1．实现提交功能；
2．标明当前操作的目的。

说明：

无疑按钮实现着提交功能。当用户输入了关键字后会点击“搜索”按钮，网页中将出现搜索结果；当用户填写了用户名和密码后，点击“登录”按钮，系统将打开自己的邮箱页面。

按钮上的文字说明了整个表单区的内容，比如，有“搜索”按钮的区域显然标明这一区域内的文本输入框和按钮都是为搜索功能服务的，不需要在另外添加标题进行说明了，这也是设计师为提高网页可用性而普遍采用的一种方式―――逐字斟酌按钮文字。

按钮的表现形式可以大致总结为两种：
1．系统标准按钮
2．使用图片自制的按钮

对于真正的按钮应当使用系统标准按钮还是自制的图片按钮？

笔者认为应当使用系统标准按钮。系统标准按钮的设计起源是模拟真实的按钮，无论是真实生活中的按钮还是网页上的系统标准按钮都具有良好的用户反馈。

标准按钮的优势：
1．易识别。与各式各样的图片按钮相比，在网页中标准按钮更容易被用户识别出的按钮。网页中的标准按钮与用户电脑的操作系统中的按钮表现上是一致的，这降低了用户识别上的负担。
2．操作反馈好。标准按钮具备多种状态，“正常状态”“被选中状态”“点击时状态”，多种状态使标准按钮能够传达更丰富的信息，而制作图片按钮的设计师通常没这种耐心为一个按钮制作多种状态，因为使用图片按钮多数时候是因为图片按钮更好看，而设计师并不太在意用用户的使用效率问题。使用图片制作出好看的页面是本能水平上的设计，而使用标准按钮制作易于使用的页面是行为水平上的设计(关于“本能水平上的设计”和“行为水平上的设计”理论请参见Donald A. Norman的《Emotional Design》)，我认为针对按钮这个问题应该优先考虑行为水平设计的需要，毕竟按钮是网页”行为”部分(web标准将网页分成三部分：结构、表现和行为)的一个重要元素，何况在我看来系统标准按钮并不难看。

系统标准按钮也存在自己的问题：样式过于呆板，尤其是windows2000风格的按钮甚至被一些网页设计师认为是无法接受的丑陋，相比之下windowsXP式样的按钮更容易被接受，无疑多数网页设计师以及公司boss还是更关注本能水平上的设计―――好看的设计。

css可以对按钮式样进行一些个性化设置，可以改变按钮颜色、立体效果、文字大小、文字颜色。具体方法可以很容易的在互联网上找到，这里不多说了。我认为对于按钮这种程度的变化已经足够了。

我的观点：对于真正的按钮应该使用按钮这种表现形式，并且应该使用系统标准按钮。

伪按钮

在网页中大量存在这样的按钮，从表现上看是一个按钮而实际上只提供了一个链接。

起源：最初网页上随处可见文字链接，设计师为了突出其中的某些特别重要的链接，将其设计成了类似按钮的样子，使得这些链接更为突出，引导用户点击。这也从侧面说明了在网页上按钮是很醒目的元素。

现在在网页上使用伪按钮的原因更为多样，让我们来看看“民意调查”这个例子：

在很多网页中“提交”和“查看结果”被设计成相同系统标准按钮，然而“提交”是将用户的选择提交给网站的系统，存入数据库，而“查看结果”是打开一个小窗口显示目前的投票结果，显然将“查看结果”设计成文字链接是更合理的，设计成按钮的原因通常是为了样式上的美观：最下面一行并排放置两个按钮，都有点击的功能，看上去更和谐，但是这却破坏了用户的可操作性。

上面这个例子是由于视觉设计上的需要，而错误的使用了按钮。当然广告中故意使用伪按钮误导用户也是使用伪按钮的一个重要原因。造成伪按钮泛滥的最根本原因还在于相当多的网页设计师还没能意识到伪按钮与真正按钮的区别，在设计过程中随意的使用按钮这种表现形式。

伪按钮的负面效果是：使用户难以辨别哪些是真正的按钮。用户在使用一个滥用按钮的网站时，会花费很多心思来区分一个文字链接和一个伪按钮的区别，而实际上区别仅仅在于伪按钮更为重要，设计师希望伪按钮的链接能引起用户更多的注意。

从网页可用性角度考虑有必要将链接与按钮区别开来，因为点击按钮代表提交一个表单，这不仅仅是网页的技术模型，同时也是用户的心理模型。

我的观点：伪按钮不应该使用按钮表现形式，更不应该制作成系统标准按钮。因为这将给用户造成误解，降低用户的使用效率。如果要使链接更为突出，网页设计师完全有义务花费更多的心思进行设计，更出色的表现这个链接，而不是偷梁换柱的模仿按钮，这种带有欺骗性的做法除了给用户造成误会还会使用户产生被愚弄的感觉，激怒用户显然是不明智的。

先说这个“长”，中国网站的页面真是长啊，以至于我坐在电脑前浏览的时候经常会想，这个页面的最低端会不会已经搭拉到我的脚面上了。我们的万里长城是第几大奇迹来着？反正中国的网站应该紧排在她后面。

我们的大型门户网站恐怕应该是长页面的领军者吧。现在能生存下来的大型门户各个实力不凡，又纷纷上市，其他网站能与他们页面相似应该也能说明实力相似吧，这几家大型门户已经给用户形成了“长则是好”的印象，于是众多网站都纷纷“长”起来了。无论是综合性网站还是专业性网站，只要有内容，就能做多长就做多长，没有内容，抄袭别人内容也要做长，以至于不少实力有限的网站只是首页很长，到了栏目页面（二级页面）就简陋的可怜了。

长的基础就是要内容要多，这些众多的长网站在组织内容的思路上基本是一致的，就是把二级页面的内容摘要的放在首页上。首页分成若干个相应的通栏的大块儿（这样可以逐个部分的下载页面，易于显示），再在每两块之间加一条广告，最后再在页面的最上面加一个更综合的区域，所谓的重中之重，这样以来页面想短都短不了。

按照Jakob Nielsen的说法：网站首页的长度不应该超过4屏。当然这个准则也未必就那么准确，但是至少应该承认页面不是越长越好的。

第二，说说“闪”。就是网页上能动的东西―――动画。主要是Gif动画，flash动画，脚本语言实现的图片交替效果，还有就是弹出窗口。动画对网页表现本应该是个很好的补充，但是现在的实际效果是对网页的干扰，因为动画从一开始就扮演着广告的角色。虽然将各种形式的动画应用于网站在国外的网站上也常见，但是中国网站上的动画实在是太多了。恐怕也是因为中国网站页面长吧，能放动画的空间自然也就大了。整个页面到处都在不停的闪。科学家已经证实，在月球上是看不到万里长城的，但是我想，应该是可以看到中国网页的，它们不仅长，而且还在不停的闪烁。

这些动画通常是广告，网站要生存，要有经济效益，这是可以理解的，但却不可接受，尤其是太多的时候。最不可接受的是一些网站会把自己的栏目名称，网站logo之类的很重要的内容也做成动画，以为这样可以更醒目，要知道，绝大多数用户是经验丰富的，他们看到动画闪来闪去就会认为那是广告的，尽管你不是，那也活该，谁让你乱闪来着。

虽然弹出窗口里的内容不一定是动画，但是它“噌”的一下弹出来，着实是够“动”的，就动画的效果而言，绝对是最具视觉冲击力的。还好，现在有越来越多的雷锋式的好公司提供了能屏蔽弹出窗口的工具。

脚本语言实现的图片交替效果目前主要是用在网站头条的图片报道上，虽然是动，分散用户的注意力，好在这种方式还是为了给用户提供尽可能多的信息，应该值得肯定，也应该是动画应用于网络的发展方向，只是不知道什么时候，哪位设计师灵感突现，把广告也伪装成这种样子，应该能在一片骂声中为公司赢得不少经济效益。

Gif动画是种传统的动画形式了，不过在flash动画面前，它的生存空间越来越小了，与flash动画相比恐怕Gif动画唯一的优势就是在用户将网页“另存为…”后，Gif动画还能显示，而flash就不行了。虽然Gif已是人老珠黄了，但是还是要批判，因为它通常是广告。

Flash动画无疑是网页动画的主力了，文件小，效果好，一个白方块在黑背景上隔帧出现，连续几次，只要尺寸稍大就足以造成用户暂时性失明。实际上，flash基于其强大的交互性应当能为提高用户界面的性能提供巨大帮助，但是如前面所说，它更被广告商所看好。更不幸的是越来越多“闪客”在为这项事业服务，原本代表特例独行、自由创造精神的人走向了相反的方向。这有点儿象政府将反政府武装招安后让他们穿着原来的军装去给政府机关当保安。

第三是“挤”。我们的网站看上去满满当当的，比公共汽车还挤。每天早上都是挤公共汽车，然后挤地铁，挤电梯，挤着打卡，好容易坐下了，打开电脑就不要再那么挤了，大家站开点儿吧，网页上有的是地儿。

与英文相比，中文本身就显得比较复杂，对于有链接的文字中国网站又往往更倾向于传统的随时保持下划线的方式，再加上小的几乎不存在的行间距（显然，这里夸张了，至少还要有划下划线的地儿），使得页面看上去分外丰满，如同我小时候习惯了在田字格本上写字后，初次改用行距很小的单线格本写字所展现出的风采。

即便是体检用的视力表也没有把行距安排的如此之小，那可是专门给我们眼睛找麻烦的工具啊，我们的网站无一不是把用户放在第一位的（至少自称是这样的），为什么不能把行距拉大些呢？

经常可以看到某网站为了突出重点内容而使用14pt的字号，然而却不加大该内容与其他内容的距离，这样只能使页面看上去更拥挤。这种做法倒是与老板（个别的，个别的，如果您是老板，那这里所说的一定不包括您）的做法颇为相似：只增加工作，不加薪。也许是设计师在用这种拥挤的样式向老板示威吧。

第四是“花”，中国网站的色彩之绚烂，几乎无以复加。前面分析了首页的构成方式―――将各个栏目摘要排放在首页上，通常每一个栏目会有一种主色调，这样一来，首页上的色彩自然就很丰富了。

当然，分栏目确定主色调的设计方式本身并没有错误，也不足以搞“花”页面，然而实际情况却更复杂，以文字为例，未点击的链接文字有黑色和蓝色，重点的文字会用红色（重点通常还很多），点击后的文字链接是紫色，无链接且不重要的文字是灰色，此外为了突出某一个重点内容会添加一个醒目的背景色或文字颜色。网页设计师为了表明自己工作用心，会给每一个子栏目的标题部分设计一个很具有特色的背景，这些文字再与数不胜数的图片、动画交相辉映，使得用户可以在一个页面上将电脑可以显示的全部色彩尽收眼底。网页设计师实际上根本不需要绞尽脑汁为页面设定主色调了，所有的页面色调都已经设定好了―――彩色。

为什么中国网站会设计成这个样子呢？

造成“长，闪，挤，花”问题的实质是一个“多”字。中国网站首页上内容多，重点多，栏目多，图片多，广告多，该多的多，不该多的也多，要多多，有多多。

“多”是中国网站的特点，更是中国社会的现实状况。无论是超级市场里还是购物中心里，到处是商品，到处是人潮，即使是象书店，美术馆这样的场所也是相似的场面，人们相信人多的商场里的商品会更好，人多的书店里的书会更全，人多的美术展会更有水平，卖家只能尽可能的展现自己的产品，从而证明自己的实力，而其他更高级的要求，诸如：环境，风格，品味，服务……都要为展示产品让路了。

在目前的中国，无论是物质产品还是精神产品，广大受众的需求都远远没有得到满足，所以大家都希望能看到更多产品，这样就形成了“多则好”消费心理（浏览网站的消费形式显得更间接），网页设计师在应聘时经常会被问到：你是否能胜任“大型”网站的设计，即“能不能把页面做的很长。”

中国网页内容多，给人忙乱的感受，正象我们自己经常会向别人抱怨自己忙的要死，以此来表示我们自己的价值。

引用Donald Norman 在《emotional design》一书中的理论，设计可以分为三种层次：本能水平的设计、行为水平的设计、反思水平的设计。本能水平的设计是满足人类本能审美需求的设计，也就是漂亮、美观的设计；行为水平的设计是注重效用的设计，注重功能、易用性、可用性；反思水平的设计注重信息、文化的作用，一件产品被设计的很独特、出众、引人瞩目，用户会因为始终这个产品而产生乐趣，产生满足感。

根据这个理论，中国网站的设计普遍达没能实现本能水平的设计，虽然网站的boss、设计师本人都希望把网站设计的很漂亮，吸引用户的眼球。行为水平的设计逐渐被重视了，不过目前基本上还是停留在不高的水平上。上面说到的中国网站的种种问题实际上正式在反思水平上的设计，一种变相的反思水平设计。

“多”这种看似缺陷的现象，实际上正式给用户一个好的反思―――“这个网站的内容丰富，在这里我能得到想要的东西。”尽管很多用户并不会真的关注首页上的内容。

正是这种反思吸引着用户，保证着网站的访问量。

造成上述网站首页设计问题的罪魁并不是设计师没水平或者用户没品味，而是产品不够，这表面上的“多”其实是由于“少”造成的。用户对网络内容的需求引导着网站的设计，策划人员有意无意的在迎合着这样的需求。

要改变中国网页设计单靠高水平的设计师是不够的，中国网页设计水平的提高是伴随着社会发展在进步的。

好吧，我们好好干吧，等我们实现了“四个现代化”，完成了“三步走”，创建了“和谐社会”，那时候，会需要更好的页面设计的。

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
本文曾发表于chinaui ，转载于蓝色理想 、设计中国 、中国设计中心

但是，有一种广告不仅是可恶的，简直令人发指！

想必您也见到过网上的这种广告吧，或许您也上过它们的当。被骗过的肯定不只您一个，至少还有我。

这种欺骗性广告的设计思路可以分成三种：
1。内容的欺骗。
这种欺骗比较直接，以文字为主，加上下划线，但都是在一张图片里实现的，整张图片指向该广告页面。


2。利用特定图形界面元素欺骗
比如一个下拉选择框，一个文本输入框……

3。利用网站常见表现方式
网页表现形式的组合拳，一个文本输入框加一个搜索按钮，两个文本输入框加一个登录按钮，若干个单选按钮……

这些欺骗性广告之所以能得逞，是源于用户对图形用户界面的认知。用户知道有下划线的文字是有链接的；用户知道文本输入框里可以输入文字；用户知道下拉选择框可以打开。

用户的认知是建立在信任的基础上，用户用户相信网页上有下划线的文字是有链接的，相信文本输入框是可以输入文字的……

欺骗性广告正是在滥用用户对界面的信任，使得当用户看到一个下拉选择框时，会产生怀疑：“那未必是一个下拉选择框，也许那是一个广告？”

如果信任被打破，那么与之对应的因果关系也就不存在了。“狼来了”的故事讲的再清楚不过了，当别人不再相信放羊孩子的话了，也就不会再跑来打狼了。当互联网用户不再相信一个文本输入框真的可以输入文字了，也就不会再点击了。当然实际并没有这么夸张，用户不会因为上当点击了某一个欺骗性广告就再也不上网了，不过，用户会再以后的使用中对界面存有戒心，提防上当。这使得用户的使用效率降低了。

界面设计的重要任务之一就是提高用户的使用效率，为了提高用户使用效率，设计师们在努力的统一表现形式，这也正是一类产品逐步走向成熟的过程。电视遥控器最开始的设计五花八门，逐渐地，设计师注意到用户使用最多的按键是“上一频道”、“下一频道”、“加大音量”、“减小音量”，于是越来越多的遥控器将这4个按键设计的与其他键有所区别且更加容易点击，渐渐的这4个按键在所有遥控器上有共同的特点：按键较大，造型与其他按键有所区别，两两一组。所以现在即使是你从没使用过的电视遥控器，你也能很快的找到这4个按键。设计上的规范使得用户的学习过程更加容易。

互联网界面的设计演变也在从无序向有序的过程中。设计师的表现方式在逐渐统一：在页面靠上的位置安排搜索功能，由一个单行文本输入框和一个搜索按钮组成。用户也逐渐地有了相应的认知：如果要搜索，应该在页面的上部找到一个单行文本输入框，输入关键字后点击后面的搜索按钮。然而现在欺骗性广告也使用了同样的表现方式，那么上述的用户认知就不成立了。设计师如果需要给页面设计一个搜索功能应该怎么办呢？应该怎么去了解用户的使用习惯呢？没法了解，因为用户没有习惯，用户无法建立习惯，用户的习惯被利用了。

交通标志是每一个司机都应该认识并且遵守的信号，如果在路边立一个与交通标志表现方式相似的广告牌，上面显示“前方500m是XX饭店，欢迎光临！”这样此饭店的生意一定红火。但是这样却干扰了司机的注意力，司机认为交通标志应该指引自己如何驾驶，而其中却出现了与指引驾驶无关的内容，那么司机将会对交通表示产生质疑，交通标志的作用也将减弱，所以在交通法规禁止使用与交通标志表现形式相近的广告牌。而谁为互联网制定法规呢？

为了获得经济利益，人们过度砍伐树木，后来发现生态环境被破坏了，人类自身的生存环境恶化了，意识到了危害，人类开始有节制了，制定法规限制树木砍伐。乱砍滥伐会被判刑，而制作欺骗性广告倒是有可能被夸奖为有创意、思路开阔。在目前的互联网公司里，设计制作广告的设计师往往同时肩负着网页的设计制作。如果这些设计师自己就在制作欺骗性广告，损害了用户对界面的信任，破坏了网站的环境，那怎么能设计出高效、易用的网页呢？请看下面的一个实例：

乱砍滥伐还有可能是你砍树，破坏别人的环境，而制作欺骗性广告就是你砍树，你遭殃。这种做法与自掘坟墓相比，区别仅仅是后者的劳动强度大些。

马三立老先生有个著名的段子：《逗你玩儿》－－－“谁啊？！”“逗你玩儿！”“谁啊？！”“逗你玩儿！”“你这倒霉孩子，到底谁啊？！”“逗你玩儿！”…啪！！！一个响亮的大嘴巴子。

谁来给欺骗性广告这个倒霉孩子一个响亮的大嘴巴子呢？

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
本文曾发表于chinaui ，曾转载于蓝色理想

每一种元件都能实现一种特定的功能，这自不必说，本文要探讨的是，一个表单元件作为界面上的一个元素，能传达给使用者什么信息。

表单元件在实现一种特定数据采集功能的同时，元件本身也向使用者传达着语义。以单选框为例，界面中如果出现若干条选项，每一条选项由一个单选框引导，此时，不需要任何文字说明，使用者便可以很清楚的理解：“选择其中一条”。这个道理似乎是显而易见的，然而在实际的应用中却不是总能被正确的理解和运用。下面来看两个实例：

实例一：当当网（www.dangdang.com）首页“搜索商品”部分的下拉选择框。

如图中所示，下拉选择框的选项表述为“在所有XX中”，这样的表述是多于的，选项只需逐行显示“所有产品；图书；影视；音乐……”即可。重复的表述“在所有…中”表面上看是更清楚的表述，而实际上却事得其反，当打开这个下拉选择框时，使用者需要先从每行6个字共8行的文字矩阵中提炼出每一行的关键词（即：所有产品；图书；影视；音乐……），然后，在进行选择的时候只关注关键词所在的列，并选择符合自己要求的选项行。“在所有…中”这4个字成了视觉上的干扰，这无疑降低了使用的效率。实际上，下拉选择框本身已经表达了“在所有…中”这个含义。

在卓越网（www.joyo.com）的首页上也有一个类似的下拉选择框，

对比两者，不难发现，卓越网的下拉选择框更易用。显然两个设计者在“如何理解下拉选择框这个表单元件”这个问题上理解不尽相同。

实例二：买麦网（www.mymai.com）某一栏目内复选框。

显然，无论内容有多么重要，也没有必要在此处的复选框后面写一篇小作文来加以说明，何况这些说明并不必要。实际上，此处只要写：“保留过期信息”6个字就够了。复选框传达的含义是：如果复选框被勾选，表示当前使用者同意复选框后面的命题；如果不勾选，则表示不同意。在设计此处复选框时，如果设计者能确实理解复选框所传达的含义，那么就不必担心用户可能会误解此处选项了，自然用不着费如此多的笔墨了。

每个表格元件都有与其功能相匹配的语义，这个特点是图形用户界面的一大优势，用户在使用图形用户界面的最初一段时间里，逐渐的了解并记住了每一类图形元素的定义，这是所谓的学习图形用户界面的过程，这个学习过程要比命令行用户界面容易的多。网页中所使用的表单元件是整个图形用户界面中的一部分，本文中所说的表单元件的语义正是用户对图形用户界面中各个元素的理解，把这些“理解”翻译成文字就成了这里所说的“语义”。在实际的使用中，由于用户已经有了相当的经验，可以熟练的运用图形用户界面中的元素，所以，往往并不需要“识别—理解—翻译成语义—使用”，而是“识别—理解—使用”。

不过，对于一个设计师来说，能正确的理解、翻译并使用表单元件的语义是有意义的，至少可以让你的网页不那么罗嗦。

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

首先总结bokee现有的功能：

控制面板：
未提供具体功能。

博客管理：
立即更新博客:功能不祥，与“博客管理>更新博客”似乎重复。
访问自己的博客：在新页面中访问用户自己的博客前台。
写新文章：写新的日志文章。
选择模板：在现有的模板中选择一个。
diy模板：自己修改css文件，分为：首页、索引页、单篇文章三项。
管理已有文章：可根据条件查找文章；修改原有文章；删除原有文章；更新发布。
管理评论：可根据条件查找评论，删除评论。
管理留言：可删除评论。
管理栏目：可添加新栏目；修改原有栏目。
标题设置：……
摘要设置：……
设置blog的分类：……
更新首页：……
更新索引页：……
更新rss：……

链接管理
链接管理：在不同的四类中添加链接。

功能设置
显示blog访问统计：显示内容包括：Blog名称、点击次数、最后访问时间。与“博客管理>最近更新”部分重复。
显示文件空间统计：显示总空间大小、实际剩余空间、文件个数。
个人资料管理：
笔名
真实姓名
性别
出生日期
所在地
从事行业
婚姻状况
身份证
是否对外公开
修改密码
管理头像图片
联系方式：qq和电话
管理上传文件：显示总空间大小、实际剩余空间、文件个数；可浏览、删除已有文件；可上传新文件。
站内消息管理：发送新消息；删除、回复收到的消息。
管理“我写的评论”：……（注：“博客管理>评论”是管理别人的评论。）
好友设置：新增好友；删除已有好友。
成员管理：发送邀请以添加成员；删除现有成员。
页面显示管理：
首页文章显示数量
首页最新博客显示数量
文章是否展开
是否匿名留言
是否开通评论
是否显示评论人头像

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
粗劣统计下来整个bokee的用户后台有40余项功能，设计这些功能出了多少问题呢？我们来分析一下：
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
控制面板：
1。页面最上面一行是提交反馈意见的链接，提交反馈意见链接应该出现在用户后台操作的所有页面中，因为对于各个操作用户都可能有意见，而唯独在这个页面中不应有反馈意见链接，因为在这里用户没法完成任何后台操作。
2。下面的7个图标中，前6个各提供了一项操作的快捷方式，最后一个图标竟然指向了ebay。对这种欺骗性广告的分析，在《也许那是一个广告？》中已经讨论过了。
此栏目页面几乎没有提供任何真正的功能，只是将“博客管理”、“链接管理”、“功能管理”、“写新文章”四个栏目中的部分功能做了链接。

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

博客管理
最新更新：
1。“文章数量”中“访问次数”显然不属于其中，并且在“功能设置>信息浏览”中重复出现了这项内容，只是被显示为“点击次数”。
2。在“文章数量”下面由一个图标引导显示用户自己blog的名称，链接到前台。在此页面的右上角同样由此功能，文字表述为“访问我的博客”后面加图标
如果一个功能很重要，那么应当突出显示，而不是重复显示，即便是重复显示了，也应当使用同样的表现方式－－－相同的文字、相同的图标。
3。按钮“立即更新博客”，似乎与“博客管理>更新博客”有重复，并且在其他一些功能完成后页面顶端会出现提示要求用户点击一个“重新发布”按钮，上述多种“更新”功能并没有明确的说明彼此之间的关系。
4。右侧的“快捷方式”中，除去最后一项和“DIY模板”以外，其他链接与标签栏的功能相同，相同的链接写了两边，“快捷方式”并未比标签栏更快。最后一项是指向“功能设置”中的“页面显示”功能的（该页面有误，将一级栏目错标做了“博客管理”），如果在“博客管理>最新更新”中应当有“功能设置>页面显示”，那么，“页面显示”功能为什么不在管理”中呢？

写新文章：
1。最上面一行7个图标链接，最后一个又是广告，这恐怕是bokee中为数不多的几处统一的设计。出去“写新文章”和“低价蜂抢”的广告以外，其他5项都于实际指向的功能标题不一致。现在所在的页面就是“写新文章”，再出现“写新文章”的图标链接意义何在呢？恐怕唯一能实现的功能就是reset了。虽然缺少实际的用户调查，但是凭主观经验，我认为在此页面中有必要的链接只有“上传文件”，有多少用户会在写新文章的过程中想要变换blog的模板呢？
2。“撰写模式”控制是否显示页面下部的一系列功能选项，但是下拉选择框的位置比较靠上，用户通常在第一屏就可以操作，但是即使使用1280×1024分辨率的显示器也无法在第一屏看到页面下部的变化。
3。“选择文章分类”，原本可以不选择，但用户一旦选择了某一类，就必须要选了，可以改选，但无法不选。一个不可逆的工作流，如果功能原本就是这样设计的，那应该在用户操作前解释清楚，用户在操作之前有时并不知道操作的确切后果，合理的设计是：允许用户取消操作。
4。接下来的4个下拉选择框和一组单选按钮，未能清楚的说明各自的功能，没有理由要求用户事先就知道“显示评论人头像”在他（她）的blog中是什么样子。
5。“文章是否展开”一项与“功能设置>页面显示”中的第3项重复，哪一处的设置会比较有效呢？
6。博bokee为用户提供了上传文件的功能，如果需要在文章中加入图片，可以先将图片上传到自己的空间中，然后在文章中加入相应的URL。不过在撰写文章的同时怎么查看图片URL地址呢？必须要在新窗口中打开“上传文件”页面，在两个页面间切换才能完成插入图片的操作。为什么不能象更改头像的操作一样，让用户在执行“插入图片”操作同时自动为用户完成上传图片文件的工作呢？

模板：
1。此页面表现两个功能，第一，选择一个模板；第二，DIY模板样式表。这两个功能存在先后顺序，而页面的表现却比较混乱，没有体现出先后顺序。
2。选择模板功能，当用户点击某一模板图片时，打开新页面显示示例图片，而点击图片下面的文字时，表示用户选择了此模板，这个操作十分重要，因为用户对原有模板的修改将彻底失效，DIY自己选定的模板通常需要用户投入很大的经历，反复尝试，也许用户只是想看一看其他模板的示例，结果却造成了无法挽回的后果，这个操作甚至不需要对前台进行刷新，只需一次点击。这里显然缺少对更改模板的必要说明，并且缺少撤销操作的功能。
3。“模板DIY”功能，在页面上两次出现，在页面左侧分别有“首页”、“索引页”、“单篇文章”3个链接，而在页面右侧只有“模板DIY”一个链接，如果用户点击右侧的链接并对打开页面中的样式表进行了修改，用户会想当然的认为是对整个blog的样式进行了修改，而实际上右侧的这个“模板DIY”指向的是修改首页的样式表页面，与左侧的“首页”链接等效。如果不能提供对整个blog样式整体进行修改的功能，那么在这个页面中也不应当同时出现“模板DIY”和”DIY:首页 索引页 单篇文章”这样的表达方式，用户会很自然的将这4个链接理解为包含关系。

文章：
1。页面上部的说明文字中提到的‘确定’按钮实际上并不存在。
第3处逗号应改为句号，第2处句号应改为逗号。我原以为只有我是不识句读的。
此处的说明文字过多，并且文字较小。类似的说明文字是为新手用户准备的，但是用户会很快的成为中间用户，对于中间用户这些文字就显得多余了。针对此页的实际情况，我觉得即使是对于新手用户，这些说明文字也没太大必要，何况其中有误。
2。列表中的放大镜图标提供了实用的功能，但表述却不够清楚，用户很难发现这两个功能。

评论：
1。文字说明与“文章”功能存在类似的文字，不再重复。类似的问题在其他页面中也存在。
2。第一个下拉选择框中的第一项“选择一个条件”应改为全部“全部”。当用户看到下拉选择框时已经明白了“可以选择”这个含义，在我的另外一篇文章《表单元件在说什么？—分析表单元件的语义》中有更详尽的讨论。

栏目：
1。功能上似乎存在一些缺陷。
2。“默认栏目”对于用户来说是一个不存在的目录。如果用户不增加栏目，只是一条条的添加日志，用户会理解为只是在往自己的blog中添加，而不是往blog中的某一个目录中添加。这种心理模型来自于windows操作系统，当我们将硬盘分出一个D盘驱动器后，如果直接向D盘中添加文件，文件将会存放在D盘的根目录中，而不是某一个默认的文件夹。“默认栏目”是一个典型的技术模型产物，并且是一个不符合用户心理模型的技术模型。

标题/摘要：
1。“博客标题”和“博客摘要”缺少必要的说明。尽管右侧的说明洋洋洒洒写了3段，但仍旧没有说明“博客标题”是什么，毕竟前台页面中没有“博客标题”这个字样。
2。在撰写文章的时候，用户可以改变文字的大小、颜色、是否加粗等等，“博客标题”和“博客摘要”也可以改变大小、颜色、是否加粗等等，但却要进入“模板”功能中，点击“模板DIY”链接，而不是在修改文字的时候。显然用户在修改博客标题的时候更容易想到要调整标题的大小，而不是在设定模板的时候。
3。“选择分类”也存在“一旦选择，就只能改选，不能不选”的问题，而且似乎有时没能记录上一次的选择结果。

博客更新：
这里的更新与“最近更新”中的“立即更新博客”按钮的作用是否相同？是否存在包含关系？与其他功能中的“更新首页”按钮是什么关系？

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

链接管理：
1。虽然有一大段说明文字，对于新手用户仍然无法知道创建一个链接列表意味着什么，自己的blog中将出现什么变化。
2。这样一个并不常用的功能，却安排在一级栏目中，仅仅是因为从功能上看，它与其他功能无法划分在一类中。

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

功能设置：

信息浏览：
1。“个人资料摘要”中显示了“用户名”、“真实姓名”、“邮箱地址”3项，旁边有“编辑个人资料”的链接，从文字上看，此链接打开的页面应当是能够编辑包括上述3项在内的一系列个人资料，而实际打开的页面中，只能找到“真实姓名”一项。
2。“Blog访问统计”中的“blog名称”与“博客管理>标题/摘要”重复，此处只提供浏览，不提供修改。如果“博客管理>标题/摘要”中的内容必要出现在“功能设置>信息浏览”中，那么“标题/摘要”功能为什么不在“功能管理”栏目中呢？
3。“点击次数”与“博客管理>最新更新”中的“访问次数”内容重复，前面已经提到了。
4。在我测试的过程中，“最后访问时间”始终显示为“不详”。
5。“文件空间统计”是“上传文件”页面中的部分内容，如果认为在这里有必要做简要介绍的话，那么应该相应的提供指向“上传文件”页面的链接，毕竟，“文件空间统计”和“上传文件”这两个词组从文字上看，并存在十分必然的联系。
6。与“博客管理>最新更新”页面类似，此处的“选择快捷方式”并没有帮助用户更快的完成操作，只是最下面一个链接提供了“帮助信息”。

资料：
1。“你的照片”和“联系方式”使用了14px加粗的橙色文字，标题“资料”使用了16px加粗的橙色文字（饱和度略有降低的橙色）。对于用户来说，这3处标题是很相似的，是否意味着这3个标题是并列关系呢？当然如果用户printscreen，然后在图像处理软件中分别提取文字颜色，会发现颜色并不相同，“资料”的颜色是＃F37521，另外两个标题的颜色是＃FF6600。如果用户精确测量文字高度就会发现，“资料”比其他两个标题高了2px。
2。“这些个人资料将用于您的……”这些说明文字是针对页面中部“是否对外公开”选项的，但却安排在了页面顶端。
3。“是否对外公开”选项有红色提示文字，但通观全页也没有找到提示文字中所说的“*”。

上传文件：
1。每一个页面都在左上角有一个橙色标题，使用16px加粗的宋体，有些标题与标签栏中的文字相同，比如“站内消息”页面，此页面标题为“我的文件”。此页面即有上传文件的功能又有管理已有文件的功能，标签栏写做“上传文件”似乎不准确。
2。“摘要”部分的内容与“信息浏览”中的“文件空间统计”相同，但却称作“摘要”。
3。“当前文件夹：inc / ”表示了用户当前的文加夹名称。如果无法修改或添加文件夹，那告诉用户当前文件夹名称有什么意义呢？
4。文件列表中复选框列的标题“删除”应改为“选择”。选中复选框并不是执行了删除操作，而是选定文件，准备删除。

站内消息：
1。从列的标题上看，左侧列表是用户收到消息的列表，但是却没有明确的标题提示，与直对应，右侧的“发送新的消息”显得更清楚、明白。
2。“发送新的消息”中的消息标题允许用户输入20个以内的文字，但是单行文本输入框却只能显示11个文字。

我写的评论：
1。“博客管理>评论”也是一个管理评论的页面，似乎那个页面是管理其他人写来的评论，而这里是管理用户自己写的评论。虽然存在这样的差别，但必定是都是评论，有什么理由一个在“博客管理”中，一个在“功能设置”中呢？一级栏目的划分的依据是什么呢？一级栏目划分的意义是什么呢？难道仅仅是因为功能太多，无法同时显示，才要将这许多的功能分在不同的一级栏目中吗?

好友：
1。“新增好友”有一个单行文本输入框，而在接下来的列表中，除去“删除”列，还有“好友”和“博客URL”两项，那么在新增好友的时候到底应该输入什么呢？增加好友有什么用呢？在blog页面上会有什么变化呢？

成员：
1。左侧的成员列表中最后一列为“除去”，显然与前面页面中的“删除”是相同的，表述为“删除”是不恰当的，表述为“除去”也是不恰当的，相同的功能使用不同的表述更不恰当。
2。右侧的两部分说明文字主要是针对新手用户的，用户一旦知道了什么是成员，如何添加新成员，也就是说，从新手用户变为了中间用户（关于“新手用户”和“中间用户”的解释可参见《软件观念革命》－Alan Cooper 第一部分 3 新手、专家和中间用户），那么这两部分文字就不再需要了，文本输入框和“邀请”按钮就成了常用的功能，而这个功能却在页面右下角，使用1024×768分辨率的显示器无法在第一屏显示。

页面显示：
1。橙色16px标题问题不再重复了。
2。页面左侧出现了两个相同的图标，竟然是问号图标，问号图标通常表示帮助信息，也就是说，问号表示用户有问题要问系统。此处使用了问号图标大概是因为项目是一个个问题，系统在问用户。
3。需要选择的项目普遍使用了下拉选择框，我认为使用成组的单选按钮效果更好。下拉选择框和单选按钮能实现类似的功能，在此处都完全可以实现功能要求。单选按钮可以将所有选项同时显示出来，使选择操作更直观。

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

写新文章：
“写新文章”实际上是“博客管理”中的第二项，为了使用户更容易操作，在一级栏目上添加了这一项。当用户点击一级菜单上这个链接后，页面显示为：一级栏目中“写新文章”为选中项，二级栏目中第二项“写新文章”为选中项。在前面的操作中已经向用户表示清楚了一级栏目与二级栏目的包含关系，此处的页面显示如何解释呢？一级栏目“写新文章”内包含9个二级栏目……显然不是这样的。

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

对逐个页面进行了一番了解后，我们可以将bokee后台存在的问题归纳为以下几个方面：

1。栏目划分不合理，彼此链接混乱。
也许是为了更清楚的表现各个功能，bokee的用户后台分为了两级，然而由于划分的不够合理，再加上各页面间混乱的链接，使整个后台的布局异常的无序，如同“一盒巧克力”，你永远也不会知道点击后将去到哪里。
2。文字、图像表述不恰当、不统一。
对于相同的内容表述不统一，使得后台中似乎增加了很多功能，而用户对某一操作的识别也变得更困难了。
3。相关功能的链接针对性不强。
在一个页面中增加其他功能的链接并不是多多益善，真正相关功能的链接能帮助用户更高效的完成任务，而过于形式化的“相关链接”往往是影响了用户对当前页面的操作。
4。功能提供的相应服务不完善。
大量功能缺乏起码的说明，即便是中间用户也不见得会用全部的功能。对于一项功能至少应说明：第一，它是干什么用的；第二，如何用；第三，操作后会出现什么后果；第四，如何撤销先前的操作。
5。与前台缺乏对应关系。
“可输出则可输入”是交互设计中一项重要的原则，正确的使用这一原则，第一，将使得前、后台的对应更清楚。第二，可以解决“如何布局众多功能？”的问题，第三，将会在很大程度上说明“操作后会出现什么后果？”这个问题。

关于“可输出则可输入”的原则，将在不久后做专门的讨论。

最明显的改变莫过于文字链接的样式了，在正常显示的时候，整个主页上只有“sign in”和“sign up”两处是有下划线的，其他文字链接是要在鼠标经过时才显示下划线。这样做可以使用户更清楚的看到自己即将点击出的链接是哪一个，并且避免了满片儿都是横道儿的现象。有链接的文字也不再用IE默认的蓝色了（我认识的不少设计师都亲切的称这种蓝色为“傻蓝”），而是选用了一个饱和度稍低的蓝，看上去更舒服些的蓝色，是的，还是蓝色，因为绝大多数用户已经习惯了把蓝色带下划线的文字当作是有链接的文字了，网页设计师显然没必要冒险去用别的颜色。

顺便提一下没有文字链接的文字内容，Yahoo！赋予了它们黑色，这很好看也很理性，显然当我们看一份白纸黑字的报纸时不会想去点击上面的任何内容。不过黑字却出现了一个问题，主页上左侧各个区域的标题也是黑色的字体，并且是可以点击的。再有，搜索区域的标题“Search the Web”“Search Images”…不仅与“左侧标题”相同颜色（黑色）并且字号也是一样的，但是却又无链接。

第二Yahoo！式的索引方式没有了，也许我还没解释清楚这种方式是什么，那么请您访问一下“雅虎中国”，就是左下角的叫做“网站分类”的部分。这种方式曾众多网站模仿，而现在它的创始人决定改变一下了。尽管这种方式已无新意可言了，但是确实值得称颂。让我们脱帽致敬，为它送行吧。

第三，首页上没有广告，甚至是内部广告。没有动画，动画通常会被当作广告，为什么？不为什么，不管它是什么内容，反正它就是广告。

第四，图片很少。无论是给用户看的图片还是为了实现页面效果而做的图像，总之，很少。无论是对页面下载速度还是对用户浏览都很有益。Yahoo!没有把页面左上角用来显示某一条大幅的图片报道，而是安排了该网站提供的主要服务（也就是栏目）的列表，在他们看来，这才是最重要的内容。

第五，页面长度，很合适，两屏左右（对于1024×768屏幕），也就是说用户只要滑动一次鼠标上的滚轮就够了。新的Yahoo!主页采用了web2.0标准，这可以使用户在改变字号大小后，页面的宽度也随之变化。但是，即使用户采用了最大的字体显示，页面的长度也没有超过3屏（对于1024×768屏幕），并且不会出现水平滚动条。Yahoo提供的信息量是巨大的，但是他们并没有把页面长度与内容量按照正比关系来处理，这至少说明，负责yahoo主页规划的不是一位经验丰富的中国网络公司的策划专员。