设计原则：主导地位中的焦点和层次结构（五）

有客户问过你，说把logo做的再大一些吗？如果这种事真正的发生过，而且你还完成了他们的请求。新的logo会由此脱颖而出，但是和之前的较小的logo相比并没有提高用户的吸引力，所以客户就希望logo变的更大。这样的情况有吗？

当然，目前的logo和标题也已经足够的大了，而为了吸引更多关注，主要文字和按钮这些也将会变得足够大。而一旦按钮变大了标题部分就显得小了。

而这些违背了很重要的一点：那就是不可能突出强调所有元素 。当我们尝试开始这样做的时候，所有的设计元素都太突出而没有来突出，它们都是一样的大小。

因此最主要的在于相对性，对于一个元素能否脱颖而出，就需要有一个背景的情况下就可以为突出他人所需来设计任何形式的视觉层次感。

主导元素

在设计中任意两个元素做出比较时，当其他方面都是一样的时候，会人为的施加一些作用力来突出其占有主导地位，这种元素将作为主导元素更加吸引眼球，也会导致主导元素较少的出现。

由于大小相比悬殊，圆形占据了主导地位

当进行设计时，会希望无数的元素都能占据着主导地位，可是这只能是少数，有的元素必须要服从。如果没有有意识的控制，那就只是简单的展示而已，最重要的信息就不会引起人们的关注，但幸运的是我们有控制权。

如何使元素占据主导地位

当我们设计一个元素时，赋予它更多的视觉权重以及相比较于另一个主要元素。占据主导地位的就相对于将更多的元素来吸引眼球。

通过对比来创建一个重要或相对视觉权重主导地位的元素，相同的元素是不能支配对方，而发挥主要作用的元素是看起来也是不同的，那这就是主导元素。我们的目标是创建一个视觉权重差异明显的元素。

可以通过改变下面的属性来有效的控制视觉权重，这也是最常用的方法。

（1）尺寸

（2）形状

（3）颜色

（4）值

（5）深度

（6）质感

（7）密度

（8）饱和度

（9）方向

（10）留白

（11）内在兴趣点

（12）元素自身重量

以及使用视觉导向来创建主导元素。例如我们可以在主要元素周围使用箭头来指向这个元素。如果这种指示足够的多，那这个元素就是主导元素，哪怕页面上其他元素的视觉权重大于主导元素，这也不会影响到它的地位。

另外我们也可以在组合物中有两个主导元素共同存在，可是无论两者之间如何争抢着注意力，最终还是会分散它们，而是保持一种相对平衡的状态。所以，理想情况下只希望有一个主导元素，而注意力不会被其他的元素分散。

主导元素

设计中的主导元素具有较大的视觉权重（或者是一个点），这个地方相对于其他将会是最先吸引人目光的地方，另外这里我们也需要谨慎处理，不能让主导元素完全掩盖一切并显得鹤立鸡群。

主导元素就好比我们讲故事的开始处，这也是吸引用户的第一站。其次就是如何和用户交谈，由于主导元素是入口，那么就会有上下文的类似元素，而且它们位于结构层次的顶部，作为最为强调的那部分，无论怎样都是希望向用户传达我们最想要表达的意思。

如果不存在切入点，那用户就不得不努力的寻找并以自己的角度进入设计中。这个过程就会伴随着暂停，想一想先看哪里再看哪里的，什么是最重要的情况发生。因此，缺乏切入点将会使用户产生认知负荷，最后为了不要出现这种局面发生，请设计一个好的入口。

焦点

焦点元素在区域中也是占据主导地位，只是都作为主导元素在程度上有较大的差异，焦点可以被定义为最重要的主导元素。焦点元素也是有趣的、强调或是不同组合，功能在于吸引并保持住用户的注意力。

要注意的是，在设计中最重要的元素突显出来后，其他的主要元素就要依次站出来了。下面的图片中显示有很大空白区域内大部分灰色的正方形。但是最明显是较大红色明亮的圆。而这也是最先印入视线中元素。

三个偏红色的正方形块，虽然亮度不如大红圆，但是相对于其他灰色的正方形要更加突出。

这张图片中圆和三个微红的方块都是焦点，因为它们都能从灰色元素中脱颖而出，大红色圆最为突出，这是最主要的焦点元素，也是图片中的主导元素。

和主导元素相对，我们可以创建更多的视觉焦点，除了对比主导元素的视觉权重小一些，这也是很重要的焦点。我们还可以通过视觉导向来控制不同的焦点。

对比度也是建立焦点的好方法，因为对比的本质就是区分彼此之间的不同。任何可以对比和影响视觉权重以及视觉导向的都可以来创建焦点。当然以同样的方式也可以创建主导元素只是它们的程度不同而已。

主导位置的结构层次

如果我们建立一些焦点，而这些焦点形成主导元素，以此我们就可以创造出不同的结构层次。占据主导地位的元素将会在一个层面与其他层面都会被发现，剩下的焦点将会落在另一个层面上，那么如何控制多个层级关系来影响设计呢？

三是一个不错的数字，一般情况下人们会感知三个层面的结构，也会感知到什么是最有焦点的什么是最占主导地位的。对于层次关系需要有足够的差异来区分下一个层级，所以我们创建的层级不是连续的。

当然我们也可以创造三个以上的主导地位，然后每增加一个级别将会降一个级别的对比，除非对每个层次结构把握的非常好，否则就不要超过三个。

（1）主导层级：这是在其他是视觉层级中最强调的层级，如果我们按照水平的模式布局，那么这一层就出于前景色的地方。

（2）次层级：这是焦点元素的分割线，唯一的例外就是上面还会存在主导因素的占据主导地位的焦点元素，它们也是重要的。在这个层面虽然也是占据主导层级，但相比较上面的第一层要弱一些。

（3）从属层级：这个层级和视觉权重有或多或少的关系。它应该退居到背景层级，这一层通常也是页面的本身层。

另外不同的用户会在组合中看到不同的焦点元素，或是主导因素。最后要记得只有足够的大以及视觉权重差异明显的层级将更加突出，就像我们希望的那些主导层级越明显越好一样。

视觉层次

当设计的主导地位处于不同的层级时，就要创建及设计视觉层次关系。而在理想情况下，这种视觉层次关系将会与自己要强调的内容概念的层次结构相匹配。如果一篇文章的标题比文章一个章节的标题更为重要，那么标题就应该更加直观并占据主导地位。

对于画布背景也是我们要优先考虑的，因为一旦在页面上进行设计，就会按照这种优先顺序来设计视觉层次。

视觉层次可以让用户有阶段的读取，这样就会更加快速高效传达信息。对于层次结构（占据主导地位的元素）的顶部应该是有助于帮助用户回答问题的，例如可以立即出现登陆页面。

在短暂的几秒钟内用户就可以轻松读取关键点和页面所展示的主要信息。如果自己要表达的最重要的信息，那就是最显眼最容易读取的元素。

先比较与停留时间的几秒钟，再传达给用户接下来需要获取的最重要的信息是什么，并和其余的信息有所区分。

倒金字塔手法

在设计上也建立类似的结构层次，记者一般也会用文字写出倒金字塔的记录方法，在顶部第一、二条通常是最重要的，例如发生时间、地点、事件和原因，它可以告诉我们所要知道的重点。

在分割线下会添上故事的更多细节，这些细节在于帮助我们可以更好的深入理解故事，另外在文章的结尾处一般还会有背景资料提供参考，但是那并不是重点要理解的。

如果有人只读取一两句话，那就会删除一些很重要 的内容。反之，用户使用的时间越长，那么在文章的周围消耗的时间越多，也就会看到更多的细节。

另外还有一点要注意的：视觉层次的不同之处在于其从页面的顶部开始，而是那种没有线性的流动性，而我们可以控制的就是人们会看到第一层、第二层以此下去。最后推荐使用三个层次，尽管也可以使用四层、五层甚至更多。

格式塔原则：视觉层级

在我开始写这一系列关于格式塔原理文章之初，就在思考一个问题这些设计的原则之间的组合是影响设计的？

由视觉层次关系演变的格式塔原则中，焦点也是其中之一，而起到主导因素的元素就一个很极端的焦点，两者都能够从对比中脱颖而出，例如硬币另一面的相似性，这些有助于看到东西一样。相似性和对比度在层次结构中是必须存在的成分。

就像pragnanz（环境认知心理学）中提到的对称会创造秩序，从而使事情变的更加简单和清晰。而当我们设计建立结构层次时这也是正要做的事情，使设计元素组织的更加有秩序感。

而占据主要地位的元素会被看作一张图，而其它元素被视为一个背景，所以很多有关连接或分离的任何原则都是可以应用于主导地位和主要层级中的。

案例

正如前面的几篇文章那样，我会从网站上收集几个网站的截图，分享我所看到的那些作为主导因素和重点突出以及层级关系。如果你们可以看到与我不同的观点，这样很好，我们需要这种批判性思考的设计，这是更为重要的部分。

An Event Apart

网站An Event Apart 的主页上的主导区域就是顶部的banner部分，而且通常是最吸引我们的图像。在图片的外围使用大量的反差留白，更加吸引注意力。

在banner上的文字部分应该是任何人登陆页面时需要知道的最重要的信息了，这是关于网站本身的精炼介绍，使得用户第一眼就明白这个网站是干嘛的？

焦点也包括网站的logo部分，以及页面底部设置的黑色粗体字体。如果向下滚动页面就会发现这里面采用了不同的大小和颜色来创造联络节点和视觉层次，如重要的信息字体较大和粗体，另外部分红色的部分也会吸引眼球的注意。

如果只是简单的访问这个网站，当离开时仍然知道这个网站是干嘛的？知道你所在地区的任何会议，就足以让人深刻。

Paid to Exist

Paid to Exist的主导元素在于banner部分的背包，相比较其它就很大，对比周围的环境因为它内在的兴趣和不同的形状。

焦点包括网站的名称，banner的右侧文字，与大绿的“下载”按钮，还有社交分享按钮。

看着正下方的内容部分，会看到三个大圆圈，可以作为焦点，并引导你的视线移动到相应的内容区域。另外当读取这些信息时，请注意标题每个段落上面使用了反映与之配套的圆的颜色。

想想圆和文字的视觉层次关系，丰富多彩的大圆圈（这是层次结构中的一个级别），能够得到关注和引导我们转向层次结构的另一层面的信息。

Mandy Sims

Mandy Sims是一个单页网站，最高的地方有一个图片，这是主要元素，截图中看不到。而且字体也是最大的，不过我想说的重点是下面的页面中，标题的文字很大，这也是一个焦点。

还有焦点在右侧的相同菜单的链接背景颜色，如果没有阅读文字区域的内容，但是我们还是在脑海中有这个网站提供的服务以取悦客户的印象，因为在结构层次中就表达了这一点。

Vanseo Design

Vanseo Design这是我自己的网站，这个帖子是几年前写的，相比于其他的网站，更能说明白我当时为什么要这样设计？我不敢说设计的很成功，但是可以说出自己的意图。

本页面的主标题是主导元素，我想用户在阅读博客文章时很希望知道关​​于他们必须投入很多的时间阅读之前的主要意义是什么。

还有就是部分图像也吸引眼球，可能会觉得它更占优势，但像这样的图像不一定在网站上每一个区域都可见。

而在左上角logo和右上角的RSS图标就是为了突出而比其他文字等，两者都使用更加突出的明亮红色，但又不希望访问者被它们分心，相同的红色也用于整个标题部分。

左侧的基本信息是为了从主文本中脱颖而出。在这里使用固有的白色背景，增加纯文本的视觉重量。理想的情况下，让类别和标签的公告信息，只需要有人会看它一眼。

还有一个地方要说明的，我决定做的设计自身的联系相比于大多数网站是不可见的。希望用户能够快速找到自己所需要的内容，但又不想让他们点击出来，就用了一个蓝色的，还使用很黑的黑色文字，关键字部分选择斜体，而不是粗体，来加以区分。这些链接意味着是重点，所以我在视觉上来强调它们。

我希望有人访问到这个或网站上的另一篇文章就可以很快了解文章是关于什么，以及发现“有关我”的一些基本信息，并在访问之后知道我的名字或网站的名称等信息。

总结

为了使得有些元素在设计中可以脱颖而出，我们不能强调所有的元素，其他的元素需要在背景中消失掉。

通过改变一些元素的视觉权重以及访问者的视线方向，可以建立不同级别的主导地位。理想层次是三个层次结构，因为大多数人都认为这是容易辨别的。

在一个层面上会存在一个主导元素。这是我们设计中的一个入口点，它应该是或靠近本页上的最重要的信息。联络节点可以提醒用户请注意下一个最重要的信息，用户也很容易察觉到。而第三个级别就是包含其他所有了，因为大部分内容将在这一水平面上。

设计不同层次重点或主导元素将在设计中创建视觉层次，在视觉上更加突出更重要的信息。它会帮助我们的访问者快速有效地沟通。

我们正在接近这个系列的结尾。接下来的时间，我们将讨论流量和节奏及如何使用设计引导用户流量，使他们更容易找到你想要他们看到它的信息内容。

作者：Steven Bradley

https://www.smashingmagazine.com/2015/02/design-principles-dominance-focal-points-hierarchy/