图表作为一个使用频率不高却很重要的组件，让设计者们操碎了心。看着自己设计的图表，总觉得有哪里不好，但又说不上来。本文作者总结了快速提升B端图表用户体验的15小细节，一起来看一下吧。

B端界面中使用频率不高，但却无比重要的组件——图表，可谓是让设计者们烦透了心。图表设计起来不难，但想要设计好，也是需要下一番功夫的。

很多小伙伴问我，说：每次在设计图表的时候，总是找不出自己哪里设计的不好，但看着自己设计的图表，又没有那么满意，该如何办呢？今天，我们就来一起了解下B端的图表，挖掘一些设计者们平时未曾捕捉到的细节，获得这些细节，将从细微之处提升产品的用户体验。

本文将从以下五个部分来展开：

1. 什么是图表
2. 图表的优势
3. 开源图表库有哪些
4. 15个图表小细节
5. 总结

一、什么是图表

百度百科解释：“图表，Microsoft Office用语，泛指在屏幕中显示的，可直观展示统计信息属性（时间性，数量性等），对知识挖掘和信息直观生动感受起关键作用的图形结构，是一种很好的将对象属性数据直观，形象的‘可视化’的手段。”

根据百度百科的解释，我们来做一个”数据图表化“的小推导。我从网站找了一段描述低码的数据（数据来源艾瑞咨询，并做了一些小修改），如下：

“2016年开始低代码概念开始从国内逐渐兴起，当年低代码相关产品投融资事件达10起，亿元以上融资数量2起，至2020年中国低代码市场共有59起投融资事件，其中亿元以上融资共有13起。2017年融资事件11起，亿元以上融资3起；2018年融资事件12起，亿元以上融资2起；2019年融资事件12起，亿元以上融资3起；2020年融资事件14起，亿元以上融资3起。随着企业对系统敏捷性、易用性需求的增加和对业务部门低代码接受度的提升，市场会迎来新的发展契机，短期内投融资热度将持续增长。”

虽然以上的文字已经做了一些简练，但阅读时候不免觉得有些绕，不能很直观的理解数据，且要记住关键数据还是较为困难的。

下面，我们对以上文字进行再次梳理，适当分段，进行结构化排版：

“2016年开始低代码概念开始从国内逐渐兴起，当年低代码相关产品投融资事件达10起，亿元以上融资数量2起。

至2020年中国低代码市场共有59起投融资事件，其中亿元以上融资共有13起。

2017年融资事件11起，亿元以上融资3起；

2018年融资事件12起，亿元以上融资2起；

2019年融资事件12起，亿元以上融资3起；

2020年融资事件14起，亿元以上融资3起。

随着企业对系统敏捷性、易用性需求的增加和对业务部门低代码接受度的提升，市场会迎来新的发展契机，短期内投融资热度将持续增长。”

通过分段描述，以上段落显得清楚了很多，但是例如”融资事件、亿元以上融资“等词语还是反复出现，整体来说不够简练。

那么，我们再将以上数据进行表格化展示来看看，如下：

我们可以发现，表格的展现形式比分段的结构化文本又清晰了太多，使得数据展示非常直观。不仅用户可以看清楚数据本身，还可以对比数据，假如表格再设计的人性化一些，可以将最大值进行重点标注（根据业务需要对数据进行差异化标注）。

不过表格也有劣势，无法展现数据随时间变化的趋势等问题。我们再次仔细阅读上述数据，可以梳理出如下图表。

上图将2016年到2020年的融资事件总数进行了重点处理，亿元以上融资事件数量进行了次要处理。并且用柱状图叠加折线图的图表表达了2016年到2020年低码融资事件数量的趋势情况。

二、图表的优势

综上所述我们可以发现，从通常意义上来说，图表优于表格，表格优于结构化文本，结构化文本优于普通段落。那我们来看看图表有哪些优势。

1. 针对性

一图一类型是图表的特点，例如柱状图是用来比较同一指标下不同对象情况的图表；饼图是展现部分与部分之间，及部分与整体之间占比的情况。我们在使用图表时，需要先对数据进行判断，再选择合适的图表进行展现。

2. 直观性

图表与文字相比，在数据的表现上非常直观。不仅可以让用户一目了然地看到数据，还能让用户将数据进行对比，从而发现问题，定位原因，解决问题。

3. 混合与拓展性

根据数据的属性，图表是可以进行混搭与拓展使用的。混搭是指图表和图表可以拼搭使用，例如折线图与柱状图经常合体使用。拓展性是指根据基础图表可以拓展出一系列个性化图标。例如堆叠柱状图是由基础柱状图衍生出来的。

三、开源图表库

目前开源的图标库以下几种：

1. AntV G2

在AntV的官网上，是这么描述G2的：“一套面向常规统计图表，以数据驱动的高交互可视化图形语法，具有高度的易用性和扩展性。使用 G2，你可以无需关注图表各种繁琐的实现细节，一条语句即可使用 Canvas 或 SVG 构建出各种各样的可交互的统计图表。”

2. ECharts

百度百科：“ECharts是一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。ECharts最初由百度团队开源，并于2018年初捐赠给Apache基金会，成为ASF孵化级项目。”

3. High Charts

百度百科：“Highcharts 是一个用纯JavaScript编写的一个图表库，能够很简单便捷的在web网站或是web应用程序添加有交互性的图表，并且免费提供给个人学习、个人网站和非商业用途使用。HighCharts支持的图表类型有曲线图、区域图、柱状图、饼状图、散状点图和综合图表。”

4. Chart.js

Chart.js是一个面向设计人员和开发人员的简单而灵活的 JavaScript 图表。以下是Chart.js的文档链接。

https://chartjs.bootcss.com/docs/

5. Chartist.js

Chartist.js 是一个面向设计人员和开发人员的简单的响应式图表，是前端图表生成器。

目前来说B端产品使用最广泛的图标库是AntV G2和ECharts。

四、15个图表小细节

在大致了解了图表以后，笔者总结了基于自身经验、团队经验与行业经验的图表小技巧。希望这些小技巧能润物细无声地影响我们的设计者，从而为B端提升一点小体验。

1. 折线图2px

通常在B端中，我们用到线，以1px居多。但在折线图中，我们经过反复推敲，发现2px线优于1px线。首先，2px线条显得有力而清晰；其次，在线条多的时候，便于分辨。

2. 柱状图间距

柱状图中柱子与柱子之间的间距与柱子的宽度一致就好，且最左边和最右边柱子距离两边的间距为柱子的一半。如下图所示，若柱子的宽度为X，则柱子与柱子间的间距为X，两边柱子距离各自向外间距为X/2。

3. 刻度值

图表上的刻度值递增数值根据实际情况需要做适当约束，如最大数值为150，就不适合刻度值上线标记为1000。其次，若业务数据一直处于动态变化中，则图表Y轴可以设置成动态。

4. 饼图文字显示

在饼图分类较少时候，可以将文字写在饼图上，但当分类较多时候，文字适合写在饼图外。

5. 饼图块排列

饼图块排列也是个值得考究的事情，通常来说，饼图块呈顺时针方向旋转，且以12点钟方向为起点，块面从大到小布局，若有“其他”模块，则放置在最后。

6. 标签位置

通常标签都会放在图表的上方区域，但这并不是一成不变的规则，例如当折线图线较多的时候，可以考虑将标签直接跟在折线的尾部。同时可以做一些交互效果，鼠标点击标签可以让线弱化或者显示。

7. 图表色彩

图表在配色上要使用区分度大的颜色，不要为了好看而使用相邻的色彩，这会导致图表的可读性大大降低。如有条件，建议在色彩上考虑无障碍视觉。

8. 同类色使用

属于同一色相，不同明度和饱和度的颜色，也是有使用空间的，通常表示同一对象的梯度变化。

9. 显示重点

当图表上数据及其多，且产品团队压根没打算将数据量减少时，我们可以考虑展示重点数据（系统默认展示推荐重点，用户可以自己选择他所需的重点），弱化其他数据。

10. 标题的妙用

标题不仅仅是用来呈现普通描述的，在特殊场景下，标题描述可以稍微进行变化，从而达到直观表述图表核心含义的目标。

11. 时间周期太长

某些业务的数据统计需要跨很长的时间周期，这时，图表无法满足如此长周期的时间展示需求，我们不要慌，可以通过以下几种方式去解决。

11.1 添加缩略滑块

给图表添加缩略滑块，可以通过拖拽滑块了查看某段时间范围的数据。滑块拉拽的越大，可以看到的时间范围越大，但注意，会有极限值。

11.2 添加滑动滑块

给图表添加滑动滑块，可以通过滑动一个固定大小的滑块，查看某短时间范围的数据。它与缩略滑块的区别在于，滑动滑块每次看到的时间段是一致的。

11.3 区块放大镜

如果图表的呈现就是希望时间周期显示完整，那么当时间周期较长的时候，颗粒度可以展示的稍微粗一些，不用太细，例如无需2月1日、2月2日、2月3日、2月4日、…连续展示，只要2月1日、3月1日、4月1日、5月1日、…间隔展示即可。在交互上，鼠标移入图表区不断进行某时间周期数据框选（即放大），就可以让框选区数据不断清晰。日K线常用此类方法去做。

12. 时间轴显示

当时间轴日期跨越在当年时，无需每个时间点都带上年份；而当跨年时，可以带上年份，这样可以保证时间轴显示更简单，不拥挤。

13. 等宽字体

若图表中会采用表格去协助查看某类数据的明细，联动展示，那么表格中的字体建议使用等宽字体，等宽字体方便用户用视觉来比较大小。

14. 数据归类

指标大盘上放置着各类型图表数据，建议设计者们对数据的进行归类整理，属于一类的数据临近展示，方便用户连续性查看相关数据。

15. 静态与动态图表

图表分为静态和动态图表，当业务呈现较为简单时，使用静态图表就好。而当业务复杂，一张图表难以表达细节时，就要考虑动态图表去呈现了，“鼠标交互，数据扩展和下钻”是动态图表的特征。

五 、总结

图表的小细节远远不止文中提到的这15种，还有好多好多。由于每时每刻都有设计者因为产品需求创造出新的好用的图表类型，图表成为了B端可持续探索的一片海洋。

2021年6月5日~6日，人人都是产品经理举办的【2021中国B端产品经理大会·上海站】完美落幕。携程旅游搜索产品负责人@毛新年 进行了精彩的内容分享，他分享的主题是《聚焦B端产品价值——B端产品的落地实践指南》。

一、B端产品核心价值解析

他首先将B端产品主要分为企业自身业务对应的B端产品和互联网业务对应的B端产品。

企业自身业务对应的B端产品服务于企业自己，产品形态多为ERP、CRM等，产品提供者是IBM、用友或者企业自研等；

互联网业务对应的B端产品服务对象是B端商家形成的商家生态，产品形态如阿里/美团商家系统等，产品提供者则是阿里/美团等互联网平台。

企业是市场竞争的主体，B端产品核心目标是为企业降本增效。

二、从企业管理到业务执行，B端产品的价值体现

那么B端产品如何实现助力企业成本降低呢？

针对B端企业工作的重复、繁杂、专业特点，B端产品在产品设计上遵循以下四个逻辑可为降低企业成本发挥自己的价值：

• 人机替代：需要人做的工作尽量少，对应产品功能就要求工作尽量能够自动化，实现人机替代；
• 智能化：如果工作确实不能系统替代，那么应该使系统尽量降低对人专业知识的依赖，对应产品功能要求系统高度智能化，小白也能做；
• 自主学习：对于小白不会的工作，系统应提供在线指导和交互学习，对应的产品功能要求系统提供便捷自助学习的能力，小白非常方便自我学习来完成工作；
• 无障碍：当有疑似错误操作时，系统能智能提示并容错，对应的产品功能为自检&容错

除了降低成本之外，B端产品还能在提升企业效益方面做出自己的贡献，针对B端业务管理对象多，业务蕴含的价值大的特点，在产品设计遵循如下这三个逻辑，可以充分挖掘大数据价值，提升效益：

• 规范化：将语义相同的各种说法规范为统一说法，有助于大数据的统计、归一、计算的一致性，有助于挖掘出业务内涵价值，这要求建立业务规范知识库；
• 标准化：B端企业在标准化业务上往往得心应手，将非标业务标准化，给平台和商家提供增量业务空间，这就要求B端产品提供业务标准化能力，这要求建立业务标准知识库；
• 平台化：将工作成果平台化共享，平台化一方面减少商家工作量，另一方面提升了数据准确性，提升平台和商家经营绩效，这就要求建立业务规格知识库。

接下来用典型案例来展示上述产品逻辑如何在实践中落地。

以电商平台商品发布业务为例，店小二发布一款商品要经历以下步骤，每个步骤的难度不一样。

首先要选择商品所属目录，接着要填写商品属性规格，这是工作难度最大的，也是工作量最大的。还有填写物流信息、填写服务信息、上传商品主图、上传商品详情图等一系列操作。

这是前端的业务流程，而从产品的角度，可以分成六大模块。

• 目录选择步骤对应的产品后台能力为目录智能预测。
• 属性填写需要产品后台规范知识库、标准知识库、产品信息库，实现各类属性的填写。
• 物流填写对应的是地址智能提示，毕竟人不能记住国家地理区划，这就需要物流地址的智能提示功能。
• 服务填写对应的是标准服务项目库。以前服务不是标准化的，但是作为平台来说需要将服务项目标准化。
• 主图和详情的上传对应的是图片智能检测，看看图片是否符合国家的合规规范和电商平台的管理规范。
• 后端大数据智能化和各类知识库支撑商品发布业务的准确、快速、低成本的B端商家诉求。

从商品发布来看如何实现降本增效？

1）重复繁杂工作自动化

每天的商品上新，营销活动都需要大量修图抠图工作，电商平台和商家每年耗费大量美工投入到图片制作。

2017年阿里双11多达4亿张图片，如果靠设计师人工去设计制作，即使是业务熟练的设计师，也需要100位设计师不眠不休工作300年。所以要用人机替代的方式，利用系统来完成上述重复繁杂的工作。这种通过深度学习海量素材，自动生成各种图片，不仅大大减少了人的工作量，而且系统设计的图片点击率增长一倍多，除了电商平台自己使用外，还直接提供给商家使用，这样大大降低了商家小二的工作量，为商家节约了大量人工成本。另外，平台每天需要审核的图片也有很多，通过系统自动检测图片是否涉黄涉敏、图文不符、违反广告法，违反电商平台的运营规范等，大大减少人审核工作量，也为商家降低了大量用人需求，节约了不少成本。

2）专业工作智能化和便捷自主学习

B端产品对商家小二专业知识要求高，商家的用人成本高。

比如在类目选择环节，需要小二熟悉平台类目体系。

在属性填写环节，需要小二熟悉商品知识。

在图片制作环节，需要小二熟悉国家电商法律法规以及平台运营规范。

所以，就需要将专业知识内嵌的产品系统，减少对商家小二知识的依赖，这些要求在产品能力上通过智能化技术进行支撑。

有了智能化支持，在发布商品的时候，小二只需要填写商品标题或者几个关键词，系统就会提醒你它可能属于什么类目，让你去做选择。

属性的填写也是如此，系统将可能的属性值罗列出来，让你做选择就行。

这样即使不是一个资深的采购也能明白，将难度降低到中级甚至初级。

如果有些小二对于平台规则不熟悉，系统会在页面给出指引或者视频图文在线交互学习，引导小二正确操作。

比如小二不知道生产许可证编号是什么，系统会给出相关提示和案例，小二看到案例就会一目了然。为什么电商平台要做到如此细致，因为商家太多了，比如阿里、拼多多、美团等平台的商家数量高达千万，不可能商家有疑问就找平台客服。通过便捷式学习自助式解决，只要中初级人员就可以完成工作，降低了商家的用人成本，同时也减少了平台客服的用工人数，降低了电商平台企业的成本。

3）系统自检和容错

在智能化或在线学习前提下，小二仍旧可能发生错误操作，或者利益驱使下故意犯错，或者系统知识不完备，有时候商家是正确操作，但是系统认为是错误的。在这样的情况下，系统要具备实时自检能力，根据事先内嵌的专业知识，实时校验并提示商家实时纠错。如果商家坚持，系统具备容错能力，业务依旧可以进入后续环节，而不是在线等待。

比如在填写冰箱的体积时，系统会内设一个最大最小的体积范围，但是商家的冰箱超出了最大体积，在商家小二进行属性填写的时候，系统会根据内嵌的物流体积范围，校验小二填写的体积，超过范围实时提示商家纠正，如果商家坚持，还可以继续填写，但是系统会记录这个异常数据，平台客服会与商家小二进行确认，最后更新内嵌知识。

小结：

人口红利消失，增量业务拓展难度加大的时代背景下，降成本也是提升企业竞争力的有效手段。针对B端业务的重复、繁杂、专业的业务特点，我们B端产品经理应该将B端系统设计成足够自动化、智能化实现人机替代，并设计友好无缝的交互学习素材实现低专业知识依赖，帮助企业实现降成本的目标。

4）规范化

每个商家对商品的理解可能不同的，所以说法可能就不一样。比如同一罐奶粉，它适用于一到三岁的孩子，也可以写作12到36个月。相同含义项目多且杂，商家不知道该选谁、用哪种说法，因此大数据也无法归一统计，精准分析。这就要求知识尽量规范化，将含义相同表述不同的业务知识规范化，形成业务规范知识库。

规范化提炼后，尽量让商家小二选择属性值，减少自由填写错误。大数据根据规范之后的知识进行统计分析，提供给商家的数据更精准，这样对于商家决策来说帮助更大。

而这些知识是从哪里来的呢？从商品说明书，客服、评价、调研中采集而来，属性值通过历史数据和商家小二的在线提报补充到知识库，内嵌于系统中。

5）标准化

随着电商发展，各种非标商品急需在线上获得商业机会，同时消费者对服务的要求越来越高，所以，将非标商品或服务标准化，扩大商家的商业机会，同时有助于提供统一的交互语言和商品定价。其中包括服务的标准化，比如保险、物流、售后等，能够提供这些服务的商家会获得更多的流量和更高的转化，也会倒逼其他商家进行服务升级。

将非标商品标准化，例如生鲜水果，通过建立标准，提供统一定价依据，有助于优质商品实现优质优价，同时避免商家描述不一致带来的客诉。

6）平台化

平台上有大量商家做完全相同的工作，那么能否在商家间共享工作结果，节约社会资源，例如有上百个商家卖同样的苹果手机，这些商家发布商品都需要填写商品的参数信息（多达上百项），将这些相同的工作进行平台化后能让所有商家共享。

将商品的描述分为产品信息和销售信息，其中产品信息是相同的，所有商家共享；销售信息每个商家都不一样，自己做维护。

建立这样一个产品信息库之后，商家只要在发布商品时检索产品信息，其他信息全部由产品信息库提供，无需商家输入，数据一致性有了保障。

例如手机只需要填写品牌、系列、颜色、内存，其他公共信息可被自动调出来供所有商家使用。

包括快消品，以湿纸巾为例，只要检索品牌、序列、规格，就能其他信息调出来。非标品的服饰也可以这么做，提供品牌和货号就可以调出其他信息。

小结：

马老师曾经说过：“数据就是互联网时代的石油”，挖掘业务蕴含的数据价值，可以为企业提升经营效益，在B端产品系统中，通过规范化、标准化和平台化可以提升数据的准确性和一致性，有利于发挥大数据价值。

三、B端产品实施落地的难点剖析

B端产品在实施落地中主要存在两大难点。

1. 企业内组织问题

很多时候，老板说要做一项工作，产品经理可以给出方案，推动研发并实施上线，但是产品上线后缺乏运营，最终导致产品难以达到预期成效。这主要企业内分工不清晰，有产品无运营，有系统无人背负运营或者经营指标考核，要求产品经理推动无运营无考核不立项进行产品设计，规划，更别说研发了。

B端产品想要降本增效，但是很多人担心会因此丢了工作。所以，他们有所顾虑让降本增效难以推进。因此，在存量业务中找增量业务，把部分员工分流到新业务中去。例如，针对电商业务，我们可以不仅仅只做零售，还可以做批发；不单单做线上，还可以做线下，这样对员工的技能也是很大的提升。

2. 企业间协作问题

现在企业合并或并购已经非常常见了，弱势企业B端系统往往被要求对齐到强势企业，改造过程困难也比较大。

尤其是文化习惯制度方面的差异，这些差异往往也体现在B端产品上。

所以，在企业文化融合方面要建立沟通共识。文化习惯制度灵活把握尺度，非原则问题的差异，可以求同存异，逐步对齐，原则问题需要一步对齐。

除了文化方面，在业务方面，不同公司也不一样，有成熟的业务也有新业务。这种情形最好是互补，而不是一味用强势企业取代被并购/合并方，否则不仅可能造成人员的大幅动荡，而且可能将被收购企业的成熟业务破坏掉。例如某线上的电商平台，并购了线下的企业，在进行商品融合的时候，给原来线下的企业新增一个线上的渠道。

以卖葡萄酒为例，线下门店是按照国家产区进行分类，比如法国、意大利、澳大利亚；而线上是按葡萄酒类型分类的，比如起泡酒、干红等。

为什么会出现这样的差异呢？因为电商起初的进口酒业务是商家C模式，佣金扣点都是相同的，但是线下门店是自营模式经营，来自不同国家进口葡萄酒关税不同，因此分类体系也不同。

在融合方案的时候，不能只是简单将线下知识废弃掉，而是合理地吸收。

因此融合之后，线上的商品主数据多了类别和产地，线下的商品也可以在线上进行销售。

小结：

B端产品核心价值为企业降本增效。B产品经理是企业降本增效的“引擎”，主导系统架构设计，能否按照降本增效背后本质的产品逻辑，设计出具备人机替代、智能化、规范化、标准化和平台化系统功能决定降本增效能否实现。同时在业务流程中，我们需要设计好交互学习环节来降低工作人员的专业知识的学习成本，同时建立纠错容错能力确保业务顺利快速展开。

针对B端产品落地实施难点，产品经理除了需要提升自身专业能力外，也需要关注企业内的组织问题和企业间的协作问题，前者主要通过明确职责分工和寻找增量业务来化解，后者需要掌握融合的原则和抓住业务差异背后的本质原因，对症下药。这背后需要我们产品经理具有深刻的业务洞察力，可以说思考力深度决定了产品经理职业天花板的高度。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

文章来源：人人都是产品经理  作者：人人都是产品经理

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

超级秒杀日是秒杀频道衍生出来的大促营销活动，在大促期间扮演着重要的角色。虽然秒杀的商品及价格由业务侧主导，但设计师仍可以通过方法论的应用去提升会场的转化效果。本篇将会介绍如何将 fogg（福格） 模型运用到秒杀会场的设计中。

什么是秒杀？

1. 秒杀的特点

秒杀就是在限定时间内，通过发布一些超低价格的商品，吸引买家抢购的一种销售方式。因此秒杀具有两个核心特点，一个是限时降价，一个是限量抢购。

现阶段，秒杀作为一种营销工具，已被各大电商平台广泛使用。利用秒杀的特点，平台可实现用户活跃、粘性提升、销售增长等目标。

2. 超级秒杀日的定位

超级秒杀日是京东秒杀频道推出的营销活动，旨在辅助平台销售的增长，同时提升频道的知名度，带来日常流量的增长。在促销期间，会场承担着流量分发、单品销售、商业合作的作用。

FOGG（福格） 模型简介

Fogg 模型的核心理论比较好理解——想要用户完成转化，需要满足三个条件：

• 用户有足够的动机
• 用户有能力完成转化
• 有触发用户转化的因素

如下图所示，当用户有高动机，并且有较强的能力完成某件事时，很容易成功触发转化行为，反之则容易触发失败。

FOGG （福格）模型在秒杀会场中的应用

在实际项目中，需要结合具体的场景，综合考虑三个要素的对应关系，进行针对性的设计。

1. 动机层

动机分层

根据大促的用研报告，将会场用户的动机分为 3 层：强目的性，弱目的性和无目的性。其中，弱目的性的用户占大多数，表明用户的转化还有很大的提升空间。

因此在会场的整体动线设计上，会对不同动机的用户进行针对性的内容设置，着重提高会场的可逛性，通过多维度营销矩阵刺激这部分用户的消费需求。

动机增强

除了依靠动线去匹配不同的用户，实现用户动机的增强外，还可以采用氛围营造的方法，快速感染用户的心智，激发用户的潜在需求。这部分通常通过视觉设计进行表现，例如秒杀会场，会通过闹钟元素及鲜亮的颜色，去提示用户商品是限时的，需要马上抢购。

2. 能力层

降低价格门槛

降低价格门槛的目的是为了匹配用户的购买能力。限时降价是秒杀业务的核心特点，在会场中不仅要明确告知用户商品的价格，还应突出价格优惠的力度，在强调秒杀属性的同时实现用户的快速转化。价格优惠可通过多种形式表现。

减少决策成本

会场中存在过多冗杂的信息会干扰用户的判断，导致用户流失。因此，要减少用户的决策成本，让用户不经过大脑思考便下了决定。例如，可在会场中增加推荐模块，根据用户的行为进行实时推荐，实现商品的精准打击。

3. 触发器

触发即是在恰当的时间告知用户，现在可以去做了。因此触发器的本质是将目标用户与目标行为进行连接。在秒杀会场中，触发通常以消息推送，文案提醒，利益刺激等形式呈现。

在预热期设置提醒功能，并将优惠券或券包的使用时间定在高潮期，能有效地提升用户回访，完成购买。

在楼层和弹窗内设置互动任务，完成后给予奖励，可以提高楼层的点击率，而获得的红包将进一步刺激转化。

小结

秒杀会场并不仅仅承载着销售转化的功能，因此会场的内容及设计，需要综合考虑业务目标及业务规划。FOGG 模型虽然从理论上来看比较容易理解，但实际的应用情况也是灵活多变的。运用 FOGG 模型，可以让你的设计思路更加清晰，在一些细节上也能更加出彩，只需要加深对它的理解，就能在各种变动中抓住用户转化的关键点，确保会场的转化效果不受影响。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

文章来源：优设  作者：JellyDesign

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

体验度量是什么？

简单来说，用户体验度量是通过一套测量体系量化用户体验的过程。

尽管体验很难被科学客观地分析，但将度量这种手段运用于体验的管理是非常有必要的。引用管理学大师彼得•德鲁克的一句话：If you can’t measure it, you can’t improve it（如果你无法度量它，你就无法改进它）。我们相信更好地衡量体验设计的价值，可以帮助我们更好地实现产品价值、用户价值、商业价值，甚至是社会价值。

为什么要做体验度量？

下面我们再来分析一下做好体验度量能帮我们解决哪些难题，首先从我们遇到的几个问题出发。

概念过于抽象主观：设计师们提出的体验优化方案被认为过于主观，难以得到直接证据支持，各部门很难达成共识，方案难以推进落地。怎么办？

影响因素复杂多元：现有的 NPS 满意度调研反映了每个季度的商家整体满意度，但是团队面对 NPS 结果无法直接定位问题，难以进行有效的诊断和提升。怎么办？

问题难以闭环管理：现有的 VoB 系统能够收集到一定数量的商家反馈问题，但是这些零散的应急需求很难被高效地纳入体验优化项目。怎么办？

相信大家或多或少遇到过类似的问题，虽然大家有着“以用户为中心”提升“用户满意度”的共同目标，但在过程中具体该怎么做，仍然是抽象模糊的。体验度量恰恰是解决这些问题的关键策略，我们希望通过体验度量帮助京麦达成以下目标做出更好的设计，创造更大的价值。

目标一：让商家体验从“抽象”到“具象”，从“玄学”到“科学”，定义一套被各部门认可的衡量标准；

目标二：与商家建立更加直接的联系，从商家角度直接洞察需求，更有针对性地定位优化问题；

目标三：更好地实现体验设计价值及体验设计体系化，与各部门建立合作关系，长期监测跟进优化。

怎么做体验度量？

体验度量一般可以分为五个步骤：拆指标、采数据、做诊断、再优化、续监测。

在京麦一期度量中，我们主要完成了前三个步骤，后期我们会尝试推进后两个步骤，同时也将继续完善现有的度量模型和调研方式。

1. 拆指标

首先我们要明确这个产品的用户体验由哪几部分构成，就比如评价一个人的英语水平如何，我们可以从听、说、读、写这四方面进行评价。

通过比对分析业界相对成熟的指标模型，我们发现各个模型有不同的切入点，比如 PULSE 模型以网页产品商业化为导向，HEART 模型以用户为核心，PTECH 模型更适合企业级产品，UES 模型更适合技术产品等。涵盖的维度多种多样，有的维度是产品相关指标，比如留存率、日活用户数、转化率，有的维度是用户侧反馈，如 NPS 净推荐值、满意度。

深入分析这些维度，我们发现几乎所有指标都可以被分为系统表现、用户行为、用户感受这三类。

有了前面提到的三大目标和参考指标，我们开始分析京麦移动端的现有情况。

由于京麦在现在这个阶段已经有了相对稳定的产品形态，市场上也有了同类型的产品。因此，我们首先把完整性作为反映产品系统表现的重要维度，也就是商家需要的、别人家都有的，京麦“有没有”？

第二项维度是参与度，店长是否会通过移动端来经营管理店铺呢？客服是否会通过移动端来答复客户呢？也就是各类角色“用不用”。

而作为一款 B 端产品，它的使用效率和易用性是至关重要的，我们要关注用户的行为，也就是商家们是否能“又快又好地使用”。

最后一项指标是满意度，它代表了用户的主观整体感受，这也是所有指标中涵盖面最广的一项。总的来说，商家们是否认为这个产品“令人满意”？

TIPS：体验度量具有非常强的业务属性，不同的业务类型、业务阶段、业务规模、资源情况都会有与之相配的不同的合适的度量方式，适合自己的指标才是好指标。

2. 采数据

有了度量指标之后，我们需要通过从不同渠道去收集尽量全面的数据。还是拿英语举例，我们该如何去给听、说、读、写这四部分打分呢？可以通过听力、口语、阅读、写作的统一考试打分，可以让老师根据平时上课的表现打分，也可以让同学互相评价打分。

那么度量的数据也可以有多种来源，比如通过用户访谈得到用户主观使用感受（定性数据），通过问卷调研得到满意度或是易用性评分（定量数据），通过后台数据得到用户的行为数据（定量数据）。

基于移动端京麦现在所处的发展阶段阶段，我们重新明确了我们的调研目标：

• 清晰与竞品差距与机会点；
• 关注核心模块的使用体验；
• 了解用户的主观感受。

因此，我们在这个阶段实施了用户访谈、问卷调研和竞品分析三种不同的调研活动，收集了大量的定性数据及定量数据。

竞品功能完整性对比分析

调研目的

通过分析对比现在行业内同类产品的功能，计算京麦功能的完整性得分。以千牛、拼多多、京麦三个平台六个端为分析对象，测试各一级、二级、三级功能的支持情况。

调研方法

确认竞品后，通过使用各家产品的具体功能，拆分一级、二级、三级或更细节的功能，填写完整性分析表；

计算完整性得分（京麦具体计算以二级功能为标准，分为六个不同等级，分别对应六个分数）。

TIPS：可以通过与产品同学的沟通，共同完成各级功能模块及相应支持程度的定义；后期可以纳入客观数据指标，结合用户的参与情况、平台满意度计算权重，重新定义重要程度、支持程度；以一个季度为统计周期，及时跟进新上线功能。

线上用户访谈

调研目的

与用户直接对话，较为直接、细致地了解不同角色用户如何使用各功能，以及在使用过程中经常遇到的问题，了解他们的使用习惯和实际需求。获得用户画像、用户使用感受、用户问题反馈等定性数据。

调研方法

用户招募：提前 1 周设计招募问卷，并在 QQ 商家群投放、回收，筛选目标用户，提前打电话确认访谈意向；

前期沟通：添加商家的微信，了解商家的基本信息，预约商家参与时间，并要求商家提前在手机/电脑上安装腾讯会议；

访谈大纲：根据具体想要了解的功能模块、用户群体等，撰写访谈大纲，包括开场白、基本信息、具体问题、观察操作提问、延展问题、结束语等；

实施访谈：提前预约会议室，打印访谈记录表。需要至少一位主持人、一位观察记录员，访谈时长控制在 30-45 分钟左右；

访谈结果梳理：每场访谈结束，参与者进行快速回顾总结，截取录屏中关键段落，提炼对应的用户行为、态度、问题、需求等信息，逐步建立猜想，并在后续的访谈中进行验证、修改；每轮访谈结束，对共性问题进行分类归纳，梳理电子化在线表格；撰写访谈报告（可能包括用户体验地图、用户画像等）；

后续跟进：邮寄周边礼物，并建立商家体验群，维护长期合作关系。

TIPS：提前争取更多利益点吸引商家参与；提前明确目标用户类型，与产品侧配合利用线上使用数据定位筛选访谈用户（如使用经验、使用频率、经营类目等）；提前与受访者沟通，可以让商家准备反馈问题列表，与商家反复确认时间；确认用户接受上访谈使用的设备及场景，对可能出现的意外情况做预案；访谈后，在企业版微信建立相对稳定的商家关系，以便回访；访谈信息整理需要更多人同时参与，尽量在访谈当天或次日完成转录、问题分类，及时补充假设，在后续访谈中验证/推翻；及时从录屏中截取关键段落、截图，便于举证。

线上问卷调研

调研目的

以更大样本量验证访谈结论，同时通过对大量用户的主观打分、行为习惯的分析，得到对产品整体的使用评价，直接获得用户角度满意度、参与度、易用性得分。

调研方法

问卷设计：提前 1 周开始设计问卷，根据前期访谈结果，有针对性地设计各模块、各角色对应问题；

问卷投放：针对不同端的问题，分为 2 个问卷，分别投放；（如果需要长期追踪，建议以季度为单位，以京麦为例，紧跟平台满意度调研投放时间，在 1 月/4 月/7 月/10 月初分别投放）；提前与产品、运营侧进行沟通，确认上线、下线时间，以及所需物料，如文案、icon、banner 等；

问卷结果梳理：数据清洗、分析；梳理关键信息，制作图表；输出报告结论。

TIPS：1. 尽量咨询用户研究团队专业人员，听取他们对问卷题目设置的建议，留出组内讨论、线上测试时间，进行 1-2 轮调整；

2. 如果需要长期追踪，建议以季度为单位投放问卷，以京麦为例，紧跟平台满意度调研投放时间，在 1 月/4 月/7 月/10 月初分别投放；

3. 提前与产品、运营同学进行沟通，确认上线、下线时间，以及所需物料，如文案、icon、banner 图等。

3. 做诊断

收集了大量数据信息之后，我们需要设定不同维度的权重，并通过一定的规则计算出各指标的最终得分。比如工具类产品，可能更强调用户达成任务的效率，因此易用性和任务效率权重较高，而主观数据的满意度权重则相对更低。

同时每项指标的背后都有一种或多种的数据采集方式，每项指标的数据颗粒度也不同，有的可能只针对一个模块，有的可能涵盖整个使用过程。因此，我们在设定计算规则的时候，要尽可能的全面客观。

最后，将度量体系的各个维度进行加权计算，基于数据表现，可以诊断出产品的提升信号。

完整性 | 功能完整性对比分析（客观）

目前，京麦在整个商家后台行业中已经处在功能相对较为完善的阶段，因此完整性将作为一个重要指标纳入整个体验度量体系中。通过与其他同类产品对比，可以看出各端功能的覆盖完整度，这一维度是完全客观的度量指标。

易用性 | 用户使用难易程度（主观）

易用性是衡量用户在使用产品各功能时感受到的难易程度的标准，是完全主观的度量标准。在比较了各类可用性测试、易用性测试度量体系后，我们选取了表格中的四项维度和对应的七个问题。通过问卷的形式，以李科特五度度量（强烈反对=20 分，反对=40 分，中立=60 分，赞同=80 分，强烈赞同=100 分）换算获得了易用性的分数。

参与度 | 各角色用户常用功能模块的使用率（主观）

参与度是衡量用户对各功能模块的使用率的主观度量标准。使用京麦的商家可以按照其工作岗位分为店长、运营推广人员、客服人员、财务人员、技术人员等多种类型，通过对各类人群常用功能模块的使用率的加权平均值，计算整体的参与度。

任务效率 | 各角色用户完成特定任务的投入产出比（主观&客观）

任务效率是用户通过使用京麦完成某一特定工作任务（发布新商品、填报活动等）的投入产出比，通常以时间、完成度、出错率等具体业务指标来具体定义。一期我们以 100%-用户主观反馈问题的比例来推测计算任务效率。二期计划：与各条业务线沟通，以他们的业务指标来定义更具体的任务效率指标，通过用户行为监控数据来计算客观的任务效率值。

满意度 | 用户对产品整体的使用感受（主观）

使用季度性《平台商家满意度调研报告》统计得分，也可以在问卷中设置相应打分题进行统计。

4. 再改造

通过前面几个步骤的计算得分，产品已经有了较为宏观的改造方向，我们可以再结合前期调研收集的用户反馈问题，重点解析数据表现背后的原因。这个阶段需要引入更细致的专家评估等方法，对各类问题的优先级进行排序。

我们计划结合产品现有的移动化进程，首先提升完整性，然后分批次地针对核心模块优化易用性、任务效率，并通过概念设计及用户测试等方式进行产品优化改造的快速验证。

5. 续检测

后续，我们也希望引入更多用户的行为数据指标，如用户活跃度、用户增长率、功能插件使用率、页面点击率等，从业务指标中获得更全面的数据信息。

同时引入监测工具，对产品重塑后的关键指标进行持续追踪，周期性监测指标的改善情况，让各部门同时参与体验度量的工作，提升优化产品的效率。从体验度量指标的数据采集到数据分析到数据的可视化，再到最后的优化落地，让体验度量的闭环全程可管理。

随着产品生态的多端化进程，越来越多的跨设备和不同屏幕尺寸导致的问题也逐渐暴露，例如：

XX 能力要在手机上使用，不得不单独为移动端开发几个页面甚至一个产品（反之亦然）；产品数据量很大，Ant Design 默认字体 / 间距太大了，不够紧凑；版式不够优化，造成空间浪费；

Ant Design 基于如何在小屏幕中解决信息展示问题这样的出发点也在很多组件中提供了响应式设计，但拥有更加完备的环境适应性应该是一个设计体系长期的目标之一，因此在全局性地考虑跨端、跨多屏幕尺寸、信息密度等响应式设计方面还值得我们继续深入研究。

本篇文章横向调研了 Fluent – Microsoft、Material Design – Google、Fiori – SAP、Lightning – Salesforce、Carbon – IBM、Alta – Oracle、Atlassian Design – Atlassian 等 10 余家企业级产品设计体系的响应式设计部分，从设计策略、设计模式、实施模式、设计方案四个层面大致归纳了一些信息，旨在对响应式设计有一个笼统的了解。

关于 Adaptive Design 与 Responsive Design先厘清两个概念，关于响应式设计通常会有两个普遍认识，即 Aaron Gustafson 与 Ethan Marcotte 分别在 2011 年自己的著作中提出的 Adaptive Web Design (AWD) 与 Responsive Web Design (RWD) 概念，它们的核心区别在于 AWD 针对不同的设备或屏幕尺寸定制化设计多个固定布局的尺寸，而 RWD 是同一套代码做弹性的适应，本质上它们都在解决产品设计如何适应于不同设备以及不同屏幕规格的问题，本篇所指的「响应式设计」 概念包含了两者，不做明显区分，关于 Adaptive 与 Responsive 设计怎么界定以及具体的规则本篇也不进行展开。

移动优先设计策略

提响应式设计不得不提「移动优先」设计策略，移动优先的概念最早是 Google 在 2010 年世界移动大会上提出来的一种产品策略，基于 Google 对未来趋势中移动设备将会逐渐拥有核心地位的判断。后来「移动优先」更多被提及是作为一种在响应式设计中应用的设计策略，它认为在响应式设计中优先为屏幕限制更大的移动设备设计，再扩展到大屏幕的 PC 端是一种更有效的设计方法。

例如 Alta、Lightning、Fiori 均在设计体系中明确采用「移动优先」的设计方法，Fiori 尤其指出「移动优先」专注核心功能，专注增强而非降级，提前考虑移动端更多的独特特性以及异常情况，能提供更好的体验。Material Design 可能算是移动优先的最佳实践，它本身就诞生于 Android 平台，而后再通过大量响应式规则扩展到桌面及 Web 端，使得 Material 在多端都拥有一致贯穿的良好体验。

「移动优先」本质上是基于一种「增强」的设计思想，一个产品如果要同时适应于不同的设备，一直以来有两种策略：优雅降级 vs. 渐进增强，后者认为先从最小和最受限制的低级设备（移动设备）入手，再为更高级的设备（桌面设备）增强信息和交互，这意味着在更多限制下，迫使设计考虑如何减少、汇总，分组信息，有利于聚焦核心信息以及为更多限制考虑。

然而移动设备已不再是「低级设备」，Fiori 尽管强调「专注增强而非降级」，但它同时提出的「提前考虑移动端更多的独特特性」却与渐进增强的设计思想相悖，让「移动优先」沦为了某种形式化的概念而难以执行。

例如下面这个报告界面的场景里，移动端仅展示汇总的报告图表信息，但汇总图表并没有「扩展」到 Tablet 里而是用明细数据替换图表，而在桌面端同时包含了明细数据与图表两部分信息，这看上去并不像是一个「增强」的设计思路，更像是在全量需求下基于设备限制所采用的「降级」策略。

因此「移动优先」并不一定是形式上优先设计移动端，它被广泛接受和应用的是背后的渐进增强的核心思想。我认为在移动设备高度发展的当下，「移动优先」不再适合作为单独概念提出来，而渐进增强的设计思想应该体现在更细分的场景中，例如在布局、信息排版以及交互反馈中，我们应该优先考虑限制更大的移动端；在一些交互方式上，优先考虑限制更大的鼠标操作。甚至在复杂业务场景里，优先满足核心业务流程顺畅也属于渐进增强的策略范畴。

设计模式

这里讲的设计模式是指设计师在具体业务中针对不同的情况可以采用的通用性设计方案，这些设计模式除了单独应用外，有时候也可以多种模式结合应用。Fluent 归纳了 6 种对应不同情况的响应式设计模式，非常全面地涵盖了其它设计体系中的绝大部分方案，分别是：调整大小、重新定位、重新排列、显示/隐藏、替换、重新构建。

Resize – 调整大小

调整大小是最基础的设计模式，是一个容器默认的响应式模式，通常有等比缩放、固定高度、或是在不同尺寸下按不同比例规格缩放三种形式，即便在无响应式设计的体系里，容器跟随屏幕尺寸而变化也是一个常见的应用方式。

Reposition – 重新定位

改变 UI 元素的相对位置，以充分利用不同尺寸的空间。重新定位在响应式应用里多见在框架上，或是在组件里对一些特定元素的处理，例如 Material 的全局浮动按钮与浮动的下拉菜单以 Reposition 的形式分别在桌面端与移动端处于不同的位置。

Reflow – 重新排列

改变 UI 元素的排列方式，这在内容弹性布局里较常见，通常是基于某种排列规则自动向下折行，并结合调整大小与栅格系统应用在响应式布局方面，例如 Carbon 的 Fluid Grid。

（Reflow）

Show / Hide – 显示 / 隐藏

基于屏幕空间、设备不同特性、特定情况等显示或隐藏 UI 元素，例如大多数设计体系的框架设计应用在小屏幕上会隐藏侧边菜单。Material 在组件响应式行为里提到的 Expand 也属于 Show / Hide 的延伸。

（Show / Hide）

Replace – 替换

针对不同尺寸的屏幕采用不同形态的组件，通常应用在对具体的组件做针对性响应式设计中，但需要注意用户面对变化时的认知成本。

（Replace）

Re-architect – 重新构建

折叠或拆分信息架构，这种模式在 Web 端较难实现，通常出现在一些 Native App 的场景。

（Re-architect）

Density – 内容密度

除了上述 6 种模式以外，我把内容密度也归纳为一种设计模式，Fiori、Material Design、 以及 Atlassian 都提出了内容密度的概念。Fiori 基于移动优先在移动端采用默认密度，而针对大屏幕的 Web 端则提供紧凑密度的方案，他们认为移动端手指交互所需的空间要求更高；Material 则是针对很多组件都定制了 Default、Comfortable、Compact 三种密度的视觉表现。通过被动响应式或主动控制内容密度很好的解决了不同尺寸屏幕的信息获取效率问题。

（Material Design 的内容密度示例）

值得一提的是 Atlassian 通过栅格系统的间距来控制密度而非对内容密度本身进行设计，越紧凑的布局栅格间距越小，这看上去很合理，却很容易造成内容密度增加的同时整体信息获取效率反而降低的问题。Material 也有关于栅格空间的定义，但在内容密度的处理上和 Atlassian 恰恰相反，它认为高密度内容适用更宽松的栅格空间，相对是一个更合理的设计。在信息密度的问题上，我们的核心目的其实是提升信息效率而非单纯提高视觉密度，因此解法上需要更完善的考虑。

实施模式

实施模式是指设计体系为实现具体设计方案而定义的一系列基础规则、解决方案或技术手段，经过整理总结为相对尺寸单位、屏幕断点、弹性布局、栅格系统 4 个方面。

Rem – 相对尺寸单位

几乎所有应用于 Web 的设计体系的技术方案中都采用 rem 相对单位，Material、Fiori、Carbon 和 Lightning 均沿用了浏览器默认的 root 尺寸，即 1rem = 16px，Alta 默认采用是 14px 的规格，并允许基于不同应用选择 12px 或 16px 的规格，默认情况 Alta 采用更小规格的单位会在小屏幕电脑上有更好的表现，这也许和他们的产品特性相关。

相对尺寸单位是非常具有实施价值的，它使产品能在保持信息节奏的情况下根据不同的情况等比例缩放内容，这使得设计能更方便地调整内容密度，或许还可以配合 Media Queries 解决部分跨端的尺寸适配问题，且几乎没有前端成本。

国内的前端业界包括我们自己的前端同学更多将 Rem 运用在移动端，主要为了两个目的：方便计算尺寸、在不同宽度的设备上等比缩放内容，这样的用法是出于前端工程师解决屏幕兼容性的一种技术手段，在使用上本身也存在一定争议，而在响应式设计领域我们还没有发挥出 Rem 应该发挥的作用，甚至很多设计师还并不了解相对尺寸单位的使用方法，广泛应用 Rem 能为我们带来哪些实际价值是接下来需要继续研究的。

Breakpoints – 屏幕断点

屏幕断点是响应式设计的基础依据，它决定了我们要适配到什么样的设备或屏幕规格，并通过 Media Queries 这样的技术实现不同 Breakpoint 条件下的不同 UI 表现。一般情况 Breakpoints 都是基于 Phone、Tablet、Desktop 的维度来设计的，包括考虑了移动设备的横评竖屏情况，关于详细的规格设置其实并没有太大参考价值，设计体系都是根据自身定位以及设备覆盖的情况来制订的，例如 Material 的断点在低分辨率范围分得非常细，是因为 Material 主要服务的 Android 平台有着数量繁多的设备分辨率。在满足自己需求的前提下，屏幕端点不需要太多，无论怎样基于数据驱动的屏幕断点设置将会是一个更科学的方法。

（屏幕断点分布）

Fiori 的断点设计比较有意思，在设计文档中仅有基本的布局规则，没有明确的 Breakpoints 规则，Fiori 对于不同的组件会设计不同的 Breakpoints，例如在 Table 这个组件中定义了 0 < 220 < 270 < 350 < 460 < 570 < ∞ 的规格，而在 Form 的组件中，Breakpoints 变成了 0 < 600 < 1024 < 1440 < ∞，从这点上看出 Fiori 认为不同的组件有不同的表达模式，因此应该针对性对组件进行优化。

（Fiori 的 Table 组件适配情况）

Flex Layout – 弹性布局

Flex 布局是 CSS3 提供的强大布局能力，从更自然更具语义化的角度实现界面元素的自适应。应用于 Web 的设计体系基本上都在组件代码里广泛采用了 Flex 布局，Lightning 还将栅格与 Flex 布局结合定义了自己更完善的布局方法。在响应式设计中，Flex 布局通常结合 Breakpoints 使用，在两个 Breakpoints 之间让界面做更平滑的过度。除此之外其它平台也都有类似的弹性布局能力，例如 Fluent 在 windows 采用 XAML 构建布局系统。

无论是 Flex 还是最近兴起的 Grid 布局都是 CSS3 的基本布局能力，响应式设计要解决布局的问题将会深度依赖这些基础技术手段，本篇不进一步展开。

Grid System – 栅格系统

栅格系统是所有设计体系必备的，我们通常将页面横向分为 N 列，定义每一列的尺寸与间距，这为界面布局提供了一致性和成本便利。传统的栅格系统在响应式方面的应用主要是结合 Breakpoints 与一些 Responsive Token 来实现的，通过给 UI 元素指定不同的栅格数来决定他们分别在不同屏幕下占多少列，同时一些设计体系还提供了可见性相关的 token，来控制界面元素在不同屏幕的显示与隐藏。

Fluent、Fiori、Lightning、Material 以及大多数设计体系都采用了 12 栅格系统，因为 12 的因数够多，能满足足够多的布局细分同时又不至于太复杂，Carbon 的做法更加 geek 一些，他们的「2x grid」采用了 16 栅格系统，布局粒度更细但放弃了 3，6 这样的因数。 Ant Design 为了满足复杂的业务情况，采用了 24 栅格系统，24 栅格提供了更高的灵活性的同时，也大大增加了复杂度，面临栅格系统的响应式设计 24 栅格是否适用还有待商榷。

另外 Material、Carbon 还明确提出了「Fluid Grid – 流体栅格」的概念，核心思想是在较小的屏幕上降低栅格数量，将多余的栅格自动折行弹性布局。

（Carbon 的栅格定义）

在屏幕尺寸变化时，栅格主要有两种响应模式：Fluid、Fixed

（Fluid）

这种将栅格系统与弹性布局相结合的方式基于一些简单的规则设置，在不需要特定响应式的场景中不再需要指定繁琐的 token，且能满足大部分高频且通用的情况，在一定程度上降低了成本。

组件应用

除了通用的响应式规则以外，设计体系在具体组件中的响应式方案还有许多值得挖掘，能为我们的组件设计提供参考价值，本篇不再一一展开，仅提两个典型的应用情况：

框架

框架算是一个特殊的组件，在不同的设备中界面框架的适用有非常大的差异，几乎提到响应式的所有设计体系都给出了框架响应式方案，例如 Alta 将界面框架分为四块，以 Off-Canvas 和 Reposition 两种方式在不同尺寸的屏幕中显示或隐藏以及通过特定的方式展开或呼出。

通常情况下设计体系的框架组成按形式可以分为：

• Header – 通常情况下常驻

• Sidenav – 分为左侧右侧两种情况，一般用于放置导航，在不同设备会有展开，收缩，隐藏三种状态

• Content – 内容区，通常由 Grid 控制布局

• Footer – 如有，固定在页面底部

• Float – 浮动框架，用于临时状态，通知或弹窗等

设计体系通过对框架的定义，以及控制不同部分基于什么样的模式响应屏幕尺寸来实施对框架的响应式设计。

组件

Fluent 或 Material 在设计文档中更多基于基础的网格，布局，设计模式来阐述通用性的响应式规则，因此他们的响应式设计有非常好的延续性，组件的响应式方案基本上都遵循这些规则。

而 Fiori 以及 Lightning 在通用性响应式设计模式上的定义上没有那么全面，他们侧重于在组件层面对所有组件都考虑了针对性的 Responsive 或 Adaptive 的方案。例如 Fiori 在响应式表格的组件里，在桌面端与移动端分别是 table 和 list 的模式，这个方案并不是通过全局抽象规则得出来的，而是基于对组件的针对性设计，正如他们为不同的组件设计了不同的 Breakpoints，这种针对性也适用于特定的 UI 解决方案。

（Fiori 针对 Table 的响应式设计）

在一定程度上抽象规则的同时，如果我们能够为每一个组件都考虑到不同场景的响应式，当然就会提供更精细化的体验。在一个完备的设计体系里，在设计每一个组件资产时都以渐进增强的设计策略，考虑到不同的设备及屏幕适配是非常有必要的。

响应式设计的世界烟波浩渺，书不尽言，言不尽意。Ant Design 目前计划从布局基础规则以及内容密度的解决方案切入，逐步完善响应式设计的体系，这是一个重要且漫长的过程，至于文中挖下的坑还需要深入研究逐一补充，本篇初探先到这里，欢迎大家留言指出问题也很希望大家能留下想法共同探讨。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

文章来源：站酷  作者：Ant_Design

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

导语：“自选”作为金融类产品的基础功能，迭代至今已经非常成熟了。放眼望去，市面上主流金融产品的自选功能似乎都大同小异，但是体验下来会发现，细分领域下的设计侧重点却有所不同。

一、把握需求

如果我们将“自选”转化为熟悉的C端功能，它类似于“收藏夹”、“关注列表”的概念，是用户管理交易对象的重要阵地。除了常见的管理对象（交易概念中称作“标的”）、管理分组外，“自选”还会存在对数据和使用习惯的管理需求。

• 站在业务视角：券商的核心优势在于“交易”，所以业务目标自然为“交易”服务。“自选”相当于一张快捷交易导航，我们提供的诸多功能都是在帮助用户快速、便捷的调整这张表，直到它达到“为我所用”的程度。
• 站在用户视角：不同交易习惯的用户，对自选的操作频率有高有低，在保证效率的同时，还需要让每一类用户都能用的顺手。

二、竞品调研

1. A梯队：美港股券商，富途、长桥

• 共同的设计侧重点：功能的组织符合用户心理模型，任务专一，功能精炼，不追求全面、追求使用效率。
• 共同的弊端：“管理分组”的交互设计不够流畅。

富途“管理分组”采用的交互方案，初期学习成本是很高的，它虽然充分考虑了效率问题，却低估了用户理解上的困难。（截止本文发布前，富途最新版对现方案做了视觉样式上的更新，看来设计师也意识到了该方案目前存在着一些不够清晰的地方，期待后续交互上的迭代。）

长桥将分组的“新建、排序、删除、重命名”拆的很散，理解上不困难，操作起来较为繁琐。

2. B梯队：平台类产品，腾讯自选、东方财富

• 共同的设计侧重点：相关功能尽可能的聚合在一起
• 共同的弊端：当用户目前仅想完成一项任务时，产品每次都会同时提供多项任务，操作通常很难专注。用户不可避免的会多花些时间和好奇，来理解与本次操作任务无关的信息

3. C梯队：社区类产品，雪球

设计侧重点：管理标的、分组与数据、使用习惯的设置完全分开

一些细节问题：比如“管理本页股票”，在批量操作的场景下，底部栏却存在不能批量操作的选项

小结：对三类产品的竞品调研也验证了我们最初对需求目标的把握，为券商类产品设计“自选功能”，效率和流畅度是最关键的。设计目标明确了，接下来我们看看目前都存在哪些问题，以及对应的解法。

三、问题与解法

1. 当用户精准搜索一个标的，并将其添加至自选后，并不能在当前完成该标的的分组

如图所示，现在如果想完成上述任务，需要4步、且每次仅能将标的添加至1个组。优化后我们可以通过3步完成，且每次可以将标的同时添加至多个组。

（注：Snackbar虽然源于安卓原生的MD设计系统，在IOS并无此原生控件。但是随着二者在设计上日渐趋同，且控件的应用上也早已互通有无，所以Snackbar在IOS的使用，合理即可，不必纠结于平台差异。）

交互关键点：

• 想提升操作效率，不仅局限于步数、路径的缩短，它还可能是场景的正确连结、重复操作的合并；
• 使用Snackbar，本质上是给用户选择的余地。在操作a完成后的2-3秒决定是继续进行操作b，还是离开当前场景。

2. A功能和B功能在自选场景分别有两条触达路径，不过多路径的存在不但没有提升功能的使用体验，反而带来了不小的认知负担

关于“冗余路径”应该保留还是去除，一直以来都存在争议。讨论这个争议的前提是：冗余路径虽然不是最优路径，但是满足了特定场景下用户的特定操作习惯。

当“冗余”只是冗余、没有任何增益时，也要敢于做减法；因为同时还需要考虑一点：出发前的选择越多，用户的决策时间越长。

交互关键点：

在业务方提出为同一个功能再添加一条新的路径时，我们必须要弄清楚，这条新路径是为解决什么问题存在的。不解决问题的需求，大部分是对产品的无效堆砌。做好产品的“守门员”，给出专业的判断，是交互设计师的重要职责之一。

3. 关于“自选”的设置功能，这里会讨论到几个典型的“欲速则不达”的交互问题

1）对功能的整理和归类，是我们为用户留下的使用线索。如果推理时间过长，说明线索的指向性出了问题。

• 问题：将“管理分组”归至“设置”，分类不清晰；“数据项”Tab中的设置项没有根据相关性进行分组；
• 解法：在“设置”中去掉“分组” ；数据设置项根据相关性进行分组 （指标→显示→排序）。

2）如果层级 1 包含层级 1.x，那么层级 1.x 的操作不应放置在层级 1 的认知区域。

• 问题：数据项Tab的“默认数据”放在顶部导航栏，功能层级不匹配；
• 解法：功能层级调整至匹配。

3）如果用户设置了一些项目，无法在预期场景看到对应的效果，应提前给与说明。

• 问题：完成数据项设置后，无法在竖屏看到全部生成效果；
• 解法：在数据项设置页顶部进行生成效果的说明提示。

交互关键点：

注重“效率”是没错的，比如上述case中看似有“效率”的Tab结构。但是这里面隐藏着更多的“清晰”问题。如果一个功能设计的让用户用不明白，也就谈不上“效率”的提升。

4. 最后一个case我们看下互联网产品中最常被忽视的细节-文案

场景1：批量管理标的。

文案问题：按钮表意都是“删除”，带来的实际结果是不同的，存在歧义。

场景2：数据项设置。

文案问题：没有进行规范化处理，增加了选项的理解难度。

交互关键点：

很多时候，一套语义清晰、逻辑顺滑的文案，可以等价于某个功能优化的迭代周期。实际功能点不变，只是替换文案，就能让用户用的清爽明白。这样的“好买卖”，却一直被严重低估。

四、总结思考

遇到同质化较高的需求重构时，初期应扔掉“套路”思维，从用户视角、业务视角推导出主要设计思路。带着问题去分析竞品，推敲竞品在此类需求设计上的精细差异。不要对行业top给出的方案习惯性盲从，要经过思考和反复论证，推导出最适合自己所负责产品的交互方案。

当设计深入到细节，出现了可A可B的选择时，回头看看我们经过深思熟虑推导出来的设计目标。重新评估A/B方案是否符合目标、是否有助益于实现目标。没有太多“怎么设计都可以”的方案，从我们的选择中，也透露了决策的倾向。只是我们需要时刻确认这种“倾向”在整体逻辑中是自洽的。

每一份交互输出都应该是有观点的输出，即使最终我们的观点被业务方、协作方的诸多因素所淹没，仍要保持、增进自己提出观点的能力。那些常被用户生动提起的、打造出特色和性格的产品，都是由一个个鲜明观点铸造而成的。




蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

一、项目背景

1. 业务背景

• 3名设计师协同负责APP的设计工作，设计侧介入时间晚，周期短，由于是v1.0版本，没有可以复用的设计组件，从0-1探索设计风格，定义视觉语言。

• 前期每天依赖钉钉传输本地设计文件，设计语言不统一，效率低。协作工具不是很理想，后期待优化。

2. 设计背景

• 当我们开始设计系统的制定时，大部分设计师可能都会先去网上找到大厂现成的设计系统，当拿到他们的成品的时候，会把自己的产品进行拆解和借鉴，这的确能快速解决问题，但是如果不理解其中的组织规则和逻辑，只是借鉴他们现成的设计系统，只能了解个大概，知其然而不知其所以然。

• 直接复用其他产品的现有组件库并不能完美套用在自己的产品上，不能形成自己的产品调性，甚至有些组件不符合自身产品的使用场景。

二、设计规范的价值

1. 设计层面

• 随着项目开始成熟，设计也需要一套统一的标准，提升设计质量以及设计的一致性。有了规范及标准，输出才能趋向于稳定，迭代才能有序的进行。

• 沉淀设计资产，使得设计更加持续地输出价值，减少一次性设计，使设计师不要每天局限在元素样式设计中，而是可以站在更高的层面上来思考业务与体验。

2. 开发、测试层面

• 与设计规范同步形成研发资产，避免重复造轮子，保证代码质量，降低维护和拓展的成本。

• 测试避免重复的无意义走查。

3. 产品体验层面

• 统一产品体验，映射品牌心智。

• 规范的制定，能有序统一不同页面层级的信息架构，视觉表达。用户在产品终端内，各链路、各阵地的体验是一致的，看到的信息元素，也会有共性的传达。这些共性的元素，组成了品牌的内核，能够帮助用户建立心智。

4. 协作层面

• 降低不同设计师之间以及设计师与开发工程师之间的沟通成本。

• 设计师无需再花精力思考定义新的元素样式，既能保证统一性，同时通过复用体系，设计师也可以更高的提升效率，释放一定执行的工作量，可以把更多的精力放在前置思考决策环节，帮助业务、用户提升价值。

三、设计规范的目标

1. 设计风格一致

不同设计师有不同的设计风格、设计手法，项目有多个设计师协作时会出现不同的设计语言，需要统一产出的设计样式。

用户在使用产品时可以感受到统一的设计语言，从而降低用户的理解成本。

2. 提高设计效率

通过组件库高效协同工作

3. 建立稳定迭代机制，完善设计流程

版本迭代时，按照设计规范统一设计语言，有不完善之处，和项目设计师讨论确定方案，补充规范文档。

四、如何搭建设计系统

1. 设计原则

对于设计系统而言，在开始的第一步首先要确定一个标准，一个指导原则，在遇到不确定的设计过程中，依靠设计原则来引导方向。   

• 其他产品设计原则

• 有赞：产品原则：产品定义、产品设计、产品研发、产品运营。设计原则：高效、友好、安全

• TED：追求永恒，而不是追求潮流

• Pinterest：清晰易懂、充满活力、牢不可破

• Airbnb：统一、通用、风格化的、对话式的

• 我们的APP：扁平、亲和、简约

2. 色彩规范

主色

• 采用品牌色红色，色相根据产品调性有所调整

• 主色色阶使用扩展色生成器生成，在开源网站上根据自己的需求调整参数，创建色彩体系。  

• 在制作组件时，将颜色添加 主色、辅助色、中性色为一级分类，例如：01_主色；再添加二级分类，例如：01_主色/red ；三级分类根据颜色饱和度，用x%命名，例如01_主色/red/100%。

• 命名需使用「 / 」 符号区分层级结构。定义好颜色和命名后，将每个颜色转换成 Symbol，便可统一调用。

辅助色

• 

• 我们不仅需要品牌色来传递品牌价值，我们还需要辅助色来组成我们产品体系的颜色搭配，实现不同功能点的视觉呈现。目前编程猫APP辅助色暂定为黑色。

• 对于辅助色的选择，可以选取了同类色、互补色、对比色三种辅助色系。

• 同类色：

• 色环上相差15-30度的色彩，非常舒适，色彩过渡自然，温和，给予用户安心，信任的心理预期。并且于品牌色的色相冷暖性质一致，和谐统一。（将品牌色设置为最中间的点，就可以得到两个辅助色）如下图

• 
  

• 互补色：

• 指在色相环上角度为180°的色彩，比如我们最常说到的3组互补色：红和绿、蓝和橙、黄和紫。如下图：

  
  

• 对比色：

• 没有互补色那么严格，指的是在色相环上角度在120° - 180°之间的色彩，并且理论上来说，互补色应该也是包含于对比色之内的。比如：粉色和绿色就是对比色。如下图：

• 校正辅助色

• 校正的原则一：色相差值不能超过15近似色的选取，保证色相不超过15，保持统一的视觉体验。

• 校正的原则二：尽量保持感官明度一致

中性色

• 中性色作为辅助色，也是调和颜色视觉的一种。它本身不带情感色彩，可中和其他任何颜色，自然界中没有纯黑或者纯白的颜色，所以将纯黑色降了纯度，使之符合感觉舒适程度。中性色也常用于字体的使用，并且以不透明度的形式落地。

• 在中性色组件里，由于文字、背景色都属于中性色，分别定义了三大类的二级分类，分别BG、Black、Text

功能色

B端产品多用，此处不过多赘述。

3. 字体规范

字体的命名方式为序号_标题类型/字重/对齐方式/字号的层级结构，例如「01_主文字_标题_按钮文字_正文/加粗/Center/28px」；一级分类定义了五个大类：

• 主要的文字：主文字、标题、按钮问题、正文；

• 次要文字：副标题、辅助文字、弱标签字；

• 禁用文字；

• 标签文字：文本链接、功能文字；

• 特殊字体。

4. 栅格系统

我们都知道多数栅格里的间距都采用8/6的倍数，有了8这个基数后其他都很容易定义，但是前期我们2位设计师在设计初期页面时，1个采用6倍栅格，1个采用了8倍栅格，导致设计稿不统一，浪费了时间修改调整

那具体应该是用6还是8呢？

• Web端常见框架Bootstrap用8为基数，响应式布局更灵活

• 减少出现奇像素偏移造成模糊

• 开发更容易理解的数字8

• 能被最多的屏幕尺寸整除适配

5. 图标设计

一级分类分为导航类、功能类、系统类三大类，二级分类根据场景和名称进行细分。前期二级分类用尺寸来进行分类，但是后期讨论用尺寸定义寻找某个图标不够便捷，如果找「返回」，设计师并不知道这个返回是多大尺寸的，寻找起来就比较费力，所以改成了按照场景分类。

根据图标形状，按照方形、圆形、横向、纵向输出图标绘制模版，便于用户感知到统一的图标风格，也便于设计师对图标进行绘制和调整。

6. 通用控件

根据原子理论的定义和命名方式，依次完成对其他通用控件的原子、分子和组织的定义，例如：按钮、列表、空状态等，整个过程都是通过 Symbol 的不断嵌套，最终实现组件库的创建。

Diolog 弹窗

• 满足基本组件需求，跟随文案内容自动适配弹窗高度，按钮颜色可更换，文案字符样式可更换

• 使用包含具体动作的动词，即使不看上下文也可以通过按钮判断，而不是使用【确定】、【取消】等宽泛的词汇。

Default 缺省页

给用户提供解决方案，而不是让用户自己寻找问题原因

List 列表

• 符合前端-盒子模型

  

• 盒模型是一种描述对象尺寸和间距的方法。它由 4 个组件组成：边框、边距、内边距和元素本身的尺寸。

• 边框：围绕元素边缘的描边粗细。大多数设计工具不允许这影响整体间距和尺寸。

• Padding：元素边界与其子元素边界之间的空间

• 边距：元素边界与相邻对象之间的空间

在做每个模块时，不仅仅只是把默认的文本/元素制作出来，它的热区也要让开发可以理解，按照盒子模型的原理，比如在做List，「单项输入」文本的行高，整个单元格的高度需要用白底画出来，明确padding值；与其他元素/设备之间的边距（Margin）要也表示出来。

五、维护与管理

1. 存储地址

• sketch cloud云端同步

• 云端管理会有一些较大的优势。比如更新通知更方便、每次大家访问，都能下载到最新的规范，维护管理起来也会省事一些。

2. 更新同步

规范的改动性不要过于频繁，通常半年及1年左右的时间以上，进行一次较大迭代是比较合适的。每次更新以后，需要邮件或者其它形式，周知所有跟规范可能相关的人员。同步的信息主要有  ：

规范本次修改范围及修改原因；

1. 修改点罗列

2. 优化后的版本号

1. 最新的文件同步

2. 推进变更计划
   
   
   
   
   蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

   

   
   文章来源：站酷  作者：AmberU
   

   分享此文一切功德，皆悉回向给文章原作者及众读者.
   免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
   

   蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务