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.保持积极主动的心态。