木子素材 首页 大神 UI设计 查看内容

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

2020-12-29 00:12| 发布者: admin| 查看: 743| 评论: 0

摘要: 大家好,我是胖小魚。本文共2300字,需要阅读时间约6分钟~ 作为UI设计师,虽然现在做了很多项目,但是实际上每一次想要做好,过程都还是很痛苦的。尤其是前段时间,身心俱疲,时间、心情、精力都不在线。但恰恰接到 ...
二维码1

扫一扫
官方手机版

AI创作助手小程序

扫一扫
AI创作程序

木子官方公众号

扫一扫
木子公众号

木子AI官方公众号

扫一扫
AI公众号

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

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

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

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

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

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

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

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

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

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

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

通过沟通后明确的是:

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

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

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

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

想明白要尝试的方向

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

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

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

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

非常规按钮设计稿

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

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

善于运用对比进行排除

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

1. 常规按钮设计稿

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

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

2. 非常规按钮设计稿

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

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

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

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

细节优化

优化方向:

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

1. 颜色调整

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

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

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

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

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

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

2. 细节元素调整

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

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

3. 添加动效

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

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

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

  • 对比排除法是一个很好的工作方法;一个西瓜到底好不好,拿另一个进行比较就知道了。
  • 及时反馈:很多时候什么结果并不是一开始就知道,所以在做的过程中需要不断理顺想法。此时很重要的一点就是,跟需求方及时反馈,无论是正向的还是负向的,否则结果不是老板所期望的,自己也会陷入无限的苦恼中。

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

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

实战案例!WPS 2021 年度设计改版完整复盘

随着用户使用 WPS Office 的场景逐渐多样化、对产品的体验要求也逐渐提高,我们在视觉层面上围绕着「以用户为中心」开始了一次全新的视觉改版:追求简洁、高效、一致的办公环境,精心打造极致的办公体验。

阅读文章 >

为什么刷抖音停不下来?来了解这个经典的「上瘾模型」

大家好,我是胖小魚。

阅读文章 >

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

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

手机扫一扫,阅读下载更方便˃ʍ˂

@版权声明

1、本网站文章、帖子等仅代表作者本人的观点,与本站立场无关。
2、转载或引用本网版权所有之内容须注明“转自(或引自)网”字样,并标明本网网址。
3、本站所有图片和资源来源于用户上传和网络,仅用作展示,如有侵权请联系站长!QQ: 13671295。


路过

雷人

握手

鲜花

鸡蛋

最新评论

广告图片
悬浮图片
×