合理、清新——百度糯米个人中心设计思考

项目背景

为了进一步提升糯米的用户体验,6.7版本着力对糯米的核心业务功进行了一次体验优化。个人中心承载着用户基于个人相关的所有功能入口。此次个人中心改版希望帮助用户聚焦核心业务,快速高效愉悦完成他们的诉求。

grzx-001

 

线上数据分析帮助我们准确切入需求

设计开始前我们通过线上版本各功能入口的点击量的对比分析判断出用户在个人中心的行为轨迹对各功能的使用频率。从数据看,订单相关点击量最高;其次是糯米券、抵用券等资产相关的入口, 头像点击量是第三;而占个人中心头图位置的vip图标点击量并不高,另外放置在黄金位置的百度钱包点击量更少。通过数据对比明确出用户来糯米的个人中心主要完成的诉求包括3个方面:看看订单、资产查询、账号操作。

 

围绕用户目的和行为梳理问题

基于线上版本的数据对比以及对个人中心整个结构分析,发现旧版个人中心存在如下问题:

1.信息架构不够合理,增加用户使用成本;

2.功能入口平均,主次任务不清晰;

3.订单分类逻辑复杂,增加用户的判断成本;

4.视觉风格与糯米整体气质不够吻合;

5.icon样式单一,视觉语言不丰富。

 

设定目标,有的放矢

针对以上问题,我们经过多次头脑风暴、竞品分析后提炼出了新版本的设计目标:合理的信息架构,契合糯米气质的视觉风格,清晰的视觉层级关系。

 

解决方案

1.合理的信息架构——归纳同类信息,引导用户行为

通过交互视觉的多次研究和尝试,结合用户数据、使用行为习惯和频率对个人中心进行了功能分区,主要包括个人信息区、资产相关区、我的订单区、其它功能区四大部分。这种按功能分区的产品结构,保证了产品核心功能突出,辅助功能入口统一的特点,信息层级清晰明了,架构层级扁平化,同时也便于视觉设计时营造层级分明、体验愉悦的使用氛围。

grzx-002

 

2. 契合糯米气质的视觉风格——优化头图的布局、色系、统一页面视觉语言

确认整体的信息框架后,接着进入视觉改版。个人信息区分别从内容布局、色系、细节元素上进行了重新设计。内容布局上强化了糯米头像,将会员等级弱化,整体以视觉聚合的形式展示,便于用户聚焦他们关注的信息。色彩搭配上,头图作为产品气质重要体现,通过提取糯米标准色进行渐变优化。同时将糯米的金刚icon以底纹的形式平铺在头部,从每一个细节去强化产品气质,形成与竞品的差异化。个人资产是用户关注的与之密切相关的信息。因此整合到个人信息区域,并将资产相关的余额、有钱花调整至该区域。在资产区用户更关注资产数量,所以该版本去掉了辅助的icon,强调了资产的数量,便于用户快速查看。

grzx-003

 

3. 清晰的视觉层级关系-主次功能入口图标的差异化视觉表现

订单查询是用户来个人中心的最主要的任务,改版前的订单是以类型为划分维度,用户在查询前必须先判断一次订单类型,增加了时间成本,新版本订单以时间维度展示,用户直接根据自己订单的状态查看即可。订单icon进行了重新设计,作为用户最常点击的功能入口,采用同类色的色块组合方式,不同的时间状态采用与之状态对应的颜色(这里结合到生活中交通灯的颜色提醒),并且保证相似的明度和饱和度,既体现丰富性也突出了订单入口,更好地引导用户查询订单。

grzx-004

 

其它功能区作为糯米个人中心的辅助功能区,本次改版采用了列表栏呈现方式。这样即便于功能入口的扩展,也解决了各功能入口个数不一致出现视觉缺口的问题。积分商城是糯米近期想要运营的功能,将其放置列表最上方;钱包是需求方必须保留的入口,将钱包的入口收起,保证功能同时兼顾用户体验。帮助和设置是针对糯米全局的功能,操作频率不高,放置在最下方。在视觉上列表icon采用线性样式,每个icon做了一个小缺口的设计,并希望推广到糯米全站是使用,形成糯米个性标签。列表栏的处理与其他板块区分层级关系,形成视觉的节奏感。

grzx-005

grzx-006

 

上线用户反馈

好的设计不仅仅是视觉感受的美观,更应该是帮助用户获得更好的体验,形成忠诚度。UER关于个人中心新旧版本的对比调研的结论得出新版本在布局合理性、易理解、视觉美观度等均优于旧版本。上线后也获得了良好的用户反馈。新版本的订单点击量得到显著提升,其中可使用和待付款订单的点击量的提升为增加平台流水、成单率起到了重要作用。另外签到、积分、有钱花的点击量也有很大的提升,这是吸引用户形成使用糯米习惯的重要渠道,起到了很好的提升糯米忠诚度的作用。

 

总结

无论是整体产品还是功能的迭代设计,都离不开全局观的思考。尊重并有效利用用户的的视觉流和行为轨迹,围绕用户的目的和行为来设计,将功能分解为流程,简化界面,同时保持风格的一致性和连贯性,是进行产品设计不可或缺的方式方法。个人中心这次改版主要针对功能框架进行整合、根据糯米的调性重新定义个人中心的视觉风格,让信息框架和视觉层级更加合理,创造流畅生动的用户体验。