韶关做网站：设计原则之成分流动和节奏

当有人登陆您网站的某个页面时，您希望该人做什么？你想让他们看哪儿？您希望访问者注意哪些信息以及以何种顺序注意？

理想情况下，您希望人们首先查看您最重要的信息，然后再查看下一个最重要的信息。您希望潜在客户在看到“立即购买”按钮之前看到会说服他们购买的副本。您希望在合适的时间向人们提供正确的信息，其中一种方法是控制合成的流程。

成分流程决定了眼睛如何通过设计引导：它首先看起来，下一个看起来的位置，眼睛暂停的位置以及它停留的时间。韶关做网站

设计模式：在设计缺席的情况下流动

本系列中的几篇文章我谈到了视觉方向，我提到了Rudolph Arnheim的结构网。您应该阅读该帖子了解详细信息，但一般的想法是，在矩形画布中，画布的中心和四个角作为拉动眼睛的磁铁。除了这些自然焦点之外，还有一些轴在它们之间运行，您的眼睛从焦点到焦点沿着它们移动。

阿恩海姆的结构网并不是唯一一种暗示眼睛在组合物中自然移动的位置和方式的模式。古腾堡图，F图案布局和Z图案布局都表明观察者的眼睛将如何移动，并且它们呈现出设计的自然流动。

注意：这些模式是针对从左到右阅读的语言描述的。调整其他阅读方向。

• 古腾堡图：在这种模式中，眼睛通常从左上角到右下角扫过，穿过阿恩海姆的光学中心。较少关注被称为休耕区的其他角落。由于眼睛向下移动时右眼移动，右上角是一个强烈的休闲区域，而左下角则大多被忽略。

• F图案布局：在此图案中，眼睛从左上角开始并向右移动页面，然后向下移动一点并在页面上重复移动。一般模式遵循字母F的形状。

• Z型布局：眼睛从左上角开始向右移动。在右上角，它向下移动并向左移动，然后再次向右移动。总的来说，它遵循字母Z的形状，并在页面下方重复图案，直到它到达右下角。

我相信您之前已经看过眼动追踪研究和上述模式的讨论。很少提到的是这些模式如何描述文本密集的页面。它们描述了我们的眼睛如何通过文本列移动。

通常结合搜索结果页面提及F模式。这是为什么？这是因为搜索结果页面是文本密集的页面，显示为要扫描的一口大小的信息列表。F模式是扫描这些页面的自然方式。

添加层次结构，方向，移动和节奏，通过您的设计的流程将不遵循上述模式。在设计的存在下，图案消失了。

它们仍然有用，因为您可以利用这些模式并将重要信息放置在眼睛自然落下的位置，以增加信息的视觉突出性。您可以利用这些自然模式，但了解它们只能描述文本较多的页面。

无论您是否控制运动，观察者的眼睛都会以某种方式穿过构图。你也可以控制运动。

组成流程

您可能已经在设计和转换优化的讨论中越来越多地看到“讲故事”这个词。组合流程可以通过以正确的顺序显示信息来帮助您讲述您的故事。

流动是关于运动和方向，并将眼睛从组合物的一部分引导到您希望它移动的方向。您可以通过视觉重量和视觉方向的组合来创建流动。

视觉重量较大的元素（焦点）拉动眼睛并成为休息场所。其他元素通过视觉线索（如箭头和线条）传递方向并将您的眼睛从一个点移动到另一个点。

流程从您的主导元素开始，这应该是您的构图的入口点。从那里，您可以为眼睛提供方向提示，以便完成您的设计。

最明显的方向提示是指向某个东西的箭头。面向一个方向的脸部图像是另一个强大而简单的方向提示。其他包括。

• 重复元素

• 韵律

• 隐含的行动

• 对角线

• 手势线

• 方向线

• 透视

• 要素的主题

• 层次

你会注意到上面列表中的线条功能。显示方向是线条的主要特征之一。线也可以用于通过垂直于该运动来切断一个方向上的运动。当发生这种情况时，它们会起到屏障的作用，停止或可能逆转眼睛所遵循的路径。

通过上述项目创建方向和移动。添加用作障碍的元素来改变眼睛移动的方向。在空白处创建开放路径，以便在正面设计元素之间轻松移动。

流动与和谐

在微观层面上，您希望眼睛遵循的路径与您希望某人采取的任何行动保持一致。例如，将按钮放在表单字段后面进行搜索是有意义的，因为自然过程是填写字段然后单击按钮。首先放置按钮会将访问者向一个方向移动，直到最后，当他们必须一直移动到开始时。

让箭头指向你希望有人看的东西而不是远离那个东西更有意义。即使箭头指向远处，您也在创建流程，但这并不是为实现网站目标而有意义的流程。

运动

运动与方向密切相关。运动意味着方向和方向意味着运动。如果您希望某人向右看，一种方法是让页面上的某些内容向右移动。眼睛将遵循它。

有几种类型的运动。

• 文字（物理）运动：在存在某些身体活动时发生。

• 静态移动：当眼睛在层次结构中从一个点跳到另一个点时发生。

• 组合运动：当设计元素通过构图将观察者的眼睛从一个点引导到另一个点时发生。

动画可用于在页面上创建文字移动。优势，焦点和等级制造静态运动。当在焦点之间添加赋予方向和运动的元素时，您可以创建组合流。

我之前介绍的相同的方向提示列表用于显示通过合成的移动。

韵律

节奏可以帮助控制合成中的流动速度; 这是图案运动。节奏模式是根据元素和它们之间的间隔构建的，正如您的耳朵将跟随歌曲的节奏一样，您的眼睛将遵循视觉创建的节奏。

只要向页面添加多个元素，就会存在模式和节奏。任何事物都有两个意味着结构。无论你做什么都会在那里，你应该学会控制它。

重复通过重复的元素创造流动和节奏。当眼睛看到一个红色圆圈时，它注意到构图中的其他红色圆圈并试图建立一个图案。除了重复，您还可以使用交替和渐变来创建节奏。

• 重复：通过可预测性创建模式。

• 交替：通过对比来创建模式。

• 渐变：通过常规步骤的进展创建模式。

通过眼睛遵循的元素和它们之间的间隔来创建节奏。改变要么改变模式。模式的变化增加了兴趣。强调模式中的某些东西可以打破节奏并暂时暂停流动。

节奏有三种主要类型：

• 规则节奏：当元素之间的间隔是可预测的，或者元素本身在大小和长度上相似时发生。以规则的间隔放置重复元素就是一个例子。

• 流动的节奏：当元素或间隔是有机的时发生。这创造了自然的图案，唤起了有机运动的感觉。老虎或斑马上的条纹就是很好的例子。

• 渐进节奏：当通过渐进步骤显示形式或形状的顺序时发生。元素的某些特征可能会有阶梯变化，或者间隔可能会有阶梯变化。这种逐渐增加或减少的顺序会产生运动。颜色渐变就是一个很好的例子。

任何上述类型的节奏都可用于创建运动和组合流。您可以选择哪种方式取决于您的设计细节：如果设计试图传达一致性，那么常规节奏可能是最好的; 如果设计试图传达更自然和有机的东西，那么流动的节奏可能是首选。

流与格式塔

我们进一步了解这一系列，更多的格式塔原则有助于我们所关注的设计原则。

优势和焦点在您的设计中创造了吸引眼球的区域。相似性和对比度用于创建模式和节奏。

连接或显示元素之间共性的所有格式塔原则将有助于将眼睛从组中的一个元素引导到其他元素。

均匀的连通性引导眼睛通过连接元素的东西。具有共同命运的元素似乎沿着与眼睛一起移动的相同方向移动。延续原则具体是关于继续向一个方向发展。

例子

让我们来看看几个网站的截图，并思考他们的设计如何流动和移动，以及他们可能具有什么样的节奏。

正如我之前在系列中所提到的，这是我的观点。您可以查看这些相同的屏幕截图，看到与我不同的流程和节奏。没关系。对我们两个人来说，批判性地思考我们所看到的设计比让我们对我们的想法达成一致更为重要。

DORIGATI

当我看到Dorigati主页时，我的眼睛很快被画在页面顶部的酒桶的英雄形象。从这里拉到焦点，如站点标志和右边的酒瓶图像，不需要很长时间。

徽标和瓶子之间有一个强烈隐含的斜向流动，你的眼睛可能在它们之间来回流动。想想将公司名称与网站提供的产品联系起来的速度有多快。

徽标底部的曲线似乎指向下方，引导您注意所呈现的葡萄酒的名称。请注意，左侧的标题和葡萄酒的名称是相同的蓝色，与徽标中的蓝色相似。重复的颜色创造了一个节奏，并通过所有三个项目流动。

再次使用颜色的节奏，页面下方的金色标题和左侧的装饰性繁荣。日期使用类似的颜色。虽然间隔可以根据每个条目中文本的长度而变化，但它是相当可预测的并且是规律的节奏。

葡萄酒瓶还用于将标题与主要内容连接起来，通过英雄形象创建垂直流，并作为跨越它的桥梁。没有酒瓶的形象，你需要更多的努力让你的眼睛穿过水平线条，从而形成运动障碍。

穿着反应

Dress Responsively主页顶部有一个强大的横向流动。导航和文本都可以水平引导您的眼睛，并且可以非常轻松地在标题中左右扫描。

我的眼睛往往从“你决定”文本开始，并且可以轻松地左右移动，可以在标题，导航和标题中的剩余文本中进行操作。

请注意，在“你决定”结束时，你的眼睛也会被拉下来。重复的矩形和橙色形状创造了垂直的节奏。“WTH？”按钮的形状以大多数矩形“548票”形状和文本下方的“SEE DETAILS”按钮回显。通过将这些形状的左边缘与它们之间的文本对齐而产生的强垂直线来加强这种垂直流动。

橙色颜色在标题中以及页面下方的文本中重复显示（未在屏幕截图中显示）。在页面顶部遇到颜色重复后，您的眼睛沿着页面向下移动，增加了垂直流动。

令人难以置信的类型

所述的报头难以置信类型主页还具有水平流动，由于线的形状和文本的块。光栅线创建一个微妙的下拉，并在页面上水平创建一个规则的节奏。

标题下方是图像网格。注意图像之间的水槽（水平和垂直）如何为您的眼睛提供通道。它们可以帮助您的眼睛从任何方向的图像流向图像。它们还在两个方向上创造了规律的节奏。

在页脚中，文本分为两行四列，再次创建水平和垂直流动和节奏。我认为水平流动比垂直方向更强，所以我的眼睛往往左右上下移动，但流动存在于两个方向。

爱与奢华

在对爱与奢华现场活动页面是另一种设计，显示水平和垂直流动。

左栏中的粉红色吸引我的目光，并通过其形状创造垂直流动。请注意网站名称的旋转方式，以便创建垂直流。颜色与旁边的菜单形成对比，形成一条强烈的垂直线，两者相遇。

此列底部的文本重复，当您读取一个块然后读取它下面的一个块时创建一个垂直节奏。但是，线条的水平性质会将流量改变为水平，并使您的眼睛向右移动。

当前菜单项背后的深色背景会产生更强的水平流动，因为您的眼睛会被对比度吸引。它右上角显示的三角形指向右侧。

在右侧，在主要内容中，日期的颜色和大小通过重复创建了规则的垂直节奏。屏幕截图仅显示其中两个，但它们继续沿着页面继续。粉红色的标题用于强化重复蓝枣创造的节奏。

每个入口之间的水平线会暂时停止垂直流动，让您在每个入口处停留一段时间。当您准备好越过水平线并移动到另一个条目时，日期和标题中重复颜色的节奏会将您拉到页面的下方。

图像会随着每个条目自然变化，但此屏幕截图中的图像会将您的眼睛向下并向左对角。

摘要

您可以很好地控制人们在查看您设计的网页时的外观。在文本繁重的图形光页面上，访问者的眼睛可能会在页面的上下沿着Z图案或F图案。

但是，只要设计页面元素并添加图形，这些模式就不再适用。您的访客眼睛将遵循您创建的流程，运动和节奏。

考虑您正在沟通的信息的优先级。想想在特定订单中看到它会更有用。考虑一下您希望某人在第一，第二和第三位置看的页面。

然后创建视觉提示，以您认为最好的顺序引导他们浏览页面。为要关注的人添加一行，或者通过对齐各种元素来创建一行。重复一种颜色或文字大小，为眼睛创造一个节奏。呈现移动物体指引眼睛的图像。

不要将其保留为默认模式以引起访问者的注意。通过页面创建组合流并自己引导。

在这个关于设计原则的系列中，我想与大家分享最后一个话题，这就是平衡。我将谈谈一般的构图平衡，然后引导您完成可以创建的四种不同类型的平衡（对称，不对称，径向和马赛克）。

韶关做网站