2019-6-20 ui設計分享達人
如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里
圖標——界面設計最重要的元素之一。
菜心經常寫關于圖標的教程和感悟,可見圖標設計在我日常工作中占了很大比重,所以我始終堅信能夠把圖標做好,也是難得的特長之一!
這里拿幾個月前做的第一版小說模塊圖標為例(目前已經改版為2.0,等正式上線后會再次與大家分享),簡單介紹下我的圖標設計思路,大綱如下:
1.風格設定
2.創意腦爆
3.設計執行
1.風格設定
在開始構思之前,我們首先需要確定圖標的設計風格,風格可以根據整體產品的設計語言推導,需要符合目標人群的喜好以及產品的屬性定位。
雖然我們是小說模塊,但還是附屬于動漫產品體系之下,前期的種子用戶還是產品原有的動漫人群,所以我將風格鎖定在原有動漫的視覺風格之上,大家可以看下當時動漫標簽欄圖標的樣式:
由此小說模塊圖標與上圖保持一致,設定為“描邊與色塊結合”風格。
2.創意腦爆
鎖定風格之后,就要構思創意了,也就是如何在這樣的風格之下去表達你的內容。
這一步很關鍵,如何讓圖標不普通,大部分因素都就體現在內容表達上(因為風格其實也就那么幾種),我的方法是盡量去發散核心關鍵詞,讓圖標的含義標新立異,舉兩個這次圖標腦暴的例子:
第一個,“人氣”圖標的腦暴路徑:
這里選詞有個小技巧,我會遵循兩個原則,“具象”與“二層”。
首先來說具象:其實很好理解,如果詞匯太抽象,你是很難表達的,比如“流行”這個詞,你是很難表達的,而“火”就很具象,很容易表現。
再來說“二層”:指的就是盡量不要選擇核心關鍵詞延展出來的第一層詞匯,因為這些詞是大家都能想到的,并且用爛的,比如人氣直接延展出來的“火”、“獎杯”等等。(但是如果你的圖標沒有文字提示,需要表意特別明確,建議還是使用第一層延伸詞,可以在風格上做些差異化表現)。
所以在上面兩個原則下,我最后設定人氣圖標使用“愛的手勢”,如下圖:
因為看到有些同學把“愛”與“搖滾”的手勢弄混,所以說下它們的區別:
希望大家在使用的時候不要搞錯哦!
第二個,“完結”圖標的腦暴路徑:
也是通過“具象”與“二層”原則,最后使用了商店掛的打烊門牌這一創意來延展:
每個關鍵詞的腦暴都會產生很多詞匯,各不相同,我們需要學會篩選,盡量避開過于抽象或者過于普通的詞匯,避開抽象等于具象,可以方便執行;避開普通等于特別,如果所有的設計都是大家用爛的創意,那作品一定會很平庸,以上就是我在腦暴時使用的方法。
我們需要讓自己產出的每一套設計至少有一個“特別”出現,不然如何體現自己的價值呢?
3.設計執行
這一步就是根據前面得到的靈感圖來進行設計,我們來看下執行對比圖:
對于執行需要注意的基礎細節,之前有寫過《圖標設計五維自檢法》,有興趣的同學可以看一下,除此之外這里再補充一點——如何讓圖標做到有細節!
本次設計總結了三個方法供大家參考:
3.1 設計技法的細節
比如給描邊增加短線風格:
再比如線條增加面形色塊的組合:
3.2 根據事物本身特征增加細節
比如一個木質門牌的細節:
3.3 俏皮的那一筆
比如書架上歪著的一本書:
再比如一根線條的破局:
當然增加細節的方法有太多種,總的目的就是防止圖標過于簡單、簡陋,希望你也可以有自己的一套秘方來進行設計,大家互相學習。
最后再看下圖標整體的效果吧:
附上過程中的一些稿子,哈哈,別嚇到你:
對于執行這一塊,別人再怎么說,你不做大量的練習與思考也是無濟于事,這個道理毋庸贅言了。效果圖如下:
接下來分享的也是這幾個圖標,不過是延伸版,切入的角度會略有不同。
這次改版背景很簡單:首頁整體架構調整的同時,主圖標的設計語言改成了面性,而由于時間緊,小說圖標還沒來得及改,所以這次的設計目標就一個,把第一版圖標改成面性的。
本來我以為,直接由線性改成填充的形式就可以了,分分鐘搞定,但沒想到改過來的效果是這樣的:
于是經過調整又得到這樣的:
為什么還是不好看?
我也不知道啊!
這種情況就去多找參考,分析分析別人的優秀作品,比如下圖谷歌的圖標:
為什么人家的看起來就那么好看,那么精致?
我個人覺得最大原因就是它的透氣感比較好,導致透氣感好的原因在于,它采用了多元素組合的方式,并且使用大量留白與彩色形成對比。
在這樣的分析之下,我對圖標進行了重新構思,直接在腦暴階段就重新思考(因為原有圖標是一個元素,很難再拆分成兩個元素來進行組合)。
為了能做到獨特,我最終選用的圖標含義如下(盡量避開用爛的詞匯):
書架:兩本書互相依靠
熱門:手捧愛心
免費:冰淇淋甜筒(創意來自甜筒經常會有第二份半價,或者買一 送一的活動)
完結:黑子手捧完結的牌子
最后的執行效果如下:
新版圖標也是利用元素的組合,并且圖標內有大量留白使圖標更加透氣。
除了透氣以外,我還在圖標之中融入了一些“有生命感的內容”,比如手,品牌形象,擬人化的書等等:
使圖標變更加可愛,有情感,充滿一些故事感。
除此之外,對圖標還增加了一點點的小細節作為小彩蛋:
一般我們在做一組東西的時候,都希望能夠有一個主旨貫穿始終,這樣解釋起來更加有說法,有說服力。
比如上面這組小說圖標,設計關鍵詞是溫暖,情感,可愛,在這樣的理念下,我將溫暖轉化為陽光作為視覺語言。
可是陽光怎么落地呢,我當時能想到的就是高光和投影,本次使用的就是充滿光感的長投影:
當然,為了使圖標輕量化,投影不宜過重,起到點睛的作用即可:
除此之外,像前面所說,為了體現可愛的主旨,融入了手,品牌形象等有生命的元素(并且整體圖形都是比較圓潤,避免尖角的出現),這也是貫穿主旨的一條路徑。
方法很多,各不相同,其本質目的還是希望大家做設計的時候要有適當的理念貫穿!
整個設計過程就差不多這些了,其實花在調整細節的時間還是比較多的,隨便一個圖標有了大方向和思路之后,還是需要不斷的修改修改再修改。
顏色的搭配、五官的間距、元素之間的大小關系等等,都需要不斷的調整,而真正考驗我們的也就在這些細節當中。
這里再補充兩個增加可愛度的實用小技巧:
1 五官緊湊
一般情況下,縮小五官的間距,可以一定程度上實表情更加可愛,尤其是嘴鼻和眼睛的間距:
2 腮紅
一般來說,在我的印象中只有可愛的東西才會有腮紅,五大三粗的大老爺們加個腮紅,咦~,不敢想!
所以畫可愛的形象或表情時,可以考慮加個腮紅:
不過我這次由于元素太多,所以沒加,大家可以根絕實際情況自行實踐。
最后:
看萬卷書,行萬里路!不走,書白看。
看萬篇文,練萬個習!不練,文白看。
藍藍設計( ssll180.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、網站建設 、平面設計服務。