好的交互规范可以帮助企业和团队提高产出,保证用户体验。
规范和秩序存在于生活的方方面面。不知道大家有没有观察到,稍微有点规模的咖啡连锁店,一般至少有三个员工,负责兑现订单,冲咖啡,打扫卫生。他们各司其职,高效合作,确保快速满足客户需求。规范的操作使其有序高效,从日常工作标准到设计标准都能起到同样的效果。
规范的效益 = 提高效率(内容覆盖率适用性用户数)+ 保障质量 + 统一体验
标准化可以帮助个人、团队和整个企业提高效率和输出质量,保证统一的用户体验。
举一个《网易移动端交互规范》的登录流程的例子。一个资深设计师设计一个详细完整的登录流程需要16个小时;没有针对性的指导或相关规范,新设计师很难考虑到综合登录过程中涉及的各种账号的防刷机制、自动补全、异常验证等细节问题。然而,使用交互规范后,只需要4个小时就可以设计一个新人来制作一套高质量的登录流程:提高效率和约75%,同时保证输出质量。
当然,以上只是针对设计者个人角度的效率提升;就整个企业而言,对于规范中涉及的所有组件模块,设计师和上下游同学的每一次使用,都可以解放重复性工作,产生价值。
有很多优秀的例子:谷歌、苹果、微软等引领全球设计潮流的公司,他们的设计规范已经升级为设计语言,来指导他们所有产品的设计。国内优秀案例,如蚂蚁设计、元素等。像这样的产品,做到了端到端的体验一致性,把交互、前端、视觉问题一起解决了,是值得学习的模式。这些优秀的设计规范都包含以下特征:
灵活可扩展系统的系统标准的扩展标准。
规范体系看起来很复杂,但是如果你把它的大任务分成小任务,你会发现其实并没有那么难。下面将告诉你如何制定交互规范,主要包括以下内容
生产时序规范的过程设计方法
框架层级
在此阶段,所有模块都是新的,因此应该设置最基本的框架级别,如下所示:
图片来源《网易蜂巢交互文档》
这是我们对网页的分层梳理,包括底层、内容层、导航层、全屏操作层、插件层、模态弹出层。设置好基本框架后,所有的控制组件都将构建在这个框架中,就像房子的框架一样。这样做的好处是,不仅方便设计人员清晰地了解系统,而且在与前端开发人员交流时也非常高效。比如做模态弹窗的时候,如果没有和开发者很好的沟通,开发同学把弹窗写在全屏操作的位置,那么就可能出现问题。
栅格系统和常用分辨率
无论是Web还是移动,前期都需要确定常见屏幕的分辨率和屏幕尺寸的兼容性。
基础交互控件
产品前期搭建很快,但都是基础功能,所以交互组件的选择可以和产品同步。如刷新、悬停样式、时间显示、输入框、对话框和基本目录等。如下所示:
当产品逐渐稳定发展到2.0版本,我们的交互组件库也随着产品一步步进化。基本的交互控件会变成复合组件和业务组件,而且数量还会增加。这时候就需要对各种类型的控件进行分类,比如基础类、导航类、选择类等等。为了方便所有人查看交互文档,我们需要输出《xx产品交互规范文档》这样的指导文档。
一旦我们决定做规范,就要把规范当成一个产品。整理出一套高效、合理、可重复使用的生产流程;要分析什么样的“标准产品”才能产生最大的价值。
一般来说,在以下主要流程的基础上,可以综合考虑规范效益模型的几个影响因素,实施规范生产的设计方案,使规范价值最大化。
首先
要确立用户目标和设计目标,在一条相对完整的产品线上,找出可以和交互设计规范有接触的角色。如下图所示,列出来的角色都有可能是我们的目标用户。比如当交互人力不足时,运营同学可以通过交互规范中的组件简单的搭建出页面,或者前端同学在写页面时遇到某个通用组件不清晰,直接去查看交互规范就能解决问题。交互规范就是为这些“利益相关者”准备的“设计说明书”。
不同的角色对于交互规范有不同的使用场景,可以根据规范当前的迭代逐步丰富。理想的状态下可以进行较全面的覆盖。
交互设计师:打开【交互模板】新建一份设计稿,设计过程中使用【组件库】搭建一些自定义的设计方案;制作过程中发现规范中已有的模板,对照【线上规范】或【纸质规范手册】查阅;对于规范中已有的相似模块,从【交互稿源文件】中复制一份到自己的设计稿进行修改;对于完全相同的模块,直接标明线上模块。 因此,要覆盖交互设计师的使用场景,可以产出交互模板、组件库、可使用的源文件、线上和纸质手册等产品,考虑到不同团队使用的工具不一样,可以做Axure、和Sketch两套格式的规范。
视觉设计师、产品、运营等:用相同的方法去梳理这些角色的使用场景,主要包含:规范源文件、线上和纸质范;
前端等:线上和纸质规范、规范源代码;
对设计目的心中有数之后,就可以开始规划具体实施了。
内确定规范内容主要分为两个步骤,首先根据产品阶段初步判断需要主要产出哪一类型的规范,基础型、复合型还是业务型;然后在初步规划的基础上明确具体制作哪些组件和模块的规范。
明确具体组件时,我们可以通过1.统计相关已有产品的通用模块;2.问卷或访谈设计师需求等;3.头脑风暴方法来收集素材作为规范的内容池。每次迭代按价值和复杂度的平衡,从内容池中筛选一部分模块进行规范制作。
– 《网易移动交互规范》
Aesthetic Integrity 整体美学、Consistency 一致性、Direct Manipulation 直接操作、Feedback反馈、Metaphors 隐喻 、User Control 用户控制
– 《iOS Design Principles》
现在的交互原型软件都是有在线协同功能,设置在一个服务器中就可以。协同时需要注意,要保留每一次的修改记录和设计联系方式,修改完毕最好要告知其他设计师,如果是多个控件组件大改,则需要通知到所有人。如下图参考:
迭代的时候可以从三个方面入手:
每个模块自身的优化。在之前的版本投入使用后可以找用户收集使用反馈,模块是否有用,是否通用,能够提高多少效率,能不能做到直接使用……针对反馈意见进行模块优化。丰富模块。将更多内容池中的组件模块规范化。更多应用场景。经过一系列迭代后交互规范可能进入维护阶段,更新频次降低。这时候就需要将其“产品化”,可能是一本白皮书《交互设计规范》,可能是和视觉样式、前端代码封装组合的前端设计指南,将自己的设计规范扩散到更多领域。
媒体渠道:宣讲会、公司知识论坛、团队公众号、海报展架、EDM、手册;行政渠道:通过各个团队负责人进行推广;个人渠道:规范使用过程中的口碑宣传,尤其对于刚进如团队和企业的新人最为有效;资源互换:与其他规范,如视觉设计规范、前端规范等绑定推广,以及相关团队内部的互相推广;
原子:为网页构成的基本元素。例如标签、输入,或是一个按钮,也可以为抽象的概念,例如字体、色调等;与我们相对应的是基础元件分子:由原子构成的简单UI组件。例如,一个表单标签,搜索框和按钮共同打造了一个搜索表单分子;与我们相对应的是基础组合控件。组织:由原子及分子组成的相对复杂的UI构成物;与我们相对应的是复合组件。模版:将以上元素进行排版,显示设计的底层内容结构;与我们相对应的是模式,各类功能模块。页面:将实际内容(图片、文章等)套件在特定模板,页面是模板的具体实例;最后是整体的页面。
每个设计师在工作中都有自己的方法习惯,如果坚持了很久,突然被新的方式代替,会很不适应;规范的维护成本较高,需要设计师花很多精力去跟进;规范设计本身有问题,可能是某个控件的说明有异议,导致其他人不认同;团队整体沟通不到位,导致执行不到位。需要内部自上而下的推动;应对以上问题,可以通过以下方式去解决:
首先交互规范切入的时机要把控好,如果是产品初期,设计师对刚产生对本产品“认知”,使用度会更高。新人设计师在缺少经验的时候也十分愿意使用现有的规范。其次设计团队认知高度统一,群策群力,首先要保证内部认可,不能单个设计师“自嗨”。每一条新增或修改都要没有异议。最后设计规范要与前端视觉一起封装才能发挥它的终极价值,争取资源做到最好。
最后要强调的是,规范是基础,并不能概括所有场景,随着产品业务的变化,规范需要迭代更新的,所以在设计组件时,需要尽量通用和可拓展,设计师依然需要从业务场景出发,在基础组件上进行调整和设计,不能盲目“迷信”规范,即要以不变的基础应万变的场景。
规范很重要,可以帮助个人、团队以及整个企业提高效率和产出质量,保障用户体验统一。优秀规范具有灵活、可拓展、系统性、标准性等特点。把控规范设计并切入产品的时机和各个阶段需要做的事情。规范设计流程、目标、设计内容、制定规范的规定等注意要点。规范内容设计方法,运用“原子设计”的方法论去发散设计:基础通用元件、复合场景组件、模式等。对规范的反思,不仅仅是设计出炉,能落地更加重要。设计规范是工具,提升效率是核心,同时也可以当做标尺,保证设计稿产出的质量和产品统一性。
文中图片资料来源:
《网易七鱼交互规范文档》
《网易蜂巢交互规范文档》
《网易移动交互规范》
作者:朱子健、蒋蕊遥,网易UEDC交互设计师。
本文来源于人人都是产品经理合作媒体@网易UEDC,作者@朱子健、蒋蕊遥
题图来自 PEXELS,基于 CC0 协议