现有的设计规范搭建流程及搭建的要素及流程

　　

现有的设计规范搭建流程及搭建的要素及流程

　　

　　在互联网公司，随着用户的增长和产品的迭代，产品的新页面、新功能越来越多。如果没有设计规范，整个产品就会越来越臃肿，迭代速度也会受到影响。

　　自然设计规范的重要性不言而喻，但即使是BAT这样的大公司，在实际操作中也经常发现这样的问题：在构建设计规范时，团队成员不能很好地进行设计协作，生产效率也很低。

　　本文将梳理分析现有设计规范构建过程中遇到的痛点，以及市面上解决该问题的方案存在的不足，进而提供最优方案，让设计规范更加高效有帮助。

　　一、设计规范及施工过程要素

　　首先，让我们澄清一些定义：设计规范由设计原则、组件库和规范文档组成。它是量化和约束设计项目的指导原则，需要反复实施和强调。

　　组件库由样式和符号组成。样式是颜色、文字、图层样式，符号是按钮、标签、标签栏、导航栏……等一系列的组件控件。

　　构建组件库的作用是让设计师直接调用Styles和Symbols，方便不同项目的复用和设计扩展，保证产品视觉风格的一致性；并且开发可以直接学习复用组件的代码，节省研发时间成本。

　　规范文档是组件库的使用手册，详细描述了组件库的设计原则、样式指南、组件类型和组件使用细节。

　　市场上常见的设计规范构建流程是这样的：

　　二、建筑设计规范的过程

　　

　　但是在调查了几家大工厂的团队后，我们发现在制定设计规范的过程中，大部分团队都有这样的痛点：

　　三、组件库制作/更新痛点总结1.需要更好的采集和处理团队提出的组件问题

　　在制作/更新组件库的早期，反馈的问题太多，无法有效记录和对齐需求。当团队成员遇到组件不适用的问题时，不知道反馈给谁，或者反馈后没有跟进，未能及时跟进。

　　2.需要帮助制作者更好的检查组件库的使用情况

　　在组件库分发阶段，大部分都是人工交流，比如写邮件、从网盘+通讯软件上传文件、组织会议等，告知成员已经产生了什么，已经发生了什么改变了。

　　成本高，效率低，团队成员也容易忽略消息。因此，在分发后，开发者需要担心用户是否使用组件库，是否更新到最新版本，是否满足用户的业务需求。

　　3.需要帮助用户及时更新组件库

　　在组件库更新未能及时同步的情况下，多人维护上传内容，容易相互覆盖，导致内容丢失或输出不一致。

　　

　　四、编写规范文档的痛点总结1.需要帮助定制者提高编写规范文档的效率

　　传统的规范文档编写方式，需要一遍遍地将组件库组件的截图复制到网上，并且需要手动命名+添加描述。

　　然而，规范文件的制作不是一朝一夕就能完成的。为了满足项目的需要，设计规范制作完成后，往往需要及时迭代优化，一遍遍更新图片和描述。

　　这样一来，编写和维护设计规范的高昂成本就会拖慢产品迭代更新的速度。

　　2.需要帮助制作者更高效的制作展示效果好的规范文档

　　在传统的富文本编辑方式中，要制作出分类合理、目录清晰、版面美观的标准化文档，投入的时间和成本都非常高。

　　开发除了满足设计师的需求，还有查看组件注解的需要，但是注解需要设计师花时间一一添加。

　　

　　为了解决上述构建设计规范过程中遇到的痛点，很多公司团队做了很多尝试，我们的采访记录总结了现有解决方案的不足之处。

　　五、借助市面上的协作工具，总结出1.市面上解决方案的不足

　　我们发现使用市场上的设计协作工具来制定设计规范只会将组件分成单独的层并将它们存储在我们自己的平台上。

　　但是会导致这样的问题：

　　例如，如果组件A需要更新为组件b，则在规范文档更新后，您需要手动将其替换为组件库中的组件b​​以及出现组件a的所有设计草稿。这样，每次组件更新后，都需要人工排查，明确更新内容和影响范围，费时费力。

　　2.依靠云盘协作

　　与市面上的其他设计协作工具相比，icloud的亮点功能是实现了组件库的同步交付。只要云组件库的组件发生变化，就可以同步分发到所有应用该云组件的设计稿中。

　　但同时，这种协作方式也存在这样的问题：

　　为此，针对设计规范*敏*感*词*中的各种痛点，我们CoDesign提供了最优的解决方案，不仅支持多人协作、云端数据可视化、自动更新提醒，还能自动生成规范文档的新设计标准化的解决方案。

　　六、真正高效的设计规范解决方案

　　

　　1.多人维护，组件库同步交付，协作更高效

　　核心亮点功能是CoDesign的设计规范支持多人对组件库的维护、修改、合并和同时交付。

　　只要成员更新了组件库，系统就会同时更新所有应用该组件的设计稿。还有组件库更新提醒功能，有效避免多人协作内容被覆盖的情况。

　　

　　2. 自动生成/更新规范文档，让生产更轻松

　　上传CoDesign for Sketch插件中的组件库，自动生成规范文档。 Styles 和 Symbols 会在文档中完整显示，并且会根据 Sketch 中组件的命名方式自动生成目录结构。

　　

　　在 CoDesign for Sketch 插件中上传新的组件库后，可以直接更新规范文档。

　　

　　可视化组件、结构化搜索目录和清晰的组件显示区域。这样的规范文档可以帮助每个用户更快的找到自己想要的设计规范的内容！

　　3.提高团队协作效率，解决所有问题

　　以往在制定设计规范时，可能会遇到这样的问题：“设计人员需要手动一一标注”、“研发需要判断设计稿中的图层是否为组件，容易重复发展", "手动打标可能会导致数值不准确"。这些问题我们都为您解决了！

　　在“设计规范”中，设计师可以查看Styles和Symbol的风格效果。点击“添加说明”添加样式和符号的说明，保证团队设计的一致性。

　　

　　在“设计规范”中，开发者可以点击任意样式和符号来查看标签信息。点击“复制代码”，还可以一键在线获取相关代码信息，提高代码复用和开发效率！

　　

　　4.一键使用提醒，合作更顺畅

　　不知道组件用的是不是最新版本？还在一一通知会员更新组件库？不需要！

　　在“设计规范”中，右侧的“使​​用情况”可以查看团队成员对设计规范的使用情况。

　　如果团队成员添加设计规范后没有及时更新设计规范，管理员可以在“待更新”框中选择该团队成员，一键提醒，督促他们及时更新。

　　

　　如果遇到某个组件不适用的问题，很容易及时反馈，只需在对应的组件上发表评论，@responsible 人就可以搞定。

　　5. 精准搜索设计规范，调用更快

　　元件库检索成本高？更新内容不清楚？找不到？使用CoDesign就不会有这个烦恼！设计规范支持精准搜索。

　　会员可以点击“设计规范”右上角的搜索框，输入设计规范的相关信息。将显示相关的颜色、文本、图层样式和组件。点击跳转到相应的规格目录。

　　让每个团队成员更高效、更准确地调用合适的组件。

　　

　　本文由@QQCoDesign 原创发表，人人网是产品经理。未经许可禁止转载

　　标题图片来自Unsplash，基于CC0协议

　　奖励作者，鼓励他努力！

　　欣赏