这篇文章说实际问题的，所以不多强调，下面是我总结的一些比较突出的细节问题，而且我一直认为这些问题比较严重，正因为这些都是基本问题，很容易解决的，但把这种忽略养成一种习惯性的“经验”那就“杯具”了，然而这些细节问题也不同程度的代表了你的工作态度。

1)调整后的毛边

当对一个位图的大小进行调整后，正常情况下会留下1px的毛边（如果你注意的话），边界会变得模糊，如果继续调整模糊度会加大，这个问题太不起眼了，以至于你无法用肉眼来理绘，我们先用商品图片举例子：

也许单张小图还不够显注，下面对比一个列表图和大图，当然了除非你故意想要这种效果。

放大2倍后对比

放大2倍后对比

另外不要试者调整带有边框的图片，最好是自己绘制，这个面两张对比图不用放大就能全面看到问题:

2)关于边框和背景

有些区块需要用边框装饰点缀得醒目一点,有文字区块图片区块等,文字区块加边框的建议使用同基色的 背景色填充区块,不然内容会很空洞，图片加边框的话,如果是CSS定义的边框最好是加上间隔距离,因为图片不是固定的,所以可能会出现底色与边框不协调, 严重的会造成毛边效果，下面用几个例子来说一下：

文字边框背景：

因为区块加了边框后背景与边框之外的背景颜色相同，所以感觉空洞，所以最好是区块加上背景，而且背景色与边框最好是同一个基色。

白色背景下，背景不要比边框太深，再努力的调整区块内容的颜色能与背景融合也于事无补，边框成了毛边。

在深色背景下，才使用加亮边框。

关于图片边框，图片本身就有背景，而且色彩是多样的，在给图片加边框时也最好是与图片背景同一个基色的背景，而且最好是取与图片最边上的色彩的深基色，如果是边上有多种颜色，取最多的那颜色，例：

如果边框是用CSS定义的，而且是图列，比喻说是产品列表，而列表中的产品类别和背景色都不一致，就会出现边框与背景同色或不协调的情况，例如：

上图中间一排图片边框的色彩就不协调了，如果在图片是不确定的情况下，加边框时最好是给图片与边框之间加上边框距。

在看看在深色背景下的效果，深色背景下可以有两种方案，一是去掉外框，以白色间距边框，二是加亮外框，留出与背景相同颜色的间距。如下图：

3)关于边距与对齐
设计师寻找灵感时，偶尔会随意、自由的拖拉摆放区块、填色、绘制等，直到满意才会停下，在这个过程中会出现有与“经验”挂钩的细小漏洞，例如：

下图表面看上去没问题,细看之下有点小别扭,放大后就可以看清楚了,导航文字偏高,搜索框与导航没有对齐,搜索框中Button图标距离也有问题。

调整之后如下图：

在看下面的例子：

上图中区块上下间距与左右间距不匀称，和前几的列子一样，文字与区块上下垂直间距不协调，下图是修正后的结果。

在来看一组给图片加框的效果：

在来看图列间距：
下面这个列图看似没问题，其实有两个细节问题（其中一个应该算是用户体验的问题）。首先第一列与第二列的间距 要比第二列与第三列的距离要小2px，对于这个问题，有人会说这个间距用CSS定义就统一了，不会存在差异！注意了，我们讨论的是视觉设计，不能把这个问 题丢给前端，否则你后面丢过去的更多（相信我），其次纵间距太小排的过于紧密。

调整过后如下图:

4)关于阴影与质感：
在设计点缀版面时需要有深度和3D质感的时候，可能就会用到投影、阴影、光线感等效果。但web设计和平面广告不同，太强、太硬的质感只会让页面显得粗糙，web页面是个很细致的活，还是那句话，这里只说细节，先看图：

阴影要小一点、颜色要浅一点,另外这里面其实还有一个问题，和前面讲的边框一样，如果图片是的投影颜色与图片颜色（或背景颜色）相同，效果会很尴尬，所以要边框一样给图片加一个间隔距离：

理论上讲，将一个没有质感的元素进行投影或加阴影是不现实的！前面讲的一些阴影效果，元素本身没有任何质感。看下面的例子：

上图Button和价格区块的投影没有质量,修改后如下图:

其实阴影和质感是随网站整体风格相关联的,某种情况下还不如不加上去。

关于深色背景下的质感，阴影和投影是不现实的，所以只能用发光或光线质感来实现。

就说到这里了，没时间往下说了，我要整理东走了，上面都只是你可能不注意的小小细节问题，你注意到的我也不会说了。

如果你还没有看他的那篇文章，那么请先看一下，然后再回到这里。

设计师并不仅仅让设计看起来美观

很显然，用户体验设计师设计用户体验，但是，我们所说到的“用户体验”到底是什么呢？在网络上，当用户使用一个网站或者网页应用的时候，用户的整体体验由很多方面构成：

网页给人的视觉感受
用户是否能达到他的目的
网页响应用户的整体速度
预期是否发生，例如，如果用户认为网页会对自己的操作产生某种形式的响应，但是却并没有，他会感到很失望。

以上只是举些简单的例子。那么什么才是良好用户体验的要素呢？可以这么说，所有的细节都是。

您网站的用户体验并不仅仅是指您的网页看起来如何，或者是当用户点击一个按钮时会发生什么，也不仅仅是指用户完成预定目标的流程，而是包括了一切细节。从用户打开您的网站到离开的整个过程中，他所做的一切和经历的一切都是用户体验的组成部分。用户体验设计师的工作是非常重要的，多方面的知识能使他的工作发挥更大的效用。

用户体验设计师需要知道什么

用户体验设计与用户界面设计并不相同，涉及的方面要多得多。个人认为，用户体验设计师的工作应该包括用户界面设计，以及用户在达到目标过程中的任务流程设计，需要设计师了解可用性测试的知识，了解易用性和一些用户的特殊需求，还需要了解系统的基本功能是怎么在运作的。

最优秀的用户体验设计师能结合多个学科的知识（如设计、开发，心理学）运用到工作中以最大限度地使用户受益。

例如我在Twitter上和Lukas的会话中举过的一个例子，一个用户体验设计师需要知道Ajax如何工作才能更有效地使用它。如果你不知道Ajax如何工作或者服务器请求是如何工作，你又怎么能确定在某些特定的环境中，Ajax方式对于用户体验来说是最好的？Lukas在Twitter上的留言里这么回复：

这恰恰是忽视代码实现而改善用户体验的一个完美的例子；页面刷新会使页面更容易和快速地执行。

正如我在下一段留言里所指出的，Lukas所说的实际上并不正确——在很多情况下，相比整页刷新页面，Ajax请求事实上执行得更快。刷新整页会向服务器发送更多的HTTP请求（例如请求CSS、JavaScript和图片文件），但在很多情况下，Ajax请求仅仅返回一段文本数据，所以它向服务器发送的请求要少得多。在绝大多数情况下，用Ajax请求来发送或者获取数据比整页刷新都要快。

我怎么知道这些的呢？因为作为一个网页用户体验设计师，我需要知道HTTP请求如何工作以及Apache（译注：一种服务器软件）如何响应浏览器端的请求，并且知道当我发送一个Ajax请求的时候服务器端在执行什么样的代码。只有知道这些，才能在使用Ajax或者刷新整页之间选择前者作为解决方案。很多时候我决定用Ajax，正是因为它更快速并且使应用程序更加灵敏地响应用户操作。用户体验的很大一部分来自于用户对应用程序的响应速度的感觉，所以，我使用Ajax是一个以用户为中心的决定，因为我知道这样做能提高用户体验。

如果有些人仅仅从表面上了解Ajax的运作（“页面没有刷新但是执行了某些代码”），那么，他在作出决定使用Ajax而不是整页刷新时候，其实并不完全知道Ajax的运作机制，有什么好处，有什么弊端，对应用程序的性能产生什么作用，以及如何影响应用程序缓存等等。这仅仅是一个在对关键知识没有全面了解的情况下靠拍拍脑门就做出的决定。

设计大师熟悉自己的工具

建筑设计师并不仅仅画蓝图，他们需要知道工程地区的地形地貌、气候特征，以及考虑这各种因素选择什么样的建筑材料才最合适。他们并不仅仅是画图，还需要了解建筑工艺和整体结构，需要对建筑材料和建筑过程有深入的了解，这样才能更有效地开展工作。

厨师并不仅仅是把各种食材配料堆在一起然后祈祷上天就可以变出美味的大餐，他们需要对食物以及不同人群的口味有深入了解。

陶艺师并不仅仅是雕刻出漂亮的泥坯，他们还要烧制泥坯成型。他们需要知道关于上釉、温度和烧制的科学工艺，才能像制作艺术品一样来完成他们的工作。

正如建筑设计师、厨师和陶艺师一样，用户体验设计师也需要知道关于网络环境和媒介的知识。网页设计师设计网页，并且熟知可以将他们的设计图最终实现成用户界面的HTML和CSS。如果他们不懂得HTML和CSS，那么他们并不是真正地设计网页，因为他们的设计不会考虑网络环境的制约。当一个自诩为网页设计师的人对网络媒介并没有深入了解的时候会出现什么情况呢？在对自己的设计将如何影响用户体验缺乏足够了解的情况下做出的决定，无疑是很糟糕的。举个例子：

设计师A传给HTML/CSS开发人员B一个用户界面的设计图稿。这是一个由多种元素组成的复杂的界面，每个框的每个角都是圆角，并且有3种不同的边框，还加上了阴影效果。设计稿上的字体都是设计师专用的字体，而没有任何用户电脑上默认的网页字体。

这个例子里，由于设计师对于网络环境的一些局限并不熟悉，他们选择了大量给用户体验带来负面影响的素材来做设计。为了实现那些框的圆角，并且考虑到框会随着里面内容而被撑大，你需要增加HTML标记，CSS和图片来实现。复杂的边框样式？意味着更多的代码标记和图片。阴影效果？那简直需要一摞的具有半透明特殊效果的PNG格式的图片。自定义的设计字体？你可能需要用到“可伸缩Inman Flash替换”技术来实现了（译注：即sIFR技术，可参考百度百科：http://baike.baidu.com/view/1311052.htm）。

使用大量额外的代码标记、图片、Flash文件和javascript仅仅为了实现一个对用户来说并没有多大益处的效果。用户在看到他们期望看到的网页之前需要下载许多字节的数据。加载页面额外的耗时仅仅因为对网络媒介缺乏了解的设计师在设计网页的时候脑袋中并没有考虑网络环境和网络媒介的局限性。

这是否意味着你在网页上不能实现一些漂亮的界面效果呢？当然不是，看看网上有那么多看起来漂亮的网页，运行起来也很漂亮。但是那种绘画风格浓重的网页，体积难道不是都很庞大并且很慢？难道不是有很多对用户体验并无好处的视觉效果？事实上他们并不是那么漂亮，并且这也不应该是你设计网页的方式。

你不需要是专家

要理解Ajax请求如何工作，并不意味着你需要为实现Ajax请求去亲手编写JavaScript代码，或者研究Apache服务器的进程处理，但是你需要对它足够理解，才能对它的用途作出合理的判断。正如建筑师在选择各种建筑材料时，并不会因为某种材料看起来比较酷而选择它，他们在做出选择时会综合考虑各方面因素，例如材料的结构硬度、价格、以及缺陷等等。他们在对材料足够了解的基础上作出合理判断，合理选择材料以使物尽其用。

网页用户体验设计师做出以用户为中心的高质量的决策也需要对网络环境和媒介有充分了解。如果一个用户体验设计师想要使用一个复杂的交互模型，例如拖放效果，他需要了解程序实现的这种效果应用在网页上的局限。网页上的拖放和桌面应用的拖放并不相同，因此你需要知道为什么不同，有哪些不同，以及如何正确有效地应用它。如果你时常被网页应用的速度问题所困扰，那么，了解一些关于页面加载执行JavaScript文件的字节数方面的知识就显得非常重要了。你还需要知道身体有残障的用户（译注：例如无法进行精确的鼠标操作的用户）如何来使用网页，以及如何让他们也能使用那些拖放功能。在用户禁用JavaScript的情况下，你知道如何去应对。

做出一个关于设计的决策并不像看起来那么简单。这个决策的制定需要基于很多相关因素，如设计、开发、结构、可用性以及易用性。用户体验设计师的工作需要从整体上考量各种情景和环境因素，以尽可能地使自己的工作卓有成效。是否掌握足够的和自己的决策有关的知识，直接决定着用户体验朝好的或者负面的方向发展。

这有助于你成为专家

掌握足够的知识来做出一些以用户为中心的好的决策，当然非常好，但是如果能对知识有更加深入、高级的了解，则是最好不过的了。如果你作为一个用户体验设计师，希望在某个界面中使用拖放，如果你能实现整个交互的原型，真切感受一下拖放操作的整体体验，对你的工作将会是非常有帮助的。实践出真知，如果你没有动手去用过一个实际的界面，有些东西你很难真正了解。在设计工作之前能够制作出一个实际的界面原型，及时发现一些你所不了解的东西，这是对你的工作是非常有价值的。

随着Apple操作系统的演化，他们的用户交互方式也在不断改进。在Apple公司最新操作系统Leopard以及Apple的许多最新应用中，动画效果和更高级的用户交互方案已作为用户体验的一部分得到运用。如果Apple公司的用户体验设计师完全不了解动画的核心实现，他们就不可能运用Keynote和Flash之类的应用技术来实现动画效果，那么，他们发布的某个用户界面版本很难有实质上的更新。实际上，Apple公司的视觉界面设计师应该知道Flash和Keynote并能用它们来实现用户界面。呃，用户界面设计师应该知道如何编写ActionScript代码才能开展工作？我想是的，如果你不会，那么你团队中会这些技术的那个同事工作上就会比你更加出色。

看看那些那些创建Mac和iPhone应用程序的设计师，他们对于自己设计的界面是如何开发实现的都很精通。设计师们研究Cocoa（译注：Apple的面向对象开发环境，用来生成 Mac OS X 的应用程序），以期能够创建iPhone的界面，因为一个优秀的iPhone界面设计，关键部分并不仅仅是视觉效果，还包括交互行为。iPhone开发上最成功的设计师应该是这样的——他们熟悉设计和开发的知识，并且深入地知道两者的局限制约。看看iPhone吧，他非常轻便，节能，并且没有键盘。整部机器其实就是一个最大的制约，你首先需要知道这些限制是什么，才能在这个平台上获得成功。

用户体验设计师对你来说意味着什么？

现在，对于各种从事网页工作的人有如此之多的头衔，这让我感到滑稽可笑。你可能被称作界面设计师、界面工程师，视觉设计师、用户界面工程师，信息架构师或者用户体验设计师。甚至，你还会被叫做可用性工程师、可用性测试工程师、网页设计师，或者网页工程师。有着这么多的头衔，并且这么多的职业技能需要互相跨越，那么，我们怎么知道用户体验设计师和用户界面工程师的工作如何来进行划分和衔接呢？

我只能结合自己职业生涯中的成功之处来谈一谈自己的看法，那就是，尽可能地学习和自己的工作平台有关的知识。在网络上，我的工作是设计用户流程、交互方案、用户界面模型，所有的HTML/CSS/Javascript雏形，并且有时候还需要把这些原型放到后台与数据库连接。我从开始设计网页入手，学习了HTML和Javascript，然后学习了CSS、jQuery和Prototype框架，再到后来学习了PHP、MySQL和一些Ruby编程的知识。只要有机会我无处不在学习，因为，对于那些与你做出正确决策有关的知识，当然是越熟悉越好。如果你掌握的信息越多，能获得真实体验，并且很深入地了解相关知识，那么你作出的决策会更加正确，你的网站和应用程序对用户来说也更加地友好。

当你需要作出一些重要的，以用户为中心的决策的时候，你掌握的知识永远不会嫌多。掌握越多的知识，你看待问题就会越全面。

英文原文：Designers Who Are Technical: The More You Know, The Better Your Work
原文作者：Mike Rundle
中文翻译：rukey67  http://www.ued163.com/?p=358

确保网页容易被用户使用的最重要原则是“不要让我思考”。设计师应尽量做到让网页不言而喻、一目了然、自我解释。好的设计应该能让用户立即上手使用，而无需花费精力思考。

网页上每项内容都有可能迫使用户停下来思考，例如，名字。那些看似很酷、很自以为聪明、带有营销性质及生僻技术的名字常常给用户带来困扰。又例如那些看起来不太明显的链接和按钮，用户没有义务思考某个地方是否能点击。
当我们访问网络时，每个微小的疑问都有可能打断我们的访问热情，它们会累积起来，直到让人抓狂、失去耐心。

一些不该让访问者思考的事：

1. 我在什么位置？
2. 我该从哪里开始？
3. 他们把xx放在什么地方？
4. 这个页面上最重要的是什么？
5. 为什么他们给它取了这个名字？

如果要做一些崭新的开拓性的或者非常复杂的页面设计，如果无论如何也无法把页面做到不言而喻时，至少要让它能自我解释，并使用户只需花很少的时间和精力就能理解理解其用意。

另一些奇怪且有趣的用户心理：有些人会在一个折磨他们的网站坚持很久，而不愿寻找更好的；有些人会在遇到访问挫折时首先责怪自己，而不是责怪网站；人类的惰性以及重新开始新事物的不确定感往往会让用户在不佳的访问体验面前妥协（谁又能保证下一个会比这个更好呢？）。

第二章

面对精心设计排版的页面，用户做的通常只是在页面上大致瞥一眼，然后凭感觉寻找点击他们感兴趣的链接或者符合他们要求的链接。事实上用户对于页面上不关心的部分基本上不会真正看一眼。那些精心修饰的文字对用户来说更像是“以时速100公里的速度驶过的广告牌”。

关于网络使用的三个事实：

一．不是阅读，而是浏览。

人们总是花极少的时间来阅读大部分的页面，通常只是匆匆浏览一下网页，然后从中选择感兴趣的栏目或文字。

理由：

1. 用户总是忙碌的，他们没有时间阅读那些不必要的内容。
2. 用户知道自己不需要读取所有的内容，通常他们只是要寻找自己感兴趣的内容。
3. 报纸、书籍、期刊的阅读经验教会用户如何快速定位感兴趣的内容。

二．不是最佳选择，而是满意即可。

大多数情况下用户不是选择最佳的选项，而是选择第一个看上去合理的选项。这种满意策略告诉我们，一旦用户觉得某个链接似乎能跳转到他们想要去的地方，那么这个链接被点击的可能性就会大大增加，尽管它可能不是最佳的选择的。

理由：

1. 用户总是忙碌的，寻找最佳策略很难，需要的时间也很长。
2. 如果猜错了也不会有什么严重后果。
3. 对选择进行权衡并不会改善我们的机会。在设计不佳的网页上花精力去选择，还不如用猜的高效。
4. 用户喜欢享受驾驭感，跟着感觉走对用户来说更能感受到自己的价值。

用户衡量一个选择所愿花费的精力，取决于他们对于内容的预期、对于需求的迫切性以及对于网站的信心。

三．不是追根究底，而是勉强应付。

很少有人会花时间来研究如果使用一个网站，通常他们是通过不断尝试来获得访问经验、从中找出一定的理由来解释自己的行为，以及为什么会这么做。

理由：

1. 是否明白事务背后的工作机制对用户来说并不重要，他们只要求能正常使用即可。
2. 一般的使用习惯决定了，用户如果发现某个事务能满足他们的要求，就会一直使用下去，直到出现新的更好的替代方法为止，但是通常很少有人会主动寻找更好的方法。

教会用户使用网站而不是勉强应付的好处：

1. 用户能更容易地找到自己想要的东西。
2. 用户能更全面地了解到网站所提供的服务，而不仅仅是他们偶然看到的那些。
3. 网站能更好地引导用户访问其所希望展示的内容。
4. 能让用户享受到把握全局的满足感，这能极大地增强用户对自己及对网站的信心，进而留住用户的心。

第三章

设计师针对用户快速浏览页面这一特性所需注意的5个方面：

一． 建立清楚地视觉层次。

让页面瞬间明白易懂的一个好办法是确保页面上所有内容的外观清楚，而且能清楚表述页面内容之间的关系。

层次清楚的三个特点：

1. 越重要的部分越突出（醒目）。
2. 逻辑上相关的部分在视觉上也相关。
3. 逻辑上包含的部分在视觉上有嵌套。

生活习惯教会了我们对视觉层次进行快速分解，通常这种分解在一瞬间就已完成。除非当那些可视信息迫使我们需要停下来思考时，我们才能隐约地感觉到它的存在。好的视觉层次能够帮助用户对页面内容进行快速分辨，提高访问效率。

二．尽量使用习惯用法。

每一种出版媒体都有在发展自己的习惯用法，并不断改进这些用法，以形成新的习惯用法。在WEB上，当一种使用方法有足够多的人在足够多的地方看到使用它，那么它就会使成为一种习惯用法。

关于习惯用法的两个特点：

1. 该用法非常有用。
   习惯用法因为有用才会成为习惯用法，它保证了用户有一种熟悉感，适当应用习惯用法会使用户对网站的访问更容易，不需要花费额外的精力就能获得预期的访问成果。
2. 设计师通常不愿使用习惯用法。
   创新对设计师而言有很大的诱惑，如果打算使用一种新的方法替代已有的习惯用法，那么至少必须确认1.对用户来说新的方法是同样清楚简洁、不言而喻，无须花费很多额外精力来重新学习的。2.新的方法有很大的回报价值，因此值得用户花一点努力来学习。

在确信找到一个能让大多数人都接受的新想法前，尽量使用已有的习惯用法。

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

理想状况下，设计良好的网页应该能让用户立刻明白各区域的作用。
把页面划分成明确定义的区域可以让用户快速找到自己关心的内容或者放心地跳过自己不需要的部分。

四．明显标示可点击的区域。

用户确定点击哪里并不会花很长时间，但如果你迫使用户去思考某些通过下意识就可以知道的东西，那么你完全是在浪费每个用户对新站点有限耐心和好感。

五．最大限度降低视觉干扰。

让页面不易理解的最大原因就是视觉干扰，有两类干扰：

1. 眼花缭乱的设计，不分轻重的布局。
2. 糟糕的细节设计，不停打断用户的思路。

用户对复杂和干扰的容忍程度是不同的，但的确有很多人在乎这些细微处。
对付视觉干扰的一个好办法：设计页面时，可以先假定所有的设计内容都是视觉干扰，除非能够证明它们不是。

第四章

通常用户不会特别介意到达目标前所需的点击次数，只要每次点击都是毫不费力且能让用户坚信自己的选择是正确的。
一条经验准则：三次无须思考，明确无误的点击相当于一次需要思考的点击。
如果需要一直在网络上进行选择，那么让这些选择变得无须思考是让一个网站变得容易使用的主要因素。

第五章

有力的文字都很简练。句子里不应该有多余的文字，段落中不该有多与的句子。同样，画上不该有多余的线条，机器上不应该有多余的零件。
去掉每个页面上一般的文字，然后把剩下的文字再去掉一半。

去掉没人看的文字会有几个好处：

1. 可以降低页面干扰。
2. 让有用的内容更突出。
3. 让页面更简短，让用户在页面上一眼就能看到更多的内容，减少不必要的屏幕滚动。

两种必须消灭的文字：

1. 消灭欢迎词。
   欢迎词只是一种社交套路，并无多少实际意义，大多数WEB用户喜欢直截了当，所以要尽量减少欢迎词，能减多少就减多少。
2. 消灭冗长的解释文字。
   应该通过让每项内容不言而喻来尽量消除解释文字，当文字变得完全没有必要时则应把它们全部去掉。

第六章

一个事实：如果在网站上找不到方向，人们就不会访问你的网站。

用户浏览过程：

1. 通常是为了寻找某个目标。
2. 决定先搜索还是先浏览。取决于用户的打算、迫切程度、以及网站是否有良好的导航机制。
3. 如选择先浏览，将通过标志的引导在层次结构中穿行。
4. 满意地离开或失望地离开。

Web空间的奇怪之处：

1. 感觉不到大小。
   你很难知道是否已经看到这个网站上所有感兴趣的内容，因此也很难知道什么时候应该停止寻找。
2. 感觉不到方向。
   没有层次结构方面的上一级和下一级，即更一般的层次或更具体的层次。
3. 感觉不到位置。
   Web导航通过具体化网站的层次结构补偿了这种缺失的空间感，营造出某种位置的感觉。

被忽视了的导航用途：

1. 给用户一些固定的感觉。
   迷失的感觉并不好，做得好的导航会让用户觉得脚踏实地。
2. 告知当前位置。
   通过让层次结构可视化，导航可以告诉用户网站上有什么。导航表现了内容且表现站点比引导位置更重要。
3. 告诉用户如何使用网站。
   含蓄地告诉用户该从哪里开始，能进行哪些选择。
4. 给了用户对网站的信心。
   清楚、规划得当的导航是网站给人留下好印象的大好机会。

Web导航的基本元素：logo、栏目、子栏目、当前位置、辅助工具。

导航部分在每一页以一致的外观出现在同样的位置，会让用户提升用户的访问信心，给用户确定感可以提升用户对网站的认同。让全局导航始终保持一致意味着用户对它只需了解一次。全局导航应该包括5个元素：logo、返回首页、搜索链接、辅助工具、主栏目。

网站logo一般在网页左上角，因为logo代表了整个网站，也就是说它在整个站点结构中层次最高。要让网站logo出现在页面可视层次的首要位置，可采取两种方式：让它成为页面最显眼的内容或者让它涵盖页面所有其他的元素。

栏目导航条是访问站点主要栏目的途径，即站点层次结构的最顶层。
大部分情况下，全局导航也留有二级导航的显示位置。

辅助工具是到达网站中不属于内容层次的重要元素的链接。
辅助工具能帮助用户使用站点（如帮助、网站地图或购物车等），要么提供网站发布者的信息（如关于我们、联系我们等）。
全局导航中最多只能放使用率最高的4-5个辅助工具。

全局导航中最重要的元素之一是让用户返回首页的链接。
一般网站也会让logo链接到首页。

喜欢搜索的用户并不少于习惯浏览的用户。
一个简单公式：搜索栏=一个输入框、一个按钮、还有“搜索”两字。

搜索栏必须避免：

1. 花哨的用词。
2. 指示说明。
3. 选项。
   如果必须提供选项，那就要保证哪些选项确实有用。

页面名称就是web上的路牌。

需注意的要点：

1. 页面名称在视觉层次上要出现在合适的位置。
2. 名称样式要引人注目，在大多数情况下，它是该页里最大的文字。
3. 名称和链接的内容要一致。
   有时受页面空间的限制，如果点击的文字与链接的页面名称并不完全相同，则需保证尽量匹配和让不匹配的原因显而易见。

要抵消网络空间固有的迷失感，其中一种方式就是时刻告诉用户当前所处的位置。
常用的标记位置的方法：

1. 在旁边放一个小图标。
2. 改变文字颜色。
3. 使用粗体。
4. 按钮反白。
5. 改变按钮的颜色。

位置指示器必须要醒目突出，否则就失去了意义。

层级菜单的几项实践：

1. 把它们放在最顶端。
2. 用“>”符号对层级进行分隔。
3. 使用小字体。
4. 使用文字提示“你在这里”
5. 将最后一个元素加粗。
6. 别让它们显得像页面的名称。

标签是大型网站的上佳选择，理由：

1. 它们不言而喻。
2. 很难被忽视。
3. 很灵活。
4. 暗示了一个物理空间。

标签会给人一个视觉提示：让人觉得网站被分成了不同的栏目，条理清晰，而自己正置身于其中的一个栏目，增加确定感。

amazon经典的标签设计三要点：

1. 正确绘制。
   标签的图形必须营造出“激活的标签页位于其他标签页之前”的效果。
   营造出这种效果，比货也必须有一种不同的颜色或外形作为对比，并且必须与它下面的空间在物理上链接起来。
2. 颜色编码。
   Amazon使用相当鲜艳和饱满的的颜色来吸引用户的注意力。未激活的标签和当前的标签之间对比强烈，即使色盲的用户也能正确理解。
3. 进入网站时，有个选中的初始标签。

后备箱测试

完成设计后对网页的导航进行测试的方法。

初始问答：

1. 这是什么网站？(logo)
2. 我在哪个网页上？（网页名称）
3. 这个网站主要有哪些栏目？（栏目清单）
4. 在这个层次上我有哪些选择？（本页导航）
5. 我在导航系统得什么位置？（位置指示器）
6. 怎么搜索？

测试标准只能依据页面的整体外观来判断，而不是细节。

第七章

主页要完成的使命：

标识站点、表明站点层次、搜索、导读、最近更新、友情链接、快捷方式、注册。

另外一些抽象使命：

• 让用户看到自己正在寻找的东西—主页应该能让用户想到的任何东西显而易见，如果它存在的话。
• 为用户提供他们还没发现的潜在兴趣点。
• 告诉用户从哪里开始，给用户方向感。
• 建立可信度和信任感。

首页常见的约束有：

• 每个人或内容都想占一席之地。
• 想参与的人或内容太多。
• 一个尺寸要适合所有人。

网页设计中不能忘掉却常常被忘掉的事—传达网站整体形象。

用户第一次访问一个网站应能回答的4个问题：

• 这是什么网站？
• 网站上有什么？
• 我能在这里做什么？
• 为什么我应该在这里而不是别的地方。

主页上的每样东西都有助于帮助用户理解网站，有两样东西尤其关键：
口号、欢迎广告。
作用：
不在于是否每个用户都会注意到他们，而在于网站用户多半是从主页的大体内容来猜测网站类型的，如果他们猜不到就要有个地方能让他们找到。

几条传达信息的指导原则：

1. 需要多大空间就用多大空间。
2. 但也不要使用过多的空间。
3. 不要把使命陈述当作欢迎广告。
4. 是否恰当的标准是进行测试。

口号是依据精炼的短句，它刻画了整个网站、总结它是什么、自身的优势是什么。
口号一般出现在站点Logo周围的某个地方。
口号是非常有效的信息传达方式，因为它是用户希望能找到的关于网站目标具体描述的地方。

选择口号时要注意的地方：

• 好的口号要清楚、言之有物。
• 不好的口号含混不清。
• 好的口号长度适中—6~8个单词足矣（针对英文而言）。
• 好的口号能表述出网站的特点和显而易见的好处。
• 不好的口号听起来太笼统。
• 好的口号应该有个性、生动、有时候还很俏皮。

知道网站类型后，主页要回答的另一个重要问题是：从哪里开始？

当进入一个新的网站，快速浏览主页后，用户应该能明白无误地知道：

• 要搜索该从哪里开始。
• 如果想浏览该从哪里开始。
• 如果只想访问网站最精华的部分该从哪里开始。

避免认知混乱的方法：让每个起点看上去像起点并给它们加上清楚地文字描述。

由于主页导航的独特职责，通常不必与全局导航完全一致。
常见差别有：栏目描述、不同的方向、用于识别的空间更多。
主页导航与全局导航需要保持一定程度的一致性，才能保证用户能马上明白这只是同一导航的两个版本。
最重要的是，让栏目的名称保持不变：同样的顺序，同样的文字和同样的分组。尽可能多地保持相同的视觉提示也很有用，如同样的字体、颜色和大小写。

下拉框存在的问题：

• 必须点击才能看到下拉列表。
• 它们难以快速浏览。
• 他们不好控制，显示和收缩很快，会影响查看效果。
• 下拉框对于按字母排列的项目比较适用，如国家、省份、或产品名称，因为在这样的浏览不用思考。

主页上增加更多项目所得到的和付出的并不一致。得到推介的栏目获得了巨大的访问量，而由于主页变得混乱而造成的有效性总体损失则要由所有栏目一同承担，这就是共有区域的悲剧，前提很简单：任何共享资源（共有区域）都会因过度使用而遭破坏。

第八章

人的天性有一种把自己的喜好投射到全部web用户身上的倾向，认为绝大多数用户喜欢自己所喜欢的，我们通常认为大部分web用户和我们一样。

由于职位的不同，web团队的成员对于好的网站设计如何组成有着非常不同的看法。

“大部分web用户和我们一样”这样信仰背后还有另一个隐藏得更深的信仰：相信大部分web用户是弹性的，可以随意变化。

不要问这样的问题“大部分人喜欢下拉框吗？”正确的问题应该是“在这个页面，这样的上下文中，这个下拉框及这些下拉项目和措词会让可能适用这个网站的大部份人产生一种良好的体验吗？”回答这个问题的方法只有一个“测试”。
争辩人们喜欢什么既浪费时间又消耗团队精力，而通过测试将讨论对错转移到什么有效、什么无效上更容易缓和争论，打破僵局。而且，测试会让我们看到用户的动机、理解、反应的不同，从而让我们不会再坚持“用户的想法和我们的想法一样”。

第九章

焦点小组与可用性测试的区别：

焦点小组是一小组人（通常5~8人）围坐在桌子旁边，对展示给他们的想法和设计做出反应。这是一个小组过程，主要价值来自参与人员彼此的反应。焦点小组是快速得到用户意见和感觉的一种不错的方法。

可用性测试是一次一个用户展示一些内容（不管是网站、网站原型、或是一些单个页面的草图），并且要求用户说出：1.这是什么？2.试着用它来完成一些典型的任务。

焦点小组在抽象地确定你的目标受众想要什么，需要什么，喜欢什么的时候会很有用。它们也可以测试出网站的理念是否有意义，价值主张是否吸引人。同时，它们在测试你的网站功能命名，发现用户对你的竞争对手看法等方面也是很好的办法，但这种方法并不适合用来了解你的网站运行情况，以及怎样改进网站。

你能从焦点小组了解到的是你在设计网站之前就应该了解得。焦点小组是用在这个过程早期阶段的方法。

可用性测试的几个事实：

• 如果想建立一个优秀的网站，一定要测试。
• 测试一个用户比不做测试好一倍。
• 在项目中，早点测试仪为用户好过最后测试50位用户。
• 人们对招募用户代表的重要性估计过高。
• 测试的关键不是要证明什么或者反驳什么，而是了解你的判断力。
• 测试是一个迭代的过程。
• 没有什么比现场用户的反应更重要。

5个不进行可用性测试的错误辩解：

1. 我们没有时间
2. 我们没有钱
3. 我们没有专业知识
4. 我们没有可用性实验室
5. 我们不知道怎样解释这些结果。

可用性测试对参与的对象不敏感。
招募测试对象可以利用你能够寻找到的普通任何人，然后曲线上升。

测试用户和目标群体之间可以存在差别，理由如下：

• 实际上，我们都是初学者。
• 设计出的网站只有你的目标群里会使用，这通常不是个好主意。
• 专家通常不会介意对初学者来说很直观的界面。

一些例外：

• 如果你的网站几乎只由某一类用户使用，而且招募这一类测试用户并不困难。
• 如果你的目标用户群体可以分成几个明显的阵营，而且这些阵营有着完全不同的兴趣和需要。
• 如果使用你的网站需要专门领域的知识。

招募测试对象应注意的几个问题：

• 提供合理的激励。
• 邀请要简单。
• 避免对网站（或网站背后的组织结构）进行预先讨论。
• 别不好意思请朋友和邻居帮忙。

可用性测试分两种：“理解”测试和关键任务的测试。

• “理解”测试就是让用户看到网站，然后看他们能否理解这个网站，理解网站的目标，价值主张，组织方法，运行方式等。
• 关键任务测试就是让用户完成一些任务，然后观察他们是怎么做的。

建立网站时，越早把设计思想展示给用户约好，设计师通常不愿意展示尚未完成的作品，但用户更愿意评论一些看起来还没有完成的东西，因为他们知道你还没有投入太多，还有机会进行修改，而且，由于这还不是一个精雕细琢的设计，用户不会被实现细节所吸引，从而可以把注意力集中在要点和措辞上。

总结测试结果要做的两件事：给问题分类，解决问题。
从其他人的角度看你的作品，这样的体验常常能为问题提供全新的解决方案，或者让你用一种崭新的眼光看待原有问题。

测试过程中最有可能碰到的问题：

• 用户不清楚概念
• 他们找不到自己要找的字眼
• 内容太多

问题内类指南：

忽略皮划艇问题：
可能会遇到这种情况：用户暂时出现错误，然后再不需要任何帮助的情况下回到原来的轨道，只要，1.出现问题的人马上发现自己偏离了原来的主体。2.他们尽量回到原来的方向而不需要帮助。3.这种情况看起来并没有扰乱他们的活动，你就可以忽略这些。总的来说，如果用户关于在哪里找到他们需要的内容的第二次猜测总是对的，那就不是什么问题。

抵制添加的冲动：
当在测试时清楚地看到人们没有理解某些内容时，大部分人的第一反应是增加一些内容，如注释或一些指导说明。然而正确的解决方案往往是去掉某个或某些让人混淆的内容，而不是增加另一些干扰。
不要太看重人们对新功能的要求。

抓住够得着的果子：
每轮测试中，你的主要目标是寻找重要而不费力的收获，一般有两个类别：恍然大悟型和便宜型。

注意整体性：当你把某些部分调整得更为突出时，想想看是不是把其他内容的重要性降低了。

第十章

Web 可用性除了不要让用户思考，还有另外一个重要的组成部分：做正确的事，为用户考虑周到。除了“我的网站清除吗？”之外，还要问“我的网站值得尊敬吗？”

降低好感的几种方式：

• 隐藏我想要的信息
• 因为没有按照你们的方式行事而惩罚我
• 向我询问不必要的信息
• 敷衍我、欺骗我
• 给我设置障碍
• 你的网站看上去不专业

提高好感的几种方式：

• 知道人们在你网站上想做什么，并让它们明白简易
• 告诉我我想知道的
• 尽量减少步骤
• 花点心思
• 知道我可能会有哪些疑问，并且给予解答
• 为我提供协助，例如打印友好页面
• 容易从错误中恢复
• 如果不确定，记得道歉

第十一章，第十二章
略