有了Ele、Ant、Arco，B端UI设计师就不需要搭建项目设计规范了？

之前有一节公开课，讨论了对于B端设计师来说非常核心的话题，那就是在大厂开源后台框架林立的今天，B端设计师还需不需要搭建自己的设计规范。

B端设计师要一直面临开源框架带来的挑战，因为表面看起来，它们把设计师应该做的事情提前做掉了，然后还事无巨细的把设计组件、图标、规范都给做出来了。

尤其是规范部分，洋洋洒洒几万字，几百张图，几百个实例演示。

都写那么翔实了那么完整了，你能有信心凭一己之力写得比它们更全、更好、更完整嘛？以及，你要自己真写那么多，你们开发看的下去嘛？所以就不用做设计规范，拿来主义就够了嘛？

不，B端设计师必须做设计规范！

开源框架把设计规范写的那么全，核心的原因是因为它们不是给特定规范使用的设计规范记录，而是写给设计师、前端开发看的 “框架视觉规范教学”。

比如，Ant 的色彩规范里，定义了一整套 WEB 安全色系统，几十个色相分类和几百个具体色号。相信不会有同学觉得自己的项目会完整用上全部色号吧。

最基础的按钮也有非常多的类型，圆角、直角、描边和透明等，但一个正常项目只需要用 2-3 种类型。

再比如，Ant 也给出了3种一级导航菜单的类型，但显然我们不可能在一个项目里把3种一级导航菜单样式都给用上！

对于开源框架来说，会提供尽可能全面丰富的规范、组件，尽管这些东西你可能用不上（但别人可以）。

这些规范说明，是用来告诉我们它包含了哪些内容，长什么样，该怎么用！而不是强制告诉你项目应该怎么设计……

所以感觉出问题了嘛？你项目规范中的细节到现在为止依旧还是空白的。

作为设计师，我们整理项目设计规范的第一步，就是从这些框架规范中提取你项目中应用到的内容，如色彩、栅格、布局、导航的具体方案。

Arco 显然意识到了设计师的需求，所以开发了一个规范创建工具，你可以直接根据 Arco 官方提供的规范做自定义设置，并快速生成网页规范文档。

链接地址：

https://arco.design/themes/stores/manage

但目前这个工具还太简陋，实用性不高。原因是除了上方说的官方自带的组件并不是我们全部要用上，侧边栏类目无法自定义。

同时还包括，项目往往会出现一些独有的业务组件，这是开源框架里没有，我们还需要去添加这些元素的说明。

最终，总结一下，B端设计师制作项目规范的工作，可以简化成：

提取应用到的框架规范，再补充项目独有的样式、组件说明。

既然一定要做设计规范，那规范里该放什么，就是我们必须提前掌握的知识点了。我通常将规范拆分成3个大类，宏观、官方控件、业务组件。

宏观部分，即布局、栅格、响应、间距、字体、色彩、风格这些全局内容。

然后，就是一些框架中提供的基础控件、组件的筛选了，把必要的内容提取出来，尤其是按钮、选择器、表单元素等。

最后，就是整理项目中用到的业务组件了，比如一些可以拖拽的任务卡片组件，特殊的编辑器，树状结构管理工具等等。

然后，就是对一些复杂的控件组件准备统一的描述格式，包含它的场景解释、状态/样式说明、交互逻辑说明。

为了方便大家理解，我制作了一个思维导图，看完基本上就能搞明白了。

每次在开始输出具体的规范前，建议大家也制作一个思维导图，把对应的分类、层级确定出来，可以帮助我们更快的完成内容的制作。

最后，就是应该怎么输出设计规范了。开篇名义，我不建议一切文档形式的工具记录设计规范，包括且不局限于下方这些产品：

原因很简单，因为这些工具使用起来太 “麻烦” 了。最大的障碍就是维护起来特别繁琐，尤其在项目前期，规范的变更是非常频繁，每次变更都要进文档更新，会拖垮我们的精力。

以及，多一套文档出来，意味产品团队还要额外去记录一个文件或网址，增加了内部协作的复杂性。一份优秀的设计文档，应该满足下面的这些条件：

• 统一性：文件唯一性，保持统一版本

• 便利性：只需要通过一个必用工具进行查看

• 复用性：既可以查看标注数据又包含文字内容

• 简洁性：语言简练，尽量减少不必要标注信息

最推荐的方式，就是通过 Fimga/即时设计 等线上工具，直接制作规范文档，相信很多同学已经在做类似的事情了。

在我们的 Figma 软件教学有提过，当我们使用软件中的组件（Compoent）功能时，要注意父级组件的管理，最好的方法就是将它们集中起来放置在新的页面（Page）画布中。

比如下图是我们课程案例中制作的组件库（完善中）。

这个规范的操作为我们提供了非常理想的规范输出基础，剩下要做的，就是做好分类，并将需要的说明文字输入进去。

通过直接在设计软件内制作规范文档，可以让整体效率得到非常大的提升：

• 团队协作中规范和设计稿同步，其他设计师、开发、产品查看便利

• 修改父级组件不用考虑维护其他文档，实时同步

• 画布缩放形式对检索规范的效率比文档形式更高

• 节省更多的时间，可以让设计师更好校对规范内容

以上就是依托开源框架搭建设计规范的思路，需要大家自己动手去作出一些尝试，来适应这个流程，极可能打造能让规范落地的形式和内容。

因为时间关系，我就没办法整理出非常完整的规范应用案例了。这只在我们自己的课程中会有完整的演示以及应用落地的过程。

如果想要掌握更完整的B端设计项目流程以及实例分享的话，就来参与我们的 B 端产品设计全能班第8期吧！

下篇再贱！