表现层——感知设计

在表现层我们要解决和弥补“框架层的逻辑排布”的感知呈现问题。

合理设计感知

用户每次与产品的亲密接触，并且对产品留下的印象都由感官器官来决定，即视觉、听觉、触觉、嗅觉、味觉。哪些感受被纳入设计是由我们的产品类型来决定。而对于互联网产品来说，视觉无非是最重要的一环，因为所有的产品都会设计视觉设计。

有人可能认为视觉设计师很简答的事，无非就是设计酷酷的界面，给人造成视觉上酷酷的感觉。先不说每个人对于美感有不同的见解，你要满足大部分用户有多难的情况。即使你设计的用户界面得到了大众的审美认可，你还得考虑你的变现层是否与你的战略层，结构层所匹配？产品的外观没有破坏结构，有没有使结构中的各个模块之间的区别变得不清晰、模棱两可?或者外观优有没有强化结构，使用户可用的选项清楚明了？在传达品牌形象的时候，如果你的产品品牌形象是技术性和权威性，那么使用漫画字体和亮粉色就显得那么格格不入。因此视觉设计并不仅仅是一个美学的问题，还应该是战略定位的问题。

忠于眼睛

评价一个产品视觉设计的简单方法就是：你的视线首先落在什么地方？哪个设计要素在第一时间吸引了用户的注意力？它们是对于战略目标来讲是很重要的东西吗？或者用户第一时间注意到的东西与他们的目标是背道而驰的吗？如果这些问题考虑清楚，那么你的感知设计无疑成功了一大半。

设计成功的产品，用户的眼睛移动轨迹模式应该有两个重要特点：
1.首先，遵循的是一条流畅的路径。
产品所作的感知设计应该顺利引导用户视线在页面上移动，而不是毫无规律杂乱的在各种各样的元素之间跳来跳去。突出重点引导的元素，而不是每个元素都去试图引导用户注意。
2.其次，在不需要太多细节来吓到用户的前提下，为用户提供有效选择的、某种可能的“引导”。这些引导应该支持用户试图在此刻通过与产品交互去完成的某个目标和任务，而且所做的引导不应该分散用户对那些能完成目标的信息或功能的注意力。

对比和一致性

在视觉设计中，吸引用户注意的一个主要工具就是对比，如果产品界面风格全是统一，没有对比，就显得用户无所事事，用户视线四处游荡，而无法解决任何特别的事情，把用户的注意力吸引到界面中的关键部分，对比是一个重要的手段，它能够帮助用户理解页面导航元素之间的关系，同时对比还是传达信息设计中的概念群组的主要手段。而对比工作的总体策略是让差异必须足够清晰，用户要足够分辨出某个设计选择是特意要传达一些信息的，我们希望抓住用户的目光，让他们认为这是我们有意而为之的。在设计中保持一致性可以使设计有效的传达信息，而不会导致用户迷惑或焦虑。将是视觉元素的大小保持一致的尺寸，这可以使你在需要的时候把它们更容易重新地组合成一个新的设计。基于栅格线的布局是来自平面设计的一种技术，是一种对网页也同样有效的技术，这个方法通过使用母版来确保设计的一致性，各种布局都是根据这个模板来设计的，需要注意的是不是每个布局都要使用栅格的每一个部分但是每一个元素在网格上的位置应该统一和一致。

内部和外部的一致性

解决内部一致性问题比较好的办法就是建立在对产品框架的深刻认识上，关键在于确定有可能在产品各种各样的界面、导航和信息设计等不同环境中反复出现的设计元素，在进行设计之前，从这些不同元素之间将这些设计元素独立出来，通过这个方法，我们就可以更清楚地看到困扰我们的问题，而不至于被环境所照成的大规模问题分散了注意力，与其一次又一次地设计同样的元素，还不如这样统一设计一次，然后将这个方案应用到整个产品中去。但是还需检查在不同环境中的呈现，如一个红色较大的停止按钮在结账页面上的表现不错，但是放到一个拥挤的产品起始页就显得突兀了，好的办法是设计出一个独立的元素，试着在不同的环境中应用它们，然后在需要的时候进行调整。往往产品经理会忽略一致性的重要性，如果你的产品一致性不怎么好，不统一的视觉会破坏你的企业形象，给访问者留下一个"公司还未清楚搞懂自己的定位"的坏印象。

配色方案和排版

色彩可能是向外界传递品牌识别的一个最有效的方法，品牌和色彩往往具有密切的关系，人人提到可口可乐立马会想起它的红色， 知乎的颜色也整体是一种淡蓝色，代表冷静的理性，这与一款问答型的产品定位非常匹配。一套配色方案应该能整合其中的色彩，以便于能将他们应用到一个广泛的范围中去，在大多数情况下，更亮或者更醒目的颜色适用于设计你的前景色——希望得到更多注意的元素中，更暗淡的色彩用于哪些不需要跳出页面的背景元素中。有效的使用字体排版的原则与其他视觉设计的原则完全一样：不要使用非常相似但又不完全一样的风格，只有在你需要传达不同的信息时才使用不同的风格，风格之间要有足够的对比才能在你需要的时候吸引用户的注意，但是不要使用过于广泛和多样的风格。

设计合成品和风格指南

视觉设计不一定要精确地按照线框图来做——只要它考虑到了相关的重要级别以及框图中各元素的组合关系。线框图没有说明视觉设计的关注点，而是侧重于记录框架层，在我们处理设计合成品之前建立起线框图，使我们首先能独立地了解到框架层的问题，然后再关心表现层的问题，尽管如此，线框图的核心概念，应该显著地呈现在设计合成品中，即使它们没有精确地按照在线框图中出现的样子来进行组合。承载设计决策的权威性文档是风格指南，虽然做这些文档要花大量工作，但是确实及其必要的，随着时间推移，我们以前的决策原因可能会被忘记，而且总会有离职的员工，那么保留每一次更改，将会对后续工作人员一些参考。风格指南汇总了视觉设计的各个方面，从最达到最小的范围内的所有元素，影响到产品的每个局部的全局标准。风格指南的总体目标是帮助人们做出明智的决策，有助于帮助产品实施设计的一致性。让你的产品看起来是一个协调一致的整体，而不是一堆乱七八糟的碎片。