江门网站制作：设计原则之视觉重量和方向

网页上的每个元素都会产生吸引观众眼球的视觉力量。力越大，吸引的眼睛越多。这些力量似乎也会作用于其他元素，为其潜在的运动赋予视觉方向，并暗示您应该在哪里看下一步。

我们将这种力称为视觉重量，并将视觉力的感知方向称为视觉方向。如果您想在构图中创建层次结构，流程，节奏和平衡，这两个都是重要的概念。江门网站制作

视觉重量

物理重量是重力施加在物体上的力的量度，但是二维物体（例如网页上的元素）没有质量，因此没有任何物理重量。视觉重量是元素施加吸引眼睛的力的量度。二维物体可以引起注意。吸引眼球的元素越多，其视觉重量就越大。

如何通过这些功能展示元素之间的对比和相似性。

例如，通过使一个非常大而另一个非常小来对比元素，可以清楚地表明元素是不同的。

控制这些功能的组合是您如何控制视觉重量。红色比蓝色更容易吸引眼球，较大的元素比较小的元素吸引眼球。大的红色物体比小的蓝色物体承载更多的视觉重量。

这些特征或原始特征的总和决定了元素的视觉权重。它不是任何一个特征，而是它们的组合决定了元素的视觉重量。某些功能组合比其他组合更能吸引眼球。要创建不同视觉权重的元素，您可以使用原始要素的不同组合。

你如何测量视觉重量？

我无法精确测量设计元素的视觉重量。您可以根据自己的经验和判断来确定哪些元素具有更大或更小的权重。睁大眼睛，然后相信它。吸引眼球的成分区域是具有更大视觉重量的区域。学会相信你的眼睛。

这并不意味着你必须随意尝试，看看最吸引你的眼睛是什么。例如，您可以隔离每个特征，以便知道更大的东西比更小的东西更重。这是您的眼睛将帮助的功能组合。

幸运的是，其他人已经隔离并测试了这些特征。以下是您可以更改任何元素的一些特征，以及如何更改它们将增加或减少元素的视觉权重的描述。

让我们从上一篇文章中提到的原始特征开始：大小，颜色，值，位置，纹理，形状和方向。

• 尺寸
  大元素比小元素具有更多的视觉重量。

• 颜色
  暖色调进入前景，往往比冷色调更重，后退到背景中。红色被认为是最重的颜色，黄色是最轻的颜色。

• 价值
  暗元素比轻元素具有更多的视觉重量。

• 位置
  在组合物中较高位置的元素被认为比组合物中较低位置的元素重量更大。离组合物的中心或主要区域越远，元件将承载的视觉重量越大。前景中的元素比背景中的元素更重要。

• 纹理
  纹理元素看起来比非纹理对象重。纹理使元素看起来是三维的，这给出了质量和物理重量的外观。

• 形状
  具有规则形状的对象看起来比具有不规则形状的对象更重。不规则性给人的印象是质量已从常规形状中移除。

• 方向
  垂直对象看起来比水平对象重。对角线元素承载最重。

您不必将自己限制在上面的原始功能。您可以使用其他特征来控制视觉重量。

• 密度将
  更多元素打包到给定空间中会增加空间的视觉重量。观察者将感知更大或更暗的组合元素，而不是几个更小和更轻的元素。

• 局部白色空间
  白色空间似乎没有视觉重量，因为它被视为空白。放置在该空间内的任何物体由于其周围的空间而显得更重。

• 内在的兴趣
  有些事情比其他事情更有趣。元素越复杂或复杂，它就会越吸引人，它吸引眼球的次数就越多。你自己的利益也发挥了作用。如果你对汽车比对飞机更感兴趣，那么汽车的图像会比飞机的图像更吸引你的注意力。

• 深度
  较大的景深使焦点元素增加视觉重量，可能是由于焦点和未聚焦区域之间的对比。

• 饱和度
  饱和色显得比不饱和色更重。

• 感知到的体重
  我们知道房子的重量超过鞋子。房子的图像比鞋子的图像更重视，因为我们希望房子的重量更大。

在本系列关于对比度和相似度的上一篇文章中，我提到对比度会引起对元素的关注。换句话说，与周围环境形成对比的元素看起来比周围环境更重。例如，圆圈通常比网页上的矩形更重，因为大多数网站元素都是矩形的。

并非所有特征都同样对视觉重量有贡献。大多数人会在形状之前注意到元素的颜色，这表明颜色对视觉重量的贡献更大。您还必须考虑给定构图的唯一性，因为对比元素看起来比它们对比的元素更重要。你的作文的细节将决定什么是对比，什么不对。

请记住，视觉重量是上述属性的组合。虽然大的视觉重量比小的大，但是一个小的黑色圆圈被大量的白色空间所包围并且位于页面的顶部可能看起来比一个更大但不规则形状的物体更重，底部是浅色的冷色的页面。

视觉权重和格式塔

本系列背后的一个想法是指出格式塔原则有多少有助于设计原则。

• 图形 - 地面
  视觉权重可用于通过赋予图形比背景更多的权重来分离两者。

• 邻近
  元素之间的空间导致不同数量的局部空白空间和空间内物体的不同密度。

• 相似性和对比度
  您可以使用视觉重量来发出信号。对比度将在对比元素中产生更大的视觉重量。具有相似视觉权重的元素自然会表现出相似性

• 焦点（系列中的下一个主题）
  构图中的吸引点是焦点，它们比其他元素具有更多的视觉重量。

• 过去的经历
  观众的经历将有助于他们认为元素所具有的内在兴趣。

视觉方向

如果视觉重量是将眼睛吸引到特定位置，则视觉方向是将眼睛引导到下一个位置。视觉方向是视觉力的感知方向。可以把它想象成一个元素在运动时移动的方向。

视觉方向与视觉重量具有相似的功能，因为它试图让你注意到构图的某些部分。虽然视觉重量在喊“看着我！”，但视觉方向却在说“看那边！”

与视觉重量一样，您可以修改元素的特征以建议不同的方向，尽管您可以使用的特征比重量更少。

• 元素的形状
  的元素的形状可以通过它创建一个轴，该轴可以提出一个方向。主轴通常被视为与元素的视觉方向平行。

• 元素的位置
  视觉权重是一种可以吸引或排斥相邻元素的力量。该力将沿连接两个元素的方向移动。

• 元素
  的主题箭头，指向手指或眼睛的凝视都建议朝某个方向看。

• 运动
  一个元素可以从字面上移动你的设计，它的运动将有一个方向。

• 结构骨架
  每个构图都有一个结构骨架，其力量自然地沿着不同的轴线延伸。这可能需要更多解释。

结构骨架

在他的着作“ 艺术与视觉感知：创造性眼睛的心理学”中，鲁道夫·阿恩海姆提出了每个画布背后的结构骨架的想法。

这个想法是每个画布都有一个贯穿它的力量结构网络。即使画布内没有元素，我们的眼睛也会被绘制到画布的某些部分，因为下图中显示了这种力的网络。

长方形帆布的中心和四个角落就像磁铁一样。最强的磁铁位于中心，但不是帆布的几何中心。相反，吸引眼球的中心是光学中心，它位于真正的几何中心的正上方。

轴从一个角到另一个角，沿着这些轴的中心和角落之间的点也引起了注意。然后，这些中间点可以与垂直和水平线连接，从而产生额外的视觉力轴。

当我们进入关于成分流的系列文章中时，我们将回到这个想法。现在，考虑到在没有设计的情况下，观察者的眼睛将被吸引到阿恩海姆结构骨架中的某些点，并且眼睛将通过遵循不同轴的方向从一点移动到另一点。

您可以通过将元素放置在自然吸引眼睛的位置来利用结构网，从而增加其吸引力。

视觉方向和格式塔

您可以将方向视为从一个元素指向另一个元素或连接不同元素的实线或虚线。线条不需要是可见的。

• 均匀连通性
  连接元素的线条具有方向。眼睛凝视在眼睛和眼睛注视的任何东西之间产生一条想象线。

• 延续
  该原理涉及沿直线或曲线排列的元素，就好像它们沿着直线或曲线的方向移动一样。

• 常见的命运
  被视为具有共同命运的元素是那些移动或看起来朝着相同方向移动的元素。

• 平行性
  为了使元素看起来是平行的，必须建立它们的内轴（传递方向的相同轴）。

作文的总体方向

视觉方向的另一个概念是，每个构图都将被视为具有主导方向，无论是水平方向，垂直方向还是对角线方向。

• 水平方向使构图显得平静和稳定。

• 垂直方向增加了形式感，警觉性和平衡感。

• 对角线方向表示运动和动作。

组合的主导方向将由大多数元素的方向或可能的几个关键元素确定。该方向将根据归因于不同类型的线的一般含义帮助设定一般情绪。

组合物可能没有主导方向。例如，水平数和垂直元素数可以相等。在这种情况下，观众可以决定哪个方向占优势。

例子

对于以下示例，我已经抓住了一些页面的截图，并将分享一些关于如何在每个页面中分布视觉权重的想法。您可能会以不同的方式看到它，这没关系。

不同的眼睛被不同的东西所吸引。同样，我意识到无法测量元素承载的视觉重量。此外，由于他们的兴趣不同，两个人可以很容易地看到作曲的不同区域。可以预期一点主观性。

判断哪些元素最重要的简单方法是使用斜视测试。闭上眼睛，直到一些元素消失。那些仍然比那些消失的人具有更多的视觉重量。

局

注意：使用我的浏览器设置宽度超过1280像素捕获了Bureau的屏幕截图。任何更少的东西，设计将崩溃到一个列，而不是这里看到的两个。

上面显示的来自主席团的文章几乎都是文字。主标题具有最大的视觉重量。它是最大的文本片段，它周围也有一些局部空白区域。它可以说是登陆页面的人应该看到的最重要的信息，因此它在视觉上很重要。

链接通过与周围文本的对比获得了一些重量，虽然冷色调减少了我认为的收益。

视觉权重最小的元素是右列中的文本。这是有道理的，因为焦点最有可能被赋予文章，而不是侧边栏中的内容。

注意右列顶部的一小段红色文字。它是指向该网站主页的链接。尽管它很小，但红色为文本增加了一些额外的重量，有助于它从列中的其他文本中脱颖而出。当您直接查看网站时，图像中的所有内容都会显得更大，因此小红色文本并不像此处那么小。

当您应用斜视测试时，整个右侧列将消失，并且您将留下文章上方的主标题以及其下方的大块文本。

合成的主要方向是垂直的，因为它是页面下面的两个长列。列之间背景颜色的差异会创建一条垂直线，引导您沿着页面向下并添加到合成的垂直方向。

创建数字媒体

当“ 创建数字媒体”的主页加载时，丰富多彩的元素会动画到位，引起很多人的注意。即使您错过动画，由于饱和的粉红色，黄色和蓝色，您可能会看到这些元素承载的重量最大。这些元素也占据相同的空间，在空旷的空间中间形成一个密集的区域。

注意：在撰写和发表这篇文章之间，Create Digital Media已经关门了。如果您想知道原因，请访问其主页。

底部的图形对我来说是最重要的。它们是黑暗的，大而复杂的形状。他们将您拉到三个部分中的每个部分，其中包含下一个最具视觉突出的元素，部分标题。

页面上的主要标题是大而暗; 将它与它正下方的文本进行比较。由于其较高的视觉重量，其他突出的项目是顶部的公司名称和底部的徽标。

通过斜视测试，在大多数元素消失之后，彩色形状和文本以及底部的图形仍然存在。主要标题对我来说消失了，虽然我仍然可以告诉它。我也有点注意到左下角的标识，虽然它比它附近的图形快得多。

在这里，我认为主要方向是横向的。这些线条水平延伸，主标题和导航也是如此。另一个视觉上突出的元素，突出显示的文本，也是水平的。

三个齿轮可以被视为单个三角形，虽然是弯曲的形状，因此建立了对角线方向。但它们并不长，而且它们是页面上唯一的对角线。

哈维尔玛塔

在Javier Marta的主页上，有三个元素在视觉上最重要。图形，各部分之间的绿色分隔符以及顶部的菜单项都需要引起注意。

• 图形
  这些大而暗，被白色空间包围。每个图形本质上都有自己的兴趣。

• 绿色分隔符
  它们具有颜色，更大，并且像图形一样被白色空间包围

• 菜单项
  这些是暗的，大的，再次被白色空间包围。

Javier的标志对我来说比它周围的菜单项目的重量要小一些，尽管它们仍然非常突出。它确实比文本更重，但没有我脑海中的菜单项那么多。你可能不同意。

斜视测试使菜单项和徽标混合成一个单元。图形和分隔符仍然在视觉上突出，文本仍然可见为大块。你可以在眯着眼睛的同时看到一切，即使你无法弄清楚它的含义。

在我的屏幕上，只有标题和“El evento”部分可见，使页面成为水平方向。但是，页面上总共有四个部分。当一次性观察切片时，绿色分离器的对齐使组合物具有垂直方向。当然，立刻看到整个页面会将画布从水平变为垂直。

我想知道上面截图中显示的两个图形在对面是否会更好。在顶部图形中，相机指向右侧，这是我的眼睛所遵循的位置。更好的方法是引导人们注意文本。

在底部的图形中，女人的伞确实指向右边，但是她向左走，这是我往往看的地方。如果他们的方向指向文本而不是远离它，那么两个图形可能会更好。

斯坦福艺术

斯坦福艺术主页顶部的图像具有最大的视觉重量。它是页面上最大的元素，作为一个图像，有很多内在的兴趣。它也位于作品的顶部。事实上，它占据了我的大部分屏幕。

注意：此网站会在页面顶部旋转图像，旋转的图像会随时间而变化。如果您访问网站，您可能不会看到此特定图像，因此，您可能会比我在此处评估设计中的视觉权重。

我认为对角形容器的三角形图像是下一个最重要的元素。之后是构成页眉和页脚的大红色块。

当我执行斜视测试时，所有元素都可见的时间比我预期的要长。这些元素具有很多明暗对比度，这有助于它们脱颖而出。

最终，唯一剩下的就是图像，尽管还不完整。我可以在顶部找出大图像，但只能看到下面三角形图像的形状。

该设计的视觉方向也很有趣。对角线占主导地位，并且因为大多数网页不受对角线方向的支配，所以它们在这里引起了更多关注。他们颠覆了你的期望。

我在上面的截图中拍摄的特定照片也提供了一些对角线，虽然有点弯曲的部分，并由其他人的移动线创建。

女人（在最右边的三角形图像中）和摄影师（在中心三角形中）都有一个通向右边的方向。更好的方法是扭转女人面向内部，并将相机移动到左侧的区域，使其向内指向。

当然，当您将鼠标悬停在块中的任何链接上时，图像会发生变化。尽管如此，图像倾向于向外而不是向内。

摘要

元素的视觉权重是元素吸引观众眼睛的量度。视觉上沉重的元素会吸引眼球。

视觉方向是作用于元素并由元素施加的力的感知方向。方向是观众眼睛移动到其他地方的线索。

可以修改许多固有特征以使元件在视觉上更重或更轻。一些可用于建立元素的视觉方向，画布本身也是如此。

江门网站制作