转转VOC实践之路-前端篇

作者：王红艳、职荣豪

• 前言

• 业务背景

  • 现状

  • 目标

• 技术方案

  • 整体架构图

• 核心设计与实现

  • 一. 多级分类树排序展示/交互设计

  • 二. 树形设计与 tag 交互

  • 三. 分页器/卡片设计

• 项目价值

前言

为了有效了解用户需求、提升用户体验并获取宝贵的洞察，积极倾听客户的反馈，并基于这些反馈进行产品的运营和调整。这种以市场为导向的方法被称为"客户之声"，即 Voice of Customer（VOC）。因此开发了 VOC 用户洞察平台，旨在优化业务并实现更高水平的客户满意度。

业务背景

现状

• 过去业务依赖客服打标的会话数据分析和评估优化结果，对客服人力造成负担。

• 多达 10 个以上的用户反馈渠道未被有效使用，渠道间反馈采集和数据管理方式均不同，影响全局分析效率。

目标

• 在数字指标之外，建立可统一管理全渠道 VOC 反馈的用户洞察和体验管理平台，聚焦于更全面、真实和标准的体验场景呈现，为用户导向提供核心内容支撑。

• 期望长期根据业务的使用需求迭代分析能力，帮助业务高效精准的定位用户体验的影响因素和改进点，探索前置性的体验提升方法。

技术方案

整体架构图

主要功能包括：总览和 VOC 明细。
总览主要用来查看各个业务线在不同渠道状态下的 VOC 分类趋势图、排行榜、重点 CASE 等。
VOC 明细主要用来查看不同 VOC 分类下的反馈明细（文本/语音/图片/视频）等，并支持来源信息、商品信息、用户画像等信息的查看。架构图如下：

整体架构图

核心设计与实现

一. 多级分类树排序展示/交互设计

交互效果图

分类树交互图

根据需求交互进行数据结构定义

核心设计思路：数据结构+算法、 “数据模型驱动视图”的思想

• 交互诉求:

1. 二级分类节点   直接 css 控制展示在某列的 top 即可

2. 三级分类节点   由于需要支持展开/收起，并且收到子节点   展开/收起影响，需要补充空白占位节点   进行展示隐藏

3. 四级分类节点   需要支持展开收起能力，  并且控制父节点的空白节点展示隐藏

4. 原生分类   主要与四级节点 id  绑定，收到   三级分类节点、四级分类节点控制

• 具体数据结构定义:

// 三级分类树节点字段定义：
[{
...item,  // 业务信息展示
id， // 节点id x-x
defalutDisplay, // 是否默认展示
hasExpendBtn,  // 是否有展开/收起按钮
expend,  //  展开/收起标记
display,  // 是否展示
}]
// 三级分类树空白节点字段定义：
[{  
id,  // 对应子节点id  x-x
isWhiteSpace， // 表示占位节点  
diaplay // 是否展示
}]
// 四级树节点字段定义：
[{
...item,  // 业务信息展示
id， // 节点id x-x-x 
defalutDisplay, // 是否默认展示
hasExpendBtn,  // 是否有展开/收起按钮
expend,  //  展开/收起标记
display,  // 是否展示
preDisplay, // 父级节点是否展示
//（父节点preDisplay优先级高于该节点display,保留display字段是为了满足需要// 保存该节点展示隐藏状态的case)
}]

分类树处理流程图