一看就会的【信息层级处理】方法解析

随着信息量的爆炸式增长，设计师面临着如何在繁杂的信息中梳理出清晰的结构，以便用户能够快速、准确地获取所需内容的挑战。信息层级处理作为UI设计的关键环节，对于提升用户体验、优化界面布局具有重要意义。

本文会重点阐述信息层级处理的具体方法，帮助大家解决更多设计问题。

我们可以简单感受下面两个界面，可以直观地感受到信息层级处理所发挥的价值

刚入行的设计师们一定经常遇到这些问题：

原型上这么多内容，怎么排版都不好看

明明看起来挺规整的，但还是很奇怪

找不到素材参考，脑子里没有想法

...

下面我将结合实际案例，告诉大家如何先做好入门基础信息层级处理，这可以解决 70%的视觉排版问题；其次会由浅入深，告诉大家进阶级的处理方式，去为更复杂的页面提供更加合理的解决方案

对比是指在设计中制造信息视觉效果上的差异

通过突出重要信息，弱化次要信息，引导视 觉动线，让用户可以分清主次

我们可以看看下面两张图，可以明显地感觉右边强弱对比明显，非常好地引导用户浏览与操作动线，这里面包括了颜色上的对比，字体大小/粗细的对比、质感的对比等，也体现出了极好的设计精致度。

通过字体、图形的尺寸大小进行对比

通过深浅、冷暖进行对比

通过规则与不规则形状进行对比

通过模糊与清晰进行对比

通过不同的表面效果进行对比

通过不同方向（上下左右）进行对比

通过制造元素的所处层级高度进行对比，阴影是常见的处理手法

这些对比方法是可以结合使用的，例如下面这张图基本用到了所有的对比方法，呈现出了兼具美观与清晰的效果

对齐是指设计中将各个元素建立有机的关系，让画面看起来更整齐、规范

我们可以感受一下

符合从左到右的阅读习惯，阅读体验最佳

适用于填充四周以达到平衡效果；其次在后台表格数据展示中，也会以右对齐的方式，方便比对

比较严肃正式，具有形式感， 适合信息较少时使用，常见于官网等场景

亲密是指将相关联的元素放在一起，让信息更加聚合，帮助用户快速理解信息之间的关系

我们可以从例子中看到，要达成亲密原则，实际上会使用一些分割手段，

下面也给大家提炼一下

。

指的是利用元素之间的间距，自然地将信息进行分组

以下图方块为例，当横向间距加大后，明显可以感知到信息被分为上下 2 组；当纵向间距加大后，信息则被分成了 4 组

以下是实际场景中的应用，运用好留白分割，会有更加清爽简洁的效果

信息层级较少时（≤2）。理论上只要分割间距够大，就可以形成信息分组，但当不同信息内容越多，间距层级就越多，只用间距来判断往往就比较模糊了（也可以理解为缺少对比），因此不能只为了简洁而简洁。

指的是用分割线进行信息分组，对比与留白分割，线性能够划分出更加清晰的层次，但过度使用往往会让页面干扰更多，所以我们注意保证其能够注意到，但不突显

信息层级较少时（≤2），且当留白不能起到分割作用时再使用线性分割，线性分割在视觉上能够让视觉分组感更强，也会起到一定的装饰性

指的是用有包裹感的容器，将信息形成一个组合并置于容器之内的

通常以两边是否有间距为标准，分为两类卡片，通栏卡片和非通栏卡片。

从视觉效果上看，通栏卡片用较大背景色做上下间距处理，比较规整严肃；非通栏卡片包裹感与独立性更强，且可进行多效果处理，包括圆角、阴影等，有利于提升视觉层次，其次产品设计中时常会出现横向滑动的交互形式，可应用于绝大多数场景；

因此当留白分割和线性分割都无法解决层级问题的时候，可优先使用非通栏卡片，它有助于我们设计出更清晰且更美观的层级效果

大家工作中肯定会纠结一个问题：白色背景上的卡片，什么时候用线框？什么时候用色块填充？以及应该用灰色块，还是彩色块？

我这边根据场景归纳了几个原则，大家可做参考:

1.

二者可搭配使用，无需强行为了统一只用一种形式。色块在视觉上天然会比线框更加厚重突出，因此越重要的信息，可以优先考虑使用色块填充；次要信息可搭配使用线框卡片

2.

信息数量少时，可以使用色块填充，可以弥补页面单调的空白；信息数量多时，可以使用线框卡片，避免过多的填充色分散用户的注意力。

二者在页面中也可搭配使用。

适用于页面中需要强引导用户的区域，例如运营入口等；

适用于全局所有剩余的层级分割场景。

重复是指将在设计中连续使用相同或相似的元素，以比较规律的形式进行排列组合，以提高页面的统一性和秩序性，同时也能让用户感知这是一个层级的内容

但较为频繁地重复设计会让用户有麻痹感，因此在实际场景中我们会做一些节奏处理（也可以理解为是对比），例如在 Feed 流中插入另一种样式的卡片，打破单调感的同时可以很好地引导用户探索

上面分析的这 “四板斧”，的确可以有效地设计出一个整齐的页面，但一个用户体验更好的产品，往往还需要根据场景去做处理，甚至需要结合一些交互方式。我们经常会接到这样的需求，原型上有大量的信息呈现，一眼就能感知到了信息的复杂程度，直白地使用“四板斧”进行设计，显然不能很好地解决问题。有经验的设计师肯定不会全盘接受，而是根据业务场景，用户诉求进行判断信息的合理性。

根据竞品处理方式、工作经验，我归纳了几种方法

人的注意力是有限的。在日常生活中，人们会接触到海量的信息。例如，当你走在大街上，周围有各种各样的广告、人群的交谈声、车辆的声音等。如果不简化这些信息，大脑就会被过多的刺激淹没。就像一个人在嘈杂的市场中，如果试图同时关注每个摊位的叫卖声、每种商品的细节，很快就会感到疲惫和困惑。简化信息可以帮助人们将注意力集中在最重要的内容上，比如当你想买水果时，你会忽略五金店的广告，而专注于水果摊的信息。

综上所述，我们也需要时常考虑一个问题：

最大程度地删去不必要的措辞，例如可以将“保存该修改内容”修改为“保存”；但不能将“为了让您的账户更加安全，请设置手势密码”修改为“请马上设置手势密码”，这样用户感受不到操作的意义，增加理解负担，变成了负优化（文案设计也是一门大学问

奥卡姆剃刀原理提到，如无必要，勿增实体，我们在页面中只需要保留常用的，隐藏次要的。例如针对于某功能的解释文案，非高频查看，即可以进行鼠标悬停展示，用户根据所需进行操作

可以将文字信息转化为可视化图形。相较于文字，大脑更容易记住图形。这是因为大脑处理视觉信息的区域与处理文字信息的区域不同。人们可能很难记住一篇冗长的产品说明书文字，但如果将产品的使用步骤用简单的流程图展示，用户很容易理解且回忆。

例如产品上新了功能，一般都会有功能引导，如果用纯文本介绍，会非常冗长，用户也不会愿意阅读，若搭配对应的插图用于解释，那么既可以丰富画面，又可以为文案提供精简的空间。

，数据大屏，都是用【转化】的方式去处理复杂的文字层级，让其变得清晰易懂。

可以理解为将复杂的信息、任务分解成多个较小、精简的步骤，或划分成多个页面，通过这种策略优化信息展示密度。好比几百万字的书籍，分解成了几百页而不是一个长页。

，若填写项太多，在一个页面中呈现难免产生繁琐感，且信息层级难处理，因此我们可以根据信息关联度以及用户心理认知进行步骤划分，保证每个步骤都合适且有明确目的

人的记忆容量也是有限的，这里特指短期记忆。乔治・米勒（George Miller）提出的 “神奇数字 7±2” 理论表明，人的短期记忆一般只能容纳 7 个左右（上下浮动 2 个）的信息组块。如果信息过于复杂，超出了这个范围，就很难被有效地记住。例如，一个很长的电话号码，如 13812345678，人们通常会将其简化为 138 - 1234 - 5678 这样的组块形式来记忆

在许多 APP 常见的金刚区里，就常用到分页的处理方式，考虑页面屏效与信息层级，它们会将数十个运营入口进行优先级划分，并进行分页排布。

B 端后台类产品，因复杂的业务逻辑，常常出现多级结构的布局或交互形式，如下图

我们可以明显地感知到页面的堆砌感，且不利于屏效，因此我们可以合理运用横向空间，变为左右结构，而不仅仅是做纵向的信息分层

以上就是九种处理信息层级的方法，包括入门的【对比、对齐、亲密、重复】，还有进阶的【简化、转化、分步、分页、分层】。

当然仅有设计方法还不够，我们还需综合考虑多方面因素，包括功能定位、目标用户的浏览习惯与心理预期，还有不同设备的显示特性等，以此来精准设计出合理的设计方案。

设途漫漫，偶有星光，愿我们在设计之路上不断前行，共同进步。