第43件事 视觉设计的6个基本功

要提升视觉设计的审美能力，色彩搭配方面建议读《写给大家看的色彩书》，提高一下色彩搭配的敏感度。当然了，也打算讲讲视觉设计方面的基础知识。主次、对比、相似性、分层、配色和排版是视觉设计的基本功。

1.主次
页面需要完成的非常重要的功能或内容要放在页面显著的位置。越重要的内容，放的位置就越要明显；比较重要的功能或内容，就放在比较显著的位置；不重要的功能或内容，就放在不显著的地方。这就是页面的主次关系。不要主次颠倒，不重要的功能或内容强行抢占重要的功能或内容的位置，这样会直接影响用户的正常使用。
产品页面如何布局，如何展示会直接影响用户使用产品的便捷性。有主有次的布局总会让用户在短时间内发现自己需要的核心功能或内容；主次颠倒的布局总会导致用户费劲寻找，甚至找了很久都没有找到自己想要的，然后就离开了。这样的设计用户流失的可能性非常大。
用户在使用产品时，通常都是扫描型浏览，即迅速捕捉对自己有用的信息，不会花费太多的时间停留在页面上，如果花的时间太长，还没有捕捉到有用的信息，用户会很失望，从而选择离开页面。因此，页面布局的重点是体现产品的核心功能和内容，核心功能或内容显示在关键的位置，以便用户在最短的时间内找到自己想要的有用信息，完成任务。
保罗·费茨在1954年发布的费茨定律申告诉我们：指点设备的当前位置和目标位置相距越远，我们就需要越多的时间来移动。同时，目标的大小又会限制我们移动的速度，因为如果移动得太快，到达目标时就会停不住，因此，我们不得不根据目标的大小提前减速，这同时又会减缓到达目标的速度，从而延长到达目标的时间。目标越小，就需要越早减速，从而花费的时间就越多。这也从另外一个方面诠释了主次的重要性。

2.对比
生活中常说，红花需要绿叶的陪衬，这样才更能凸显红花的漂亮，这就是对比关系。重要的功能或内容通过不重要的功能或内容的陪衬，会显得更加重要。界面中的元素要形成对双满足了两种需要：首先，将界面中主动的、可操作的界面元素与被动的、不可操作的界面元素进行对比；其次，对主动元素的不同逻辑集合进行对比，以更好地表达它们的不同功能。应避免无目的或者盲目机械地使用对比，因为用户对几乎相同的结果会感到迷惑不解。正确使用对比会产生用户能够记住和识别的视觉模式，使用户更快找到方向。对比也是一种突出界面视觉层次关系中元素地位的手段。换句话说，对比是功能和行为的表达工具。总地来说，通过对比，会使明显的变得更加明显，不明显的变得更加不明显。

3.相似性
相似性指的相近、相关联的功能或内容要放在一起，使用的样式也要相似。以在36kr分享文章为例，发送长微博、分享到微信和分享到QQ都属于分享功能，功能相似所以放在一起，这样便于用户选择操作。
视觉设计相似性原则也适用于房子装修。在现实生活中，我们也经常看到有的房子窗户装修得五颜六色、眼花缭乱的，相同的元素使用的颜色都不一样。而有的窗户只有黑白两色，而且相同的元素使用的颜色都是一样的，看起来却比较舒服。这个案例告诉我们：不要掉入每个元素都应该使用不同颜色的陷阱里去，要适当使用相似性。

4.分层
根据每个元素的视觉提示或主动元素所在的背景进行分层也是组织界面的一种方式。颜色视觉属性和大小视觉属性控制了对分层的理解。例如，深色、冷色调、不饱和色视觉层次下降；相反，亮色、暖色、饱和色视觉层次上升。大的元素层次高，而小的元素层次低。位置上相互重叠的元素也许是视觉分层最直接的例子。为了对元素进行有效分层，必须使用最少量的对比来维持屏幕同层内各条目间的紧密相似性。确定好分组以及如何在视觉上最好地传达分组信息后，再根据背景的重要性，调节组与组之间的对比来决定显示时的重要性。层间的差异要最大化，而同层各条目间的差异要最小化。

5.配色
颜色搭配是页面视觉语言不可缺少的一部分，不同的配色给用户传达的信息是不一样的，合理的颜色搭配能够吸更引用户的注意力。在生活中，我们经常使用相同的颜色来表达相同性质的事物。在商务社交礼仪中，穿正装出席正式的社交场合时，着装最好不要超过三种颜色。同理，产品的页面色彩要与Logo统一、相呼应，主色调和辅助色加起来不要超过三种颜色。有的产品主色调直接取自Logo主色调，以恰当的色彩明度和亮度确保用户的浏览舒适度。
比如，现实生活中的穿衣事件，A的打扮是：红色的衣服+红色的裤子+红色的领带+白色的衬衫。B的打扮是：灰色的衣服+灰色的裤子+红色的领带+白色的衬衫。很明显，A的搭配不合适，而B的配色却表达出了层次：60%的颜色是最淡的，也就是西服衣裤的颜色是灰色；30%的颜色比较亮，也就是衬衫的颜色是白色；10%的颜色是最亮、最醒目的，也就是领带的颜色红色。这样的搭配让人看起来很舒服，而且重点突出，配色有层次感。颜色能把用户的注意力吸引到特定的元素上去，当某个元素的颜色与其他颜色形成反差时更是如此。相对一致性来说，用户对物体间的差异性更为敏感。因此，在页面中加入一些颜色，可以非常有效地把用户的视线引入我们希望他们看到的地方。

6.排版
排版具有三个要素：分割、区块和强调。分割指的是不能把内容信息胡乱搅合在一起，要有区分。试想一下，图书馆的书籍一旦被人打乱搅合在一起，估计图书馆管理员肯定会一本一本地重新归类上架，因为搅合到一起的书很难被读者找到。分割之后是区块，把相关联的内容组织在一个区块中，可方便用户浏览。区块之后是强调，到底哪些重要，哪些不是很重要，强调突出重要的信息。
图6-38所示的是内容一模一样的海报，两种不同的排版方式，产生的效果差异却非常大。不难看出，图6-38中左边的排版方式杂乱无章，密密麻麻挤在一起，用户阅读起来非常费劲，找到自己想要的信息的成本比较高。而右边的排版方式有分割、有区块、有强调。分割体现在标题、演讲内容简介、礼品赠送、时间、地点、需要注册等信息中。将这些信息分割开之后，将内容填充到了相应的区块，比如，标题信息区、演讲内容简介信息区、礼品赠送信息区、时间信息区、地点信息区和需要注册信息区。分区之后，分别对礼品赠送信息和时间信息进行加粗，给出重要信息的强调。

处理好页面元素之间的主次、对比、相似性和分层关系，是掌握视觉设计的基本功。另外，产品经理对色彩也要具备一定的敏感度，至少能够分辨出主色、辅助色和点缀色。对排版和页面布局也要有一定的敏感度。优秀的视觉设计往往能抓住用户的眼球，吸引用户的注意，在视觉上产生强大的冲击力，给用户留下深刻的印象。