步步为赢:交互设计全流程解析
上QQ阅读APP看书,第一时间看更新

1.2 如何学习交互设计

前面介绍了设计的目的是解决问题、满足需要,这体现了进行交互设计时的根本原则;还介绍了交互设计是节点中人、机器、系统之间“互相行动”的设计。明确了这两点,本节继续介绍学习交互设计的方法。下面先从互联网工作中的产品的开发流程说起。

1.2.1 互联网产品开发流程

在互联网公司中,一般项目的开展都围绕一个产品进行:从产品经理最初提出想法(也就是需求),到最终落实到产品里,都有一个保证其创造过程高效、高质量产出的流程。这个流程会根据公司的规模差异而有所不同:在大公司中更完备,小公司中更简洁。下面以大公司更加完备的流程来介绍(见图1.13中完整流程),因为这样的流程能相对保证产品有更好的用户体验。

图1.13 互联网产品开发流程

1. 产品需求阶段

首先由产品经理提出需求草稿,然后将其放入需求池。需求池中的一部分需求会因为重要程度不够或者当前技术做不到等原因被筛掉,留下来的需求就是确定的需求,产品经理会写成更详细的需求文档,然后召集交互设计师、UI设计师、开发工程师、测试工程师等人员一起开评审会。评审会的意义,是让大家充分了解需求的内容,并讨论需求的各种细节。此时交互设计师由于对用户的了解比较多、对场景的理解比较深,是讨论的主要参与者。交互设计师此时主要的职责,是把需求还原到用户的场景中,避免伪需求的出现。

2. 交互设计阶段

需求评审之后,就是交互设计阶段。交互设计师首先需要进行设计分析,明确这个需求是要解决什么问题及竞品是如何设计的。之后,交互设计师运用设计理论、规范和原则,画出能够很好地解决问题的交互稿,并运用可用性测试对方案进行验证。交互方案确定后,需提交交互组内进行评审:该种评审的过程是邀请其他交互设计师,并向他们讲解需求的内容、设计分析的过程、方案是如何解决问题的,并请其他设计师对设计方案进行提问。这样做的目的是保证方案的质量。

在交互方案的设计过程中,设计师需要用到9个设计技能。这些技能在1.2.2节会详细介绍。

在组内评审后,设计师需要根据反馈对原型进行优化完善,然后由产品经理确认原型,以保证原型能够满足产品需求。方案确认之后,交互设计师需要召集产品经理、UI设计师、开发工程师、测试工程师,进行交互评审,为大家讲解交互方案。参加评审的同事会从各自的角度提出一些疑问,例如UI设计师可能会觉得某个动效太复杂,开发工程师可能会认为某个操作易造成卡顿等。在评审会上,交互设计师也要充分说明方案设计的原因。评审会的目标是大家共同讨论出彼此都能接受的最优方案。在交互评审之后,设计师需要根据反馈再次对原型进行完善,并把原型的最终版本发送给产品经理和相关的UI设计师、开发工程师。交互设计阶段如图1.14所示。之后就进入“视觉设计”阶段。

图1.14 互联网产品开发流程中的交互设计阶段

3. 视觉设计阶段

交互设计的阶段之后,就是视觉设计的阶段。它和交互设计阶段几乎完全相同。交互设计师在此阶段的任务,主要是和UI设计师配合,解答UI设计师遇到的疑问,以及确保视觉稿与交互稿一致,并且没有交互上的问题。

4. 开发/测试阶段

视觉设计阶段之后是开发/测试阶段。交互设计师此时的主要任务是解答疑问,确保开发人员和测试人员能完全理解交互方案,以保证方案的落地。测试人员完成了对功能的测试,说明该功能已经开发完毕。交互设计师就可以开始进行交互验收,即使用这个功能,并查找功能中是否存在和交互方案不同的地方。所有的这些不同处,都需要提交bug(问题和漏洞),请开发人员进行修改。不要小看了这一步:即使交互方案做得再完美,如果开发工程师没有按照交互方案进行开发,产品上线后还是可能出现问题,而且主要的责任还是在交互设计师身上——大家不会去追究某个错误发生的原因,只会看到这个错误发生在交互设计师负责的范围。所以验收是保证交互方案能够真正落地相当重要的一环。

5. 上线阶段

验收结束后,交互设计师需要以邮件形式发出验收结果。待所有bug已修复,即可用邮件发出“同意上线”的指令。在功能终于上线之后,作为交互设计师,千万不要忘记找产品经理或者用户研究员查询功能上线后的数据。数据是验证交互方案是否合理的很重要的一项指标,也是交互设计师增长经验的重要途径。

以上是大公司中的一个产品从开始到最终上线的完整流程。从中可以看到流程中每一环节都有评审的步骤,这都是为了保障最终产出物的质量。在小公司,其实只要砍掉每个环节里的评审环节,就得到了一个简化的、更快捷的流程。有的小公司里甚至可能没有交互设计师的职位,而是由产品经理或是UI设计师代劳。交互设计是诸多设计方法和设计思维的集合,可以帮助一个产品得到更好的用户体验。即使未来你可能不会从事交互设计师的工作,千万不要气馁,你依然可以学习交互设计的方法,并且通过运用这些方法,设计出体验良好的方案。

1.2.2 交互设计师的必备技能

笔者曾经在德国学习设计,并在德国博世、腾讯微生活、网易、宜人贷等公司工作了7年。笔者结合了交互设计领域的理论以及工作经验,总结出既能让设计师拥有充足的理论装备,又能在工作中做出可靠方案的9个必备技能,如图1.15所示。

图1.15 交互设计必备技能

作为设计师,你可能会有这样的疑问:为什么掌握了这9个技能,就可以胜任交互设计师的工作了呢?因为这9个技能涵盖了交互设计工作中所有的设计流程,掌握了它们,就可以在设计流程中的每个步骤都得到有理有据的结论,从而实现“步步为赢”。

如前所述,交互设计师的工作从接到产品需求就开始了。产品需求是对产品功能的描述,一般由产品经理提出。例如“短视频支持发弹幕”功能,就是一个产品需求。产品经理提出要开发某个功能,交互设计师在这个步骤中最大的价值,在于通过场景思维,将需求还原成用户在什么情况下会使用这个功能。这样做有以下两点作用。

(1)帮助设计师判别需求的真实性。什么是真实的需求?就是用户真的会使用你提供的功能或服务来满足自己的某些需要。举个例子,如果公司听说用户想要打孔机,于是就决定销售打孔机给用户。但用户真的是需要打孔机吗?我们来看下面这个场景。

小美刚买了一幅自己很喜欢的油画,想挂在租住的房子里(见图1.16)。在征得房东同意的前提下,她想借一个打孔机在墙上钻个孔,钉上钢钉,以便结实地挂上新买的画。

图1.16 小美租住的房子示意

从这个场景里可以看出:小美本质上需要的其实是把油画挂在墙上,显然“买个钻孔机”对她来说成本较高。借打孔机就成为更经济的方式——毕竟打孔机这种设备一年也用不上几次。再深入思考一下,小美挂油画需要征得房东同意打孔,还需要借打孔机,这些对小美都造成了一定困难。如果买来的油画直接附赠黏性强又方便拆卸的胶带,小美可以更方便地把油画挂在墙上,同时搬家的时候也能够顺利地拆走油画。这样的油画就满足了用户的需要,比普通油画更有竞争力。所以,买打孔机不是真实的需求,把油画挂到墙上才是。描述用户的使用场景,可以帮助设计师更了解用户,甄别出用户的真实需要。

(2)有助于设计师分析用户目标,以便后续设计方案时选择合适的交互方式。用户目标是用户对操作后能够达到的期望效果的描述。例如,在iPad版微信读书App的登录页面,设计师在普通的“微信登录”按钮下面,增加了“微信扫一扫登录”按钮。为什么需要这个按钮呢?首先,分析一下这里的用户场景。

小李刚刚在iPad里下载了微信读书App,打算用iPad读一小时书。当App下载完成之后,小李打开微信读书App,看到登录页面。小李希望迅速完成登录操作,以便开始寻找自己喜欢的书。

从场景里可以总结出,小李在登录页面的目标,是希望“迅速完成登录操作”。而在iPad上,用户的微信很可能是未登录状态。如果登录页面只设计一个“微信登录”按钮,那么用户点击后需要在iPad上先登录微信App,再登录微信读书App。这一点也不“迅速”。但“微信扫一扫登录”按钮则解决了这个难题,如图1.17所示。

图1.17 iPad版微信读书App登录页面

场景思维是设计师了解用户的有效工具。除此之外,设计师还需要了解用户的使用习惯和心智模型,它们都是长期以来固化在用户心中的认知模式,是设计师需要了解的基础知识。“不要重复发明轮子”说的就是这个道理。

通过场景思维,充分分析了产品需求之后,交互设计师需要总结出产品目标和用户目标,从而得出此次设计的设计目标。设计目标是设计师的“指南针”,它可以明确方案需要解决什么问题,满足何种需要,是好设计的基石。

明确了设计目标,下一步是开始寻找设计灵感。竞品分析是寻找设计灵感时主要使用的方法:大到产品定位、交互流程,小到页面布局、细节设计,都可以通过竞品分析来了解现有相关产品的做法。做竞品分析的动机不是为了照搬和抄袭,而是为了广泛了解已有方案,获取灵感,并结合自己产品的场景和目标合理地应用。

有了上述这些准备之后,设计师就可以开始设计流程。一般设计流程是针对比较复杂的需求才进行的步骤,如果是简单的功能,例如“登录领优惠”,就不需要进行流程的设计了。设计流程时,需要考虑需求的设计目标、用户的习惯和心智模型,同时结合竞品分析获得的灵感进行设计。具体设计方法会在第6章中介绍。

在设计流程之后,设计师需要依据设计原则和设计规范,进行交互原型的设计。设计原则的本质是人们根据以往的经验,总结出的通用做法。没有特殊情况,设计师都应该遵守。例如,一致性就是相同的功能在不同的页面需要保证相同或类似的交互操作体验。这样做的好处是用户在App里只要看到某种形状的按钮,就知道这个按钮的作用,降低了学习成本。设计规范主要规定了现成的交互控件,设计师需要掌握并正确使用这些控件,如果使用不当,一来会让用户不习惯,二来也会削弱设计师的专业性。

在方案设计完成之后,为了验证方案是否能够达到预期效果,通常要进行可用性测试。一般大型需求(如大型改版或者新开发一个App)会进行完整的大型可用性测试,持续时间也会较长。设计师在支持日常工作中的绝大多数需求时,一般可以进行敏捷的可用性测试,迅速验证方案。

从以上介绍的设计流程里可以看到,本书涵盖的9个技能都是穿插在交互设计流程的每个步骤里。掌握了这些技能,将助你在设计方案时“步步为赢”。

1.2.3 交互设计的学习方法

学习基础知识和技能,然后进行实践是高效进行交互设计学习的“秘诀”。这不仅是学习交互设计的可靠方法,也是学习很多学科的方法。

具体来说,首先,学习者需要掌握基础的理论知识,因为理论的本质是前人总结出来的规律,它为学习者的大脑提供了思考的捷径,让学习者在实际进行设计的过程中,可以按照前人的经验进行思考,从而事半功倍。书中总结出的9个交互技能,其实就是9个总结好的规律,它们可以帮助学习者少走弯路,用最小的投入得到最合适的方案。

另外,理论的价值还在于为学习者提供了思考的方向。例如,古人看到太阳东升西落,于是就想当然地以为太阳、月亮这些天体都是围绕地球运转的,甚至在中世纪的欧洲,不相信地心说的人还会被教廷严厉惩罚。但地心说对于解释天体的运动规律有许多难以自圆其说的缺陷。直到哥白尼提出日心说的理论并得到验证,天体运动的规律才得到了更加合理的解释。图1.18所示为地心说和日心说的理论模型。设计师在进行交互方案设计时,也需要使用正确的理论,才能做出优秀的方案。

图1.18 地心说和日心说的理论模型

其次,了解理论不等于掌握了理论。判断学习者是否真的掌握了知识点,一个重要的标准是其是否懂得如何运用。实践是学习如何运用理论的最好方式。“纸上得来终觉浅,绝知此事要躬行”是一句很实在的感悟和建议。基于此,本书在每章的最后都有“思考题”。大家可以结合书中内容思考一下提出的问题,给出自己的答案。

相信大家通过学习基础知识,不断进行实践,可以逐步掌握书中的每个知识点。

1.2.4 大型公司交互设计师招聘职位分析

作为交互设计师,能进入一家流程更完整、团队更专业的大公司工作,对自身的成长十分有利。那么,什么样的设计师才能进入大公司呢?笔者分析了几家大型互联网公司的交互设计师职位的招聘要求,其中发现许多共通点。

本次分析了阿里巴巴公司、腾讯公司、网易公司共22个交互设计师职位的招聘信息(时间为2018年3月31日),对职位的选取主要注重其权威性和全面性(见图1.19)。

图1.19 部分知名互联网公司

其中选取了阿里巴巴公司9个招聘职位,既包括了蚂蚁金服、阿里云、信息平台这些相对成熟的业务,也包括了菜鸟、新零售、OS事业部、车机交互等比较新潮的职位。

选取了腾讯公司9个招聘职位,包括腾讯浏览器、天天快报、腾讯云这些明星产品,也包括智能平台(探索方向)、王者荣耀游戏、车联网等发散方向的职位。

选取了网易公司4个招聘职位,包括网易云音乐、网易考拉等明星产品。

这些招聘职位的级别既有普通设计师,也有高级/资深/专家设计师,甚至管理岗位的设计师。

所有的招聘信息都分两个部分:岗位描述(设计师需要来做什么)和岗位要求(对设计师有怎样的期待)。下面从这两个方面进行分析。

1. 岗位描述

通过对招聘信息的分析,相关岗位的描述归纳为以下几项。

①日常需求:该类别指日常业务需求的交互设计支持,主要指App版本迭代的交互方案输出。版本迭代主要要求设计师能够通过交互方案来满足产品目标和用户目标。

②体验优化:主要通过用户研究、可用性测试、数据分析、竞品分析、后台用户反馈分析等方法来提升App的用户体验。

③需求分析和分解:指与产品经理沟通需求,并将产品需求进行拆解的能力。

④团队配合,推动落地:交互设计师做出方案后,需要配合产品经理、UI设计师和开发工程师、测试工程师,将方案落实到线上版本。

⑤交互方法和理论:交互设计师需要掌握交互设计的方法和理论。对应本书中的内容,主要指场景理论、设计目标的方法以及设计规范。

⑥熟悉具体某方面知识:例如招聘岗位是语音交互设计,那么设计师需要了解语音交互方面的知识。零售店的体验设计等岗位同理。

⑦创新和行业发展:该部分提及较少,作为加分项。

以上是作为初级设计师的要求。如果是高级设计师,不仅对上面几项的要求会更严格,还需要加入以下两项。

⑧设计规范和框架制订(高级/资深/专家):设计规范部分,要求设计师能够为团队制订统一的设计规范,使团队的设计达到一致性和高质量。而App框架的制订,则是考虑产品的功能特点和框架的特点,选择适合的框架。

⑨团队管理和提升(资深/专家):帮助团队提升设计能力。

2. 岗位要求

通过对招聘信息的分析,相关岗位的要求归纳为以下几项。

①独立设计:能够独立完成某个功能的交互设计。

②流程图、原型(包括动态演示):交互设计师需要能够设计出恰当的流程,并画出表意清晰、控件运用准确得当、信息层级清楚的原型。会制作动态演示原型,这不是所有岗位都要求的必备技能,而是一个加分项。

③软实力:主要包括逻辑能力和同理心、表达能力。

④熟悉某行业知识:设计师需要了解岗位所在行业的基础知识。建议应聘者在面试前搜索所应聘公司相关行业的知识。

⑤专业、学历:大公司对专业和学历的要求较高,但如果作品集很精彩,要求也会适当放宽。

⑥多终端:越多样的终端对设计师会越有利,手机、iPad、个人计算机、智能硬件……交互设计的原则在各种终端都是通用的。

⑦积极的态度:要有激情!能抗压!一般有这样要求的职位,应聘者也要提高警惕:要么是加班比较多,要么是领导比较强硬。总之提前通过别的渠道多打听一下为妙。

以上是对于初/中级设计师的要求。乍看起来要求比较多,但其实细细想来,基本都是比较基础、合理的要求。其中前三项是最重要的,需要重点准备,后面的项目只要满足基本的标准即可。

对于高级别的设计师,除了以上几项,主要还有以下三项。

⑧大型项目或管理经验:经历过大型项目,一般指App的大改版,或者独立负责一个App的设计。

⑨设计策略:为团队制订大的设计方向,把控整体风格。

⑩团队提升:帮助团队成员提升能力。

通过以上的分析,可以总结得出以下的结论。

对于初级设计师,主要要求设计师能够对某个功能做出合理、有效的交互方案。交互设计是一个偏理性的过程,其中有很多设计方法、原则、规范,能够辅助设计师做出优秀的方案。

对于高级甚至专家级设计师,则需要从更宏观的角度对App的交互设计进行支持,例如设计策略的制订、设计规范的制订、框架的制订、成员能力的提高等。这一方面需要设计师掌握基础的交互设计方法、原则、规范;另一方面需要设计师在实际工作中不断运用、总结、升华。无论何种情况,交互设计基础知识都是设计师不断成长的根基。