清远做网站：设计原则之优势，重点和层次结构

客户有没有要求你让徽标更大？也许他们在你完成他们的要求之后就问过这个问题。新标题脱颖而出，但现在标识相对较小，并没有引起注意。客户想要使徽标更大。清远做网站

当然，现在标识和标题更大，两者都会比主要的号召性用语按钮吸引更多的注意力，这个按钮需要做得更大。一旦按钮变大，标题将再次开始变小。

你无法强调一切。它打败了这一点。当你尝试这样做时，你所有的设计元素都在争夺注意力而没有什么突出的。他们同时大喊大叫。一切都响亮，但仍然没有听到任何声音。

重点是相对的。要使一个元素脱颖而出，另一个元素必须作为第一个突出的背景。一些元素需要支配其他元素，以便您的设计显示任何类型的视觉层次结构。

统御

比较设计中的任何两个元素。元素在各方面都是相同的，或者一个元素将在另一个方面发挥某种程度的支配作用。更具主导性的元素将吸引眼球并首先引起注意。它甚至可能表现出对不太主导的元素的某种控制。

更主要的元素可能比它主导的元素具有更大的视觉重量。它似乎会对它周围的东西产生影响。

当你开发一个合成时，你会看到许多元素在彼此之间占据主导地位。有些元素会占主导地位，有些元素会从属。没有有意识的控制，你只希望事情都能解决，重要信息会引起注意。幸运的是，你确实有控制权。

如何建立优势

你设计一个元素，通过赋予它更多的视觉权重，拥有更多的优势。视觉重量越大，元素就越能吸引眼球并显示出优势。

你通过对比，强调和相对视觉重量来创造统治力。相同的物品不能相互支配。为了发挥支配地位，元素必须与它本来要支配的元素看起来不同。

您的目标是创建视觉重量明显不同的元素。

您可以改变我们在本系列的最后几篇文章中讨论过的相同特征。作为提醒，以下是您可以改变以设置不同视觉权重的最常见特征：

• 尺寸，

• 形状，

• 颜色，

• 值，

• 深度，

• 质地，

• 密度，

• 饱和，

• 取向，

• 当地的白色空间，

• 内在兴趣，

• 感知到的体重，

您也可以通过视觉方向创造支配地位。例如，您可以用箭头包围所有指向该元素的元素。如果有足够的方向线索，即使它的视觉重量小于页面上的其他元素，该元素也可能成为主导。

你也可以拥有共同支配地位，其中两个主要元素存在于一个组合中。然而，如果没有在比赛中保持正确的整体平衡，两者都会争夺注意力并最终会分散注意力。

理想情况下，您需要一个主导元素。

主导元素

设计中的主要元素是具有最大视觉重量的元素（或其他所有指向的元素）。它首先吸引眼球的元素，而不是页面上的任何其他东西。

注意不要使元素占据主导地位，以至于它完全遮盖了其他所有元素，但要确保它在设计中脱颖而出。

你的主导元素是你讲述的故事的起点。它是您设计的切入点。它应该吸引游客到你希望他们看的第一个地方。

这是您与访问者开始对话的方式。首先注意到主导元素并为下一步看到的内容设置背景。它位于层次结构的顶部。它应该强调您最重要的信息，因为它可能是任何人都会看到的唯一信息。无论您希望人们带走什么信息，都应该在您的主导元素中或附近清楚地传达。

如果没有切入点，观众将不得不更加努力地进入您的设计。他们必须暂停并思考首先要去哪里并思考页面上真正重要的内容。缺乏切入点会增加访客的认知负担。不要让他们思考。为您的设计提供切入点。

联络点

焦点也是支配的元素或区域，与您的一个主导元素的程度不同，可以将其定义为您最主要的焦点。焦点是一个感兴趣的领域，重点或区别在一个组成，捕捉和保持观众的注意力。

您的设计中的焦点应该突出，但应该在具有最大优势的元素后注意。下图显示了在大多数灰色方块的海洋中的孤独圆圈。圆形不仅形状不同，而且更大，呈鲜红色。这可能是你的眼睛在图形中注意到的第一件事。

四个方格中的三个也是红色的，但不像圆圈那样明亮。它们与图像中的其他方块大小相同，但由于它们的颜色，它们确实从灰色方块中脱颖而出。

圆圈和三个红色方块都是焦点，因为它们从图形中的大多数其他元素中脱颖而出。它们与灰色方块的质量形成鲜明对比。大亮红色圆圈最突出。它是这个图像中的主要焦点或主导元素。

与主导元素一样，你可以通过给予它们比除了主导元素之外的所有东西更多的视觉重量来创建焦点 - 这也是你最主要的焦点。您还可以创建导致不同焦点的视觉方向。

对比度是创建焦点的好方法，因为对比度会引起对自身的不同注意。任何可以对比的东西以及任何可能影响视觉重量或方向的东西都可以用来创建一个焦点，就像它可以用来创建一个主导元素一样。不同之处仅在于程度。

优势等级

如果您创建焦点并使其中一个点成为主导元素，那么您将开始创建不同级别的优势。主导元素将位于一个层面，并将在所有其他元素之前被注意到。剩下的焦点将放在另一个层面上。您可以在设计中实际拥有多少级别的优势？

三是一个很好的数字。作为一般规则，人们可以感知三个级别的支配地位。他们注意到最主要的是什么，什么是最不占优势，然后是其他一切。这些级别之间需要有足够的差异，以便人们区分一个级别。您想要创建不同的级别，而不是连续统一级。

您可以创建三个以上的优势级别，但每个额外级别将降低相邻级别之间的对比度。除非你确定你可以很好地对比每个级别，坚持三个。

• 占主导地位。这是具有最大视觉重量的水平，也是最受重视的水平。您的显性级别通常由前景中的单个元素组成。

• 次优势。除了主要元素或主要焦点之外，这是焦点水平。它得到了次要的重点。这个级别的元素比主导级别更少强调，但是比从属级别更重要。

• 下属。这是具有最小视觉重量的这个级别。它应该在某种程度上退回到背景中。此级别通常包含您的正文。

不同的人可以看一下作文，并认为不同的元素是焦点，甚至是主导元素。记住要根据你的视觉重量差异做得足够大，以明确哪个级别更具优势。您希望您的主导元素和焦点尽可能明显。

可视层次结构

当您设计不同的优势级别时，您可以在设计中创建视觉层次结构。理想情况下，此可视层次结构将与内容的概念层次结构相匹配。如果文章的标题比文章中的标题更重要，那么标题应该在视觉上占主导地位。

将您的视觉层次结构基于所呈现信息的实际优先级。首先，优先考虑页面上的所有内容，一旦设置完毕，设计一个可视化的层次结构来遵循优先级。

可视化层次结构使访问者可以扫描信 它可以帮助您快速有效地传达信息。层次结构的顶部（主导元素）应该有助于回答访问者在登陆页面时可能立即遇到的问题。

在几秒钟内，访问者应该能够获取页面的关键点和主要消息。如果您使最重要的信息在视觉上最突出，他们就可以做到这一点。

坚持超过几秒钟的人应该能够扫描设计中的焦点，以获得您想要传达的下一个最重要的信息，以及其他信息。

倒金字塔的写作

在设计中建立层次结构类似于记者使用倒置金字塔写作的方式。最重要的新闻是第一段或第二段。领导涵盖了谁，什么，何地，何时，为什么以及如何。它告诉你需要知道的一切。

领导之后是填写故事的重要细节。它们是提供背景信息或帮助您更深入地理解故事的细节。在文章的最后是一般和背景信息，很高兴知道，但没有必要了解正在发生的事情。

如果有人只读一两句话，他们应该得到最重要的信息。他们坚持的时间越长，消费的越多，他们就会获得越多的细节。

可视层次结构的工作方式相同，只是它不必从页面顶部线性流动。你可以控制人们先看，第二等的位置

同样，建议使用三级优势或等级，尽管仍有四到五种可能性。

格式塔原理和视觉层次

我开始撰写关于格式塔原则的文章的原因之一是展示它们如何导致我们使用的许多设计原则。

视觉层次结构源于格式塔。重点是格式塔原则之一。你的主导元素是一个极端的焦点。两者都使用对比突出。硬币的另一面是相似性，这有助于我们看到事物是一样的。相似性和对比度是等级制度中的必要因素。

诸如prägnanz和对称之类的法则是关于创造秩序和使事情更简单和更清晰。这正是您在设计中构建层次结构时所做的事情。您正在组织设计元素以建立秩序感。

主导因素可能被视为数字。最不占优势的元素可能被视为基础。实际上，任何与连接或分离相关的原则都可以应用于支配和层级。

例子

正如我在整个系列中所做的那样，我从几个网站收集截图，分享我认为的主要元素，焦点和层次结构。

这是我的意见。您可能会看到不同的设计，这很好。批判性地思考设计比同意我们的想法更重要。

一个事件分开

An Event Apart主页上的主要元素是顶部的图像。这是最大的元素。它也是人们的形象，我们通常会被吸引。图像上的大白色文字提供与图像的对比，引起您的注意。

文章“制作网站的人的设计会议”可能是登陆页面的任何人都需要知道的最重要的信息。关于An Event Apart是什么以及该网站的用户，这是一个非常明确的陈述。这可能是网站新手应该看到的第一件事。

重点包括网站的标识，“即将发生的事件”背后的深色背景以及作为大胆标题的见证集。

如果向下滚动页面，您会注意到设计主要使用大小和颜色来创建其他焦点和视觉层次结构。重要信息更大。这很大胆。它可能是红色的。偶尔会有一张图像吸引眼球。

如果您要访问该页面并仅进行扫描，您仍然会知道该网站的内容，知道是否有任何会议进入您所在的地区，并且已经被大量的推荐说服了。

支付存在

Pid to Exist主页上的主要元素是页面顶部背包的图形。它是一个图像，比周围的其他一切都大。它与周围环境形成对比，因为它是一种内在兴趣和不同形状的图形。

焦点包括网站名称，图形右侧的一些文本以及绿色的“下载”按钮。社交分享按钮是另一个焦点。

查看下面的内容部分，您将看到三个大编号的圆圈，这些圆圈作为焦点并引导您查看其附带的内容。

你打算阅读这些信息。注意每个段落上方的标题如何反映其伴随圆圈的颜色，以吸引你。

根据视觉层次来考虑圆圈和文本。大彩色圆圈（层次结构中的一个级别）引起您的注意，并引导您访问位于层次结构另一级别的信息。

曼迪西姆斯

Mandy Sims有一个单页网站。顶部（屏幕截图中未显示）包含Mandy的图像，对我来说是主要元素。Mandy的名称也显示为最大的文本。

但是，我想提请您注意页面下方的一个部分。正如您所料，该部分的标题是那里最大的文本，因此它成为焦点。

焦点也是右侧的推荐。请注意，推荐的背景颜色与菜单中活动链接的背景颜色相同。

如果不阅读本节中的文字，您仍然可以清楚地看到Mandy为快乐的客户提供辅导服务，因为层次结构的一个层次就是这样。

VANSEO DESIGN

最后一个例子来自我自己的网站。这是我几年前写的一篇博客文章。原谅放纵，但与其他例子不同，我确切地知道为什么页面上的每个元素看起来都是这样的。我是否成功是另一回事，但我确定其意图。

页面的主标题是主要元素。这是一篇我希望人们阅读的博客文章，但我希望在他们不得不花时间阅读之前让人们了解文章的内容。

部分图像也会引起人们的注意，你可能认为它更占优势，但是这样的图像并不一定在网站上每个帖子的顶部都可见。

左上角的徽标和右上角的RSS图标意味着比其他文本更突出，因此两者都是红色的。两者都会以更明亮的红色脱颖而出，但我不希望人们被他们分心。整个标题中也使用相同的红色。

左侧的元信息旨在从正文中脱颖而出。在这里，我使用局部空格来增加纯文本的视觉重量。理想情况下，有人会浏览它并获取有关我的信息以及帖子的类别和标签。

我决定用这个设计做的一件事是让身体中的链接比大多数网站上的链接更少。我希望人们能够找到他们，但我不希望他们把你从内容中拉出来。我使用的是蓝色，它在黑色文本中并不突出，我选择斜体而不是粗体。链接并不是焦点，所以我在视觉上不再强调它们。

我希望有人登陆网站上的这个或另一个帖子，能够很快地告诉我们这篇文章的内容并发现一些关于我的基本信息，比如我的名字或网站名称，然后才能阅读帖子。

摘要

你无法强调一切。为了使设计中的某些元素脱颖而出，其他元素必须淡入背景。

通过改变某些元素的视觉重量和其他元素的视觉方向，您可以建立不同的优势级别。三个级别是理想的; 他们是大多数人都能辨认出来的。

在一个层面上将成为你的主导元素。它是您设计的切入点，它应该是或接近页面上最重要的信息。第二级联络点可以引起人们对访问者应该看到的下一个最重要信息的关注。你的第三级别掌握其他一切。您的大部分内容都将达到此级别。

设计不同级别的重点或优势将在您的设计中创建视觉层次结构，更重要的信息在视觉上更加突出。它将帮助您快速有效地与访问者沟通。

我们已接近本系列的结尾。下一次，我们将看看成分流，运动和节奏。我将讨论引导访问者的设计，以便他们更有可能按照您希望他们看到的顺序查找信息。

清远做网站