去年做了這套圖標，忙忙碌碌中半年過去了，今天終于得空來跟大家分享一下我們設計這套圖標時的心路歷程。

更多圖標設計干貨：

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

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

壁紙上所呈現的 是由輕柔的紙張層疊而出的「花」，原是潔白無瑕的紙張在光的照耀下反射出五彩斑斕的白色，它在微風中靜靜搖曳，仿佛在優雅地起舞。

給使用者帶來 輕柔、簡潔、優雅 的感受，這就是紙花這套主題的設計初衷。

紙花壁紙就是我們做圖標的情緒版參考圖，我們主要面臨的難題是如何提取當中的設計語言 和如何將風格落地。

一、如何提煉壁紙中的設計語言

仔細提煉壁紙中的設計語言，能更好地幫助我們設計主題圖標。

這樣的提煉能力是我們設計師不可或缺的一項技能，我一般就是從形狀、顏色、質感、構成、字體五個維度去提煉一張圖。

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

1. 形狀：圓潤柔和是設計的基礎形

輕薄的紙張層疊組合出花的形狀，細看每張紙都有著如花瓣般的圓潤形態和輕柔質感。

所以我們在設計基礎型的時候，用到的形狀都相對圓潤，來增加圖標的柔和感。

除此之外，我們發現圖標結構上也要更多樣一些，否則這一套圖標就會顯得很平。

比如下方這類圖標，他們全都只有一層結構，所以看著很平淡。

這時，我們可以增加一些圖標的結構，這里我們另外增加了兩種結構——圖形層級疊加、圖形分割：

2. 顏色：內斂而豐富的顏色，有著低調卻耐看的美

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

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

比如亮面里的黃色、玫紅色、綠色、藍色等等：

再比如它的暗面，除了暗面本身有藍有綠：

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

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

就像陽光透過花瓣照出紋理，紙張在光的照耀下，也能微微透出底部的內容。

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

二、設計落地，開始主題圖標設計

1. 圖標形狀：整體圓潤且結構豐富

① 圖形層級疊加

在畫圖標造型時，有意識的去增加層級。比如說這個時鐘的造型：

天氣圖標的層級：

② 圖形分割

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

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

2. 顏色質感：提取顏色，運用藏色

① 圖標底板的顏色

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

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

它應該是更能在背景上凸顯出來的顏色。

所以對吸取的顏色進行調整，得到這三個顏色作為背板的顏色。

② 運用藏色

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

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

③ 紙花邊緣處的輪廓光和微透的材質

這兩個點也給了我們不少啟發，將這些運用在圖標的繪制上也為畫面細節增色不少。

三、風格延展

我們將上述的設計語言延展到共 70 多個圖標的設計上，保證了主題設計的美觀一致性：

結語

以上就是關于紙花這套主題圖標設計的背后的故事。

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

創新，這是在每次主風格設定中都讓我抓耳撓腮的一點。