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

从接收需求到产出?这过程中到底经历了什么?不妨来阅读本文作者的文字,一起来了解了解吧~【需求概述】
商品,增加商品类型,分为普通、赠品两种。赠品可下单购买,也可根据订单金额及对应代理级别配赠率赠送。可按照代理级别,设置对应级别的配赠率。当代理下单购买普通类型或赠品类型商品,配赠条件满足时,在支付订单前提供选择赠品操作,代理可选择配赠金额范围内的任意赠品,也可不选择;选择赠品,并支付成功后,对应订单增加配赠商品信息。
注:配赠金额=订单面价金额×对应等级配赠率。目标用户:某护肤品牌微商代理
年龄: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

相关推荐

  • 关于用户体验&交互设计的视频分享【日常思考0001】

    (。・∀・)ノ゙嗨这里是Chiki的深夜抽风小记录,做个日常思(bing)考(zheng)收集。公众号取名“Design for What"是希望以后自己做设计的时候可以多思考设计是为什么Find your passion,and let it kill you那么开始今天的开场首秀!今晚本想磕磕榛子垫垫肚子就……就开始做事来着,结果不小心打开平板……看了会视频(明明是好久……都是借口😭)不过视频不错分享给大家👇视频在这:截了有点不一样...

    2018-04-14
  • Banner设计之平面构成的奥秘

    我之前说过要写一系列专门针对电商的三大构成的文章的,而在上篇文章中我已经给大家梳理了一篇关于色彩的文章:六个步骤细说电商banner图设计之色彩的奥秘,那么今天呢,我就接着要给大家讲一篇关于平面构成的文章好了。

    2017-05-19
  • 帮你创造优质移动端UI的7项最佳实践

    在几年前,关于网页和APP谁做主导的话题还很热,但是现在看来,APP无疑已经是为用户提供内容和服务的主流了,它是用户最信赖的内容和功能的呈现方式。于是,随之而来的问题就是如何在竞争无比激烈的市场中,让你的APP在诸多同类中脱颖而出,并且让用户留在你的APP当中。留白常常被认为是一个活跃的元素,而非被动存在的间隙和背景。—— Jan Tschichold小贴士:有效的移动端APP信息推送策略是采用多种类型的信息推送机制,推送通知,电子邮件,应用内通知,新闻Feed等。多样化的信息推送通过合理的协调,创造良好的用户体验。

    2017-05-15
  • AxureUX信息化精美简历模板完整版正式发布

    01作品信息作品名称:AxureUX信息化精美简历模板完整版作品类型:模板类发布日期:2018-03-12最新版本:v1.0主要适用:其它软件版本:Axure 8.0文件大小:5.6MB作品编号:OTH002作品售价:¥69.00详细介绍及演示:http://www.axureux.com/home/ResumeTemplatePro.html复制以上链接在浏览器打开或点击文章底部阅读原文,建议在电脑上查看原型演示。02作品介绍本作品是...

    2018-03-12
  • APPLE WATCH 中文手册:通知--自定义通知界面

    自定义通知界面含有两个独立的界面:一个静态界面,一个动态界面。动态界面显示了完整的自定义通知内容样式,并且它可以包含由 WatchKit 扩展提供的定制内容和图形。静态界面是一个简单的界面,它仅仅只含有通知的…

    2015-06-15
  • 腾讯MXD:资讯app为什么都长一个样?

    作者: Celine Wang@腾讯MXD   打开手机,国内的资讯 app 除了品牌 logo 外,几乎都长一个样。就如你敲开不同的门,发现房间不光装修风格一样,还住着品味雷同的主人。是什么造就了它们? 资讯产品的本质是连接内容…

    交互专题 2023-03-03
  • 一篇读懂交互设计进化!

    计算机刚被发明的时候并不是现时看到这个样子的,而是这个样子的。像房子一样大的计算机当时的计算机一切数据和操作指令都是通过由纸带输入机进行的,是当时唯一的输入设备。穿孔纸带上利用一排孔表示一个字符,用穿孔或不穿孔表示1和0,来将指令和数据导入内存。穿孔纸虽然大家都没见过这玩意,但可想而知纸带的输入速度很慢。。。很慢。。。即使是一个简单的程序,所需要的纸也是一箱一箱的。后来,因为打字机的灵感,键盘终于被发明了,可想而知这输入速度有多大的提升...

    2018-03-04
  • 成都UI-UE交互设计免费试听课了解一下!

    周一见!周一见!周一见!没错下周一!成都UI-UE交互设计免费试听课开课啦!与其宅在家里浪费时间不如来体验一下UI设计前五天免费试学4月16日--4月20号机会有限,先到先到得哦!UI-UE交互设计是什么?UI-UE交互设计就是指对产品的人机交互、操作逻辑、界面美观的整体设计!为什么要学习UI-UE?人才需求旺盛,成IT行业职位新宠人才缺口大,行业势头发展迅猛虽然UI这么好,但是不仅对人才的需求大,要求也越来越高,所以,培训,是提高水平...

    2018-04-17
  • 交互设计中的5项视觉指导原则

    【分类】经验分类:经验/观点/自译原作者: Jerry Cao翻译:@ifecIFEC团队译文UI中国旗下翻译团队,由热爱翻译热爱分享的设计师组成。IFEC译者翻译国外行业热文、规范文档。欢迎关注我们的官方微博 @ifec, 加入我们…

    2017-08-04
  • 【笔记干货】UCAN2017用户体验设计论坛

    作者: 阮小阮     忙忙碌碌一天这么晚还没睡是因为我在给大家编辑UCAN的干货哇~ 虽然我平常很懒,可我们真的只推干货哇~ 希望大家都能获取一些知识一些思考 互联网这么快,拥有平衡的能力真的很重要~!   董本…

    交互专题 2017-08-07