大厂交互规范制定指南（教科书级别）
2022-03-01 15:00:15 60 举报AI智能生成
登录查看完整内容
《大厂交互规范制定指南》是一本教科书级别的书籍，旨在帮助读者了解大厂交互规范的制定过程和方法。本书详细介绍了大厂交互规范的基本原则、设计理念、设计流程和实施方法，以及如何根据不同产品和用户需求进行定制化设计。此外，本书还提供了大量实用的案例分析和实践经验，帮助读者快速掌握大厂交互规范的精髓。总之，《大厂交互规范制定指南》是一本实用性强、内容丰富、易于理解的书籍，值得广大设计师和开发人员阅读。
作者其他创作
大纲/内容
一个成熟的设计规范对 产品设计、研发开发、用户使用 都有着重要的指导作用
保障产品内不同模块的设计一致性
提高不同设计师间的设计、协作效率
产品设计
通过定义的标准规范，提高流程、组件的复用率
提高整体开发效率
研发开发
让用户能够在产品全局感受到统一且完整的体验
降低使用成本和学习难度
用户使用
一个完整的设计规范一般分成「视觉」「交互」两个部分合并组成，在全局原则的指导下，侧重不同的维度和内容分别展开规范的定义，最后再合到一起形成一份完整的设计规范
从用户体验要素来看，视觉主要是在「表现层」「框架层」进行规范的统一，主要包括：形、色、字、构、质、动 六个层面
圆角形体
图标规范
...
形（图形元素）
主题色
功能色
中性色
色（色彩体系）
字体
字节
行高
字重
字（字体体系）
层级样式
栅格系统
构（界面布局）
投影效果
模糊效果
质（质感风格）
画面动效
跳转动效
动（动画动效）
视觉
交互角度相对抽象，主要针对于产品的「结构层」「框架层」入手，定义统一的交互规范，指导页面、流程搭建和组件使用规则。包括：全局原则、页面布局、通用流程、标准组件、文案规范
统筹和规范全站的交互原则
全局原则
关键页面布局，抽象遵循规律
页面布局
整理可复用流程，不同场景即插即用
通用流程
定义可复用组件，后续直接饮用
标准组件
统一语气语调，明确书写规则
文案规范
交互
1、如何「理解」交互规范
产品有不同发展阶段，设计规范同样也有，不同阶段下的产品目标和规范需要覆盖的内容都不尽相同。我们要既要避免做多，保证投入产出比最大化；同时也要构建一个合理的规范迭代思路
该阶段的产品核心目标是「验证产品或商业模型」，业务需求都是小步快跑、频繁迭代。产品处于从0到1的野蛮生长状态，存在着“先满足功能，再优化体验”的情况，导致该阶段的产品体验往往不太过关
通过定义原则，梳理关键页面和流程，搭建基本的规范框架
让团队对产品有统一的设计价值观和认知判断
从页面到流程，能对应设计参照标准
业务可以在规定的框架下发展，不仅让产品体验的根基牢固，而且不会限制功能设计自由
搭建目的
「全局原则」
「页面布局」
「通用流程」
搭建范围
产品探索初期
该阶段的产品基本形态已稳定，也形成了初步的模型结构。后续迭代是在现有结构的基础上，进行增加或优化功能。虽然探索期定义了产品原则、布局和流程，但探索期产品的自由生长，会导致不少设计细节不一致，从而影响了产品整体的体验和效率
通过回溯整理过往设计，沉淀优化成完整的交互规范
根据规范统一产品体验，进一步优化流程和效率
让整个产品体验达到相对稳定的状态
「标准组件」
「文案规范」
产品稳定发展期
2、不同阶段应该定义哪些交互规范
设计规范既要贴合业务场景归纳完整，同时又要避免凭空定义脱离实际
定义时要代入业务规划，尽量富有前瞻性，这样定义的规范不仅能覆盖当前需要，同时后续也能更好地迭代
原则一：保持规范的业务性
有的放矢，明确内容优先级，避免盲目追求大而全和形式主义
对于优先级高（覆盖面广、复用率高）的关键内容重点描述；优先级低（逻辑简单、认知一致）的内容可简要描述，避免事无巨细降低效率
原则二：保持规范的专注性
设计规范不是一成不变，而是跟随业务发展不断迭代完善的，所以需要阶段性的回顾规范
遇到规范未能覆盖或无法指导设计的地方，及时修订同步团队，避免墨守成规，固步自封
原则三：保持规范的生长性
定义交互规范的原则
一个完整的交互规范分为：「全局原则」「页面布局」「通用流程」「标准组件」「文案规范」五个维度，但每个维度具体含有哪些内容，都是不一样的
「全局原则」「页面框架」和「通用流程」具有强业务导向，可以采用此方式
以「页面布局」为例，就需要将关键页面按统一颗粒度收集（按层级或按场景等）
方式一：整理业务场景下不同的页面、流程等，并进行抽象合并
「标准组件」「文案规范」已经在行业内有了不少科学的目录和沉淀，可以采用此方式，例如此图组件的梳理
方式二：参考行业通用规范的定义，先罗列完整，再根据产品实际业务需要进行增删改
最后可产出如右侧的规范分类和具体内容（可以不要求一下子列得很全，后续补充具体部分内容时持续维护即可）
第一步：定义规范分类
推荐按规范分类进行分工，一个大的分类由一人负责，保证专注性
同时团队交互最好都能参与，保证后续对规范更好的沿用
分工原则
「定义规范」和「输出需求」两者经常要并行处理，此时提高效率，控制投入产出比就很重要了，我们需要明确优先级，先做什么后做什么
在定义完「全局原则」后，剩下的页面、流程、组件、文案都可考虑并行定义，彼此之间没有明确的依赖项
并行思路
近期有迭代的版本，如：即将改版的模块、反馈较多体验较差的模块，其中涉及到的页面框架、组件可优先定义
迭代思路
某些典型页面、典型流程、典型组件涉及面广，许多需求的设计都将借鉴参考，亦可优先抽象定义
复用思路
排期原则
第二步：确定分工排期
设计规范是由不同的设计师一起合作完成，所以我们尽量在一开始，就需要统一规范的撰写和展现形式
高效检索，快速让使用者找到需要的内容
目录完整
抽象的内容往往含有许多概念和原则，需要让使用者先理解再参考，才能保证后续使用正确、举一反三
原则清晰
没有人喜欢看字，图片更容易吸收
多图少字
让使用者更好的代入场景，理解和使用规范
搭配案例
第三步：统一撰写原则
目标：明确影响整站各个模块、各个页面设计的原则和规范，指导我们后续各种规范的定义和设计
设计原则：每个完整的设计规范都需要包含的内容，如：设计价值观、设计准则。看似相对务虚的东西，实则影响后续整个设计方向（这个部分需要和产品经理、视觉同学结合产品的定位和发展共同提炼）
业务原则：源自实际业务本身产生的问题，行业内没有标准定义（需要具体问题具体分析，推导出具体目标，最后再统一制定规范解决业务问题）
目标：梳理整站所有关键页面，整理抽象成相对固定的 框架布局&功能分区 让后续设计新页面时能遵循规律、找到参考
根据早期定义的规范分类，收集展示所有相同层级的页面。这些在定义规范分类时，应该已收集完成
第一步，收集页面
提取共性，搭建框架和布局，明确页面大的区域划分和结构
第二步，框架布局
基于框架布局，细化区域内具体的业务功能属性，如：导航区、操作区等。这部分是页面框架内最接地气最具指导性的内容，同时也是最难定义的
定义太细，担心缺乏前瞻性限制后续设计：定义越细灵活度就低，后续改动和限制性就越高
定义太粗，无法定义出明确的功能分区，担心缺乏实际指导意义：同一区域有些页面展示操作，有些展示导航
第三步，功能分区
将刚刚定义的布局框架与功能分区，与实际案例完整结合，便于后续理解和沿用
第四步，加入案例
页面框架
目标：梳理整站所有流程，对那些可复用的流程进行整理、抽象、封装。让后续设计师和研发能够直接沿用
“可复用的流程”是指：在多个场景下，不改变其原有业务逻辑的情况下能够“既插既用”。例如：登录注册流程、扫码关注流程、分享流程等等
对于设计师要做的，就是识别具体的通用流程有哪些，并将其给「步骤化」串联起来
当有新的需求来的时候，判断能直接复用，还是需要重新组装，亦或是新增步骤
通用规则
目标：将产品内使用过的组件整理成“标准组件”，统一定义规则，让后续设计和研发时能直接调取组件，提高设计和研发效率
第一步，业务设计确定基本逻辑
第二步，挑选行业通用组件，增加业务规则
第三步，视觉根据全局视觉原则，设计新的样式
第四步，将交互规则、视觉样式合并，统一成标准组件
方式一：调用行业通用组件
第一步，进行正常的业务设计
第二步，判断组件是否通用，是否可复用到其它场景
因为组件是变动最多的规范，需要明确具体的版本和改动点
更新日志
简要介绍用途和使用规则
组件定义
介绍组件构成、功能分区、分区定义，详细展示不同分区内具体信息和对应规则
组件结构
详细区分多种场景下不同的使用方式，明确给予使用指导
使用场景
备选，如果比较复杂的组件且涉及到流程中的关键环节，建议可以考虑复制一个完整的设计方案嵌入其中，便于团队成员理解沿用
设计方案
复杂的组件为保证后续的正确复用，建议包括以下内容
第三步，定义标准组件规范
第四步，跟研发沟通，封装成标准组件
方式二：业务定制组件
目标：将产品内各个场景内文案进行整理，帮助业务更准确表达意图，让设计师更好沿用，同时让用户感受到一致的产品风格
语言是指我们通过什么样的规则来组合文字，让它形成一种惯用的表达方式
单纯说规则可能太虚了，在实际定义规范时，还要如图所示，加上实际案例示意避免误解
语言
语气是可以体现产品气质和风格，定义时要结合全局原则内的设计价值观，明确产品性格后才能更好的定义出符合产品的语气风格
同一种语境下不同风格的文案就有明显差异
语气
主要包括常用词汇的书写方式，例如「日期简写方式」「英文大小写方式」「使用全角标点符号」等
易错的词汇短语示意，例如「账号还是帐号」、「登陆还是登录」等
书写规则
如果有充足时间的团队，可以考虑再结合实际业务，分别定义不同场景和组件下具体的使用指南
具体使用指南
第四步：定义具体规范
落地执行步骤
3、如何「定义」交互规范
规范的定义不是一个人的事情，而是一个团队事情，它将关系到每个后续每个人的设计产出
在制定规范期间，应该定期在团队中进行设计评审
让团队达成一致、大家更深入了解如何使用规范的过程
注意，参与评审的人不止是设计师，当然也包括具体的业务开发，很多时候我们会得到新的思路和启发
团队评审，达成一致
规范搭建的过程中，有很多痛点
组件库需要多人参与维护和创建，容易造成冲突内容丢失
同时沉淀规范文档时，需要图片逐一复制、粘贴到文档内，更新时又要重复一遍这样的操作
善用工具，沉淀规范
对这些设计进行标记
在规范定义完成之后，迭代排期优化线上的设计
搭建规范的过程其实也是整体设计走查的过程，我们会发现有些设计可能有体验问题，或不符合规范
展开新一轮的提炼和总结
反哺规范，形成正向循环促使设计和规范不断完善
在实际设计使用过程中，可能又会发现规范无法满足的地方
运用规范，指导设计
4、如何「推进」交互规范
好的设计规范是提高设计效率，引导设计方向，而不是因为设计规范而局限了具体业务的设计，如果这样，还不如不去定义
5、总结
全局设计原则
全局Z轴高度
全局右键菜单
全局手势交互
一级模块首页
一级团队设置页
二级模块详情页
二级模块管理页
登录流程
分享流程
邀请成员流程
关注公众号流程
通用
导航
输入
数据展示
即时操作
消息提醒
英文与标点符号
使用指南
外框
全局交互规范
大厂交互规范制定指南
0 条评论
回复 删除
下一页
