设计复盘：一个按钮改版的四步总结

大家好，我是胖小魚。

本文首发于微信公众号：胖小魚设计小栈，欢迎关注

本文共2300字，需要阅读时间约6分钟~

作为UI设计师，虽然现在做了很多项目，但是实际上每一次想要做好，过程都还是很痛苦的。尤其是前段时间，身心俱疲，时间、心情、精力都不在线。但恰恰接到的又是一个重头的急活，产品方也不清楚自己想要什么效果，所以一开始改版的心路很渺茫。

不过也由于这次的经历也让我更加明白设计方法的重要性，越是短时间内，越需要理性分析。在实际工作中，产品有时候因为项目急需上线，给我们的时间会非常有限，根本没有太多的时间去给你思考，就比如我这次，只有半天时间去思考设计。那么如此短的时间，如何提出有效的设计方案呢？

一、搞清楚需求来自哪里，具体是什么

以这次为例，学习圈页面刚上线不久，当时也是设计了许多方案，都被pass了，如下：

产品方提出页面上方的发布按钮需要重新设计，那我就要搞清楚具体是谁提出的意见，为什么要重新设计，这样才不会让自己处于完全被动状态。

由于项目刚上线，数据库也因为某些原因还不能检测点击和转化量，无法得知哪种按钮点击量高。产品方也不清楚想要什么效果，需求方向不明确就着急去动手设计，那对于设计师来说无疑是最低效的，问明白需求后再通过竞品分析、产品体验、用户喜好等方式去突破。

所以接下来需要我们主动出击引导产品方，得出一些需求具体的方向。那怎么去引导？反向思维法，既然需要改动的是不确定的，那么我们可以确定那些不需要改动的地方——通过排除不需要改动的，来确定需要改动。

需要排除的是：整体页面排版布局、按钮设计方向（扁平、立体、简洁、卡通等方向）、动效方向、背景（颜色元素）。

通过沟通后明确的是：

1、整体布局没有问题，所以这块不需要有改动

2、按钮点击感不强，产品用户群体是6～14岁的学生，根据用户审美偏好，所以主要方向就是立体、卡通

3、动效不够明显，需要更明显有趣一些

4、整体颜色太冷静，所以背景颜色和元素细节需要修改

在第一版时已经对相关竞品做了分析，基本是一个纯色背景上加一个具象化大按钮，发布功能使用加号、笔、照相机等元素来制作按钮，原则：按钮凸显，背景元素比较少。其实按钮如果用照相机这种结构复杂点的元素去设计会更有方向，但是我们左上角会有拍米币的功能，用相机会更直接一些，而加号笔画过于简单，可延展性不强，所以改版的话最终决定还是使用铅笔作为图标设计元素。

关于整体颜色方向，上一版颜色设计原理是背景用产品主色（蓝色）+白色按钮，不过产品方提出太过冷静，一开始我想用色肯定要跟整个app的主色相关呀，就跳不出蓝色背景的思维，后来决定先跳出来，配色思维反过来，背景不局限在主色，按钮及周边装饰元素可使用产品的主色。

时间紧急，当时想到的是常用的太空元素（有空间感、好延展、符合用户喜好），于是背景就选了蓝紫色（据研究，紫色也是小学生最喜欢的颜色，性别倾向相对偏弱，在色环上是蓝色的邻近色，协调又会有对比。）

二、想明白要尝试的方向

在设计前，我先在心里大致分了两个设计方向：

1、常规大按钮样式

2、非常规按钮样式 

以下便是常规大按钮设计稿：

非常规按钮设计稿

在尝试的这期间，对于有疑问的地方一定要跟需求方及时沟通，及时反馈，确保自己的设计在功能上没有遗漏。比如我这次，是通过询问一个产品经理，才得知，按钮上需要加文字，才在后面加上了。

三、善于运用对比进行排除

大体方案出来后，通过优缺点分析对比，同产品方选出最适合的方案。

常规按钮设计稿

优点：容易被用户所熟知，用户的学习成本低，更容易点击

缺点：对于小学生来说吸引力不够，形状上偏规矩，不够活泼，另外上方第一个元素稍微有一点抢主角的光环

非常规按钮设计稿

优点：配合动效会更有吸引力一些

缺点：用户的学习成本比较高

通过对比，大家一致倾向非常规按钮，那就在气泡与星球这两者中选出最终方案。在APP的任务页面也有星球的按钮，用户已经对星球有了一定的点击感知，减少了学习成本，最终选择了星球。

四、细节优化

优化方向：1、颜色调整

                  2、细节元素调整

                  3、添加动效 

1、颜色调整

现在看着球跟背景区分不是很明显，整体偏灰，需要加强对比，球的颜色需要调亮调纯。我们看下色环：

90度以内的邻近色，搭配在一起和谐又不失活泼。所以可以尝试将球的颜色改为背景蓝紫色的邻近色：红色或者天蓝色，如图：

红色的球虽然跟背景拉开了对比，但是过于鲜艳，大家反应有点类似于心脏

所以相对来说蓝色的球比较适合，也跟APP的主色相呼应。

2、细节元素调整

球的环境色过于明显，需弱化一些；周边增加几个小球，四周边缘的球太抢，也需要弱化 ；文字“写一写”由常规字体改为大一点的手写字体：

3、添加动效

鉴于上线版本的动效反馈说不明显，按钮点击感偏弱，所以这次动效优化点需要凸显星球本身。第一想到的就是呼吸效果，但是只有一个呼吸有点单一，周边可以添加一些社交鼓励的元素，如鲜花、笑脸、太阳，动效一开始想着是从球两边飞出来，但是经过对比就参考了直播送奖励的形式，相对来说辅助性稍微好一些，视觉上不会过于太抢主角，如下最终呈现结果： 

如果有限时间内想要让需求方得到满意方案，所以以下两点我觉得是挺重要的：

1、对比排除法是一个很好的工作方法；一个西瓜到底好不好，拿另一个进行比较就知道了。

2、及时反馈：很多时候什么结果并不是一开始就知道，所以在做的过程中需要不断理顺想法。此时很重要的一点就是，跟需求方及时反馈，无论是正向的还是负向的，否则结果不是老板所期望的，自己也会陷入无限的苦恼中。

 

好啦，文章写到这里，如果大家有更好地意见也欢迎留言

虽然我们只是一颗小小的螺丝钉，但也要做一颗有思想有想法的螺丝钉 ，一起努力就好！

欢迎关注微信公众号：胖小魚设计小栈