编辑指南:信息容器是信息的载体，里面装载了文本、图片、视频等各种操作控件。信息容器有多少种类型，不同类型的特点是什么，如何应用？本文作者对信息容器进行了分类，并从六个维度进行了分析，希望对你有所帮助。

有各种形式的信息，如图片、文本、视频、音频等。，携带信息的形式也是多种多样的。本文对信息容器进行了整理和归纳，总结出一些经验规律。

01信息容器的概念

信息容器是信息的载体，位于内容层。要理解信息容器的概念，首先要理解界面中的层次关系。除了垂直和水平尺寸，界面还具有深度尺寸。

从底层(远离用户)到顶层(接近用户)，基本可以分为以下几层:

背景层信息层全局操作层（各种常驻于屏幕的bar、悬浮按钮等）浮出层（模态类型的浮出层还需要有蒙版进行隔断）

本文要讨论的“信息容器”是指信息层上装载信息的载体。有各种类型的信息，如文字、图片、视频、各种操作控件等。

02信息容器的常见类型

常见的信息容器主要有两种:列表和卡片。

在整理案件的时候，我不禁有一个疑问。什么是列表，什么是卡片？如何定义和区分两者？乍一看，这个问题听起来有点扯淡。列表不是列表吗？当具有一致布局的多个窄单元被组合时，形成列表。那么什么是卡呢？与屏幕两侧保持一定距离。卡是圆角的吗？

我们先来看看下面这个案例:

2.1如何定义列表和卡片？

为什么布局相似，在上图中，图1感觉像列表，图2感觉像卡片，图3看起来既像列表又像卡片？从内容层面来说，包含的信息类型有:文字、图标/图片、按钮。几乎没有太大区别。是什么导致了我们感知上的差异？电子商务案例或许能给出答案。

从电子商务产品的产品列表页面可以看出，用户可以独立选择两种不同的产品展示模式:列表模式和卡片模式。

这两种模式几乎可以对应两种信息容器样式:“列表”和“卡片”。信息量完全一致:主图、标题信息、价格信息、辅助信息、相似的展示效率(一屏展示4.5款左右的产品)，不同的信息容器展示形式给人不同的感受。

列表和卡片不能简单地从信息层面或视觉层面来定义。如果多维叠加定义过于繁琐，那么列表和文中给出的卡片的直接区别就是可以独立定位关键线索，规划视觉浏览动作。如果视觉浏览的大致方向是垂直的，则归类为列表类，浏览的动线不是垂直而是虚线，则算作卡片类。

2.2常见信息容器的分类

除了上面提到的两种最常见的信息容器:列表和卡片之外，还有另外两种形式，即无容器和复合容器。这些容器的具体特点是什么？让我们一个一个来看。

03列表

列表的定义:垂直放置结构一致的信息单元形成的信息集。不同的场景应该呈现不同的信息。

举例说明几种常见的列表形式:

用户/消息列表图文列表功能列表“卡片型”列表

3.1用户/消息列表

用户/消息列表的内容结构清晰，包括头像+身份+内容汇总+辅助信息。图片自然比文字更有吸引力，视觉优先顺序为头像>身份>总结>辅助信息。当然，用户可以轻松选择关注的对象是图片还是文字，体现了列表的优越性。浏览线是垂直的，可以方便用户根据自己想要的索引快速定位。

这里值得讨论的是头像是方的还是圆的。这个问题相信大家都想过。也是一种社会产品。qq是圆头，微信是方头。这里的原因是什么？

本文试图对此进行分析。只是个人看法。欢迎讨论。

根据理论，圆头的亲切感形态知觉更适合于语气轻松的产品，方头的严谨感形态知觉更适合于语气严肃的产品。这说明电商产品(淘宝、JD.COM)的信息通知一般是圆头的，与轻松愉快的网购体验相匹配，而金融产品(支付宝)大多是方头的。对于微信和qq这两种熟人社交产品来说，qq用户更年轻，属性相对更活跃，更放松的圆头可能更适合这类用户。

以iOS为例，当用户向左滑动列表时，对列表单元的操作被调出。具体列表对应具体操作，操作项数量不同。

方案a:

优点：操作底板宽度适应文案，不会出现空间局促的现象。缺点：当文案字段长时，列表被推出屏幕外的内容较多，当用户操作分心时，可能会忘记正在操作的对象，虽然这种情况极少发生。

选项b:

优点：操作底板固定，文案折行规则明确，既不会造空间拥挤，被挤出屏幕外的列表区域可控。

选项c:

优点：搭配图标，视觉更丰富。缺点：图标占据了一定高度，导致文案无法折行，列表被推出屏幕外的内容较多，与方案A类似。

综上所述，我个人认为方案B是最合理的，对副本的长度有很高的容忍度，即使副本很长，也能保证视觉上的和谐，保留更多的列表内容。

在色彩策略上，采用大众接受的“语义色彩”，一些特定的色彩在长期的经验积累中形成了固定的语义。

当用户触发破坏性操作时，用户需要进行第二次确认。不是所有的情况都需要二次确认，二次确认的类型有很多种。

都是模态视图，要表达的信息是相似的。都要求用户做出选择。为什么有的产品选择对话框居中，有的产品选择把对话框放在底部？模态观有一些知识点。本文旨在探讨信息层面。模态视图涉及到表面层次，这将在下一篇文章中详细讨论。本文不做过多延伸。

3.2图形和文本列表

信息流产品一般由图片+关键副本+标签(可选)组成。不同的产品侧重点不同，所以根据内容的重要度权重来分配视觉比例。

从上面的例子我们可以看出:

在图文比例从左到右依次提升；图文布局案例1-3使用了左文右图的方式，案例4-7使用了左图右文的方式。

通过弄清楚如何布局图文，设置图文比例，基本解决了信息流页面最关键的问题。

信息列表，或者说feed stream，主要是根据用户的喜好推送内容。除了从用户的日常浏览、搜索等行为中提取用户偏好信息外，用户主动反馈的信息准确率更高，用户不惜花费更多的运营成本来提示产品，对内容不感兴趣。

视觉上讲:

提交反馈的入口（小而浅的icon）都不明显，有些产品用“更多”来提示用户，有些产品用更加负面的“关闭”来提示用户。当用户对内容产生较为强烈的反感时，才会注意到屏蔽入口。常规浏览时，该图标不会影响用户注意力。反馈形式采用模态对话框，用户需要选择具体操作，是屏蔽内容或作者、还是举报或不感兴趣。对话框是否有指向性：从表意明确的角度上来说，带有箭头的气泡更有利于用户定位对象。

互动地说:

反馈入口热区小，容易误触。在大多数情况下，用户不会关注和点击图标，用户的主要行为是浏览。

3.3功能列表

一般来说，列表索引的主要形式是定位字符。不同的用户有不同的认知水平，图标表意表达一直是一大难点，多用于辅助记忆或者单纯提高视觉审美。图标是设计风格的重点，但在具体情况下，比如设置页面，用户更注重快速找到自己要找的内容，多种图标风格实际上会损害用户的检索效率。

有十几个通用功能页面或者很多功能。在这种情况下，检索效率低是一个痛点。如何提高检索效率？-分组

分组为用户提供了认知线索。根据格式塔原理，用户总是倾向于将距离较近、风格统一的元素放在同一类别中。没有分组显然不利于检索，用户需要逐个浏览。这种情况适用于无法分组的分组项目。如果有分组条件，则必须进行分组，以帮助用户节省筛选成本。

在用户界面中，有三种常见的方法来划分列表:

线条分割块面分割间距分割

3.4“卡类型”列表

在我们固有的概念中，大圆角、无柱、无投影的图像是一张卡片。这种风格越来越流行，很多产品都尝试用“卡”来包装单子。

虽然是很详细的一点，但是精细加工后的结果会立刻打开与批量加工结果的差距。产品级风格统一来自小细节。

04卡

卡片的类型有很多种:单行卡、泳道、内容流(两列网格、瀑布流)、宫殿网格。

4.1大牌

在内容显示效率方面，单个大卡片占据了屏幕一半以上的高度(刘海平)，用户需要不断滑动屏幕来浏览下面的内容，所以运营成本高。大卡片格式对内容本身的质量要求很高，比如图片。这种模式常见于图片社区或垂直电商产品。图片社区(比如平躺)比较小。即使以UGC(用户生成内容)为单位，用户上传的图片素材平均水平也很高。垂直电商产品(如Nike)的画质由编辑控制，质量高且稳定。以上类型的产品不以数量吸引用户，用户更倾向于关注内容本身是否优质。用户没有明确的目标，脑子更像是在浏览杂志。浏览产品提供的内容。从以上案例可以看出，除微信阅读外的三款产品首页并没有突出搜索功能，主要呈现信息流。

与列表分割一致，卡片也有相应的分割方法。

大卡占用大屏幕面积。理论上考察大卡的内容质量。有些产品不与大卡容器交互，直接点击卡进入详细页面。有些产品以相对低调的方式收集用户对内容的意见。比如微信读者长时间按卡，可以选择不再显示卡上的内容，产品收集反馈，这样对用户喜好的描述就可以进一步可视化、准确化。长按不是高频手势，用户触发手势往往是试探性的，表示用户对内容确实有意见要传达。平躺使用简单的三点样式的“更多”图标来适应不寻常的收集和报告操作。

4.2泳道

什么是泳道？顾名思义，常见的滑动手势是上下滑动，但有时也会水平滑动。一系列的物体在一个横向的轨道上左右滑动，这些类型的形态组合在一起，就像一个游泳的轨道。

可以水平滑动看到内容的呈现，这叫“泳道”。泳道可以有多种形式。

随机停止位置:内容与手势高度相关，相对自由，但随机停止位置不能保证用户在停止后能完美看到当前卡的所有信息，用户需要微调卡的位置。

固定停止位置:根据用户的滑动速度，模拟物理惯性和摩擦力，判断最终显示的是哪张卡片，将卡片呈现在屏幕中间，保证卡片上的信息可以被读取。这种交互比较合理，卡点设置为滑动，类似横幅效果。

4.3双排卡

双排卡可视为大卡(单排)的另一种形式。这种形式进一步提高了空之间的利用率，对单个信息显示的约束更大。平衡效率和效果，是电子商务、照片社区、视频等产品类型的首选表达方式。

双列卡可以细分为两类:卡流(对齐)和瀑布流

卡片对齐:

优点：规整统一，视觉动线清晰，浏览舒适。缺点：对主图尺寸要求高，确定的比例会对商品展示有一定局限。

瀑布流:

优点：图片尺寸宽容度高，满足一定比值区间即可。保证商品的展示完整度。错落的布局容易形成节奏。缺点：不容易进行比较，若要进行图片间的对比，比较困难，视觉动线混乱。

两栏卡布局要注意内容层和背景层的区分。大多数产品的背景层为浅灰色，内容层为白色。色差可以建立区分。有些产品的背景层是白色的，或者取消了背景层的概念，所以要建立卡片之间的区分，需要通过间距给卡片添加背景色。

个性化推荐模块对于电子商务产品尤为重要。准确推荐用户可能感兴趣的产品，可以减少搜索和筛选的步骤，提高购买效率和乐趣，从而提高用户对产品的评价。因此，不断收集用户的喜好是非常重要的。虽然各种算法让产品显得越来越智能，但还是需要给用户留下建议。

以上描述了用户如何对信息产品中的具体信息进行反馈，电子商务产品的原理也是类似的。

从功能上讲，淘宝、闲玉、JD.COM通过用户手势(点击图标或长按卡或两者兼有)调出选项，用户通过选择表达意见，使得推送更加精准。

从视觉上看，淘宝和闲鱼的反馈形式是类似的，在卡上加一个黑色半透明的掩膜，在卡上垂直堆叠有限的选项，类似于小模式的概念(不过这和严格的模式观不同，严格的模式观不限制用户的选择，用户可以直接抓图)。但是JD.COM的逻辑就不一样了，用传统的分块模态视图，用蒙版来分块下卡，希望用户能专注于选择。

在屏蔽感方面，JD.COM的屏蔽能力最强，从用户最初的浏览行为中抽取用户，要求用户对当前产品给予认真的反馈。收集信息更有效率。因为选项放在小的定向气泡上，所以有足够的针对性和良好的扩展性，气泡的高度和宽度都可以调整。极端情况下，有5个以上选项时，所有内容都放在卡上，空非常紧凑。

这种操作晦涩难懂，可点击按钮不明显，长按手势不常用。同样，当用户有明确的反馈需求时，他们只会寻找反馈条目，一般情况下，用户不会注意到。用户的正常浏览行为是最高优先级。

闲鱼的互动非常细致，面具以水波的形式出现，用户抱着吐槽的心态。这个精致巧妙的小动作，一定程度上可以缓解用户的烦躁。

除了电商产品，有些视频产品还会长时间按卡调出相应的效果。

在情况1和情况2中，长按卡上是视频剪辑的预览。效果类似iOS的3Dtouch，在相册中按下即可预览特定照片。在情况3中，单击“更多”图标调出操作。但是只有一个选项，不合逻辑，单个选项不能构成“选择”，让人有点迷茫。

4.4正方形/网格

如果把界面看成一个大网格，不同的内容占据不同的页面区域，位置和面积也不同。除了熟悉的“有序”排列，如从上到下(大卡片)或从左到右(泳道)排列内容，还有更灵活的排列可供选择。

布局的本质是分配界面区域来容纳内容，同时使用区域对比来突出。除了区域对比，还有其他方式突出重点内容。

05无容器&复合容器

没有内容的呈现相对简单:内容直接放在背景层。减轻视觉负担，以内容为主，形式为辅。复合容器是指一个以上容器形式的组合，如列表入卡、泳道入卡等。

5.1无容器

5.2复合容器

06组合和强调

不同的信息容器组合在一起，构建一个分工明确的界面。界面中的不同信息需要以适当的形式呈现。有层次就有对比。反差越大，层次越宽，强调的越突出。

建立对比的策略:色彩对比、面积对比、风格对比、Z轴高度对比、静态和动态对比。