构建设计规范体系
为什么要做
对内：随着公司业务增长，服务客户逐年增加，业务体量和产品复杂度日趋加大，参与产品的研发和设计的人员不断扩充，产品的统一性和输出质量受到较大挑战，为了让产品具备简洁高效的、一致性的交互体验，需要有一套符合自身业务需求的设计体系，来帮助团队正确、有效、且高效地协同运作。
对外：近些年，低代码、开源协同的浪潮兴起，设计体系再次被推到风口浪尖，国内外许多产品设计团队早已在内部完成了设计系统的建立，也有了不少技术上的经验和沉淀，我们也可以通过构建设计体系，提高在行业中的设计的影响力。
存在的问题
- 业务模块多，多条产品线并行，团队缺乏完整的设计规范指导，设计资源管理难度大。
- 各业务模块视觉交互不统一，给用户带来较高的学习成本，研发、设计重复造轮子，有一定的资源浪费。
- 产品经理与设计师缺少统一的设计语言，在交互体验问题上无法快速达成意见，影响交付效率。
- 新人设计师缺乏指导规范，面对新业务需求时无从下手，新人培训成本高。
面临的挑战
作为项目推动者和管理者，我的挑战在于： 如何让这套规范体系产生实际的应用价值 ，设计师在项目过程中能否得到成长和收获 以及 如何在有限的人员配置里调动每位参与者有序的推进落地 、如何以业务为核心更好的进行设计规范的构建。
期望的目标
在开始之前，我们先确立好想要达成的目标，保证每位参与者的目标一致。
策略行动
设计体系不仅仅是一个框架、UI 工具包或组件库，也不仅仅是一个风格指南或一组代码指南，我们希望它是落到实处的，正确有效的帮助团队和产品不断的前进跟发展，所以在制定策略是全方位的，主要包含协作流程标准化、视觉规范建设、达成共识、宣传推广、实施落地 5个方面。
协作流程优化
通过流程优化，让每位参与产品设计的设计师能够更多的参与到需求讨论以及产品规划中。同时，本着专人专项的原则，每位设计师都有自己负责跟进的主业务线，以便深入的了解目标群体和业务目标。在完成设计开发开发后也需要持续对设计负责，包括上线前设计还原验收以及产品上线后效果跟进。
视觉规范建设
我们基于“原子理论”的分层设计模式，进行了组件的拆解和设计。在与产品团队基于业务场景进行多次分析和讨论，经过多次打磨和设计迭代后，从0到1完成了一套拥有 550+ 组件、 90+ 样式，以及覆盖页面达 30+ 的小程序设计组件库。
颜色规范
依据业务上的特性，产品需要为众多开发商提供搭建页面的服务，在设计上既要有标准化，同时也要实现个性化。在颜色方面，我们通过过往经验的积累，提取出了8个颜色作为基准色，并基于HSB色彩模型延展出48个衍生色作为基础色板。
有了基础色板，再由研发同学将颜色变量（color token）嵌入开发代码中，在构建不同开发商的小程序时，设计师和开发者可以快速通过选取符合品牌调性的颜色进行匹配以及做全局性的修改，横向提升团队的协作效率。
/* 颜色变量的定义，已全局引入，无需再次编写 */
$sw-type-blue: #2979ff;
$sw-type-cyan: #ecf5ff;
$sw-type-green: #a0cfff;
$sw-type-indigo: #2b85e4;
/* 在编写css的地方使用这些变量 */
.button {
color: $sw-type-indigo;
......
}
图标规范
在图标绘制上，规范中明确出安全区、出血区、描边粗细等制图标准，确保每个图标的绘制都遵循统一的绘制模板。
后台组件迭代
后台系统是基于Ant Design的开源组件进行开发完成，我们所采取的方式是在原有组件的基础上做视觉升级，减少开发的投入同时缩短设计周期。
组件开发
我们还协同研发同学，基于uView的UI框架，在内部上线了组件官网以及组件示例小程序的设计和开发，可同时在小程序和 H5 平台上运行和应用，帮助开发者提升效率，改善开发体验，降低多端开发成本。
官网搭建
为进一步提高设计影响力以及协同效率，我们希望能有一个平台来沉淀设计资源，提供设计指南，能够帮助产品经理、前端工程师、测试工程师等更多角色提升研发和设计效率，并保持设计语言和风格的一致性，满足实现优质用户体验的要求。
参考了市场上成熟的设计体系框架，结合实际场景，与小组成员共同敲定了官网的基本功能架构。
视觉风格的定义除了符合产品本身的特点，同时也是传递团队对设计理念的追求，我们希望是简洁高效的，让使用者快速便捷的关注内容，实现效率提升。
Landing Page 主要分三屏展示，分别展示信息概览、设计&开发指南以及资源下载。
为方便维护，设计指南和交互模式库的内容，均由设计师以Markdown的形式进行编辑更新，减少后台发布的流程。
交互模式库
作为SaaS产品，功能设计和开发成本比较高的，庞大的业务量导致交互设计师要去重复验证设计可行性，通过大量的走查和设计，我们发现大部分产品功能中的交互基本是以增、删、改、查为主要形式，是可以将其提炼为一套标准模式的，将交互说明可视化，类似操作说明书提供给其他设计师以及产品经理，能够最大化的减少交互设计师繁杂的工作流程，同时保证产品在交互体验上的一致。
我们通过梳理，将复用率较高的交互流程进行提取，归结为：录入、查询、编辑、导航以上4大交互模式。然后我们通过文档的形式进行整合，包括交互说明以及动态交互效果详细介绍交互模式的使用场景和注意点。
达成共识
另外，我在团队内部初拟了一份《产品设计协作规范》文档，用于设计文件的有效管理，这在多人协作的团队中能够起到很大的提效作用，同时能够帮助新人快速了解团队基本工作流程。
从设计文档的命名方式，到文档结构，再到最终的设计交付流程，都纳入了协作规则。目的是让大家形成良好的规范意识，文档也同步到产品、研发、测试等跨部门协作团队，减少信息不对称所造成的沟通阻碍，从而提高整体的协作效率。
正向循环
想要形成体系化的管理和运作，就需要让构建产品的参与者都了解这套规范在工作流程中的作用和影响，我们先后在产品设计团队、研发团队进行了多次宣讲，进行规范的普及和讲解。同时，还收集大家的意见和建议，持续的对规范内容进行补充完善。
2020年8月起，我们通过设计走查来核验规范体系的效果，走查过程我们共梳理出 175 个模块页面，并在规范指导下完成了 85% 的体验问题优化。
设计效果
至此，我们已经基本完成了一套满足设计目标，贴合产品业务需要的设计规范体系。通过使用设计规范及组件库，我们的产品界面组件设计样式得到升级，产品设计的一致性和规范性 有了实质性的提升，实现了非复杂操作流程的功能需求，研发同事通过组件调用以及参阅设计规范文档，完成大部分需求的直接落地开发，有效缩短需求设计开发的时间周期 。对于设计团队，在规范的构建过程中，每个参与的设计师，通过设计与实际的业务需求的碰撞，不断的熟悉了解业务，从而能够站在业务的角度、专业设计的角度，更加全面的建立可持续性的设计体系。