视觉层次Visual Hierarchy:提升界面设计的易读性

当你浏览页面时,有没有碰到过类似的困扰?

“这个页面看着好难受啊,感觉页面又杂乱又拥挤。”

“看了好一阵子,怎么觉得没有任何有营养的信息?”

我们每天都在接收成千上万的信息,为什么有些内容一目了然?有些却让人一头雾水呢?

不论你是设计师、或是产品经理,还是学生,我们经常做项目报告、小短片,如何用最有效的方法呈现你想表达的概念?什么是你想让观众最先注意到的内容?在产品设计中,什么CTA (Call-to-Action)是你想强调的?

通过视觉层次(Visual Hierarchy)的设计方法,我们可以引导用户阅读的顺序,让用户吸收有用的信息。

好的视觉层次可以更清晰的传达信息内容

 

1. 什么是视觉层次?

视觉层次,即是传达信息。如何组织、排序内容,让接受者能够尽可能轻易地理解信息。设计师可以利用视觉元素去区别资料的重要性,引导观看者阅读的顺序或焦点,第一个注意到的元素、第二、第三、第四…等。使用的方法包含放大字体、使用强烈颜色去强调关键元素。

视觉层次是有效地组织与排序信息,清楚传达重要信息给接收者

我认为真正的好设计,并不是在于画面多么的酷炫,而是这个设计是否有效传达意念、讯息给接受者。当从事越来越多的用户体验、界面、平面设计后,您会进一步地去审视自己的设计,不论是图示、文字,甚至是流程、方法,是否能利用简单的方式,清楚地表达信息。因此,视觉层次是好设计的其中一个基本,却非常重要的观念。

视觉层次运用的范围十分广泛,包含:PPT简报、文字报告、电子商务、交通时刻表、菜单食谱等。只要有信息的地方,都可以善用视觉层次的方法,排序重要元素,让使用者更轻易地接收信息。

好的设计可以清楚的传达信息,避免不必要的误会

 

2. 视觉层次的类别

视觉层次可以协助观看者区别焦点和资料的重要程度,最基本的观念是质量和对比,质量大和对比强烈的物体会吸引观看者的目光,包含大小、颜色、形状、质地、方向等。

举穿搭的例子,左图女子尽管全身黑,但由于质地不同,产生层次感,我们仍然能区别物件;而右图尽管外套的重量相较轻,但因为红色跳脱其它中性颜色,造成视觉上的焦点。

与穿搭相同的道理,质地(Value)和对比(Contrast)会产生视觉焦点

网络上的文章有不同的分类方式,以下四个类别是最基本的:
大小、颜色、字体、间隔。

运用大小、颜色、字体、间隔可以产生视觉层次

a. 大小

越大的物件越容易吸引观看者的目光。在Hulu的影片介绍,电视剧名称比内容简介更重要,因此使用较大的字体。

Hulu电视剧着陆页运用字体大小呈现内容重要程度

b. 颜色

大胆、对比强烈的颜色容易成为视觉的焦点。在Narrative的网页里,尽管有复杂的插画当作背景,但重点内容运用活泼的萤光色脱离单一色调的背景,观看者很容易被颜色所吸引。

Narrative运用活泼的萤光色跳脱单一色调背景

c. 字体/ 字型

在界面设计中,会将字体区分成三种类别:

— 标题:最重要的信息,通常运用较大的字体、粗体呈现
。

— 副标题:与标题相关的内容,不应该抢标题的风采,
但必须要清楚引导观看者视线,协助他们浏览内容
。

— 内容:内容可以是整篇文章、摘要、简介,重点在于易读性,通常字体较小,英文的字体大部分是Serif。

此观念来自于印刷产业,过去的报章杂志、平面设计大多有此分类。优点在于可以让观看者在浏览页面时,快速区分阅读的重要性,帮助产品规模化。

字体的三种层级

Huntt网页设计也常运用字体三层级的概念

• 字体

字体像是一个人带给人的印象,有些字体很华丽、夺目;有些字体相较柔和、中性,适当的运用字体有助于品牌形象及艺术感。运用大胆、视觉感的字体是近来网页设计的趋势(例如:Xtian Design , BigYouth )。

Hugeinc利用Sans Serif、粗体的Huge字体作为标题,呈现份量感;而底下内容简介则使用较小的Serif字体Copernicus,让文章易于阅读。

Hugeinc

• 字型

字型包含了大小 (Size: 10 pt, 12 pt, 14 pt, and so on)与粗细 (Weight: bold, light, medium),可以增加字体的质量,产生强调的作用。Obachen虽然使用相同字体,但因为字型不同,视觉焦点会放在标题语。

 OBACHEN利用字型强调标题

 

d. 间隔/ 对齐

• 间隔

根据完形法则,物体越靠近,人类的眼睛会将其归类成同类别。这概念时常被运用,包含谷歌搜索页面,除了运用不同颜色,还有两段之间的空白来区分段落。

Google Search Results 运用空白区别不同的网页段落

• 对齐

对齐指的是垂直间隔,一般而言,缩排越多代表是较次要的内容,在书面报告、新闻媒体、电子商务的网页十分常见。Zara网站里左排的选单尽管是相同字体、颜色,但利用缩排即可以呈现三种层级,分别为:

时装系列(Sales, New Collection, Join Life and Editorials) 
→性别(Woman, Man, TRF and Kids)  
→衣服种类(Outwears, Tops, Jeans, etc.)

Zara利用缩排产生内容的层级性

小结

以上我们分别探讨视觉层次的四大要素:大小、颜色、字体、间隔。实际情况都是综合以上四点运用来做设计的。除了上述四点外,其实还有质地(Texture)、方向(Direction)等,有兴趣的朋友还可以参考以下网站:

•质地:BloomMSDS

•方向:Take what you can carryThing of Wonder

如果你强调每ㄧ个元素,则会失去层级性。就像化妆一样,如果你画了浓眉、刷了睫毛膏、画眼线、涂红唇、明显腮红,由于视觉上都是焦点,而失去了重点。

 

举Spotify 价格比较的例子,他们运用了以上哪几个元素,为什么明明这么多信息,但视觉上却十分俐落、一目了然?

为什么这么多信息,Spotify Premium却能用干净的界面呈现?

 

再仔细想想,Spotify这个页面的主要目的是什么?最主要的是让使用者可以订阅Premium,再来才是价格与细节。

首先,Spotify使用强烈、饱和度高的绿色强调CTA (Get Premium);

其次,利用字体三层级,让使用者目光焦距在价格;

其余细节则用较小字体、次要颜色以及缩排降低信息阶级。

Spotify Premium界面分析

 

3. 练习

看完以上的方法,我们来实际练习一次吧!使用以下的步骤:

Step 1 列出所有信息:写下所有需要呈现内容。

Step 2 归纳、排序内容:将相关的内容组织在一起,进行重要性排序

Step 3 设定视觉层次&应用:可以先设定字体三层级,再来调整颜色、间距、缩排等等

Step 4 检查设计:一般我会比对Step 2及成品,是否能达到原本想呈现的效果;也有人会使用* 模糊效果

* 模糊效果:利用模糊效果,去检测视觉层次。可以使用Sketch 或者 Photoshop,大约5–10px就可以辨别。

a. 目录

第一个是工作上的实际项目,在视觉层次上是相当实用、常见的形式,也可以应用在菜单、价位表等。

项目简介: Fevo在MLB的会议里,特别挑选几个重要客户的产品使用数据,制作汇整成一本案例报告,与客户说明产品成效。

形式:印刷PDF

工具: Google doc、Mac内装的Keynote (类似Microsoft的Power point)

Step 1 列下所有信息& Step 2 归纳、排序内容

首先,我和商业部门的同仁一起讨论这本报告的内容及分类,主要有三种类别:Categories, Digital Marketing 和References。次要的则是各种不同的项目;最后是球队和活动的名称。

Step 3 设定视觉层次及应用

首先,先确定基本背景的设计,再来制定字体的三种层级。

将所有内容利用先前制定的层级进行排版,包含对齐、确认相同的间距。

接下来,调整缩排。个人认为缩排的效果十分明显,不需要任何数字标注,可以清楚的呈现资料层级。

最后,为了增加视觉的趣味性及层次,我放上了队伍的Logo,和Fevo的Logo当作背景,同时强化了品牌特性。

Step 4 坚持设计

最后,我们用模糊效果 (5px)去判别视觉层次的效果。原本的文档经过模糊处理后,比较难去区别内容;设计后的版本,因为调整字体、字型大小、颜色、间隔及缩排,可以更清楚的辨别资料的阶级性。

最终设计不但有清楚的视觉层次,同时表现品牌特性

b. 文章列表

第二种类型也十分常见,不论是报刊杂志媒体,或是博客,都会应用到视觉层次的方法。内容大致包含文章标题、时间、作者、摘录。

首先,设计文字的视觉层次,才进行排版(设定间隔、缩排、调整图片大小等)。

范例1:由于是艺术人文类别,我们可以利用Serif的字体作为标题,并用浅灰色的分隔线,带给人一种典雅、清晰的感觉。

 

范例2:音乐类型的文章,因此使用San Serif的HK字体,相较范例一更俐落与现代。另外,我利用白色的色块、浅灰色背景区隔不同文章。最后,附加Hover的效果。

最后,我们再来检视一下两个范例的视觉层次,尽管运用模糊效果,仍能辨别主标题与文章摘录!

 

4.  结论

不论你是个设计师、产品经理、开发者,或是学生,我们可以都通过视觉层次的方法,把复杂的内容转化成阅读者容易消化的信息,引导阅读的顺序。

好的视觉层次并不一定是要夸张的绘画、还是最新颖的Photoshop滤镜。最重要的是能够组织手上的信息,用最容易吸收、有条理地呈现给使用者。

希望这篇文章提供大家一种实用的设计方法。

每天更新,
全站高品质素材免费下载!