视觉层次设计提升UI设计的易读性
当你浏览页面时，有没有碰到过类似的困扰？
这个页面看着好难受啊，感觉页面又杂乱又拥挤。”“看了好一阵子，怎么觉得没有任何有营养的信息？
我们每天都在接收成千上万的信息，为什么有些内容一目了然？有些却让人一头雾水呢？
不论你是设计师、或是产品经理，还是学生，我们经常做项目报告、小短片，如何用最有效的方法呈现你想表达的概念？什么是你想让观众最先注意到的内容？在产品设计中，什么CTA是你想强调的？
通过视觉层次的设计方法，我们可以引导用户阅读的顺序，让用户吸收有用的信息。
什么是视觉层次？
视觉层次，即是传达信息。如何组织、排序内容，让接受者能够尽可能轻易地理解信息。设计师可以利用视觉元素去区别资料的重要性，引导观看者阅读的顺序或焦点，第一个注意到的元素、第二、第三、第四…等。使用的方法包含放大字体、使用强烈颜色去强调关键元素。
视觉层次是有效地组织与排序信息，清楚传达重要信息给接收者
我认为真正的好设计，并不是在于画面多么的酷炫，而是这个设计是否有效传达意念、讯息给接受者。当从事越来越多的用户体验、界面、平面设计后，您会进一步地去审视自己的设计，不论是图示、文字，甚至是流程、方法，是否能利用简单的方式，清楚地表达信息。因此，视觉层次是好设计的其中一个基本，却非常重要的观念。
视觉层次运用的范围十分广泛，包含：PPT简报、文字报告、电子商务、交通时刻表、菜单食谱等。只要有信息的地方，都可以善用视觉层次的方法，排序重要元素，让使用者更轻易地接收信息。
好的设计可以清楚的传达信息，避免不必要的误会
视觉层次的类别
视觉层次可以协助观看者区别焦点和资料的重要程度，最基本的观念是质量和对比，质量大和对比强烈的物体会吸引观看者的目光，包含大小、颜色、形状、质地、方向等。
网络上的文章有不同的分类方式，以下四个类别是最基本的：大小、颜色、字体、间隔。
运用大小、颜色、字体、间隔可以产生视觉层次
大小
越大的物件越容易吸引观看者的目光。在Hulu的影片介绍，电视剧名称比内容简介更重要，因此使用较大的字体。
Hulu电视剧着陆页运用字体大小呈现内容重要程度
颜色
大胆、对比强烈的颜色容易成为视觉的焦点。在Narrative的网页里，尽管有复杂的插画当作背景，但重点内容运用活泼的萤光色脱离单一色调的背景，观看者很容易被颜色所吸引。
Narrative运用活泼的萤光色跳脱单一色调背景
字体/ 字型
在界面设计中，会将字体区分成三种类别：
— 标题：最重要的信息，通常运用较大的字体、粗体呈现。
— 副标题：与标题相关的内容，不应该抢标题的风采，但必须要清楚引导观看者视线，协助他们浏览内容。
此观念来自于印刷产业，过去的报章杂志、平面设计大多有此分类。优点在于可以让观看者在浏览页面时，快速区分阅读的重要性，帮助产品规模化。
字体的三种层级
Huntt网页设计也常运用字体三层级的概念
字体像是一个人带给人的印象，有些字体很华丽、夺目；有些字体相较柔和、中性，适当的运用字体有助于品牌形象及艺术感。运用大胆、视觉感的字体是近来网页设计的趋势(例如：Xtian Design , BigYouth )。
Hugeinc
字型
字型包含了大小 (Size: 10 pt, 12 pt, 14 pt, and so on)与粗细 (Weight: bold, light, medium)，可以增加字体的质量，产生强调的作用。Obachen虽然使用相同字体，但因为字型不同，视觉焦点会放在标题语。
OBACHEN利用字型强调标题
间隔/ 对齐
间隔
根据完形法则，物体越靠近，人类的眼睛会将其归类成同类别。这概念时常被运用，包含谷歌搜索页面，除了运用不同颜色，还有两段之间的空白来区分段落。
Google Search Results 运用空白区别不同的网页段落
对齐
时装系列(Sales, New Collection, Join Life and Editorials) →性别(Woman, Man, TRF and Kids) →衣服种类(Outwears, Tops, Jeans, etc.)
Zara利用缩排产生内容的层级性
结论
不论你是个设计师、产品经理、开发者，或是学生，我们可以都通过视觉层次的方法，把复杂的内容转化成阅读者容易消化的信息，引导阅读的顺序。
好的视觉层次并不一定是要夸张的绘画、还是最新颖的Photoshop滤镜。最重要的是能够组织手上的信息，用最容易吸收、有条理地呈现给使用者。
希望这篇文章提供大家一种实用的设计方法。
相关文章
本页面最后更新于 2021年06月26日 16:15
