组件化规范是如何设计的（二）

如何制定组件设计规范？

1、需求分析

接到一个组件设计需求时，往往是开发就某种场景提出的一些功能点，当我们拿到这些功能点后，首先我们需要分析这些功能放在一起是否可以组件化，有没有功能点矛盾、有没有已有的组件符合这些功能点；接下来就需要再看有没有业界有没有类似组件作参考、在哪些场景下会使用到这种组件。下面以带标签输入框展开说明。

开发提供的功能点：

1）数据一次性从后台拿来，组件负责模糊匹配；

2）传入数据结构[{ id : 1, label:‘xxxxx’}, …]

3）下拉选一个后，这项就在下拉中去掉了；输入框中删除一个时，有增加到下拉里边；

4）输入框中可以输入任何值，点回车后将输入的内容建一个标签，放到输入框中，这一项的 id 就是 label 值，并做一个 trim，去掉左右空格，如果结果时空字符串，不添加；

5）下拉框和输入框宽度一致，超过宽度时，出三个点；（用原生的 title）所有地方都加 title。

6）输入框中的标签，设置一个最大宽度，最大宽度都设置成输入框宽度。

7）当输入框中没有任何内容时，有 placeholder；

8）当前暂定不要校验；

9）按向左键时，删除一个标签；

10）输入的内容，在已选择的有时，把这个干掉，不添加；

11）每个 label 标签上，有个叉，可以删除当前选择项；

12）输入框是高度自动撑开，标签是做浮动。

确定功能点明确，且没有已有组件后，抽离出与视觉交互相关的点并与开发进行讨论，确认设计师侧想到的细节问题后进行整理：

1）该组件为一输入框拓展组件，有下拉选项；

2）输入框中可以输入任何值，输入值后下拉列表进行筛选，可以在下拉中选中某值，也可以点回车后将输入的内容建一个标签，放到输入框中；

3）下拉选中选项后，这项在下拉列表中去掉；在输入框中点击删除图标时，又增加回到下拉中；

4）下拉框和输入框宽度一致，超过宽度时，出三个点；

5）输入框中的标签需要设置最大值，最大值为输入框的宽度；

6）单击输入框中的标签选中该标签，当点击键盘左右键对应选中临近标签；

7）在输入框中输入值后筛选出来的下拉列表中公共部分需要做标识；

8）下拉列表在选中值后仍不收起，在失去焦点后才收起。

2、友商分析

在梳理出来功能点后，需要查找并分析业界类似组件交互，看页面对于该种组件是如何处理的。梳理业界组件交互时，也需要按照操作动作进行梳理，并对这些动作进行详细备注说明。

对于带标签的输入框友商 AWS 是怎么做的呢？

对于其中一些功能，也可以看看相似组件的处理方式，比如筛选出的下拉选项公共部分标识这个功能点就可以参考百度搜索等搜索引擎的处理方式：

再比如百度贴吧的处理方式，获取焦点时，显示选择下拉：

分析过友商的交互后，需要判断友商的哪些交互合理，哪些交互不合理，哪些地方处理方式可以采纳，哪些地方可以可以优化；并及时与开发沟通这些细节问题，看在实现上能否调整，达到最好的交互效果。比如友商 AWS 的标签组件在点击删除图标后应该立即触发删除该标签，而不是点击删除图标之后收起下展，再次点击删除图标触发删除，再次获取焦点展开下拉，这块就可以考虑做个优化。

3、组件设计

设计阶段看似简单，但落实起来就需要做到细致、到位，任何地方都要细节化，包括元素间距、组件大小、颜色、文字层级、交互效果，一般的话到组件设计阶段，规范基本已经将这个特性规定下来，那这个时候就需要结合基本的特性，输出该组件的整体规范。整理的时候首先给出该组件的基本特性，再给出整个点击动作过程的效果图。

视觉标注：

交互说明：

视觉交互梳理完成后，需要与内部设计师交流讨论，看梳理的组件交互是否合理、有没有符合规范配色等等，结合大家建议重复修改，直到没有问题为止，整个组件规范才能确定。

4、组件实现

作为设计师，前期一定要在设计过程中与开发及时沟通，再好的设计从开发角度评估后实现不了也是徒劳的，但是业界可以实现的效果到我们这里反馈回来没法实现也是需要坚持的！在最终定稿后，也要实时关注开发最终实现效果，确保我们的设计得以完美实现！

一套完整的流程是需要在运行的过程中不断摸索，总结出来的，也不是我这简单的几段文字就可以将其整个周期阐述清楚，因此，也仅仅是在这里跟大家分享我做组件化规范的过程中总结的一些方法与思考，供大家参考！

本文转载自 DataFunTalk 公众平台。

原文链接：https://mp.weixin.qq.com/s/SSGxpfXaUfl1LMk2QPJAGQ