-
今天为大家介绍一下视觉的设计原理和方向权重，教程很不错，推荐，喜欢的朋友赶快学习吧！
网络上的每一个元素都创造了吸引观众注意力的视觉力量，视觉力量越大，观众的注意力也就越大，这些力量似乎同时作用于其他视觉元素，传达他们潜在的运动和视觉方向，并暗示你接下来应该看到什么。
我们称这种力量为视觉重量，它在视觉的方向上所受的力称为视觉方向，如果你想创造一种层次感、流畅性、节奏感、节奏感和平衡感，这两个概念是可以理解的。
视觉重量
物理量是通过测量重力（重力）应用于对象，但二维物体，如元素的网页，没有质量，所以没有身体的重量。视觉重量是吸引眼球的一个元素的力量。二维物体吸引注意力，而更多关注元素吸引，较重的视觉重量。
在本系列的前一篇文章中，我说元素的原始特征是元素的固有特征，例如大小、颜色和形状。
例如，将一个非常大的元素与另一个非常小的元素进行比较，它可以清楚地显示元素之间的差异。
控制这些元素的特征的组合，你可以控制网页的视觉重量。例如，红色比蓝色更有吸引力，较大的元素比小的更吸引人。因此，大红色物体的视觉重量比小尺寸蓝色物体的视觉重量要重得多。
这些固有特征的总和或元素的基本特征可确定一个元素的视觉重量。没有他们，但他们的组合确定一个元素的视觉重量。结合一些基本特征吸引了比别人更多的关注。因此，为了创造不同的视觉重量，你应该使用结合不同的特征。
如何测量视觉质量
据我所知，没有精确的方法来衡量设计元素的视觉重量。用你自己的经验和判断来确定哪个元素在视觉上是重的。发挥你的眼睛的作用并相信它。这个区域最吸引人的地方是最重的视觉重量。学会相信你的眼睛。
这并不意味着你必须试着看看哪些元素对你的眼睛最有吸引力。例如，你可以把每一个特征分开，这样就知道大的元素比小的元素有更重的视觉重量。你的眼睛会帮助你结合这些特征。
幸运的是，有人已经分离并测试了这些特性。
让我们从前面提到的一些基本特征开始：尺寸、颜色、颜色值、位置、纹理、形状和方向。
大小
大尺寸元件的视觉重量比小部件重。
颜色
暖色更倾向于前景，通常更为突出，而暖色则比冷色更重，冷色调在背景中消失，红色被认为是最重的颜色，黄色是最浅的颜色。
颜色值
暗元素的视觉重量比浅色元素轻。
位置
在作品中，较高位置的元素通常比底层元素更重要，在作品中，中心区域或重要区域中元素的视觉权重较重，前景中的元素比背景中元素的视觉权重重。
纹理
具有纹理叠加的元素比没有纹理的元素重，纹理赋予物体立体效果，赋予物体质量和视觉重量。
形状
一个规则物体比一个不规则物体重，因为一个不规则物体作为一个规则物体被截掉一部分。
方向
垂直方向的物体重于水平物体，但最重的视觉重量是倾斜的物体。
事实上，你不必限制自己的这些基本功能，你也可以使用额外的功能来控制视觉的重量。
密度
将更多的元素填充到空间中，以增加空间的视觉重量。观众会感觉到一个大的、更暗（更复杂）的元素组合，而不是一个小的、更轻（更简单）的元素。
消息
纯白色的空间似乎没有视觉上的重量，因为它是在空间中。任何物体在空白似乎更重，原因是周围的空间被它包围。
内部的利益点
有些东西比其他东西更有趣，更复杂的元素更有趣，能吸引更多眼球，你自己的兴趣也起作用。如果你喜欢汽车而不喜欢汽车，那么汽车的图片会比飞机的照片更能吸引你的注意。
深度
景深越大，聚焦元素的视觉权重越大，这可能是焦点和非焦点区域之间的对比。
饱和
高饱和度的颜色比饱和度低的颜色重。
感性的物理重量
我们都知道房子的重量比一双鞋重！房子的图片的视觉重量比印刷的鞋子的照片重，因为我们觉得房子更重。
在以前的系列中，我提到，对比的元素将更具吸引力。换句话说，是相对于周围环境的元素会比周围环境更重。例如，在一个网页的圆形元素的视觉重量较重的元素的一个矩形，因为在网页大多数元素都是矩形。
并不是所有的特点导致相同的视觉重量，大多数人可能会注意到颜色而不是形状第一。这表明对色彩的视觉重量较重。你还必须考虑他们的独特性，因为对比的元素比对照重。你工作的具体情况确定的地方作比较，哪些地方不。
记住，视觉的重量是这些属性的总和。虽然大的元素比小的元素重，但一个小的黑色圆圈被许多白色的空间包围，在页面的顶部，它比页面底部的一个大的、不规则的冷色物体更重。
视觉重量与格式塔原理
下面的系列指出了格式塔原则对设计原则的贡献。
图形背景
视觉权重可以通过赋予图形更多的权重来区分背景和图形元素。
距离
元素之间的空间导致不同数量的局部空白和对象内部空间的不同密度。
相似性和对比
你可以用视觉重量来表达它们。对比的元素会带来巨大的对比度和视觉重量。相似的元素自然会显示相似之处。
焦点（系列中的下一个主题）
点元素是一个焦点，特别吸引人，它的视觉权重比其他元素更重。
过去的经历
访问者过去的经历会影响到他们当前网页中最吸引眼球的元素。
视觉方向
如果视觉的重量是吸引眼球到特定的位置，那么视觉的方向是引导眼球到下一个位置。视觉方向是视觉力量的感知。如果元素移动，考虑你期望的元素的方向。视觉方向和视觉重量有相似的功能。视觉的重量是让你注意到工作的一部分。它兴奋地对你说：嘿，看着我！和视觉的方向是对你说，嘿，看那边！
当然，您也可以通过修改元素的特性来改变视觉方向，尽管它的元素特性远远小于视觉权重。
元素的形状
一个元素的形状可以创建一个坐标轴，而轴提供一个可视的方向。
元素的位置
视觉重量是一种拒绝和吸引周围元素的力量，这种力量将它们联系在一起。
具体内容
一只箭，一只手的方向，或者一只眼睛的注视都暗示着一个特定的方向。
元运动
有了你的设计，元素就可以真正地移动，并且它朝着一个方向运动。
结构骨架
每个元素都有一个沿不同轴自然移动的骨架结构，这里可能有更多的解释。
结构骨架
在Rudolf Arnheim的书《艺术与视知觉即使没有在这画布上的任何元素，我们的眼睛将画布的一些特定部位所吸引，就像在图片下方的结构网格的力量。
矩形的帆布，帆布的四角中心就像磁铁一样，吸引我们的眼球。最强的磁场在画布的中心，它虽然不是画面的几何中心。相反，这种吸引眼球的中心是光学中心，这是几何中心上方。
轴线从中心通过中心轴线的交叉点和四个角来吸引注意力。这些交叉点将水平线和垂直线连接起来，形成一个引人注目的坐标轴。
我们要谈论的这一系列关于创造的流回来讨论的结构网络。现在，一个缺乏视觉设计将被吸引到Arne Heim结构网络的中心看下沿不同轴位观众。
所以你可以使用这个结构网络来放置元素并调整它们的位置，它们自然会吸引眼球，吸引的空间也会增加。
视觉指向与格式塔
你可以想象一个元素与一个不同的但相互关联的元素的方向，有一条真的或假想的线。
统一的连接
这条线的元素是定向的，眼睛在元素注视的地方放置一条线。
连续
这个原理是关于元素是以直线或曲线排列的，就像它们沿着曲线或直线运动一样。
共同的命运
元素在一个方向上运动和呈现，似乎有着共同的命运。
。并行
为了使元素看起来平行，必须建立它们的内轴线（同一方向的指导）。
工作的总体方向
视觉方向的另一个概念是，每一个作品都有一个主导方向，无论是垂直线、水平线还是对角线。
水平方向将使工作有一种平静和稳定的感觉。
垂直方向将显示危险、形式和平衡的工作。
对角线方向表示位移和运动。
作品的主导方向是由多数要素或若干要素决定的。这个方向将有助于营造一种普遍的气氛。的整体氛围的建立是由不同的线型决定。
在工作中不可能有前导方向，垂直线和水平线的数目相等，例如，在这种情况下，观众可以决定哪个方向是主导方向。
实例
在接下来的几个例子中，我对网页进行了一些截图，我将与大家分享我的想法和我所看到的视觉权重。当然，你看到的可能和我不一样。这很正常。
不同的眼睛会被不同的事物吸引，我也知道没有明确的方法来衡量一个元素的视觉重量，而且，两个人可以很容易地看到不同的工作领域，因为他们的兴趣是不同的，这一点是主观的。
这是一个非常简单的方法来测试元素的视觉重量，看哪个元素将消失从斜视或斜视，与那些光相比，仍有较重的元素。
信息局
我的浏览器拦截信息办公室的网页宽度为1280像素，如果没有，设计可能会崩溃。
这个信息办公室页面上的文章几乎显示了所有的文字，很明显，标题的视觉权重是最重的。第二个是文章，因为它周围有很多空白。这可以说是访问者应该看到的网页中最重要的信息，所以它的视觉权重更大。
与周围的文字相比，这个链接也有一些视觉上的重量，尽管在我看来，冷色降低了一些重量。
最小的视觉权重是右边栏的文本，这不是不合理的，因为重点应该放在文章上，而不是边栏上。
请注意右边右边的小红点。这个链接在网站的首页上，虽然它很小，但是红色给它一些额外的视觉权重，帮助它从其他元素中脱颖而出。当你看这一页的时候，一切都非常大，所以红色在这个地方就不那么小了。
当你看到这个页面，斜眼试验，在右侧边栏的消失，留下的是一个大标题和标题下面的一段文字。
这项工作的视觉方向是垂直方向的，因为网页被分成两个垂直的列。背景色创建一条垂直线，引导你向下并给工作垂直的视觉方向。
数字媒体制作
当装上数字媒体的主页，丰富的色彩和恰到好处的动画，他们都吸引了大量的关注。即使你不看动画，你会觉得这个元素有很重的视觉重量，因为它有一个非常高的饱和的粉红色，黄色和蓝色。这些元素同时占据同一空间，并创建一个空白的背景一个密集的地区。
文章仍在出版和写作之间，数字媒体网站的创建已经关闭。如果你想知道为什么，只要看看下面的主页。
对我来说，第二种视觉权重是下面的三个图形按钮。它们看起来很黑，又大又复杂。它们把你拉到三个部分，然后看下一个最突出的元素，即每个部分的标题。主标题在网页上显得黑暗而庞大，与下面的文本形成直接对比。其他项目对我来说是令人眼花缭乱的，这是因为它们的视觉权重很重（即公司的名字在头上，而LO和按钮在下面）。
对于斜视，测试页彩色齿轮，文本和图形按钮仍然很重，其他的元素都消失了。主标题是模糊的我，即使我能看到它。我在左下角也看到了罗，即使它模糊的图形按钮的速度比。
嗯，我觉得他的视觉方向是水平方向。其主标题和导航都在一个水平线。另一个突出的因素，突出的文字也在水平方向上。三个齿轮可以看作是三个独立的三角形，虽然它有点弯曲的形状，所以它的对角线他们是不长，在页面中的对角线方向的唯一要素
哈维尔马尔塔
三个元素与马尔塔主页视觉权重的比较，图像、菜单栏和菜单栏顶部的绿色分区都吸引了人们的注意。
绘图
这些图形颜色大，颜色深，周围环绕着白色的空间，每个图形都有自己的本质意义。
绿色的分割点
它们更大，有颜色，像一个图形，它们被白色的空间包围着。
菜单栏
与前面的元素一样，菜单栏很大，颜色深，白色空间包围。
对我来说，网站的浏览量与它旁边的菜单栏相比也有一些视觉上的权重，虽然它不像菜单栏那么显眼，但是它比文本板还要重，也许你会反对我，但是没关系。
菜单栏和LO斜眼测试在一起，绿色的分割点和图形元素仍然很明显，板看起来像一个整体的颜色。你可以看到当你眯起眼睛，即使你不知道它说什么。
在我的屏幕上，只有两部分的头和El来是可见的，他们给这个网络水平方向。四部分，然而，就是在这个网页，当你看一次，绿色的分割点，会给工作，垂直方向。当然，你会看到变化的水平到垂直方向整个网页。我不知道如果两个人以上而不是相反的两端会更好。在第一个图中，在相机的右侧有一点就是我看到它。它没有更好的引导视线线路板中的文本，图片底部，夫人的伞是在右边，但男子走到左边。这是我视线的趋势，如果这两张照片能很好地匹配，你可以把视线引导到文本上，而不是避开它。
斯坦福艺术
这是斯坦福艺术首页第一屏上一个大的图片最直观的加权网页和具有重要的利益。它座落在网页顶部，几乎占了我所有的屏幕。
注：本页图片轮播的顶部，它是随时间变化而变化的。你可能看不到一个特定的画面时，你进入的网页。只是因为这u3002your评估其视觉质量可能不一样，我在这一评估。一个三角形的图片可能是视觉重量第二重量。然后头和大红色块页脚。
当我斜视测试时，所有的元素都比我想象的要长，这些元素很好地处理光和影的效果，使它们显得突出。最后，剩下的是一些图片，虽然没有完整的细节。我只能认出上面的大图片，但是我看不到下面三角形的图片。
这个网页的视觉方向也很有趣，在对角线方向，大多数页面不使用对角线作为主要的视觉方向，吸引更多的吸引力，它们颠覆了你的期望。
我截取的网页有一个特殊的大图片，并提供了一些对角线元素。
图片右边的女人和中间图片的摄影师给你一个正确的视觉方向，你也可以把女人的脸转向里面，然后把相机转到左边。
事实上，当鼠标悬停在图片上时，它可能会发生变化。
总结
元素的视觉重量是衡量元素吸引观众眼球的尺度，元素视觉权重越重，观众的眼睛越吸引人。
视觉方向是指对一个元素施加的方向的感知，其方向是指示观察者眼球运动的方向。
许多固有的特性可以被修改，以使元素的视觉重量变得更重或更轻，还有一些可视的方向可以设置。
在本文的其余部分，我们将看到视觉重量和视觉方向如何指导设计原则，如优势地位和结构层次，流动和节奏，以平衡工作。
以上是视觉权重和方向的设计原理课程，课程很好，值得学习，推荐给喜欢的朋友，一起学习吧！