UI设计培训，如何提升界面设计的易读性！

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

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

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

我们每天都在接收成千上万的信息，为什么有些内容一目了然？

有些却让人一头雾水呢？

不论你是设计师、或是产品经理，还是学生，我们经常做项目报告、小短片，如何用最有效的方法呈现你想表达的概念？

什么是你想让观众最先注意到的内容？

在产品设计中，什么CTA (Call-to-Action)是你想强调的？

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

点击添加图片描述（最多60个字）

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

1. 什么是视觉层次？

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

点击添加图片描述（最多60个字）

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

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

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

点击添加图片描述（最多60个字）

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

2. 视觉层次的类别

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

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

点击添加图片描述（最多60个字）

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

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

点击添加图片描述（最多60个字）

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

a. 大小

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

点击添加图片描述（最多60个字）

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

b. 颜色

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

点击添加图片描述（最多60个字）

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

c. 字体/ 字型

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

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

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

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

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

点击添加图片描述（最多60个字）

字体的三种层级

点击添加图片描述（最多60个字）

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

• 字体

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

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

点击添加图片描述（最多60个字）

Hugeinc

• 字型

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

点击添加图片描述（最多60个字）

OBACHEN利用字型强调标题

d. 间隔/ 对齐

• 间隔

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

点击添加图片描述（最多60个字）

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

• 对齐

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

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

点击添加图片描述（最多60个字）

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

小结

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

•质地：Bloom、MSDS

•方向：Take what you can carry、Thing of Wonder

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

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

点击添加图片描述（最多60个字）

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

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

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

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

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

点击添加图片描述（最多60个字）

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。次要的则是各种不同的项目；最后是球队和活动的名称。

点击添加图片描述（最多60个字）

Step 3 设定视觉层次及应用

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

点击添加图片描述（最多60个字）

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

点击添加图片描述（最多60个字）

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

点击添加图片描述（最多60个字）

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

点击添加图片描述（最多60个字）

Step 4 坚持设计

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

点击添加图片描述（最多60个字）

点击添加图片描述（最多60个字）

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

b. 文章列表

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

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

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

点击添加图片描述（最多60个字）

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

点击添加图片描述（最多60个字）

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

点击添加图片描述（最多60个字）

4. 结论

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

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

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