界面设计原则之一篇：权衡优先级 突出焦点 划分好内容层级

【编者按】界面设计时，我们不能强调所有元素，否则将毫无重点。正如所有人都大声呐喊，一片杂乱，我们将听不到任何信息一样。当界面设计面对很多元素时，如何调配各元素之间的关系，这时需要把握住三点：优先级、焦点、内容层级。《Design Principles: Dominance, Focal Points And Hierarchy》一文对该设计原则进行了详细解释。 
在进行界面设计时，特别是有多个元素的时候，如何调节各个元素以使客户满意是需要技巧的。 

优先级 

例如现在有两个表现元素，那么谁是重点，谁是客户最看中的，这就涉及到优先级的问题。除了最常见的大小关系，在考虑优先级的时候还需要对下列因素进行综合考量： 

• 大小
• 形状
• 颜色
• 深度
• 纹理
• 厚度
• 饱和度
• 方向
• 留白
• 兴趣点
• 物理关系

如果想通过方向的方法来表现优先级应该如何处理呢？—可以使用箭头、渐变线等指向元素(多个)共同指向需要突出的元素，达到聚焦的目的。 
主要元素 

主要元素是我们的设计根基，这决定了阅览者的视觉重点。所以进行设计时，第一件事就是把要表现的主要元素放在设计首位。无论我们需要对用户表达什么信息，都必须是清晰的，并且要尽量靠近主要元素。但是要把握好尺度，例如把其它元素都覆盖了或者充满了整个画面反而变成没有了重点。 

焦点 

焦点可以是主要元素集合或主要区域，但是画面中应该有最主要元素。例如下图，最大最明亮的圆点是该设计中的最主要元素，与另外三个暗红色的正方形共同构成了焦点区域。 

 

可见对比是创造出焦点区域的好方法，通过大小、形状、冷暖色、位置等来进行。 

优先级别 

如果焦点区域由多个元素组成，各个元素之间应该有主次之分，那么应该划分为多少层比较恰当呢？我的建议是三个。因为对于大众来说，对某个事物的认识一般是三个程度：最熟悉，最不熟悉，两者之间。 

最主要 
该级别的元素应该拥有最多的视觉权重。这通常是一个单一的前景元素，横幅或置顶图。 

主要 
该级别的元素是焦点元素，权重仅次于最主要元素，但是要比次要元素突出。 

次要 
该级别元素拥有最小的视觉权重，充当的是背景衬托角色。这通常可以是文字表述。 

如果还想加入更多层次，那么请注意这会影响到不同元素之间的对比度，所以要花更多的心思去设计才不至于导致主次不分。 
视觉层级 

视觉层级的划分决定了浏览者获取信息的先后次序。这有助于我们把最想表达的信息传达出去，层级顶层（主要元素）应第一时间解答出浏览者首次访问时可能提出的问题。随后，浏览者应该可以获取到重点信息和页面主要信息。分配给重点信息更多视觉权重是个不错的选择。如果浏览者会停留更长时间，我们应该把主要元素、次要元素按序铺排好，使浏览者获取到更丰富的信息。 

倒三角写作法 

在设计中划分层级与记者撰写新闻是有异曲同工之妙的。最重要的新闻信息通常位居段落1或2，内容包括时间，地点，人物，发生什么，为什么发生，如何进行等。 

 

随后应该把重要信息进行详写。例如进行背景介绍或进行更多细节描述。收尾部分则可以进行综述或总结，但不用详写。可见，三层划分法是最普遍最安全的做法。 

实例分析 

An Event Apart 

An Event Apart网站的主要元素是首页的置顶图像。图像是人在开会的场景，图中的粗体文字用白色显示，很好地与背景图形成对比从而引起视觉关注。 

 

文字内容“网站创作者的设计会”是想让访客第一时间知道这个网站是做什么的，交待得非常清楚直接。 

焦点元素包括有网站Logo，最新资讯(Upcoming Events)的黑色底色以及较大粗体显示的用户评语。 

如果继续浏览该网站，可以发现它主要使用了颜色和大小对比来增添额外焦点以及视觉层次。重要信息用粗体大号文字显示，同时以图片作为视觉冲击点。 

Paid to Exist 

Paid to Exist的首页主要元素是顶部的背包图片，其占据了最大的视觉权重，同时由于不规则造型和图片兴趣点特质，很容易就与其它元素区分开来。 

 

焦点元素包括有左上方的网站名，背包图片右侧的粗体大号文字，以及绿色的下载按钮。页面右边的悬浮社交分享栏是另一个焦点区域。 

顺着页面往下看是三个较大的数字圆点，这引起了视觉兴趣以及激发了阅读的动力。圆点，不同颜色的段落句首，统一的浅灰色内容表述，不正好符合了前述的三层划分法？ 

Mandy Sims 

Mandy Sims是一个单页面网站。于我而言，Mandy的肖像以及最大字号的Mandy Sims全名是主要元素。 

 

顺着导航栏往下点，每点开一层，当前层标题的字体都是最大字号的，因而这就成了焦点区域，这正是我要特别指出的。 

此外，页面右边的用户评论是另一块焦点区域，其背景色与选中菜单栏的背景色一致。即使不详细看每节内容，我们都可从用户反馈中知道Mandy为用户了提供了令人满意的服务。 

Vanseo Design 

最后一个实例是我个人的博客网站。页面的主标题是主要元素，我希望人们多阅读我的文章，因此明确地告诉读者他将得到什么。 

 

配图同样吸引眼球，甚至你会认为这更加突出，但这并不需要在每篇文章中呈现。 

最左上角的Logo以及最右上的RSS链接设计为比下方文字更为显眼，但是为了不过于影响观感重点，我没有使用更加鲜艳的亮红色。 

画面左侧是有关本站的介绍以及标签信息，我使用了较大的行距以及加粗字体，以便用户一眼就看清楚博客的主要内容与分类。对于超链接，我不希望它成为强迫用户点击的工具，而是用户在需要的时候自行决定；因此做了特殊处理—斜体字和低明度低饱和度的蓝色字体。 

我的出发点是当用户第一次访问该博客或阅读我的文章时，能够很快地知道文章主要内容以及本站信息(如网站或我的名字)而不用把文章从头至尾都阅读才知道。 

写在最后 

对于有限的页面空间，我们必须做好管家的角色。我觉得最关键的是要避免面面俱到，而是要有的放矢。把自己最想要表达的用不同的突出手法处理好就可以了。 

但是请记得要跟用户多沟通，避免造成误会。 

透过不同事物的对比法能很好地做到这一点。三层划分法是最普遍安全的做法，能够使用户一步步地掌握到我们想表达的信息。三思而后行，多观摩别人的优秀作品可以让我们获益良多。（译者：伍昆 责编：陈秋歌） 

原文来自：[url="配图同样吸引眼球，甚至你会认为这更加突出，但这并不需要在每篇文章中呈现。 

最左上角的Logo以及最右上的RSS链接设计为比下方文字更为显眼，但是为了不过于影响观感重点，我没有使用更加鲜艳的亮红色。 

画面左侧是有关本站的介绍以及标签信息，我使用了较大的行距以及加粗字体，以便用户一眼就看清楚博客的主要内容与分类。对于超链接，我不希望它成为强迫用户点击的工具，而是用户在需要的时候自行决定；因此做了特殊处理—斜体字和低明度低饱和度的蓝色字体。 

我的出发点是当用户第一次访问该博客或阅读我的文章时，能够很快地知道文章主要内容以及本站信息(如网站或我的名字)而不用把文章从头至尾都阅读才知道。 

写在最后 

对于有限的页面空间，我们必须做好管家的角色。我觉得最关键的是要避免面面俱到，而是要有的放矢。把自己最想要表达的用不同的突出手法处理好就可以了。 

但是请记得要跟用户多沟通，避免造成误会。 

透过不同事物的对比法能很好地做到这一点。三层划分法是最普遍安全的做法，能够使用户一步步地掌握到我们想表达的信息。三思而后行，多观摩别人的优秀作品可以让我们获益良多。