带你全面提升工作效率：B端设计规范攻略（一）

三原设计 2023-08-08 17:27:52

去年我接收了一个比较大的B端项目，产品经历了四年的迭代，算是成熟的产品了，我拿到的时候，还蛮兴奋。但是使用一天以后我就只剩下头疼了，这么复杂一个产品，设计不统一、交互不统一，重要的是，居然没有一个合理设计规范，我在梳理设计稿件的时候完全摸不着头脑。一个月以后看到这个产品，我还是摸不清产品情况。

以下是我根据自己工作中遇到的问题和相关解决方案，总结各路大咖的一些精髓以及我的一些想法，汇聚成了相对比较全的关于B端产品设计的的文章。文章稍微有一点长，请耐心看完，会对刚接触B端的新手们有一定的帮助，也能帮您提高工作效率，节约不少时间的。

产品经理，产品经理网站

01 设计规范的概述

1.1 设计规范的概念

设计规范是指对设计的具体技术要求，是设计工作的指导规则。一般包括总体目标的技术描述、功能的技术描述、技术指标的技术描述，以及限制条件的技术描述等。

Design System 最开始是 Guide 演化而来，Guide 是一套可指导、可延续、可扩展、可统一的、可区分的视觉指引手册，指导相关设计结构完成统一性与对外区分性。具象层，它是一种设计方法；抽象层，它是一种思考模型。

设计规范一般会具体到公司级别、某一类产品线、某个产品等。今天主要讲具体某个产品的设计规范，主要是为该产品制定统一的用户体验、品牌、视觉等方面的规范，当然是在满足以上公司级别和某一类产品线层次的设计规范的基础上。

1.2 设计规范的组成

设计规范由设计原则、设计语言和组件库构成，在设计原则的指导下使用设计语言和组件库创建体验一致的用户界面。

设计原则是指：整个设计体系所要遵循的全局原则，是为我们设计提供方向指导的。

设计语言：是指设计所包含的语言体系。具体包含了：色彩、字体、图标、布局等

组件库：相当于积木玩具的一个个积木，每个组件就是一块积木，通过组件的拼搭可以迅速搭建出一个个页面。下面我会具体说明组件库。组件库具体包括：按钮、导航、表单、数据等等。

1.3 B端及C端

我后面会有专门的文章专门讲关于B端产品和C端产品的文章，这里就不再赘述了。这里大概讲一下两者在设计规范上的差别。

B端产品和C端产品制定设计规范差别还是蛮大的，最主要的差异大致是：

C端产品的设计规范，目标几乎都是为了更好的打磨用户体验的一致性和标准化；
B端产品设计规范，由于用户体验更复杂，学习成本更高，所以它的目标侧重点是：除了布局的不同外，相同业务场景下，相同产品功能需要有一致的，标准化的体验，降低学习成本，提高工作效率，即统一体验。

产品经理，产品经理网站

1、对于产品经理

创建原型时可直接调用组件库，能搭建出高保真的原型。

与设计师和前端沟通更加顺畅，小的修改可以直接和开发沟通不需要通过设计师出图，极大增加了前期的节奏，提升沟通效率。

2、对于设计师

对于只有一个设计师的项目：可以让那个设计更加规范，有些简单功能迭代可以直接个研发沟通，不用再单独出图，减少重复性的工作。

对于同一个项目由多个设计师共同协作时：可保证设计各方面包含体验、设计、交互等等的统一性。减少设计成本，提升设计及沟通效率。

对于接手新项目，能尽快的了解产品，快速入手。

对于开发完成验收走查，有了前期的规范及比较详细的设计尺寸，开发的设计还原度会更高，减少重复及没必要的设计走查。

3、对于开发

开发可以按照设计规范建立好公共组件库，极大的提升开发效率。

可复用的东西确定了下来不会频繁改动，设计走查的问题也会逐渐减少。

4、对于测试

对于模棱两可的交互可以有地方看交互样式了，不需要再询问设计师。有更多的时间专注于测试功能上的问题了。

通用的组件前期测试后了以后，后续就不需要重复测试，极大的提升工作效率，避免重复工作。

5、对于协作沟通来说

前期制定及评审设计规范以后，有一套笔记明确的规范，可减少各个职位方面的沟通成本，提高沟通效率。

目前市面上有很多多的第三方设计规范，比如：antdesign，element，那有人就会问有必要自己重复造轮子做一遍吗？

我觉得是有必要的，为什么呢？

每个产品有各自独有的品牌调性，如果都用第三方的设计规范，那同质化会很严重，很难做到差异化，也就很难在竞争中脱颖而出。
世上本没有万能的设计规范，那些设计规范的组件并不能100%满足我们产品的需求。另外一方面使用封装好的第三方设计规范，在此基础上进行修改，效率很低，适配的复杂度和重新开发相差无几。
第三方的的成熟的组件库，我认为应该把它当成模式，在他们的基础上去做自己的设计规范。