IAMUE
  • Home
  • 文章分类
    • 交互
      • 从零开始学交互
      • IxD案例
      • 微信热点
    • UXD
    • Wireframes
    • GUID
    • PM
  • More
    • AID
    • 资源下载
    • 作品集
    • 电子书:《从零开始做交互》
    • Sketch 4.9 - Sketch全系列免费下载(更新Sketch4.9)
    • 淘宝手机H5版UX移动交互设计规范
    • Axure基础入门
    • 隐私政策

实例分析:运营活动项目中交互设计的4大维度

Catherine • 2017-04-30 04:07 • 交互设计

文章以作者最近做的一个会员卡绑定激活的运营活动作为案例,总结了交互设计中的一些“套路”。我:这是什么个需求?
pm:一个会员卡激活绑定的流程页。
我:会员卡是什么东西?
pm:这是一个实体卡,是我们平台用户升级为会员用的,上面有logo,卡号和密码图层我:这卡是怎么来的?
pm:平台通过线下运营活动给平台老用户进行的福利或者用户进行购买获得。
我:会员卡有什么用?
pm:激活后可以将帐号升级为会员(类似qq会员那种)
我:用户要怎么才能激活?
pm:通过扫描会员卡后面的二维码来进行激活。
我:激活后又会怎样?
pm:激活后用户升级为会员,能享受各种xxxxx牛逼的特权。
我:为什么要做这个需求?
pm:让我们平台用户能够升级为会员,然后就…….
我:额……


文章以作者最近做的一个会员卡绑定激活的运营活动作为案例,总结了交互设计中的一些“套路”。

实例分析:运营活动项目中交互设计的4大维度

大家都知道,运营类app会经常做各式各样的运营活动,面对不同的活动类型,会有不同的需求和用户目标,怎样能够快速理解需求并做出逻辑清晰的交互方案,下面以最近做的一个会员卡绑定激活的运营活动作为案例来总结一下交互设计的那些“套路”:

首先,接到这个需求时,产品给了个简单的原型:

实例分析:运营活动项目中交互设计的4大维度

这是什么鬼?

大概看一下原型,可以看到有三个承载页面,第一步是要输入手机号和验证码,第二步输入卡密,最后一步验证成功,进行下载。咋一看一头雾水,这貌似是一个激活卡的流程,为了更加精准地了解产品需求,于是找到产品直接进行需求沟通(沟通前需要去思考用户场景和每个细节):

我:这是什么个需求?

pm:一个会员卡激活绑定的流程页。

我:会员卡是什么东西?

pm:这是一个实体卡,是我们平台用户升级为会员用的,上面有logo,卡号和密码图层

实例分析:运营活动项目中交互设计的4大维度

我:这卡是怎么来的?

pm:平台通过线下运营活动给平台老用户进行的福利或者用户进行购买获得。

我:会员卡有什么用?

pm:激活后可以将帐号升级为会员(类似qq会员那种)

我:用户要怎么才能激活?

pm:通过扫描会员卡后面的二维码来进行激活。

我:激活后又会怎样?

pm:激活后用户升级为会员,能享受各种xxxxx牛逼的特权。

我:为什么要做这个需求?

pm:让我们平台用户能够升级为会员,然后就…….

我:额……

好了,现在已经大概了解了项目需求,先出个一版交互看看:

实例分析:运营活动项目中交互设计的4大维度

额,感觉就是把产品原型稍微优化重新排个版而已,如果这样就算做交互了,那也太简单了,这个时候需要更加深入地思考和分析:

  • 上面的步骤流程有没有问题?第一步就要输入手机号?
  • 头部的广告是什么?跟激活卡有什么关系?会不会影响用户正常激活流程?
  • 按钮的文案是不是有问题?提示文案是不是太简单?用户是否看的懂?

……

从交互设计三要素重新梳理整个逻辑流程:

1、目标用户:大部分平台普通用户(非会员用户)和少量非平台用户,通过某些渠道活动营销或自己花钱购买到实体会员卡。

2、用户目标:希望用卡能够快速进行升级会员,然后可以享受各种xxxxx牛逼的特权,然后可以买各种便宜的东西等等。

3、使用场景:用户拿到会员卡后,看到卡背面有二维码,用户下意识地用微信去扫一扫,这个时候就要去思考,用户扫完二维码后出现的页面的心理预期是什么?难道应该是像产品原型里面那样直接出现输入手机号和验证码吗?仔细想想是不符合用户心理预期的,其实用户更希望看到关于卡详细的信息,以及这个卡怎么样一个激活流程,让用户提前看到激活的步骤和操作会让用户有更好的心理安全感,另外如果能让用户直接看到升级会员后能够带来哪些好处能够享受哪些特权会更加促使用户进行升级会员的操作。

分析了这么多,突然思路就清晰一些了,现在我们再重新优化一下交互,就当作第二个版本吧

实例分析:运营活动项目中交互设计的4大维度

嗯,现在看起来是不是页面结构清晰多了,用户通过扫描二维码进入后可以看到大大的标题“特奢汇会员卡激活”以及副标题“升级超级会员,尊享会员8大特权”从标题上就告知用户这确实是会员卡的激活流程,以及升级会员会享有8大特权,符合用户的心理预期。标题下面一块滑屏区,展示着升级会员后会享有的一些特权和好处,这个地方也是为了让用户更好地了解会员的好处并促使用户进行升级的诱发剂。滑屏区下面的步骤拆分区域也是为了更好地让用户感知到整个流程和需要操作的步骤。

看到这里感觉这版应该没有什么问题了,正当我要定稿的时候,为了确保没有遗漏什么重要的细节,还是要再仔细思考一下:

  • 页面流程是否有问题?是不是能够更简化?
  • 页面是否清晰明白?用户是否能够看的懂?
  • 用户当前的心理预期是什么样的?需要引导用户怎么操作?
  • 用户为什么要进行这个操作?用户的目标是什么?
  • 还有没有更好的方案?

……

不停地问为什么,同理心的目的就是让我们能够站在用户的角度去思考用户的心理和其行为模式。

抱着一定有更好的方案的思路才能不断突破:

实例分析:运营活动项目中交互设计的4大维度

优化后的思路是把特权滑屏区域去掉,将这里做成了实体卡样式。

为什么要这么做?还是要回到用户和场景本身,我们这里的主要用户群体是非会员用户,对我们的产品和平台有一定的关注和了解,能够接受花钱购买会员卡进行会员升级,说明该用户已经提前详细了解了平台会员所有的特权,并且有足够强的动力去完成会员卡激活等一系列流程,所以这个地方再次强调有哪些会员特权就显得意义不大。

考虑到用户是通过实体会员卡扫描二维码而进入的页面,所以在页面形态上面通过高度还原实体卡样式来展示,通过用户手中的实体卡和界面里面的卡来形成会员卡帐号的互通。当用户输入密码时,上面卡密区域也会同步进行密码输入的联动。

这样设计的好处就是能够让用户快速地进行场景带入,用户第一眼看到就很清楚地知道需要做什么操作,模拟实体卡设计符合用户当前的使用场景和心理预期,能够与用户产生情感上的共鸣。

最后再整理优化一下交互流程,添加细节描述和异常态:

实例分析:运营活动项目中交互设计的4大维度

好了,到目前为止交互的工作算是完成了,接下来就是视觉设计师的工作啦~

实例分析:运营活动项目中交互设计的4大维度

最后总结一下,在处理运营活动类交互设计时(其实适用于大部分交互设计类型)一般通过下面4个维度来分析:

  1. 用户:是什么样的人在用你的产品,这些人有哪些特点,有哪些诉求,用户画像越细越好;
  2. 目标:用户的目标是什么,用户想得到什么,能够给用户带来什么样的价值。
  3. 场景:场景化设计,考虑用户真实的使用场景,这里分为内部使用场景和外部环境场景等,针对不同的场景才能做成符合用户心理预期的设计。
  4. 流程:考虑用户在使用过程中在各个场景下分别会产生哪些行为流程,怎样优化用户流程,怎样避免用户犯错并给出友好的反馈等等。

总之,多问一些为什么,多思考这样做的原因,可以通过交互设计七大定律、交互设计三要素以及5W1H规则等交互方法来进行实施和验证。

 

本文由 @小米渣和大冬瓜 原创发布于人人都是产品经理。未经许可,禁止转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/21943/

logoVR交互交互设计产品产品经理原型场景微信案例分析沟通用户用户场景用户目标视觉视觉设计设计设计师转载运营运营活动
赞 (0)
CatherineCatherine
0
生成海报
运营设计常用“套路”拾趣(附实战案例)
上一篇 2017-04-30 03:15
【交互基础】系列之解析移动端导航设计模式
下一篇 2017-04-30 05:00

相关推荐

  • 弹窗设计的5条基本原则 交互设计

    弹窗设计的5条基本原则

    当你将弹窗设计 及使用得恰到好处时,它们就会是非常有效的用户界面元素。它们能帮助用户快速且便捷地达成目标。然而当错误使用时,弹窗却会困扰你的用户。学会如何设计弹窗,会帮助你在使用时避免那些可能对用户造成的困扰。

    2017-05-22
  • 面向未来,UX路在何方? 交互设计

    面向未来,UX路在何方?

    译者感言:面向未来,要么突破,要么随波逐流。我们的技能和职责不应该局限在职称描述上。产品设计是界面设计更高层的拓展和思考世界就是你所塑造的模样。成为变革者而非跟随者。 —— Alex Osterwalder

    2017-05-17
  • 【交互设计留学】作品集是怎么样的?

      美国交互专业作品集侧重点是一个方向很多的专业,如果学生偏重界面、视觉、解决方案方向,那么作品集要注重调研,以及数据分析,数据展示、解决方案等内容。如果学生是侧重多媒体,交互装置方向,那么作品集要…

    交互设计 2016-05-08
  • 交互案例实战!三个按钮背后由小见大的交互思考 交互设计

    交互案例实战!三个按钮背后由小见大的交互思考

    @窒息红Leon :初入交互设计工作,最常见的需求就是——放按钮。放按钮看起来是超级简单的事,无非就是设计按钮的样式、摆放按钮的位置、确定按钮的状态与反馈等,但殊不知其『麻雀虽小,五脏俱全』,小小的按钮设计…

    2015-09-18
  • APP细节打磨绝招 “微交互动画” IxD案例

    APP细节打磨绝招 “微交互动画”

    著名魔术师 Dariel Fitzkee 曾经说过:“魔术是表演和细节的艺术。”而交互设计同样是如此。设计师大多能够很好的控制设计的大方向,但是细节处理不当的话,会让优秀的设计方案功亏一篑,要不怎么说“细节当中藏有魔鬼”呢?也正是因此,那些精心设计的微交互会让用户体验显得精巧而到位。

    2016-09-08
  • 微信热点

    智能窗帘:场景化智能应用 让用户体验“懒”生活

    科技总是带给我们惊喜。智能家居不再是一个研发层面的概念,在日常生活中已经越来越普及。智能窗帘是智能家居系统中常常被忽视,却又见微知著的家装部分。智能窗帘无需手动,一键掌控家居空间的透光度,智能防紫外线、隔音隔热和保温环保,给用户细致的关怀。智能窗帘的场景化智能应用,让用户体验懒惰带来的享受。冬天清晨,想打开窗帘让阳光温暖房间,却又懒得起身离开暖被窝,使用智能窗帘,应时自动打开,敞开度适宜,光线强弱刚刚好,惬意的在阳光中醒来。炎热夏日,离...

    2018-02-25
  • 微信热点

    【STARCAST】用Sketch表现不了的"孝敏"清纯日常画报

    ——还没关注?点击上方蓝字——大家好。STARCAST的家族们!!!!!!我们孝敏终于携Sketch回归了,这是她的第4次STARCAST!如果觉得我们孝敏已经展示了她的全部,那你就错了!她还有很多都没有展示给大家哦!今天就为大家送上,脸也没法用Sketch来表现,身材也没法用Sketch来表现的孝敏隐藏的一面,就像日常生活一样的画报,就像画报一样的日常生活照!这个秘密只告诉STARCAST 家族的大家哦,不是秘密>.大家已经开始紧张了...

    2018-03-02
  • 微信热点

    【用户体验】从了解用户的注意力开始,创造更优秀的用户体验

    【点击上方蓝字↑↑↑关注「艺恋优梦」获得每晚推送】刚下班回家,今天又没时间写教程了。。。委屈这是一篇源自心理学家和 UX设计师的关于人类注意力研究的文章。在产品团队中,用户体验设计师的工作是输出高可用性、易用性的可交互数字产品。当我们在设计这些产品的时候,我们花费了大量的时间来探索不同的研究方法,了解不同用户的行为、习惯和需求。对于绝大多数的用户而言,在行为模式和心理结构上有着相似的地方,只要有意识地探索,我们能够更好地了解人类的认知过...

    2018-04-04
  • 微信热点

    解析「交互设计七大定律」在设计中的应用(上篇)

    交互设计之父阿兰·库珀说过这样一句话:“除非有更好的选择,否则就遵从标准”;在交互设计领域中,有很多被时间和前人验证过的设计法则,这些法则是从用户的行为逻辑中总结出来的,掌握这些法则能让我们迅速有效的完成自己的设计,接下来,笔者通过一些实例来解析下这些原则在设计中的应用~由于文章有点长,影响阅读体验,本文将分为上下两篇来发~一费茨定律(Fitts’ Law)1、费茨定律(Fitts’ Law)简介费茨定律是由保罗·费茨(Paul M. ...

    2018-02-03
  • 交互设计

    用户体验要考查的十个原则

    用户体验是个筐
    什么都能往里装
    ——李白

    2017-05-27
  • UED书单
  • 微信精选
  • 投稿说明
  • 赞助

Copyright © 2024 WPCOM 版权所有 粤ICP备000000000号 Powered by WordPress