从0-1搭建B端可视化页面（基础篇）

时间：2023-07-24 10:42:02 | 来源：网站运营

时间：2023-07-24 10:42:02 来源：网站运营

从0-1搭建B端可视化页面（基础篇）：

前言

在一些后台设计中我们常常会看到数据可视化的身影，而图表是数据可视化最常用的载体。但是对于新手来说，拿到需求后常常不知如何下手，或者没有一个好的思路。今天我将结合遇到过的案例，讲解一下我是如何做可视化页面的。步骤较为基础，理解起来不难～～第一次尝试写文章，又遇到过困难，但还好也坚持下来了，在写文的过程中感谢有赞设计师@美芳的指导。

今天的案例是一款HRM 的招聘报表可视化页面，从0-1五步详细拆解搭建的过程。首先，常见的可视化页面是由：标题栏、数据统计、排行榜、可视化图表构成的。

现在开始案例讲解，假设一开始我从产品经理那儿接到了一个需求原型。那接下来可以从“定义模块类型”、“确定模块优先级”、“布局重构”、“模块拆解”、“模块组装并走查”五个 步骤来着手做设计。

一、定义模块类型

拿到需求，先以宏观的角度来定义一下模块类型。（关于如何选择图表，以及每个图表用法之间有啥区别，可以参照一下antv蚂蚁数据可视化，里面有详细的每类图表的用法，所以这里不作赘述。）如果一开始对某块到底该用什么类型的图表而感到纠结时，可以先把想到的合适的图表都在注释上标明，做到具体板块的时候再来深究其中的区别。举个栗子 ：在做本月效率渠道这一块时，我一开始认为采用扇形图和柱状堆叠图都行，那我先在这一块标明。之后拆解到这一块时，我再详细讲述一下我最终是如何选择的吧。

二、确定模块的优先级

模块的类型定义完了，接下来就要确定模块的优先级。

举个栗子 ：在招聘报表中各模块的优先级是这样的：

p0：在招职位数、在招人数、简历接收数、面试人次

p1:简历接收趋势、效率渠道、招聘进度、招聘漏斗、offer拒收率

p2:内推榜

梳理完这些有助于我们在做布局重构的时候，让重要的信息在首屏曝光更多，让页面布局更合理。

三、布局重构

原型图的布局，并不代表最终设计的布局就是长这个样子，在知道了模块优先级的前提下，首先要看一下布局是否合理？页面的布局是否是按照优先级来的？如果有不合理的地方，就要做及时的调整。

目前大部分的B端产品都是通过浏览器的方式呈现，想要设计稿被前端完整还原，需要将浏览器中的一些因素考虑进去。而想要真实了解设备中一屏的高度，就还需要对上面的分辨率尺寸进行处理：电脑分辨率 - 页签高度 - 网址栏 - 书签栏 = 设计稿真实高度即：1440x820 尺寸进行设计。还有另外一种情况：如果系统是给公司内部员工使用,由于公司批量采购设备的原因,公司内部员工的屏幕分辨率往往会比较统一,这种情况下需要拿到这个数据,然后以它作为基准尺寸开始设计。

在该案例中，我采用的是1440x820 的尺寸，24栅格（其中页边距20px，水槽16px）来做的设计。（温馨提示：因为栅格针对的是内容区的元素排布，所以在计算水槽和页边距的时候不要把导航的宽也算进去来哦～）栅格的目的是能让内容区页面更为整齐划一，并且在与前端交接的时候也不容易出错。

布局重构需要记住两个原则：1、布局更紧凑，首屏曝光更多信息；2、应用栅格做规范

四、模块逐个拆解

每个公司都有不同的视觉规范，要以具体的为准。在视觉规范下，可以确定好字体、字号、字重、颜色等。之后开始对每个具体的模块进行拆解。

第一个栗子 ：数据统计

在拆解数据类型板块时，大致可以分四个小步骤：

1.梳理好信息的重要程度

2.搭好卡片框架

3.应用可视化

4.层级优化

接下来拿“本月招聘职位数“来实战一下

step1:梳理好信息的重要程度

重要信息：职位数数据

次要信息：标题

辅助信息：上升/下降的数量

step2:搭好卡片框架

卡片的宽度已经用栅格确定好，用字体、大小、颜色进行信息层级的区分，固定的padding为20px

step3:应用可视化

这一步我是将增长/减少做了一个小箭头的可视化处理，为了表明卡片的功能，我也在右侧空白区域加了图标，对于其他的产品来说，这一步也可以根据需求来，应用具体的图表来做可视化处理。

step4:层级优化

对职位数进一步加粗，对辅助信息进行弱化（弱化的方式可以从：颜色、大小、字重等方面考虑）

这是拆解数据统计的大致思路，可以用同样的思路把“本月在招人数”、“本月接收简历数”、“本月面试人数”补充出来。

第二个栗子 ：简历投递趋势

代表趋势的，我首选的是折线图。折线图的特点是：用于显示数据在一个连续的时间间隔或者时间跨度上的变化，反映事物随时间或有序类别而变化的趋势。 在折线图中，数据是递增还是递减、增减的速率、增减的规律（周期性、螺旋性等）、峰值等特征都可以清晰地反映出来。所以，折线图常用来分析数据随时间的变化趋势。在折线图中，一般水平轴（X轴）用来表示时间的推移，并且间隔相同；而垂直轴（Y轴）代表不同时刻的数据的大小。

选好了图表的类型，就开始布局图表了，分两个小步骤：

第一步：考虑元素是否都有：

图表常常包含的元素有：标题、坐标系、主体图形、图例、提示信息、切换选项、值域（选择显示范围），其中必备的有：标题、时间、图形主体 ；常有：坐标系、图例、提示信息




按照这个思路先来做一个1.0

该折线图必备的有：标题、坐标系、主体图形、提示信息、切换选项

第二步：检查下视觉呈现上的问题

做完之后并没有完，根据元素的属性，可以对其做一个视觉上的优化。

其实依据图表元素的重要程度，可以将元素分为：底层元素、中层元素、顶层元素。

底层元素：通常是我们所说的轴线、刻度等。

中层元素：承载主要数据信息的数据图形、数据线段等。通常中层元素会用更低明度与更高饱和度的数据色来表现。

顶层元素：图表高亮信息,内容包括悬停样式、悬停后的详细数据说明等，并辅以动画、投影来强调效果。

按照以上的思路，再对1.0做一个优化，尽量做到疏密有致，呼吸感。

第三个栗子 ：效率渠道分析

在前文已经提到过这个问题：在定义模块类型的时候，针对效率渠道这块好像用扇形图和柱状堆叠图都行。那现在就具体拆解一下，到底使用哪种类型的图会是最优解。

柱状堆叠图相比于扇形图，多了坐标系，也就是说多x轴（投递环节）和y轴（通过人数）的分析维度。多了坐标系使得可以在纵向上对比不同的发布平台效率是如何的 ，可以在横向上，看到不同面试环节的效率是如何的，所以总的来说，在效率渠道分析这一块采用堆叠柱状图的效果会比扇形图更加直观。

图例的摆放也是有一个小细节点：根据人的视觉动线从上到下进行浏览的，那图例也可以依据图形主体从上到下进行摆放。

小总结：

一个完整的图表必备的元素有：标题、时间、图形主体 。但往往在设计的时候容易忽略时间这一项。所以在设计完的时候要检查下时都有遗漏？在这次案例中在时间的维度上做了两种形式：直接在标题中显示，例如本月在招职位，本月招聘进度等。或者使用时间切换选项，比如本周、本月、本年来表示时间维度。

五、模块组装并走查

根据之前拆解的栗子 ，可以用同样的思路将其他的图表做出来。

现在每个小模块都已将搭建好，就要站在一个宏观的角度来检查一遍：

信息分类：重点信息是否突出、设计要求是否满足。

布局划分和占比：是否合理利用空间，是否做到了呼吸感适中

信息降噪、视觉降噪：颜色：彩色的应用要谨慎、中性灰的层级要清晰

元素：是否存在滥用图标和阴影，重点信息是否传达明确。

规范统一：圆角、问层级的字体、卡片、坐标轴、图例是否做到了统一。







以上仅是一个简单的拆解过程，真正工作中遇到的可视化页面各有不相同，具体的问题还是要具体分析。第一次写文章，写的有不足的地方也欢迎大家指出并讨论，入行才不久，未来还有很多要学习的地方～







最后再次感谢有赞设计师@美芳在CCtalk的分享，我们是一群本着提升B端体验汇聚在一起的团队，欢迎关注公众号【且曼B端产品设计】交流探讨。




本文由光文Vivi原创,未经许可，禁止转载。

原文首发站酷从0-1搭建B端可视化页面（基础篇）|UI-其他|观点|光文Vivi - 原创文章 - 站酷 (ZCOOL)欢迎关注呀～～




参考文献：

《CCtalk B端产品设计课》by 美芳

CE青年-B 端项目设计稿尺寸究竟是多少？

百度UED:B端图表视觉设计思考(精髓篇)