原则|全局交互规范制定指南( 四 )

（4）标准组件
目标：将产品内使用过的组件整理成“标准组件”，统一定义规则，让后续设计和研发时能直接调取组件，提高设计和研发效率。
其实行业中已经有很多通用组件，可以快速调用。但由于不同业务的复杂度不一样，也会生成自己独特的业务定制组件。同时，产品持续在迭代，也很难能抽出时间单独定义组件。故基于这个背景，结合“需求设计流程”和“组件整理流程”，有两种高效定义标准组件的方式。
方式一：调用行业通用组件
第一步，业务设计确定基本逻辑。
第二步，挑选行业通用组件，增加业务规则。（一般开发在搭建产品初期时，便会选择一家行业组件进行使用，而组件也仅能在这家提供的组件中挑选）
第三步，视觉根据全局视觉原则，设计新的样式。
第四步，将交互规则、视觉样式合并，统一成标准组件。基础规则直接引用行业组件已定义的内容，场景规则按需补充。

文章插图
方式二：业务定制组件
第一步，进行正常的业务设计。交互根据需求搭建原型，视觉设计具体样式。
第二步，判断组件是否通用，是否可复用到其它场景。例如：分享对话框，不同的内容分享都能够用得到，像这种就是可抽象成标准组件的典型案例。
第三步，定义标准组件规范。简单的组件展示具体样式即可，团队内设计师基本认知一致，无需重新学习。而复杂的组件为保证后续的正确复用，建议包括以下内容：
更新日志：因为组件是变动最多的规范，需要明确具体的版本和改动点。
组件定义：简要介绍用途和使用规则，如对话框定义：必须是用户主动触发时才出现、主要使用在二次确认场景需用户确认后才消失等。
组件结构：介绍组件构成、功能分区、分区定义，详细展示不同分区内具体信息和对应规则。

文章插图
使用场景：详细区分多种场景下不同的使用方式，明确给予使用指导。

文章插图
设计方案：备选，如果比较复杂的组件且涉及到流程中的关键环节，建议可以考虑复制一个完整的设计方案嵌入其中，便于团队成员理解沿用。
第四步，跟研发沟通，封装成标准组件。这一步是非常关键也是重要的一步，这将大大提高我们后续的组件复用率，降低重复性走查的耗时。推荐使用CoDesign-设计规范功能点击体验CoDesign小程序，上传「组件库」后能够按目录自动生成规范文档，同时将自动标注和切图，大大提高研发开发标准组件的效率。

文章插图
（5）文案规范
目标：将产品内各个场景内文案进行整理，帮助业务更准确表达意图，让设计师更好沿用，同时让用户感受到一致的产品风格。
文案就像“产品对用户说的话”，不同的人说话方式可能并不一样，没有绝对的对错。但清晰明了的语言表述，让用户更容易理解；符合产品气质的语气，能拉近产品与用户的距离；统一的文案描述，又能让用户在整站一致的语境下体验产品。
需要定义的内容，包括但不限于以下3个部分：
语言：语言是指我们通过什么样的规则来组合文字，让它形成一种惯用的表达方式。例如语句简洁明了，不过度修饰，避免重复描述，使用简洁清晰的语序，帮助用户快速理解；例如用词精准易懂，使用简单、易于用户理解的词汇，避免使用专业术语，或过于口语化的表述。单纯说规则可能太虚了，在实际定义规范时，还要如下图所示，加上实际案例示意避免误解。

文章插图
语气：语气是可以体现产品气质和风格，定义时要结合全局原则内的设计价值观，明确产品性格后才能更好的定义出符合产品的语气风格。同一种语境下不同风格的文案就有明显差异。如网络异常时：

俏皮的文案可能是：网络开小差，请稍等一下。
而正经的文案可能是：网络异常，稍后重试。

文章插图
书写规则：主要包括常用词汇的书写方式，例如「日期简写方式」「英文大小写方式」「使用全角标点符号」等。以及易错的词汇短语示意，例如「账号还是帐号」、「登陆还是登录」等。这是团队设计师最容易沿用遵循的，也是接地气的部分。