交互设计的三个层次

3 评论 24225 浏览 139 收藏 14 分钟

交互设计是产品工作中的重要一节,一份优秀的交互设计文档可以高效地指导开发和测试展开工作,并减少不必要沟通,有利于提高产品的产出效率。

交互设计主要是将产品经理确定的需求进行细化,并以交互文档的方式呈现,指导开发和测试展开工作,也可以理解为开发使用的文档。下面我将从三个层面来探讨下交互设计,即:产品层、概念层、行为层。

一、产品层

产品层,主要是从正常的产品设计角度,即产品链角度来分析交互设计。

在用户体验五要素中,我们知道产品经理负责战略层和范围层,交互设计师负责结构层和框架层,视觉设计师负责表现层。

其中产品经理主要是从一堆需求中,通过需求分析找到低成本高价值的需求,并确定好范围以需求文档形式呈现,这里有产品需求和用户需求。

而交互设计师主要是分析已确定的需求,站在用户体验角度将其转化为可开发的交互文档,也可以简单理解为分析问题,解决问题。

1. 分析问题

我们可以对应交互模型和用户体验地图。

交互模型应该是一开始就要分析的,即用户、场景、目标;不同的用户在不同的场景下的不同任务目标,可以衍生出多个任务流程。其中用户分析,可以理解为用户画像,即模拟出几种类型的用户,并对其基本情况有个详细描述,后面针对某类型用户时便可以使用其虚拟名称。

用户体验地图,正常来说是需要找到一群真实用户来体验产品,并将真实的体验过程给描述出来。实操上可能并没有这么完善的条件,我这边的做法是利用同理心去模拟用户,体验通过交互模型分析梳理的任务流程,并将所思、所做、所感记录下来。

  • 所思,可以理解为每步操作前的思考,例如:看到登录页时,页面中的元素摆放会让我有哪些思考或想法。
  • 所做,可以理解为静态的时候,我会怎么操作,产品有所反馈后,我又会怎么操作。
  • 所感,可以理解为整个流程体验下来,具体的一些心里感受,好的或者不好的地方。

通过用户体验地图可以很容易的找到产品的一些隐含痛点,并通过持续的改进让产品的体验越来越好。

2. 解决问题

我们可以对应任务流程、信息架构、页面原型。

通过交互模型可以很容易得到任务流程图,我这边不喜欢将很多流程画到一张图里面,而是区分不同的用户画出在不同场景下的任务流程图,将复杂的流程图给拆分简单化,这样后面画原型时,逻辑更清晰,也不会遗漏一些页面。

信息架构图,主要是分析产品的需求文档,也可以先梳理出功能架构图,在此基础上对产品的信息架构进行设计,原则就是脉络要清晰。

有了任务流程图和信息架构图后,再来画页面原型,感觉就清晰多了。页面原型可以理解为需求可视化,即将产品的概念通过实际的产品设计图表达出来,需要交互设计师有一定的页面排版能力和美感,原型在不影响效率的前提下应尽量美观。个人感觉,这部分能力就需要一定的项目积累了。我之前由于有几年的网页设计经历,所以需求可视化的能力就直接转嫁过来了。

3. 方案落地

我们可以对应交互文档。

交互设计师最终的输出物就是交互文档了,我们一般画好了原型后就会拉个会议,对交互方案进行讨论。我这边的做法是按照设计流程来讲,依次按交互模型、用户体验地图、任务流程图、信息架构图的顺序先过一边,再针对具体的页面原型进行讲解。

这个地方需要根据公司的实际情况灵活安排了,我们的原则就是尽量让交互方案顺利通过,所以先讲概念性的分析产物。而原型是通过前面分析而来,不容易被全盘否决,更多的是具体页面元素内容或者摆放上的调整。我这边的经验是,开发也会将一些难点抛出来进行讨论。

交互评审通过后针对每页原型都要附上一些说明,然后将所有这些输出物集合打包,就成了一份详细的交互文档,也可以理解为开发文档。后面会专门写一篇文章来描述交互文档如何来写。

我个人的想法是,产品经理输出的需求文档就不用给开发看了,后面开发和测试都统一以交互文档为依据,有需求变更或者开发难点反馈等,交互文档需要跟进,并附上修改时间和记录,作为详细的查阅资料应用于整个产品组。

4. 优化

我们可以对应数据分析、用户反馈、可用性测试。

数据分析,主要是产品上线后,用户的一些使用数据,我们拿到这些数据后,可以分析出一些真实的用户行为。

用户反馈,就是用户使用产品后的一些反馈,有好的也有不好的,例如:APP上线后,都会有一些用户的吐槽等。我们需要从众多反馈中提炼出可优化的用户需求,此处有个原则:不要让小概率事件影响大概率事件。

可用性测试,主要是模拟真实用户去体验测试阶段的产品,并将一些问题进行记录。这里可以请具有代表性的用户或者公司同事来体验,也可以自己去体验。

二、概念层

从概念上来说,交互设计是指:帮助用户更好地使用产品,达到用户目标,并在这个过程中有愉悦的感受。我们可以提取出“更好地使用产品”、“有愉悦感受”。

1. 更好地使用产品

更好地使用产品,我们对应认知和反馈。

认知,简单说就是一看就明白,会用。一个复杂的界面,第一次使用时用户可以很快上手,这样我们就认为拥有好的认知属性,可以节省很多用户思考的时间或者说节省用户的认知资源;一个产品如果复杂的界面都有这种认知属性,整个产品就不会太难用,可以节省很多培训用户的时间。

反馈,简单说就是操作顺畅,容错。每次操作界面时,系统都能给出很友好的反馈,对于很复杂的流程,用户也能很顺利操作,最终达到自己的任务目标;用户有一些错误的操作,产品通过合理反馈可以避免用户去犯错。

这样的一款有好的认知和友好反馈的产品,对用户而言,应该是用起来很舒服的。我们在产品设计时考虑更多点,做的更多点,用户用起来就更简单些,更舒服些。

2. 有愉悦感受

有愉悦感受,我们对应体验过程,即操作简单、界面美观。

操作简单,一款用户体验好的产品,用户在使用时,有愉悦的感受是必然的。这里我们可以去关注交互层的情感化设计,一个复杂的流程,每一步的衔接,每一步的转场动效,在用户完成目标的前提下,有更愉悦的精神体验。

例如:反馈时的方式,哪种体验更好;界面切换时,需要使用哪种动效等。

界面美观,这里主要是针对UI设计,视觉层的情感化设计。使用一款界面很漂亮的产品,在满足好用的前提下,有更多的愉悦感受也是必然的。

例如:一些报错页面的情感化设计,可以抚慰用户的焦虑;引导页的情感化设计,可以降低用户使用产品的难度等。

三、行为层

交互从广义上来说,是设计人与物的互动、人与人的互动、人与环境的互动。从侠义上来说,就是人与物的互动,而且这个物指产品界面。我们希望设计用户的行为,让用户按照我们的商业目标来使用产品。用户是难伺候的,我们的实操是通过设计物的行为即界面的行为,来影响用户的行为。

简单说就是——设计物的行为,影响人的行为;收集用户真实的使用行为,反过来决策产品行为应该如何设计,这样形成了一个良好闭环,不断的设计行为,达到更好的用户体验。

用户有很多:潜在的、实际的等,对于低动机低能力的用户,在此不考虑。

1. 引导,高动机低能力

对于高动机低能力的用户,我们的关键是提升用户的能力。

用户对我们的产品有很高的使用动机,无奈缺乏使用能力,这个能力可以理解为用户的负荷过重,理解能力不够;我们要提高用户的能力,自然就是降低用户负荷,降低产品的理解难度。

这类用户,我们只需要去引导他们,让他们跟着产品设计好的行为,一步步走,例如引导页,新功能的引导助手等。

在生活中,有个大家很熟悉的例子:贷款买房。

买房属于大件消费了,一般人缺少全款买房的能力,银行推出的个人贷款买房产品,就可以理解为是提高了购房者的购房能力,然后银行可以获得利息作为利润。其他的产品,例如贷款买车,花呗,借呗等都是一类的,都是提高用户的购买能力。

2. 提醒,高动机高能力

对于高动机高能力的用户,我们的关键是提醒。

一个好的产品,知道的人太少,导致用户量不高,其中很多高动机高能力的用户也错过了。生活中,常见的宣传手段是广告,提高曝光度,让大家都知道这款产品,对于有高动机高能力的,一点点提醒后,自然就会成为产品用户。

3. 激励,低动机高能力

对于低动机高能力的用户,我们的关键是激励。

用户缺少足够的刺激,可能拥有很高的能力,但是不会去用你的产品,我们要做的就是激励用户,一些好的广告也可以达到这个目的。

例如一些豪宅的广告,可以吸引到一些富豪;一些高端的手机广告,可以吸引到一些成功人士等。

四、总结

针对B端和C端的补充说明:

B端产品,我们必须以业务目标为前提,深挖不同用户不同场景的任务流程,提高用户的认知能力;提高产品的反馈能力;提高产品的智能性,有良好的感知和预见。

C端产品,我们必须以好用好玩为宗旨,深挖用户的愉悦感,然后通过设计产品的行为来影响用户的行为。

 

作者:D.cheerful,微信号:dcf8859,武汉地区野路子高级交互设计师,7年B端产品交互设计经验。

本文由 @D.cheerful 原创发布于人人都是产品经理。未经许可,禁止转载

题图来自Unsplash,基于CC0协议

更多精彩内容,请关注人人都是产品经理微信公众号或下载App
评论
评论请登录
  1. 写得真的很好,希望分享一下交互与设计那一块~

    来自广东 回复
  2. 受益匪浅!请问B端产品交互设计,有具体的规范吗?作者能否分享一下关于B端产品交互规范的文章

    来自广东 回复
  3. 受益匪浅

    来自安徽 回复