ui設計圖標教程：五種設計思路讓你的設計信手拈來

APP的圖標作為啟動產品的入口，一直是一個重要的視覺符號，為了讓用戶更好的記憶，其設計通常與產品的功能和內容相關，讓人看到圖標就能聯想到產品的功能使用場景等。用戶也是通過圖標來尋找、識別和打開產品的，可以說圖標承載了產品與用戶的第一次連接，有著非常重要的作用。例如很多電商APP在節日促銷活動的時候，會把活動名稱放在啟動圖標上，來提醒用戶當前活動進行中，吸引用戶進入。那麼今天就讓小編來帶大家了解一下時下流行的五種設計思路，讓你的設計不再幹癟無趣。

圖標一般可以分成主圖形和底色色塊兩層。

顏色和形狀是人們視覺感知最直接的要素，圖標也是通過顏色和形狀來表達產品的特點。主圖形也就是形狀，一般是對產品的功能、內容的表達，而顏色更多的是情感氣氛的表達。

春節前後的這段時間，相信大家也一定注意到了有的APP圖標也發生了一些變化，不少APP的圖標換成了特別設計的春節版本，以此來增加節日氣氛來與新春呼應。

在節日或是重要活動期間給圖標做出相應的設計，不僅可以突出視覺給用戶帶來新鮮感，引起用戶的注意推廣活動，而且也是一個產品自我表達拉近與用戶距離的窗口。那麼今天就讓我們一起來分析一下節日圖標都有哪些設計思路，以及其具體的實操設計過程吧。

一.節日圖標的5個設計思路

以春節圖標為例分析，我們可以通過以下5種方式來展開設計，分別是：變換色彩，豐富背景，添加文字，添加新元素和多種手法疊加，下麵就逐一來看看它們各自的特點吧。

1.變換色彩

色彩是一種有效的情緒傳染方式，有研究表明人們在觀察物體時的第一感受，色彩影響的占比為80%，形狀形態占比為20%，這個影響值在20秒後會逐步下降發生變化，2分鍾後色彩和形狀的占比會變成60%和40%，5分鍾後趨平各占50%。所以說色彩對視覺感受有這非常大的影響力，尤其在短時間的視覺接觸中尤為明顯。

不同的色彩可以引發不同的心理聯想，經過長期的生活實踐，色彩開始被人們賦予特定的情感定義，下圖是幾種常見顏色給人的感覺。

不過使用色彩的時候，也需要注意不同文化下色彩代表的不同含義，比如紅色、黃色在中國代表喜慶，可以說是中國農曆新年的固定搭配，綠色擇因為美元紙幣是綠色的，在美國有金錢的含義。

我們可以來看看變換色彩的例子，下圖中看準的圖標，在春節期間就更換了顏色，看準是直接完全改變了圖標的顏色，變為代表春節的紅色和金色，這樣做的優點是可以最大限度的貼近節日氣氛，缺點是與常態圖標的差別較大，對於用戶來說可能會覺得有點陌生。

再來看看幻影貓，在常態下LOGO是藍色，聖誕時選擇了紫色做背景，到了春節期間又換成了符合中國農曆新年的紅色。相對看準的底色和圖形的顏色全變，幻影貓的做法是隻改變底色，主形狀部分保持不變，留下了辨識度高的白色貓咪，以減少因為顏色改變帶來的陌生感。

2.豐富背景

背景渲染氣氛也是一種常用的方式，常態下圖標背景一般會使用比較簡單漸變或者純色，所以節日的時候通過對背景的豐富，設計與節日相關的背景圖這樣既不會影響主體層級，也可以很好的烘托氣氛，是非常不錯的選擇。設計的時候我們可以利用情緒版來幫助我們完成背景圖的構思。

搜狐視頻的圖標，常態下是白色底色，春節時改為淡粉色為主點綴紫藤花和燈籠的背景圖，體現新春家庭溫情、春色暖人的感覺。

天貓的背景圖也延續了常態下紅色漸變的顏色，左右增加了兩匹打卡的紅色灑金的大門，迎來圓形的福字圖案，開門紅，迎金福，是符合新年的吉祥喜慶寓意。

3.添加文字

在原有圖標兩層元素的基礎上增加一層文字，以文字內容來表達主題。文字本身就具備強悍的內容傳達功能，相比圖形來說也並不弱，而且非常直接，適合有強烈願望或者主題的表達。主要圍繞文字的內容、字體、大小以及顏色進行設計，必要時可以增加一些背景的小元素比如燙金碎，小煙花等來烘托氣氛讓畫麵更加豐富。

比如今日頭條的“發財中國年”，過年見麵的寒暄吉祥話有不少是從一句“新年好，恭喜發財”開始的，這樣的文字內容不僅用戶喜歡接受程度高，也符合春節時期的氣氛，有誰不喜歡發財呢。

另外還有新年數字，比如網易嚴選的“2019”，再沒有具體的內容的時候，用新年數字來表示也是一種常見直接的方式。

騰訊視頻在創造101節目播出期間，在APP圖標上也加上了“創造101”的文字，文字背景擇采取了舞台的形式與節目呼應，讓人在看見啟動圖標的同時就馬上想到了節目，以此加大推廣力度宣傳節目。

同樣的還有雙十一、雙十二係列的圖標，大多都是采取了以文字為主的設計。

4.添加新元素

添加元素是在原圖標的基礎上，加入與節日或者活動相關的元素，通過這些元素來烘托氣氛。常見的有春節時期的生肖元素、雲紋煙花、金福等，聖誕時期的聖誕樹、聖誕帽、雪花和禮物等。在設計過程中可以先發散，用腦圖列出相關元素然後從中選取。

比如美顏相機選擇的生肖元素，豬年在圖標上添加的一隻小粉豬；閑魚加入的是春節傳統的鞭炮，映客選擇的是春節期間舞獅活動的獅子服飾，ABCmouse擇讓吉祥物拿著紅包，帶上了傳統喜慶的小帽子，產品本身是兒童教育類，紅包壓歲錢的場景也與用戶貼合。

Facetune和美圖選擇的是節日元素某一點特征，提取為代表，比如Facetune的聖誕帽，美圖的麋鹿角，簡約但是特征明顯，讓人一眼就能知道是聖誕主題。

定位是年輕人潮流購物中心的有貨則設計了更加有趣戲劇的一幕，選取的是聖誕老人鑽煙囪倒栽蔥的場景，既與聖誕的節日結合也保留了自己產品的調性個性。

360camera加入了聖誕樹、聖誕老人以及飄落的雪花，營造了非常強的整體氛圍。

另外除了增加新元素，也可以把相關元素與原有圖標進行結合，比如搜狗春節圖標就是把主圖形做了剪紙化設計，通過剪紙、窗花的元素體現春節的氣氛。

5.多種手法疊加

疊加上麵兩種以上的設計手法，多層次表達主題。比如全民K歌的春節圖標就使用了多種設計手法的疊加，在常態圖標的基礎上豐富了背景圖加入了中國傳統元素的花紋和富有春節氣氛的煙花，添加了“搶麥”的主題文字，同時還加上了麥克風的元素來突出。

多種手法疊加可以讓圖標氣氛的表達更加充分，不過也要注意避免設計過度讓圖標顯得過於繁瑣。

以上就是我總結的節日圖標的5種設計思路，了解了它們各自的特點，下麵我們就來看看具體是怎麼應用的吧。

二.案例操作解析

光說不練假把式，現在馬上動手練習吧，首先我們需要一枚常態下的圖標，由背景色和主圖形組成。

1.變幻色彩

因為想表達春節的主題，所以我先找了幾張不同色調的春節相關圖片，提取圖片中的顏色，嚐試圖標的不同配色，然後再選擇一組最適合圖標的色彩進一步調整。

4組色彩的對比，第一組的色彩不論從春節的符合度還是與圖標的搭配度效果都是比較好的，所以對它進行進一步的調整。這一步除了色彩的調整，也可以適當為背景加一寫點綴，讓畫麵更豐富。

2.豐富背景

可以先用情緒版把背景想表達的情感意境和關鍵詞列出來，確定一個設計方向。我希望的感覺是下麵這樣的，有中國元素但不過分複雜，整體色彩比較統一。

這裏我選擇的是給背景加上了若隱若現的雲紋，以及一些碎金光斑來襯托氣氛。背景的主體物擇是一串燈籠，這樣既能體現中國年的氣氛，也把背景保持在一個比較統一的色彩裏，符合我一開始構想的，要營造的感覺。

3.添加文字

添加文字的方法首先要在常態圖標的基礎上增加文字。由於沒有具體的活動主題，我選擇添加“2019”的文字內容來體現新年春節，開始對其展開設計。我選擇了屬相小豬的元素來與文字做結合，數字“0”設計成豬鼻子的形狀，數字“9”加上了小翅膀，使文字整體加活潑有設計感。

襯托文字內容的文字背景層，也融入了小豬的元素，采取了小豬腦袋的形狀，左右兩邊露出一點耳朵，打破常規造型。最後在背景層中加入一些灑金的小元素，增加一點新年的氣氛，也使整個圖標更靈動一些。

4.添加新元素

先以腦圖的形式發散和記錄下可以添加的新元素，然後在結合圖標做篩選。

圖標的底色是比較青春浪漫的玫粉色，為了讓新元素能與圖標的色調更和諧，這裏我沒有選擇中國傳統農曆新年的元素，而是選擇的新春、春天氣息的花朵元素和2019的生肖小豬元素結合。這樣既可以有新年和春天的元素，也可以和原圖標的顏色更加協調融合，區別於春節期間大多數以中國紅、傳統元素為主的設計，整個圖標也更加活潑青春。

5.多種手法疊加

多種手法疊加我選擇的是變換色彩、添加文字和添加新元素。首先改變了顏色選擇了更具有春天氣息的藍色，然後加上主題文字“春風十裏”文字背景層選擇的是疊加的流線圖形來體現春風浮動的感覺，最後添加春天開放的桃花來與主題呼應。

劃重點

·用戶通過圖標來尋找、識別和打開產品，圖標承載了產品與用戶的第一次連接，有著非常重要的作用。

·在節日或是重要活動期間給圖標做出相應的設計，不僅可以突出視覺給用戶帶來新鮮感，引起用戶的注意推廣活動，而且也是一個產品自我表達拉近與用戶距離的窗口。

·我們可以通過5種方式來展開設計，分別是：變換色彩，豐富背景，添加文字，添加新元素和多種手法疊加。