0_封面.png
改版背景
在当前日常工作中,由于碎片式迭代较多且原型由产品经理直接给到,导致设计师无法对产品有一个结构化、整体化的认识,大部分优化也是基于原有设计风格和组件进行新的业务拓展,长时间积累之后,会造成设计师与产品经理的业务认知差距拉大,在方案设计时会偏离业务。
优化流程
其实作为设计师,日常也会向产品反馈一些产品在使用体验上的问题,不过大多时候问题总是不了了之。
1_推动优化改版_表情包.png作为设计师,内心通常是崩溃的。
2_心情.png因此,相对于口头提需求,将方案转为视觉稿或者概念稿,可以进一步加强说服力。
然而实际上,作为设计师要主动推动项目优化,阻力是比较多的。例如,当设计师按照自己的想法去进行一些优化时,首当其冲的就是会面临各种质疑,“你为什么要怎么修改”,“这和原版的区别是什么?“你的方案优势在哪里?”
不由得让人想起《长安十二时辰》里的经典语录,其实潜台词就是:
长安十二时辰插图.png所以,在进行优化提案时,首先要对自己提问,方案是否经得起推敲,相对于原稿做了哪些优化,是否是过于在意视觉表现而忽略了业务诉求等等。
不过,本次优化也是基于对产品有一定的了解之后,首先按照自己对产品的认知,进行原型图概念设计,再通过概念设计与产品经理进行沟通。
改版目标的确立
在最开始接触产品时,只能确定产品属于新零售行业。没有数据、没有明确的产品定位、以及包括我在内的设计师对业务的认知不够清晰。
3_困难.png产品的数据埋点才刚开始搭建,关键性的数据分析很难获取,至于产品本身的定位,只有一个大方向就是新零售,至于用户如何使用和看待产品,在很大程度上都只能听产品经理的描述。
按照用户体验五要素来看,如果此时想进行完整的体验优化,难度是非常大的,因为设计师对于产品的认知有了断层,主要负责内容也停留在框架层和表现层。因此,此次体验改版则以最可能推动产品优化的方案为目标入手,也就是最小成本入手,只对框架层、结构层和表现层进行优化。
4_优化方向.png问题总结
仅从表现层、结构层来看,慧徕店APP的问题可以概括为
5_问题整理.png优化方向
基于以上问题,将优化方向也分为以下三点
6_优化目标.png首页问题
首页作为产品最主要的页面,承担着产品的视觉风格与主要业务,但此次优化首先将问题聚焦于产品可用性上: 1.将【今日收款】功能的可点击状态明确表现出来,并根据商户的不同状态展示不同的功能; 2.将图标按照高低频使用做了明显的层级划分; 3.对于消息功能不够吸引人的问题,则是由于原版字号过小,且引导按钮不够明显,因此优化方向也是加大字号,加强字体层级展示,并放置一个更为明显的点击按钮;
4.对于有歧义的微文案进行调整,如【流水查询】改为【交易流水】等,避免给用户造成该功能只能“查询”的误解。
7_1_首页问题.png然而首页上,点击收款金额和账单记录后会进入同一个页面,造成功能重复,于是便对【今日收款】功能进行了重构:
1.对于用户来说,查看金额不止于今日,通常会有本周、本月等概览,需要在原有基础上查看多个时间段数据; 2.优化点击后的详情页,并将位于【我的】页面里的【我的余额】功能放入【我的钱包】中,将产品中关于金融、提现的功能集成在一处,避免结构或者功能混乱;
7_2_方案二.png 8_我的页面.png商户页优化
商户页面的功能主要在于交互设计的不合理,因此优化方向也是在原有基础上优化交互方式: 1.改变大卡片式的设计,实际切换卡片时只有用户名称进行了切换,因此在交互形式上只做商户名称的改变即可;
2.改变图标区域的的视觉呈现方式,从图标形式改为列表形式,提升页面的空间利用率,避免造成大量留白和视觉不齐的情况;
3.右上角【+】号功能分为商户绑定和信息刷新,根据奥卡姆剃刀原理-如无必要,勿增实体,现可以去掉手动刷新,并显示隐藏功能;
4.将消息提醒功能改为snackbar,并可随时取消,避免对用户造成干扰。
9_商户页面.png交易流水界面优化
交易流水页面的问题主要在于筛选交互过于冗余,原版在筛选功能上,既有快速筛选,又有全部筛选,一方面造成了功能重复,让用户理解起来产生歧义,另一方面,当涉及到二次筛选时,又会弹出新的弹窗,在交互结构上会显得很复杂。因此,交易流水的主要优化层次方面有:
1.精简文案,由【交易流水查询】改为【交易流水】;
2.修改交互方式,在继承原版交互结构的基础下(保留快速筛选),将不常用的筛选功能放置在最后一个选项里,并优化二次筛选、三级筛选的结构,避免出现过多弹窗;
3.加强固定业务展示的层级,并减少整体分割展示。
10_1_流水查询.png对于交易流水页面中的固定业务模块,在考虑其边界值时,也尝试了多种方案,但此处只是根据原版UI做的版式优化,在功能和结构上是否还可以进一步优化则有待商榷。
10_2_流水查询业务模块多种展示.png账单查询
账单查询页,其主要问题也在于交互问题,对于商户的使用逻辑来说,首先是日月账的切换,然后才是针对不同门店的日期筛选,因此在逻辑上也按照日月账切换-门店选择-日期选择的顺序来进行层级划分。
11_账单查询.png账单详情页原本是通过账单页点击进去之后才有的,按照之前的逻辑,从某一个账单单击进去之后,依然可以进行全局的账单切换,在这种逻辑下,账单详情与账单页应属于并列关系而不是上下级关系。其次,对于支付情况的统计,目前只有四种支付方式,因此可以将统计方式换成更为直观的数字统计,而总览统计形式改为折线形式,便于用户更直观的观察收入情况。
12_账单统计.png商户详情页展示
商户详情页被线条切割,整体视觉的负担较重,且标题与内容被切割得过于分散,使标题的从属关系难以辨认,因此优化后采用卡片式设计,去掉线条分割带来的视觉负担,并加强标题与内容的关联。
13_1_表单页.png之前在做表单相关的组件时,在组件使用的场景上是特别让人头疼的,因为修改前,数据输入和数据展示的样式是一致的,无论对用户还是设计人员来说,都会造成混乱。
表单的交互会复杂一些,不过依然可以从以下几个点来进行优化:
- 表单标签
- 输入限制
- 占位符
- input 输入框大小
- 输入框焦点
- 多行文字规则
- 报错提醒
- 唤起键盘样式(移动端专属)
- 帮助性信息
- 表单属性(是否必填)
- 结果反馈
- 微文案
结果如下图
13_2_表单页.png设计规范总结
在视觉表现上,增加了文字的视觉层级,并增加了间距大小,使整体的节奏感和可读性更好。
沟通与反馈
用这套方案,我分别去和组长、产品经理以及领导去进行了讨论沟通,基本都得到比较正面的反馈,也因为这套方案了解到了产品经理对之后业务的整体规划,并且将产品中现存的问题和解决方案很好的反馈给了产品经理。
总结
此次由于产品问题较多,所以做了比较全面的优化,不过对于日常需求来说都可以使用这些方法去主动推动优化:
1.在提出想法前,先做方案呈现,并给出合理的说明;
2.多方验证,听取意见,确保得到合理的设计反馈;
3.保持积极主动的心态。
网友评论