关键词：组件、规范化、统一

去年曾参与过门户网站以及电商类App的组件化规范制作过程，想来在这方面也积累了一些经验， 想在这里和大家分享一下。

主要内容分三方面展开：

第一部分，网页组件化规范的具体步骤以及注意点；

第二部分，App组件化规范与网页的区同点；

第三部分，在组件化规范的基础上制作UI规范的注意点。

PART1  网页的组件化规范

／1／浏览所有组件

如何为成熟的产品制定组件化规范？ 浏览网站的所有主要页面，比如门户网站的频道页以及一级、二级页面。此步骤要求对门户网站的所有组件类型有一个全面的了解，比如图文组件、feed流、登录注册等等。

注意点：切记钻到细节，只需要知道所有的组件类型即可。

／2／搜集 & 分类

如何为成熟的产品制定组件化规范？

将网站中常见的组件形式通过截图的方式截取下来，并根据组件的类型进行分类归档。

注意点：

（1）组件的分类需要结合网站的类型，有侧重地划分、取舍和排优先级。比如，门户类常见feed流，而电商类则多见图文组件。

（2）建议采用截图的方式而不是用Axure制作，这样可以避免前期不必要的时间消耗。

／3／整合

如何为成熟的产品制定组件化规范？

在每一类组件下，继续进行细分、删减和整合。比如，图文组件有很多种类型，上图下文、左图右文，更细节的有标题＋图片＋简介＋评论等控件。

注意点：删减哪些组件类型以及对哪几种类型进行整合，需要根据自身产品的需求进行取舍。

在分类方法上，刚接触组件化规范的人可能会有些困惑。因为根据图文数量的不同以及排列顺序和方位的不同，会变幻出多种组合方式，这是很大的工作量。

这里，实际上出现了一个思维误区。这种通过排列组合进行思考的方式，被称为「向下」的思维方式，俗称「钻细节」。相反，我们更应该采用自下而上的思考方式。具体来说，就是分析网站上搜集到的组件类型以及使用场景，留下常见的组合方式，将个别的组合方式做特殊情况处理。这一步就是利用自身产品的「需求」推动设计决策。

这部分完成后，每类组件下，我們便得到了主要的几种细分类型。

／4／参考竞品，优化组件

如何为成熟的产品制定组件化规范？

进行到上一步，我们只是对网站原有的组件进行了规整。但由于设计团队的更替、网站版本的迭代，现有的组件常常存在大大小小的问题，很可能这种组件已经落后于产品和用户的需求了。比如，登录注册中的密码输入功能，从最初的单行输入，到两行确认，到明暗文切换，再到明文显示，这就是一个需求演变的过程。

因此，参考竞品就变得很重要了。这一步我们需要利用竞品分析，找到符合当下用户体验趋势同时满足自身产品定位和用户需求的组件样式与操作方式，进一步优化组件。

注意点：

（1）竞品分析的竞品不应只是同类产品，我们此时分析的是组件，因此可以将参考依据细化至使用场景。比如针对登录注册组件，无论是门户网站或者电商网站都有一定的参考价值。

（2）在分析竞品时切记照搬照出，无论是产品的定位、页面的布局、当前的使用场景都是分析的依据。（如何筛选竞品，如何利用竞品分析帮助自身产品的更新迭代，在此不做赘述，在以后的文章中会做补充。请关注相关文章信息。）

进行到这一步，我们心里已经形成对组件布局以及交互方式的大致构想了，可以将此在纸上粗略画出，接着进行到下一步。

／5／写文档

如何为成熟的产品制定组件化规范？

制作文档初期，需要针对文档的信息架构以及内容排布，预先制定规则，并在文档前面注明文档的使用方式。

注意点：

（1）确定文档的信息架构时，需要注意组件分级的粒度，比如导航栏有一级、二级导航，图文组件有左图右文、上图下文等，这些分类的粒度不能过粗也不能过细。过粗会导致页面内容的繁杂，过细则导致信息架构的复杂。此外还需特别注意复合型组件与单元型组件的分组分级方式，如单元型的左图右文、上图下文的组件类型以及复合型的标题＋图片＋简介＋功能模块的组件类型。

（2）针对不同组件，其页面布局都需要遵循统一的规则。 比如，在头部概述组件的定义以及细分的规则，接着根据示例＋标注＋说明的原则进行内容的详细说明。

／6／验证 & 拓展

如何为成熟的产品制定组件化规范？

此步骤即为文档的更新迭代过程。验证是将规范化组件带入几个主要页面检验其适用性以及页面的整体效果。拓展是在后续页面设计过程中，将新的组件补充进文档中。

注意点：

（1）将规范化组件带入产品进行检验时，可将组件进行适当细化和修改以适应页面需求，但大体规则应符合组件化规范。

（2）补充新的组件时，应注意这个组件在规范中是否已经存在。此外，补充的位置以及分级排序方式都要满足文档的分类分级规则。

PART2  App组件化规范

如何为成熟的产品制定组件化规范？

App的组件规范化流程与网页差不多。特别注意如下几点差异：

（1）App相对网页来说更强调整体设计的统一性，比如图文组件的变式应尽量不超过3种；

（2）App需要考虑跨平台、跨设备的体验；

（3）App包含多种手势操作，在此基础上组件的交互形式也多种多样。但切忌为了交互而交互，应以需求为前提，避免沉浸在华而不实的交互方式中。

PART3  App的UI规范

如何为成熟的产品制定组件化规范？

在组件化规范的基础上制定UI规范。同样需要进行搜集>分类>整合>优化>制作文档的过程。最终的UI规范文档一般都包含组件示例、色值、字号、间距以及icon尺寸、按钮尺寸这几个部分。

注意点：

（1）无论是色值、间距或者字号，对于一个App都需要设定几个梯度的常用值并适当描述其使用场景。比如，较深的色值用于大标题，浅一些的用于图文模块等等。

（2）通常需要代入几个页面进行验证，页面的选择最好是一个页面中能包含多种色值或间距或字号等。

总结

以上便是针对网页和App的组件化规范的制作过程说明。我再将上述内容简要概括一下：

／1／组件化规范包含5个步骤：浏览所有组件>搜集&分类>整合>优化>制作文档（>检验）

／2／UI规范主要包含：组件示例、色值、字号、间距以及icon尺寸、按钮尺寸

组件化规范需要注意几点：

／1／分类与分级的标准，考虑组件的适用性与可拓展性；

／2／时刻以符合产品定位于用户需求为前提，优化组件；

／3／时刻以使用者需求为前提，制作文档。

（特别注明：UI规范是从交互设计师的角度进行阐述的，相比较而言，会更加注重体验的效果，希望也能给UI设计师一点启发。）