第四部分：角色全景图

字数：1441，用时：3分40秒

1研究背景

首先，不少团队通过“设计系统”来解决一致性、美观度、可用性、开发效率等问题。其次，如何让B端产品更贴合使用者的工作场景和体验诉求，也成了设计师日益关注的重心。

个人赛与团体赛的差异

在C端产品中，设计师与用户离得近，更容易与用户共情。我们可以用各类定性方法挖掘用户场景，用业务数据来分析转化漏斗。

在B端产品中，设计师需要面对复杂多样的利益相关者、盘根错节的业务流程。而且不同阶段的B端产品，它的数据完备性也有所差异。

像个人田径赛和团体接力赛，个人赛制仅需要关心单个运动员如何突破他自己的成绩极限，而团体赛制就需要关心不同成员的实力水平、接棒顺位和接棒配合等问题。

2设计方法的借鉴与演变

对常用的体验度量模型、用户分析框架分析与研究，并在“职级评审系统”中进行应用实践。

01 HEART-GSM框架：以5个维度去衡量用户体验的模型框架，并根据维度拆解对应的业务指标。在剖析了模型的运用原理后发现，维度未必是一成不变的，而是根据业务方向去定义和调整。业务指标也是由定位好的方向目标进行拆解。

02 TECH模型：在它四个指标中，找到了一个比较关键的核心：角色的任务成功率，通过体验地图描绘系统角色的核心任务流，从中测评系统对角色的效率、体验影响。

03 CES客户费力度：描述客户需要花费多少力气来达成他的任务目标。比起满意度而言，费力度更能直观反应工具类产品的使用体验，避免出现“我很满意，产品不好用”的尴尬。

综合分析后，织一张三维画布，在业务方向的基础上建立流程、角色、费力度之间的联系。从这三个角度，复刻每个角色任务历程（线下、线上、系统载体、信息传递），度量其任务费力点，洞察他们与系统效率之间的关系。

3建立角色全景图

明确了业务目标、评估诉求、流程场景、核心任务角色等几类要素，接着需要对系统每个角色的任务和对应的费力度评估进行梳理。

01角色任务梳理

根据业务流程，划分了从募集评委到申诉环节等8个业务阶段。在此基础上我们采用头脑风暴、定性访谈的方式，逐步完成了五类角色任务流程的采集与布点。

任务节点：推动流程往下的节点才做记录。而任务之内的个人操作、细分任务都不做节点拆分，抓住关键流程，呈现成功路线。

交棒时刻：复述用户在完成任务后向他人、向系统传递信息的动作内容。在线下递交材料、或系统任务提交过程中有时间交错的情景，单独剥离交棒时刻，是复刻用户的信息传递过程。

02角色任务下钻评估

在获取每类角色的任务泳道之后，针对性地进行体验下钻——评估任务节点的费力度与任务内容等问题。因为在梳理环节掩盖了节点之内的角色使用体验。下钻评估是为了更好地补足角色任务细节，了解到单个角色的任务影响因子，从而建立更全局的体验认知。

通过角色的代表性人物，定位关键任务节点，然后再用定性+定量的方式下钻研究，获取该节点处所反应的费力度、问题分布、任务强度特征。接着用可视化的方式表达任务节点的费力度等级、角色体验评估内容，然后汇总成角色全景图。

4全景图的观察

01任务点观察

前期设置的任务节点、交棒时刻、动作载体，均是为了观察者能够阅读、统计和观察。通过节点信息可以了解到整个系统流程的任务内容和信息传递方式。

02任务面

根据角色泳道的下钻评估，看到用户的费力等级分布，关注任务点相连的上下游链路和系统流程，从立体的角度找到改进空间。

在任务下钻的过程中，发现组织者需要在这环节需要承担很多人力成本，任务量大、耗时多、沟通过程反复低效，系统在这流程阶段中还存在需要改进的空间。因此改进组织者的场次分配方式，建立评委的信息回复流程，从而实现效率的提升。

第五部分：B端的设计指南

字数：2077，用时：5分20秒

一、制定设计规范的好处

• 对产品：制定设计标准，统一公司视觉及交互设计规范。同一项目有多设计师的参与，规范化的设计语言，避免因设计控件混乱而影响设计输出。

• 对自己：组件化同类元素，提高工作效率，建立公司产品的组件库，以便不同项目的复用及设计延展。更好的把控该项目的视觉规范，提高效率。

• 对团队：规范设计团队的输出，方便与开发团队的交接和协作。前端实现拥有一套可供复用和扩展的组件库，助力上下游交接及团队协作。

• 对客户：考虑设计延展性，为不同客户的定制化需求提供更高效的输出。在产品迭代时，设计规范的组件化调整也大大提高了工作效率。

二、输出设计规范文档

1. 页面布局

01统一尺寸

常用屏幕分辨率：1920*1080、1366*768、1440*900。

适配方案：后台产品设计功能型页面的尺寸统一为1440*900，按照栅格系统原则向上或向下适配。展示型页面以 1440*900 为主，力求实现效果和高保真设计图误差最小。

02页面框架

左右栏布局包括顶部栏、左侧菜单栏、主体内容三大区域。顶部菜单栏、左侧菜单栏为固定结构，右侧主体内容根据分辨率进行动态缩放；左右栏布局时，左侧菜单可收缩展开，收缩状态下固定宽度。

栅格布局：栅格系统的使用是为了解决自适应和响应式问题。响应式栅格采用24列栅格系统实现，以满足 2，3，4，5，6 分比布局等多种情况。

尺寸设定：在左上角放置产品LOGO 及产品名称，顶部栏高度 48+8n，侧边栏宽度200+8n。常用的是顶部栏高度 56px，侧边栏宽度 200px，侧边栏收缩状态宽度 56px，右侧的侧浮窗宽度 400px。

2. 标准色

颜色分为品牌色、辅助色、中性色。

品牌色即产品主色，其设定直接影响产品气质和直观感受，也是产品直接对外的形象。要根据产品特性、用户使用场景、产品定位等进行选取，尽量做好色彩的延伸性，可支持换肤。

辅助色用于提示其他场景。

中性色常用于文本、背景、边框、分割线等，需要考虑深色背景和浅色背景的差异，可以选择同一色相控制透明度变化，用来表现不同的层级结构。

3. 标准字

后台系统常用的字体：

windows 系统，中文 Microsoft YaHei，英文 Arial；

Mac 字体，中文PingFang SC，英文 Helvetica；

除此之外可以选择的字体还有segoe UI、思源黑体、HiraginoSans GB等。

后台系统中常用字体大小为12px、13px、14px、16px、18px、20px、24px、30px。

4. 图标

分为功能和应用图标，以图形的方式传达概念，降低理解成本，使得界面更加协调美观。在后台产品中，图标的功能则更偏向辅助性，辅助用户对功能的认识。

专业性的操作和词汇则需要设计师绘制，现在比较高效方便的方法是在iconfont 提供的图标模板上用 AI 绘制，画板 1024*1024，提供圆形、正方形、矩形形状。图标尺寸按照 8 的倍数进行延展，绘制完成后生成 svg 格式文件。

5. 按钮

按钮是后台产品交互设计是重要元素，提供给用户进行点击操作，是视觉上最引人注目的控件，具有一定的视觉受范性。

按钮根据需求分为不同尺寸，大中小三个级别用在不同的场景，一般按照8 的倍数设定。如高度分别设定为 24、32、40px。

6. 导航

导航的类型：顶栏菜单、侧栏菜单、折叠菜单、下拉菜单、面包屑、分页、步骤条、时间轴、tab标签页、胶囊菜单、徽标数等。

顶栏菜单：一级菜单，点击切换，作为下拉菜单的父级，将子级菜单合理分类。

侧栏菜单：垂直导航菜单，内嵌子菜单。

下拉菜单：一般有鼠标悬停和点击两种。

步骤条：引导用户按照流程来完成任务，一般步骤不得少于两步。

分页：高度设定为24px、30px、32px，根据应用场景适当增减内容。

面包屑：用于说明层级结构，使用户明确当前所在位置，并且回到上级页面。

徽标数：通知用户当前有未读消息，一般出现在图标的右上角或者跟在文字后面。

7. 表单

多由一条或多条列表项组成，单一列表项的类型有字段输入框、条件选择器。

字段输入框的标题和分布方式包括左右、上下、无标题。左右分布是常见的对齐方式，比较适合PC 端的使用；上下分布增加了表单的整体高度，视情况选择使用；无标题经常应用在登录注册。

8. 表格

选择搜索区：放置筛选框和搜索框，为用户提供按需搜索，可以大大提高用户效率；

操作区：指各种对表格内容进行增删改查、批量处理、配置列的动作；

表头：展示列标题，一般具有排序功能；

正文：展示各种各样的数据，要注意行高、对齐、分割、信息层级等，要考虑是否提供行内操作；

底栏：显示分页、总数统计等。

表格行高：可设置为表格内字体高度的2~3 倍，主表格会间隔显示不同颜色，用于区分不同行数据、加强视觉流引导，展开单行的内置表格可采用纯色，选中行应有视觉上的反馈。表头要和表格内容有视觉上的区分。表格行高可采用 36、40、48、60 等。

9. 反馈

包括弹框、侧滑框、骨架屏、全局提示、警告提示、消息提醒、加载状态等。分为模态框和非模态框，区别是是否会打断用户工作流。

其中，弹框：主题内容增加一层遮罩，透明度50%，避免使用双层弹框，采用有关闭图标的弹框和无关闭图标的弹框，引导用户对内容进行正确操作。如果设定系统内所有弹框均可以点击弹框外区域关闭， 则需要为用户新增或编辑内容的弹框弹出二级确认的弹框，或者再次进行交互梳理。

三、经验观点及设计资源

1. 设计前端一家亲：Ant Design 的设计组件；Element 的设计组件；iView 的设计组件；飞冰的设计组件；Layui 的设计组件；G2 可视化图形组件；Echarts 可视化图形组件；d3.js 可视化图形组件；GridGuide 在线栅格化计算工具

2. 书籍推荐：B端产品经理必修课；交互设计精髓；U一点料·Ⅱ；简约至上：交互式设计四策略

Powered by Froala Editor