圖標(biāo)設(shè)計(jì)復(fù)盤！我們是如何做好大廠項(xiàng)目的？

去年做了這套圖標(biāo)，忙忙碌碌中半年過去了，今天終于得空來跟大家分享一下我們設(shè)計(jì)這套圖標(biāo)時(shí)的心路歷程。

更多圖標(biāo)設(shè)計(jì)干貨：

以下紙花壁紙是需求方提供的素材：

我們需要的是基于這張壁紙，延伸出一整套主題圖標(biāo)。

壁紙上所呈現(xiàn)的 是由輕柔的紙張層疊而出的「花」，原是潔白無瑕的紙張?jiān)诠獾恼找路瓷涑鑫宀拾邤痰陌咨谖L(fēng)中靜靜搖曳，仿佛在優(yōu)雅地起舞。

給使用者帶來 輕柔、簡潔、優(yōu)雅 的感受，這就是紙花這套主題的設(shè)計(jì)初衷。

紙花壁紙就是我們做圖標(biāo)的情緒版參考圖，我們主要面臨的難題是如何提取當(dāng)中的設(shè)計(jì)語言 和如何將風(fēng)格落地。

一、如何提煉壁紙中的設(shè)計(jì)語言

仔細(xì)提煉壁紙中的設(shè)計(jì)語言，能更好地幫助我們設(shè)計(jì)主題圖標(biāo)。

這樣的提煉能力是我們設(shè)計(jì)師不可或缺的一項(xiàng)技能，我一般就是從形狀、顏色、質(zhì)感、構(gòu)成、字體五個(gè)維度去提煉一張圖。

比如紙花這張壁紙，我們從形狀、顏色、質(zhì)感三個(gè)方向去提煉壁紙中暗含的設(shè)計(jì)語言。

1. 形狀：圓潤柔和是設(shè)計(jì)的基礎(chǔ)形

輕薄的紙張層疊組合出花的形狀，細(xì)看每張紙都有著如花瓣般的圓潤形態(tài)和輕柔質(zhì)感。

所以我們在設(shè)計(jì)基礎(chǔ)型的時(shí)候，用到的形狀都相對圓潤，來增加圖標(biāo)的柔和感。

除此之外，我們發(fā)現(xiàn)圖標(biāo)結(jié)構(gòu)上也要更多樣一些，否則這一套圖標(biāo)就會顯得很平。

比如下方這類圖標(biāo)，他們?nèi)贾挥幸粚咏Y(jié)構(gòu)，所以看著很平淡。

這時(shí)，我們可以增加一些圖標(biāo)的結(jié)構(gòu)，這里我們另外增加了兩種結(jié)構(gòu)——圖形層級疊加、圖形分割：

2. 顏色：內(nèi)斂而豐富的顏色，有著低調(diào)卻耐看的美

低對比度的顏色是整幅壁紙的鋪色理念，給畫面帶來內(nèi)斂的魅力。

內(nèi)斂不代表用色單一，如果你去細(xì)看紙花的“花瓣”，也有著十分豐富的藏色。

比如亮面里的黃色、玫紅色、綠色、藍(lán)色等等：

再比如它的暗面，除了暗面本身有藍(lán)有綠：

在紙邊緣處也有著色相變換：

3. 質(zhì)感：光下的微透明材質(zhì)與邊緣輪廓光

就像陽光透過花瓣照出紋理，紙張?jiān)诠獾恼找?，也能微微透出底部的?nèi)容。

邊緣處泛起的輪廓光，存在感不算強(qiáng)，卻能很好地區(qū)分背景和主體物的層次。

二、設(shè)計(jì)落地，開始主題圖標(biāo)設(shè)計(jì)

1. 圖標(biāo)形狀：整體圓潤且結(jié)構(gòu)豐富

① 圖形層級疊加

在畫圖標(biāo)造型時(shí)，有意識的去增加層級。比如說這個(gè)時(shí)鐘的造型：

天氣圖標(biāo)的層級：

② 圖形分割

將一個(gè)圖形從中切開，分割成兩部分，這種是平面分割

還可以分割得像立體的兩個(gè)面，就像彎曲的紙張。

2. 顏色質(zhì)感：提取顏色，運(yùn)用藏色

① 圖標(biāo)底板的顏色

底板顏色我們直接提取壁紙中的主色：

如果將這樣的顏色直接用作圖標(biāo)的底板，它就和背景完全區(qū)分不開。

它應(yīng)該是更能在背景上凸顯出來的顏色。

所以對吸取的顏色進(jìn)行調(diào)整，得到這三個(gè)顏色作為背板的顏色。

② 運(yùn)用藏色

為了讓顏色上更有細(xì)節(jié)、更加豐富，背板的顏色不能單一，我們模仿紙花上的顏色過渡，賦予它低調(diào)且豐富的色澤。

同樣，在圖標(biāo)的用色過渡上也要盡量做到豐富，比如這個(gè)「天氣」圖標(biāo)

③ 紙花邊緣處的輪廓光和微透的材質(zhì)

這兩個(gè)點(diǎn)也給了我們不少啟發(fā)，將這些運(yùn)用在圖標(biāo)的繪制上也為畫面細(xì)節(jié)增色不少。

三、風(fēng)格延展

我們將上述的設(shè)計(jì)語言延展到共 70 多個(gè)圖標(biāo)的設(shè)計(jì)上，保證了主題設(shè)計(jì)的美觀一致性：

結(jié)語

以上就是關(guān)于紙花這套主題圖標(biāo)設(shè)計(jì)的背后的故事。

既要保持主題的一致性，又要在美觀的重要前提下去創(chuàng)新一套不太一樣的風(fēng)格。

創(chuàng)新，這是在每次主風(fēng)格設(shè)定中都讓我抓耳撓腮的一點(diǎn)。