原文:Common Visual Design Misconceptions
作者介绍:Luke Lebowski雅虎的首页设计架构师,是畅销设计书籍Web Form Design (2008) 和Site-Seeing: A Visual Approach to Web Usability (2002)的作者。
最近有一次机会让我重新反思了人们对“视觉设计”的几种常见误解。这些误解仍然普遍存在于很多高层管理者、产品领导者、工程经理及营销专家中。
有什么办法能够让设计师纠正人们通常对于“视觉设计”概念的错误理解?应该怎么去做,才能展示“视觉设计”的实质?
尽管视觉设计师在不同的产品领域和职业阶段会遇到不同的阻碍,但是对于“视觉设计”普遍存在三种误解:
1、 视觉设计只是把东西做得更好看
2、 使元素更突出,可以提升视觉设计
3、 可以将视觉设计分割成部分进行孤立地评估
观点1:视觉设计只是把东西做得更好看
尽管很少有人赤裸裸地要求设计团队只要把东西做得好看就好,但是长久以来,人们仍认为“视觉设计”就像是蛋糕上的糖衣一样,是在工序的最后阶段在产品上加的蝴蝶结,只是为了使产品看起来更吸引人一点。
也许这种观念源于工业设计时代大众对设计的初步认识。在那个时代,人们对产品的风格进行了各种尝试,有些风格在此之前闻所未闻。那时的工业设计师们如Raymond Lowey在改良过去呆板产品上做出了巨大的美学贡献,他们及他们所使用的方法得到了前所未有的吹捧。
显然,视觉设计可以提高产品的美感,但是它的潜力还不仅限于使东西好看。通过对元素进行视觉组织,视觉设计师可以将以下关键问题的答案传达给人们:
1、 这是什么?
2、 我可以如何使用它?
3、 为什么我要关心它?
让人们认识到这些对提高产品的有效性和可用性非常重要,尤其对交互性强的产品。我可以通过例子来说明这一点。
图1-图3表示某一个互联网应用的同一组基本功能。它们使用了相同的字体、颜色、渐变和图片,主要不同是元素在屏幕上的组织方式不同。这一不同引导出用户对该应用的三种不同使用方式。
图1:

图1中,该应用的呈现层清楚表明,这个应用的主要功能是查找客户的联系方式。其次,用户可能通过注释来删除、修改或者补充这些信息。
在图2中,重点是突出客户和公司之间的交流,其次,用户可以查看、编辑和删除联系信息。
图2:

最后,图3将重点放在了编辑客户信息上。而“查看联系信息”和“跟踪对话”这两个功能则被弱化了。
图3:

可以看到,同一应用的三种不同视觉组织形式,给用户提供了3种不同的基本功能:查看联系信息、管理用户反馈和维护客户档案。在这3种情景中,核心的视觉设计元素是相同的:相同的字体、颜色和图片。
很显然,视觉设计不仅仅是使东西看起来更好看。它在提升产品美感的同时,向用户传达了产品的核心功能——这是什么?我该怎么用?
观点2:能设计得更突出吗?
利益相关者通常要求设计师对某些视觉元素进行强化,从“把图标弄得大些”(说明:这是一国外网站的名字)这类网站的流行可见一斑。尽管这一观点有时能够帮助我们确定哪些是设计中最重要的元素,但它们同时也表明了人们对视觉设计的另一个误解:为了改进一个网站的视觉设计,你必须将东西弄大、弄粗、弄红,甚至在有些情况下,你得将东西弄得又大又粗又红。
但是,一个元素在界面中的相对重要性最终是由其周边的元素决定的。在一张白纸上划一个红圈,会得到相当强烈的注意。在10个粉红的圈旁边加一个红圈,这个红圈则不会突出。因此,如何突出重要元素是对整体设计进行管理的过程。它不仅仅是改变单一的页面元素,如果只为单一的视觉元素增加权重会改变界面布局的平衡,扰乱相关元素和主要行为之间的重要关系。
如果你按照每个利益相关人的要求,将他们关注的元素设计得更吸引人,最终的结果就是,界面上的每一个元素都在争夺用户的注意力,从而它们谁也别想被用户注意到。
比较图4和图5中的两个浏览器下载页面。火狐的首页将用户的注意力吸引在下载这一行为上,其他的内容如Thunderbird和 the Mozilla store都没有干扰用户。
图4

图5中,设计师想在Flock的下载页面上突出很多元素,最后设计师不得不在页面中放上四个“下载”:右上侧、左侧菜单底部、新闻板块和页脚。如果不是想强调那么多元素,Flock就可以像火狐那样,只需要一个下载按钮就可以了。
图5:

观点3:可以将视觉设计分割成部分进行孤立地评估
上文中提到的那些使设计只注重局部而不注重整体的因素,使得局部的改变也变得困难。然而,对设计师的反馈总是局限在局部上:能把logo放大吗?能改变头条的颜色吗?能换张图吗?
固然,这些反馈能够使设计师理解利益相关者和顾客想要的效果,但是它没有从整体上来考虑,而整体观是一个优秀的设计所必须的。
改变某个颜色可能意味着要重新考虑整体色调了,整体色调原有的对比度是设计师为了突出某些关键行为而准备的,现在可能不适用的;改变某张图片,可能意味着周边的元素也要被调整,因为原图所要的视觉效果已经不存在了;等等。
产品的整体视觉设计是对所有元素精心平衡的结果,它是为了向用户传达产品的有用性、可用性和用户期望值(desirability)。因此,如果一个设计师调整了某个元素,他/她需要对整个设计重新考虑,进行平衡。孤立的设计决策无法形成和谐的整体。
孤立地对基于网页的产品进行评估,更容易使产品受到损害。由于可以将设计拆分成几个部分进行测试,产品团队常将在局部测试中表现良好的部分加以整合,以为最后整合的效果也会很好。图6展示了孤立的设计决策可能导致的后果。
图6 ebay意大利首页

虽然ebay的这个头部在水桶测试(见译注1)中表现良好,Paypal的LOGO得分在焦点小组中的得分也比较高,首页相机的推广活动也得到了较好的点击率,但是这三个放在一起,就没有形成一个有效的设计,事实上,这个页面的很多元素在彼此竞争。
希望上面提供的例子能够说明对视觉设计的那些理解是错误的。但是要说服你的同事们和利益相关人相信视觉设计不仅仅是对设计风格的优化,不仅仅是使元素更突出,不仅仅是对局部设计的孤立调整,也许他们要亲自体验才能认识到视觉设计的潜力。
译注1:水桶测试是一种常有的测试方法,它度量不同的设计如何影响网站的各个维度。其基本前提是,同时运行两个相同版本的页面或一组页面,来测量它们在点击、浏览、事务处理等方面的不同。