实操案例！B端信息逻辑「超级整理术」 （下）

B端产品信息具有：信息量大、关联关系复杂，最终达到目的是用户高效率的理解信息并完成任务。本文借鉴佐藤可士的超级整理术，帮你梳理好复杂的B端信息。

上期回顾：

组装、排序

承载画布：对于pc端，组装设计原则是避免有横向滚动条，笔记本、台式。所有信息最小宽度适配在 1366px 内；响应适配考虑到 1920px 尺寸。考虑到浏览器右侧滚动条10px 留足安全距离。

首屏信息高度考虑768-110=658px内

移动端一般使用750*1334 px，其中H5页面要减去考虑到浏览器的高度。

将信息作为一个单元进行组装。信息组装的形式一方面要符合用户的认知习惯。常见有列表、矩阵式卡片、线性卡片、时间轴、树形组件等，亦可参考Ant Design、element UI等规范

小技巧：注重视觉秩序性、信息整体性、保持对齐、简洁、克制

1. 列表：对比、高效

应用场景和特点

雏形为excel表格。适用大量信息，一个对象为一行，多个对象同类数据为列。分割明确，信息间易于对比，阅览效率高。常和搜索、排序、筛选、操作、分页等元素协同。

用户浏览习惯

• 首先通过纵向浏览快速对比列获知关键信息
• 然后横向对单条目了解并执行相关操作

展示处理技巧

垂直方向对齐：

• 一般数字类右对齐，如金额、数量，
• 信息左对齐，如商品名、编号、时间、状态、操作等
• 标题与对象垂直对齐

水平方向-顶部对齐。前端使用组件默认是水平居中对齐，对于复杂信息展示会错乱，需要调整

不能跨列超出。当字段过长可定义换行，信息对于用户不必要完整展示，超出2行或1行省略，鼠标悬浮气泡展示全部，如商品标题

字段过多。一行展示不下，需将信息分类每类分列。将动态信息，如状态、操作单独列出，一般置于列表右侧。右侧主要适用右利人群，使用鼠标和手机右手居多，用户距离近方便操作

2. 线性卡片：「十」形浏览、

应用场景和特点

兼具卡片和表格的特性。既有利于展示各个对象的特性，又可高效纵向阅读或对比。

用户浏览习惯

• 首选会纵向浏览关键信息进行对比
• 人后锁定目标对象后查看详情

行与行展示小技巧

• 单卡片内一般无纵向分割线
• 行之间间距分割需明显，线或卡片间距
• 垂直对齐，对齐方式与表格一致
• 需对比的信息可突出，且对齐
• 行高度克制，过高阅读效率会降低

3. 矩阵式卡片：「F」形浏览

应用场景和特点

适用于富文本信息，网格布局，一行超过2个。用于突出各个对象的服务和特点，对比其次或不需要对比。

用户浏览习惯

• 首段距离小范围内横向浏览
• 在内容区的左侧做快速的纵向浏览
• 用户并不会浏览页面上所有内容
• 营销场景中，头图使用户聚焦于某卡片

展示小技巧

• 建议一行不要超过5个
• 若有将重要的信息放在头两行
• 每个卡片内容布局模式保持一致，居左
• 卡片内将关键词和信息放在段首

4. 时间轴「十」形浏览、

应用场景

垂直展示时间流信息，以时间为主轴，内容可有主题、用户名、图片、类型、详细内容等等。比如用户操作日志、物流轨迹、待办事项等

用户阅读习惯

从上到下纵向阅览，一般第一条用户重点关注

展示小技巧

• 已发生的事情为时间倒序展示
• 将要发生的时间正序，如待办事项
• 第一条重点展示
• 时间纵向对齐

5. 树形组件「十」形浏览、

应用场景

通过逐级大纲的来展现信息的层级关系，高效、整体框架一目了然。适用于任何需要通过层级组织的信息场景，如文件夹、组织架构、生物分类、国家地区、功能权限等等。

用户阅览习惯

用户可同时浏览与处理多个树状层级的内容。

6。 更多创意展示提高信息获取效率

根据信息的特性，从信息展示阅读高效性出发，充分发挥设计师的创意。

• 多学习数据图表展示形式，如antv；
• 各类网站搜索「数据可视化」拓展思维库

如亨利设计的伦敦地铁路线图，一直沿用至今。

△ 地理模式的地铁路线图

△ 电路板抽象模式的地铁路线图

信息有主次

将信息组装排序好后，「分主次」这一步很多设计师会忽略。当用户看到页面，需要页面会「自己说话」，除考虑用户的F型视觉阅览习惯外，设计师有意识的引导设计：

• 视觉焦点在哪里？
• 主次关系逻辑顺序是什么？

1. 主次方法：主要、次要、焦点

通过文字的大小、粗细变化、深浅变化、颜色变化等来表现文字之间的信息层次。用户在短时间内获取关键信息。

主次注意点

• 避免颜色过多，强调重点多反而无重点
• 主次对比层级不能过多，最多3个层级：主要、次要、焦点信息
• 区分采用的形式不能过多

2. 状态颜色使用实例状态类

事件状态分为

to do-即将要做的事eg：待发货、待处理退款等 ，若需要优先及时处理的可置顶

doing-正在执行的事 eg：退款中、申请中

done-已经发生的事，分为

• 已成功的-是否需要后续的操作，不需则勿强化，如使用灰色的成功
• 已失败-告知失败原因、该怎么做解决
• 已过期-系统原因导致的需要警示用户，如店铺授权过期；不需关注可置灰置底
• 已停用-系统原因导致的需要警示用户；用户手动触发，不再关注,使用浅灰色，或整个条目都置灰置底

△ B端常用色彩原理（勿转载）

色彩使用要克制，可以将信息准确传达给用户即可。不一定以上5个色都用到，尽量用最少的颜色表达。减少色彩的方法：将差异不大的状态使用相同颜色

总结

1. B端信息特点

信息量大、关联关系复杂、用户需要理解成本

2. 信息设计目的

用户高效率的理解信息并完成任务

• 这是什么？（信息与角色）
• 对应我要做什么？（状态+操作）
• 会达成怎样的结果？(信息引导)

3. B端信息的「超级整理术」六步走

第一步：信息显性化

主要是产品经理输出。设计师需要了解用户原声、需求评审、五要素（场景/角色/目的/工具/行为），便于后续设计

第二步：罗列

「工匠死磕」精神，将信息全面罗列，并理解每个信息，有理有据

第三步：分类

除根据业务信息属性分类，可重点考虑将静态、动态信息分开，便于用户get到重点信息。

动态信息包括：状态、操作、数据、相关字段信息、标签类。

第四步：组装 第五步：排序

明确画布尺寸，避免出现横向滚动条

形式主要有：表格、线性卡片、矩阵式卡片、时间轴、树形组件、更多创意形式

第六步.确定主次

信息有主次，且重点突出。文字信息通过大小、粗细变化、深浅变化、颜色变化 层次。

欢迎关注作者微信公众号：「Aber UX设计」