什么是交互设计

交互设计

交互设计

交互这个说法来自于国外,交互的名词形式是interaction,形容词是interactive,交互设计的英文则是 Interaction Design。问题是到底什么是交互?在我看来”交互”其实很简单。“你来我往”谓之”交互”;这里的”你来”指的是”输入(input)”,”我往”是”反馈(feedback)或输出(output)”。

如果只有”你来”没有”我往”就不能称之为交互。你点一下鼠标,电脑屏幕马上告诉你”签到成功”——”点鼠标”是”你来”,电脑的那个提示是电脑给你回馈的“我往”。这就是最简单的一个交互。交互可能存在于人与人之间,也可能存在于人于物之间。对于交互设计师来说,这个物可以是电脑,或者手机,MP3播放器……一切需要你work on的产品。

交互设计(英文Interaction Design, 缩写IXD),是定义、设计人造系统的行为的设计领域,它定义了两个或多个互动的个体之间交流的内容和结构,使之互相配合,共同达成某种目的。

从用户角度来说,交互设计是一种如何让产品易用,有效而让人愉悦的技术,它致力于了解目标用户和他们的期望,了解用户在同产品交互时彼此的行为,了解“人”本身的心理和行为特点,同时,还包括了解各种有效的交互方式,并对它们进行增强和扩充。

通过对产品的界面和行为进行交互设计,让产品和它的使用者之间建立一种有机关系,从而可以有效达到使用者的目标,这就是交互设计的目的。

交互设计的五要素
交互设计,既然是一种设计,难免会和其他设计相比较,平面设计、建筑设计、工业设计等等。交互设计和其他设计都是一种有目的和计划的创作行为,但是它们所设计的对象却截然不同。其他设计的对象是信息,是材质,是空间。而交互设计的对象是行为。

想象一下你是怎么利用淘宝购买衣服的?先注册登录APP——找到搜索框进行搜索——浏览搜索结果——点击详情——立即购物(不满意则返回继续筛选)——填写收货信息——付款——等待收货——确认收货——评价——完成。利用互联产品满足一个需求,是需要通过一步步的行为(点击、滑动、输入等),而交互设计师则负责设计这些行为,让用户知道自己在哪,能去哪,怎么去。

辛向阳教授将人与系统交互的过程分解为了五个要素,分别为:用户、行为、目标、场景、媒介(people、actions、purpose、contexts、means)。在上个购物的例子中,用户是需要买衣服的人,他的目标是买衣服,行为则是一次次输入、浏览、滑动、点击等,媒介则是淘宝APP,场景会根据用户所处的情况而有所不同。

用户:
产品立项后,确定产品定位,去了解用户,互联网产品可能存在很多种用户,一定要以目标用户的研究为主,从不同渠道去收集目标用户的需求、筛选需求、确定需求优先级,确保需求是真实的。

艾伦库珀(Allan Cooper)在<交互设计精髓>书中讲了三个模型,心理模型、表现模型、实现模型,心理模型是用户对产品的预期,表现模型是产品被设计成的样子,实现模型是开发产品所使用的技术手段。用户并不关心实现模型,只关心表现模型有没有符合自己的心理模型。只有站在用户的立场去思考,让产品的表现模型更贴近用户的心理模型,用户就愿意使用。另外,建立角色模型也有助于了解和梳理用户信息。

行为&目标:
使用产品时,不同用户可能有不同目标,一个用户也有可能有多个目标。研究用户的目标是为了确定需求、清楚产品要满足用户多少个目标。交互设计师再根据不同的目标去设计相应的行为路径。错误的目标,繁琐的行为路径,都会导致用户放弃产品。

按照用户不同的目标,行为路径可以分为:随机式、往复式、渐进式。

当用户没有明确目标时,行为则比较随机,用户会在APP里不断的跳转,例如:没有明确购物需求时逛淘宝;随机的查看新闻内容。

当用户有个模糊的目标时,则会往复的对比内容,从而确定自己的目标,并完成目标,例如:当我要在人人都是产品经理浏览关于交互设计方法论的文章时,就会进行搜索,并在搜索列表和文章详情间来回切换,直到找到想要的交互方法论的信息。

当用户具有明确目标时,行为路径就会较明确,一步步推进。例如北京雾霾很严重,想在京东买个3M的口罩,用户路径为:搜索3M口罩——浏览搜索结果列表———进去商品详情———填写信息——等到收货——给予评价。

首先要明确用户的目标,根据不同目标确定行为路径是随机、往复还是渐进,针对不同的行为类型进行相应的交互设计。

媒介:
媒介可以理解为产品形态,产品是用APP、网页、公众号、微信小程序、H5宣传页…还是其他形式,这属于媒介。互联网产品常见的媒介是APP,但要具体问题具体分析,我写文章是个需求,但是就没有必要专门成立个公司做个APP,只需要在微信建立一个公众号发表文章,这里微信公众号就是媒介。

不同的媒介有不同的特点,一定要根据自己的业务类型来选择适当的媒介,同时应该考虑到性价比。

场景:
场景是个很容易被忽视的问题,随着智能手机的快速普及,移动互联网时代提前到来,用户使用产品时的场景变得更为复杂,可能在嘈杂的地铁里,也可能站在路边、躺在床上等等。

大家熟悉的打车软件,一般都会有两个APP,一个乘客端、一个司机端,司机端的用户是正在开车的司机,而司机为了安全一般会把手机固定在车载架上,这个场景就是司机端APP所处的主要场景,那么设计APP时就要考虑到车内光线问题、司机操作便捷性和安全性的问题。

交互设计对产品经理的意义
交互设计是产品经理必备的知识,但是并不是说要和交互设计师一样专业;简单来说,就是产品经理要懂得交互设计的原理,至少要有看得出好坏的能力。而交互设计师需要,在这个基础上,将设计真正落地的执行人。两者的职能是完全不同的。产品经理需要为产品的整个生命周期负责,而交互设计师,只为产品的交互细节负责。通常一家由多个产品的公司,产品经理只会负责一个产品,而交互设计师可能会负责多个产品。产品经理之所以要懂交互设计的知识,一方面是为了好沟通,另一方面是为了确保产品能更好的满足需求。

大多数公司的产品经理是没有配备交互设计师的,产品经理是需要自己来完成交互设计的,我们在操刀交互之前需要有足够的画面感在脑海中去勾勒我们的产品交互界面,如果边画交互边调整很容易让自己迷失在交互中无法跳出来,甚至不断推翻,这样不但浪费时间不说,产品的很多功能衔接和交互流畅性会大打折扣。

如何验证交互设计的效果

可用性(usability)是交互设计的基本而且重要的指标,它是对可用程度的总体评价。也是从用户角度衡量产品是否有效、易学、安全、高效、好记、少错的质量指标。同时,交互设计(InteractionDesign)的目标不止于此,它还包括要考虑用户的期望和体验,可用性保证产品可用,基本功能完备且方便;而体验在于给用户一些与众不同的或者意想之外的感觉。也就是说,可用,是产品应该做到的,理所应当的,体验则是额外的惊喜和收获。

产品的交互设计并非一日而成,也是要经过不断的迭代和优化,才能逐渐完善产品的交互体验与流程。这其中就需要通过真实用户的使用反馈,从用户的角度去看待产品交互设计效果的好与坏。

针对于产品的不同时期,通过会有以下两种检验方式:用户访谈及用户行为分析,数据挖掘分析。
用户访谈及用户行为分析:在产品设计及上线之初,用户积累数量较少,无法形成有效数据分析时。通过采用成本较高的用户访谈及用户行为分析,将交互设计变成纸质或电子原型,通过邀请用户使用的方式,观察用户行为并通过后续与用户访谈了解用户在交互过程中遇到的问题,找到更加有效的优化方式,不断通过反馈完善交互设计。

数据挖掘分析:在产品上线并进行稳定运营阶段后,产品会逐步积累用户数量以及用户使用产品的行为数据。在这个阶段,通过对用户行为数据的采集和挖掘分析,发现用户在与产品进行交互过程中的问题,根据问题有针对性的提出改进方案。

什么是动效设计

对于交互设计师而言,主要的交付成果物是交互原型,相对于视觉稿来说,交互设计在视觉效果、认识层面、感知层面要远逊于视觉稿。以至于在有些产品团队中,交互设计师与视觉设计师合二为一,在确定需求后,直接进行制作高保真的视觉稿。

随着设计工具逐渐迁移到sketch上,其最基本的页面点击跳转却不能实现,只能进行静态页面展示,若设计师工作时间充足一些,或许会进行页面之间的流转箭头指示。对于那些对产品以及业务不是很了解的团队成员来说,其一直会处于懵懂状态,甚至会在众多的静态页面中迷失,大大降低了交互稿的可读性。

因此,动效设计在交互稿的逻辑展示及提高可读性方面是很有必要的,当然其作用也不限于交互稿的展示,还有很多富有创意的设计点都可以用动效设计来进行表现。接下来,我们就深入的探讨一下交互设计的最后一公里——动效设计。

动效设计(Motion design)是通过动态效果,满足用户当前心理需求,提升用户体验的设计过程。
从定义来看,满足用户心理需求与提升产品的用户体验,是动效设计的两大目标。
满足用户心理需求是对交互设计的完善与补充,包括引导用户操作、对用户的操作进行反馈等;
提升产品的用户体验是交互设计的升华,包括减少用户在使用过程中的不适感,增强产品的操作流畅度,提升产品的气质。

现实中,很多人对动效设计的了解不够深入,往往以偏概全,甚至有人觉得动效就是所谓的Loading,在这种情况下,对动效设计的作用理解就更加不准确了。

产品动效设计的作用

从动效设计的定义延伸来讲,动效设计的作用主要体现在两个方面,一方面是操作功能,包括帮助引导、展示层级、高效反馈;另一方面是情感功能,增强用户体验,包括流畅过度、增强操作、升华体验。

动效设计的操作功能是对用户需求的满足以及操作的反馈,让用户操作流程成为一个衔接紧密流畅的闭环。帮助引导与展示层级都有利于用户易懂、易操作,帮助用户快速理解页面主次关系以及操作方式等;高效反馈是对用户操作完成后的相应反馈,无论操作的成功与失败,都应该给与用户明确的结果并引导用户接下来的操作。

动效设计的情感功能是动效设计所体现出来的产品气质,无论流畅过渡,还是增强操作、升华体验都是在为产品气质的塑造而添砖加瓦。

但是,现实中很多设计师将动效设计作为交互设计的附属工作,很少投入精力去关注产品动效,导致项目开发人员采用产品系统的底层控件来完成产品的转场、加载动效等。这样的动效效果会与设计风格、产品气质有所偏差,显得较为突兀、另类;这样的动效设计无胜于有,只会为产品减分。

要想做好产品体验,动效设计需要引起交互设计师足够的重视,那么什么样的动效设计才是一个合格动效设计呢?

合格的动效的要求

作为交互设计的最后一个环节,合格的动效作品要满足一定的要求,这里有五大要求。

其中前三点是基本要求,是完成一个动效的必要条件。

1、流畅

流畅是是一个合格动效的基本要求。结合动效的过渡流畅的作用,有一些设计师总结了三个维度——不卡、不闪、不跳,这“三不”要求是实现过渡流畅的重要方面,无论是缓入缓出还是加载动画,流畅都是动效的最基本的要求。

2、充分考虑开发成本

在公司中做的任何项目都是基于时间、人力资源等多方面的条件下来开展的,因此,任何一个动效设计的开发都要考虑项目的投入与产出比。设计师应该站在项目团队的角度来审视交互动效,只有与项目成员达成一致,才能保证动效实现的效果。否则,你的动效设计只会停留在设计阶段,不能落实到项目中。

3、性能与响应度

不管如何强调动效设计的重要性,但是交互设计的重点永远是交互稿,这一点是不会变的。因此,动效设计的要充分考虑到设备的性能与限制,只有在保证功能完善与健全的前提下来进行动效设计,同时要做到动效文件越小越好。

在满足动效的基本要求后,你的动效作品才有可能落实到产品中,那么接下来我们来讨论一下动效设计的高阶要求。

4、克制

具有克制属性不一定是好的动效设计,然而好的动效设计一定具有克制属性。动效设计不是设计炫技的舞台,带着脚镣跳舞仍然适用。

克制是对动效效果的限制包括简洁适度、不增加用户操作、不阻碍用户、不超过时限(操作动效最优区间0.5s-1s)。

产品的动效与用户的操作相互交替出现,动效出现在用户界面上的频率会大大增加。对用户来说,最好的动效是让用户感受不到动效的存在,过度设计有可能会将用户的注意力吸引到动效上,而忽略页面要表达的内容与功能,造成操作流程上的割裂。因此,对动效的功能属性的准确表达要大于或远大于其美观效果的表现。

5、自然

自然是高阶要求中最难把握的一点。参照现实环境的物体物理运动特点,用户会将现实生活中的运动感受带入到具体的动效过程,若动效不符合用户运动感受的动效,会给人怪异的情感。因此,不同的动效节奏和形式,会给用户带来不同的体验。例如,在加载过程中的加速运动要比匀速运动与减速运动的的体验好。

除了运动事件的速度形式,运动的节奏与方式也是影响动效设计自然属性的关键因素。例如在小人的行走过程中,左臂与右腿是同时向前的,如果不一致,就会给用户不自然、不真实的感觉。

动效的上述五点要求是贯穿动效设计的整个过程,同时也是检验动效优劣的重要维度。

动效的类型
从不同的维度进行分析,动效设计类型有不同的分类结果。
根据产品业务进行分类,动效设计可分为:转场动效、操作引导与反馈类、内容呈现类以及情感体验类四类。
根据动效出现的时机与作用,动效大致分为四类,分别是品牌类动效、引导类动效、转场类动效、反馈类动效。

  1. 品牌类动效
    通常,品牌类动效出现在开机页面。
    从狭义上来说,品牌类动效指的是产品的logo动画,将产品或公司的品牌形象特色进行准确传达,如谷歌logo动画;
    从广义上来说,品牌类动效是产品中统一、独特能够与其他产品产生差异化的动效设计,甚至能够上升至产品的“隐形logo”的地位,如苹果的解锁动效、MD中的FAT按钮动效等。
    有些产品的品牌类动效的风格会遗传给产品的其他动效设计,使产品的设计风格与动效特点上保持一致。

  2. 引导类动效
    引导类动效一般出现在引导页面或入场动效之后,引起用户注意或引导用户进行操作,从而减少用户困惑,如APP的引导页等。引导类动效还包括页面元素动画、图标动效,已引起用户的注意,进行操作。

  3. 转场类动效
    转场类动效又可细分为:离场类动效与入场类动效,二者是相向而生,主要功能是页面层级展示以及流畅过渡。
    离场动效是页面中元素的离开,入场动效是页面元素的进入,二者占据着动效设计的绝大部分,对整个产品形象的塑造起着重要作用,同时在效果上要更加注意克制的设计要求。

交互设计

复杂度高的动效会急剧拉升用户的惊喜度,但是,随着时间的推移,惊喜度会逐步降低。在用户使用的中后期,复杂的动效往往会引起用户的反感,影响用户操作。复杂度低的动效设计在用户惊喜度方面是潜移默化的影响,当用户逐渐熟悉与适应产品的动效节奏,其惊喜度会逐渐上升,最终保持在较高的水平。

  1. 反馈类动效
    反馈类动效是指用户在操作后页面给出的操作反馈提示动效,是衔接用户操作与页面跳转的过渡效果。反馈动效可细分为:实时反馈动效与整体反馈动效。
    在反馈类动效中,设计师最熟悉的动效是加载动效,其是对用户点击一下载的反馈,同时衔接了离场动效与入场动效,使用户的才做反馈更加顺畅,避免中间出现断层。

总结:
交互设计是定义、设计人造系统的行为,有效达到使用者的目标
交互设计的五要素:用户、行为、目标、场景、媒介
交互设计对产品经理的意义在于高效的工作配合
利用可用性验证交互设计的效果
动效设计是通过动态效果,满足用户当前心理需求,提升用户体验的设计过程
产品动效设计的作用:操作功能、情感功能
动效评判标准:流畅、充分考虑开发成本、性能与响应度、克制、自然
动效的类型:品牌类动效、引导类动效、转场类动效、反馈类动效