恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
设计准则:视觉的重量和方向
0.0°
2015-02-09 自译外文 经验/观点 原作者: Steven Bradley 举报 28311 123 38 3

在网页中,每一个要素都发挥着它该有的视觉的力量去吸引用户的眼睛。这个力量越大,它吸引的目光就越多。同时它还作用于其他的视觉要素,传递出潜在的视觉移动方向的信息,并且告诉你接下来该看什么。

我们把这个力称作:视觉重量;把它感知视觉方向的力称作:视觉方向。如果想让你的作品变得流畅、平衡、有节奏感和层次感,那他们就很重要了。

注释:关于设计的准则一共有四个帖子,你可以在下面的网址看其他三个部分。

http://www.smashingmagazine.com/2014/09/22/design-principles-connecting-and-separating-elements-through-contrast-and-similarity/

http://www.smashingmagazine.com/2014/05/16/design-principles-space-figure-ground-relationship/

http://www.smashingmagazine.com/2014/03/28/design-principles-visual-perception-and-the-principles-of-gestalt/

视觉重量

物理重量衡量的是引力发挥在物体上的力,但是二维的物体(比如网页上的元素)没有质量,也就没有物理重量。视觉重量是衡量一个元素吸引眼球的力。二维的物体可以吸引注意力,吸引的注意力越多,它的视觉重量越重。

在这个系列之前的帖子里,我谈到了要素的基本特点或者说是内在特点。比如尺寸、颜色和形状。并且提及如何用这些基本特点去展示两个要素之间的对比和统一。

举个例子,你可以通过一大一小的形状对比让要素变得不同且清晰。

通过调节这些内在特点的组合,你可以控制网页的视觉重量。比如:红色比蓝色更加吸引眼球,更大的要素比更小的要素更加吸引眼球。那么组合起来的话,大面积红色的视觉重量就要比小面积的蓝色要重很多。

这些基本特点的总和才能决定一个要素的视觉重量。并不是其中任何一个。确实一些基本特点的组合可以吸引更多的眼球。因此,为了创造不同的视觉重量,你要使用不同特点的组合。

如何衡量视觉重量?

说实话,没有一个很精确的方法去测量设计要素的视觉重量。用你自己的体验去决定哪一个要素轻哪一个重吧!发挥你眼睛的作用。这个区域中最吸引你眼球的地方就是视觉重量最重的地方!学着相信你的眼睛!

这并不意味着你要很随意的去看什么最吸引你的眼睛。例如,你可以将每一个特点都分离出来,去理解更大的比更小的重,你的眼睛会帮助这些特点相互组合。

幸运的是,有人已经分离测试了这些特点。下面的这些特点,你可以改变其中任何要素并且说明如何改变他们,改变后会增加或是减少视觉重量。

让我们来分析一下之前我提到的几个基本特点:尺寸、颜色、色值、位置、纹理、形状和方向。

·尺寸

大要素的视觉重量比小要素的重。

·颜色

暖色更倾向于前景,一般都比较突出,同时暖色比冷色更重。冷色则往背景方向逐渐远去。红色被认为是最重的颜色,黄色则是最轻的颜色。

·色值

深色元素的视觉重量比浅色元素重。

·位置

在一个作品中,处于更高位置的要素一般比更低位置的要素重。位于中心区域或重要区域的元素更重。

·纹理

有纹理叠加的要素比没有纹理的要重。纹理让物体呈现三维的效果,同时给予它质量和视觉重量。

·形状

规则的物体比不规则的物体要重,因为不规则的物体就像是规则的物体被切掉一部分后得到的。

·方向

垂直方向的物体比水平方向的物体重,但最重的是倾斜的物体。

事实上,你完全不用把自己限制在这几个基本特点中,你也可以使用额外的特点去控制视觉重量。

·密度

填充更多的元素到空间中,去增加空间的视觉重量。观者将会感受到更复杂的的组合要素,而非更简单的要素。

·白色空间

纯白的空间看上去没有视觉重量,因为它太空了。任何一个在空白中的物体似乎都更重了,原因是周围的空间都包围着它。

·本身的兴趣

有些事比其他的事物更有趣,更复杂的元素就更有趣,也能吸引更多的眼球。你自己本身的兴趣也扮演了一个角色,如果在飞机和汽车中你更喜欢汽车,那汽车的图片就会更吸引你的注意力。

·深度

较大的景深给了焦点元素更多的视觉重量,原因可能是焦距和未焦距区域的对比度

·饱和度

饱和度高的颜色比饱和度低的颜色更重

·感知物理重量

我们都知道一栋房子的重量比一双鞋子重吧!一张印着房子图片的视觉重量比一张印着鞋子的照片重。因为我们感觉房子更重

在之前的这个系列里,我提到了对比的元素会更加吸引眼球。换句话说,与周围环境对比的要素将会比他周围的环境更重。举个例子,网页中的环形元素视觉重量比矩形元素更重,原因是网页中的大多数元素都是矩形。

并不是所有的特点都会导致相同的视觉重量,大多数人可能最先注意到的是颜色而非形状。这表明颜色的视觉重量更重。你还必须考虑到他们的独特性,因为对比的元素比他们的对比物更重。你作品的具体情况将决定哪些地方有对比,哪些地方没有。

请记住,视觉的重量是上述这些属性的总和。尽管大的元素比小的元素要重,一个小的黑色圆圈周围是大量的白色空间并且在页面顶部,他比一个大的不规则的冷色的在页面底部的物体要重。

视觉的重量和格式塔原则

接下来的这个系列指出了格式塔原理对设计原则有多大的贡献。

·图形背景

视觉重量可以通过给予图形更多的负重去把背景和图形元素区分开来。

·距离

元素间的空间导致了不同数量的局部空白和物体内部空间的不同密度

·相似和对比

你可以用视觉重量去表示它们,对比的元素会带来巨大的反差和视觉重量,类似的元素很自然的就会表现出相似性。

·焦点(该系列中的下一个主题)

点元素组成了焦点并且会特别有吸引力,它的视觉重量比其他元素都重

·曾经的体验

浏览者过去的体验会很影响他们认为的当前网页中最吸引眼球的元素。

 

视觉方向

如果说视觉重量是关于吸引眼球到特定的位置,那么视觉方向就是引导眼球到下一个位置。视觉方向是对视觉力量的感知。如果元素正在运动中,那想一下你期望的元素的移动方向。视觉方向和视觉重量有着相似的功能,视觉重量是想让你注意到作品中的某一部分,它在兴奋的对你说“嘿,看我这!”,而视觉方向却在对你说“嘿,看那边!”

当然你也同样可以通过修改元素特点去改变视觉方向,尽管它的元素特点比视觉重量要少很多。

·元素的形状

一个元素的形状可能可以创造一个坐标轴,并且这个坐标轴会提供一个视觉方向。基本轴通常都是平行方向的视觉元素

·元素的位置

视觉重量是一种排斥与吸引并存周围元素的力量,同时这个力量把它们都联系在了一起。

·特定元素

一个箭头、一个手的指向或者一个眼睛的凝视都暗示了一个具体的方向

·元素移动

通过你的设计,元素确实可以移动,并且它的移动是有方向的

·结构骨架

每一个元素都有骨架结构,它们都沿着不同的轴线很自然的移动。这里可能需要更多的解释了。

结构骨架

在《艺术与视知觉》这本书中,鲁道夫·阿恩海姆提出每张画布后都有结构骨架,每一个画布都有一个结构网络的力量贯穿它的全部。即使这个画布上没有任何元素,我们的眼睛还是会被吸引到画布上的特定部分,因为结构网络力一直在画布下面

鲁道夫·阿恩海姆的结构网络。

一张矩形画布的中心和四角就像磁铁一样吸引我们的眼睛。磁力最强的地方在画布的中心,尽管不是画布的几何中心。相反,吸引眼球的中心是光学中心,它位于几何中心的上方。

轴线从中心贯穿四周,这些轴线交点的中心和四角都吸引了注意力。这些中途的交点,把水平线和垂线相互联系起来,创造了一个吸引眼球的坐标轴。

好了,后面要谈到这一个系列的时候我们还会回来好好聊一下结构网络的。现在知道了,一个缺乏设计眼光的浏览者会被吸引到阿恩海姆结构网络的中心,并且沿着不同的轴线一点一点往下看。

因此,你可以利用这个结构网络去放置元素,调整它们的位置。它们会很自然的吸引眼球,并且吸引力会增强。

 

视觉的方向和格式塔

 

你可以想象一个元素到另一个不同却相互联系的元素的方向,用一条真实或想象出来的线条。这条线可以是不可见的。

·统一连通

这根线连接的元素是有方向的,眼睛凝视元素的地方会出现一条线。

·连续

这条原则相关于元素被安排成直线还是曲线,就好像他们正在沿着曲线或直线运动

·共同命运

元素之间似乎有朝着一个方向移动和呈现的共同命运。

·并行

为了使元素看上去是并行的,它们的内部轴线(就是赋予视觉方向的线)必须建立起来。

 

作品的总体方向

视觉方向更多的一个概念就是,每个作品都有一个主导方向,不管是垂线、水平线还是对角线。

·水平方向会让作品表现出冷静和稳定的感觉

·垂直方向会让作品表现出危险、形式感和平衡感

·对角方向代表位移和运动。

作品的主导方向是由大多数元素或者几个关键元素来确定的,这个方向会帮助建立一个总体氛围,这个总体氛围的建立是根据不同的线型来决定的。

有可能作品中没有主导方向,垂直线和水平线的数量是相等的。举个例子,在这种情形下,浏览者可以决定哪个方向是主导方向

 

例子

接下来的一些例子,我拿了一些网页的截图。我会跟你分享我的想法以及我看到的视觉重量。当然,你看到的可能和我不一样,这是很正常的。

不同的眼睛会被不同的事物吸引,我也知道没有一种确定的方法去衡量元素的视觉重量。此外,两个人会很容易的看到作品的不同区域,因为他们的兴趣不一样。这一点是具有主观性的。

这里有一个很简单的方法去测试元素的视觉重量,眯起眼睛或者斜视看哪些元素会渐渐淡去,相比那些淡去的元素那仍然有元素较重。

 

信息局

我浏览器截取信息局的网页宽度是1280像素的,如果不这样的话,设计可能会崩溃。而不是下面看到的两个单独栏目

这上面这个信息局网页的文章显示了几乎全部的文本,很明显,标题的视觉重量最重。第二个就是文章那一片,因为周围有很多白色空间围绕着它。这可以说是一个来访者应该看到的网页中的最重要的信息,因此它具有较重的视觉重量。

链接通过与周围文本的对比也得到了一些视觉重量,尽管在我看来冷色减轻了一些重量。

视觉重量最少的地方是右列的文本,这不是没有道理的。因为,重点最应该是文章而不是侧边栏。

请注意右侧上方的红色小点点,这个链接是到网站的首页的。虽然它很小,但是红色却给了它一些额外的视觉重量,帮助它从其他元素中脱颖而出。当你直接看这个网页的时候一切都很大,因此红色在这个地方显得不是很那么小。

当你用斜眼测试看这个网页的时候,右边的侧边栏全部消失,留下的就是一个很大的标题和标题下边一整块文字内容。

这张作品的视觉方向是垂直方向,因为网页一共就分了垂直的两栏。背景不同的颜色创造了一个垂直的线条引导你往下看,并且还给了作品一个垂直的视觉主导方向。

 

创建数字媒体

当加载到数字媒体的主页,丰富的色彩以及恰到好处的动画,都为他们吸引了大量的注意力。即使你没有看到它的动画,你也会觉得这个元素有很重的视觉重量,因为它有着饱和度很高的粉色、黄色和蓝色。这些元素也占据相同的空间,它们创造出了一个密集区域在一片空白背景下。

这篇文章还在出版和写作之间,创建数字媒体网站已经关门了。想知道为什么,就看看下面的主页吧。

对我来说,视觉重量第二种的就是下面的三个图形按钮。它们看起来又黑又大而且复杂。它们把你拉到三个部分,并且去看下一个最显眼的元素(即每个部分的标题)主标题在网页中显得黑暗和巨大,直接和它下面的文本产生对比。其他项目对我来说都很耀眼,这要归因于它们很重的视觉重量(即公司的名字在头部,而logo和按钮在下方)。

用斜眼测试该网页,有颜色的齿轮、文本和图形按钮仍然较重,其他的元素都渐渐淡去。主标题对我来说也模糊了,尽管我还能看到它。我还看到了左下角的logo,尽管它模糊速度的比图形按钮快得多。

呃,我认为他的视觉主导方向是水平方向。它的主标题和导航都是呈一条水平线。另一个显眼的元素,突出的文本也是水平方向的。那三个齿轮可以看成三个单独的三角形,虽然它形状上有些弯曲。所以它是对角线方向。它们不长,是页面上唯一的对角线方向的元素

 

贾维尔·玛尔塔

三个要素的对比给了玛尔塔主页视觉重量。图像、板块间的绿色分割元素和顶部的菜单栏都吸引了注意力。

·图形

这些图形都是大的、颜色深的并且被周围的白色空间包围。每一个图形都有自己本质的意义。

·绿色分割点

它们较大,并且有颜色,就像图形一样。并且它们被白色空间包围着

·菜单栏

与前面元素一样,菜单栏很大,颜色很深并且被白色空间包围。

对我来说,网站的logo也有一些视觉重量跟它旁边的菜单栏相比,尽管没有菜单栏那么显眼,但也比正文板块要重一点。可能你会反对我,但这不重要。

斜眼测试使菜单栏和logo混为一体,绿色分割点和图形元素仍然很明显,正文板块看起来就像一整个色块。你可以看到任何东西当你眯起眼睛的时候,即使你不知道它具体说的什么。

在我的屏幕上,只有头部和“EL evento”这两个部分是看得见的,它们给了网页一个水平方向。然而四个部分全在这个页面上,当你一次性看上去,绿色分割点会给作品一个垂直方向。呃,当然,你会看到整个页面从水平方向转变成垂直方向。我想知道如果两个图形都在上方而不是在对立的两端是不是会更好。在第一个图形,摄像头右侧一点,就是我眼睛看到的地方。没有更好的将视线引导到正文板块。在底部的图片中,女士的伞朝右侧打,人却往左侧走,这就是我视线的趋向。如果这两张图片能互相配合好,就能将视线引导到正文上而不是远离它。

 

斯坦福艺术

这张斯坦福艺术的主页是视觉重量最重的网页,它有一张大图在首屏,并且有本质的兴趣。它也位于网页的顶部,它几乎占了我的整个屏幕。

这个网页的图片轮播在顶部,并且它随时间的变化而变化。你可能不会看到特定的一张照片,当你进入这个网页的时候。正因为如此。你评估它的视觉重量可能和我在这评估的不一样。三角形的照片可能是视觉重量第二重的了。之后就是大红色块的页眉和页脚了。

当我进行斜眼测试的时候,所有元素可见的时间比我预想的要长。这些元素很好的处理了光影效果,让他们脱颖而出。最后,剩下的就是一些图片了,虽然没有全部的细节。我只能认出顶部的大图,却看不清下面三角的图片。

这个网页的视觉方向也很有意思。以对角线方向为主导,大多数网页都不会用对角线作为主导视觉方向,它抓捕了更多的吸引力。它们颠覆了你的期望。

我截取下来的这个网页有特殊的大图并提供了一些对角线元素。尽管也有一些曲线。

在最右边的图片的女人和中心图片的摄影师给了一个向右的视觉方向。也可以把女人的面部转向内部,将摄像机转向左边。

诚然,当你鼠标悬停在图片上的时候它可能会发生改变。尽管如此,图像往往会导致向外而不是向内。

总结

视觉重量是元素对眼睛的吸引力的衡量。视觉元素越重越吸引眼球。视觉方向是施加在元素上的一种方向的感知力。方向是一个浏览者观看的提示。有很多本质特点可以被修改,从而调整视觉重量,使其变得更重或更轻。同样也有一些可以建立视觉方向。

在本系列的剩下部分,我们可以看到视觉重量和视觉方向是如何引导设计原则,比如主导地位和结构层次,流量和节奏。最终使作品变得平衡。

更新:2015-02-09

收藏

123人已收藏

KileanChen

有想法不甘现状的美工

  • 5

    作品

  • 24

    粉丝

  • 10

    关注

  • 那可真蠢系列之蜀国势力!
  • 城市地标设计
  • 信用卡支付表单的用户体验设计
  • 有用的设计  才是好设计

    猜你喜欢

      2015-02-09 自译外文 经验/观点 原作者: Steven Bradley 举报 28311 123 38 3

      设计准则:视觉的重量和方向

      0.0°

      你确定要举报设计准则:视觉的重量和方向

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2015年02月09日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      38
      123
      3

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录