界面設(shè)計:為什么你的圖標總是缺了點意思?

74 評論 1160648 瀏覽 379 收藏 10 分鐘

圖標設(shè)計,找到合適的參考十分關(guān)鍵。不要拘泥于當前的任務(wù)的狀態(tài),過于拘束于同類產(chǎn)品的設(shè)計風格,尋找更多優(yōu)秀的圖標參考,從中汲取一些合適的元素以及創(chuàng)作靈感,或許你的設(shè)計就能更上一層樓。

我們之前一直講的都是理論篇,今天來一個關(guān)于界面底部圖標的實戰(zhàn)總結(jié)吧,故事的開始是我們?nèi)ツ昴昴┑臅r候做的界面練習,我們要完成漫畫類APP的首頁界面設(shè)計,僅僅是由7個模塊組成的首頁設(shè)計,我足足花了將近兩個月才做出來一個半成品(想哭一會o(╥﹏╥)o)。我們今天就好好說一下我歷時兩周,做了四稿才完成的底部圖標吧。

做圖標的時候整個過程大概分為以下幾個階段:

  1. 收到任務(wù)
  2. 找參考
  3. 根據(jù)參考執(zhí)行
  4. 被駁回陷入沉思
  5. 再次執(zhí)行

一、收到任務(wù)

我們每天在工作中都會收到不同的設(shè)計任務(wù),作為正在成長的設(shè)計師,順利完成這些任務(wù)是我們最基本的能力,所以主角登場啦!噔噔噔噔~先做一套漫畫類的底部圖標,師傅覺得ok才可以!當時的我覺得很簡單(too naive),下載了一些漫畫類的APP,認真的構(gòu)思中。

二、找參考

下載到的漫畫APP這個時候發(fā)揮了作用,我在找了很多參考,先看看別人是怎么做的,給你們先展示一下,如下圖:

為什么你的圖標總是缺了點意思

根據(jù)參考執(zhí)行有了這么多參考的我無疑是很自信的,覺得自己肯定會做的很好,先給你們看一下我第一稿和第三稿(第二稿我沒找著,跟第一稿只有顏色差別)

第一稿:

為什么你的圖標總是缺了點意思

第一稿是我直接找的某一個APP的底部圖標抄的,只改動了一點點,被駁回的理由是因為外形太常見了,不夠特別也不夠有趣,我相信應(yīng)該很多剛?cè)腴T的設(shè)計師應(yīng)該也會跟我一樣吧,很懶的同時還不會找參考,全世界那么多參考,偏偏我就能看中最丑那一堆(也可能只有我自己是這樣)。

第三稿:

為什么你的圖標總是缺了點意思

然后我就改變了方向也吸取了上一次的教訓,找一些外形比較特別,并且把有趣的點定在點擊前后圖標會有變化的。這個時候的參考已經(jīng)沒有局限在漫畫類的APP上了,我把手機上所有看著外形比較特別的APP的底部icon都找了一遍,沒有的就去花瓣找,給你們看一下我的參考:

為什么你的圖標總是缺了點意思

雖然還是沒過,沒過的原因是不夠有趣,當時覺得簡直是要被逼死了,要多有趣啊,我的天哪!不過現(xiàn)在回頭來看,可能是因為外形不夠出彩同時沒什么特點,第三稿的圖標與市面上的并沒有讓人記住的點,同時也不適合用在漫畫類的APP上。

不過當時我的思路不對,思路已經(jīng)陷入了”有趣”的圖標里面,沒整明白就去追波找有趣的圖標尋找靈感了。大家應(yīng)該都有過這樣的經(jīng)歷吧,被駁回的設(shè)計因為別人說的點,然后針對某個點來修改,但往往越改越找不到感覺,于是我要給你們看我當時信心滿滿的第四稿啦!

第四稿:

為什么你的圖標總是缺了點意思

是不是很有趣的,滑板車都出來了,我當時畫圖標的時候思維限死在了有趣這個點上了,畫完我還挺滿意的。

以下是我的參考:

為什么你的圖標總是缺了點意思

這一稿自然也是沒有過,因為細節(jié)太多了,老實說我那時的內(nèi)心就是吶喊的土撥鼠。想要創(chuàng)新要特別同時還要有趣,真的好難啊,畫個圖標不應(yīng)該這么難啊,也許真的是我的思路和方法有問題。

三、被駁回陷入沉思

正好這時候師傅讓我嘗試面性圖標,因為面性的圖標比較好豐富細節(jié),并且能夠發(fā)揮的修飾程度比較廣泛,比較適合目前陷入瓶頸的我。而線性的圖標比較具有品牌感,非常好規(guī)范并且能夠設(shè)計出一定的基調(diào),比較考驗設(shè)計師。

其他的小伙伴都進入到下一個組件了,就只有我,還卡在底部的圖標上,我把所有的小伙伴通過了的圖標和參考都拿過來做研究了一下。他們的圖標不復雜,但是又都很有看點,并且也不乏有趣。

為什么你的圖標總是缺了點意思

很認真的總結(jié)了一下,我發(fā)現(xiàn)了我的問題在哪里了:外形不夠有特征同時細節(jié)太多,放在手機上,沒有辨識度的同時還會提高用戶的理解成本。

四、再次執(zhí)行

滿足圖標的含義同時減少細節(jié),再結(jié)合漫畫APP的特點,開始尋找新的圖標設(shè)計方向,比如:我的圖標中有一個社區(qū)的圖標,參考了很多社區(qū)的圖標,都沒有外觀和表現(xiàn)形式上很特別的,然后我看見了ACfun的APP圖標,同時想到了社區(qū)是個提供很多信息的地方,于是帶著兩個小包的八卦小圖標就誕生啦!

為什么你的圖標總是缺了點意思

這是最后通過了的第五稿:

為什么你的圖標總是缺了點意思

為什么你的圖標總是缺了點意思

對我來說,最明顯的進步就是:在不斷試錯的過程中,提高了對參考的審美和篩選,以及在自己產(chǎn)出時加入自己的思考,包括點擊前后的趣味變化,保證自己畫出來的圖標能夠與市面上的有所區(qū)別(大家不要太在意主題色的問題,因為是我們自己畫的原型圖,沒有品牌基因,所以在剛開始練習的時候顏色是隨便定的)。

五、劃重點

  1. 找到好的,以及合適的參考是一件非常重要的事情。不要拘泥于現(xiàn)在當前的任務(wù)和狀態(tài),盡可能地搜集眾多優(yōu)點的圖標參考,參考已有的設(shè)計,獲取靈感(并不局限在某一類的APP中,也不要過多的參考飛機稿,這個結(jié)論適用在任何組件里面)。
  2. 確定圖標的樣式,既然確認了要做面性的圖標,就開始做面性圖標的設(shè)計思考,必要時借助輔助工具來確保圖標的大小視覺一致,以及小細節(jié)的設(shè)計規(guī)范保持統(tǒng)一。
  3. 可能大家會覺得這篇文章說的實操性不是很大,其實我最想表達的是找到好的參考很重要,但是前提在于你有一雙發(fā)現(xiàn)好參考的眼睛,而這也是需要練習和試錯才會知道什么樣的參考和輸出才是合適的。

參考引文《品牌基因法做圖標——實戰(zhàn)篇》

 

本文由 @潘團子 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載

題圖來自 Unsplash,基于 CC0 協(xié)議

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 第五版我的和社區(qū)區(qū)別度不大啊

    回復
  2. 圖標設(shè)計真挺重要的,從最初的接到任務(wù),到最后的完成,一步步的迭代,也讓我懂得不要著急,最終終會勝利。哈哈哈哈

    回復
  3. 嗯 還是第一稿比較好看??

    回復
  4. 先看標題,在看圖標

    回復
  5. 扣扣號給我發(fā)的話,我現(xiàn)在是什么意思?????????????????????????????????????????????????????????????????????????

    回復
  6. 創(chuàng)意很重要。

    回復
  7. 怎么確定通過了的就是好的呢

    回復
    1. 這個問題確實是一個好問題,你判斷好不不好要有一個衡量標準啊,具體的原則和可量化標準,畢竟審美這玩意,太感性了!

      回復
    2. 66

      回復
    3. 審美比較感應(yīng)吧

      回復
  8. 別人都覺得設(shè)計簡單,但其實方案一直都不太合格不讓人滿意就要一直改唉

    回復
  9. 天吶,這篇怎么這多人看

    回復
  10. 求問一下面性是什么意思

    回復
    1. 同問

      回復
    2. 有大塊面積顏色的

      回復
  11. 哈哈哈哈,我套用了,以后做事情就有方向了,先找對標產(chǎn)品,然后進行整改,在進行整改……完美

    回復
  12. 第四高確實有趣 能簡潔嗎?

    回復
  13. 墨刀直接拉

    回復
  14. 要不ab一下?反正覺得過于特立獨行~

    回復
  15. 雖然作者的結(jié)論是建議大家多參考好的設(shè)計,但這個結(jié)論反而證明實踐yyds,只有自己做一版才有最深的感悟。

    回復
  16. 首頁這個蟲是怎么來的靈感。。沒看懂額?????

    回復
  17. 產(chǎn)品藝術(shù)家

    回復
  18. 學習了

    回復
  19. 對 主要是細節(jié)太多

    回復
  20. 這個主要還是看場景和應(yīng)用,并不是說你最后一稿就是最完美的,可能只是領(lǐng)導認為最好的。并不一定是客戶最好的喲,如果有能力的話,做ab測試更好。

    回復
  21. 個人也最喜歡第四稿hhh

    回復
  22. 不太理解為啥這幾稿顏色也不同

    回復
  23. 我喜歡第三稿、、、

    回復
  24. 這是騰訊動漫APP嗎?

    回復
  25. 第四稿感覺最好 但是確實是細節(jié)太多了

    回復
  26. 最丑就是第五稿,你們老板是什么眼光。。

    回復
    1. 我也覺得不好看。。。

      回復
  27. 來自四川 回復
  28. 你這樣的設(shè)計師還真是太少了,能自我思考,還能不斷總結(jié)。我下面的一個設(shè)計師,我說了幾次后,就離職了

    來自江蘇 回復
  29. 個人覺得,有特點還是那個滑板鞋,不過那稿也僅僅是有特點了,顏色和表現(xiàn)上,不夠大眾,也難以讓人理解。
    用戶學習成本比較高,但是我覺得問題不大,因為你每個圖標下面都有解釋。如果能在顏色上好好處理,那款會是一組很棒的圖標,甚至周邊的吉祥物都可以延伸一下。
    最后成功的這版本,顏色和外形上讓人感覺舒適,而且辨識度較好,所以在產(chǎn)品上綜合來說,比滑板鞋要好一點。
    嗯,就是這樣,所以我站滑板鞋!哈哈??

    回復
  30. 最初的路子就走岔了,只有在最后一步才走回來

    回復