购物商城微信公众号交互设计

文章目录[隐藏]

设计背景

由于微信公众号轻应用的设计需要在微信的结构框架中进行,信息架构和导航布局需要基于微信的开发接口和架构来做,项目开始时微信针对公众号的导航框架刚好有做出调整,在进入公众号里面的页面后可以逐级返回上一级页面,而不是之前直接返回到公众号首页。在微信改版之前,也做了一套微信轻应用交互模板,由于轻应用导航栏的调整,页面留出了更多内容显示空间,页面操作也流畅了许多。

42420wx_fmtjpeg4

图1:微信公众号没有改版前的轻应用页面

图1可以看出,如果在轻应用页面上要返回上一级页面,需要设计一个单独的导航条,这样和微信已有的导航栏并在一起形成了双导航栏,页面显得鸡肋,出了占用屏幕空间外,操作起来也很累赘,还容易导致点击错误。

所以在新设计的轻应用,去掉了先前的导航栏,增加了页面空间。

项目需求

某商城需要创建自己的微信公众号,用户能在公众号上购物、注册成为会员、绑定会员卡、会员卡充值和积分兑换。(购物第一期不做)

需求分析

分两个角色——商家和会员(消费者),两个场景——商城和会员卡。对于商家来说:通过商城为消费者(会员)提供购物消费场地;对于会员(消费者)来说:进入商城就是消费者,购物消费就是会员,消费轨迹储存在会员卡

由于第一期商城不做,分析会员卡的使用场景绘制了流程图,生成信息架构图

43430wx_fmtjpeg4

信息架构图

两个角色:商家(商城)和用户,两个场景(节点):商城和会员卡

绘制界面

公众号首页

640wx_fmtpng

首页

首页有消息推送和两个入口(商城、会员中心),消费者在实际购物中,就是带上钱包(银行卡)走进商场挑选自己喜欢的商品,也就是说,如果消费者要成功购买到商品,有两个必须具备的,一是有商场,二是有钱(很重要)。所以把商城入口和会员中心放在首页。会员中心包含:“会员卡” “我的资料” “问题反馈” ,这里的会员卡实质涵盖了钱包的功能,在第一次关注成功后,系统会推送一条欢迎加入的消息,提供 “激活会员卡”入口,也可以直接点击会员中心〉会员卡〉激活会员卡

(1.0版本完成会员中心模块的设计,2.0版本完成商城模块的设计)

会员卡激活流程

由于要考虑到线下已办理会员卡的用户,在第一次设计的时候,分了两个的入口,有会员卡的选择绑定,输入会员卡号码,新会员选择激活,输入手机号码

640wx_fmtpng

分对象激活会员卡

设计出来后,感觉让用户去选择入口激活,用户容易出错,而且体验不流畅

最后和需求的小伙伴沟通,问了商城业务人员,其实消费者在线下办理会员卡时,需要填写手机号码,这一点很重要,因为新会员激活时也需要手机号码,于是统一使用手机号码来激活,如果已有在实体店办理会员卡,会给出提示再进行线上激活,如果之前没有办理,默认手机号为会员卡号,直接激活,然后修改交易密码

41410wx_fmtjpeg4

输入手机号码激活会员卡

第二稿的设计智能化了,体验流畅很多

会员卡页面

40400wx_fmtjpeg4

会员卡页面

会员卡页在第一稿设计的时候,顶部为banner区域,商品广告向用户推送,但最后和需求小伙伴讨论后,决定不放广告推送,理由是这个轻应用中已经有独立的商城入口,消息推送也会涉及到商品的推送,轻应用本质就是轻,作为用户来讲,钱包里(会员卡)更希望是私人的,比较有安全感,但可以保留,给商城方自己来决策。

于是把banner区域换成一张会员卡贴图,根据会员级别(由消费情况、积分、年限来决定)的不同显示不同的贴图,就如线下的白金卡、vip卡同理,出了享受的折扣、服务不一样外,也是会员身份的象征。

会员卡充值

650wx_fmtpng

充值页面

作为商城方,希望消费者充值更多的钱到会员卡中,增加在本商城的消费额度,留住消费者,于是提供了充值即享受折扣的消费策略,来刺激消费者充值,采用类似于购买购物卡的充值方式设计,这里边有包含消费者消费行为的考虑,一般在购买商品的时候,商品的价格出现整数的情况比较少,如果采用整数充值,能够保证会员卡上有余额,谁会愿意浪费自己的钱呢?

消费者作为应用的用户,操作越简单,花费时间越少越好,这种设计也避免了用户输入,直接选择面值即可充值(微信支付)

订单详情页面

46460wx_fmtjpeg4

图文显示和文本显示

订单详情页的设计主要考虑在不同网络环境下查看详情,默认为图文显示,如果是网络环境较差,加载很慢时,也可以主动切换到文本显示查看,缩短用户等待时间,提升用户体验。

视觉设计

视觉设计师小哥超帅了,给我的感觉是他一稿就通过的(哈哈),最后的效果也是棒棒哒(点赞),上图...

44440wx_fmtjpeg4

激活会员卡

45450wx_fmtjpeg4

会员卡激活成功

770wx_fmtpng

会员卡中心

660wx_fmtpng

会员卡充值

640wx_fmtpng

订单图文详情

微信公众号在14年10月份上线,不论是消费者或合作方反响都很好,也使我们顺其自然地拿到了二期商城开发的合约

虽然是个轻应用,项目不大,在设计的时候,思考的地方不少,是一个不断协调的过程,和需求、视觉、开发的小伙伴也讨论很多,做平衡不容易,每个设计师都会有自己不同的设计思维和方法,目标都是解决问题并推动项目向好的方向发展。第一次把做过的项目经历发布出来,表述有很多不足之处,希望指正,一起交流 :)

最后,感谢视觉小哥的供图 thx!

转载自:简书

作者:村边火车

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

(0)
iouedioued
上一篇 2015-11-05
下一篇 2015-11-08

相关推荐

  • 为了App更新,程序猿都变成段子手了

    头图来自:flickr 本文转自歪楼(easy1414),已获得其授权。 这年头混你们互联网创业圈真是太难了。 按着互联网思维,连修bug的程序猿小哥们都被逼得寂寞如雪。 有的自带牛逼气质: 有的在App更新日志里写起了诗: …

    2016-01-26
  • 创建用户友好型表单 Creating User Friendly Forms

    好久不见,由于懒惰好久没有翻译文章了,这次翻译一篇关于表单的很基础的文章。有些例子较牵强,大家可以有选择性的看 原文地址:https://blog.prototypr.io/creating-user-friendly-forms-46e3f7f4eef2 作者:Momo…

    2018-04-18
  • [转]设计智能推送通知的要点|译文

    当你安装一款新的应用时,有多大比例是允许收到推送通知的呢?我已经被无数的推送通知搞烦了!我甚至有在凌晨被推送通知吵醒的经历!这怎能让我爱上那款应用呢!推送通知的逻辑应该更加智能化才是!本文就阐述了设…

    2016-07-15
  • Axure案例-联想输入提示,Axure中继器的使用

    点击右面下载:axure-case-https://www.iamue.com 不多说了,源文件分享,使用Axure打开编辑可以查看原理。 日安 转载的童鞋带上:木卫艾欧网-交互学堂》 Axure案例-联想输入提示,Axure中继器的使用 

    IxD案例 2015-02-04
  • [译]UX设计之商品详情页

    现如今,30%的在线购物行为发生在手机端上。 对于在线购物一事,所有用户都期望能够得到快速、流畅的体验。因此,在购物过程的每一个阶段,即使付之最小的努力都有可能利于用户的整个体验过程(我们也应该以利于用…

    2016-06-30
  • 消灭空状态

    设计师在做设计的时候,常常会忽略的一个页面状态就是空状态。空状态,顾名思义就是空白的状态,比如说:一个新闻的列表中没有新闻,这个时候列表就是空的,用户打开之后看到的就是白惨惨的一片。空状态的用户体验…

    2016-01-29
  • 社交APP-Same的产品和交互设计体验总结

    手机里总有一些app是下载试用了之后不会卸载的app,而same这款app在我的手机中是呆的时间最长的一款,我并不经常打开它,即使在其体验出现各种问题时,比如闪退,引导页进不去app(需杀掉进程进入,偶尔一次可进去…

    2016-03-14
  • 资讯类APP竞品分析报告

    一、摘要 为了能深入了解主流新闻客户端在「功能模块」、「内容运营」以及「界面交互」上的特点,我对Zaker、今日头条、网易新闻这3款APP进行了对比分析,并得出结论: Zaker定位于具备明确新闻需求的用户,整体较…

    2015-03-17
  • Material Design UI质感设计动画交互设计欣赏

    质感设计(Material Design),是谷歌推出的设计语言,可以在用户界面产生动画,并且动画都是仿照真实的物理世界所产生,而且这套设计语言是跨平台和设备的。简而言之,质感设计是一种简单的方法创建很快的应用程序…

    IxD案例 2015-11-16
  • 平衡用户体验设计和精益设计

    来源:人人都是产品经理 作者:AB Tester Blog 对你而言哪个更重要:是制作出拥有杀手级用户体验的产品来吸引用户?还是尽快制作出能满足用户的产品并抢占大量的市场份额? 如果一款产品用户体验很差的话,用户不会使…

    2014-09-27