专业建站——省时、省心、省钱

网页设计三原则:视觉重量和方向

2015-02-26 14:13:37    关注:
网页上的每一个元素都投射着吸引用户的视觉力。视觉力越强大,就有越多双眼睛被吸引。这些力量当然也影响其他元素,指引视觉导向投向用户潜在动作,暗示用户下一步该看向哪里。

这样的力量,我们称之为视觉重量,而视觉力的潜在方向称为“视觉导向”。这两个概念十分重要,有助于创建层级、流、韵律和平衡。

视觉重量

物理重量是衡量重力施加在某件物体上的量,但在二维世界里的物体没有体块,因此也就没有物理重量。视觉重量是某因素发挥用户吸引力的能量。二维物体能够吸引注意力。一个因素吸引越多注意力,视觉重量就越大。

一个因素包含尺寸、形状、颜色等特征,这些因素决定了某物的视觉重量。通过控制这些因素的组合方式, 就能实现对视觉重量的控制。比如,相比蓝色,红色就比较容易引起注意,大的物体就比小的物体更容易被看到……

如何测量视觉重量?

在设计元素中,没有能够精确测量视觉重量的方法,设计师只能通过经验和直觉判断哪些因素和组合能够增加或减少视觉重量。这样,就需要先学会信任自己的眼睛。为解决这一问题,作者总结出以下几点可供参考:

尺寸:较大物体的视觉重量大于较小物体。
颜色:暖色视觉重量大于冷色,暖色感觉上靠前,冷色靠后,而红色被认为是最重的颜色,黄色最轻。
值:神色物体视觉重量大于浅色物体。
位置:整个空间中,位置靠上的物体视觉重量大于位置靠下的物体。离空间中心越远,视觉重量越大。位置靠前的视觉重量大于位置靠后的。
质地:有纹理元素视觉重量大于没有纹理的物体。纹理能够让一个物体更加接近三维世界,也就显得更大或者更重。
形状:形状规则的物体重于不规则物体。
方向:垂直物体视觉重量大于横向物体。对角因素重量最大。

另外还有一些额外的特征可以控制视觉重量。

密度:在特定空间里,物体越多视觉重量越大。
空白空间:空白空间接近于没有视觉重量。
内在兴趣:某件事物越复杂或越精致,就会越引起观者注意。
深度:深度越深,视觉重量越大。
饱和度:颜色饱和度越高,视觉重量越大。
预设物理重量:在人们常识中已经知道一间房子比一只鞋重,因此,房子图案的视觉重量会大于鞋子图案的。

需要注意,以上因素对视觉重量的影响不同。颜色对视觉重量的影响大于形状。另外还需考虑环境特殊性,特殊对待。

视觉重量与完全形态

格式塔原则对设计原则的影响

图形-背景
视觉重量让图形重于背景以分开图形和北京。

临近度
各元素之间留有不同大小的空白空间和密度。

相似性和对比度
视觉重量对这两个因素同样具有影响。

焦点
焦点的视觉重量大于其他因素


过往经验
观者经验也会影响视觉重量

视觉导向

视觉重量是指吸引观者视线到某处,而视觉导向就是说引导视线前往下一目的地。

和视觉重量一样,通过修改某些特征,也能够更改视觉导向。

形状
某元素形状可能生成一个类似“轴线”的概念,这个“轴线”就会按时某个方向。

位置
视觉重量对周围物体具有吸引或排斥作用,这种作用也能够起到引导视线的效果。

特定指示物
箭头、手指或眼睛等都可以是暗示方向的物体。

动作
设计中某物体的运动趋势也能够引导用户视线。

结构框架
每一个成品都有其结构框架,不同的力在各个轴线之间运动。

这一理论可以理解为:每一块帆布都有不同力组成的结构网格,即便帆布上什么都没有,人们的视线也会按照一定的路径移动,其原理如下图:

Rudolf Arnheim结构网

 

网页设计三原则:视觉重量和方向

 

在一块长方形帆布上,中心和四角是最为吸引人注意力的,其中中心吸引力最强,两条对角线沿线的吸引力也较强。这里说的“中心”是指“光学中心”而不是帆布的物理中心,光学中心就处在物理中心的正上方。

设计师可以根据上述结构网将物体放在自然吸引观者注意力的地方。

视觉导向和格式塔

视觉方向可以是实际存在的,也可以是虚拟的,视觉引导线不一定非要是可视的。

统一连接性
物体之间的连接线有方向,眼神注视在眼睛与眼睛所注视的物体之间生成一道想象中的线。


延续性
这一原则与直线或曲线沿线物体有关,这些物体都是沿着直线或曲线移动的。


共同命运
向同一方向运动或可能拥有同方向的物体具有“共同命运”。


平行
要想使物体看起来是平行的,必须首先建立内部轴。

成品整体方向

视觉导向的另一个概念是:让一个成品有自己整体上的方向。

横向让整体看起来稳定平静。
纵向方向为整体增添正式感、警戒性和平衡感。
对角线方向暗示着运动和行动。

每件成品主要方向是根据组成元素中,大部分元素的方向决定的,也有可能是由少数几个关键因素所影响。成品方向有助于帮助产品根据不同线条的含义建立情感连接。

不过也有这种可能性:一件产品并没有主方向,例如横向元素与纵向元素的数量相差无几时,就由观众决定其方向。


实例:

作者通过以下网页截图分享视觉重量分布。在这里,作者还分享了一个实用小窍门:当你第一眼看不出哪个元素视觉重量最大时,可以尝试慢慢闭上双眼,画面上的一些元素就会消失,那么最后留下的就是视觉重量比较大的元素啦。

BUREAU

网页设计三原则:视觉重量和方向

 



BUREAU页面的文章几乎全是文字,大标题视觉重量最大。其次,用户可能会注意到空白地区原有的白色空间,所以这些白色区域也是视觉重量较大的部分。


文字下方的链接,因为其颜色与大环境颜色不同,也具有一定的视觉重量。但由于链接颜色为冷色调,其视觉重量并不大。


视觉重量最小的元素是右边栏里的文字。这点几乎毫无可疑问。


注意右边栏里的少量红色字体,这是返回网站主页的链接。虽然这几个字面积并不大,但是红色为这些字增加了视觉重量,让它们从其他文字中凸现出来。


初步观察之后,可以尝试斜视角度,右边栏内容就会逐渐消失,只留下最左边白色区域和文字。


这个页面是由两个长条形的纵向文字组成,左右两个部分的不同背景色也是纵向的,因此整篇文章主要方向为纵向,会自然而然地引导读者由上往下读取页面信息。


CREATE DIGITAL MEDIA

 

网页设计三原则:视觉重量和方向

 



CREATE DIGITAL MEDIA网站页面读取结束后,我们可以看到,页面主体部分色彩鲜艳,色彩饱和度很高,非常吸睛。粉、黄、蓝三色元素在页面最中间,占据了整个空白页面的主要部分。这一部分是视觉重量最大的。


页面底部的图案是视觉重量第二大的。虽然这一部分颜色很深,但他们占据的面积不小,且图形复杂。再次,就是同样深色的页面主标题视觉重量较大。再往后排,就是页面上方的公司名称和最下方的企业logo。


以斜视角度看,以上所说排名靠前的部分消失较慢。不过对于这个页面来说,视觉方向应该是水平的,页面上主要物体的“纹路”都是横向延伸的。


JAVIER MARTA

 

网页设计三原则:视觉重量和方向

 



JAVIER MARTA网站主页上,图像、绿色小标题和页面最上方的菜单是视觉重量最大的部分。图像颜色本身很深,周围留有空白,使图像本身突出;绿色小标题颜色相对亮丽,周围也有留白;菜单栏颜色深、面积大,被空白空间包围,因此也获得较重的视觉重量。


在这一案例中,比较特殊的是页面上方“JAVIER MARTA”的话题字样,这组字样和菜单字样的重量较难区分,这时候,就要再次用到之前说的“斜视角度”小技巧。作者在尝试后发现,斜视角度下,JAVIER MARTA标志和菜单栏会混成一个部分,而图像和小标题栏仍然与周边环境有明显区分。


这一页面的视觉方向也是横向的。


STANFORD ARTS

 

网页设计三原则:视觉重量和方向

 



STANFORD ARTS主页面上方轮播图案视觉重量最重,是整个页面中面积最大的元素,图案本身就在视觉重量方面有内在优势,再加上位置“显要”,其重量自然不言而喻。


其次,页面下方的三角图案视觉重量较大。


斜视角度观察后,消失最慢的是各处图像。


这个网页的视觉方向是较为少见的对角线方向,与其他视觉方向的网页相比,这样的页面比较容易吸引用户浏览。


总结:


视觉重量是网页中某元素吸引人注意的程度衡量标准;


视觉方向是某元素力量被感知到的方向,能够指引用户视线移动方向;


即使是某些特定元素,也能够在经过简单修改之后改变视觉重量等因素,让某元素更适合整个页面布局。


希望大家能够理解并很好地运用以上几点,创造出美观又赢得高点击率的成功页面。


 

视觉中国专稿,转载请注明出处!谢谢!

分享到:

上一篇:20个色调丰富的时尚网站设计
下一篇:10亿微信用户流量红利要不要?教你设置小程序推广关键词!


  • 地址:广西南宁市民族大道38-2泰安大厦金座1005室

  • 电话:0771-5712565

  • 邮箱:1105315108@qq.com

网址:www.bc0771.com

友情链接: 南宁SEO

COPYRIGHT © 2007-2016 伯才网络 版权所有