一个合格的互联网美工必须了解的入门知识

互联网行业中除了码农这样的“基层岗位”还有一种在金字塔底层的职位叫做“美工”。笔者从事数字营销的十多年来和不下十个美工打过交道,面试过的更有数十人之多。美工们正规的名字应该叫图形设计师,或者互联网行业也会叫网页设计师。他们每天所做的工作就是设计各种页面,Banner小广告,海报以及一些PPT,他们的好朋友是PS,AI,Flash。许多美工是艺术院校科班出身,也有许多来自各种蓝翔,他们是一群“让网络世界变得更美好”的园丁。

你是个好美工吗?

你是个好美工吗?

美工之殇

美工这份看似平凡的互联网职业实际上是对智慧要求特别高的。如果说前端开发工程师的衡量标准是“画出来的是什么他就能码出来什么”的话,美工在实施绘图之前,需要大量的创造性思考。因此笔者非常尊敬那些出色的美工同事,他们往往是一个营销活动成功的关键。

美工所进行的思考活动是围绕着产品本身的艺术性和视觉效果承载的科学性双重目标的。一个画家并不一定能成为一个好美工,因为画家的作品可能很难为营销推广所服务。而一个合格的美工却可以做到,即便他不是为了自发的喜爱的产品在进行服务。所以有着一个好美工的企业往往是幸运的,尤其是国内,因为这样的人才实在很少见。

以转化为目标的设计(Conversion Centered Design)

笔者面试过许多美工,他们来面试时往往会带着自己的作品。有各种网站的设计,贺卡设计,名片设计,Banner设计,图标设计,甚至一些素描作品。但是问及你为什么这样设计时,他们的回答往往比古龙的武侠小说更缥缈更感性。当然也有说老板要求我在这里加个花弄个草的。实际上“所有不以转化为目的的艺术设计都是耍流氓”。艺术性,用户体验,转化能力这三者很多时候是矛盾的。我们所说的合格的美工就是以转化能力为主要目的来进行设计的专业人员,其中优秀的那些人可以做到在最大化转化能力的基础上,同时对艺术性和用户体验的损失达到最小。那么有哪些“艺术”上的特殊构思可以让我们的设计为转化率提高提供保障呢?

以转化率为基础的设计原则

封装效应

一个封装良好的区域会特别吸引观察者的注意力,这好比在一个房间中我们总会看看窗外的景色。在下图中我们可以看到远处的景色会特别引起我们的注意力:

封装效应

封装效应

将页面上的重要元素封装起来会让这些元素更加突出。另一个例子是类似于007片头的隧道效果:

007隧道效果

007隧道效果

你最终会把视线聚焦在穿西服的男子身上。

视线暗示

人和动物的视线有着强烈的暗示作用,这是行为学的理论。谈若有一个路人止住脚步往上看,那么身边的人也会跟着他往上看。下图中的猴子的视线就让我们的视线聚焦在它掌中的香蕉上:

视线的引导作用

视线的引导作用

头随眼动,在下面这个例子中你不但会好奇草丛里藏着什么,更会下意识地跟着这只草原狼往下看。

头随眼动

头随眼动

视线的奇妙作用实际上极诣早在两年多前的《完美着陆页终极攻略》一文中已经介绍。我们再来回顾一下:

选图对访客视线的引导

选图对访客视线的引导

不过我们也提到,有时候目光交流会给人更多的情感推动。比如说下面这张拍摄于1985年的著名《阿富汗难民女孩》,它被用作了当年的国家地理杂志封面:

阿富汗少女的眼神中你阅读出什么?

阿富汗少女的眼神中你阅读出什么?

留白

相信你一定听过这样一句名言“Less is more”。将所有空间填满是业余美工的特征之一。极诣曾经多次提到的在CTA周围要留白或留空就是这个道理。我们看下面这张图,正是因为画面的“一无所有”你才会注意到那只叉角羚:

Less is More!

Less is More!

同时,这张图也是视线引导的又一例子。

强对比的应用

那些追求美的业余美工另外一个最常犯的错误就是过分地追求“和谐”。“在蓝色的背景上使用一个蓝色的按钮”,“在红色的背景中使用红色字体的标题”,这些都是epic fail!一个好的设计师非常善于利用对比来引导观察者的视线。举个例子:

你的鼠标指针会自然地放到月亮上

你的鼠标指针会自然地放到月亮上

色彩的感情应用

你可能见过下面这张图:

品牌的色彩应用和情感暗示

品牌的色彩应用和情感暗示

实际上一些颜色还有一些负面效果。比如女性最不喜欢的颜色是橙色、棕色和灰色。男性最不喜欢的颜色是棕色、橙色和紫色(你懂的)。KissMetrics在两年前曾有一篇不错的博文就是讲颜色的准确运用的,感兴趣的可以移步这里。下面这两个例子展示了鲜艳色彩对视线的牵引能力:

你会不由自主地注视彩色湖面

你会不由自主地注视彩色湖面

你不会错过这只“漂亮”的蚱蜢

你不会错过这只“漂亮”的蚱蜢

方向标识效应

生活中我们总是用箭头指示一些重要的信息,在网页上我们的浏览习惯仍然适用。下图中我们会很自然地注意到右边的男子:

箭头的指示作用

箭头的指示作用

在网页设计中,我们可以添加一些箭头和三角形来引导读者浏览重要信息。同样作用的还有通路效应:

通向远方的道路

通向远方的道路

我们的视线会随着公路延伸到尽头。如果你的页面很长,那么引入一条垂直的“通路”可以帮助浏览者向下阅读。

进一步学习CCD

以上极诣为读者介绍了以转化为中心的设计,即CCD。同时,我们重点讲了合格美工必须要了解的一些设计原则。在着陆页和Banner的设计中,我们时常需要应用这些理论。这些设计原则和许多其他的CCD相关的重要知识都包含在了Unbounce的电子书《The Ultimate Guide to Conversion Centered Design》中。此外CrazyEgg在两年前也有一篇关于此专题的汇总贴,传送门在这里。感谢关注极诣。