To B产品中的信息整合设计实践

To B产品的设计，难免会遇到大宗文字、图表、数据的整合呈现，因为B端用户想看到的不仅仅是单向孤立的数据，而是整个网站、系统整体的运营状况，以及不同类目的多维比对。近期基本都是零散需求的小版本迭代，信息统计图表居多，就在这里说说自己的一些实践感悟，也算作一次阶段性的工作总结。

当下社会已经全面跨入移动互联网时代，但WEB端依然有其存在的必要性。移动端有限的屏幕尺寸及不稳定的网络环境，决定了一旦大体量的需求类型为了更好的整体性及操作性，势必会将其作为辅助终端。在WEB端，应当怎样规划和设计大量的数据呢？

1.确定信息层次

To B产品往往面对的是商家/企业，用户对于数据的要求往往是“全量”获取，为了让页面简洁直观、核心突出，就需要对数据做分模块、分层次的规划。

分模块，通俗地讲，就是不同的内容放在不同的Tab栏下展示。分散单页面的承载量，同时可作导航属性。还可，继续在子页面下添加二级导航，进一步梳理数据。

分层次，就是在一个页面中，通过数据本身的属性设置来区分重要性。从呈现类型类型上分，有列表、图表、关键数字；从视觉属性上分，有大小、颜色、粗细等。其中，“表”所承载的信息密度最大，其次是“图”，最后是“关键数字”。“关键数字”由于是单一数据提取，在页面中位置较为明显，所以重要性也相对提升。具体的设计案例中，要根据目标用户群、使用目的、使用场景来选择具体的图表形式。

2.使用合适的表现形式

是否最重要的指标，就要选择低密度的呈现形式？不一定。比如“活跃度”指标就需要看到一个时间维度上的变化趋势，拿着这种情况下，单一的纬度信息就无法满足要求。使用策略与图表样式的初步关联关系如下所示：

（1）凸显比例，指标之间互相排斥的，适合用饼图、环形图；

（2）凸显比例，指标之间不排斥的，可用柱状图；

（3）凸显趋势，可用曲线图、折线图；

（4）当一个对象存在3个纬度以上的指标时，用雷达图；

（5）当一个对象存在2-3个纬度的指标时，用散点图；

在数据可视化的研究热潮下，需要我们更好地去探究信息与视觉之间的关系，寻求多样化的表现方式。

3.灵活展示

表格的信息量大，缺乏重点，可读性差。但对于To B产品来说，用户有查看全量数据的需求，而且常常会进行导出做进一步的数据分析。那么，如何让表格易读性相对提升呢？

（1）时间范围的控制。对目标用户的使用情景进行分析，来确定合适的时间范围默认值。时间范围的选择，从交互流程上讲，步骤还是比较繁琐的，需要确定开始、结束时间以及翻动日历。因此，快捷选项的设置就很有必要了：比如系统管理员需要看本地区的话务量，可以将默认时间范围设置为“最近一周”。也可增加几个快捷选项，比如“最近一个月”、“最近三个月”、“最近半年”。

（2）筛选条件的控制。筛选条件是常见的表格控制选项，尤其在电商类产品中较为常见。筛选条件的设置需要依据关键的使用场景、用户需求等来进行确定，避免过多的筛选框降低体验满意度。

（3）信息量的控制。表格的纵向行数往往会出现过多、一页无法展示完全的情况，而表头是表格数据类型的关键信息。针对这种情况，应当尽量保证表头始终处于可见的状态，可通过多页码的翻页设置或者表头固定顶部的方式来实现。此外，为了统一表格的呈现效果，应当控制各个字段对应的字符数，当鼠标处于hover状态时再通过浮层进行补全。

最后

设计本身，是解决问题的一种方案。无论何时，我们始终要以产品的简洁易用为终极目标。相比于移动端，WEB端的产品设计更应该避免杂、多、花的设计，多关注流畅性、易用性，会给用户更好地体验。

2018.01.12

BOCO-XI'AN

欢迎看到文章的小伙伴与我一起讨论产品设计的一些心得~ 微信: ding-xiaobai