案例解析，我是如何进行交互设计的

关注并将「人人都是产品经理」设为星标

每天早 07 : 45 按时送达

有些时候，交互设计师在其他岗位的认知中，仅仅是一个只会产出黑白稿、低保真原型的工种。如何改变这种认知呢？本文通过对实际案例的解析，希望能带大家了解，交互设计师在产出交互方案时，是如何进行思考与设计的，一起来看一下吧。

作者：背包流浪

题图来自Unsplash，基于CC0协议

全文共 3369 字，阅读需要 7 分钟

——————/ BEGIN /—————

交互设计师往往在公司中处在一个尴尬的位置，甚至绝大部分公司都没有交互设计师这个岗位，取而代之的是会画原型的产品、会画原型的运营以及会画原型的UI设计师。

所以交互设计师在其他岗位的认知中，仅仅是一个只会产出黑白稿、低保真原型的工种。

如何改变这类认知？

相比较去反驳，我认为倒不如通过自己的思考跟产出的方案，来证明自己的价值。

本次带来的案例，是运营产出的一套交互原型。

由于身后的视觉设计师在设计的时候一直怨声载道，总是抱怨信息不完整、流程不完整导致的无尽的返工。所以想基于这个案例，带大家一起来看看，作为一个交互设计师，在产出交互方案时，是如何进行思考与设计的。

Ps：可能本文提到的交互形式与内容并不是最佳方案，思考维度有限，也希望大家指出一起交流进步。

项目背景

根据运营同事的介绍，知道本次项目的目标是提升产品信息的透出，最终完成转化。

而用户行为的设计是通过解锁产品相关信息，了解产品相关内容，增加对产品的熟悉度与好感，最终购买产品。

为了便于了解，我们可以把它模拟成一个汽车销售的案例。

一般用户的购买行为肯定是基于对汽车各个性能的充分了解的前提下进行的，通过“定位”与“解锁”，让用户可以选择自己感兴趣的性能去了解。

而解锁的模块越多，客户对产品的性能越了解，客户购买的可能性就越大。

所以为了促进用户解锁，我们设置了积分奖励，通过解锁获取积分的刺激来提升解锁率，最终达到产品销售转化的目的。

以下是运营提供的交互原型（原型做了一些脱敏处理）：

我们分别从信息层级、交互形式、操作链路三个方面来解析当前的原型所存在的问题，同时结合对于运营目标以及用户行为的思考，给出一些优化建议。

明确页面信息层级

大部分非交互人员在制作原型时，对于信息的布局是没有过多思考的，往往都是哪里顺眼就放在哪，或者别人怎么放就怎么放，而信息布局对于交互设计师而言，是非常重要的一环，需要考虑信息的结构、信息的关联性、信息的重要程度等。

所以针对当前的原型，我们来看看都有哪些信息布局的问题。

1. 信息关联性

《设计师要懂心理学》这本书中有提到一个用户心理，人们往往认为相邻物体必然相关。

我们可以看到当前原型中，“您当前获得0积分”这个信息在两个按钮中间，按照信息关联性他似乎是跟两个按钮都有关联性，但其实她跟“立即购买”按钮没有任何关系，因此放在这个地方无疑违背了大家对于信息关联性的认知与理解。

2. 信息重要程度

我们一般在对按钮进行布局的时候，会将重要性相当的按钮摆放在一起，同时将直接促成转化的按钮突出显示，如视觉加强，放在右侧方便用户点击等。比如电商平台经常将“加入购物车”跟“购买”按钮并排摆放。

当前的原型中，虽然强调了“立即购买”按钮，但是由于“使用积分”的重要程度要弱，所以两个按钮放在一起就显得不是很合适，那该如何来进行布局呢？

在进行布局之前，我们可以分析一下业务跟用户在该页面的动机分别是什么。

对于业务而言，无论采取积分刺激或者别的方式，最终的目标肯定是转化，所以转化按钮一定是最重要的触点，重点突出；而对于用户而言，积分所带来的利益点是来到页面的目的之一，所以积分的展示与使用才是重点突出的。

所以用户来到页面的视线应该是先看到积分情况，促使用户解锁内容获得积分，最后才是根据解锁内容的了解完成最终的购买产品的转化。

选择页面交互形式

我们将主要页面进行信息层级的梳理与布局后，接下来我们就需要选择合适的交互形式来承载。

当前页面主要发生用户交互的地方在解锁内容获取积分上，我们拆分用户行为，分析在解锁前、中、后三个阶段，当前原型存在的问题以及优化的思路。

1. 解锁前

当前原型中，解锁前是通过图形“锁”来标识状态，但是锁也有禁止的意思，所以当用户进入页面时可能会面临两点疑惑：能不能点击以及要不要点击。那么该如何解决用户的疑惑呢？

针对能不能点击，除了告知视觉做出可点击的样式，我们还需要给与引导，一方面告知用户次此处是可以进行交互的，另一方面，也是促进用户点击，从而完成内容对用户的转化。

而关于要不要点击，就需要采取手段刺激用户发生交互。当前仅仅是展示待解锁的内容，显然缺乏刺激点，而原型中把获取积分放到解锁后才透出，可能解锁操作前就流失了一部分用户，那我们就需要把利益点前置，告知用户解锁能获取什么，刺激用户点击，增强用户解锁的意愿。

2. 解锁中

解锁中即用户点击进入次级页面阅读相关内容进行解锁，运营人员设置的业务规则是用户必须滑到最底部阅读全文才能解锁成功，弹出解锁奖励弹窗。

但是页面上并没有展示任何跟该规则相关的信息，客户按照过往认知，可能会觉得进入页面返回就会获得积分奖励，但是当用户返回并没有解锁成功时，用户会感到挫败与疑惑，可能会直接退出该页面。

那该如何解决呢？

从跟运营的沟通中我们得知其业务目的是希望用户多停留在该页面，让内容尽可能多的展示给用户。

那我们是不是可以换种思路，不需要用户滑到最底部，而是设置用户在该页面的停留时间，是不是也能满足？

我们可以进一步优化时间的设置，当前解锁是跳出到新的页面，但是沟通后发现，该页面的内容不会很多，那我们是否可以用弹窗的形式来呈现呢？这样不仅减少用户的频繁跳出，同时也可以增强内容与主页面的关联性。

因为用户发生交互的行为是解锁，为了保持跟用户预期一致，是不是可以加一个解锁的操作，这样就能让整个逻辑形成闭环。那么时间的设置就可以结合解锁按钮来进行交互呈现。

那如果业务或者客户就要求用户必须滑到最底部，我们该如何进行交互呢？

我们可以通过“显性”跟“隐性”两种方式来展开。

显性，顾名思义就是直白的告诉用户业务规则，比如用户首次进入页面，通过弹窗的形式告诉用户滑到底部即可解锁，但是带来的问题就是过于直白的指引可能导致用户为了获得奖励直接滑到底部而忽略内容本身；

而隐性就是让用户自己明白这个业务规则，我们可以通过定位用户在该页面的位置，结合进度来呈现，用户向上滑动则进度条前进，反之则保持不变，通过这种形式不仅增加了用户在该页面的停留时间，同时也增加了解锁的趣味性，但是需要考量的就是该交互形式的开发成本。

3. 解锁后

解锁后也就是用户返回主页面时候的交互，此时页面发生变化的主要是解锁按钮的状态（已解锁）以及积分数量的变化（增加积分），其中积分的增加可以满足用户的获得感并且激励用户继续完成解锁任务，那么该选择何种交互形式呢？

首先想到的是进度条的形式，通过积分获得进度来告知用户已经获得的积分以及还可以完成的解锁任务，用户解锁成功返回首页，进度条前进一格展示该节点成功解锁状态。

但是由于积分跟最终的购买转化并没有强关联，这样的交互形式会过多的突出积分的价值，导致用户将过多的注意力放在解锁获取积分上，所以此种交互形式在该场景下就不是很合适。

那么选择何种形式，既要增强用户的获得感，同时降低积分的权重？

我们可以尝试用计数器来展示，用户解锁成功返回首页，积分数字动态增加，由于是过性的交互，所以并没有过多的抢占用户的注意力，同时数字的增长又很好地展示解锁成功所带来的收获，满足此场景下的业务目标。

优化用户操作链路

交互设计师的主要职责，就是站在用户的角度优化操作链路，提升用户在产品中的用户体验。

在当前的链路中，用户解锁成功获得积分后，如果需要使用积分，需要返回首页进行操作，那么该如何优化这个链路呢？我们可以很容易想到在用户获得积分的弹窗加上使用积分的按钮，这样用户可以“所得即所用”，就不用再返回首页进行操作了。

总  结

以上，就是笔者根据过往的工作经验，分享的一篇关于日常交互设计思考的文章。后续也会继续分享自己在实际工作中，关于产品交互的心得与感想。

经验有限，欢迎大家批评指正与交流。

——————/ E N D /——————

产品经理培训｜产品运营培训｜企业内训服务

请在公众号后台回复「培训」了解更多

▼ 喜欢请分享&收藏，满意点个赞，最后点「在看」 ▼