UI设计之规划准则:视觉分量与方向-UI设计 PS-优质IT资源分享社区

admin
管理员
管理员
  • UID1
  • 粉丝27
  • 关注4
  • 发帖数581
  • 社区居民
  • 忠实会员
  • 原创写手
阅读:145回复:0

  UI设计之规划准则:视觉分量与方向

楼主#
更多 发布于:2016-06-03 23:30

 页面上的每个元素都会经过体现本身的视觉力气招引观者的眼球。而这种力气越大,招引力也就越强。这些力气一同也能作用于别的元素,然后构成一种潜在的视觉运动方向,引导观者的阅览。

咱们把这种力气叫“视觉分量”,把咱们所感知到的视觉力气方向,叫做视觉方向。了解这两个概念对于著作中层级、流程、节奏和平衡的创造具有首要的意义。

注:这篇文章是规划准则系列文章第四篇。本系列前三篇为:

1.   规划准则:视觉感知力及彻底形状准则

2.   规划准则:空间与图形布景联络

3.   规划准则:经过比照与相似联络或别离元素

视觉分量

物理学的分量是对地心引力施加于物体上的力的衡量,可是二维的物体(例如页面上的元素)没有质量,所以也就没有物理领域的分量可言。视觉分量是对元素招引人眼球力气的衡量。二维的物体都能够招引人的留意力。一个元素招引力越强,其视觉分量也就越大。

在本系列的上一篇文章中,我谈到了元素的初始特性或许叫固有特征,例如其尺度、色彩和形状等等。在文中,我还说到了怎么经过这些特性来体现纷歧样元素之间的比照与相似。

举例来说,两个元素一个很大一个很小就能构成明显的比照。

而经过组合这些纷歧样的特性,咱们就能够控制视觉分量。赤色比蓝色愈加招引人,大的元素比小的元素愈加招引人,所以说,一个大的赤色物体所具有的视觉分量就要大于小的蓝色物体。

那么这些特征或许说初始特性的调集,就决议了元素的视觉分量凹凸。要着重的是,决议元素视觉分量的不是单个特性,而是多个特性的组合。但纷歧样的特性组合招引人的力度也有纷歧样。要创造具有纷歧样视觉分量的元素,就需要联系纷歧样的初始特性。

怎么衡量视觉分量?

据我所知,准确衡量规划元素视觉分量的办法是不存在的。但你能够凭仗经历和判别力来分辩哪些元素分量大,哪些分量小。所以你要培育并信任自个的眼力。一幅著作中最招引眼球的区域即是视觉分量比照高的区域。仍是那句话,要信任自个的眼力。

但这并不是说你能够随意乱试然后用双眼判别啥招引力最强啥招引力不够强。举个例,你能够经过把每个纷歧样特征别脱离来判别出比照大的东西分量要大于比照小的东西。与此一同,你的眼力能够协助你区别纷歧样特性组合的视觉分量。

不过好在已经有高人把各种纷歧样的特征进行了别离和测验。下面是几个元素特征以及其增减对视觉分量的影响阐明。

首先咱们来看上一篇文章中提到过的几个初始特性:巨细、色彩、色值、方位、原料、形状及朝向。

巨细

比照大的元素比照小元素的视觉分量要高。

色彩

暖色能够比照好的融入远景,比冷色分量高。冷色更倾向于融入布景。赤色是通常以为是分量最大的色彩,黄色则为最轻。

色值

较暗的元素视觉分量较高。

方位

在著作中所处方位较高的元素分量要大于所处方位较低的元素。间隔著作基地或基地区域越远,元素的视觉分量也就越高。远景中的元素所具有的分量要高于布景元素。

原料

有原料的元素分量大于无原料物体。原料能让元素更具三维感,然后更体现出必定的质量和物理分量感。

形状

形状规矩的物体比不规矩的物体分量较高。不规矩形状会让人发生其质量被从规矩形状中抽离的感受。

朝向

笔直的物体分量高于水平物体。呈对角线放置的元素分量最高。

当然,你不必定要限制在上述的这些初始特性当中,大可经过别的的特征来掌控视觉分量。

密度

添加特定空间内元素的数量能够进步空间的视觉分量。在观看者眼里,高密度的区域会联系成为一个较大、较暗的组合元素,而不再是几个小的、淡色的元素。

有些留白

留白的空间呈现出空的状况,因而不具有任何视觉分量。因而,放置在留白空间中的物体就会在周边环境的烘托下显得更具分量。

内涵爱好点

纷歧样的物体风趣程度也不尽一样。元素越杂乱、越繁复会让人爱好越高,然后招引眼球的能力也就越强。在这一方面,自个的爱好点也体现着作用。比方说,你对轿车的爱好大于飞机,那么轿车的图像比照飞机就更能招引你的留意力。

深度

较高的景深度能够让坐落焦点的元素更具视觉分量,这一点有也许是焦点与非焦点区域之间的比照度造成的。

饱满度

饱满的色彩比不饱满色彩更重。

物理分量感受

咱们都知道房子的分量明显大于鞋子的分量。那么,一所房子的图像在视觉上也就天然比鞋子图像更重,由于咱们心里知道房子重。

在本系列上一篇有对于比照与相似的文章中,我提到了比照度能够进步元素的招引力。换句话说,一个与周边环境比照激烈的元素在视觉上就比环境元素的分量更高。举个例吧,在页面上,圆形通常比矩形看起来更重,由于大多数网站元素都是矩形的。

当然,并不是一切特征对视觉分量的影响程度都一样。大多数人对元素色彩的留意力要先于元素形状,这也就阐明色彩对视觉分量的奉献较大。一同你还要思考特定著作的独特性,由于构成比照的元素的分量要高于用来与之比照的元素。著作的独特性将决议哪些东西能够构成比照,哪些不能。

要紧记,视觉分量是上述各种特点的组合。所以,虽然大的物体视觉分量高于小的物体,但一个周边盘绕许多留白空间、放置在页面顶部的深色小圆形物体,其分量很也许会高于放置在页面底部、形状不规矩的浅冷色大物体。

视觉分量与彻底形状

本系列文章背面的一个首要意图即是指出彻底形状准则对规划准则的奉献度有多少。

图形-布景

经过进步图形相对布景的视觉分量,咱们能够将这两者进行别离。

附近

纷歧样元素之间的空间会构成纷歧样的有些留白空间量和纷歧样的空间内物体密度。

相似与比照

咱们能够从视觉分量的视点来对这两者别离进行界说。比照能够给构成比照的元素带来较高的视觉分量。而视觉分量差不多的元素则会天然地体现出相似性。

焦点(本系列下一篇的主题)

一幅著作中的招引点即是其焦点,而焦点天然比别的元素更具视觉分量。

过往经历

观看者的自个经历会作用于其脑中所以为一个元素所具有的内涵爱好点。

视觉方向

假如说视觉分量的用处是将人的眼光招引到特定的方位,那么视觉方向的意图即是将眼光引领到下一个方位。视觉方向即是指视觉力气的方向。你能够把它看作是你脑中幻想的某个元素下一步的运动方向。

在某种程度上说,视觉方向与视觉分量所起到的作用是相似的,它们都是为了把人的留意力招引到著作的特定有些。但它们的区别在于,视觉分量就像是在大声呼叫“看我!看我!”,而视觉方向则说的是“往这边看!”

和视觉分量一样,你能够经过修正元素的特征来体现出纷歧样的方向,不过在视觉方向这方面可操作的特征不如分量那么多。

元素形状

不管元素形状怎么,其本身中都会存在一个轴线,而这个轴线则是指明方向的要害。元素的主轴线通常会被视为与元素的视觉方向平行。

元素方位

视觉分量是一股能够招引或排挤附近元素的力气。而这股力气能够沿着衔接两个元素的方向 进行移动。

元素宗旨

箭头、手指或凝视的双眼都能够指示特定的方向。

运动

你能够让元素在规划中运动起来,而其运动也就指明了方向。

构造骨架

每个著作都有自个的骨架,骨架中存在沿着纷歧样轴线流通络绎的力气。这一点也许还需要进一步解说一下。

构造骨架

在Rudolf

Arnheim的书作《艺术与视觉感知:构思目光心理学》中,他提出了每幅著作背面都存在着一副骨架这一理念。

其观念在于,每幅著作中都蕴含着一套构造化的力气网。即使著作中没有任何元素,咱们的目光也会被招引到其间的某个有些,而因素就如下面这个力气网络图所示。

这个方形画布的基地和四个旮旯就好像磁铁一样招引人的目光。这儿边磁性最强的方位在基地点,但这儿说的并不是画布的几许基地,而是光学基地,其坐落实在几许基地的上方。

画布中的轴线从一个旮旯通往另一个旮旯,沿着轴线的点坐落基地和旮旯之间中心的方位,其一样能够招引人的留意力。假如将这些中心点用笔直及水平线连起来,就构成了有一套视觉力气轴线。

有对于这个理论,咱们比及系列文章中有关创造流程的一篇再细讲。如今,咱们能够思考,在尚未参加规划的状况下,观看者的目光会被招引到Arnheim构造骨架中的各个点,并跟从各个轴的方向从一个点移动到另一个点。

这样一来,咱们就能够依据这个构造网把元素放置到能够天然招引目光的方位,然后增强元素的招引力。

视觉方向与彻底形状

你能够把方向看作是实在的或许是幻想出来的从一个元素指向另一个元素,或许衔接纷歧样元素的线条。这些线条不必定要真的体现出来。

共同的连通性

衔接各个元素的线条都有方向。目光的聚集能够在双眼和其所重视的物体之间构成一条幻想的线条。

连续性

这一原理能够联络到沿直线或曲线摆放的元素上,就好像这些元素会沿着直线或曲线方向运动通常。

共同性

能够看作具有共同性的元素通常是指沿着或许在幻想中沿着同一方向运动的元素。

平行

为了让纷歧样元素看似平行,就必须建立其内涵的轴线(也即是构成方向的轴线)。

著作的全体方向

有关视觉方向还有一个概念:每幅著作都会存在一个首要的方向,可所以水平、笔直或许对角线。

1.   水平方向能够让著作愈加沉稳、冷静。

2.   笔直方向著作则能够带来谨慎、警醒和平衡感。

3.   对角线方向则能够体现出运动和动感。

经过大多数元素或许几个要害元素的方向能够建立起整幅著作的首要方向。依据纷歧样线条类型所具有的通常意义,方向有助于奠定著作的全体基调。

当然,一幅著作也有也许没有首要方向。比方说,水平缓笔直元素的数量有也许是一样的。在这种状况下,观看者就能够自个确定首要方向是啥。

示例

有关下面的示例,我截取了几个页面截图,并会和咱们分享一下我眼里这些著作的视觉分量散布状况。当然,你也也许会有纷歧样定见,

究竟纷歧样的人所重视的事物不尽一样。不过要再重申一遍,我自个彻底不知道有任何准确衡量元素视觉分量的办法。别的,两个爱好纷歧样的人看同一幅著作所重视的区域也彻底也许纷歧样。所以说存在必定主观性是必然的。

要判别哪些元素分量较高的一个简略办法即是运用眯眼测验法。详细办法即是,一点一点把双眼微闭起来,直到有些元素逐渐不见。那么剩余的元素比照不见的来说视觉分量就较高一些。

BUREAU

注:给Bureau截图的时分,我的阅读器设置宽度在1280像素以上。假如你的宽度低于1280,其规划就会折叠成单栏,而不是截图里显示的两栏。

上图所示的Bureau的文章根本全部是文字。其间主标题最具视觉分量。它是最大的一块文字,一同周边还有必定的有些留白空间。这个标题能够说是每个登入到页面上的人所应看到的最首要的信息,所以视觉分量高也理所当然。

图中的连接经过与周边文字构成比照也获得了必定的分量,不过我自个以为比照冷的色彩弱化了其分量。

视觉分量最低的元素当属右侧栏里的文字。思考到咱们的留意力也许首要应当集中到文章而不是侧边栏内,所以这一点也很合理。

别的,留意一下右侧栏内顶部小块赤色文字。它是网站主页的连接。虽然体型较小,但赤色也给其增添了必定的分量,使其能够和栏内别的文字区别开。假如你直接去看网站,那图像中所示的一切内容本来都不小,所以这一块赤色的文字也不会像截图中体现的这么小。

在这儿,假如你选用眯眼测验法,就会发现右边栏会全部不见,眼里只剩余文章上方的主标题以及下方的一大块文字。

这个著作内含两个从页面上到下的长栏,因而主方向为笔直。两栏布景色的纷歧样构成了一条笔直的线条,指引咱们向页面下方阅读,进而进一步增添了著作的笔直方向感。

CREATE DIGITAL MEDIA

Create Digital

Media的主页在加载时会有五颜六色的元素以动画作用跃入页面,进而为本身招引许多留意力。假如你错过了动画作用,这些元素饱满的粉色、黄色和蓝色也能体现出极大的视觉分量。别的,这些元素所占空间也一样,然后在空白空间的中心营建出了一片密度较高的区域。

注:Create Digital

Media在这篇文章撰写至宣布时期歇业。假如你想了解因素,请拜访其主页。

底部的图形就我自个来说是分量第二高的。这些图形呈黑色、体积较大且形状杂乱,它们能够将你的留意力别离拉到三个版块,其间每个板块都包括有视觉杰出性次强之的元素,也即是版块标题。

页面的主标题行比照其正下方的文字既大且黑。别的对我来说比照杰出的内容,从视觉分量的视点来说,应该是顶部的公司名称和底部的logo。

经过眯眼测验,在大多数元素不见后,还剩余五颜六色的形状和文字,以及底部的图形。眯眼后我看不到主标题,不过我还能感受到其方位。别的,左下角的logo虽然比其近旁的图形不见的早得多,但仍是特别引起了我的留意。

这幅著作的方向,我觉得是水平。页面上的线条都呈水平散布,主标题和导航栏也是如此。别的一个比照具有视觉杰出性的元素—高亮的文字,也是水平方向。

三个齿轮能够看作是一个合体的曲里拐弯的三角形,因而体现出了对角线的方向。不过这些齿轮散布不大,并且是页面中唯一的对角方向元素。

JAVIER MARTA

Javier

Marta主页上有三个元素竞赛视觉分量最高。图形、板块间的绿色阻隔栏以及页面顶部的菜单项都在争抢着人的留意。

图形

大型、深色,周围盘绕白色空间。每个图形本身都有自个的爱好点。

绿色阻隔栏

大型、有色彩,和图形一样周围盘绕白色空间。

菜单项

大型、深色,一样周围盘绕白色空间。

Javier的logo,就我自个而言,比照附近的菜单项来说视觉分量略轻,不过依然是比照显眼的。其分量要高于文字,但不如菜单项。不过你也能够有纷歧样定见。

经过眯眼测验,菜单项和logo会融组成一体。但图形和阻隔栏依然会比照显眼,文字也依然可见,不过成为了一块一块的。眯着眼的状况下仍是能够看见一切内容的,不过看不明白详细的字样。

在我的屏幕上,只要标题和“El

evento”有些能够看到,这样一来就建立了全部页面的水平方向。不过,全体四个板块依然保留在页面上。假如一眼扫过一切板块,绿色阻隔栏的对齐摆放会让整幅著作体现出笔直的方向。所以说,假如从全体视点看全部页面,其方向就会从水平成为笔直。

不知道截图里展现的两个图形假如放到相反的方向会不会好点。上面的图形里,相机是朝右的,所以我的目光也是向右看的。假如其能够把目光引导到文字上就非常好了。

下面的图像里,那位女士的雨伞倒是朝右的,不过她人却是向左走,所以我也会不自禁向左看。这两个图像假如能够把方向引导到文字上,而不是引脱离文字就非常好了。

STANFORD ARTS

Stanford

Arts主页顶部的图像具有最大的视觉分量。其本身是页面上最大的元素,并且作为一幅图像,也蕴含了不少的内涵爱好点。一同其还坐落著作的最顶部。实际上,光这个图像就占去了我屏幕上的大多数空间。

注:该网站页面顶部的图像会翻滚播映,且图像会隔一段时刻更新一次。所以你拜访网站时也许不必定能看到截图里的图像,那么你对规划中视觉分量的评价就会与我有所纷歧样。

下面,我以为放在方形框内的三角形图像的视觉分量为第二高。以后是构成标题和脚注的大型赤色板块。

我进行眯眼测验时,发现一切元素继续看到的时刻都比我预期的长。页面元素的明暗比照做的比照不错,所以有助于其杰出本身。

测验最后剩余的内容只要图像,并且比照含糊。我能看明白的是顶部的图像,至于下面的三角形图像就只剩余概括了。

其规划在视觉方向上的处理也很风趣。主导方向时对角,由于大多数页面都不选用对角方向,所以这一点比照招引人的留意。这个是比照推翻人预期的。

我截图里的那张照片,虽然有的有些比照曲折,并且取材自人流,但一样也体现出了必定的对角方向,

图像里的女士(最右侧三角形图像)和摄影师(中心的三角形图像)的方向都引向右侧。所以假如能将女士反过来脸朝内,相机放到左边的板块里也朝内,作用会非常好。

当然,这些图像会在你鼠标悬停到板块中恣意连接的时分切换,不过全体来说图像呈现出向外而不是向内的感受。

总结

元素的视觉分量是衡量其招引观众眼球的目标。视觉分量高的元素能够招引更多眼球。

而视觉方向则是指纷歧样元素所体现出的视觉力气作用于别的元素时人所感知的方向。这儿的方向是观者目光移动的提示引导。

经过修正许多内涵特征能够改动元素的视觉分量。其间甚至有些能够起到建立视觉方向的作用。

在本系列的剩余几篇文章中,咱们将一同来看视觉分量和方向是怎么引出支配、层级、流程和节奏以及著作平衡等规划原理的。

优质IT资源分享社区为你提供此文。

本站有大量优质UI设计(含PS,软件 网页 平面设计等)教程视频,资料等资源,包含UI设计基础教程,高级进阶教程等等,教程视频资源涵盖传智播客,极客学院,达内,北大青鸟,猎豹网校等等IT职业培训机构的培训教学视频,价值巨大。欢迎点击下方链接查看。

UI设计教程视频

优质IT资源分享社区(www.itziyuan.top)
一个免费,自由,开放,共享,平等,互助的优质IT资源分享网站。
专注免费分享各大IT培训机构最新培训教学视频,为你的IT学习助力!

!!!回帖受限制请看点击这里!!!
!!!资源失效请在此版块发帖说明!!!

[PS:按 CTRL+D收藏本站网址~]

——“优质IT资源分享社区”管理员专用签名~

本版相似帖子

游客