• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 上亿人使用的泛娱乐微信店,是如何做改版设计的?

上亿人使用的泛娱乐微信店,是如何做改版设计的?

作者:腾讯CDC 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含品牌认知,改版设计,框架设计,界面组件,腾讯CDC,设计规范等相关知识,腾讯CDC希望在学习及工作中可以帮助到您

在本文中,作者对泛娱乐微信店改版设计进行了总结,有很多值得借鉴的地方,与你分享。

一、项目背景

1. 「泛娱乐微信店」是什么?

泛娱乐微商店是计费平台部为公司所有虚拟业务提供和服务的一个付费渠道,是微信钱包中一个便捷的泛娱乐业务付费入口。

2. 为什么要改版?

这些年,微信钱包布局的服务 o2o 已经渗透到生活中的方方面面:购物、网贷、理财、城市服务……成功为用户带来了便利的服务体验。

计平在钱包中的泛娱乐业务付费入口,既为用户付费提供了便利,也促进了公司营收。

但是泛娱乐微信店在经营多年之后,问题也逐渐出现,因此我们进行了一次设计改版,让这个虚拟商店继续更好地为用户服务。

改版需要解决三大问题:

现有付费用户:商店框架与流程不方便快速找商品

PS:公司业务按照程序实现逻辑分为游戏币、道具、包月。而这些都是实现模式。

  • 游戏币模式,即虚拟货币模式。
  • 包月模式,即订阅,到期扣费包月模式。
  • 道具模式,即单品购买。

潜在付费用户:根本不知道微信有入口

基础功能缺失

虽然微信店经营了多年,但是身为一个商店,由于历史原因,依然有很多基础功能(如交易查询、包月到期查询等等)缺失。因此这次需要完善这些基础功能。

二、如何解决问题

1. 设计目标

在已知问题之下,设计开始针对已知的体验问题进行解决,因此设计定下以下目标:

2. 设计过程

怎样提升付费效率?

  • 合理的分类设计:从程序实现模型到用户心理模型。
  • 便捷的流程设计:通过推荐与搜索,提高用户检索效率。

△ 合理分类设计

△ 便捷流程设计

△?对应的布局设计

怎样进行品牌教育?

  • 合理的触点,适时进行用户品牌教育。
  • 通过运营设计,透过好友关系链,老用户分享优惠券,拉拢新用户。向新用户传递商品价值观。

△ 合理触点

△ 擅用运营设计

补全基础功能,建立一个服务一体化的虚拟商店

作为一个微信中便捷的虚拟商店,可以类比实体店中的便利店。快捷购物是商店的核心。因此这个过程中我们也补充相应基础功能,建立一个一体化的虚拟商店。

三、视觉设计

1. 统一的商店体系色彩

利用腾讯充值品牌延展出商店体系的色彩,加深用户对品牌的印象(和新版微商店一致),让用户清晰地知道这里是官方的虚拟商店。

2. 主要模块卡片化-突出最主要内容的层级

在不影响其合理分类的基础上,用模块卡片化结合错落排列的方式来突出页面主要模块的层级,同时用垂直的视线引导用户阅读内容信息,使用户更聚焦于主要操作,同时方便用户快速找到所需业务,提高付费效率。

3. 制定控件与规范,排列组合,适配全量业务场景及功能

制定全量业务的专区页规范,业务可根据需要排列组合,为多种业务模式提供可复用的模板,同时制定运营 banner 规范,统一整体页面风格。

△ 最终方案呈现

欢迎关注作者「腾讯CDC体验设计」的微信公众号:

「优秀团队的改版设计案例」

  • 《如何打造极简设计?来看英才APP的实战案例!》
  • 《上亿人使用的唱吧APP V8.6 改版设计过程揭秘》
  • 《上亿人使用的百度网盘,是这么做改版设计的》

================明星栏目推荐================

优优教程网: UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备: http://hao..com

优设大课堂

您可能想查找下面的文章:

  • 用京东的概念案例,深入浅出为你解读「品牌化」
  • 上亿人使用的泛娱乐微信店,是如何做改版设计的?
  • 用苏宁金融的案例,教你学会分析一款App
  • 有人说腾讯傻,花几百万买了套字体…
  • 网易资深设计师:视觉设计如何继承品牌基因?

相关文章

  • 2018-08-23把握4个关键点,让Design Workshop真正提升设计效率
  • 2018-08-23设计神器两连发!加载动效在线生成网站+最好用的免费图库推荐!
  • 2018-08-23专业科班系列!如何快速提高你的版式设计水平?
  • 2018-08-23学会这20招PS操作技巧,提高80%的工作效率
  • 2018-08-23泛谈商业产品(一):什么是商业产品?
  • 2017-08-06网页设计中的交互:关于分页问题的浅谈
  • 2018-08-23用一个小案例,教你面对那些无聊细碎的设计需求
  • 2017-08-06使用Photoshop 制作网页线框图简单实用
  • 2017-08-06鼠标经过图片超链接时改变图片的大小(宽、高)的css
  • 2018-08-23如何才能做到色彩平衡?网易老司机告诉你!

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 用超多案例,帮你学会排版中最基础的对比和对齐原则
    • hasLayout引发的CSS Bug表
    • 对html制作新手以及菜鸟的一些建议,大牛可以忽略
    • 能让你顺利过稿的结对设计方法,原来这么易懂!
    • 用Dreamweaver8对网站文件进行检查整理的方法
    • 网页核心内容的视觉表现方式介绍(图文)
    • 没有人带,新人设计师如何自我成长(二)
    • python 文件头的编码声明问题
    • 腾讯设计师:超全面的变体美术字设计手册
    • 红包还可以这样玩!众安专属红包活动设计经验总结

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有