详解丨页面的信息层级，这样优化更有效！

      欢迎关注「长弓小子」

    我们都是为梦想一起努力的人

先来看看上面这张图。你大概率会按照文字所写的阅读顺序进行阅读，这也是本图的设计师所希望的。如何巧妙的引导用户阅读信息？如何准确快速的传达信息并减少用户获取信息的成本？本文从内容层面和视觉层面总结了页面信息层级的优化方法，希望会对你有所启发。

   全文共 1567 字 13 图（含 1 动图），阅读需要 8 分钟

从内容层面做优化

页面的优化应该先从分析页面的功能和内容出发，通常有以下几种方法：

  1. 根据内容的优先级进行优化  

在信息量较大的页面中，设计师需要充分了解产品功能和用户所需，对页面的内容进行划分，明确各部分内容的优先级，建立信息层级。可以从产品和用户两个角度思考页面信息的优先级：

• 产品 / 页面的核心功能和辅助功能

• 产品 / 页面最希望用户看到的信息

• 页面中的固定（不变的）信息和动态（常变的）信息

• 用户的浏览习惯和使用行为

• 用户最想看到的信息

• 用户需要的功能和信息

• ……

举个例子，下图为某投资类 App 每周发给用户的报告。你会先看到哪些内容？

分析一下页面信息内容，我们会发现：

上图中序号 1 和 2 这两部分内容是固定信息，序号 1 是该 App 品牌识别的一部分，序号 2 的内容则会在此类型的报告中重复出现，老用户一般不会在意。序号 3 是唯一的动态的、常变的信息，是报告要传达的核心信息，也是用户最关注的信息内容。

因此设计师在对该页面优化时，可以重点突出序号 3 这类常变且用户关注的核心内容上，以此来调整页面布局，更高效的向用户传达信息，如下右图：

  2. 根据内容的亲密性进行优化   

亲密性原则是设计师应该掌握的基本设计原则之一，其宗旨是：彼此相关的内容应该适当靠近，形成一组。下图中右边是经过整理后的页面布局，会使页面变得更为易读：

亲密性原则可以使有关联的信息呈现得更有组织性，如下图两款 App 中的内容布局：

从视觉层面做优化

从视觉层面对页面进行优化的效果会更为直接，通常用以下几种方法：

   1. 将页面黄金位置留给主要内容   

通常情况下，用户浏览页面会按照从左上至右下的顺序，而且一般先看到水平方向的内容，后看到竖直方向的内容。下图的天猫 App 中，用户最常用的订单相关的功能被放在整个页面中部偏上的黄金位置：

   2. 使用对比手法   

视觉效果中的对比手法体现在很多方面，如大小对比，色彩对比，动静对比等等：

   大小对比：通过界面元素的大小对比凸显信息层次，信息内容越重要，体量占比越大，次要的内容则适当缩小：

在做文字的排版时，也要注意字号之间的大小和色彩对比，如下图豆瓣 App 中的电影推荐内容的标题、评分、短评、标签的字号各不相同，有清晰的层次感：

   颜色对比：界面中使用大面积的色块背景，衬托主要内容，与其他内容形成强烈对比，吸引用户的注意力：

也可以用不同颜色的小面积色块，形成对比，区分内容板块：

   动静对比：想要突出的内容采用适当的动画效果，吸引用户的注意力，比如支付宝界面按钮的变化、banner 的切换：

   3. 使用阴影区分层次   

界面的信息层级可以通过阴影效果体现层级的高低，不同层级的元素阴影效果不同。用户通常会先看到最顶层的内容。我们在之前的文章 Material Design 全面解析 中，详细介绍过阴影对于界面元素层级的影响，戳下图可回顾文章：

下图中的滴滴 App 和相遇 App，用阴影强调用户应该填写或需要注意的内容信息：

   4. 使用不同的元素组合方式  

界面的元素有多种排列的方式，文字和图片也有不同的组合方式，不同的排版方式可以有效的区分信息版块，比如下图中口碑 App 中呈现美食就有很多种不同的排版方式，用来区分不同的内容版块：

   由于篇幅所限，关于页面优化后如何进行检测，日后会为大家推送，欢迎关注。

本文图片及内容参考来源：

https://uxdesign.cc/visual-hierarchy-oriented-by-users-levels-5adc621c42b3

https://www.zcool.com.cn/article/ZNjk4Njc2.html

http://www.woshipm.com/ucd/403666.html

- END -

关注「长弓小子」公众号

欢迎「留言」共同切磋

这里有和你一样为梦想努力的小伙伴