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

大家好 

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

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

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

以这次为例,这个页面刚上线不久,当时也是设计了许多方案,都被pass了,如下:

被pass的部分设计稿:

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

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

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

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

Ok,通过沟通后我明确的是:

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

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

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

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

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

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

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

二、想明白要尝试的方向

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

1、常规大按钮样式

2、非常规按钮样式 

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


非常规按钮设计稿

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

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

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

常规按钮设计稿

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

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

非常规按钮设计稿

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

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

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

四、细节优化

优化方向:1、颜色调整

2、细节元素调整

3、添加动效 

1、颜色调整

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

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

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

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

2、细节元素调整

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


3、添加动效

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

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

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

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

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

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,736评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,167评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,442评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,902评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,302评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,573评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,847评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,562评论 0 197
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,260评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,531评论 2 245
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,021评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,367评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,016评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,068评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,827评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,610评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,514评论 2 269