SEARCH
新闻资讯

网站知识库

超周全的交互规范设计流程

2020/4/14 11:04:59

一. 规范很紧张
规范和秩序存在于生活的方方面面。不知道大家有没观察过,稍微有点规模的咖啡连锁店,一样平常至少会有3位职员,分别负责收银点单,制作咖啡,打扫。他们各司其职,高效配合,以保证快速知足客户的需求。规范操作让其有条不紊且高效运作,从日常工作规范到设计规范,都能起到雷同的服从。

二. 规范的效益
规范的效益 = 提升服从 (内容覆盖率 × 适用性 × 使用人数) + 保障质量 + 同一体验

规范可以帮助个人、团队以及整个企业提升服从和产出质量,保障用户体验同一。

举一个《网易移动端交互规范》中登录流程的例子。一名资深设计师设计一套细致完备的登录流程必须要16小时,假如没有针对性引导或相干规范,设计新人很难考虑全面登录流程中涉及的防刷机制、主动补全以及各种账号的非常校验等细节。但使用交互规范后,设计新人产出一套高质量的登录流程只需4小时,提升服从约75%,同时更保证了产出质量。

当然以上仅针对设计师个人角度的服从提高。从整个企业而言,针对规范涉及的所有组件模块,设计师以及上下流同窗的每次使用都能解放重复工作,产生价值。

三. 良好的设计规范
有许多良好的例子:Google、Apple、Microsoft这些引领全球设计风尚的公司,设计规范已经上升为设计语言,引导旗下所有产品的设计。国内做的良好的案例,比如Ant Design,Element等,像这类的产品已经实现了端到端的体验一致,把交互、前端和视觉的事情一并解决了,是值得学习的典范。这些良好的设计规范都包含以下几个特点:

天真 Flexible
可拓展 Expansive
体系的 Systematic
标准的 Standard
四. 规范制作
规范体系看似复杂,但将其大义务分成一个个小义务,会发现其实也不是那么困难。以下会告诉大家如何制作交互规范,重要包含以下内容:

制作时机
规范流程
设计方式
1. 制作时机
产品初期,从0-1阶段。

框架层级

在这个阶段,所有的模块都是新的,所以要定最基础的框架层级,如下所示:



△ 图片来源《网易蜂巢交互文档》

这是我们对web页面的层级梳理,有底层、内容层、导航层、全屏操作层、插件层和模态弹窗层。搭好基础框架后,所有的控件组件都会在这个框架内搭建,好比房子的框架。这样做的益处除了方便设计师本身去清晰的理解体系,在与前端开发交流的时候也十分高效。比如在做模态弹窗时,假如没和开发交流好,开发同窗将弹窗写在了全屏操作的位置,那么就有可能出现问题。

栅格体系和常用分辨率

不论是Web端照旧移动端,在早期要确定好常用屏幕的分辨率,屏幕尺寸的兼容性。

基础交互控件

前期产品搭建速度很快,但都是基础功能,所以在交互组件的选择上可以和产品同步。如,刷新、Hover样式、时间表现、输入框、对话框和基础元件库等。如下所示:



产品稳固,成熟阶段

当产品渐渐稳固,发展到2.0版本时,我们交互组件库也同样随着产品一步步的进化。基础交互控件会变成复合型组件和营业型组件,数量也会越来越多。此时必须要对各种类型的控件进行分类,比如基础类、导航类、选择类等等。为了所有查看交互文档的人查看方便,我们必须要输出《xx产品交互规范文档》之类的引导型文档。



2. 规范流程
一旦我们决定制作规范,就要把规范当成一个产品去做。去梳理一套高效合理、可复用的制作流程,去分析产出什么样的「规范产品」才能产生最大的价值。

总的来说,可以在以下主流程的基础上,综合考虑规范效益模型的几个影响因素,落实规范制作的设计方案,从而使规范价值最大化。



明确目的

首先要确立用户目标和设计目标,在一条相对完备的产品线上,找出可以和交互设计规范有接触的角色。

如下图所示,列出来的角色都有可能是我们的目标用户。比如当交互人力不足时,运营同窗可以通过交互规范中的组件简单的搭建出页面,或者前端同窗在写页面时碰到某个通用组件不清晰,直接去查看交互规范就能解决问题。交互规范就是为这些「利益相干者」预备的「设计说明书」。



不同的角色对于交互规范有不同的使用场景,可以根据规范当前的迭代渐渐雄厚。理想的状况下可以进行较周全的覆盖。

交互设计师:打开「交互模板」新建一份设计稿,设计过程中使用「组件库」搭建一些自定义的设计方案;制作过程中发现规范中已有的模板,对照「线上规范」或「纸质规范手册」查阅;对于规范中已有的相似模块,从「交互稿源文件」中复制一份到本身的设计稿进行修改;对于完全雷同的模块,直接标明线上模块。 因此,要覆盖交互设计师的使用场景,可以产出交互模板、组件库、可使用的源文件、线上和纸质手册等产品,考虑到不同团队使用的工具不一样,可以做Axure、和Sketch两套格式的规范。



视觉设计师、产品、运营等:用雷同的方式去梳理这些角色的使用场景,重要包含规范源文件、线上和纸质规范。

前端等:线上和纸质规范、规范源代码。

对设计目的胸有定见之后,就可以开始规划详细实施了。

规范内容

规范详细包含哪些内容,目录要怎么设计,每项内容要交给哪个设计师去实行必须要在项目的开始就确定好。

确定规范内容重要分为两个步骤:

根据产品阶段初步判断必须要重要产出哪一类型的规范,基础型、复合型照旧营业型。
在初步规划的基础上明确详细制作哪些组件和模块的规范。
明确详细组件时,我们可以通过统计相干已有产品的通用模块;问卷或访谈设计师需求等;头脑风暴方式来收集素材作为规范的内容池。每次迭代按价值和复杂度的平衡,从内容池中筛选一部分模块进行规范制作。



设计语言

为了输出的同一性,规范应该有本身的基本原则,并围绕原则进行制作。有点校训、宣言、口号的感觉。以下是举两个案例,可供参考。



△ 《网易移动交互规范》

Aesthetic Integrity 团体美学、Consistency 一致性、Direct Manipulation 直接操作、Feedback反馈、Metaphors 隐喻 、User Control 用户控制。──《iOS Design Principles》

规范的规范

我们在做规范,那在设计规范时候更应该有本身的规范。每位设计师都有本身的设计风格,但我们在做统一件事情,必须要同一交互文档内的所有内容情势,在文档排版部分,必须要同一题目字体、内容字体、段落分部、流程链接;在交互说明部分,必须要包含组件场景、交互流程、用户举动、交互样式、界面元素和样式。下图参考:





团队协作

假如团队内有多个交互设计师去做设计规范,产出物质量和同一性就至关紧张。质量可以通过加入审核环节达到目的,同一性则要依靠协同以确保各个设计师的信息以及手中资料同步。

如今的交互原型软件都是有在线协同功能,设置在一个服务器中就可以。协同时必须要注重,要保留每一次的修改记录和设计联系方法,修改完毕最好要告知其他设计师,假如是多个控件组件大改,则必须要关照到所有人。如下图参考:



持续迭代

在设计任何产品都不可能一次就完善,在设计交互规范时也必须要按照优先级排期。基础的、必要的放在第一期,复合型、复杂的向后放,随着产品的渐渐完美,我们的交互规范也会越来越完备。

迭代的时候可以从三个方面入手:

每个模块自身的优化。在之前的版本投入使用后可以找用户收集使用反馈,模块是否有效,是否通用,能够提升多少服从,能不能做到直接使用等等,针对反馈意见进行模块优化。
雄厚模块。将更多内容池中的组件模块规范化。
更多应用场景。经过一系列迭代后交互规范可能进入维护阶段,更新频次降低。这时候就必须要将其「产品化」,可能是一本白皮书《交互设计规范》,可能是和视觉样式、前端代码封装组合的前端设计指南,将本身的设计规范扩散到更多领域。
推广使用

规范要真正有人用才能表现价值,从规范的效益模型中也能看出,对于团队和企业来讲,使用规范的人数是与规范带来的效益是成直接正比的。使用的人越多,越能够减弱制作规范的边际成本。 推广时(重要是企业内推广,企业外推广就更复杂了)可以包含但不仅限于以下方式:

媒体渠道:宣讲会、公司知识论坛、团队公众号、海报展架、EDM、手册。
行政渠道:通过各个团队负责人进行推广。
个人渠道:规范使用过程中的口碑宣传,尤其对于刚进团队和企业的新人最为有用。
资源互换:与其他规范,如视觉设计规范、前端规范等绑定推广,以及相干团队内部的互相推广。
3. 设计方式
前面说了基本的设计流程,本章会介绍组件的设计。 在这里套用一个不算过时的方式论——Atomic Design 原子设计。概念很简单,就是将复杂的组合拆解成最小的单元素,再将这些元素重新组合,变成新的分子。原子设计的五个阶段分别是:

原子:为网页构成的基本元素。例如标签、输入,或是一个按钮,也可以为抽象的概念,例如字体、色调等;与我们相对应的是基础元件。
分子:由原子构成的简单UI组件。例如,一个表单标签,搜索框和按钮共同打造了一个搜索表单分子;与我们相对应的是基础组合控件。
组织:由原子及分子组成的相对复杂的UI构成物;与我们相对应的是复合组件。
模版:将以上元素进行排版,表现设计的底层内容结构;与我们相对应的是模式,各类功能模块。
页面:将现实内容(图片、文章等)套件在特定模板,页面是模板的详细实例;最后是团体的页面。
基础元组件

以按钮为例,在描述按钮状况时候按照默认状况、触发(激活态)、操作反馈、非常状况—禁用和报错、其他样式。



复合组件—通用组件

由元组件构成的复合型组件,通用标准,可以在产品营业内的大部分场景下使用。例如,含有多种内容的模态弹窗。以下图弹窗为例,属于页面层级的最上层,可能包含多个元控件,单行文本,多行文本,单选,复选等等。



复合组件—营业组件(场景组件)

随着产品的功能变得越来越复杂和特别或必须要定制的营业需求,就产生了「营业专属组件」这一类型,即通用组件在营业场景下的变形。如下图例,一个下拉控件的进化史:一开始只是通俗的下拉选择控,下拉项增多后直接就添加了搜索功能。营业必须要同时支撑多选,就又添加了多选功能。



模式

此项英文叫Pattern,临时将其翻译成「模式」,就是将各种元素进行排版,表现设计内容结构,例如导航体系,登录注册模块等。



五. 对交互规范的反思
上面介绍了交互规范的重要设计流程和设计方式。但做出来只是一个刚刚开始,推广,运营,维护,迭代等等全是事儿。可能设计师花了很大力气做出来,但最终实行使用依然不理想。结合本身参与的产品设计和后期实行,总结有以下几个坑:

每个设计师在工作中都有本身的方式风俗,假如坚持了很久,忽然被新的方法代替,会很不适应。
规范的维护成本较高,必须要设计师花许多精力去跟进。
规范设计自己有问题,可能是某个控件的说明有贰言,导致其他人不认同。
团队团体沟通不到位,导致实行不到位。必须要内部自上而下的推动。
应对以上问题,可以通过以下方法去解决:

首先交互规范切入的时机要把控好,假如是产品初期,设计师刚产生对本产品的「认知」,使用度会更高。新人设计师在缺少经验的时候也十分乐意使用现有的规范。其次设计团队认知高度同一,群策群力,首先要保证内部认可,不能单个设计师「自嗨」。每一条新增或修改都要没有贰言。最后设计规范要与前端视觉一路封装才能发挥它的终极价值,争夺资源做到最好。

最后要强调的是,规范是基础,并不能概括所有场景,随着产品营业的转变,规范必须要迭代更新的,所以在设计组件时,必须要尽量通用和可拓展。设计师依然必须要从营业场景出发,在基础组件上进行调整和设计,不能盲目「迷信」规范,即要以不变的基础应万变的场景。

六. 总结
再往返顾一下交互规范的设计流程:

规范很紧张,可以帮助个人、团队以及整个企业提升服从和产出质量,保障用户体验同一。良好规范具有天真、可拓展、体系性、标准性等特点。
把控规范设计并切入产品的时机和各个阶段必须要做的事情。
规范设计流程、目标、设计内容、制订规范的规定等注重要点。
规范内容设计方式,运用「原子设计」的方式论去发散设计:基础通用元件、复合场景组件、模式等。
对规范的反思,不仅仅是设计出炉,能落地更加紧张。
设计规范是工具,提高服从是核心,同时也可以当做标尺,保证设计稿产出的质量和产品同一性。


如没特殊注明,文章均为成都网站建设公司唯赛网络原创,转载请注明来自http://www.weseo.cn/News/knowledge_675_11968.html

Contact

ADD:成都市青羊区光华东三路西环广场6楼

TEL:028-64232097

Wechat

微信二维码