UI设计基础知识：层次结构

在界面设计中，一个常见的问题是过多地使用分散在屏幕上的元素或组件，如果没有按照正确的层次结构放置这些元素或组件，就会产生混乱和导航方面的更大努力。对这些要素进行优先排序对避免这个问题很重要。

在本例中，大小、形状和颜色资源用于将视图定向到特定的元素。

一般用户倾向于“扫描”整个屏幕的内容。因此，重点应该清楚地说明网站或应用程序的内容。

要创建一个正确的层次结构，必须考虑以下七个资源:

元素越大，就越容易引起注意。事实上，人们首先看到的是更大的物体，包括文本和图像。使用尺寸层次结构背后的想法是为了给视觉旅程提供一个焦点。

在这张谷歌艺术与文化应用的快照中，标题“Pawtraits:我们不断变化的关系……”比副标题“我们到底感觉如何……”要大得多。通过将这些分数分开，阅读顺序可以避免混淆。

如果从一个文本到另一个文本的跳转更小，比如从32pt到24pt，那么在同时发送两条消息时，阅读顺序就会变得更困难。这可能不是一个大问题，但你应该记住，这可能会创建一个效率较低的层次结构。

明亮的颜色比柔和的色调更突出。色彩是一种强大的视觉资源，它的正确使用可以有效地分离屏幕上的元素来优先或优先考虑它们。在界面设计中，通常最强烈的色彩是交互，因为用户需要采取行动或从系统接收反馈。

在这个Cabifyapp截图中，使用紫色作为主色。旅行路线和“继续”按钮都是第一个层次结构，其次是地图和第二层次结构中的汽车。色调和饱和度的调和使用将这些元素与更加不饱和和不那么重要的背景分离开来。

有三种方法来创建层次使用颜色:

饱和:饱和的颜色比灰色更突出。灰色和他们的尺度总是倾向于降级的颜色极大的饱和，这甚至给用户更多的亲密感。在灰色背景上使用红色就是一个例子。

亮度:明亮的颜色比黑暗的颜色更突出，反之亦然。在黑暗的背景上使用明亮的元素创造了一个直接的层次，这也适用于我们有白色背景和一些黑暗的元素。

靠近的元素比遥远的元素更能吸引人的注意力。在创建阅读顺序时，让组使用距离是一个非常可行的资源。人类的视觉倾向于对元素进行分类，因此，使这种分类基本上有利于使用者的脑力工作。

在Netflix的主页上，第一组包含电影的标题和概要;第二组在底部有六部电影。这些组之间的距离使视图更容易从一个组传递到另一个组，而没有视觉干扰。同样，它们各自组中的每个元素都有自己的划片和边距。

在Airbnb的住宿页面上，房屋的名称、位置和房东的名字属于一个对齐，而对公寓的描述和附图则属于另一个对齐。这条看不见的直线的断裂在两个层次上创造了等级制度。

人类的大脑喜欢模式，这就是为什么许多最好的网站是对称的。这让我们有机会打破这个规则，策略性地将用户的注意力吸引到一个特定的点上。用户将能够根据这些元素的对齐或不对齐来关联它们。

虽然有些设计师可能认为越多越好，但视觉感受是非常不同的。带有大量封闭元素的设计会导致界面饱和，并且没有层次结构来指示哪个元素更重要，从而导致用户的困惑和不知所措。

UI设计中的照片可能是纹理层次结构的最好例子。它们的形状、颜色和渐变总是比平面元素传达更多的感觉。在Masterclass应用程序中，指导员的照片毫无疑问是第一个层次结构，后面是白色的他们的名字，菜单中的红色表示用户的位置。

作者：LeonardoMoreno

5PLUS职业设计学院于2015年创于北京，三位联合创始人设计行业经历总计超过40年。坚守以“倾囊式教学”为中心的教学理念，知无不言言无不尽。希望借助自身行业背景及经验，打造国内最优秀的职业设计师培训学院，为设计师提供职业化进阶指导，提高设计师行业价值，为中国设计行业尽一份微薄之力。