文档介绍：视觉方案
优化背景
1
产品核心交互不足以诠释产品概念
2
产品内容与产品概念相差甚远
3
产品架构不足以支持新增业务需求
4
产品视觉设计缺乏吸引力
“银联钱包”,并且运营一段时间。在这段时间里,用户研究反馈出很多
问题。新业务的不断增加也暴露了现有框架的不足。
当前版本问题点:
当前版本网页端和手机端视觉
“银联钱包”产品概念:持卡人的“权益中心”
目前内容:仅仅是以优惠内容为主导的,以及对卡券的
管理,没有与钱包相对应的功能。如支付等。
2
产品内容与产品概念相差甚远
此问题在移动端较为突出,
目前产品的核心交互为“翻转”
此动作不能明确表达出“钱包”的概念。
它不属于实物钱包的核心动作。
1
产品核心交互不足以诠释产品概念
此问题在移动端较为突出
目前产品列表式的架构较为不合理,
不易于扩展新业务,也不易于内容展现。
3
产品架构不足以支持新增业务需求
此问题在网页端和移动端都存在。
手机端较为突出。
目前产品的视觉设计,未能很好的诠释产品内容。
显得单调。
4
产品视觉设计缺乏吸引力
新方案优化点
1
交互
核心交互设计需强化钱包概念
2
内容
考虑已有和可能增加的内容与功能
3
架构
架构设计需增强延展性和灵活性
4
视觉
视觉设计需增强吸引力、诠释产品内容
基于目前的内容、考虑将来的业务,新视觉方案将主要从是视觉设计部分,优化产品设计。
与视觉设计相关联的内容架构和交互设计也在方案内体现。
产品核心交互
内、外有别
不局限于钱包的外观,从生活中钱包的内容和交互动作出发。将产品的核心交互还原到共同、易懂的两个面“钱包外”“钱包内”
优惠内容
钱包外
管理中心
钱包内
1
交互
核心交互设计需强化钱包概念
优惠内容
产品服务
信息管理
个人理财
未来新业务
电子票
返利券
积分商户
活动
优惠券
未来功能增加
支付、转账、缴费
外接其他应用
历史花费查询
卡券管理
个人信息管理
外
内
2
内容
考虑已有和可能增加的内容与功能
考虑到目前多终端的用户使用浏览现况,网页端的架构采用了,夸平台适应的响应式布局。
页面内容的排列窗口大小的变化自动调整,此布局适用于Web端的页面,同样适用于Ipad屏幕大小
响应式布局
夸平台自适应
电脑和平板电脑之间的转化
1
2
3
4
5
6
7
8
9
10
11
12
1
2
3
4
5
6
7
8
9
WEB端
3
架构
架构设计需增强延展性和灵活性
手机端
灵活性“增、减、移”
优惠券、电子票、返利券、活动、猜你喜欢、最近浏览、建议、新手帮助、等等
采用栅格化结构,方便业务功能的增减,可根据后期业务需要,选用单页延展,或分页切屏。
首页布局
优惠快捷入口
单页增加一排
分页切换屏幕
导航区
活动区
精选区
钱包内入口