如何從0到1做出一組圖標?來看這份實戰設計思路總結! - 優設-UISDC

如何從0到1做出一組圖標?來看這份實戰設計思路總結!

2018/11/02 10156評論區

@菜心設計鋪?:圖標——界面設計最重要的元素之一。

菜心經常寫關于圖標的教程和感悟,可見圖標設計在我日常工作中占了很大比重,所以我始終堅信能夠把圖標做好,也是難得的特長之一。

這里拿幾個月前做的第一版小說模塊圖標為例(目前已經改版為2.0,等正式上線后會再次與大家分享),簡單介紹下我的圖標設計思路,大綱如下:

  • 風格設定
  • 創意腦爆
  • 設計執行

一、風格設定

在開始構思之前,我們首先需要確定圖標的設計風格,風格可以根據整體產品的設計語言推導,需要符合目標人群的喜好以及產品的屬性定位。

雖然我們是小說模塊,但還是附屬于動漫體系之下,前期的種子用戶還是產品原有的動漫人群,所以我將風格鎖定在原有動漫的視覺風格之上,大家可以看下當時動漫標簽欄圖標的樣式:

由此小說模塊圖標與上圖保持一致,設定為「描邊與色塊結合」風格。

二、創意腦暴

鎖定風格之后,就要構思創意了,也就是如何在這樣的風格之下去表達你的內容。

這一步很關鍵,如何讓圖標不普通,大部分因素都體現在內容表達上(因為風格其實也就那么幾種),我的方法是盡量去發散核心關鍵詞,讓圖標的含義標新立異,舉兩個這次圖標腦暴的例子。

1. 「人氣」圖標的腦暴路徑

這里選詞有個小技巧,我會遵循兩個原則,「具象」與「二層」。

首先來說具象:其實很好理解,如果詞匯太抽象,你是很難表達的,比如「流行」這個詞,你是很難表達的,而「火」就很具象,很容易表現。

再來說「二層」:指的就是盡量不要選擇核心關鍵詞延展出來的第一層詞匯,因為這些詞是大家都能想到的,并且用爛的,比如人氣直接延展出來的「火」、「獎杯」等等。(但是如果你的圖標沒有文字提示,需要表意特別明確,建議還是使用第一層延伸詞,可以在風格上做些差異化表現)。

所以在上面兩個原則下,我最后設定人氣圖標使用「愛的手勢」,如下圖:

因為看到有些同學把「愛」與「搖滾」的手勢弄混,所以說下它們的區別:

希望大家在使用的時候不要搞錯哦!

2. 「完結」圖標的腦暴路徑

也是通過「具象」與「二層」原則,最后使用了商店掛的打烊門牌這一創意來延展:

每個關鍵詞的腦暴都會產生很多詞匯,各不相同,我們需要學會篩選,盡量避開過于抽象或者過于普通的詞匯,避開抽象等于具象,可以方便執行;避開普通等于特別,如果所有的設計都是大家用爛的創意,那作品一定會很平庸,以上就是我在腦暴時使用的方法。

我們需要讓自己產出的每一套設計至少有一個「特別」出現,不然如何體現自己的價值呢?

三、設計執行

這一步就是根據前面得到的靈感圖來進行設計,我們來看下執行對比圖:

對于執行需要注意的基礎細節,之前有寫過《騰訊設計師總結的圖標設計五維自檢法》,有興趣的同學可以看一下,除此之外這里再補充一點,如何讓圖標做到有細節。

本次設計總結了三個方法供大家參考:

1. 設計技法的細節

比如給描邊增加短線風格:

再比如線條增加面形色塊的組合:

2. 根據事物本身特征增加細節

比如一個木質門牌的細節:

3. 俏皮的那一筆

比如書架上歪著的一本書:

再比如一根線條的破局:

當然增加細節的方法有太多種,總的目的就是防止圖標過于簡單、簡陋,希望你也可以有自己的一套秘方來進行設計,大家互相學習。

最后再看下圖標整體的效果吧:

附上過程中的一些稿子,哈哈,別嚇到你:

對于執行這一塊,別人再怎么說,你不做大量的練習與思考也是無濟于事,這個道理毋庸贅言了。

歡迎關注作者的微信公眾號:「菜心設計鋪」

「菜心的圖標設計好文合集」

優設大課堂

非特殊說明,本文版權歸原作者所有,轉載請注明出處
本文地址:http://www.51294208.com/make-a-set-of-icons

發表評論 加載中....

評論加載中....

uisdc

評論區都快餓癟了,看看我期盼的小眼神...

sketch 優設大課堂 轉場動效 設計師 扁平化設計 交互設計師 界面設計 排版布局 職場 平面設計 設計師專訪 素材下載 視覺設計 配色 設計流程 web前端開發 AI教程 用戶體驗設計 設計理論 神器下載 海報設計 字體下載 設計趨勢 設計規范 psd下載 動效設計 圖標設計 產品設計 logo設計 ICON 神器推薦 職場規劃 App設計 字體設計 酷站推薦 交互設計 ui設計 設計師職場 優秀網頁設計 用戶體驗 ps技巧 酷站 PS教程 網頁設計 經驗分享
wechat

優設官方微信

50萬設計師關注

微信號:youshege

把好文章收藏到微信

打開微信,掃碼分享
學設計 優設網 在這里

云南时时彩开奖今天