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

小O最近要给老K师傅做一次书面的工作汇报,暂时是以PPT的形式展现。一周过去了,小O的PPT也出炉了,小O心想这次的PPT肯定能得到师傅的赞赏。可是,老K师傅看PPT时一直在摇头,后来直接看不下去了,立马叫小O重新来过。小O觉得很委屈,自己做得很好啊。是不是老K师傅故意刁难啊?

老K师傅要求小O提升视觉设计的审美能力,色彩搭配方面建议小O读《写给大家看的色彩书》,提高一下色彩搭配的敏感度。当然了,老K也打算给小O讲讲视觉设计方面的基础知识。

主次、对比、相似性、分层、配色和排版是视觉设计的基本功。

1.主次

页面需要完成的非常重要的功能或内容要放在页面显著的位置。越重要的内容,放的位置就越要明显;比较重要的功能或内容,就放在比较显著的位置;不重要的功能或内容,就放在不显著的地方。这就是页面的主次关系。不要主次颠倒,不重要的功能或内容强行抢占重要的功能或内容的位置,这样会直接影响用户的正常使用。

产品页面如何布局,如何展示会直接影响用户使用产品的便捷性。有主有次的布局总会让用户在短时间内发现自己需要的核心功能或内容;主次颠倒的布局总会导致用户费劲寻找,甚至找了很久都没有找到自己想要的,然后就离开了。这样的设计用户流失的可能性非常大。

用户在使用产品时,通常都是扫描型浏览,即迅速捕捉对自己有用的信息,不会花费太多的时间停留在页面上,如果花的时间太长,还没有捕捉到有用的信息,用户会很失望,从而选择离开页面。因此,页面布局的重点是体现产品的核心功能和内容,核心功能或内容显示在关键的位置,以便用户在最短的时间内找到自己想要的有用信息,完成任务。

保罗·费茨在1954年发布的费茨定律申告诉我们:指点设备的当前位置和目标位置相距越远,我们就需要越多的时间来移动。同时,目标的大小又会限制我们移动的速度,因为如果移动得太快,到达目标时就会停不住,因此,我们不得不根据目标的大小提前减速,这同时又会减缓到达目标的速度,从而延长到达目标的时间。目标越小,就需要越早减速,从而花费的时间就越多。这也从另外一个方面诠释了主次的重要性。

2.对比

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

总地来说,通过对比,会使明显的变得更加明显,不明显的变得更加不明显。

登录MyCube的首页会发现主次和对比都比较明显,如图6-34所示。

00112.jpg

图6-34 MyCube登录后的首页

MyCube是一个“轻博客+微支付”(出售自己有价值的轻博内容)模式的网站,主次主要体现在图6-34右上角所示的①处,为了体现自己与同类产品的差异化,其特意突出①处的微支付账号系统,包括账户的余额有多少,前一个小时、昨天、上周和上个月挣到了多少钱等,还提供充值按钮,引导用户去充值。①处使用的颜色是黑色,与导航是一个颜色。导航是一个网站最核心、最重要的部分,微支付账户功能的重要性等同于导航,故不得不重点说明这个功能。在②处有一个发布轻博客的绿色按钮,在整个页面中按钮的颜色是最深的,代表这个功能也是最重要的。可以看出,发布功能和微支付的账户功能非常重要,经过上述的设计,用户很容易被吸引。

从操作按钮角度来说,在③处有一个绿色的搜索按钮和一个灰色的导入通讯簿的按钮,绿色按钮和灰色按钮放在一起形成对比,更加突出了绿色按钮的重要性。

3.相似性

相似性指的相近、相关联的功能或内容要放在一起,使用的样式也要相似。

以在36kr分享文章为例,发送长微博、分享到微信和分享到QQ都属于分享功能,功能相似所以放在一起,这样便于用户选择操作,如图6-35所示。

00115.jpg

图6-35 相似性

视觉设计相似性原则也适用于房子装修。在现实生活中,我们也经常看到有的房子窗户装修得五颜六色、眼花缭乱的,相同的元素使用的颜色都不一样。而有的窗户只有黑白两色,而且相同的元素使用的颜色都是一样的,看起来却比较舒服。这个案例告诉我们:不要掉入每个元素都应该使用不同颜色的陷阱里去,要适当使用相似性。

4.分层

根据每个元素的视觉提示或主动元素所在的背景进行分层也是组织界面的一种方式。颜色视觉属性和大小视觉属性控制了对分层的理解。例如,深色、冷色调、不饱和色视觉层次下降;相反,亮色、暖色、饱和色视觉层次上升。大的元素层次高,而小的元素层次低。位置上相互重叠的元素也许是视觉分层最直接的例子。

为了对元素进行有效分层,必须使用最少量的对比来维持屏幕同层内各条目间的紧密相似性。确定好分组以及如何在视觉上最好地传达分组信息后,再根据背景的重要性,调节组与组之间的对比来决定显示时的重要性。层间的差异要最大化,而同层各条目间的差异要最小化。

例如,Q+平台上个性化智能阅读产品阅米的“互联网”频道页面层次感就比较突出,如图6-36所示。

00010.jpg

图6-36 阅米的6个分层

图6-36中,阅米“互联网”频道页面在设计的时候共分6个层次,其中①为最高,⑥为最低,①层是频道导航,如阅米精选、互联网、房产、娱乐等,这个最重要,用户经常选择频道阅读。②层是由文章组成的列表页面,因为用户来阅米网站主要是阅读新闻资讯。③层是导航条的频道管理,切换竖版和阅米指南,主要供用户添加频道和设置阅读版式,这几项操作使用不是很频繁,用户有需要的时候才会进行。④层是当前所属的频道名称,层次是被弱化的。⑤层是欢迎词,在重要性方面就更加弱了。⑥层是阅米的Logo,属于最弱的层次。

5.配色

颜色搭配是页面视觉语言不可缺少的一部分,不同的配色给用户传达的信息是不一样的,合理的颜色搭配能够吸更引用户的注意力。在生活中,我们经常使用相同的颜色来表达相同性质的事物。在商务社交礼仪中,穿正装出席正式的社交场合时,着装最好不要超过三种颜色。同理,产品的页面色彩要与Logo统一、相呼应,主色调和辅助色加起来不要超过三种颜色。有的产品主色调直接取自Logo主色调,以恰当的色彩明度和亮度确保用户的浏览舒适度。

比如,现实生活中的穿衣事件,A的打扮是:红色的衣服+红色的裤子+红色的领带+白色的衬衫。B的打扮是:灰色的衣服+灰色的裤子+红色的领带+白色的衬衫。很明显,A的搭配不合适,而B的配色却表达出了层次:60%的颜色是最淡的,也就是西服衣裤的颜色是灰色;30%的颜色比较亮,也就是衬衫的颜色是白色;10%的颜色是最亮、最醒目的,也就是领带的颜色红色。这样的搭配让人看起来很舒服,而且重点突出,配色有层次感。

颜色能把用户的注意力吸引到特定的元素上去,当某个元素的颜色与其他颜色形成反差时更是如此。相对一致性来说,用户对物体间的差异性更为敏感。因此,在页面中加入一些颜色,可以非常有效地把用户的视线引入我们希望他们看到的地方。我们以淘宝宝贝详情页为例,如图6-37所示。

从图6-37中不难看出,价格、售出件数、评论数、立刻购买和加入购物车等的颜色都比较醒目,从醒目的程度上说,立刻购买和加入购物车要比价格、售出件数和评论数略胜一筹,而价格又要比售出件数和评论数略胜一筹。之所以在用户比较关心的信息上使用这么醒目的颜色,是为了让用户能快速扫描到,比如,价格和售出件数。买家买东西时,通常对价格是比较敏感的。售出件数也使用了比较醒目的颜色,是因为用户有从众的心理,如果售出件数越多,表示宝贝的质量不错,这会增加用户的信任感。而最醒目的要数立刻购买和加入购物车,这么做的原因很简单——方便用户操作,引导用户产生购买行为。

00002.jpg

图6-37 淘宝网宝贝详情页

6.排版

排版具有三个要素:分割、区块和强调。分割指的是不能把内容信息胡乱搅合在一起,要有区分。试想一下,图书馆的书籍一旦被人打乱搅合在一起,估计图书馆管理员肯定会一本一本地重新归类上架,因为搅合到一起的书很难被读者找到。分割之后是区块,把相关联的内容组织在一个区块中,可方便用户浏览。区块之后是强调,到底哪些重要,哪些不是很重要,强调突出重要的信息。

图6-38所示的是内容一模一样的海报,两种不同的排版方式,产生的效果差异却非常大。

不难看出,图6-38中左边的排版方式杂乱无章,密密麻麻挤在一起,用户阅读起来非常费劲,找到自己想要的信息的成本比较高。而右边的排版方式有分割、有区块、有强调。分割体现在标题、演讲内容简介、礼品赠送、时间、地点、需要注册等信息中。将这些信息分割开之后,将内容填充到了相应的区块,比如,标题信息区、演讲内容简介信息区、礼品赠送信息区、时间信息区、地点信息区和需要注册信息区。分区之后,分别对礼品赠送信息和时间信息进行加粗,给出重要信息的强调。

00006.jpg

图6-38 海报的两种排版方式

这下小O终于知道自己的不足在什么地方了,PPT内容没有主次之分,某个重要的结论也没有使用对比的方式来进行突出。总的来说,让人看起来很费劲。

00126.jpg

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