我在其中的定位
整体规范搭建主要由三位设计同学负责，我主要负责以下几类事情
- PC端与移动端组件白皮书的撰写，沉淀卡片容器、Tab 层级等代表性规则；
- 同步维护 MasterGo 组件库与配套文档，方便设计与产品随时查阅；
- 推动规范宣发，并搭建面向产品经理的原型模版——让规范不只停留在文档里，而是能被日常设计和协作真正用起来。
前置工作
那组件规范的产出流程是什么样子的？又是怎么去思考的？我的习惯并不是先写规范，而是先去收集页面，归纳总结对应的规律，保证交互流畅性，且符合各类业务需求，具有一定的扩展性；
我的习惯抽象一下，其整体简单明了的流程大概如下：
PC端组件白皮书
公用常见的组件规范就不再列出，这里主要讲两个有代表性的组件；
1、信息卡片容器头部排列规则
元素排列规则
卡片头部元素基础排列如下：当对应的元素内容缺失时，按照下方的排列顺序进行自适应填满剩余空间。
文字注释信息”、“内容切换器”、“功能按钮”、“快捷筛选项”每个都作为一个元素，一共四个元素；标题不作为一个独立元素；
那么基于这个规则，我们可以得到一个基础的卡片容器样式，当对应的内容缺失时，会按照下方的排列顺序进行自适应填满剩余空间。
当元素数量为1时
当元素数量为2时
当元素数量为3时
当元素数量为4时
2、卡片容器的包裹规则
基本原则
对于存在明显边界的元素模块，则无需使用卡片进行包裹；
存在嵌套子卡片时，如果整个模块没有明显的边界，或者需要突出不同模块之间的区分度时，则需要使用卡片进行二次包裹；
通栏布局的指标卡组
无论是独占一个卡片，还是存在其余内容，都只需要将指标卡本身使用卡片进行包裹，无需对整体使用卡片进行二次包裹；
示例如下：
非通栏布局的指标卡组
首先需要将指标卡本身使用卡片进行包裹，其次若无需区分不同模块时，则不需要对整体进行二次包裹；
示例如下：
如果需要使用标题去突出不同模块之间的区分度时，则需要对整体进行二次包裹；
示例如下：
如果该模块内除了指标卡外，在下方还有其余内容时，想要去突出不同模块之间的区分度时，则需要对整体进行二次包裹；
示例如下：
通栏布局&非通栏布局同时存在
为了保持一致性，如果某一列已经包裹起来时，则对于通栏的那一列也需要用卡片进行二次包裹；
示例如下：
特殊场景：单个指标卡的二次包裹样式
场景说明：当父指标的标题没办法作为这个指标卡的标题时，此时需要增加一个标题进行整体包裹时
1、单个指标卡内允许放多个父级指标，所以下面这两种情况都属于单个指标卡；
2、单个指标卡中次级指标可点击的样式；
3、如果这种支持整个选中时，则整个卡片都变成选中态；
2、三级Tab层级规范
tab本质上是对下方内容进行切换，而内容量的多少和复杂程度，决定了使用哪种tab，这是我们一个潜在的逻辑；但是这里存在一个模凌两可的点：“内容本身是否复杂是没有一个明确标准的”。所以当使用此规范时，发现在一些场景下使用某个选项卡对下方内容的“控制力”不够时，建议按照实际的业务来，灵活使用；
基础布局
页面提供最多三级的选项卡切换，如果超出这个层级会大量增加用户的学习成本，尽量将相关内容聚合到同一个页面中，避免使用过多选项卡切换。按照不同的容器框架，可以将整体的布局分为页面、卡片、弹窗、抽屉：
以下主要讲下页面级的tab规范
由默认选项卡(大) & 次级选项卡搭配而成。根据页面本身的结构，可将场景分为以下几类：
单卡片布局
一层tab：采用“默认选项卡”，展示在页面区域卡片内的最顶部，支持吸顶；
⚠️特殊说明：如果碰到一层tab在筛选的下面时，此时建议根据以下两种情况将tab提到最上面一层，更加直观；如果tab下筛选栏发生了变化，此时也需要将tab采用页面级的形式进行切换；如果tab下内容形式差异较大，哪怕筛选栏没变，此时也需要将tab采用页面级的形式进行切换，并且按照需求是否需要将筛选项的内容带到另一个tab中；
两层tab：采用“默认选项卡”+“文字选项卡”结合使用，支持吸顶；
一层&两层tab：当页面一级tab下的内容，有的直接是内容，有的还存在tab时，请采用左侧样式；对于无二级tab的页面内容往上进行自适应；
堆叠卡片（纵向&横向）布局
以下示例图只放了纵向排列的卡片布局，其横向的也都遵循该原则；
一层tab：1、无全局筛选时：采用“默认选项卡”，独立成一个单独卡片，不附属到某个内容卡片上；2、存在全局筛选时：可将筛选栏和tab合在一个卡片上；
两层tab：1、无全局筛选时：采用“默认选项卡”+文字选项卡组合使用，独立成一个单独卡片，不附属到某个内容卡片上；2、存在全局筛选时：可将筛选栏和tab合在一个卡片上；
一层&两层tab：当页面一级tab下的内容，有的直接是内容，有的还存在tab时，请采用左侧样式；对于无二级tab的页面内容往上进行自适应；对于存在全局筛选的可与tab合在一个卡片上；
移动端组件白皮书
对于移动端而言，其规范制度方法与pc端一致。一些细节性的组件就不一一列出，这里主要讲下“下拉选择器”组件
基础选择器
1、滚轮选择器
用于可枚举的选项，且数量较少的单选（不建议超过12个），对选项的排列顺序要求较高，需要根据上下文情境做出符合用户心理预期的合理排序，建议使用滚轮选择器，以便用户可以快速判断需要从当前位置上滑还是下滑。比如：时间、尺寸、年级、性别等；点击外面蒙层可收起抽屉；
2、下拉单选
筛选框（当数量较少时可以不需要筛选框）和注释信息可选，击外面蒙层可收起抽屉；对于每行选项而言，可以选择展示标签和描述文本，主要分为以下几类样式：
3、下拉多选
筛选框（当数量较少时可以不需要筛选框）和注释信息可选，击外面蒙层可收起抽屉；对于每行选项而言，可以选择展示标签和描述文本，主要分为以下几类样式：
4、下拉级联单选/多选
当存在多级选择时，目前支持两级和三级，使用此级联组件的好处在于可以直接看到每一层级的内容，但是需要主要每个字段的长度不易太长；
5、标签选择器
当选项数量比较少，且每个选项的字段长度比较固定时，可以采用tags去展示对应的选项；标题和对应的tags为上下布局；
选择与搜索交互说明
1、搜索交互-下拉单选
这里已选标签超出后左右滚动，默认定位到刚刚最新选择的那一项，滑动时或者点击其余空白处都收起键盘
2、搜索交互-下拉多选
这里已选标签超出后左右滚动，默认定位到刚刚最新选择的那一项，滑动时或者点击其余空白处都收起键盘
关于选择器从下方/上方的场景选择
1、从上方弹出的场景
从上方弹出的标签筛选器适用于轻量级的快速过滤；以下条件若有一项不满足时，则不可使用从上方弹出的交互；
1、只允许使用在头部导航处，且该筛选项位于头部白底上才允许使用。
2、考虑到标签选择器本身的特性，只适用于选项内容较少、且能枚举完、每一项名称不长(不宜超过8个字)的场景。选项数量高度不宜超出页面高度的50%；
3、所弹出的筛选只允许存在一个模块。多个模块时如果内容较多时，建议从下方弹出
2、从下方弹出的场景
除了上述的场景，其余场景都从下方弹出对应的抽屉；此外所有的表单填写类都使用从下方弹出的交互。
那搭建的设计体系如何“落到业务”当中？
其实后面发现有效落地的原因在于：随着时间的积累，大家对规范越来越熟悉；而熟悉后就不会按照以往的习惯去做了；
附录：产品经理使用的组件模版
整体规范除了给我们设计师用，也开放给到产品经理去用。因为我们提升产品团队的整体原型绘制水平，同时也避免设计师被一些常规后台页面所困住，所以开发了对应的模版，方便产品经理进行使用；同时当产品想要进行一些修改时，也可以直接在模版上进行修改，方便快捷
1、宣发组件规范
每次更新规范后，我们每个月都会通过钉钉机器人发送订阅卡片，通过一些有趣的配图以及书写对应的介绍文档，向产品介绍新的规范内容；
2、PC端模版&移动端模版
在和产品对接的过程中，持续收集产品使用需求，将一些可复用的页面，完善到通用和业务模版中，例如多样化的指标卡组合和表格的扩展样式等。此外为了方便产品进行调用，将模版封装成原子组件；
3、重新归类方便检索
丰富后对模版重新归类，例如使用率非常高的指标卡组件，我们将其分为常规、公式类、节点类、二级包裹类…在满足更多场景时方便产品进行查阅；
4、模版内的各类辅助与提示
在每个模版旁补充了使用指引，当产品在使用的过程可见则可得，即使忘记如何操作时，也可按照指引调用模版使用；
模版推广结论：目前没有准确的数据去衡量模版的使用率，但和产品对接需求时，大部分产品已形成 “先找模版再修改” 的习惯，提升了原型制作效率与规范性；