1. 概述
1.1 背景
售后服务是公司发展壮大的关键因素,是企业质量管理的延伸。做好售后服务,提升用户满意度的同时,也能收集用户意见,提高产品质量。
小王作为售后经理,通过问卷形式已收集用户对产品的使用意见,希望将这些数据可视化,方便会议讨论并展示。
1.2 效果查看
售后管理看板轮播包含内容:子公司达成率、产品差评反馈率、产品销售概况、退货件数等。
具体效果如下图所示:
1.3 模板价值
通过「反馈率统计折线」可看出, 差评反馈率随时间推移逐渐下降。若收到售后反馈问卷总数相同,那么产品差评逐渐下降。
通过「退货售后件数同期比」可看出,甲产品、戊产品退货件数在逐渐增高,可分析原因并解决这一问题。
2. 前期准备
2.1 确认主次指标
一般情况下,一个指标在大屏上独占一块区域,所以通过关键指标定义,我们就知道大屏上大概会显示哪些内容以及大屏会被分为几块。
确定关键指标后,根据业务需求拟定各个指标展示的优先级(主、次、辅)。如下表所示:
指标 | 本文示例 |
---|---|
主:反应核心业务内容的 | 售卖甲乙丙丁戊产品的子公司,初期差评和最终差评率 |
次:用于进一步阐述主要指标的 |
|
辅:主要指标的补充信息 | - |
2.2 拆分指标
当确定了某个数据关系类型后,就可以根据该数据的使用场景查找出相对应的图表和使用建议,并在其中进行选择,具体可参见:大屏设计开发指南
页面模块 | 指标 | 指标简介 | 展现形式 |
---|---|---|---|
Tab 块 | 售卖甲乙丙丁戊产品的子公司,初期差评和最终差评率 | 售卖甲乙丙丁戊产品的子公司,初期差评和最终差评率 | 柱形图 |
子公司达成率 | 子公司销售目标达成率 | 子公司销售目标达成率 | 条形图 |
各产品差评反馈率 | 产品差评反馈率 | 甲乙丙丁戊产品的差评反馈率 | 百分比刻度槽型仪表盘 |
退货售后件数同期比 | 退货售后件数同期比 | 6、7、8月份,五个产品的退货售后件数同期比 | 柱形图 |
产品前五销售统计 | 产品前五销售统计 | 产品前五销售统计 | 轮播环形饼图 |
子公司订单数统计 | 子公司订单数统计 | 各个子公司的订单数展示 | 表格 |
2.3 模板布局
本文示例如下图所示:
3. 功能应用
针对这个大屏场景,我们可以拆解出需要的功能和图表。
3.1 报表块代替 Tab 块标题
用户不想使用产品自带的 Tab 块样式,希望可以自定义 Tab 块标题时,可参考本节内容。
1)在 Tab0 下新增报表块,报表块内容如下图所示:
单元格 | 备注 |
---|---|
B2 | 由于Tab0为展示的是「甲产品差评反馈」,所以 B2 单元格的背景色为选中时背景色,字体颜色为选中时字体颜色;其他单元格样式为未选中时标题样式 |
D2 | |
F2 | |
H2 | |
J2 |
2)选中 B2 单元格,添加 JavaScript 脚本,如下图所示:
相同步骤为 D2、F2、H2、J2 单元格添加 JavaScript 脚本,脚本内容如下图所示:
单元格 | 超链 |
---|---|
B2 | _g().options.form.getWidgetByName("tabpane0").showCardByIndex(0); |
D2 | _g().options.form.getWidgetByName("tabpane0").showCardByIndex(1); |
F2 | _g().options.form.getWidgetByName("tabpane0").showCardByIndex(2); |
H2 | _g().options.form.getWidgetByName("tabpane0").showCardByIndex(3); |
J2 | _g().options.form.getWidgetByName("tabpane0").showCardByIndex(4); |
3)相同步骤为 Tab1、Tab2、Tab3、Tab4 增加报表块,除了选中状态的单元格与 Tab0 不一样外,其他设置都与 Tab0 相同。
Tab 块 | 备注 |
---|---|
Tab1 | D2 单元格样式为选中状态 |
Tab2 | F2 单元格为选中状态 |
Tab3 | H2 单元格为选中状态 |
Tab4 | J2 单元格为选中状态 |
3.2 饼图轮播
在「图表切换属性」中设置,如下图所示:
详情请参见:图表切换方式
3.3 柱形图添加警戒线
可在「样式>背景>绘图区」设置,如下图所示:
4. 配色及配图参考
配色参考点击下载:售后管理看板轮播.zip