全栈工程师?
嗯.....目前并不是!

界面設計:為什麼你的圖標總是缺了點意思?

圖標設計,找到合適的參考十分關鍵。不要拘泥於當前的任務的狀態,過於拘束於同類產品的設計風格,尋找更多優秀的圖標參考,從中汲取一些合適的元素以及創作靈感,或許你的設計就能更上一層樓。

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

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

  1. 收到任務
  2. 找參考
  3. 根據參考執行
  4. 被駁回陷入沉思
  5. 再次執行

一、收到任務

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

二、找參考

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

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

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

第一稿:

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

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

第三稿:

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

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

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

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

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

第四稿:

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

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

以下是我的參考:

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

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

三、被駁回陷入沉思

正好這時候師傅讓我嘗試面性圖標,因為面性的圖標比較好豐富細節,並且能夠發揮的修飾程度比較廣泛,比較適合目前陷入瓶頸的我。而線性的圖標比較具有品牌感,非常好規範並且能夠設計出一定的基調,比較考驗設計師。

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

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

很認真的總結了一下,我發現了我的問題在哪裡了:外形不夠有特徵同時細節太多,放在手機上,沒有辨識度的同時還會提高用戶的理解成本。

四、再次執行

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

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

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

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

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

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

五、划重點

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

參考引文《品牌基因法做圖標——實戰篇》

 

版权声明:本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权
文章名称:《界面設計:為什麼你的圖標總是缺了點意思?》
文章链接:https://www.pmbear.com/%e7%95%8c%e9%9d%a2%e8%a8%ad%e8%a8%88%ef%bc%9a%e7%82%ba%e4%bb%80%e9%ba%bc%e4%bd%a0%e7%9a%84%e5%9c%96%e6%a8%99%e7%b8%bd%e6%98%af%e7%bc%ba%e4%ba%86%e9%bb%9e%e6%84%8f%e6%80%9d%ef%bc%9f/
本站资源仅供个人学习交流,请于下载后24小时内删除,不允许用于商业用途,否则法律问题自行承担。

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

大前端WP主题 更专业 更方便

联系我们联系我们