设计原则（第五部分）：设计元素的主导地位，视觉焦点和层次结构

设计原则（第五部分）：设计元素的主导地位，视觉焦点和层次结构

作者： Steven Bradley

时间：2015/12/4

译文：章鱼学院——Halona

原文链接：http://www.smashingmagazine.com/2015/02/design-principles-dominance-focal-points-hierarchy/

曾有客户让你设计一个大的 logo 吗？在你制作完logo后，他们也许会问你完成他们的要求了吗——让标志更大。新的标志脱颖而出，相比之下现在的标志太小并且不会引起客户的注意。因此客户想让标志更大些。

——https://www.youtube.com/watch?v=1yNWO-2shQ8

（youtube 上的一个小视频，Go Media Inc的设计师设计和制作。）

当然，现在的logo和标题都变大了，和主要的“引起行为号召”的按钮相比，它们（logo和标题）将会吸引更多的注意力，因此“引起行为号召”的按钮需要变得更大。一旦按钮变大了，那么标题看上去又小了。

你不能强调所有元素。当你试图想要打破这一观点时，你所有设计元素都在争抢用户的注意力，反而什么元素都不突出。所有元素同时都在向你大喊大叫，一切都很响亮，反而我们什么都不会听到。

重点也是相对来说的。一个元素脱颖而出，另一个就不得不作为背景让第一个元素脱颖而出。一些元素需要控制其它的元素内容才能使你的设计有视觉层次。

注：这是设计原则系列文章中的第五篇帖子了。你可以看看前四篇设计原则帖子：

设计原则1：视知觉和格式塔的原则

设计原理2：空间与图底关系

设计原理3：通过对比和相似原则连接和分离元素

设计原理4：视觉重量和视觉方向

设计主导

比较设计中的任意两个元素。两个元素任一元素在各方面将会是相等的或者是其中一个会占主导地位。获得主导地位的元素将会第一时间吸引用户注意。主导元素出现越少越表现出某种控制主导元素的能力。更具优势的元素t可能有更大的视觉重量，并且它似乎对周围的东西产生了力量。

由于圆和方的相对尺寸大小，圆形占了主导地位

当你研发一个作品时，你会看到许多元素彼此之间施加支配权。有些元素会占据主导地位，有些则是从属的。如果没有意识的控制，你希望所有的事情都能解决，并且重要的信息会吸引人的注意力。幸运的是，你能控制。

如何确立优势地位

你设计一个元素比另一个更具主导优势地位，那么给它更多的视觉重量。视觉重量越大，元素越能吸引注意并展现出主导地位。

通过对比，强调和相对的视觉重量来创造优势。相同的元素彼此不能支配对方。要发挥元素的主导优势，一个元素必须与它的控制元素不同。

你的目标是创造在视觉重量中显著差异的元素。

在这之前系列的文章中我们讨论过相同的特性，你可以改变这些相同的特性。在此提醒一下，这里是最常见的特性，你可以改变这些特征从而设置不同的视觉权重：

大小，

形状，

颜色，

重要性，

深度，

质地，

密度，

饱和度，

方向，

局部留白，

内在特征，

物理感知重量，

同样你也能够通过视觉导向来设计元素的支配地位。例如你可以用多个箭头围绕一个元素，而这些箭头都指向中心这一个元素。如果有足够的方向诱导，即使这个元素和其它元素相比没有很重的视觉重量，但它依旧占据主导统治地位。

你可以有两个共同占主导地位的元素存在，它们共同合作。然而在你的作品中，如果这两个元素最终没有设计好它们的权重，那么这两个元素就会争夺用户的注意力。

理想情况下，你只需要一个占设计主导地位的元素。

主导元素

在设计中主导元素是一个非常重要的视觉重量（或者说是一切事物的指向）。这个元素比页面上其它任何元素都能吸引用户的注意力。

注意的是我说的这个占主导地位的元素是让它在设计中凸显，而不是让它完全掩盖了一切。

你的主导元素是你即将要讲的这个故事的入口点。是你想要吸引观者首先让他们看见的地方。

这就开始了你与游客之间的对话交流。主导元素是首先要注意被注意到的并且是为下文做铺垫的。在结构层次上是位于顶层的。它应该是你要强调的最重要的信息，因为它可能是唯一会被人看到的。任何你想要人们带走的信息都应该是清楚地传达或者接近于你的主导元素。

如果没有一个切入点，用户将会非常困难融入到你的设计。他们不得不停下来并且思考，首先应该看哪里和这个页面上什么是真正的重要的信息。对观者来说缺少入口点的设计会增加认知负荷，所以不要让用户思考。在你的设计中提供一个切入点。

视觉焦点

焦点也是主导领域中的元素，只不过和主导元素相比，不是相同的程度，它可以被定义为最主要的焦点。视觉焦点是感兴趣的领域，在作品中起强调作用，不同于主导元素，主要是吸引并保留住观众的注意力。

在你的设计中视觉焦点元素应该是在最重要的占主导统治元素之后被注意和突显的元素。下图中，一个单独的圆形处在周围都是大部分灰色矩形中。这个圆不仅是一个不同于周围图形的形状，而且它的形状尺寸更大，颜色也是鲜红色。在这个平面图形中，它可能是你眼睛最先注意到的。

矩形中有三个矩形也是红色的，虽然不是鲜红（和圆比起来）。图片中红色的矩形和灰色的矩形在尺寸上都是相同的，但由于颜色不同，红色矩形相比灰色矩形更为显眼。

圆和三个红色矩形都是视觉焦点，因为它们相比其它大多数元素更能引起用户注意。鲜亮的红色是最最脱颖而出的。它是主导视觉焦点元素，或者说它是这张图片里占据主导地位的元素。

就主导元素来说，你可以创建更多的视觉焦点，给予它们更多的视觉重量，除了那个在设计中占主导地位的元素——就是你最重要的占主导地位的视觉焦点。你也可以创建视觉方向引导不同视觉焦点。

对比是一个创建视觉焦点很好的方法，因为对比能引起注意本身也是不同的。任何可以用来对比的和任何能够影响视觉重量或方向的都可以用来创建一个焦点，同样的也可以创建一个主导元素。只是重要成度的不同。

主导元素的层级

如果你创建视觉焦点并且使其中一个焦点作为主导元素，那么你要开始创建不同层次的主导地位元素。主导元素将会是一个层级，并且相比其它元素，主导元素首先会被注意到。剩下的焦点元素会是一个级别。在实际的设计中这些元素你能划分多少级别？三个级别，是最好也是最恰当的。通常来讲，人们能够感知三个级别的主导地位。人们能注意到最重要的主导元素，次重要主导元素和其他元素。这些级别中得有足够的的不同人们才能够区分他们彼此之间的差异。如果你是要创建一个独特的层级，而不是一个连续体。你可以创建3层以上的主导地位的阶层，但是彼此相邻的阶层将会缩小对比。如果你不能确保你能够很好的对比每个阶层，那坚持使用三个层级的主导地位。

1:占主导地位层级

占主导地位的这个层级是视觉重量最重的并且是需要特别强调的重点。你的主导层级通常由一个单个元素在前景中组成。

2：二级重点

这属于重点，除了主导元素和占主导地位的焦点。这是二级重点。在这个层级里的元素相比占主导地位层级里的元素需要获得较少的关注和强调，但是却多于第三级别里的元素。

3:次级

这个级别是占最少的视觉重量。在某种程度上它不在突出。这个部分常常会是正文文本内容。

不同的人在看一个作品时，对于焦点元素或者是视觉主导元素可能会有不同的认知。那么在你的设计中记得让这些差异在视觉重量上最大化，尽可能让你的主导元素和焦点元素明显看起来不同。

视觉层次结构

当你设计不同层级的主导地位元素时，你需要在设计中创建出视觉的层次结构。理想情况下，这种视觉层级结构将与你的概念层级相匹配。如果在一篇文章中，文章的大标题比章节标题更重要，那么文章的大标题应该更具视觉主导地位。

把真实信息的优先顺序作为你视觉层次结构的基础。首先，在页面上把事情的优先顺序排好，让后再去设计，再设计（视觉层级结构）的时候就遵循之前排好的事物的优先级。

好的视觉层级结构能使观者快速浏览信息，有助于你快速和有效地沟通。视觉层级的顶层（也就是占主导地位的元素）应该快速解决用户在登陆页面后的问题。在几秒钟之内，用户在页面上能够获取到的要点和主要信息。如果你把最重要的信息直观的突出，那么用户可能会这么做。

停留过几秒的用户能够通过浏览你的设计能够获得下一个最重要的信息，也就是你接下来想和用户交流的信息或者是其它信息。

倒金字塔的创作方式

在设计中建立视觉层次结构的方式与新闻记者在写作中的方式一样——倒金字塔的创作方式。最重要的信息在第一段或者前两段。主要包括谁，在那，什么时间，干什么，为什么，怎么做。它会告诉你你需要知道的一切。

格式塔原则和视觉层级结构

我写有关格式塔原则的系列文章的一个原因是想说它们是我们在设计工作所有原则的基础。视觉层次是从格式塔发展来的。视觉焦点是格式塔众多原则之一。而主导元素是一个特殊的视觉焦点。它们都通过对比脱颖而出。对比的另一面是相似，它有助于我们看到相同的事物。在层级结构中相似和对比是必要的部分。诸如简单定律和对称原则是为了创建秩序，使事物简单化。这就是你在设计中当你构建层次结构是你要做的事情。你要组织设计元素使得它们有秩序感。

主导元素可以被看作是图（如果就图底关系而言），而次级视觉焦点可以看作是底（背景）。真的，任何有关联系或者分离的原则都适用于主导地位和层级结构。

案例

正如之前的系列一样，我都收集了一些网站的截屏，来分享我所说的主导元素，视觉焦点和层次结构。这是我的意见和观点。你可能看到的设计和我不同，那也是很好的。批判性的思考设计比达成共识更重要。

AN EVENT APART（http://aneventapart.com/）国外的一个网站，有关网站设计的信息

在这个网页的首页上，主导元素是上方的这张大图。它是最大的元素，虽然是人物摄影照片，但我们第一眼就会被它吸引。在这张图片上，白色的文字和图片形成对比，来引起你的注意力。

图片中文字“The design conference for people who make websites”可能是最重要的信息，对于登陆这个页面的用户来说可能是需要知道的。而这种设计是非常清晰的表述关于这个网站是做什么的和为谁服务的。而且它可能是对新的用户打开网页时第一眼要看到的内容。

次级视觉焦点元素包括网站的logo和黑色底框中的“Upcoming Events”，还有下面加粗的证明书标题。

如果你向下滑动页面，你会注意到，设计主要使用尺寸和颜色来创建额外的视觉焦点和视觉层次结构。重要的信息比较大。它可能很大胆。也可能是红色的。偶尔会用一张特别的图片来吸引你的注意力。

如果你访问页面仅仅是大概浏览一遍，你仍就可以知道

这是一个什么网站，知道和你相关的领域的会议，并且通过大量客户的感言是你确信它是真的。

PAID TO EXIST

在Paid to Existde的网站首页主导元素是页面中的双肩包图形。它比周围一切元素都大。由于背包的特点和与众不同的形状与周围的所有环境形成了鲜明的对比。

次级视觉焦点包括网站的名字，一些文本和绿色的下载按钮。社交分享按钮是另一个视觉焦点。仅看下面的内容部分，你会看到三个大的标有数字的圆圈，这些作为视觉焦点来引导你阅读它们各自附带的内容。你可能会读这些信息。注意，每段标题都有不同的颜色标注，且标题颜色和各自前面圆圈的颜色相同，通过颜色来吸引你的注意力。想想圆圈和文本的视觉层次结构。大的彩色圆圈（这是一个层次）吸引用户的注意力，并且引导你去注意另一个层次的信息。

MANDY SIMS（（新网站链接http://www.mandysims.com/）

Mandy Sims是一个单页网页。在它的顶端（没在截图里）包含了一个Mangy的照片，在我看来这是一个主导元素。Mandy的名字作为最大的元素显示。然而，我想引起你的注意所以选择了一个更深的层级页面。正如你所期望的，标题文字部分是最大的，理所应当也成为了视觉焦点。

同样右边有底板的用户评论也是视觉焦点。注意用户评论的背景和菜单链接的背景一个颜色。在这部分虽然有些文字没有阅读，你仍然可以清晰的看到Mandy为客户提供的服务，让客户很高兴，因为这是一个层级里面的内容。

总结

你不能强调所有元素。在设计中为了让一些元素脱颖而出，其它元素必须与背景接近。通过改变元素的视觉重量和视觉方向，你能建立元素在不同层级的主导地位。理想的层级数量是3层；因为大多数人们都能够辨别。设置你的主导元素在一个层级。因为它是你设计作品的入口点，并且它应该是这个页面上或它周围最重要的信息。第二个层级应该是视觉焦点，来引导用户注意下个重要的信息，为下文做铺垫。其他元素作为第三个层级。而你的大部分的内容都会是在这个层级。设计不同的层次重点或主导地位将会创建一个视觉层级结构在你的设计中，更重要的信息更直观地突出。他会有助于你和用户快速有效的沟通交流。

有关格式塔理论知识就要结束了。下次，我们会了解到设计中的创作流程和韵律节奏。我会讲到游客在看一个设计作品时如何让他们更容易找到信息的顺序，而且是你想让用户看到的信息。

其它知识资料链接

Anabel Damstrom的“设计元素应该是强调还是让其成为视觉焦点”

（http://605.wikispaces.com/Emphasis+or+Focal+Point?responseToken=74008151b1bb582abdc2a76f56d0d3f2）

Jim Saw的“如何通过强调来引起用户的注意”

（http://daphne.palomar.edu/design/emphasis.html）

Patrick Cox, Codrops的“网页设计中的重点”

（http://tympanus.net/codrops/2011/09/30/developing-emphasis-in-web-design/）

Aaron Diaz“两个焦点的故事——主要焦点和次要焦点”

（http://dresdencodak.tumblr.com/post/833149000/primary-secondary-a-tale-of-two-focal-points）

(视频), Roxie Mitchell“设计元素和原则是重点还是焦点”

（https://vimeo.com/30689436）

Katherine Tyrrell的“设计作品：发现和创建一个焦点”

（http://makingamark.blogspot.com/2008/01/composition-and-design-finding-and.html）

Kristine Lofgren, SFGate—“在一个空间中如何创建一个视觉焦点”

（http://homeguides.sfgate.com/create-focal-point-designing-room-51512.html）

Amy Grant,的“创建一个视觉焦点：在园林设计中应该加入一个什么视觉焦点”

（http://www.gardeningknowhow.com/garden-how-to/info/creating-a-focal-point.htm）

Sophia的“艺术中的设计：重点，多样性与一致性”

（https://www.sophia.org/tutorials/design-in-art-emphasis-variety-and-unity）