加入收藏 | 设为首页 | 会员中心 | 我要投稿 PHP编程网 - 黄冈站长网 (http://www.0713zz.com/)- 数据应用、建站、人体识别、智能机器人、语音技术!
当前位置: 首页 > 运营中心 > 交互 > 正文

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

发布时间:2016-10-17 01:11:25 所属栏目:交互 来源:简书
导读:副标题#e# 逛逛购物 设计背景 由于微信公众号轻应用的设计需要在微信的结构框架中进行,信息架构和导航布局需要基于微信的开发接口和架构来做,项目开始时微信针对公众号的导航框架刚好有做出调整,在进入公众号里面的页面后可以逐级返回上一级页面,而不是
副标题[/!--empirenews.page--]

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

逛逛购物

设计背景

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

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

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

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

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

项目需求

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

需求分析

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

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

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

信息架构图

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

绘制界面

公众号首页

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

首页

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

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

会员卡激活流程

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

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

分对象激活会员卡

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

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

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

输入手机号码激活会员卡

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

会员卡页面

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

会员卡页面

(编辑:PHP编程网 - 黄冈站长网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

推荐文章
    热点阅读