可寻找性包括找到内容的轻易性和导航的有效性。对可寻找性的衡量有两方面：从个体的层面来说，可以分析用户发现或找到某具体信息的难易程度；从系统的层面来说，可以分析实体或电子环境（如网站）对于导航和信息检索的支持程度。

Peter Morville认为，对可寻找性的追求应优先于对可用性的追求。“如果找都找不到，怎么用呢？”的确，如果寻找好宝贝是件让用户极度疲乏的事情，而且几乎过劳死地拍下之后只买到个烂东西，那么ta只会逃跑，不会淘宝了吧？而改善导航并不仅仅是从全局上来说。尤其对于淘宝这种大型网站，任何一个小产品、小功能都会涉及到导航，而从最近几次用户测试看来，在细节上我们还是有不少改善空间哦。

——————————————————————————————————

Peter Morville是著名的三张大饼（内容、情境、用户）的提出者，这是基于信息架构的

研究方向从信息架构转为可寻找性的他，又提出了关于用户体验的新模型：蜂巢模型（UE honeycomb）

在这个模型中，共有7个层面，分别是：

• 有用的. 作为用户体验设计者，不应被管理层的商业目标所绑死，应有勇气去问：这个产品用户真的对用户有用吗？是否有更优的解决方案？
• 可用的. 可用并易用仍然非常关键，但仅有可用性是远远不足够的。
• 欲求性. 除了为用户提供效率，设计还应考虑用户对于形象、身份、品牌等情感上的欲求。关于情感设计、心流理论，之前宗曦有谈到过。
• 可找到的. 提高导航质量，力求让用户找到他们想要的东西
• 可访问的. 努力降低门槛，照顾残疾人、不同文化背景的人.不过老实说，大多数网站连正常人都还没照顾好呢……
• 可信赖的. 很多元素都能影响用户对于我们所提供的内容的信赖程度.可参见斯坦福大学网络信赖度研究小组提供的10条建议
• 有价值的. 网站应为用户传达价值，并不断提高客户满意度

原文出处：http://www.blueidea.com/de...

图3-27 红色

3.4.1.1 红色的具象联想
火焰、鲜血、性、西红柿、西瓜瓤、太阳、红旗、口红、中国国旗。

3.4.1.2 红色的正面联想
激情、爱情、鲜血、能量、热心、激动、热量、力量、热情、活力。

3.4.1.3 红色的负面联想
侵略性、愤怒、战争、革命、残忍、不道德、危险、幼稚、卑俗。

3.4.1.4 红色的文化域

3.4.1.5 实例说明

如图3-28所示，为中企动力8周年主题网站（http://ex.ce.net.cn/8tm/in...）网页截图，整个页面使用红色作为主色调，给人以喜庆、热闹的感受。

图3-28 中企动力8周年主题网站网页截图

3.4.1.6 红色系配色方案

红色系的配色方案如下，如图3-29所示：

在红色中加入少量的黄，会使其热力强盛，趋于躁动、不安。 在红色中加入少量的蓝，会使其热性减弱，趋于文雅、柔和。 在红色中加入少量的黑，会使其性格变的沉稳，趋于厚重、朴实。 在红中加入少量的白，会使其性格变的温柔，趋于含蓄、羞涩、娇嫩。

图3-29 红色系配色方案

3.4.2 橙色

橙色能促进食欲；橙色的房间代表了友善，带给人愉快，能促使人谈话和思考；橙色能够用来强化视觉，这就是为什么海滩救生员的救生服采用橙色的原因，如图3-30所示。

图3-30 橙色

3.4.2.1 橙色的具象联想
秋天、桔子、胡萝卜、肉汁、砖头、灯光。

3.4.2.2 橙色的正面联想
温暖、欢喜、创造力、鼓舞、独特性、能量、活跃、模拟、社交、健康、奇想、活力、华美、明朗、甘美。

3.4.2.3 橙色的负面联想
粗鲁、时髦、喧嚣、嫉妒、焦躁、可怜、卑俗。

3.4.2.4 橙色的文化域

• 在爱尔兰，橙色代表新教运动。
• 在美洲土著文化里，橙色代表学习和血缘关系。
• 在荷兰，橙色是国家的颜色，因为荷兰的君主来自于Orange-Nassau家族。
• 在印度，橙色代表印度教。

3.4.2.5 实例说明

如图3-31所示，为韩国芬达网站（http://www.fanta.co.kr/）网页截图，整个页面使用橙色作为主色调，和其主打产品－橙味汽水紧密结合。

图3-31 韩国芬达网站网页截图

3.4.2.6 橙色系配色方案

橙色系的配色方案如下，如图3-32所示。

1. 在橙色中混入大量的白，有一种干燥的气氛。
2. 在橙色中混入少量的蓝，能够形成强烈的对比，有一种紧张的气氛。
3. 在橙色中混入少量的红，给人以明亮、温暖的感受。

图3-32 橙色系配色方案

3.4.3 黄色

是人眼睛最容易注意到的色彩；比纯白色的亮度还要高；可以促进新陈代谢；明亮的黄色是所有色彩中最容易让人产生疲劳感的颜色，它很刺激人的眼睛；暗淡的黄色可以加强人们的注意力，所以多应用于提示牌，如图3-33所示。

图3-33 黄色

3.4.3.1 黄色的具象联想
阳光、沙滩、蛋黄、香蕉、向日葵、小鸡、面包、菜花。

3.4.3.2 黄色的正面联想
聪明、才智、乐观、光辉、喜悦、平凡、泼辣、明快、希望、光明、明媚、理想主义。

3.4.3.3 黄色的负面联想
嫉妒、怯懦、欺骗、警告。

3.4.3.4 黄色的文化域

• 在佛教里，法师穿着金黄色的袈裟。
• 在埃及和缅甸，黄色意味着丧服。
• 在日本，黄色联系到人的勇气。
• 在印度，黄色是商人和农民的标志。
• 在印度教文化中，穿着黄色用来庆祝春节。
• 在古代中国，黄色是帝王专属的颜色。

3.4.3.5 实例说明

如图3-34所示，为韩国立顿红茶网站（http://www.lipton.co.kr/）网页截图，整个页面使用黄色作为主色调，给人以明快、温暖的感受。

图3-34 韩国立顿红茶网站网页截图

3.4.3.6 黄色系配色方案

黄色系的配色方案如下，如图3-35所示。

1. 在黄色中加入少量的蓝，会使其转化为一种鲜嫩的绿色。其高傲的性格也随之消失，趋于一种平和、潮润的感觉。
2. 在黄色中加入少量的红，则具有明显的橙色感觉，其性格也会从冷漠、高傲转化为一种有分寸感的热情、温暖。
3. 在黄色中加入少量的黑，其色感和色性变化最大，成为一种具有明显橄榄绿的复色印象。其色性也变的成熟、随和。
4. 在黄色中加入少量的白，其色感变的柔和，其性格中的冷漠、高傲被淡化，趋于含蓄，易于接近。

图3-35 黄色系配色方案

3.4.4 绿色

是所有色彩中最能让人的眼睛放松的色彩；绿色对人的精神有镇静和恢复的功效，通常在医院中让病人放松；通常绿色的意义是“通行”，还有秩序的意义；绿色可以促进消化，还可以减轻胃痛，如图3-36所示。

图3-36 绿色

3.4.4.1 绿色的具象联想
植物、大自然、环境、西瓜、树叶、山、草。

3.4.4.2 绿色的正面联想
和平、安全、生长、新鲜、丰产、金钱、种植、康复、成功、自然、和谐、诚实、青春。

3.4.4.3 绿色的负面联想
贪婪、嫉妒、恶心、毒药、侵蚀、缺乏经验的。

3.4.4.4 绿色的文化域

• 在伊斯兰国家，绿色是天堂的颜色，同是也是伊斯兰教的代表色。
• 在爱尔兰，绿色就是其国家的象征。
• 在凯尔特文化中，绿色的巨人是丰收之神。
• 在美洲土著文化中，绿色联系到人们的愿望和意志。

3.4.4.5 实例说明

如图3-37所示，为韩国真露烧酒网站（http://www.chamisulfresh.c...）网页截图，整个页面使用绿色作为主色调，符合真露烧酒以植物为原材料提取的产品理念。

图3-37 韩国真露烧酒网站网页截图

3.4.4.6 绿色系配色方案

绿色系的配色方案如下，如图3-38所示。

1. 在绿色中黄的成份较多时，其性格就趋于活泼、友善，具有幼稚性。
2. 在绿色中加入少量的黑，其性格就趋于庄重、老练、成熟。
3. 在绿色中加入少量的白，其性格就趋于洁净、清爽、鲜嫩。

图3-38 绿色系配色方案

栅格系统的形成
1692年，新登基的法国国王路易十四感到法国的印刷水平强差人意，因此命令成立一个管理印刷的皇家特别委员会。他们的首要任务是设计出科学的、合理的， 重视功能性的新字体。委员会由数学家尼古拉斯加宗（Nicolas Jaugeon）担任领导，他们以罗马体为基础，采用方格为设计依据，每个字体方格分为64个基本方各单位，每个方各单位再分成36个小格，这样，一个印 刷版面就有 2304个小格组成，在这个严谨的几何网格网络中设计字体的形状，版面的编排，试验传达功能的效能，这是是世界上最早对字体和版面进行科学实验的活动，也 是栅格系统最早的雏形。

栅格系统英文为“grid systems”，也有人翻译为“网格系统”，其实是一回事。不过从定义上说，栅格更为准确些，从维基百科查到栅格的定义为：栅格设计系统（又称网格设计系统、标准尺寸系统、程序版面设计、瑞士平面设计风格、国际主义平面设计风格），是一种平面设计的方法与风格。运用固定的格子设计版面布局，其风格工整简洁，在二战后大受欢迎，已成为今日出版物设计的主流风格之一。

网页设计中的栅格系统
我给网页栅格系统下的定义为：以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。
网页栅格系统是从平面栅格系统中发展而来。对于网页设计来说，栅格系统的使用，不仅可以让网页的信息呈现更加美观易读，更具可用性。而且，对于前端开发来说，网页将更加的灵活与规范。

栅格系统在现在的网页设计中应用越来越多，从网络上搜罗了一篇关于栅格系统应用的文章：30个最顶尖的基于栅格系统的博客网站设计。

栅格系统的设计原理及应用
那么如何设计一个栅格系统？接下来我们将通过实例，详细的介绍一下网页栅格系统的原理与应用：

在网页设计中，我们把宽度为“W”的页面分割成n个网格单元“a”，每个单元与单元之间的间隙设为“i”,此时我们把“a+i”定义“A”。他们之间的关系如下：
W =（a×n）+（n-1）i
由于a+i=A，
可得：(A×n) - i = W
这个公式表述了网页的布局与网页“背后”的栅格系统之间的某种关系。我们拿yahoo作例，来看一下栅格系统的应用：

yahoo的网站页面宽度为W=950px，每个区块与区块的间隔为i=10px；如果应用上面的公式，可以推出A=40px，既yahoo首页横向版式设计采用的栅格系统为：
（40×n）- 10 = W
下面我们列出当n等于不同数值时W变化的数值表格 ：

从表格可以看出：yahoo首页的布局完全是按照栅格系统进行设计的，每个区块的宽度对应的n值分别为：4，11，9。在这里我们看到一个很有意思 的事情：只要保证一个横向维度的各个区块的n值相加等于24，则即可保证页面的宽度一定是950px。然而，950px的宽度也恰好就是当n=24的时 候，W的宽度值。由此我们得出以下的应用模式：

在栅格系统中，设计师根据需要制定不同的版式或者划分区块，他们的依据将是上面的那张对应表进行设计。这样，一个栅格系统的应用就从此开始了。我们 看到，使用栅格系统的网页设计，非常的有条理性；看上去也很舒服。最重要的是，它给整个网站的页面结构定义了一个标准。对于视觉设计师来说，他们不用再为 设计一个网站每个页面都要想一个宽度或高度而烦恼了。对于前端开发工程师来说，页面的布局设计将完全是规范的和可重用的，这将大大节约了开发成本。对于内 容编辑或广告销售来说，所有的广告都是规则的，通用的，他们再也不用做出一套N张不同尺寸的广告图了……

当然只要你愿意，我们可以衍生出任何一种栅格系统，只要改变A和i的值，这个根据网站的实际情况来制定。那么如何选择合适栅格系统，主要通过“构成 要素与程序、限制与选择、构成要素的比例、组合、虚空间与组合、四边联系与轴的联系、三的法则、圆与构成、水平构成这些设计元素规划，来实现比例和谐的平 面设计”。比较深奥，我们在这里就不详细阐述了。

呵呵，说了一堆栅格系统的优点。大家可能会问：难道栅格系统真的是完美的么？答案是否定的：对于内容信息不确定导致高度不确定的页面，在高度层面上就无法做到栅格了。当然，具体的情况还需具体的分析与解决，这就需要设计师们在实际的应用中不断的总结经验，不断实践了。