金三银四，最近是找实习与换工作的高峰期，周末在家学弟有发他最近做的一些作品让帮忙看一下，看完后发现比较突出的问题就是信息层级的处理。其实，信息层级混乱是我们初阶设计师在设计中比较容易出现的一个问题。一些关于在界面设计中如何建立信息层级的小方法分享给大家，欢迎大家一起交流，互相学习呀～
01、信息分类与整合
当我们拿到设计原型时第一步就是要对各项信息进行分类与整合，将不相干的信息抽离出来，将相关的信息整合到一块，进行信息的排版布局，处理好各信息之间的关系；就算我们拿到的是交互设计师的交互稿，我们也需要去看一下信息整合得是否合理？有不合理的地方或有疑问的地方及时与交互设计师/产品沟通。信息分类与整合有利于我们进行信息排版布局，帮助用户更好的阅读与获取有效信息；同时也避免因信息分类与整合不合理，而导致我们后续反复调整设计稿。
我们可以根据亲密性原则与格式塔原理对信息进行分类整合，辅助我们进行信息的排版布局。
亲密性原则
信息之间的关联性越高，它们之间的距离应该越近，归为一个组，形成一个视觉单元；反之，信息之间的关联性越弱，彼此之间的距离应该越远，形成多个视觉单元。利用亲密性原则帮助我们进行信息组织，为用户提供清晰的页面结构与信息层级。
所以在排版布局时，亲密性越高我们就让它们的位置越近，亲密性越弱我们就加大间距，让它们隔得更远。
格式塔原理
利用格式塔原理进行信息整合与排版是设计中常用的方法。格式塔原理也是我们在初阶必须要掌握的一个设计理论。
相近原理
人们通常会把位置相对靠近的信息视为一个整体。这一点跟亲密性原则相契合。
在设计中我们经常通过间距规则来控制信息之间的距离，从而让用户分辨不同的信息组织。
小技巧：组和组之间的距离大于组内元素之间的距离
相似原理
人们通常将具有相似特征（形状、大小、颜色、方向等）的物体视为一个整体。
在设计中我们会把具有相同或相似特征的信息或功能归为同一类，并应用相同或相似的设计表现手法。也可以理解为具有相同或相似功能属性的信息我们可以应用相同或相似的排版布局形式。
下图中第一张图都是话题标签，属于同一类的信息，所以布局形式应该是相同或相似的。第二张图都是属于不同数据信息的展示，也是具有相同特征的信息，所以我们在排版布局时也可以采用相同或相似的排版布局形式。除此之外，我们常见的列表、feed流的设计形式都是遵循了相似原理。这样既能帮助我们快速复用相似的设计样式，也能提高开发效率。
主体背景原理
我们的大脑会自动将视觉区域分为主体和背景，主体会占据我们主要的注意力。主体包括吸引我们注意力的所有信息元素，其他的均视为背景。
信息层级越高、越重要的元素越应该成为主体，我们在排版布局时就将这类信息元素进行整合作为主体处理，从而突出与强调此模块。
主体背景原理常应用在弹窗或者首屏卡片设计中，突出核心功能模块与当前重要内容。
……
我们也可以再去了解一下格式塔其它的原理可以帮助我们在设计前期更好的进行信息的分类与整合，让我们的信息排版与布局更加有条理性。
02、建立对比，表达信息层级
通过第一步对信息的分类与整合后，我们已处理好各项信息之间的关系，让页面中的信息更加有组织性与条理性，接下来的第二步，我们需要通过建立对比，来强化信息层级，让页面中各项信息层级关系、优先级顺序更加明显，让用户快速的获取到重要信息，提升识别性与用户体验。
通过大小对比，创建层级
越大的元素会占据更多的空间位置，从而更加吸引用户的注意。在设计中通过大小对比来创建信息层级是比较常见的设计形式。
比如banner位的高度会比其他的设计得更高，需突出强调的文字会更大等。
△通过坑位大小，建立层级
△通过字号大小，建立层级
通过粗细对比，创建层级
通过粗细对比创建层级，在UI设计中主要针对字重。越粗的文字会更引起用户注意。
在设计中，我们常把标题或重要文案进行加粗与放大处理，让其更加突出。常见于标签栏、列表设计等。
通过颜色对比，创建层级
通过颜色对比创建层级，也是UI设计中常用的创建信息层级的方法。重要信息采用高亮颜色，让其更加突出。
在UI设计中文字颜色的对比大家应该很熟悉了，常用的经验性数值为#333（标题），#999（辅助内容）。在设计中我们需通过文字的不同颜色来区分输入态与未输入态。
一些可点击的文字或引导用户进行操作的信息元素我们也应该通过颜色的对比，让其与其他信息区分开来，从而吸引用户注意，提高点击率。我们需注意对于不同的应用场景我们使用的颜色一定要与用户的心智模型相对应，比如是警示信息一般使用红色或橙色，成功的操作提醒使用绿色等。
通过装饰元素，创建层级
在UI设计，在重要的功能模块加上底色或修饰元素，让该模块更加丰富，视觉表现更强，从而与其他模块拉开视觉层级，也是很常用的表现手法，也是我们需要重点关注的一种建立层级的方法。
通过投影，创建层级
界面设计中投影应用得越来越多，趋向简洁化。通过投影来展示不同的信息层级关系，会让界面更加柔和与简洁。
层级越高投影范围应该越广越柔和。
△通过投影，建立层级
03、最后，别忘记统一
我们通过对信息进行分类与整合来排版布局，通过大小、粗细、颜色、修饰元素、阴影来创建对比，建立信息层级关系，让页面中各项信息层级关系、优先级顺序更加明显，同时具有设计细节。
但别忘了最后还有很重要的一点，就是统一。确保不同页面间同类信息采用相同的视觉表现手法，我们可以在将所有的页面横向拉通，来检查我们是否做到统一。通过统一同类信息的视觉表现手法，让我们的设计更加规范。
比如底部的固定按钮我们是通过应用高亮色与加投影的形式让其更加突出，那么我们应该确保所有页面中涉及底部固定按钮的设计形式都是采用这种形式。
△同类信息采用相同的表现手法
总结
合理的信息层级有助于用户阅读与高效获取信息。我们可以通过：
第一步：利用亲密性原则与格式塔原理进行信息分类与整合；
第二步：通过大小、粗细、颜色、修饰元素、投影建立对比，表达信息层级；
第三步：保持同种信息元素采用相同或相似的表现手法，确保统一。
以上就是关于在界面中如何建立信息层级的方法分享，希望对你有所帮助呀～也请大家多多指教。
