编辑导语：在产品搭建中，设计师需要针对产品定位、前端开发、用户体验等方面来进行产品设计方案的确定。那么产品设计应当从哪些方面着手搭建C端产品设计系统？本文作者结合其自身经验、较为系统地总结了快速搭建C端产品设计系统的方案，一起来看一下。

文章主旨在于拆解和分析设计系统中基础要素所制定规则的原由以及其合理性，了解设计系统基础要素的搭建依据从而更灵活地为其所用。

前期资料整理

搭建自研产品的设计系统前需要做大量的工作，首先要针对产品定位来确定设计系统的MVP的范围，这样来保证搭建设计系统的完整性；其次再学习和借鉴已有、成熟的设计系统；**要根据现有的团队、产品规模和人力来推进工作，需要设计师和前端开发紧密配合，尽可能多地同时更新内容。

前期梳理其他设计系统整理表单抽取部分，链接如下：

备注：以上仅为个人从产品的业务维度理解后的分类，仅供参考。

设计系统存在的价值的定义：

• 解决特定的设计问题，快速输出可复用的产品界面；
• 总结获得成功的使用体验，为用户持续提供友好体验；
• 便于产品在多终端的管理。

介入的契机

产品由0到1后、且开始进入有序又紧凑的迭代时考虑设计系统才是比较合适的。原因有二。

1. 已过磨合期的团队、工作流程和业务的稳定性是搭建设计系统的前提。
2. 此阶段是产品快速成长阶段，业务模块和使用终端的丰富，对设计工作的挑战会大大加强。设计工作横向关联上下游以及设计师多人协作的工作衔接，纵向关系到设计品质在细节的把控和精进，特别需要有系统的设计规则统一指导设计工作的进行。

设计系统的内容

在此次设计系统的研究方向主要在移动端，为产品设计过程提供设计依据和规则指导。

设计系统（Design system）从以下五个部分来构成：

1. 设计原则（Pprinciples）；
2. 基础元素（通常指UI Design elements）；
3. 组件库（Components of organisms）；
4. 模版（Templates）；
5. 模式（Patterns）。

具体搭建设计系统的方法和内容：怎样去获得具有合理性元素的方法以及部分设计系统的内容。

一、设计原则

设计原则需要依据产品定位来设定，不同行业属性的产品有携带不同的产品基因，因此在初期设定时会以产品本身的业务为基础，来探索系统的合理性、易操作性、高效、美观。使用最基础或通用的一些设计原则做引导。

二、基础元素 Design elements

统一画版——在不同环境中尺寸参考如下表，我们设定主要的开发尺寸：375*667，在Sketch文件中一倍图的基准尺寸中，1Px=1Pt，视觉设计可与开发尺寸保持一致性。

导出文件原则统一为Sketch导出2X图交付给开发，所有元素的设定尽量保持在不佳条件下仍然可以被用户使用为前提。

基础元素框架：包含字体、色彩、图标、空间、微动效。