web页面上的每个元素产生一种视觉力量,吸引了观众的眼睛。 力就越大,眼睛是吸引了。 这些力量似乎也作用于其他元素,传授他们潜在的运动和视觉方向建议,你应该下一个。
我们把这个力称为视觉重量和视觉感知方向的部队视觉方向。 两者都是重要的概念来理解,如果你想创建层次结构,流程,节奏和平衡你的作文。
请注意:这是第四个帖子在一系列设计原则。 你可以在这里找到本系列的前三个帖子:
视觉重量
身体重量的测量重力对物体施加的力,但是二维对象(比如web页面上的元素)没有质量和,因此,没有任何身体的重量。 视觉重量的力量,一个元素产生吸引。 二维对象可以吸引注意力。 越一个元素吸引眼睛,它的视觉重量。
在本系列之前的文章我谈到原始特性,或一个元素的内在特征,如大小,颜色和形状。 在那篇文章我提到,通过这些特性,您可以显示对比度和元素之间的相似度。
例如,对比元素通过一个非常大的,另一个很小的很清楚,这些元素是不同的。
控制这些特性的组合是如何控制视觉重量。 红色往往吸引更多比蓝色的眼睛,和更大的元素吸引眼睛小的多。 一个大红色的对象带来更多的视觉重量比小蓝对象。
这些特征的总和或原始特性决定元素的视觉重量。 这不是任何一个特征,而是他们的组合决定了视觉重量的一个元素。 一些组合的特性将吸引眼睛比其他人更。 创建元素不同的视觉重量,你会使用不同的原始特性的组合。
你如何衡量视觉重量?
没有办法我知道精确测量的视觉重量的设计元素。 你用你的经验和判断来确定哪些元素已经或多或少的体重。 开发一个眼睛,然后信任它。 领域的一篇作文,吸引你的眼睛是那些有更大的视觉重量。 学会信任你的眼睛。
这并不意味着你必须随机尝试,看看最吸引你的眼睛和最少的。 您可以将每个特征知道一些更大的重量超过一些规模较小、为例。 组合的特性,你的眼睛会有所帮助。
幸运的是,其他人孤立和测试这些特征。 下面是一些你可以改变任何元素的特征,描述如何改变它们要么增加或减少元素的视觉重量。
让我们先从原始特征,我在过去的文章中提到过:尺寸、颜色、价值、位置、纹理、形状和方向。
- 大小
大元素视觉重量比小的元素。 - 颜色
暖色推进到前台,往往重量超过冷色,而失势。 红色被认为是最重的颜色和黄色的最轻。 - 价值
黑暗元素有更多的视觉重量比光元素。 - 位置
元素位于高成分被认为重量超过低位于组成元素。 进一步的中心或占主导地位的区域组成,视觉重量一个元素将越大。 前景中的元素比元素的背景更有分量。 - 纹理
纹理元素出现比non-textured重对象。 结构使一个元素显得立体,这使的外观质量和身体的重量。 - 形状
对象与常规的形状出现重对象形状不规则。 质量的违规给人的印象已被删除从一个常规的形状。 - 取向
垂直的物体看起来比卧式重对象。 对角元素最分量。
你不需要限制自己上面的原始特性。 您可以使用额外的特性来控制视觉重量。
- 密度
包装更多的元素到一个给定的空间增加了空间的视觉重量。 观众会认为一个更大的或深色的组合元素而不是几个更小、更轻的元素。 - 当地的空白
白色空间似乎没有视觉重量,因为它是看作是空的。 任何对象放置在空间会显得更重,因为它周围的空间。 - 内在的兴趣
有些事情是比其他人更有趣。 更复杂的或复杂的一个元素,更多的兴趣将和它将吸引眼球。 自己的利益也扮演了一定的角色。 如果你汽车比飞机更感兴趣,一辆车的形象就会抓住你的注意力超过一个图像的一个平面。 - 深度
一个更大的景深给一个元素焦点视觉重量增加,可能由于对比焦点和无重点区域。 - 饱和
饱和的颜色似乎比不饱和的颜色重。 - 感知到的身体重量
我们知道,重量超过一只鞋。 房子的图像视觉重量会比一个鞋的图片,因为我们预计众议院权衡更多。
在本系列前面的文章中关于对比和相似性,我提到对比的注意力吸引到一个元素上。 换句话说,一个元素,与周围环境会出现视觉上比它重环境。 例如,网页上比矩形圈通常出现重,因为大多数网站元素是矩形。
并不是所有的特征同样有助于视觉重量。 大多数人会发现前一个元素的颜色形状,这表明颜色对视觉重量。 您还必须考虑给定的独特成分,因为对比元素显得沉重比他们对比的元素。 你的作文的细节将决定什么对比,什么没有。
记住,视觉重量是上述属性的组合。 虽然大携带更多的视觉重量比小,黑暗的小圆圈周围大量的空白,和位于页面的顶部可能出现重量超过一个更大的但形状不规则的物体的一个很酷的浅色在页面的底部。
视觉重量和完形
本系列文章背后的一个理念是指出多少完形原则为设计原则。
- 图形-背景
视觉重量可以用来分离的两个图的重量比背景。 - 接近
元素之间的空间会导致当地不同数量的空白和不同密度的空间内的对象。 - 相似性和对比
您可以使用视觉重量信号。 对比将会导致更大的视觉重量对比的元素。 元素与视觉重量自然会表现出相似性。 - 焦点(本系列的下一个主题)
分作文吸引力的焦点,他们携带更多的视觉重量比其他元素。 - 过去的经验
观众的经验将有助于他们认为一个元素拥有多少内在的兴趣。
视觉方向
如果视觉重量大约是吸引到一个特定的位置,然后眼睛视觉方向是关于领导到下一个位置。 视觉方向是视觉感知方向的力量。 认为它是你所期望的方向移动一个元素是否在运动。
视觉方向提供类似功能的视觉重量,它想让你注意的某些部分组成。 而视觉重量是喊着“看看我! “视觉方向说:“看那边!”
与视觉重量,您可以修改一个元素的特点提出不同的方向,虽然特征可供你使用少于体重。
- 元素的形状
一个元素的形状可能会创建一个轴,这个轴可以指明了方向。 主要轴通常是视为一个元素的视觉方向平行。 - 元素的位置
视觉重量似乎是一种力量,可以吸引还是排斥一个相邻的元素。 这个力的方向将连接这两个元素。 - 主题元素的
箭,一个手指,或眼睛的凝视所有建议在一个特定的方向。 - 运动
一个元素可以穿过你的设计,和它的运动方向。 - 结构框架
每一个成分都有一个结构框架,力量自然运行,通过不同的轴。 这可能需要一个解释。
结构骨架
在他的书中艺术和视觉感知:心理学的创造性的眼睛,鲁道夫Arnheim提出了结构骨架每个帆布的背后的想法。
这个想法是,每一个画布有结构性的力量贯穿网络。 即使没有在画布元素,我们的眼睛将会吸引到画布的某些部分,因为这个网络的力量在下图中看到。
矩形的中心和四个角落帆布像磁铁。 最强的磁铁是中心,虽然不是画布的几何中心。 相反,中心吸引眼睛光学中心,它位于上方的真实几何中心。
对角轴运行,点沿着这些轴中心和角之间,中途也能吸引注意力的。 这些中途点,然后,与垂直和水平线,创建额外的轴的视觉力量。
我们将回到这个想法当我们对组合流本系列的文章。 认为,在缺乏设计,将吸引观众的眼睛在Arnheim某些点的结构骨架,和眼睛将从点对点的方向不同的轴。
可以利用结构网络通过将元素,他们自然会吸引眼球,从而增加他们的吸引力。
视觉方向和完形
你能想到的方向真实或假想的线从一个元素到另一个点或连接不同的元素。 不需要行可见。
- 统一的连通性
线连接元素的方向发展。 眼睛凝视创建了一个假想线之间的眼睛和眼睛凝视。 - 延续
这一原则与元素沿直线排列或曲线,仿佛他们正朝着的方向行或曲线。 - 共同的命运
元素视为有一个共同的命运是那些移动或将出现在同一个方向。 - 并行性
为了让元素被视为平行,其内部轴(相同的那些传授方向)必须建立。
一篇作文的总体方向
视觉方向的一个概念是每个成分将被视为有一个主导方向,水平、垂直或对角。
- 水平方向使构图显得平静和稳定。
- 垂直方向增加一种礼节,警觉性和平衡。
- 对角线方向表明运动和行动。
将建立一个组合的主导方向的方向多数元素或者一些关键的元素。 将帮助设定一个方向一般心情根据一般归因于不同的意义类型的行。
一篇作文有可能没有主导方向。 水平和垂直的数量元素的数量可能是平等的,例如。 在这种情况下,观众可以决定哪个方向是主导。
例子
下面的例子,我抓起一些页面的截图,将分享一些想法如何分布在每一个我看到的视觉重量。 你可能会看到不同的,没关系。
不同的眼睛是不同的事物所吸引。 再次,我知道没有办法测量视觉重量多少元素。 除此之外,两人很容易看的一篇作文,因为不同区域的不同利益。 的主体性是可以预料的。
一个简单的方法来告诉哪些元素最重量是使用斜视测试。 闭上你的眼睛一个小到一些元素消失。 那些仍然有更多的视觉重量比那些消失。
局
注意:局被捕的截图我的浏览器设置比1280像素宽。 任何单个列的设计将会崩溃,而不是两个。
的文章从上面所示几乎所有的文本。 主标题携带最视觉重量。 这是最大的文本块,周围一些当地的空白。 可以说是最重要的信息,页面上的土地应该看到的人,因此,这是视觉上的意义。
链接获得一些重量通过他们与周围文本,虽然冷色减少获得在我看来。
元素最少的视觉重量正确的列中的文本。 这是有道理的,因为重点是最有可能要给这篇文章,而不是在侧边栏。
注意到小的红色文本在右列的顶部。 这是一个链接到网站的主页。 小,红色为文本提供了一些额外的体重,帮助它脱颖而出的其他文本列。 所有图像中出现较大的直接当你浏览这个网站,所以,小红文本并不像这里那么小。
应用斜视测试时,整个右栏消失,你上面剩下的主要标题下面的文章和一块大的文本。
组成的主要方向是垂直的,因为它的两个长列页面。 背景颜色的差异之间的列创建一个垂直线导致您的页面并添加成分的垂直方向。
创建数字媒体
当创建数字媒体的首页加载,丰富多彩的元素动画到位,要求大量的关注。 即使你错过了动画,你可能认为这些元素携带最重量,由于饱和粉红色,黄色和蓝色。 这些元素也占据同一个空间,创建一个密集的区域在中间的空的空间。
注意:这篇文章的写作和出版之间创建数字媒体已经关闭了大门。 访问其主页如果你想知道为什么。
底部的图形是另一个很重要对我来说。 他们黑暗,大型和复杂的形状。 他们把你的三个部分,其中包含下一个最直观地突出的元素,章节标题。
主标题在页面上又大又黑,直接它下面的文本进行比较。 其他项目,突出对我来说,由于其较高的视觉重量,公司的名字是顶部和底部的标志。
斜视测试,颜色形状和文本和图形后底部保持大部分的元素已经消失了。 主标题消失对我来说,虽然我仍然可以告诉它的存在。 我也有些注意左下角的标志,尽管它褪色的速度远远超过它附近的图形。
在这里,我认为主要的方向是水平的。 一样的运行水平,主标题和导航。 另一个在视觉上比较突出的元素,突出显示的文本,也是水平。
三个齿轮可以被视为一个三角,尽管弯曲,形状,从而建立对角线方向。 他们不跑长,虽然,他们唯一的页面上的对角线。
哈维尔·玛尔塔
三个元素是视觉上最有力竞争哈维尔·玛尔塔的主页。 图形学中,绿色部分之间的分隔符,和顶部的菜单项都呼吁关注。
- 图形
这些都是大,黑暗和周围的空白。 每个图形本质上拥有自己的兴趣。 - 绿色的分隔符
这些颜色,更大,如图形,四周都是空白 - 菜单项
这些都是黑暗的,大,再次包围空白。
哈维尔的标志带少一点视觉重量比它周围的菜单项,虽然它仍然是非常突出的。 它比文字更有分量,但不是我心目中的菜单项。 你可能不同意。
斜视测试使菜单项和标志融合成一个单一的单位。 图形和分隔符还是视觉上突出,仍可见大量的文本。 你仍能看到一切眯着眼看,即使你看不出任何它说什么。
在我的屏幕上,只有头和“El evento”部分是可见的,给予一个水平方向的页面。 然而,总共四个部分。 当部分认为,绿色的对齐分隔符给出了组成一个垂直的方向。 当然,看到整个页面一次改变画布从水平到垂直。
我不知道上面的截图所示的两个图形会被更好的两边。 在顶部的图形,相机点吧,这是我的眼睛。 将更好地指导文本。
在底部图形,女人的伞点是否正确,但是她走了,然后就是我倾向于看。 两种图形效果可能更好,如果他们的领导方向回文本,而不是远离它。
斯坦福大学艺术
图像的顶部斯坦福大学艺术的主页最视觉分量。 最大的页面上的元素,作为一个图像,有很多内在的兴趣。 这也是位于顶部的成分。 事实上,它占用了我大部分的屏幕。
注意:这个网站旋转图像在页面的顶部,和旋转随时间变化的图像。 你可能不会看到这个特殊的图像,如果你访问的网站,因此,你可能会评估视觉重量的设计不同于我在这里做的。
我认为对角三角形图片容器是下一个重要元素。 后的大红色块的页眉和页脚。
当我执行斜视测试中,所有的元素是可见的超过我的预期。 的元素都有大量的光明与黑暗的对比,这有助于他们脱颖而出。
最终,唯一的东西,都是图片,虽然在不到完整的细节。 我可以让顶部的大型图像但只有三角形图片的形状。
因其视觉导向设计也是有趣的。 对角线主导,因为大部分网页都不是由对角线方向,他们这里的捕获更多的关注。 他们颠覆你的期望。
捕获的特别的照片,我在上面的截图中还提供了一种斜,虽然有点弯曲的部分地区,由一个移动的人。
两个女人(最右边的三角形象)和摄影师(在中心三角)导致正确的方向。 可能是更好地扭转女人面对内心,向左移动相机块点内向,。
当然,图片改变当你悬停在任何链接的街区。 不过,图片往往导致向外,而不是内心。
总结
一个元素的视觉重量是多少元素吸引观众的眼睛。 一个视觉重元素将吸引眼球。
视觉方向产生的力量作用于方向和元素。 方向是观众的眼睛移动的提示。
许多内在特性可以修改元素视觉重要或更轻。 一些可以用来建立一个元素的视觉方向,可以帆布本身。
在剩下的本系列文章中,我们将看到如何视觉重量和视觉方向导致原则主导地位和层次结构,流动和节奏,最终,成分的平衡。
