信息卡片中的信息层次设计分析

01.背景介绍

有一次和同事订机票，收到机票预订成功的短信时，发现群里同事们截图的画面各不相同，我的画面尤其让人眼前一亮，后来得知，原来这是华为手机进行过信息提取和自定义设计的。

结合小组内同学对于信息处理集中出现的一些问题，于是便整理了一个关于信息卡片的信息层次设计的一个小专题，与大家一起学习。同时希望视觉设计师可以学习在视觉设计的过程中，如何运用交互设计思维来助力。

在进行信息卡片设计分析之前，我们先理解两个问题。

问题1：

问题2：

Jeff Johnson在《认知与设计》一书中，有提到“阅读是一种人造的、通过系统的指导和训练获得的能力。很多人从不学习如何更好的阅读，或者根本不学习如何阅读。”

但是在我们设计的界面，无法避免阅读。特别是我们提供的内容中，有需要用户获取的信息时，面对不同阅读能力水平的用户，清晰的信息层次便显得无比重要。

在阅读信息的过程中，我们有些设计师以为用户通过获取界面信息从而产生理解。实际上寻找信息的过程，更多地是在印证脑海里的信息。

同时，以特征驱动、自上而下的阅读方式为主，情景驱动的方式为辅。

基于人们的阅读习惯和能力，那么信息的呈现就必须是结构化和精炼的。

如何对信息进行结构化，需要理解信息设计包含的三个要素：

02.案例分析-流程与结构

理解了信息层次中的决定要素，接下来通过案例分析和理解。

这是一种典型的流程型信息卡片。

很多视觉设计师缺乏对需求的深度理解，拿到原型后，很自然而然地直接基于原型进行视觉设计。虽然信息有了一定的层次处理，但仍旧未发挥视觉层面的最大价值。

在流程型信息卡片设计中，最重要的是要根据不同阶段，呈现对应的信息。这样能保证用户最快获取信息，并减少对不必要信息的干扰。其次，不同阶段的信息呈现尽量保持相同的结果，不管是布局方式、显示顺序、还是表现手法。

其实本案例中的情况，比较普遍的出现在处于修饰者、区分者阶段的设计师中。他们思维方式和设计习惯的长期作用下，使他们将关注点更多的放置于表现层的发挥。类似一句俗话，美人在骨不在皮。最终表现层的价值，是与框架层、结构层等息息相关。因此我们拿到任何项目需求进行设计时，每个岗位都可以多多思考，从哪个层面来梳理和切入，可以让最终的体验更符合目标。

03.案例分析-关注频率

流程型信息卡片的另一个因素：关注频率

关注频率也会影响信息层次和结果，关注频率越高，关键信息越要精炼和突出；反之亦然。

仅仅将信息排列整齐是不够的。依据7±2原则，信息量较多时，我们可以通过组合、转移等方法，对信息进行拆分，同时减少不必要阅读的信息。救援项目、状态，相对于其他信息，本身具备明确指向，所以可以去掉标题。状态是一个变化元素，且相对于其他信息更重要，使用标签化处理。

03.案例分析-信息组合与阅读效率

有时候，我们很习惯地通过增加图形元素，来增加页面的留白与美感。但好看的就一定好用吗？

在信息量不变的情况下，前后效果图的处理让用户提取信息的效率大大提高：

1）剩余流量：作为将来时信息进行放大处理，与进度图表组成一个信息；

2）已用和总流量：作为次级信息，处理成同一层信息；

3）查看套餐：作为低频信息，通过图形化处理弱化和简化；

4）车辆信息：弱化，减轻头部占比，突出卡片；

5）历史订购：低频信息，转移到弱视觉区域；

04.案例分析-图形因素

信息卡片设计中，图形是一个很重要的元素。它同时具备功能需求和情感需求。

在本案例中，车辆图片的使用会带来多方面的影响：

1）此卡片同时作为功能入口，更应该突出功能还是车辆？

2）车控的每个功能，都需要匹配一个车辆图形来提醒用户操作的是那一台车吗？

3）车辆是否要匹配用户购买的实际车型？这里产生的工作量是否匹配产生的价值？

4）同一个页面下，多张卡片上都出现车辆图形，如何处理？

05.总结

案例分析完毕。关于场景型卡片，本篇讲述不多，感兴趣的同学可以继续探索。当多卡片集中出现在一个层面时，卡片之间的位置、占比、层次，对于每张卡片的信息呈现，又会产生哪些制约和影响？

信息卡片设计中关于信息层次的理解，可以放到整个页面，是一样的道理。信息设计的背后，是基于用户对信息获取、信息反馈、结果执行一连串动作的映射。而这一切的基础，是设计师们对信息内容的解析。