步步为赢——交互设计全流程解析(txt+pdf+epub+mobi电子书下载)


发布时间:2020-05-21 01:47:00

点击下载

作者:董尚昊

出版社:人民邮电出版社有限公司

格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT

步步为赢——交互设计全流程解析

步步为赢——交互设计全流程解析试读:

前言

今年是我从事交互设计工作的第七个年头了。第一次接触到“交互设计”的概念,是我在德国不来梅大学读研究生的时候,选到一门“手机交互模式介绍”课程。课程里老师介绍了许多手机交互模式的特点,让我第一次认识到实现同一个功能,原来有许多种不同的方式。

回国后,我先后进入腾讯微生活、网易、宜人贷等公司工作,继续我的交互设计之路。一路不断设计各种不同类型的产品,也在不断阅读各种交互设计的书籍和文章。后来,我在爱奇艺负责视频业务小组的整体交互,接触到的需求类型更加多元。在接触了许许多多的项目之后,我渐渐发现,虽然不同项目的产品类型千差万别,但设计师做方案时用到的方法和思路总是相对固定的。于是,我尝试将这些工作经验,结合在德国学习的内容以及平时读书学习到的交互理论知识,变成设计方法和思路整理出来,慢慢就有了这本书。我的目标是希望大家能够系统地掌握交互设计的整套方法。

在组织这本书的内容的时候,我按照互联网公司中设计师实际接到产品需求后的工作流程,将交互理论和设计方法融合到工作的每个步骤里。之所以这样组织,是希望设计师在接到产品需求后,可以参考书中介绍的方法,一步步开展方案的设计,最终实现“步步为赢”。

设计的目的是满足需要、解决问题。很多人认为交互设计师的核心工作内容只是画线框图。但实际上,线框图只是设计师呈现方案的一种形式。设计师工作内容中最精华的部分,是他/她在接到需求后,如何对需求进行分析,以及如何从分析中找到问题的最佳解决方案的过程。这才是交互设计师的核心能力。这本书的内容,主要是介绍交互设计的思路,希望读者能够通过掌握这些思路,达到以不变应万变的效果。本书的相关配套资源请读者登录人邮教育社区(www.ryjiaoyu. com)下载。

我一直相信,一个人的价值,取决于他/她能为别人带来的价值。如果你想系统了解互联网工作中交互设计的设计方法,如果你想成为一名交互设计师或者用户体验设计师,相信这本书可以帮到你。

希望这本书,可以为你带来价值。

希望这本书,可以证明我的价值。董尚昊2019年6月于北京第一篇 理解交互设计第1章 初学乍练——帮你把握大方向

交互设计师是做什么的?

是专门画线框图的吗?

是优化产品经理的原型图的吗?

都不是!

本章将介绍交互设计师的核心任务,

明白了这一点,就能为你的设计之路指明方向。1.1 设计中的交互设计

交互设计是一门随着计算机技术的发展而产生的新兴学科。交互设计师是近年来各大互联网公司的热门职位。本章的内容旨在为大家系统学习交互设计的理论和技巧打下基础:首先,介绍设计的目的,这是一个根本性的指导原则,它为设计师进行交互设计指明了前进的方向;其次,介绍交互设计的内容;之后,介绍交互设计的系统性学习方法;最后,介绍现在互联网行业对交互设计师的要求,以便读者更有针对性的学习。交互设计是讲求有理有据地进行设计的学科。设计师要通过分析理清思路,根据逻辑安排流程,遵循原则设计界面。因此,交互设计是有“法”可循的设计学科。相信大家通过本书的学习,能快速系统地掌握交互设计的方法,成为一名优秀的交互设计师。下面,本书先从设计的目的开始介绍。1.1.1 设计的目的:满足需要

这是一个设计师在第二次世界大战中立功的故事。第二次世界大战初期,德国空军曾一度取得了欧洲战场的空中优势,并且宣称“没有任何敌机能在白天飞临柏林上空”。但是在1943年1月31日上午和下午,英国空军战机编队两次飞过柏林上空,不但使德国原定的阅兵式被迫取消,而且让德国人夸下的海口变成了笑话。这种让德国人束手无策的战机,就是历史上赫赫有名的德·哈维兰蚊式战斗轰炸机(简称蚊式轰炸机)。它是第二次世界大战中设计最成功的飞机之一,如图1.1所示。图1.1 蚊式轰炸机

蚊式轰炸机是由英国的德·哈维兰(de Havilland)飞机公司设计制造的。在设计这款战机的时候,设计师充分考虑了在战争时期,制造战机的传统材料——铝很可能会匮乏,而掌握飞机金属结构制造技术的工人也将十分短缺,因此采用木材代替铝材,这样能够摆脱大型冶炼工厂和专业机械的限制,减少战略资源的消耗,降低制造难度和成本。这样的战略考虑,让英国的橱柜厂、钢琴厂、家具厂都能参与到飞机生产中,从而保证了即使在物资和人员匮乏时期,飞机仍然能够高速产出。同时,为了满足战机“生存性好”的基本需要,蚊式轰炸机取消了炮塔,并减少载员数量,让战机更轻更快。

在整个第二次世界大战期间,这款“身轻如燕”的木制轰炸机出动近4万架次,投下10多万颗炸弹,仅有254架被击落,平均每2000架次行动才会损失1架,战损率只有一般轰炸机的1/3。蚊式轰炸机创造了英国空军轰炸机作战生存率的最佳纪录,成为英国人的骄傲,拥有“木头奇迹”(The Wooden Wonder)的美誉。

蚊式轰炸机的成功,与设计师充分考虑了战争的现实需要密不可分:飞机采用木制,保证了物资匮乏时代仍可以高效地制造;减轻重量,使其速度更快,能够躲避敌人的攻击。

这是一个充分体现设计学科特性的生动案例:设计有着强烈的目的性,而设计师需要考虑现实情况,在一定的限制条件下进行创作。这一点也使设计与艺术有了鲜明的区别。设计的目的是满足需要,而艺术的目的是表达艺术家对世界的看法。这一点从设计学科的发展历史中便能看出其中的渊源。

1919年,德国成立了世界上第一所完全为发展设计教育而建立的学院——包豪斯(Bauhaus),如图1.2所示。从此,设计这门体现人类聪明和智慧的“可爱”学科,才算得上是真正建立起来了。图1.2 包豪斯校舍

包豪斯首次将“理性思维”的观念注入了设计活动中,提出了关于设计的三个基本观点:

①设计是艺术与技术的新统一;

②设计的目的是人而不是产品;

③设计必须遵循自然与客观的法则来进行。

这些观点使现代设计逐步由理想主义走向现实主义,即用理性的、科学的思想来代替艺术上的自我表现和浪漫主义。

为了实践这个理念,包豪斯实践了许多前所未有且影响深远的举措。

①首次提出要为大工业生产而设计。包豪斯主动将学校和企业界、工业界联系起来,使学生能够体验工业生产与设计的关联。这样的做法,让学生能够设计出真正符合生产标准的作品,而避免了产出看起来美好却无法量产的作品。

②包豪斯奠定了现代设计教育的结构基础。包豪斯把课程分为对平面和立体结构的研究、材料研究和色彩研究三个方面,使视觉教育第一次比较牢固地建立在科学的基础上。在此之前,设计都是被划分在艺术的门类下面,设计本身也被认为是靠感性来进行创作的一项活动。

③包豪斯首次提出了“以解决问题为中心”的设计理念。设计是为了解决问题,这奠定了设计的本质。不论是设计一个水壶,还是一款手机应用软件(Application,App),设计师都是在为他人服务,在帮使用者解决问题。

包豪斯强调形式追随功能,强调突出功能,去掉不必要的装饰,例如灯具的功能就是用来照明的。下面这个例子生动说明了包豪斯的理念,如图1.3所示。图1.3 台灯对比

包豪斯“以解决问题为中心”的设计理念深深地影响了设计界。设计是理性和感性的结合,并以解决问题、满足人们的需要为目的。日本最大、最权威的综合出版社之一集英社编辑出版的《日语大词典》,对“设计”一词的解释是“考量作品或者商品的美和技能(功能)而构思出来的形态”。从这个定义里,可以看到设计是美和功能的结合。中国现代设计和现代设计教育的重要奠基人之一、美国设计教育最高学府——美国艺术中心设计学院教授王受之在他的著作《世界现代设计史》中写过这样一句话:“设计是为他人服务的活动。”日本当代国际级平面设计大师、无印良品(MUJI)艺术总监原研哉在《设计中的设计》一书中也有类似的表达:“设计的实质在于发现很多人都遇到的问题然后试着去解决的过程。”设计更倾向于是一种社会性的行为,设计师在用自己的巧思帮助人们解决普遍遇到的问题,而“艺术说到底是个人意愿对社会的一种表达”。图1.4所示为艺术家毕加索的作品《格尔尼卡》和德国著名品牌博朗(Braun)设计的留声-收音一体机,体现了艺术作品和设计作品的对比。图1.4 艺术作品和设计作品的对比

从上面的例子可以看到,无论是蚊式轰炸机还是台灯,设计师们都用精妙的创意满足了需要,因此它们都是优秀的设计。设计的目的是用设计方案来满足用户的需要,而不是单纯产出设计师认为美观的方案。这是设计过程中最重要的原则之一。在进行交互设计的过程中,它能指引设计师将精力放到解决问题上。具体到交互设计,它又有哪些特点呢?下面将进行详细的介绍。1.1.2 什么是交互设计

交互设计是近几年逐渐兴起的一个新词,它代表了一个全新的设计领域。交互设计是设计什么的?下面的例子可以给出答案。

1979年3月28日凌晨,美国宾夕法尼亚州哈里斯堡东南16km处的三里岛核电站2号反应堆发生了放射性物质外泄事故,事故导致核电站附近80km半径范围内的自然生态环境受到污染与破坏。这是人类发展核电以后首次引起世人关注的核电站事故。

事故发生后,调查组对事故原因进行了调查,发现操控员的处理以及控制室仪表盘的界面都存在严重问题。其中,控制室的仪表盘没有提供监视堆芯温度的仪表,监控阀门的指示灯只显示了电导管是否通电,却没有显示是哪里的阀门出现了问题。这样的设计使操控员在出现问题几小时后都无法确定问题发生的位置,导致问题越来越严重,最终发生了爆炸。

在这起事故中,控制室的仪表盘由于没有准确地显示问题的位置,导致维修人员对设备的修复无从下手,只能一点点排查,耽误了宝贵的抢修时间。在这个监控系统的交互设计方案中,缺少了对关键部件的监测反馈。这个糟糕的交互设计方案成为导致事故发生的主要原因之一。图1.5所示为早期核电站的控制室。图1.5 早期核电站控制室

与核电站缺少有效反馈的原理相同,下面这个手机App的例子,也很好地说明了设计良好的交互方案的重要性。当笔者在某手机App中某只股票的“交易”界面,输入了价格和买入的股票数量,点击“买入”按钮后,会出现图1.6所示的警告框。警告框中的文案只说明了操作失败,但没有说明原因。后来笔者几经周折,最终通过联系客服进行查询,才得知买入失败的原因是“身份证信息已过期,需要重新提交审核”。

与之形成鲜明对比的是微信登录页错误提示的设计。当用户第一次密码输入错误时,会出现图1.7(a)所示的提示;当第二次输入错误时,微信会提示是否需要找回或重置密码,如图1.7(b)所示。找回密码对于多次输入错误的用户,可以帮助其解决“密码总是输入错误”的问题,并且有助于用户完成登录操作,因此是合理的设计方案。图1.6 某手机App的错误提示图1.7 微信登录页面的错误提示

在处理错误信息这个问题上,更进一步的交互设计方案是“防患于未然”,例如支付宝转账功能的设计方案。

支付宝转账功能比较早期的方案如图1.8所示。用户点击图1.8(a)中的昵称,则进入图1.8 (b)所示的页面。由于用户对“转账”行为早就有了“输入转账金额”的预期,很多用户在这个页面会马上输入转账金额(例如“244”),随即点击“发送”按钮。对方则只能收到“244”这个文本信息。支付宝的设计师发现了这个问题,于是在用户输入数字后,会在输入框的上方出现“给对方转账244元”的提示,如图1.8(c)所示,点击则进入专门的转账页面。图1.8 支付宝转账流程(旧)

后来,支付宝的设计师更进一步进行了改进:用户点击昵称后,直接进入转账页面,从流程上直接进行了优化,避免了用户犯错,如图1.9所示。图1.9 支付宝转账流程(新)

上面三个例子,都是关于错误信息处理的。用户进行操作过程中,系统或程序在用户操作错误时给予及时反馈,能带给用户掌控感,提升用户体验。反馈的设计是交互设计中重要的一部分,但也只是交互设计内容的冰山一角。那么,什么是交互设计?交互设计都包括哪些内容?

交互设计中“交互”一词,英文是interaction,其中inter是“互相”的意思,action就是“行动”,所以interaction直观上解释就是“互相的行动”,也就是主体行动一下,客体再行动一下,彼此往复,你来我往,如图1.10所示。图1.10 交互示意图

交互设计即设计这一系列“互相的行动”,使用户能更好地使用物品,物品能更好地服务用户。在上面核电站的例子中,监控系统一直在监测核电站的各项指标,一旦有异常,就需要发出警告,这是监控系统的行动。但在这个行动中,缺少了对关键部件的监测,因此事故出现时无法发出警告,最终酿成大祸。“交互设计之父”艾伦·库伯(Alan Cooper)在其经典著作《About Face 4:交互设计精髓》(About Face 4:The Essentials of Interaction Design)里写道:“交互设计是设计可互动的数字产品、环境、系统和服务的实践(Interaction is the practice of designing interactive digital products, environments, systems, and services.)。”从这个定义我们可以看到,交互设计覆盖了内容丰富的领域,有数字产品、环境,还有系统和服务。在这些领域中,包含着大量人与另一个目标的互动。

由于交互设计本身覆盖了多个领域,所以交互设计与许多设计分支都存在重叠。其中,交互设计与人机交互的重叠区域最大,与工业设计、建筑设计、信息架构设计、视觉设计都有交集。本书主要介绍交互设计在移动互联网行业中的应用,它包含在交互设计与人机交互的重叠区域内,如图1.11所示。图1.11 用户体验领域和交互设计

交互设计是对人与数字产品、环境、系统、服务等如何进行互动的设计。这些互动的过程,主要发生在若干个节点上。以用户在ATM机取款为例,如图1.12所示。

用户插入银行卡并输入密码。(节点1)ATM机验证密码,询问用户操作何项目。

用户在ATM机上操作,给ATM机发出第一项指令。(节点2)ATM机执行第一项指令并给出反馈。

ATM机问用户下一项指令的内容。

用户在ATM机上操作,给ATM机发出第二项指令。(节点3)ATM机执行第二项指令并给出反馈

ATM机问用户下一项指令的内容。(节点4):……图1.12 操作ATM机

通过这些节点,ATM机一步步执行用户的指令,完成取款操作。而节点与节点之间的过程,系统需要让用户明白需要做什么,发生了什么,以便进行下面的步骤。交互设计师处理的就是用户与这些关键节点的互动,让用户知道自己现在所处状态、该做什么、操作之后有何种效果这三种关键信息,辅助用户完成任务。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所示。

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

如前所述,交互设计师的工作从接到产品需求就开始了。产品需求是对产品功能的描述,一般由产品经理提出。例如“短视频支持发弹幕”功能,就是一个产品需求。产品经理提出要开发某个功能,交互设计师在这个步骤中最大的价值,在于通过场景思维,将需求还原成用户在什么情况下会使用这个功能。这样做有以下两点作用。图1.15 交互设计必备技能(1)帮助设计师判别需求的真实性。什么是真实的需求?就是用户真的会使用你提供的功能或服务来满足自己的某些需要。举个例子,如果公司听说用户想要打孔机,于是就决定销售打孔机给用户。但用户真的是需要打孔机吗?我们来看下面这个场景。

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

从这个场景里可以看出:小美本质上需要的其实是把油画挂在墙上,显然“买个钻孔机”对她来说成本较高。借打孔机就成为更经济的方式——毕竟打孔机这种设备一年也用不上几次。再深入思考一下,小美挂油画需要征得房东同意打孔,还需要借打孔机,这些对小美都造成了一定困难。如果买来的油画直接附赠黏性强又方便拆卸的胶带,小美可以更方便地把油画挂在墙上,同时搬家的时候也能够顺利地拆走油画。这样的油画就满足了用户的需要,比普通油画更有竞争力。所以,买打孔机不是真实的需求,把油画挂到墙上才是。描述用户的使用场景,可以帮助设计师更了解用户,甄别出用户的真实需要。(2)有助于设计师分析用户目标,以便后续设计方案时选择合适的交互方式。用户目标是用户对操作后能够达到的期望效果的描述。例如,在i Pad版微信读书App的登录页面,设计师在普通的“微信登录”按钮下面,增加了“微信扫一扫登录”按钮。为什么需要这个按钮呢?首先,分析一下这里的用户场景。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1.请说说你对交互设计的理解。

2.系统学习交互设计,需要哪几方面基础知识?

3.如果要去互联网公司工作,一名优秀的交互设计师应该具备怎样的素质?第二篇 设计分析第2章 登堂入室——目标用户和场景

有一个设计优秀、价格亲民的服装品牌,

其目标用户定位在20~35岁的消费者。

这一年龄段的消费者时尚敏感度高,

但尚不具备购买顶级服饰品牌的能力。

由于目标用户定位精准,这一品牌取得了巨大的成功。

在互联网领域,设计师在设计一款产品之前,

也需要明确产品为哪个用户群体而设计。

不仅如此,设计师作为用户体验的“守护者”,

需要明白用户为什么要使用你的产品?

用户使用某个功能,最在意的是什么?

这一切都能通过不断还原用户的使用场景来找到答案。

人们常说,交互设计师要有同理心,“场景思维”就是帮助设计师理解用户的工具。2.1 确定目标用户

著名的美国设计理论学家维克多·帕帕奈克(Victor Papanek)认为,设计是为构建有意义的秩序而付出的有意识的、直觉上的努力。他认为设计有两个步骤。

第一步:理解用户的期望、需要、动机,并理解业务、技术和行业上的需求与限制。

第二步:将这些知道的东西转化为对产品的规划(或者产品本身),使产品的形式、内容和行为变得有用、能用、令人向往,并且在经济和技术上可行。

理解用户的期望、需要、动机是进行设计的基础准备工作,它为设计方案指明前进的方向,奠定成功的基础。要做到准确理解用户的期望、需要、动机,需要做到两点:一是需要明确目标用户是谁;二是需要运用场景的方法还原用户的使用情景,以便更好地理解用户的需要。本节介绍如何确定目标用户,下一节介绍场景思维。

目标用户是产品主要服务的群体。例如,同样设计一款手机,用户群体不同,设计的方案可能截然不同,如图2.1所示。图2.1 针对不同用户的不同设计方案

处于不同发展阶段的产品,可以使用不同方法确定产品的目标用户:

● 对于已经处于成熟期的产品,可以通过分析用户的属性和行为数据,得到目标用户的画像;

● 对于处于拓展期的产品,需要进行市场调研、竞品分析,根据公司策略明确产品的目标用户人群;

● 对于从无到有的产品,一方面有赖于产品经理对于产品的定位和嗅觉,捕捉潜在用户,满足他们尚未被满足的需求;另一方面也要通过市场调研,分析竞品来确定用户。

一般来说,公司中的用户研究员或者产品经理会确定产品的目标用户,交互设计师只需直接采用他们的结论就好。

目标用户确定之后,为了更形象、具体地描述出目标用户的特征,也为了让目标用户能够更有效地被项目成员了解,设计师可以使用“人物模型(Persona)”方法,将目标用户的形象具体化。

交互设计大师艾伦·库伯在他的著作《About Face 4:交互设计精髓》里提出:“人物模型来源于研究中真实用户的行为和动机。人物模型是‘合成原型’(Composite Archetype),建立在调查过程中发现的行为模式基础上。”库伯的描述中说明人物模型是“合成原型”,它指人物模型根据对用户的调查的结果,将目标用户群体用标签来描述,是一系列标签合成制作出的。因此,人物模型是将一群用户的特征集合而成的“虚拟人物”。

人物模型的本质是一个用以辅助沟通的工具,它能够帮助项目中不同角色的成员(如产品经理、设计师、运营人员、开发工程师、测试工程师)更好地理解目标用户。人物模型最大的价值,在于它把目标用户变得具体、凝练、易于认识和讨论。其实,在许多公司中,大家都有目标用户的概念,都清楚产品应该为目标用户的需要而设计。但“目标用户”是怎样的?有什么特征?在某种特定的情景下用户有什么需求?这些问题在讨论中往往会变成没有人能给出确切答案的疑问,讨论方案的效率和效果会因此大打折扣。

而人物模型通过使用一系列标签,创造了目标用户的“集大成者”。有了人物模型,项目中的成员在讨论某个功能时,就可以直接这样讨论:“目标用户李明是个‘数据控’,他肯定需要这些详细数据。”具体来说,制作人物模型有以下4个作用:

①提供设计基础,提升设计的效率;

②与产品经理、开发工程师和其他设计师讨论时提供依据;

③便于实施精准营销,分析产品潜在用户;

④业务经营分析以及竞争分析,为公司战略提供建议。

在实际工作中,应该如何确定目标用户的人物模型?这里为大家介绍人物模型四步法,具体内容如下。

1.调查用户

调查用户是指通过定性研究和定量研究的方法获得关于用户的想法、行为、数据等信息。定性研究是指在一群小规模、精心挑选的样本上进行的研究,通过研究者的洞察力、专业知识、过往经验挖掘研究对象行为背后的动机、需要、思维模式,其更多解决的是用户“怎么想”的问题。像用户访谈、焦点小组、卡片分类、日记记录等方法都属于定性研究的范畴。定性研究回答的是“什么是”“怎么样”,以及“为什么”等较为抽象的问题。定量研究是指对事物进行测量和分析,以检验研究者自己关于该事物的某些理论的假设。定量研究的方法有问卷调查、A/B测试等。定量研究回答的是某个具体的问题,如某个变量在7天内增加了多少。

例如,团队需要调查用户对某App金币商城的满意程度,分别用定性研究和定量研究的方法区别如下。

●定性研究:通过对用户进行访谈,询问“上次使用金币商城有什么体验”“上次使用时遇到了什么问题”等问题进行研究。

●定量研究:通过研究用户的3日留存、7日留存、人均金币消耗量等数据进行研究。

2.寻找关键变量

所谓关键变量是指用户在使用目标产品或服务时,导致其行为产生差异的核心因素。判断一个因素是否为核心因素,关键在于用户使用产品的目标和动机、过去/现在/未来的行为,而不是性别、年龄、地区等人口统计学特征。对于关键变量需要考虑以下5个因素:

●与目标产品、服务的关系;

●对目标产品、服务的观点及态度;

●相关竞品、服务的使用情况;

●使用相关产品、服务的情景;

●当前面临的问题或障碍。

例如,当设计师需要研究一款可穿戴设备的目标用户画像时,这些用户对于身体信息的监测的态度,以及对现有可穿戴产品的态度,都会对功能设计、交互设计有很大影响,因此在制作人物模型的时候必须调查清楚。

除了以上5个因素,还需要考虑一类关键变量:产品类型。举个例子,如果你的产品是有科技含量的产品,那么“对技术产品的使用程度”就需要纳入关键变量,例如:●对互联网的使用程度;

●对硬件产品的使用程度;

●对App的使用程度;

●对新技术的观点、态度;

●对硬件设备的操作水平。

关键变量确定之后,需要使用关键变量衡量表,表现出用户在这些关键变量上的特征。

调研可穿戴设备的关键变量衡量表示例如图2.2所示。图2.2 关键变量衡量表示例

3.数据归类

当团队通过第一步“调查用户”收集了足够的用户信息,也有了关键变量衡量表,下一步需要把用户的信息用关键变量表示出来,如图2.3所示。图2.3 在关键变量表上填上用户信息

用户信息分布较多的信息点,就是目标用户的标签。之后,设计师可以根据标签提炼出用户的目标和痛点。

4.形成人物模型图

最后一步是用一张图片,表现出设计师通过分析总结出的目标用户的特征,从而形成人物模型图,人物模型图展示的信息包括以下内容:姓名、照片、年龄、职业、所在地、工作状态、家庭状态、兴趣、做事情的意愿、目标、遇到的挫折、个人小传、对某类事物的态度等,如图2.4所示。图2.4 人物模型示例

需要注意的是,艾伦·库伯指出,对于同一个项目,人物模型最多只能做3个。对于一般的项目,一个主要人物模型就能满足设计需要。除了主要人物模型,还可以建立一个次要人物模型。产品的功能和设计,需要首先满足主要人物模型的需要。对于次要人物模型,只要在用户需要的时候能够找到功能的操作入口即可。关于这一点,在主次场景部分有更详细的介绍。2.2 场景思维

作为一名交互设计师,在确定了目标用户之后,下一步需要运用场景思维理解用户的期望、需要和动机。设计的目的是满足需要,只有先理解了用户的需要,之后才能想办法通过设计方案去满足。2.2.1 什么是场景

场景(Scenario)原是一个戏剧领域的词,意思是“剧情概要”,也就是用简短的话描述发生的事情。后来由玛丽·贝斯·罗森(Mary Beth Rosson)和约翰·M. 卡罗尔(John M. Carroll)两位设计师,在他们编写的《可用性测试:场景基础上的人机交互》(Usability Engineering: Scenario-Based Development of Human-Computer Interaction)一书中首次将该词借用到交互领域。他们提出,将设计工作的焦点从“定义系统的操作”转变到“描述什么人将使用该系统去完成其任务”。这是一个伟大的视角转变。在这之前,设计者总是在思考如何去定义人们使用的系统和应用程序,人们在拿到应用程序之后,需要去学习如何使用这些应用程序以完成任务;而“以场景为中心”的概念,则强调要以人的需求为中心,系统和应用程序要去帮助人们满足他们的需求。这也是计算机界以人为本的革命了。

DOS操作系统需要用户记住各种命令的代码(如输入“MD”,可以执行创建一个目录的命令),来对计算机进行各种操作。这很像十几年前的家用电器,用户需要通过阅读使用说明书才能学会如何操作。而苹果计算机的操作系统从用户角度出发进行设计,将操作变得简单化,用户可以不用太多的学习,就能掌握绝大多数操作,如图2.5所示。图2.5 DOS操作系统和早期苹果计算机操作系统

判断一个设计方案的好坏,最基础的条件之一是设计方案有没有满足需要。场景思维正是帮助设计师发掘用户“需要完成的操作”的最有效工具。如果一开始基础的方向就找错了,那么后来所做的一切,都只能是南辕北辙、缘木求鱼。

好的设计解决问题。交互设计是一门把抽象的需求转换为具象的界面的学科。而需求来源于用户在生活中遇到的各种问题。这些问题包含在一个个场景之中。设计师有了场景的思维,就可以更清晰地描述出用户的生活片段,从而确定用户的需求,并在此基础上用交互方案满足需求。

举个例子,某产品经理提出如下需求:

App添加“商品列表按照价格从低到高排序”的功能。

如果单纯只看这段描述,该描述定义了App中的一个功能,但作为设计师很难理解为什么需要设置这个功能,以及用户为什么需要进行排序操作。如果使用场景思维来思考:用户搜索某种商品,在列表页会列出一长串商品,而用户此时只想快速找到符合要求的那一个;有些用户在挑选的时候,会需要找出价格便宜的,此时排序功能就是用户的需求。通过还原用户的场景,设计师会更清楚地理解需求发生的环境,便于做出好设计。例如,沿着排序场景的思路,可以进一步思考:有这样需求的用户在我们的App用户里多吗?如果多,那么意味着用户经常需要进行排序操作,所以在设计的时候,可以把排序的入口设计得明显一些,更容易操作一些,方便用户更轻松地进行排序。2.2.2 描述场景的公式

既然场景思维很重要,那么设计师在做交互方案的时候,如何去描述一个场景?这里为大家提供一个公式:

场景=特定类型的用户(Who)在某时间(When),某地点(Where),周围出现了某些事物时(With What),萌发了某种需求(Desire),会想到通过某种手段(Method)来满足需求。

这个公式可以简单记忆为“条件需求公式”:目标用户,或者说人物模型总结出的用户,在一定的时间、地点,在出现某物的条件下,产生某种需求,通过某种手段来满足。

使用这个公式,可以将用户的生活片段进行“面面俱到”的描述,不会漏掉对设计有用的关键因素。例如使用该公式,描述某食材App用户的使用场景:

小美(用户)在周五晚上(时间),回家的地铁里(地点),收到了App设置的备忘提示(出现某物),想起了要购买周末在家做饭的食材(需求),于是打开某食材App(手段)进行挑选。

从这个场景来发掘,可以发现以下3个设计机会点:

①小美在地铁上,可能需要进行单手操作;另外手机信号可能不稳定,需要注意无网络等情况的提示;

②小美有周五购买周末食材的习惯,App在周五晚上推送的转化率会比较高;

③小美设置了备忘,说明她应该经常使用App购物,可以根据购买历史进行推荐。

通过使用“条件需求公式”,设计师可以将用户的实际情景具象化,并用要素将情景表达出来,从中发现设计机会点。2.2.3 场景的分类

生活中有很多场景,设计师在分析需求的时候,如何覆盖到完整的场景?这要从两大类场景入手:用户场景和硬件场景。其中,用户场景分为客观场景、目标场景和实际场景。然后针对每一种场景,找到主要场景和次要场景,如图2.6所示。图2.6 场景的分类示意图

①先从用户场景中的客观场景说起。客观场景就是用户在生活中遇到的真实情况的概括。客观场景用于发现新需求,也用于了解产品的用户。以打车这个场景为例,举一个客观场景的例子:

公司职员王先生(用户)18:00(时间)下班(出现某物),需要打车回家(需求),在公司门口找出租车(地点),可是一直找不到,最终步行2km到附近的商场才打到了车(手段),而且发现商场附近待揽客的出租车非常多。王先生觉得非常郁闷,“为什么资源不匹配呢”。

可见,客观场景是对用户真实遇到的情形的概括,而且特别强调用户遇到了哪些麻烦,或者有哪些需要没被满足。这些麻烦和没被满足的需要,也成为产品能够发力的地方。

②下面举一个目标场景的例子:

公司职员王先生(用户)18:00(时间)下班(出现某物),需要打车回家(需求)。王先生在17:50时,打开“滴滴打车”App可以看到公司附近有很多出租车,王先生输入出发地和目的地确认打车。30秒后出租车司机李师傅接单,王先生可以在手机上清晰地看到李师傅的车辆位置, 10分钟后王先生成功上车。到达目的地后,王先生用手机在线支付了打车费,开心地回到家陪女儿吃晚饭(手段)。

从上例可以看出,目标场景是描述用户使用某个产品,达成心中目标的过程。

③实际场景主要用于可用性测试。它是由用户在实际的参与式体验过程中测试目标场景,进行产品的测试及适用性评价。

以上三个场景,构成了设计师做设计时一个较为完整的流程:客观场景还原用户的真实生活片段,重点用于发现用户的问题;目标场景描述用户如何使用公司的产品来解决遇到的问题;实际场景用于对用户进行测试,验证用户是否能够顺利地完成操作,是否能够使用设计方案解决问题,如图2.7所示。

在实际设计工作中,运用最多的是目标场景,它也是其中最重要的。客观场景帮设计师描述用户遇到的问题,它为目标场景的确立打下基础,同时与产品经理讨论需求的时候使用较多;实际场景是用来验证设计方案是否真的解决了用户的问题,只运用在可用性测试里;设计师主要依托目标场景来进行方案设计。所以,描述目标场景是重中之重。具体的操作需要使用上面介绍的“条件需求公式”,然后通过下面两个方法进行。图2.7 完成设计流程中对场景的应用

①有目标地体验与自己产品类似的产品或者功能。在体验开始前设定一个目标,然后使用已有产品去完成这个目标。例如,如果设计人员要为一款电商App设计搜索功能。首先设定一个目标“购买300元以内耐克黑色运动短裤”,然后用这个目标体验淘宝、考拉、京东等App的搜索功能,观察竞品如何实现用户的目标,从而反向思考竞品对于目标场景的设定。

②寻找类似的场景,从而获得目标场景的信息。这里跟大家分享腾讯社交用户体验设计(Internet Social User Experience, ISUX)设计师的案例。设计师在为QQ空间的封面图做设计的时候,把“用户

试读结束[说明:试读内容隐藏了图片]

下载完整电子书


相关推荐

最新文章


© 2020 txtepub下载