作為UI設(shè)計(jì)師，雖然現(xiàn)在做了很多項(xiàng)目，但是實(shí)際上每一次想要做好，過(guò)程都還是很痛苦的。尤其是前段時(shí)間，身心俱疲，時(shí)間、心情、精力都不在線。但恰恰接到的又是一個(gè)重頭的急活，產(chǎn)品方也不清楚自己想要什么效果，所以一開始改版的心路很渺茫。

不過(guò)也由于這次的經(jīng)歷也讓我更加明白設(shè)計(jì)方法的重要性，越是短時(shí)間內(nèi)，越需要理性分析。在實(shí)際工作中，產(chǎn)品有時(shí)候因?yàn)轫?xiàng)目急需上線，給我們的時(shí)間會(huì)非常有限，根本沒(méi)有太多的時(shí)間去給你思考，就比如我這次，只有半天時(shí)間去思考設(shè)計(jì)。那么如此短的時(shí)間，如何提出有效的設(shè)計(jì)方案呢？

搞清楚需求來(lái)自哪里，具體是什么

以這次為例，學(xué)習(xí)圈頁(yè)面剛上線不久，當(dāng)時(shí)也是設(shè)計(jì)了許多方案，都被pass了，如下：

產(chǎn)品方提出頁(yè)面上方的發(fā)布按鈕需要重新設(shè)計(jì)，那我就要搞清楚具體是誰(shuí)提出的意見(jiàn)，為什么要重新設(shè)計(jì)，這樣才不會(huì)讓自己處于完全被動(dòng)狀態(tài)。

由于項(xiàng)目剛上線，數(shù)據(jù)庫(kù)也因?yàn)槟承┰蜻€不能檢測(cè)點(diǎn)擊和轉(zhuǎn)化量，無(wú)法得知哪種按鈕點(diǎn)擊量高。產(chǎn)品方也不清楚想要什么效果，需求方向不明確就著急去動(dòng)手設(shè)計(jì)，那對(duì)于設(shè)計(jì)師來(lái)說(shuō)無(wú)疑是效的，問(wèn)明白需求后再通過(guò)競(jìng)品分析、產(chǎn)品體驗(yàn)、用戶喜好等方式去突破。

所以接下來(lái)需要我們主動(dòng)出擊引導(dǎo)產(chǎn)品方，得出一些需求具體的方向。那怎么去引導(dǎo)？反向思維法，既然需要改動(dòng)的是不確定的，那么我們可以確定那些不需要改動(dòng)的地方——通過(guò)排除不需要改動(dòng)的，來(lái)確定需要改動(dòng)。

需要排除的是：整體頁(yè)面排版布局、按鈕設(shè)計(jì)方向（扁平、立體、簡(jiǎn)潔、卡通等方向）、動(dòng)效方向、背景（顏色元素）。

通過(guò)溝通后明確的是：

• 整體布局沒(méi)有問(wèn)題，所以這塊不需要有改動(dòng)
• 按鈕點(diǎn)擊感不強(qiáng)，產(chǎn)品用戶群體是6～14歲的學(xué)生，根據(jù)用戶審美偏好，所以主要方向就是立體、卡通
• 動(dòng)效不夠明顯，需要更明顯有趣一些
• 整體顏色太冷靜，所以背景顏色和元素細(xì)節(jié)需要修改

在第一版時(shí)已經(jīng)對(duì)相關(guān)競(jìng)品做了分析，基本是一個(gè)純色背景上加一個(gè)具象化大按鈕，發(fā)布功能使用加號(hào)、筆、照相機(jī)等元素來(lái)制作按鈕，原則：按鈕凸顯，背景元素比較少。其實(shí)按鈕如果用照相機(jī)這種結(jié)構(gòu)復(fù)雜點(diǎn)的元素去設(shè)計(jì)會(huì)更有方向，但是我們左上角會(huì)有拍米幣的功能，用相機(jī)會(huì)更直接一些，而加號(hào)筆畫過(guò)于簡(jiǎn)單，可延展性不強(qiáng)，所以改版的話最終決定還是使用鉛筆作為圖標(biāo)設(shè)計(jì)元素。

關(guān)于整體顏色方向，上一版顏色設(shè)計(jì)原理是背景用產(chǎn)品主色（藍(lán)色）+白色按鈕，不過(guò)產(chǎn)品方提出太過(guò)冷靜，一開始我想用色肯定要跟整個(gè)app的主色相關(guān)呀，就跳不出藍(lán)色背景的思維，后來(lái)決定先跳出來(lái)，配色思維反過(guò)來(lái)，背景不局限在主色，按鈕及周邊裝飾元素可使用產(chǎn)品的主色。

時(shí)間緊急，當(dāng)時(shí)想到的是常用的太空元素（有空間感、好延展、符合用戶喜好），于是背景就選了藍(lán)紫色（據(jù)研究，紫色也是小學(xué)生最喜歡的顏色，性別傾向相對(duì)偏弱，在色環(huán)上是藍(lán)色的鄰近色，協(xié)調(diào)又會(huì)有對(duì)比。）

想明白要嘗試的方向

在設(shè)計(jì)前，我先在心里大致分了兩個(gè)設(shè)計(jì)方向：

• 常規(guī)大按鈕樣式
• 非常規(guī)按鈕樣式

以下便是常規(guī)大按鈕設(shè)計(jì)稿：

非常規(guī)按鈕設(shè)計(jì)稿

在嘗試的這期間，對(duì)于有疑問(wèn)的地方一定要跟需求方及時(shí)溝通，及時(shí)反饋，確保自己的設(shè)計(jì)在功能上沒(méi)有遺漏。比如我這次，是通過(guò)詢問(wèn)一個(gè)產(chǎn)品經(jīng)理，才得知，按鈕上需要加文字，才在后面加上了。

善于運(yùn)用對(duì)比進(jìn)行排除

大體方案出來(lái)后，通過(guò)優(yōu)缺點(diǎn)分析對(duì)比，同產(chǎn)品方選出最適合的方案。

1. 常規(guī)按鈕設(shè)計(jì)稿

優(yōu)點(diǎn)：容易被用戶所熟知，用戶的學(xué)習(xí)成本低，更容易點(diǎn)擊

缺點(diǎn)：對(duì)于小學(xué)生來(lái)說(shuō)吸引力不夠，形狀上偏規(guī)矩，不夠活潑，另外上方第一個(gè)元素稍微有一點(diǎn)搶主角的光環(huán)

2. 非常規(guī)按鈕設(shè)計(jì)稿

優(yōu)點(diǎn)：配合動(dòng)效會(huì)更有吸引力一些

缺點(diǎn)：用戶的學(xué)習(xí)成本比較高

通過(guò)對(duì)比，大家一致傾向非常規(guī)按鈕，那就在氣泡與星球這兩者中選出最終方案。在APP的任務(wù)頁(yè)面也有星球的按鈕，用戶已經(jīng)對(duì)星球有了一定的點(diǎn)擊感知，減少了學(xué)習(xí)成本，最終選擇了星球。

細(xì)節(jié)優(yōu)化

優(yōu)化方向：

• 顏色調(diào)整
• 細(xì)節(jié)元素調(diào)整
• 添加動(dòng)效

1. 顏色調(diào)整

現(xiàn)在看著球跟背景區(qū)分不是很明顯，整體偏灰，需要加強(qiáng)對(duì)比，球的顏色需要調(diào)亮調(diào)純。我們看下色環(huán)：

90度以內(nèi)的鄰近色，搭配在一起和諧又不失活潑。所以可以嘗試將球的顏色改為背景藍(lán)紫色的鄰近色：紅色或者天藍(lán)色，如圖：

紅色的球雖然跟背景拉開了對(duì)比，但是過(guò)于鮮艷，大家反應(yīng)有點(diǎn)類似于心臟。

所以相對(duì)來(lái)說(shuō)藍(lán)色的球比較適合，也跟APP的主色相呼應(yīng)。

2. 細(xì)節(jié)元素調(diào)整

球的環(huán)境色過(guò)于明顯，需弱化一些；周邊增加幾個(gè)小球，四周邊緣的球太搶，也需要弱化 ；文字“寫一寫”由常規(guī)字體改為大一點(diǎn)的手寫字體：

3. 添加動(dòng)效

鑒于上線版本的動(dòng)效反饋說(shuō)不明顯，按鈕點(diǎn)擊感偏弱，所以這次動(dòng)效優(yōu)化點(diǎn)需要凸顯星球本身。第一想到的就是呼吸效果，但是只有一個(gè)呼吸有點(diǎn)單一，周邊可以添加一些社交鼓勵(lì)的元素，如鮮花、笑臉、太陽(yáng)，動(dòng)效一開始想著是從球兩邊飛出來(lái)，但是經(jīng)過(guò)對(duì)比就參考了直播送獎(jiǎng)勵(lì)的形式，相對(duì)來(lái)說(shuō)輔助性稍微好一些，視覺(jué)上不會(huì)過(guò)于太搶主角，如下最終呈現(xiàn)結(jié)果：

如果有限時(shí)間內(nèi)想要讓需求方得到滿意方案，所以以下兩點(diǎn)我覺(jué)得是挺重要的：

• 對(duì)比排除法是一個(gè)很好的工作方法；一個(gè)西瓜到底好不好，拿另一個(gè)進(jìn)行比較就知道了。
• 及時(shí)反饋：很多時(shí)候什么結(jié)果并不是一開始就知道，所以在做的過(guò)程中需要不斷理順想法。此時(shí)很重要的一點(diǎn)就是，跟需求方及時(shí)反饋，無(wú)論是正向的還是負(fù)向的，否則結(jié)果不是老板所期望的，自己也會(huì)陷入無(wú)限的苦惱中。

好啦，文章寫到這里，如果大家有更好地意見(jiàn)也歡迎留言

文章來(lái)源：優(yōu)設(shè)網(wǎng)     作者：麥芽糖

藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)