网站上的每个元素都会通过发挥自身的视觉感官吸引观者的眼球。这些力量同时也能作用于其他元素,从而形成一种潜在的视觉运动方向,引导观者的阅读。而这种力量越大,吸引力也就越强。
我们把这种力量叫“视觉感官”,把我们所感知到的视觉力量方向,叫做视觉方向。理解这两个概念对于作品中层级、流程、节奏和平衡的打造具有重要的意义。
网站设计中视觉感官
物理学的感官是对地心引力施加于物体上的力的度量,但是二维的物体(例如网页上的元素)没有质量,所以也就没有物理范畴的感官可言。视觉感官是对元素吸引人眼球力量的度量。二维的物体都能够吸引人的注意力。一个元素吸引力越强,其视觉感官也就越大。
在本系列的上一篇文章中,我谈到了元素的原始特性或者叫固有特征,例如其尺寸、颜色和形状等等。在文中,我还说到了如何通过这些特性来表现不同元素之间的对比与相似。
举例来说,两个元素一个很大一个很小就能形成鲜明的对比。
而通过组合这些不同的特性,我们就可以控制视觉感官。红色比蓝色更加吸引人,大的元素比小的元素更加吸引人,所以说,一个大的红色物体所具有的视觉感官就要大于小的蓝色物体。
那么这些特征或者说原始特性的集合,就决定了元素的视觉感官高低。要强调的是,决定元素视觉感官的不是单个特性,而是多个特性的组合。但不同的特性组合吸引人的力度也有不同。要打造具有不同视觉感官的元素,就需要结合不同的原始特性。
据我所知,精确衡量设计元素视觉感官的方法是不存在的。但你可以凭借经验和判断力来分辨哪些元素感官大,哪些感官小。所以你要培养并相信自己的眼力。一幅作品中最吸引眼球的区域就是视觉感官比较高的区域。还是那句话,要相信自己的眼力。
但这并不是说你可以随便乱试然后用眼睛判断什么吸引力最强什么吸引力不够强。举个例,你可以通过把每个不同特征分离开来判断出比较大的东西感官要大于比较小的东西。与此同时,你的眼力可以帮助你区分不同特性组合的视觉感官。
不过好在已经有高人把各种不同的特征进行了分离和测试。下面是几个元素特征以及其增减对视觉感官的影响说明。
首先我们来看上一篇文章中提到过的几个原始特性:大小、颜色、色值、位置、材质、形状及朝向。
大小
比较大的元素相比小元素的视觉感官要高。
颜色
暖色能够比较好的融入前景,比冷色感官高。冷色更倾向于融入背景。红色是一般认为是感官最大的颜色,黄色则为最轻。
色值
较暗的元素视觉感官较高。
位置
在作品中所处位置较高的元素感官要大于所处位置较低的元素。距离作品中心或核心区域越远,元素的视觉感官也就越高。前景中的元素所具有的感官要高于背景元素。
材质
有材质的元素感官大于无材质物体。材质能让元素更具三维感,从而更表现出一定的质量和物理感官感。
形状
形状规则的物体比不规则的物体感官较高。不规则形状会让人产生其质量被从规则形状中抽离的感觉。
朝向
垂直的物体感官高于水平物体。呈对角线放置的元素感官最高。
当然,你不一定要局限在上述的这些原始特性之中,大可通过其他的特征来掌控视觉感官。
密度
增加特定空间内元素的数量能够提高空间的视觉感官。在观看者眼中,高密度的区域会结合成为一个较大、较暗的组合元素,而不再是几个小的、淡色的元素。
局部留白
留白的空间呈现出空的状态,因此不具有任何视觉感官。因此,放置在留白空间中的物体就会在周边环境的衬托下显得更具感官。
内在兴趣点
不同的物体有趣程度也不尽相同。元素越复杂、越繁复会让人兴趣越高,从而吸引眼球的能力也就越强。在这一方面,个人的兴趣点也发挥着作用。比方说,你对汽车的兴趣大于飞机,那么汽车的图片相比飞机就更能吸引你的注意力。
深度
较高的景深度能够让位于焦点的元素更具视觉感官,这一点有可能是焦点与非焦点区域之间的对比度造成的。
饱和度
饱和的颜色比不饱和颜色更重。
网站设计中物理感官感觉
我们都知道房子的感官显然大于鞋子的感官。那么,一所房子的图片在视觉上也就自然比鞋子图片更重,因为我们心里知道房子重。
举个例吧,在网页上,圆形一般比矩形看起来更重,因为大部分网站设计中元素都是矩形的。
当然,并不是所有特征对视觉感官的影响程度都相同。大部分人对元素颜色的注意力要先于元素形状,这也就说明颜色对视觉感官的贡献较大。同时你还要考虑特定作品的独特性,因为形成对比的元素的感官要高于用来与之对比的元素。作品的独特性将决定哪些东西能够形成对比,哪些不能。
要牢记,视觉感官是上述各种属性的组合。所以,尽管大的物体视觉感官高于小的物体,但一个周边环绕大量留白空间、放置在页面顶部的深色小圆形物体,其感官很可能会高于放置在页面底部、形状不规则的浅冷色大物体。
网站设计是一门学问,值得设计师去研究学习。