良好的交互规范可以很好的帮助企业、团队提高产出,保证用户体验。
一. 规范很重要
规范和秩序存在于生活的方方面面。不知道大家有没观察过,稍微有点规模的咖啡连锁店,一般至少会有3位职员,分别负责收银点单,制作咖啡,打扫。他们各司其职,高效配合,以保证快速满足客户的需求。规范操作让其井井有条且高效运作,从日常工作规范到设计规范,都能起到相同的效用。
二. 规范的效益
规范的效益 = 提高效率 (内容覆盖率 × 适用性 × 使用人数) 保障质量 统一体验
规范可以帮助个人、团队以及整个企业提高效率和产出质量,保障用户体验统一。
三. 优秀的设计规范
优秀的设计规范都包含以下几个特点:
- 灵活 Flexible
- 可拓展 Expansive
- 系统的 Systematic
- 标准的 Standard
四. 规范制作
规范系统看似复杂,但将其大任务分成一个个小任务,会发现其实也不是那么困难。以下会告诉大家如何制作交互规范,主要包含以下内容:
- 制作时机
- 规范流程
- 设计方法
1. 制作时机
产品初期,从0-1阶段。
框架层级
在这个阶段,所有的模块都是新的,所以要定最基础的框架层级,如下所示:
△ 图片来源《网易蜂巢交互文档》
栅格系统和常用分辨率
不论是Web端还是移动端,在早期要确定好常用屏幕的分辨率,屏幕尺寸的兼容性。
基础交互控件
前期产品搭建速度很快,但都是基础功能,所以在交互组件的选择上可以和产品同步。如,刷新、Hover样式、时间显示、输入框、对话框和基础元件库等。如下所示:
产品稳定,成熟阶段
我们交互组件库也同样随着产品一步步的进化。基础交互控件会变成复合型组件和业务型组件,数量也会越来越多。此时需要对各种类型的控件进行分类,比如基础类、导航类、选择类等等。
2. 规范流程
一旦我们决定制作规范,就要把规范当成一个产品去做。去梳理一套高效合理、可复用的制作流程,去分析产出什么样的「规范产品」才能产生最大的价值。
总的来说,可以在以下主流程的基础上,综合考虑规范效益模型的几个影响因素,落实规范制作的设计方案,从而使规范价值最大化。
明确目的
首先要确立用户目标和设计目标,在一条相对完整的产品线上,找出可以和交互设计规范有接触的角色。
不同的角色对于交互规范有不同的使用场景,可以根据规范当前的迭代逐步丰富。理想的状态下可以进行较全面的覆盖。
视觉设计师、产品、运营等:用相同的方法去梳理这些角色的使用场景,主要包含规范源文件、线上和纸质规范。
前端等:线上和纸质规范、规范源代码。
对设计目的心中有数之后,就可以开始规划具体实施了。
规范内容
规范具体包含哪些内容,目录要怎么设计,每项内容要交给哪个设计师去执行需要在项目的开始就确定好。
明确具体组件时,我们可以通过统计相关已有产品的通用模块;问卷或访谈设计师需求等;头脑风暴方法来收集素材作为规范的内容池。每次迭代按价值和复杂度的平衡,从内容池中筛选一部分模块进行规范制作。
设计语言
为了输出的统一性,规范应该有自己的基本原则,并围绕原则进行制作。有点校训、宣言、口号的感觉。以下是举两个案例,可供参考。
规范的规范
我们在做规范,那在设计规范时候更应该有自己的规范。每位设计师都有自己的设计风格,但我们在做同一件事情,需要统一交互文档内的所有内容形式,在文档排版部分,需要统一标题字体、内容字体、段落分部、流程链接;在交互说明部分,需要包含组件场景、交互流程、用户行为、交互样式、界面元素和样式。下图参考:
团队协作
现在的交互原型软件都是有在线协同功能,设置在一个服务器中就可以。协同时需要注意,要保留每一次的修改记录和设计联系方式,修改完毕最好要告知其他设计师,如果是多个控件组件大改,则需要通知到所有人。如下图参考:
持续迭代
在设计任何产品都不可能一次就完美,在设计交互规范时也需要按照优先级排期。基础的、必要的放在第一期,复合型、复杂的向后放,随着产品的逐渐完善,我们的交互规范也会越来越完整。
迭代的时候可以从三个方面入手:
- 每个模块自身的优化。在之前的版本投入使用后可以找用户收集使用反馈,模块是否有用,是否通用,能够提高多少效率,能不能做到直接使用等等,针对反馈意见进行模块优化。
- 丰富模块。将更多内容池中的组件模块规范化。
- 更多应用场景。经过一系列迭代后交互规范可能进入维护阶段,更新频次降低。这时候就需要将其「产品化」,可能是一本白皮书《交互设计规范》,可能是和视觉样式、前端代码封装组合的前端设计指南,将自己的设计规范扩散到更多领域。
推广使用
规范要真正有人用才能体现价值,从规范的效益模型中也能看出,对于团队和企业来讲,使用规范的人数是与规范带来的效益是成直接正比的。使用的人越多,越能够削弱制作规范的边际成本。 推广时(主要是企业内推广,企业外推广就更复杂了)可以包含但不仅限于以下方法:
- 媒体渠道:宣讲会、公司知识论坛、团队公众号、海报展架、EDM、手册。
- 行政渠道:通过各个团队负责人进行推广。
- 个人渠道:规范使用过程中的口碑宣传,尤其对于刚进团队和企业的新人最为有效。
- 资源互换:与其他规范,如视觉设计规范、前端规范等绑定推广,以及相关团队内部的互相推广。
3. 设计方法
前面说了基本的设计流程,本章会介绍组件的设计。 在这里套用一个不算过时的方法论——Atomic Design 原子设计。概念很简单,就是将复杂的组合拆解成最小的单元素,再将这些元素重新组合,变成新的分子。
基础元组件
以按钮为例,在描述按钮状态时候按照默认状态、触发(激活态)、操作反馈、异常状态—禁用和报错、其他样式。
复合组件—通用组件
由元组件构成的复合型组件,通用标准,可以在产品业务内的大部分场景下使用。例如,含有多种内容的模态弹窗。以下图弹窗为例,属于页面层级的最上层,可能包含多个元控件,单行文本,多行文本,单选,复选等等。
复合组件—业务组件(场景组件)
随着产品的功能变得越来越复杂和特殊或需要定制的业务需求,就产生了「业务专属组件」这一类型,即通用组件在业务场景下的变形。如下图例,一个下拉控件的进化史:一开始只是普通的下拉选择控,下拉项增多后直接就添加了搜索功能。业务需要同时支持多选,就又添加了多选功能。
模式
此项英文叫Pattern,暂且将其翻译成「模式」,就是将各种元素进行排版,显示设计内容结构,例如导航系统,登录注册模块等。
五. 对交互规范的反思
上面介绍了交互规范的主要设计流程和设计方法。但做出来只是一个刚刚开始,推广,运营,维护,迭代等等全是事儿。可能设计师花了很大力气做出来,但最终执行使用依然不理想。结合自己参与的产品设计和后期执行,总结有以下几个坑:
- 每个设计师在工作中都有自己的方法习惯,如果坚持了很久,突然被新的方式代替,会很不适应。
- 规范的维护成本较高,需要设计师花很多精力去跟进。
- 规范设计本身有问题,可能是某个控件的说明有异议,导致其他人不认同。
- 团队整体沟通不到位,导致执行不到位。需要内部自上而下的推动。
应对以上问题,可以通过以下方式去解决:
首先交互规范切入的时机要把控好,如果是产品初期,设计师刚产生对本产品的「认知」,使用度会更高。新人设计师在缺少经验的时候也十分愿意使用现有的规范。
其次设计团队认知高度统一,群策群力,首先要保证内部认可,不能单个设计师「自嗨」。每一条新增或修改都要没有异议。最后设计规范要与前端视觉一起封装才能发挥它的终极价值,争取资源做到最好。
最后要强调的是,规范是基础,并不能概括所有场景,随着产品业务的变化,规范需要迭代更新的,所以在设计组件时,需要尽量通用和可拓展。
设计师依然需要从业务场景出发,在基础组件上进行调整和设计,不能盲目「迷信」规范,即要以不变的基础应万变的场景。
六. 总结
1、规范很重要,可以帮助个人、团队以及整个企业提高效率和产出质量,保障用户体验统一。优秀规范具有灵活、可拓展、系统性、标准性等特点。
2、把控规范设计并切入产品的时机和各个阶段需要做的事情。
3、规范设计流程、目标、设计内容、制定规范的规定等注意要点。
4、对规范的反思,不仅仅是设计出炉,能落地更加重要。
七.最后想说
设计规范是工具,提升效率是核心,同时也可以当做标尺,保证设计稿产出的质量和产品统一性。
- 作者 : 网易UEDC