预计阅读时长：13m 34s（4050 字；13 图）
配图制作工具：Figma、XMind
在体验有车以后 APP 的过程中，我们发现，应用中存在着大量各种类型的列表页，例如资讯列表、帖子列表、口碑列表、评论列表等等，而这些列表页都给我们同一个感觉：乱，密密麻麻都是字儿。我们将这些界面拿给其他同事体验后得到的反馈是：看上去很乱，不知道看哪里。
通过将这句话转化成设计上的语言，我们可以发现，这些界面存在的最大问题是， 信息层级混乱，没有形成良好的视觉流。
而这样的界面现状给用户造成的影响是， 无法定位界面的第一视觉焦点，浏览过程比较费力，关键信息及内容的获取效率低下，理解起来比较困难。
我们再进一步思考，是现有的哪些设计细节导致了这样的问题，从而产生了相应的体验问题。同时，找到相应的优化方案。
以上主要是从 视觉表现手法 的角度，去思考界面中存在的细节问题及相应的优化方案。例如，通过元素的大小、色彩、位置、距离等方法对视觉元素进行组织，为用户提供清晰的视觉信息结构。
但在此之前，更重要的是，我们需要 对界面中的信息进行归纳组织，明确信息层级 。否则，有可能导致无法准确传达信息。下面，我们就以资讯列表为例，梳理页面信息层级，输出优化方案。
用户在资讯列表页的核心行为是 「浏览」 ，发现感兴趣的内容，之后才产生下一步行为（进入详情页查看文章，或跳转至相关资讯栏目）。我们的体验目标是帮助用户 快速获取和理解有用、感兴趣的信息。
页面中的信息比较简单，我们从「是否必须」和「重要程度」两个维度进行逐一分析。我们需要思考每个信息的展示目的是什么，起什么作用，能不能去掉，去掉会造成什么影响，影响有多大等等，以此进行衡量和评判。
综合以上所有分析，我们可以得出以下几点优化思路。
在效果图上，我将热评的「火」和背景结合起来，背景框左上角既是「火」的形状，代表热评，同时也指向评论数，加强其与评论数的逻辑联系。但是，由于颜色是灰色，元素尺寸过小，整体效果不太好，需要调整优化。
以下效果图并非最终版设计，仅供参考。
此次页面信息层级的优化尝试还是遵循以往的思路，先了解现状，发现问题，然后找到相应优化方案。在具体的页面里，则是先明确页面定位和设计目标，梳理信息层级，总结优化点，最后输出视觉效果图。
以往我们在进行界面的设计优化时，总是以「体验不好」为由，以「界面改版」为解决方案，然后吭哧吭哧就开始设计视觉效果图。这次尝试 把「体验不好」拆解成各个体验细节 ，总结出一些经验、方法，希望可以在之后的设计中得以应用，并不断优化、进步。