5★ - 腾讯大讲堂4个步骤总结交互设计流程

图片来自 人人都是产品经理

文:乔莎莎 | 转自微信公众号腾讯大讲堂


良好的用户体验包含很多内容:服务、产品、参与者的感受等等,显然产品功能的强大、界面的美观并不能完全概括体验。体验还包含在产品与用户之间的互动、产品与场景的交互、产品对用户的情绪上的影响等等的细枝末节中。

交互设计是设计人与产品接触的动态时间轴上的每一次接触,从一开始的靠近、到产生共鸣、赞美,在每一个接触行为的背后都有需要关注的用户情绪、需要理解的用户认知。卡耐基 · 梅隆大学设计学院的John Zimmerman等提出了一个设计过程发现和汲取知识的流程框架:

Define(定义)、Discover(发现)、Synthesize(综合)、Construct(建构)、Refine(精炼)和 Reflect(反思)六个过程,这个流程的每一步骤都确立在前一个步骤的基础上。

认知用户、定义设计的过程总是千头万绪的,各个流程之间也是交叉进行的,商业设计的具体实践中很难真的遵循如此明确的流程。源于对具体设计问题的理解,大致可以将交互设计的过程分成四个步骤:


1. 识别需求,模拟场景(define、discover)

2. 理清设计机会、定义功能(synthesize、construct)

3. 交互流程与原型图(construct、refine)

4. 反思评估、规范化(refine、reflect)


明晰的设计模式帮助产品从概念构想到完成品的整套过程。正如绘画作品希望传达给观者情感内涵一样,交互设计也是借由产品与用户进行持续性的对话来创造产品的使用体验。




一. 识别需求,模拟场景


1.1 判别问题和机遇

设计师接触到需求任务的时候,先与产品经理进行沟通,搞清以下问题:

产品想做什么?

用户是谁?

用户的使用目标是什么?

产品商业目标和用户使用目标一致吗?


设计师应该抱持着怀疑批判的态度来审视产品的“愿景”,对于产品经理提供的商业目标与用户目标是否一致,是不确定的。为了具体量化这种不确定性,可以通过一些具体的问题:产品想要给谁做?功能对用户有用吗?有过类似的产品吗?有没有用户反馈?

通过询问潜在用户、产品经理、为产品提供服务的第三方、了解现有数据等等途径,设计尝试了解用户诉求和商业目标,综合多种信息渠道后,如果觉得产品的商业目标和用户来到产品的目标是不一致的,那么产品是否值得做就需要再讨论。

如果判断产品商业目标和用户目标一致,那么设计师需要做的就是在用户需求和商业利益之间取得平衡。为了能够更加深入的了解目标用户的行为,做出人本设计的产品,就需要构建典型的“用户行为模型”,也可以说是讲个典型的用户故事。


1.2 模拟典型场景故事

为了再现真实的用户需求,需要模拟出真实的用户场景。场景包含了用户可能会施行的动作,也包含用户随着时间的进行所产生的情绪体验等。

优秀的场景故事必须富含丰富的细节,帮助设计师更加准确的预期用户的行为。在故事的构建过程中,有两点可以帮助设计师丰富、细化故事情境:

故事中包含哪些元素;

故事有哪几个节点。


1.2.1  故事元素

故事元素指的是典型场景的什么用户、什么心情、什么行为之类,帮助故事实际情境描述的更详尽。下面列举了故事中的元素。



1.2.2 故事的节点

故事的情节按照时间轴的推进,一系列行为的演化着,有一些关键情节可以被挑出,拆分关键情节就可以组成故事脉络。在产品的故事中,这些关键情节就是用户与产品的每个触点,将故事划分为一个一个的节点,可以清晰的了解用户的行为步骤。

典型的故事场景的描述有两大好处:一是对场景的叙述,可以让设计师一开始就将注意集中在创造新想法、解决问题和实现用户目标上面,也就是“以人为本”,而不是技术如何实现;二是故事本身的时间、情节特性,非常符合交互设计的流程演化,可以对应时间节点上的过程描述。


1.3 数据验证

用户(Person)在具体场景(Case)下的行为(behavior)清楚了。如果想更清晰更全面的完善典型“用户画像”,或者解释一些举棋不定的地方,可以寻找收集项目相关的现有平台、其他类似平台的历史数据。分析数据背后的原因,对决定设计方向的非常有用。


第一阶段回顾:分析商业目标,描述了典型的用户模型、通过故事细化了用户的心理模型和行为模型。




二. 理清设计机会、定义功能


2.1 产品触达用户入口

在讲述典型故事的时候,设计师已经了解到用户实际场景中困难、痛点。然后开始设计之后,进行角色转换。

是不是应该在用户觉得最有痛点的地方提供产品的入口呢?

这样用户对于产品的接受度和尝试欲望是不是最高的呢?

如果用户错过了这个推送入口,那还有没有其他方式作为“触类旁通”的办法?


预先设想产品最好的使用场景,可以帮助产品最大程度的触达用户。


2.2 收敛和发散功能思维

调研也好,无限接近用户使用场景也好,都是为了建立“同理心”。“同理心”的体验帮助设计师搞清楚产品对于用户来说:

有什么用?

那些功能最有用?

产品初期的脑暴中,可能会有很多很多关于产品的功能想法。这个阶段可以通过一些方法来帮助设计师密集的探索新的想法:

广泛的绘制草图、记录想法

顺延故事脉络发散额外的线索

思维导图


这个阶段是创造性的阶段,一开始可能是杂乱五章的,通过不同的反思、归类、验证,可以逐渐归类出特定的方案。在筛选的过程中,典型的收敛方法是将诸多想法逐个剔除直到剩下最佳想法为止。往往这些筛选条件是由人性、技术、美感三个条件混合组成。

保证产品的简洁性、最重要功能的好体验是非常重要的。根据重要的设计节点筛选痛点功能,确定功能优先级。


2.3 主要功能任务

对于新设计的产品来说,用户执行任务是具象而零散的,设计师将任务分解和重组之后将用户行为归纳为主要任务,可以较为清楚而全面的囊括用户的需求、情绪、动机、目标和行为。

在整个主任务中,任务步骤被清晰的划分,不同的决策指向不同的任务流程。任务分析是衔接分析和设计阶段的关键步骤。


2.4 业务流程图

流程图综合表达主任务的过程和决策分析的情况。交互设计师使用业务流程图梳理清楚主任务的所有环节,展示产品入口、用户动作之间的关联,根据不同决策而产生的页面跳转。

业务流程图的合理性对于产品的整个环节包括后期开发都是非常重要的。创建流程图的过程中可以更清晰的了解系统所涉及的范畴,形成心智图景(mental representation)。



第二阶段回顾:交互设计师通过综合分析、发散收敛思维、提炼精化的过程,理清了流程中各个组件的关系,形成完整的产品图景。




三. 交互流程与原型图

业务流程图已经分类任务场景,下一步就是基于主要任务进行界面原型设计,原型设计要求需要准确的展示用户所需的信息,表达清楚各个页面的跳转关系。


3.1 主页面的方案

从用户任务出发,聚焦用户注意。对于一个产品来说,有一到两个不等的页面是产品最为重要的页面,这个页面展示了产品的主要功能,用户在这个页面执行主要任务。同时主要页面的用户体验也承担了产品主要体验的塑造。主页面作为设计的重点是应该被反复打磨的。

如何设计主页面:

主页面的内容是哪些?

内容的主次排序是怎样的?

根据不同的思路将内容按照主次顺序设计

多种方案的对比、演绎、进化

设计方案的过程中和后期都可以跟不同的人进行沟通、讨论,不同的人看待问题的角度不同,这样会启发新的灵感

是否带给用户产品的归属感和关怀体验。


上述几个步骤可以将界面零散的信息逐渐演化清楚为方案,在演化的最初不一定是标准的交互方案,可以是草稿的方式,快速的进行方案的推进演化。等待方案完善之后再用axure等界面软件清晰的表达构思。


3.2 支线流程的完善

主要流程中的主界面摆到清晰之后,辅助功能就会在方案形成过程中逐渐清楚。子流程的设计要注意在产品层级不要太深,在用户需要使用的情境适当出现。信息的表达上应该清晰完整,还是应该注意主次关系。


3.3 对细节的关注

对细节的关注和理解,才是获得更高级体验的方法。用户愿意使用尊重和理解他们的产品,也就是与产品产生积极的情感体验。想要满足这种共鸣性更高的体验也有一些方式可以遵循:

具有代入感,也就是产品符合用户角色;

沉浸感,执行某一任务的过程中用户可以进入一种专注的状态;

高度的可感知,操作、反馈、提示都是明确而清晰的。


第三阶段回顾:主界面的打磨,细节体验的关注都是塑造良好体验的方法,好的产品应该让用户感知丰富、情感投入。




四. 反思评估、规范化

反思和规范是设计的最后一步,这个过程可以从全局来审视自己的设计过程,找出需要改进的方法。规范化的案例可以更好的帮助后续别的产品的设计,节约时间和资源。


4.1 可用性原则的检查

文案的表达,错误的反馈,一致性原则,除去冗余的信息等等,这些都是在反复审视稿件中能够不断改进的地方。

下面是一些可用的信息架构原则和页面表达原则,可以作为流程图和页面检查的标准。

信息构架的原则:

一个页面一个主要内容;

个人信息&公共信息;

更少的信息更好;

同等级的内容应表现成并列的样子;

信息树应该尽量窄而浅,并且尽量保持平衡;

与现实生活经验相符。


页面表达原则:

更少的信息量更好。

结构化更易于理解。

信息的表达应该清楚、明确、直接。

操作可识别。

操作前,结果可预知。

操作时,操作有反馈。

操作后,操作可撤销。

让用户知道身处何地。

避免内容看上去象广告。

不提供多余的功能。

相同的功能,在不同的页面中应保持一致性。

措辞统一。


4.2 专家评审

在自己审视交互方案流程也基本顺畅合理的时候,可以将方案发给专家评审,这里的专家既可以指有更丰富工作经验的设计师,也可以是更加熟悉这款产品使用背景的产品经理,让他们了解设计方案,指出存在的问题,修改细节,更好的呈现。



4.3 开发跟进

在原型设计完成之后的视觉、重构、前端开发中,时时跟进,把控产品方向跟最初交互设计方案一致也是帮助用户体验的重要一环。

第四阶段回顾:全面审视设计流程,通过专家评审等方式改进方案,规范总结设计方法。




总结

我们平时所谈到的“用户中心”的设计流程大致包含了:策略和用户分析阶段(UCA, User-Centered Analysis,即策略和用户分析阶段)和设计实施阶段(UCD,User-Centered Design,即整合了设计、评估和实施、评估两个阶段)。交互设计其实恰好是贯穿了分析和实施阶段的桥梁,交互设计师无限的接近真实用户场景,寻找更加合理设计的答案,可以为产品的更好体验提供实实在在的帮助。

作者:乔莎莎,腾讯FIT金融市场部交互一枚,对探究人的认知、合理规划人机逻辑抱有极大的热忱,目前持续研究中,欢迎探讨,邮箱:1016415863@qq.com

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,793评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,567评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,342评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,825评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,814评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,680评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,033评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,687评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,175评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,668评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,775评论 1 332
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,419评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,020评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,978评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,206评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,092评论 2 351
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,510评论 2 343

推荐阅读更多精彩内容