演示|一个交互设计师从接收需求到产出的过程

从接收需求到产出?这过程中到底经历了什么?不妨来阅读本文作者的文字,一起来了解了解吧~【需求概述】
商品,增加商品类型,分为普通、赠品两种。赠品可下单购买,也可根据订单金额及对应代理级别配赠率赠送。可按照代理级别,设置对应级别的配赠率。当代理下单购买普通类型或赠品类型商品,配赠条件满足时,在支付订单前提供选择赠品操作,代理可选择配赠金额范围内的任意赠品,也可不选择;选择赠品,并支付成功后,对应订单增加配赠商品信息。
注:配赠金额=订单面价金额×对应等级配赠率。目标用户:某护肤品牌微商代理
年龄:18-40占绝大多数
性别:女性占98%
职业:微商
设备:iphone及以上
场景描述:某天,代理a在清点仓库库存的时候,发现最近热销的某品牌商品库存都不多了,想着,到时候缺货会影响自己的销售及客户的满意度,暗想着,要再进些货才行,于是她对库存不足的商品进行了一下盘点,盘点完毕后,她拿出手机,将需要订货的商品一一加入购物车,加入完毕后,她核对了一下商品的金额,正准备点“支付“按钮进行付款,忽然看到付款按钮上方有一条提示,说”还差500元就可获得免费赠品“,她心一动,反正要买,只要加500块钱,就能免费获得赠品,有何不可?于是她当即便在某一商品下面增加了数量,满额后,提示文字就变成了”可获得免费赠品“,确认金额后,她立即点了支付按钮,来到确认订单的页面,快速浏览了一下自己的收获地址及信息,便赶紧看获得什么样的赠品,果然,在支付的上方又看到了配赠说明的提示,提示我”选择赠品“(这里说明一下,之所以将提示语都放在同一位置,是为了让前面界面的视觉路径在同一水平点上,使页面结构更整洁),点击进入”选择赠品“界面,参照页面给出的赠品金额提示,选择了想要的赠品,由于选择的赠品太多,从上下拉到下浏览起来效率太低,于是她又点击了按钮”已选赠品“进行复核了一遍,确定完毕后,回到确认下单的页面,便满意的点击了”支付“按钮,发现金额与未选赠品前的金额一致,便放心的提交了订单,订单支付完毕后,引导代理来到了订单列表页面,上面还特意标明了”含赠品“字样提示,a点击进去再次看了一下所购的商品及赠品,准确无误会,抱着愉悦的心情关闭了应用与手机。
”1、商品列表及商品详情,赠品类型的商品须显示对应图标;
2、赠品类型商品同普通商品一样可正常下单购买;
3、购物车,根据代理当前所选商品的总面价金额及当前代理对应配赠率,如果配赠金额不为0,则显示相应配赠金额及提示信息(若当前配赠金额暂不足以购买系统当前上架的任意赠品,则显示提示信息:“还差××就可获得免费赠品”;若当前配赠金额可购买系统当前所有上架赠品中的任一赠品时,则显示提示信息“可获得免费赠品”);如果配赠金额为0,则不显示相应配赠金额及提示信息。
4、确认订单界面,若当前配赠金额可购买系统当前所有上架赠品中的任一赠品时,则提供选择赠品操作项。未选择赠品时,操作项显示配赠金额、及“选择赠品”文案。已选择赠品时,若配赠金额-已选择赠品的总面价>0,操作项显示“已选择××元赠品,还可选择××元”;若配赠金额-已选择赠品的总面价=0,操作项显示“已选择赠品”。点击操作项进入选择赠品列表。
若当前配赠金额暂不足以购买系统当前上架的任意赠品,则不提供选择赠品操作项;
5、选择赠品列表,列表显示当前配赠金额可购买的所有已上架的且库存不为0的赠品类型商品,用户可点击选择,也可取消选择,当前选择的赠品总面价金额=配赠金额时,不可再继续选择更多(若再点击选择赠品,则提示“不能再选择更多了”);提供显示选择提示信息“还可选择××元赠品”(××为配赠金额-已选配赠商品总面价)、“查看已选赠品”操作、“确认”操作。
点击“查看已选赠品操作”,可弹出浮框列表显示当前已选择的赠品信息。浮框提供关闭按钮,可点击关闭浮框;
点击“确认”操作,确认当前已选择的赠品信息,返回确认订单界面。
6、个人中心,增加显示当前代理的配赠率信息。
7、订单列表,若对应订单含有配赠商品信息(注:如果只是正常下单购买的赠品类型的商品,则同普通商品订单。此处指的是确认订单时根据配赠金额范围免费选择的配赠商品),则显示“含免费赠品”标签;
8、订单详情,若对应订单还有配赠商品信息(同7),则列表显示用户选择的免费获赠的商品信息(注:正常下单购买的赠品类型商品,显示在同普通商品位置。这里只显示确认订单时选择的免费配赠商品),并显示总的免费配赠金额信息。


从接收需求到产出?这过程中到底经历了什么?不妨来阅读本文作者的文字,一起来了解了解吧~

演示|一个交互设计师从接收需求到产出的过程

项目背景

公司在二月初新上线了一个微商订货系统,由于是V1.0版本,而且还是试运营阶段,所以当时产品经理的精力都放在了搭建V1.0版上面,直到运营总监验收的时候,又提出了一个新的需求,经过产品经理与运营总监的沟通之后,我接到了一个V1.01的需求文档,内容如下:

【需求概述】

商品,增加商品类型,分为普通、赠品两种。赠品可下单购买,也可根据订单金额及对应代理级别配赠率赠送。可按照代理级别,设置对应级别的配赠率。当代理下单购买普通类型或赠品类型商品,配赠条件满足时,在支付订单前提供选择赠品操作,代理可选择配赠金额范围内的任意赠品,也可不选择;选择赠品,并支付成功后,对应订单增加配赠商品信息。

注:配赠金额=订单面价金额×对应等级配赠率。

交互设计师收到需求后,进行了深入解读,并通过跟产品经理经过口头的沟通后,做了一个业务需求的分析,如下:

  • 业务需求:增加商品满额配赠功能,根据代理等自行选择满足条件的配赠商品
  • 业务目标:代理能直接线上快捷直观的选择满足条件的配赠商品,节省仓管人员二次下单核对时间
  • 业务目的:提升业绩,利用赠品,刺激代理提升单笔订单金额
  • 衡量指标:单笔订单金额提升率
  • 用户行为:选择满足条件的配赠商品

拿到业务需求,我们需要做一个使用场景的分析,为什么呢?是为了梳理流程、判断逻辑啊,看一下自己的预想有没有漏洞或不合理的地方。

目标用户:某护肤品牌微商代理

年龄:18-40占绝大多数

性别:女性占98%

职业:微商

设备:iphone及以上

场景描述:某天,代理a在清点仓库库存的时候,发现最近热销的某品牌商品库存都不多了,想着,到时候缺货会影响自己的销售及客户的满意度,暗想着,要再进些货才行,于是她对库存不足的商品进行了一下盘点,盘点完毕后,她拿出手机,将需要订货的商品一一加入购物车,加入完毕后,她核对了一下商品的金额,正准备点“支付“按钮进行付款,忽然看到付款按钮上方有一条提示,说”还差500元就可获得免费赠品“,她心一动,反正要买,只要加500块钱,就能免费获得赠品,有何不可?于是她当即便在某一商品下面增加了数量,满额后,提示文字就变成了”可获得免费赠品“,确认金额后,她立即点了支付按钮,来到确认订单的页面,快速浏览了一下自己的收获地址及信息,便赶紧看获得什么样的赠品,果然,在支付的上方又看到了配赠说明的提示,提示我”选择赠品“(这里说明一下,之所以将提示语都放在同一位置,是为了让前面界面的视觉路径在同一水平点上,使页面结构更整洁),点击进入”选择赠品“界面,参照页面给出的赠品金额提示,选择了想要的赠品,由于选择的赠品太多,从上下拉到下浏览起来效率太低,于是她又点击了按钮”已选赠品“进行复核了一遍,确定完毕后,回到确认下单的页面,便满意的点击了”支付“按钮,发现金额与未选赠品前的金额一致,便放心的提交了订单,订单支付完毕后,引导代理来到了订单列表页面,上面还特意标明了”含赠品“字样提示,a点击进去再次看了一下所购的商品及赠品,准确无误会,抱着愉悦的心情关闭了应用与手机。

通过场景的描述及结合V1.0版本的购物流程,对我输出了一个详情的需求说明,文档包含具体哪些界面会有所改变,涉及到哪个界面,及新增哪此页面,如下:

1、商品列表及商品详情,赠品类型的商品须显示对应图标;

2、赠品类型商品同普通商品一样可正常下单购买;

3、购物车,根据代理当前所选商品的总面价金额及当前代理对应配赠率,如果配赠金额不为0,则显示相应配赠金额及提示信息(若当前配赠金额暂不足以购买系统当前上架的任意赠品,则显示提示信息:“还差××就可获得免费赠品”;若当前配赠金额可购买系统当前所有上架赠品中的任一赠品时,则显示提示信息“可获得免费赠品”);如果配赠金额为0,则不显示相应配赠金额及提示信息。

4、确认订单界面,若当前配赠金额可购买系统当前所有上架赠品中的任一赠品时,则提供选择赠品操作项。未选择赠品时,操作项显示配赠金额、及“选择赠品”文案。已选择赠品时,若配赠金额-已选择赠品的总面价>0,操作项显示“已选择××元赠品,还可选择××元”;若配赠金额-已选择赠品的总面价=0,操作项显示“已选择赠品”。点击操作项进入选择赠品列表。

若当前配赠金额暂不足以购买系统当前上架的任意赠品,则不提供选择赠品操作项;

5、选择赠品列表,列表显示当前配赠金额可购买的所有已上架的且库存不为0的赠品类型商品,用户可点击选择,也可取消选择,当前选择的赠品总面价金额=配赠金额时,不可再继续选择更多(若再点击选择赠品,则提示“不能再选择更多了”);提供显示选择提示信息“还可选择××元赠品”(××为配赠金额-已选配赠商品总面价)、“查看已选赠品”操作、“确认”操作。

点击“查看已选赠品操作”,可弹出浮框列表显示当前已选择的赠品信息。浮框提供关闭按钮,可点击关闭浮框;

点击“确认”操作,确认当前已选择的赠品信息,返回确认订单界面。

6、个人中心,增加显示当前代理的配赠率信息。

7、订单列表,若对应订单含有配赠商品信息(注:如果只是正常下单购买的赠品类型的商品,则同普通商品订单。此处指的是确认订单时根据配赠金额范围免费选择的配赠商品),则显示“含免费赠品”标签;

8、订单详情,若对应订单还有配赠商品信息(同7),则列表显示用户选择的免费获赠的商品信息(注:正常下单购买的赠品类型商品,显示在同普通商品位置。这里只显示确认订单时选择的免费配赠商品),并显示总的免费配赠金额信息。

其实,通过上面这个需求说明,相信已经阐述的非常清楚了,但是能这样发给UI设计师吗?不能,为什么呢?因为,在做的过程中,UI设计师大多数不会考虑个中的逻辑,而且给一长串又长又臭的文字给他们,相必都会厌烦,从而导致一些逻辑上对不上或造成用户体验方面的其它漏洞,下面给大家看一下,交互设计师输出的原型及交互说明吧!

流程设计

演示|一个交互设计师从接收需求到产出的过程

交互说明

演示|一个交互设计师从接收需求到产出的过程

小结

一个完整的需求从接收到输出就完成了,在这里,任何一个需求(不管大小),都需要通过精密的分析及推导而来,切不可直接拿到需求就出原型,我们的文档不仅要满足用户需求,满足用户体验,还要能够有理有据的说服专业人士,说服需求的提出者。

 

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

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

(0)
CatherineCatherine
上一篇 2017-05-07 21:08
下一篇 2017-05-07 23:16

相关推荐

  • 实例分析:室内地图交互体验分析

    因为做室内定位项目,需要涉及到室内地图相关功能,故分析、探寻高德地图、百度地图APP的室内地图设计逻辑,以为项目借鉴。本文从室内地图展示,室内地图与导航栏的对应两方面来分析对比,并针对部分内容提出相关建议。

    2017-05-09
  • 《王者荣耀》的操作交互设计研究

    《王者荣耀》是国内最成功的手机版MOBA类型游戏。MOBA从PC的辉煌延续到了手游,当时很多人唱衰手机上的MOBA,主要还是操作上的问题,手机上无法实现鼠标的快速精确定位。为了优化手机版MOBA,大家进行了各种尝试,有触摸点击型(虚荣),有双摇杆型、单摇杆型,最终单摇杆+技能副摇杆结合的《王者荣耀》一统江湖,现在很少有人说王者手感不好的,它的很多设定都成了现在MOBA游戏的标杆。这里,我们就一步步地分解看看,王者的操作手感是如何设计的。...

    2018-02-26
  • 交互设计法则之接近法则与格式塔

    早在20世纪早期,一个由德国心理学家组成的研究小组试图解释人类视觉的工作原理。他们观察了许多重要的视觉现象并编订了目录。格式塔理论明确地提出:眼脑作用是一个不断组织、简化、统一的过程,正是通过这一过程…

    2015-11-05
  • 不扁平的设计:我们的世界没有一处是光滑和平整的

    “当我们在思考一个问题的时候,我们需要开放模式;但一旦我们找到一个解决方案,我们必须切换到闭合模式去实现它”

    2017-05-25
  • 如何将“用户体验”做到极致?我有绝招!

    如何将“用户体验”做到极致?我有绝招!无崖子现在大多数掌柜的没有重视用户体验或者说不知道如何做用户体验。三只松鼠相信很多掌柜的都很熟悉,坚果类目的老大,三只松鼠是如何成功的呢?三只松鼠的成功不是偶然的而是必然的,三种松鼠将“用户体验”做到了极致,三只松鼠的创始人:章燎原是传统行业出身,在做三只松鼠之前在传统行业就对坚果非常熟悉,章燎原对坚果行业的把控至今无人能敌,三只松鼠的成功一部分是对供应链和仓储的把控,还有就是注重“用户体验”的极致...

    2018-03-16
  • 实例分析:从搜索结果看地图搜索的交互设计

    每一个交互都有其特有的逻辑支撑,即便是一点小小的体验不同,背后的逻辑可能千差万别。

    2017-05-11
  • Axure神器:用母版打造模块化设计【UXRen原创】

    作者:Petrel(UXRen社区Axure金牌讲师,资深交互设计师) Axure原型的制作过程中,你一定遇到过这样的问题,出现在不同页面的功能模块,如果你是通过复制粘贴来完成的,那么当该模块发生变动需要修改时,麻烦就大…

    2017-08-04
  • 018. 内部框架——axure线框图部件库介绍

    网页框架代码<iframe border=0 name=lantk src="要嵌入的网页地址" width=400 height=400 allowTransparency scrollbars=yes frameBorder="0"></iframe>      看到上面这段代码,很多人肯定认出这是htm…

    2014-09-12
  • 浅谈交互设计的七大定律

    新年第一篇和小伙伴们聊聊交互设计七大定律在设计中的应用。说起法则、定律、原理一类的名词,大多时候我们会觉得有点故作高深,似乎离我们真实的工作很遥远,又或者似乎太过浅显熟悉不值得讨论。窃以为,如果不想每次聊起产品设计的时候,都是你看人家的用户体验做的多好,你看这交互做的多好,你看这动效做的多好……或许,我们可以更有趣除非有更好的选择,否则就遵从标准—Alan Cooper费茨定律(Fitts’ Law)由保罗·费茨(PaulM. Fitt...

    2018-02-06
  • 交互、研发、视觉部门的协作工作技巧分享

    本文转载自交互学堂公众号,作者阿西UED 交互、研发、视觉部门的协作工作技巧分享 微信号:IxDSchool 本文是图片形式,打开有些慢,请耐心加载完再阅读。这里有原文地址

    2016-01-15