页面|列表页信息展示，如何搭建视觉结构？

编辑导语：如何做好列表页的信息展示，让用户可以更加清晰地获取信息，在提供用户更好的视觉和使用体验时，推动用户的下一步操作？你可以利用多种方法，如留白、分割等，搭建合理的视觉展示结构。本文作者便做了相应总结，一起来看一下。

文章插图
在列表页设计信息时，面对多种视觉结构时该采用哪种比较合适的疑惑，思考以下了问题：

用户是如何有效认知信息？
信息使用哪种视觉容器，能更好表现不同信息之间关系的目的，以及在阅读与使用时能带给用户更好的体验？
由于手机屏幕尺寸有限，怎么再增加屏效？

笔者接下来会按以下方式来讲述：

为什么需要信息整理；
列表页信息组织方式有哪些；
设计注意；
总结。

一、为什么需要信息整理？思考一下在界面中，当信息以一种无序的排列，和信息以结构化的排列相比，为何大多数的界面都选择了后者。
设计师在设计信息如何在界面展示时，都在思考如何使用户更快理解从而产生下一步操作，本篇文章分析与总结了信息如何通过有效结构化展示，来覆盖各种场景，使用户体验更加流畅，来和读者共同探讨。
用户如何认知信息？用户在看到界面的时候，会无意识在思考“哪里最重要”，接着就会思考“与它有关联的信息有哪些？”等等问题，所以我们在设计界面时，应通过建立合适的视觉层级以及不同信息之间的关系，来解决用户所遇到的问题。
1）建立层级：主要通过字体、字体大小、粗细、颜色来区分层级（文章通过会结合具体实例来解释）。
2）建立关系：为了传达信息之间的关系，比如说上下属关系：菜单栏标签A与标签下方的内容a就是上下属关系，可以通过视觉上的组织与空间上的组织进行设计。

视觉上的组织：视觉上感受信息之间的关系主要是通过接近性、相似性、连续性，共同背景等方式。
空间上的组织：单页面空间里，人一般有从左至右、从上至下的阅读习惯的顺序。

二、列表页信息组织方式有哪些？1）列表页单个容器内信息的组成部分有标题、辅助信息、图片/icon、操控按钮、提示信息等。
标题与辅助信息在信息层级上，一般通过设计规范的不同字号、颜色和粗细来区分层级。
信息关系上主要利用格式塔原理之一——接近法则，进行信息分组。接近性原理是指：物体之间的相对距离会影响我们感知它们是否以及如何组织在一起。互相靠近（相对其他物体）的物体看起来属于一组，那些距离较远的就不是。
辅助信息在使用时，为了提高屏效会有字数最长限制规范，当超过时，采用的缩略方式有：末尾截断、中间截断。

末尾截断：当超过限制时，超过字数常用“…”来替代隐藏内容，比如段略文本常采用方式。
中间截断：保留开头和结尾，在文字结尾规范字数处截断，除了缩略文本外，还对于过长且名称前部分类似的信息，通过末尾部分的文字进行区分。

辅助信息：也还可以通过不同的对齐方式与标题文字进行区分，展示内容一般是来对跳转的二级界面进行解释说明，以免用户对于标题的产生误解，而产生的不点击行为或者误操作。
操控按钮：一般是提示用户，这部分是可点击交互的模块，不是静态信息。所以操作提示一般可作为中性、或积极操作暗示。
操作提示可分为：按钮、按钮加文字、文字或没有，可根据内容目的采用对应方式，比如说，当在营销活动时，可采用：文字：“立即购买”、或者文字“立即购买”?icon，或者内容区信息过多可采用：icon，或者不用按钮暗示，因为卡片的结构形式已经暗示用户可点击的操作行为。