移动端交互设计规范

项目背景

为了改善产品的使用体验,提高设计团队的整体产出质量,我们在今年年初启动了交互规范项目。
交互规范是对产品中通用的、可复用的核心流程、交互方式、视觉样式、组件模块制定标准,统一设计。制定交互规范的主要目的和价值效益有:

  1. 提高效率:从产品原型、交互设计、视觉设计、前端开发每个环节减少重复的工作,提高效率。
  2. 保证质量:首先,对于可复用的核心流程、交互方式、视觉样式、组件模块,提高最低产出水平的标准,保证团队整体的输出质量;其次,设计师应该花更多的时间和精力在理解产品逻辑、了解用户需求、设计流程体验上,而不是做反复的“体力活”。
  3. 统一体验:用组件化的思维构成产品的整体体验,规避不一致的产品体验,减少用户的学习成本。



    对于设计师来说,交互设计规范的价值效益毋庸置疑,但是对于一个人员资源吃紧、业务需求量大的团队来说,要付出时间人力成本来推行设计规范这个项目并不容易,在这时候,如何说服团队里的各个角色来认同这件事就至关重要。作为项目推行者,需要思考清楚为什么这个项目值得投入人力和时间,可以为团队和产品带来哪些效益,如何衡量目标是否达到,等等。

担任角色和负责工作

根据现有的产品线,我们需要建立的交互规范分为Web端和App端,就规范的内容而言,我主要负责App端的规范。但就交互规范整个项目而言,不仅仅只有内容,还包括规范的实施方案、实施步骤、产出形式、如何在团队内推广使用、如何保证规范被正确使用、如何保证规范持续迭代,这些工作我也参与了共同推进。


产出规范内容

规范具体内容的产出有以下几个步骤:

  1. 交互走查:排查线上产品现有的交互方式,找出不合理、不一致的地方,以此梳理交互规范需要包含的内容,尽量涵盖所有的使用场景。
  2. 确定交互规范包含的模块:组件样式、适用于不同场景的交互方式、实际项目的产品设计中需要说明的内容、正确和错误的示例。
  3. 确定产出形式:交互规范手册(pdf)、Sketch Libraries、前端组件库。




规范在团队内的推行

规范内容产出后,接下来要解决的问题是如何在团队内推行规范,并保证规范的落实。以下是我们确定的落实方案:



项目总结

沉淀过往经验

在梳理规范具体内容和交互自查表的过程中,更多的是对过往项目经历的总结沉淀,把自己之前踩过的坑找出来,一方面避免自己再次掉坑,另一方也帮助团队其他成员绕过容易掉的坑,从而不断提高整体水平。比如在一开始设计表单的时候会忽略规定表单校验规则,出现问题以后,在以后的设计中就会多注意这个内容的说明,所以在交互规范和交互自查表里也有相应的呈现。

在项目设计的过程中扩大自己的学习半径

在产出规范具体内容的过程中我查阅了大量业界已有的规范案例,虽然这次做的规范还没有到Design System的程度,但借着这次机会我也涉猎了与此相关的内容,这不仅仅对目前的项目有参考意义,对于以后的其他项目也有很大帮助,比如我之后做的一个数据可视化的项目,就发现很多设计体系都对这部分有详细的说明,从图表的设计原则、图表类型的选择到图表配色参考,这些都可以拓宽设计师的视野,对实际项目的设计也很有帮助。

比规范内容更重要的是规范的落实

如果规范不能落实,那么规范内容再完善都是白费功夫,主要有这几个关键点:

  1. 规范推行前期,团队成员的意识还未形成,需要强制性的流程机制保证执行,比如工作流程中的审核环节;
  2. 根据不同角色输出交互规范的价值和效益,站在他们的角度思考交互规范对于他们来说有什么可以获益的地方,然后根据这些点来获得他们的认同;
  3. 迭代思维,明确规范的迭代节奏,有确定的迭代计划之后才能有意识地回顾规范的执行效果。