国产亚洲精_丰满老熟好大的大bbb_男男激情做爰视频免费观看_欧美一区二区三区精品国产

從0到1 —— 一組圖標的誕生

2019-6-20    ui設計分享達人


如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里

圖標——界面設計最重要的元素之一。


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


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


1.風格設定

2.創意腦爆

3.設計執行

 

1.風格設定

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


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


/var/folders/b_/my8pym2d55g2xbx4g7d76csh0000gp/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/640?wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1


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


2.創意腦爆

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


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


第一個,人氣圖標的腦暴路徑:


/var/folders/b_/my8pym2d55g2xbx4g7d76csh0000gp/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/640?wx_fmt=jpeg&wxfrom=5&wx_lazy=1&wx_co=1


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


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


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


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


/var/folders/b_/my8pym2d55g2xbx4g7d76csh0000gp/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/640?wx_fmt=jpeg&wxfrom=5&wx_lazy=1&wx_co=1

 

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

 

/var/folders/b_/my8pym2d55g2xbx4g7d76csh0000gp/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/640?wx_fmt=jpeg&wxfrom=5&wx_lazy=1&wx_co=1

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


第二個,完結圖標的腦暴路徑:

/var/folders/b_/my8pym2d55g2xbx4g7d76csh0000gp/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/640?wx_fmt=jpeg&wxfrom=5&wx_lazy=1&wx_co=1

 

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

 

/var/folders/b_/my8pym2d55g2xbx4g7d76csh0000gp/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/640?wx_fmt=jpeg&wxfrom=5&wx_lazy=1&wx_co=1

 

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

 

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

 

3.設計執行

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

 

/var/folders/b_/my8pym2d55g2xbx4g7d76csh0000gp/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/640?wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1

 

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

 

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

 

3.1 設計技法的細節

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

/var/folders/b_/my8pym2d55g2xbx4g7d76csh0000gp/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/640?wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1

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

/var/folders/b_/my8pym2d55g2xbx4g7d76csh0000gp/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/640?wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1

 

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

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

 

/var/folders/b_/my8pym2d55g2xbx4g7d76csh0000gp/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/640?wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1

 

3.3 俏皮的那一筆

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

/var/folders/b_/my8pym2d55g2xbx4g7d76csh0000gp/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/640?wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1


再比如一根線條的破局:


/var/folders/b_/my8pym2d55g2xbx4g7d76csh0000gp/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/640?wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1

 

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

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

 

/var/folders/b_/my8pym2d55g2xbx4g7d76csh0000gp/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/640?wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1


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


/var/folders/b_/my8pym2d55g2xbx4g7d76csh0000gp/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/640?wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1

 

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

 

/var/folders/b_/my8pym2d55g2xbx4g7d76csh0000gp/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/640?wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1

 

接下來分享的也是這幾個圖標,不過是延伸版,切入的角度會略有不同。

 

這次改版背景很簡單:首頁整體架構調整的同時,主圖標的設計語言改成了面性,而由于時間緊,小說圖標還沒來得及改,所以這次的設計目標就一個,把第一版圖標改成面性的。

 

本來我以為,直接由線性改成填充的形式就可以了,分分鐘搞定,但沒想到改過來的效果是這樣的:

 

/var/folders/b_/my8pym2d55g2xbx4g7d76csh0000gp/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/640?wx_fmt=jpeg&wxfrom=5&wx_lazy=1&wx_co=1

于是經過調整又得到這樣的:

 

/var/folders/b_/my8pym2d55g2xbx4g7d76csh0000gp/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/640?wx_fmt=jpeg&wxfrom=5&wx_lazy=1&wx_co=1

為什么還是不好看?

我也不知道啊!

這種情況就去多找參考,分析分析別人的優秀作品,比如下圖谷歌的圖標:

/var/folders/b_/my8pym2d55g2xbx4g7d76csh0000gp/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/640?wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1

為什么人家的看起來就那么好看,那么精致?

 

我個人覺得最大原因就是它的透氣感比較好,導致透氣感好的原因在于,它采用了多元素組合的方式,并且使用大量留白與彩色形成對比。

 

在這樣的分析之下,我對圖標進行了重新構思,直接在腦暴階段就重新思考(因為原有圖標是一個元素,很難再拆分成兩個元素來進行組合)。

為了能做到獨特,我最終選用的圖標含義如下(盡量避開用爛的詞匯):

 

書架:兩本書互相依靠

 

熱門:手捧愛心

 

免費:冰淇淋甜筒(創意來自甜筒經常會有第二份半價,或者買一  送一的活動)

 

完結:黑子手捧完結的牌子

 

 

 

最后的執行效果如下:

 

/var/folders/b_/my8pym2d55g2xbx4g7d76csh0000gp/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/640?wx_fmt=jpeg&wxfrom=5&wx_lazy=1&wx_co=1

新版圖標也是利用元素的組合,并且圖標內有大量留白使圖標更加透氣。

 

除了透氣以外,我還在圖標之中融入了一些有生命感的內容,比如手,品牌形象,擬人化的書等等:

 

/var/folders/b_/my8pym2d55g2xbx4g7d76csh0000gp/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/640?wx_fmt=jpeg&wxfrom=5&wx_lazy=1&wx_co=1

使圖標變更加可愛,有情感,充滿一些故事感。

除此之外,對圖標還增加了一點點的小細節作為小彩蛋:

 

一般我們在做一組東西的時候,都希望能夠有一個主旨貫穿始終,這樣解釋起來更加有說法,有說服力。

 

比如上面這組小說圖標,設計關鍵詞是溫暖,情感,可愛,在這樣的理念下,我將溫暖轉化為陽光作為視覺語言。

 

可是陽光怎么落地呢,我當時能想到的就是高光和投影,本次使用的就是充滿光感的長投影:

 

/var/folders/b_/my8pym2d55g2xbx4g7d76csh0000gp/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/640?wx_fmt=jpeg&wxfrom=5&wx_lazy=1&wx_co=1

當然,為了使圖標輕量化,投影不宜過重,起到點睛的作用即可:

/var/folders/b_/my8pym2d55g2xbx4g7d76csh0000gp/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/640?wx_fmt=jpeg&wxfrom=5&wx_lazy=1&wx_co=1

除此之外,像前面所說,為了體現可愛的主旨,融入了手,品牌形象等有生命的元素(并且整體圖形都是比較圓潤,避免尖角的出現),這也是貫穿主旨的一條路徑。

 

方法很多,各不相同,其本質目的還是希望大家做設計的時候要有適當的理念貫穿!

 

整個設計過程就差不多這些了,其實花在調整細節的時間還是比較多的,隨便一個圖標有了大方向和思路之后,還是需要不斷的修改修改再修改。

 

 

 

顏色的搭配、五官的間距、元素之間的大小關系等等,都需要不斷的調整,而真正考驗我們的也就在這些細節當中。

 

這里再補充兩個增加可愛度的實用小技巧:

 

五官緊湊

一般情況下,縮小五官的間距,可以一定程度上實表情更加可愛,尤其是嘴鼻和眼睛的間距:

 

/var/folders/b_/my8pym2d55g2xbx4g7d76csh0000gp/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/640?wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1

腮紅

 

一般來說,在我的印象中只有可愛的東西才會有腮紅,五大三粗的大老爺們加個腮紅,咦~,不敢想!

 

所以畫可愛的形象或表情時,可以考慮加個腮紅:

/var/folders/b_/my8pym2d55g2xbx4g7d76csh0000gp/T/com.microsoft.Word/WebArchiveCopyPasteTempFiles/640?wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1

不過我這次由于元素太多,所以沒加,大家可以根絕實際情況自行實踐。

 

最后:

看萬卷書,行萬里路!不走,書白看。

看萬篇文,練萬個習!不練,文白看。

 

 

藍藍設計paul-jarrel.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、網站建設 平面設計服務

日歷

鏈接

個人資料

藍藍設計的小編 http://paul-jarrel.com

存檔