2020-12-31 周周
作為UI設(shè)計(jì)師,雖然現(xiàn)在做了很多項(xiàng)目,但是實(shí)際上每一次想要做好,過程都還是很痛苦的。尤其是前段時(shí)間,身心俱疲,時(shí)間、心情、精力都不在線。但恰恰接到的又是一個(gè)重頭的急活,產(chǎn)品方也不清楚自己想要什么效果,所以一開始改版的心路很渺茫。
不過也由于這次的經(jīng)歷也讓我更加明白設(shè)計(jì)方法的重要性,越是短時(shí)間內(nèi),越需要理性分析。在實(shí)際工作中,產(chǎn)品有時(shí)候因?yàn)轫?xiàng)目急需上線,給我們的時(shí)間會(huì)非常有限,根本沒有太多的時(shí)間去給你思考,就比如我這次,只有半天時(shí)間去思考設(shè)計(jì)。那么如此短的時(shí)間,如何提出有效的設(shè)計(jì)方案呢?
以這次為例,學(xué)習(xí)圈頁面剛上線不久,當(dāng)時(shí)也是設(shè)計(jì)了許多方案,都被pass了,如下:
產(chǎn)品方提出頁面上方的發(fā)布按鈕需要重新設(shè)計(jì),那我就要搞清楚具體是誰提出的意見,為什么要重新設(shè)計(jì),這樣才不會(huì)讓自己處于完全被動(dòng)狀態(tài)。
由于項(xiàng)目剛上線,數(shù)據(jù)庫也因?yàn)槟承┰蜻€不能檢測(cè)點(diǎn)擊和轉(zhuǎn)化量,無法得知哪種按鈕點(diǎn)擊量高。產(chǎn)品方也不清楚想要什么效果,需求方向不明確就著急去動(dòng)手設(shè)計(jì),那對(duì)于設(shè)計(jì)師來說無疑是效的,問明白需求后再通過競(jìng)品分析、產(chǎn)品體驗(yàn)、用戶喜好等方式去突破。
所以接下來需要我們主動(dòng)出擊引導(dǎo)產(chǎn)品方,得出一些需求具體的方向。那怎么去引導(dǎo)?反向思維法,既然需要改動(dòng)的是不確定的,那么我們可以確定那些不需要改動(dòng)的地方——通過排除不需要改動(dòng)的,來確定需要改動(dòng)。
需要排除的是:整體頁面排版布局、按鈕設(shè)計(jì)方向(扁平、立體、簡(jiǎn)潔、卡通等方向)、動(dòng)效方向、背景(顏色元素)。
通過溝通后明確的是:
在第一版時(shí)已經(jīng)對(duì)相關(guān)競(jìng)品做了分析,基本是一個(gè)純色背景上加一個(gè)具象化大按鈕,發(fā)布功能使用加號(hào)、筆、照相機(jī)等元素來制作按鈕,原則:按鈕凸顯,背景元素比較少。其實(shí)按鈕如果用照相機(jī)這種結(jié)構(gòu)復(fù)雜點(diǎn)的元素去設(shè)計(jì)會(huì)更有方向,但是我們左上角會(huì)有拍米幣的功能,用相機(jī)會(huì)更直接一些,而加號(hào)筆畫過于簡(jiǎn)單,可延展性不強(qiáng),所以改版的話最終決定還是使用鉛筆作為圖標(biāo)設(shè)計(jì)元素。
關(guān)于整體顏色方向,上一版顏色設(shè)計(jì)原理是背景用產(chǎn)品主色(藍(lán)色)+白色按鈕,不過產(chǎn)品方提出太過冷靜,一開始我想用色肯定要跟整個(gè)app的主色相關(guān)呀,就跳不出藍(lán)色背景的思維,后來決定先跳出來,配色思維反過來,背景不局限在主色,按鈕及周邊裝飾元素可使用產(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ī)大按鈕設(shè)計(jì)稿:
非常規(guī)按鈕設(shè)計(jì)稿
在嘗試的這期間,對(duì)于有疑問的地方一定要跟需求方及時(shí)溝通,及時(shí)反饋,確保自己的設(shè)計(jì)在功能上沒有遺漏。比如我這次,是通過詢問一個(gè)產(chǎn)品經(jīng)理,才得知,按鈕上需要加文字,才在后面加上了。
大體方案出來后,通過優(yōu)缺點(diǎn)分析對(duì)比,同產(chǎn)品方選出最適合的方案。
1. 常規(guī)按鈕設(shè)計(jì)稿
優(yōu)點(diǎn):容易被用戶所熟知,用戶的學(xué)習(xí)成本低,更容易點(diǎn)擊
缺點(diǎn):對(duì)于小學(xué)生來說吸引力不夠,形狀上偏規(guī)矩,不夠活潑,另外上方第一個(gè)元素稍微有一點(diǎn)搶主角的光環(huán)
2. 非常規(guī)按鈕設(shè)計(jì)稿
優(yōu)點(diǎn):配合動(dòng)效會(huì)更有吸引力一些
缺點(diǎn):用戶的學(xué)習(xí)成本比較高
通過對(duì)比,大家一致傾向非常規(guī)按鈕,那就在氣泡與星球這兩者中選出最終方案。在APP的任務(wù)頁面也有星球的按鈕,用戶已經(jīng)對(duì)星球有了一定的點(diǎn)擊感知,減少了學(xué)習(xí)成本,最終選擇了星球。
優(yōu)化方向:
1. 顏色調(diào)整
現(xiàn)在看著球跟背景區(qū)分不是很明顯,整體偏灰,需要加強(qiáng)對(duì)比,球的顏色需要調(diào)亮調(diào)純。我們看下色環(huán):
90度以內(nèi)的鄰近色,搭配在一起和諧又不失活潑。所以可以嘗試將球的顏色改為背景藍(lán)紫色的鄰近色:紅色或者天藍(lán)色,如圖:
紅色的球雖然跟背景拉開了對(duì)比,但是過于鮮艷,大家反應(yīng)有點(diǎn)類似于心臟。
所以相對(duì)來說藍(lán)色的球比較適合,也跟APP的主色相呼應(yīng)。
2. 細(xì)節(jié)元素調(diào)整
球的環(huán)境色過于明顯,需弱化一些;周邊增加幾個(gè)小球,四周邊緣的球太搶,也需要弱化 ;文字“寫一寫”由常規(guī)字體改為大一點(diǎn)的手寫字體:
3. 添加動(dòng)效
鑒于上線版本的動(dòng)效反饋說不明顯,按鈕點(diǎn)擊感偏弱,所以這次動(dòng)效優(yōu)化點(diǎn)需要凸顯星球本身。第一想到的就是呼吸效果,但是只有一個(gè)呼吸有點(diǎn)單一,周邊可以添加一些社交鼓勵(lì)的元素,如鮮花、笑臉、太陽,動(dòng)效一開始想著是從球兩邊飛出來,但是經(jīng)過對(duì)比就參考了直播送獎(jiǎng)勵(lì)的形式,相對(duì)來說輔助性稍微好一些,視覺上不會(huì)過于太搶主角,如下最終呈現(xiàn)結(jié)果:
如果有限時(shí)間內(nèi)想要讓需求方得到滿意方案,所以以下兩點(diǎn)我覺得是挺重要的:
好啦,文章寫到這里,如果大家有更好地意見也歡迎留言
文章來源:優(yōu)設(shè)網(wǎng) 作者:麥芽糖
藍(lán)藍(lán)設(shè)計(jì)( www.teruid.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(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ù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.teruid.com