前言

我们力求每一位业务设计者在拿到[组件库]和[文档]两样东西时就可以独立完成设计支持工作!

假如[组件]无法满足业务,那就是[组件]本身的问题;
假如拿着[组件库]却不会用,那就是[文档]的问题!

组件文档撰写规范 - 图1

怎么样的文档是合格的?

[及格线]一位新设计师拿着[组件库],阅读了你的文档能顺利的独立完成设计
[优秀线]设计者通过阅读文档,能清晰地了解多个相似功能组件的最佳实践,从而灵活地使用组件或组合,完成设计需求
[卓越线]在满足业务的同时,更是一篇优秀的行业的范式


以下是我们的文档结构:

组件文档撰写规范 - 图2


举一个熟的栗子:

组件文档撰写规范 - 图3


以下是一些特殊情况需要补充的内容

最佳实践指引(可选)

在一些允许自定义程度比较高的组件中,使用中容易产生错误,那么我们建议对这个组件补充“最佳实践指引“,通过图例或反面教材的示范来引导用户进行更优质的设计产出

例:[辅助色]中对用色数量的指引:

组件文档撰写规范 - 图4

扩展指引(可选)

除了现成的组件,还有一类组件是支持第三方扩展的,为了维护我们品牌的统一性,会针对一些支持自定义的扩展性设计需要有足够的说明,譬如:图标绘制规范/自定义配图规范/辅助色选择方案。

例:[图标]文档中对设计者需要创造新的图标时给出的指引:

组件文档撰写规范 - 图5

链接(可选)

在描述一些组件时会和其它组件信息产生关联,也可能指向我们预置好的延伸操作,此时最合适的方案是增加链接
例:[图标]文档中指引前往图标库的链接:

组件文档撰写规范 - 图6

感谢你耐心地阅读到这里,让我们一起共建西溪园区最好的组件文档~