关于B端后台产品的设计思考及设计规范

本文包括：

• B端产品的特点、遇到的挑战、我是如何解决这些问题的；

• B端产品的设计语言，包括设计原则、颜色定义、字体规范、删格布局、组件；

是什么？给谁用？

采销系统是什么？主要包括了：销售、采购、库存、品类、预测等功能；

用户主要是谁？京东内部负责商城自营的采销人员；

B端产品的特点

1.「效率为王」，与C端产品「体验为王」不同，B端产品更理性，使用效率高于一切；

2.「业务至上」，以业务为导向，架构复杂且较为定制化；

3.对B端产品而言，功能齐全+高效>易学性；

面临的挑战

1.用户群体专业性强，业务理解难度大；

2.B端视觉设计师的成就感较低；

3.采销系统多为公司内部及商家使用，可参考学习的竞品少；

…

如前面所述，目前To B产品发展较落后、产品功能逻辑复杂、理解成本高、用户量小、缺少竞品、缺少成熟的方法论指导，因此产品设计难度非常高。

那么如何解决以上难点呢？

1.业务理解难度大

对视觉设计师而言，业务理解的要求没有产品、用研或交互那么高，但是也要做到能理解用户的需求，贴近用户，理解业务的最好的方式是能自己去真实场景进行用户访谈，这些真实的感受和体验带来的收获远远大于产品经理给设计师描述带来的收获。

2.B端视觉设计师的成就感较低

B端产品里，尤其是内部使用的产品中，视觉设计师的话语权都是较低的，并且大部分ToB产品的交互设计价值远远大于视觉设计，B端产品大部分都是密密麻麻的表格、表单、数据可视化，经常要为了更好的功能体验牺牲掉很多ToC类的设计黄金准则比如留白、做减法等，最终页面都比较欠缺美感，不像做一个音乐、直播等ToC产品那么有成就感。但是我个人认为，做什么设计都是有乐趣的，做ToC产品，把一个页面做的漂亮精致，肯定很有成就感。做ToB产品，更多的思考投入用户调研、组件化设计、逻辑梳理也是非常有成就感的。

3.采销系统多为公司内部及商家使用，可参考学习的竞品少

B端产品最容易想到的是云平台类的产品，比如亚马逊云、阿里云、腾讯云等，其次还有CRM系统，比如salesforce、SAP CRM等

设计语言

设计原则

颜色定义

颜色定义包括了：品牌色、中立色、功能色及数据色。

关于配色可以参考Material Design 中的色彩定义 http://design.1sters.com/material_design/style/color.html

字体规范

PC端字体需要区分mac和windows平台，如果只使用微软雅黑字体，在safari中无法显示，会变成宋体字。

字体规范包括 字体家族、字号尺寸、字色、行高、字重。

在这里我使用的字体家族为ivew中的字体家族https://www.iviewui.com/components/font

删格系统

后台系统根据浏览器尺寸响应式布局可以最大化利用空间，我司采销人员主要使用1366分辨率的Tinkpad笔记本，所以我们主要针对小屏幕992px、中型屏幕1200px、大屏幕1920px进行响应式布局。

删格系统的规范制订我主要参考了bootstrap Grid system的规范 https://getbootstrap.com/docs/3.4/css/#grid

在本项目中，我做了12格删格系统，页面类型大致分为Dashboard控制台和Form表单页面，我主要就这两类页面做响应策略的适配。

Dashboard控制台

1200px

1920px

Form表单

1200px

1920px

组件

关于组件库，在开始设计之前一定要和研发沟通，很多研发团队是固定使用某个组件库的。

组件库的选择非常多

ant design https://ant.design/index-cn

Material Design http://design.1sters.com/

Salesforce Lightning Design https://www.lightningdesignsystem.com

…

图表插件库包括

https://echarts.baidu.com/examples/

https://bizcharts.net/index

…

等等

对于后台系统中导航复杂的问题，我们可自定义导航，删减自己需要的导航功能。

总结

对于逻辑复杂，页面量非常庞大的B端产品，使用组件库是非常有必要的，可以让设计师的精力尽可能多的投入设计中的创新点、用户体验、业务思考，而不是在日复一日的重复做图。