实战案例！如何在短时间内，提出有效的设计方案？

大家好，我是胖小魚。本文共2300字，需要阅读时间约6分钟~

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

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

搞清楚需求来自哪里，具体 _ } ` K $ ) l是什么

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

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

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

所以接下来需要我们主动出击引导产品方，得出2 & 7 I Y r Y ^一些需求具体的方向。那怎么去引导？反向思维法，既然需要改动的是不确定的，那3 p s t k U l 么我们可以确定那些不需要改动的地方——通过排除不需要L : ( 4改动的，来确定需要改动。

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

通过沟通后明确的是：

• 整体布局没有问题，所以这块不需要有改动
• 按钮点击感不强，产品用户群体是6～14岁的学生，根据用户审美偏好，所以主要方向就是立体、卡通
• 动效不够明显，需要更明显有趣一些
• 整体颜色太冷静，所以背景颜色和元素细节需要修改

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

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

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

想明白要尝试的方向

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

• 常规大按钮样式
• 非常规按钮样式

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

非常规按钮设计稿

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

善于运用对比进行排除

大体方案出来后? I + h !，通过优缺点分析对比，同产品z B 3方选出最适合的方案。

1. 常规按钮设计稿

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

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

2. 非常规按钮设计稿

优点：配a w I G合动效/ – + _ P u F j会更有K [ D m f / 1 l吸引力一些

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

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

细节优化

优化方向：

• 颜色调整
• 细节元素调整
• 添加动效

1. 颜色调整

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

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

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

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

2. 细节元素调整

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

3C ? | 6 m ! I d ;. 添加动效

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

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

• 对比# ; 3 n排除法是一个很好的工作方法；一个西瓜到{ ( . ; 6 D L p底好不好，拿另一个进行比较就知道了。
• 及时反馈：很多时候什么结果并不是一开始就知道，所以在做的过程中需要不断理顺想法。此5 ? s时很重要的一点就是，跟需求方及时反馈，无论是正向的还是负向的，否则O & D i ! g结果不是老板所期望的，自己也会陷入无限的苦恼中。

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

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

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