界面設(shè)計:為什么你的圖標(biāo)總是缺了點(diǎn)意思?
圖標(biāo)設(shè)計,找到合適的參考十分關(guān)鍵。不要拘泥于當(dāng)前的任務(wù)的狀態(tài),過于拘束于同類產(chǎn)品的設(shè)計風(fēng)格,尋找更多優(yōu)秀的圖標(biāo)參考,從中汲取一些合適的元素以及創(chuàng)作靈感,或許你的設(shè)計就能更上一層樓。
我們之前一直講的都是理論篇,今天來一個關(guān)于界面底部圖標(biāo)的實(shí)戰(zhàn)總結(jié)吧,故事的開始是我們?nèi)ツ昴昴┑臅r候做的界面練習(xí),我們要完成漫畫類APP的首頁界面設(shè)計,僅僅是由7個模塊組成的首頁設(shè)計,我足足花了將近兩個月才做出來一個半成品(想哭一會o(╥﹏╥)o)。我們今天就好好說一下我歷時兩周,做了四稿才完成的底部圖標(biāo)吧。
做圖標(biāo)的時候整個過程大概分為以下幾個階段:
- 收到任務(wù)
- 找參考
- 根據(jù)參考執(zhí)行
- 被駁回陷入沉思
- 再次執(zhí)行
一、收到任務(wù)
我們每天在工作中都會收到不同的設(shè)計任務(wù),作為正在成長的設(shè)計師,順利完成這些任務(wù)是我們最基本的能力,所以主角登場啦!噔噔噔噔~先做一套漫畫類的底部圖標(biāo),師傅覺得ok才可以!當(dāng)時的我覺得很簡單(too naive),下載了一些漫畫類的APP,認(rèn)真的構(gòu)思中。
二、找參考
下載到的漫畫APP這個時候發(fā)揮了作用,我在找了很多參考,先看看別人是怎么做的,給你們先展示一下,如下圖:
根據(jù)參考執(zhí)行有了這么多參考的我無疑是很自信的,覺得自己肯定會做的很好,先給你們看一下我第一稿和第三稿(第二稿我沒找著,跟第一稿只有顏色差別)
第一稿:
第一稿是我直接找的某一個APP的底部圖標(biāo)抄的,只改動了一點(diǎn)點(diǎn),被駁回的理由是因為外形太常見了,不夠特別也不夠有趣,我相信應(yīng)該很多剛?cè)腴T的設(shè)計師應(yīng)該也會跟我一樣吧,很懶的同時還不會找參考,全世界那么多參考,偏偏我就能看中最丑那一堆(也可能只有我自己是這樣)。
第三稿:
然后我就改變了方向也吸取了上一次的教訓(xùn),找一些外形比較特別,并且把有趣的點(diǎn)定在點(diǎn)擊前后圖標(biāo)會有變化的。這個時候的參考已經(jīng)沒有局限在漫畫類的APP上了,我把手機(jī)上所有看著外形比較特別的APP的底部icon都找了一遍,沒有的就去花瓣找,給你們看一下我的參考:
雖然還是沒過,沒過的原因是不夠有趣,當(dāng)時覺得簡直是要被逼死了,要多有趣啊,我的天哪!不過現(xiàn)在回頭來看,可能是因為外形不夠出彩同時沒什么特點(diǎn),第三稿的圖標(biāo)與市面上的并沒有讓人記住的點(diǎn),同時也不適合用在漫畫類的APP上。
不過當(dāng)時我的思路不對,思路已經(jīng)陷入了”有趣”的圖標(biāo)里面,沒整明白就去追波找有趣的圖標(biāo)尋找靈感了。大家應(yīng)該都有過這樣的經(jīng)歷吧,被駁回的設(shè)計因為別人說的點(diǎn),然后針對某個點(diǎn)來修改,但往往越改越找不到感覺,于是我要給你們看我當(dāng)時信心滿滿的第四稿啦!
第四稿:
是不是很有趣的,滑板車都出來了,我當(dāng)時畫圖標(biāo)的時候思維限死在了有趣這個點(diǎn)上了,畫完我還挺滿意的。
以下是我的參考:
這一稿自然也是沒有過,因為細(xì)節(jié)太多了,老實(shí)說我那時的內(nèi)心就是吶喊的土撥鼠。想要創(chuàng)新要特別同時還要有趣,真的好難啊,畫個圖標(biāo)不應(yīng)該這么難啊,也許真的是我的思路和方法有問題。
三、被駁回陷入沉思
正好這時候師傅讓我嘗試面性圖標(biāo),因為面性的圖標(biāo)比較好豐富細(xì)節(jié),并且能夠發(fā)揮的修飾程度比較廣泛,比較適合目前陷入瓶頸的我。而線性的圖標(biāo)比較具有品牌感,非常好規(guī)范并且能夠設(shè)計出一定的基調(diào),比較考驗設(shè)計師。
其他的小伙伴都進(jìn)入到下一個組件了,就只有我,還卡在底部的圖標(biāo)上,我把所有的小伙伴通過了的圖標(biāo)和參考都拿過來做研究了一下。他們的圖標(biāo)不復(fù)雜,但是又都很有看點(diǎn),并且也不乏有趣。
很認(rèn)真的總結(jié)了一下,我發(fā)現(xiàn)了我的問題在哪里了:外形不夠有特征同時細(xì)節(jié)太多,放在手機(jī)上,沒有辨識度的同時還會提高用戶的理解成本。
四、再次執(zhí)行
滿足圖標(biāo)的含義同時減少細(xì)節(jié),再結(jié)合漫畫APP的特點(diǎn),開始尋找新的圖標(biāo)設(shè)計方向,比如:我的圖標(biāo)中有一個社區(qū)的圖標(biāo),參考了很多社區(qū)的圖標(biāo),都沒有外觀和表現(xiàn)形式上很特別的,然后我看見了ACfun的APP圖標(biāo),同時想到了社區(qū)是個提供很多信息的地方,于是帶著兩個小包的八卦小圖標(biāo)就誕生啦!
這是最后通過了的第五稿:
對我來說,最明顯的進(jìn)步就是:在不斷試錯的過程中,提高了對參考的審美和篩選,以及在自己產(chǎn)出時加入自己的思考,包括點(diǎn)擊前后的趣味變化,保證自己畫出來的圖標(biāo)能夠與市面上的有所區(qū)別(大家不要太在意主題色的問題,因為是我們自己畫的原型圖,沒有品牌基因,所以在剛開始練習(xí)的時候顏色是隨便定的)。
五、劃重點(diǎn)
- 找到好的,以及合適的參考是一件非常重要的事情。不要拘泥于現(xiàn)在當(dāng)前的任務(wù)和狀態(tài),盡可能地搜集眾多優(yōu)點(diǎn)的圖標(biāo)參考,參考已有的設(shè)計,獲取靈感(并不局限在某一類的APP中,也不要過多的參考飛機(jī)稿,這個結(jié)論適用在任何組件里面)。
- 確定圖標(biāo)的樣式,既然確認(rèn)了要做面性的圖標(biāo),就開始做面性圖標(biāo)的設(shè)計思考,必要時借助輔助工具來確保圖標(biāo)的大小視覺一致,以及小細(xì)節(jié)的設(shè)計規(guī)范保持統(tǒng)一。
- 可能大家會覺得這篇文章說的實(shí)操性不是很大,其實(shí)我最想表達(dá)的是找到好的參考很重要,但是前提在于你有一雙發(fā)現(xiàn)好參考的眼睛,而這也是需要練習(xí)和試錯才會知道什么樣的參考和輸出才是合適的。
參考引文《品牌基因法做圖標(biāo)——實(shí)戰(zhàn)篇》
本文由 @潘團(tuán)子 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載
題圖來自 Unsplash,基于 CC0 協(xié)議
不得不說,這還真的是說的好詳細(xì),小白就可以按照方法來了。
第五稿比較形象化
沒學(xué)過設(shè)計都這樣
說實(shí)話,第五稿沒覺得多好
比較奇怪的是,為什么備選方案的用色跨度這么大?黃藍(lán)紫都用上了?難道不是優(yōu)先考慮品牌色嗎?
都挺棒的,最喜歡也是第四稿,確實(shí)更有趣味性,用戶是多元化的,比起漂亮更喜歡有特色的設(shè)計
現(xiàn)在的人受到社會的影響,很愛胡扯,瞎分析,呵呵,笑死了
最后一版本的那個社區(qū)的圖標(biāo),我以為是個小丑?? 哈哈哈
很棒!?。?!
的
第一版挺好看的,但是改動的也很有意思,學(xué)習(xí)了
第五稿磁帶播放機(jī),個人覺得,如果考慮到年輕用戶的話不一定是最好選擇,有多少00后都沒見過磁帶這玩意兒。第四版確實(shí)花了不少功夫,可能用在別的app上很合適,用在首頁設(shè)計,不一定大多數(shù)人能看懂
我也喜歡第四稿,第四稿來講的話,我覺得他如果說是作為一個動漫的話,有那種嗯,非常清晰感,然后還有一種夢幻感,第三稿我感覺有點(diǎn)太普通了,他就不搞的話,感覺沒有第四個比較簡單大方,所以我投第四稿
老板是看的改的煩了,無奈5稿通過算了
最喜歡第四稿耶
第五稿感覺每個圖標(biāo)都跟文字意思聯(lián)系不上…
第一版最好
簡單,有特點(diǎn),便于用戶理解的圖標(biāo)~
不錯
這個是設(shè)計干的,還是產(chǎn)品干的
風(fēng)格需求應(yīng)該是產(chǎn)品干的,產(chǎn)品要考慮整個系統(tǒng)的風(fēng)格與調(diào)性,設(shè)計跟進(jìn)產(chǎn)品的需求。按照產(chǎn)品的方向去實(shí)施。
剃須刀
設(shè)計好一款好看且實(shí)用的圖標(biāo),需要花費(fèi)一定的時間,并且需要很多的靈感,需要反復(fù)實(shí)驗,才能得出結(jié)論。
對
贊贊贊!很有趣,分析的很好,推薦給設(shè)計師朋友看看
哈哈哈哈看了這幾版,還是第一版最合我心意!
啊每一版都是“看著”很簡單,但是我做不出來的設(shè)計
有想法,也有執(zhí)行力,如果在出稿的時候能自審,有自己的判斷理論,那就更棒了!不過也不一定,也有可能甲方經(jīng)歷下改稿,他才感到這個設(shè)計費(fèi)值得,哈哈?。?/p>
為什么我感覺第一版最直觀啊 去掉字我都能很快get到是什么意思
幸虧你不是她的甲方,否則她嘔心瀝血地給你出了五版設(shè)計,你說這話,估計殺人的心都有了
第一版總感覺在哪見過,很眼熟
參考是可以,但是還是要有自己的想法才行啊
看場景以及行業(yè)
看場景,看產(chǎn)品,看行業(yè),選擇圖標(biāo)!