实战案例!如何在短时间内,提出有效的设计方案?

释放双眼,带上耳机,听听看~!
产品有时候因为项目急需上线,给我们的时间会非常有限。那么如此短的时间,如何提出有效的设计方案呢?

大家好,我是胖小魚。本文共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 ; Rf 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 :

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

实战案例!如何在短时间内,提出有效的设计方案?

实战案例!如何在短时间内,提出有效的设计方案?

给TA打赏
共{{data.count}}人
人已打赏
教程分享

快记下来!5个连大厂设计师都容易搞混的控件与规范

2021-1-10 5:47:07

教程分享

想让按钮设计更精致?收下这20条超实用的技巧

2021-1-10 5:47:57

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索