一、圖標(biāo)是什么

圖標(biāo)在界面設(shè)計中，雖然很小，但是卻是界面中重要組成部分之一。通過將顯示物體圖形化的形式，將功能本意高度濃縮成一個圖標(biāo)，再通過視覺隱喻更快地讓用戶理解功能，同時圖形與文字相比，圖形更加生動形象，視覺能力更強(qiáng)、更便于記憶，用戶可以根據(jù)圖形快速定位功能位置。而順著時代的發(fā)展，圖標(biāo)不再僅僅以工具的形式出現(xiàn)，更多的起到裝飾頁面，也不斷延伸出不同的圖標(biāo)類型與圖標(biāo)設(shè)計風(fēng)格。

1. 工具層面

1.1 降低用戶理解成本

圖形與復(fù)雜的文字相比，更加簡潔，相應(yīng)的識別效率也會更高。圖標(biāo)可以將復(fù)雜的文字描述高度濃縮成一個圖標(biāo)，通過視覺隱喻的方式讓用戶聯(lián)想到現(xiàn)實生活中的物體，更直觀地呈現(xiàn)圖標(biāo)代表的功能，更快理解功能的意義

1.2 減輕頁面負(fù)擔(dān)

像一些通用常見的圖標(biāo)，如搜索、播放按鈕、更多等，僅需要一個圖標(biāo)就能清晰地傳遞功能意義給用戶，省文字的描述，節(jié)省更多的頁面空間與閱讀壓力。

1.3 更快定位功能位置

圖標(biāo)與文字相比有更豐富的表現(xiàn)形式與顏色，所以視覺沖擊也就更強(qiáng)，也能更快地被識別出來，當(dāng)用戶熟悉了產(chǎn)品后，只需要通過圖標(biāo)就能快速找到想要的功能，當(dāng)功能位置發(fā)生變化時，不需再重新閱讀枯燥的文字找到對應(yīng)的功能，只需從圖標(biāo)形狀、顏色上區(qū)別，找到對應(yīng)的功能。

2.裝飾層面

2.1 傳遞品牌調(diào)性

隨著互聯(lián)網(wǎng)的發(fā)展，同類型的產(chǎn)品越來越多，要在各個產(chǎn)品中突圍，除好用的功能外還要有特色的外觀。在圖標(biāo)中融入能代表產(chǎn)品品牌的符號，強(qiáng)化品牌調(diào)性，保持圖標(biāo)的獨(dú)特性，給用戶留下深刻的印象，一看圖標(biāo)就知道是哪個產(chǎn)品。

2.2 增強(qiáng)產(chǎn)品吸引力

如今用戶對產(chǎn)品的要求除了要有好用、有用的功能外，還希望有更好的視覺享受。一組好看、有趣的圖標(biāo)可以帶給用戶更好的第一印象，增強(qiáng)產(chǎn)品對用戶的吸引力。

2.3 渲染氣氛

根據(jù)不同的節(jié)日或運(yùn)營活動，設(shè)計相應(yīng)氛圍的圖標(biāo)，幫助產(chǎn)品渲染節(jié)日氛圍或加強(qiáng)用戶對產(chǎn)品主題運(yùn)營活動的感知力度

二、圖標(biāo)繪制的基本原則

1.  可識別性

圖標(biāo)與文字在一定程度上起到相同的作用，都是通過特定的表現(xiàn)形式來傳達(dá)某種信息給用戶。順著時代發(fā)展，圖標(biāo)的設(shè)計更精細(xì)化，產(chǎn)生了更多的設(shè)計風(fēng)格，但圖標(biāo)的本質(zhì)還是沒變的，是用戶進(jìn)入功能的入口。因此，一個能被用戶快速識別、快速理解的圖標(biāo)相當(dāng)重要，是圖標(biāo)設(shè)計的基本要求。我們繪制圖標(biāo)時要盡量去掉輔助、無用的元素，保留最清晰、直接、有代表性的元素。

2. 風(fēng)格統(tǒng)一

設(shè)計師在設(shè)計圖標(biāo)時，除了會根據(jù)產(chǎn)品類型、用戶群體、品牌調(diào)性等因素決定使用哪種圖標(biāo)風(fēng)格外，還要根據(jù)圖標(biāo)的具體使用位置，因此在一個產(chǎn)品中，常常會出現(xiàn)多種風(fēng)格類型的圖標(biāo)，而風(fēng)格統(tǒng)一指的是在某個特定功能模塊內(nèi)的圖標(biāo)風(fēng)格要保持一致，是面性的圖標(biāo)就是面性，是毛玻璃效果就是毛玻璃效果。

3. 大小統(tǒng)一

圓形、正方形、三角形，在這三個圖形雖然高度相同，但是整體上三個圖形的視覺重量并不相同。在實際的操作中，界面圖標(biāo)不會由單一的形狀組合，所以形狀各異導(dǎo)致每一個圖標(biāo)的視覺體積都會有所區(qū)別，因此不能單純地利用統(tǒng)一的寬高或線去界別圖標(biāo)的大小，要根據(jù)圖標(biāo)的的特征去判斷。在平常的設(shè)計中，我通常會利用正方形來輔助圖標(biāo)繪制，在保持形狀特征下，讓正方形內(nèi)的區(qū)域占滿，哪個方向缺得越多，就往那個方向移動一點(diǎn)。

4. 色彩統(tǒng)一

色彩的統(tǒng)一指的是圖標(biāo)色彩在飽和度與明度上保持特征統(tǒng)一，數(shù)值在一定的范圍內(nèi)發(fā)生改變；而在色相的選擇上保持匹配度，像一些單色系的圖標(biāo)，通常使用的都是產(chǎn)品的主題色，而多彩圖標(biāo)，常會以主題色為主，拓展出臨近色、相似色、對比色，目前市面上大多數(shù)的圖標(biāo)顏色會使用同類色與鄰近色。對于飽和度與明度的調(diào)節(jié)，我通過利用灰度模式進(jìn)行輔助，使圖標(biāo)視覺更統(tǒng)一柔和，不會出現(xiàn)其中一個亮眼或暗沉。

5. 占比統(tǒng)一

5.1 正負(fù)形占比統(tǒng)一

正負(fù)形的合理使用是圖標(biāo)能否傳達(dá)準(zhǔn)確意思的關(guān)鍵，因此也是常會出現(xiàn)的組成元素。在繪制圖標(biāo)的正負(fù)形，注意保持占比統(tǒng)一，其中某個圖形正負(fù)形太大或太小，會顯得突兀、別扭，失去統(tǒng)一性，界面整體質(zhì)感會大大降低。

5.2 顏色占比統(tǒng)一

在繪制圖標(biāo)時，確定圖標(biāo)中的主色和輔色，繪制時盡量保證主色和輔色占比相同，保持圖標(biāo)的統(tǒng)一性。

6. 疏密統(tǒng)一

有規(guī)律地將線條組織在一起，利于形成統(tǒng)一的視覺風(fēng)格。同時，線條間可以保持一定的留白，不需要太密集，太密集的線性圖標(biāo)，縮小后反而會影響識別。同時，給圖標(biāo)留出一些空間，使線與線之間不會太擠，增強(qiáng)圖標(biāo)的呼吸感。

安利一個國外的圖標(biāo)大神Myicons?，簡單的線性圖標(biāo)一樣可以很精致。

三、不同風(fēng)格的圖標(biāo)

目前市面上的圖標(biāo)主要有四種類型，分別是：線性圖標(biāo)、面性圖標(biāo)、寫實擬物圖標(biāo)和三維立體圖標(biāo)。而不同的圖標(biāo)中組合的元素都會有一些差異，相同類型的圖標(biāo)中也會有不同的圖標(biāo)風(fēng)格。

1. 線性圖標(biāo)

線性圖標(biāo)主要還是由線性組成，設(shè)計師可以通過改變線的粗細(xì)、線的端點(diǎn)、圓角大小或加入一些面性元素在里面來使線性圖標(biāo)更加豐富、有趣，但整體來說純線性圖標(biāo)更纖細(xì)、簡潔，使得視覺沖擊力稍微弱了些。

1.1.1 單色

單色是線性最基礎(chǔ)的表達(dá)方式，這種設(shè)計風(fēng)格單調(diào)、視覺沖擊較差，但是制作難度低，設(shè)計所耗費(fèi)的時間頁更斷，因此常常會出現(xiàn)在個人中心頁中，僅需要有圖標(biāo)顯示功能入口，設(shè)計要求并不高的功能模塊中。

1.1.2 雙色

雙色圖標(biāo)與單色圖標(biāo)相比，視覺沖擊力更強(qiáng)，應(yīng)用范圍更廣，通常會融入品牌主色，是除了線面圖標(biāo)外出現(xiàn)在首頁中的線性圖標(biāo)。因為雙色圖標(biāo)可以加入品牌色，增強(qiáng)品牌感的同時，使圖標(biāo)增加了設(shè)計感，不會像單色圖標(biāo)那么單調(diào)乏味，因此雙色圖標(biāo)也會以“次要功能”的形式出現(xiàn)在首頁當(dāng)中。

像在“去哪兒旅行App”和“平安銀行App”中，頁面已經(jīng)存在一組視覺沖擊、視覺層級更高的一組面性圖標(biāo)，但是因為業(yè)務(wù)需求露出更多功能入口，因此就可以使用線性圖標(biāo)這種視覺沖擊力弱一點(diǎn)的圖標(biāo)搭配，既不會搶走主視覺，也能滿足業(yè)務(wù)需求。

1.1.3 斷點(diǎn)圖標(biāo)

斷點(diǎn)圖標(biāo)在目前的app圖標(biāo)設(shè)計上較少使用。雖然斷點(diǎn)風(fēng)格圖標(biāo)在表達(dá)上有一定的局限性，但是圖標(biāo)設(shè)計感更強(qiáng)，圖標(biāo)更有趣味性。

斷點(diǎn)圖標(biāo)并不是隨便刪除某個描點(diǎn)，在斷點(diǎn)的位置選擇上和斷點(diǎn)的大小都是要注意的地方。斷點(diǎn)位置的選擇要注意兩點(diǎn)：

1 ) 保持相同角度，能更好地增強(qiáng)圖標(biāo)的協(xié)調(diào)性，避免造成圖標(biāo)的視覺混亂降低用戶的視覺體驗。

2 ) 選擇在線的拐角處，利用連續(xù)性原理，在一定的路徑下使這種線的斷裂保持視覺連貫性，保持圖形整體性。

1.1.4 線面結(jié)合

在原本的線性圖標(biāo)上加入色塊，就會產(chǎn)生新的設(shè)計風(fēng)格--線面圖標(biāo)。線面圖標(biāo)比較特殊，圖標(biāo)的視覺層級會隨著圖標(biāo)中包含的色塊大小而變化，色塊越大，視覺沖擊力也越強(qiáng)。因此在設(shè)計線面結(jié)合圖標(biāo)時，要先確定圖標(biāo)在該頁面中的重要程度，如果是主要功能則將色塊的占比加大。

1.2 線的影響

圖標(biāo)中的線主要由兩個元素組成，一個是線的粗細(xì)，一個是線的端點(diǎn)，而這兩個元素也是主要控制線性圖標(biāo)的性格。以常用的48px圖標(biāo)盒子為例，常用線的粗細(xì)有2px、3px、4px，圖標(biāo)的線越粗圖標(biāo)越有力量感反之圖標(biāo)越纖細(xì)；而圖標(biāo)的圓角越小時圖標(biāo)越穩(wěn)重、專業(yè)，像一些辦公軟件、金融產(chǎn)品，圖標(biāo)的圓角就比較小。圓角越大圖標(biāo)越飽滿親和力更強(qiáng)，像一些兒童學(xué)習(xí)類軟件就會使用大圓角的圖標(biāo)設(shè)計。

因此，圖標(biāo)的線粗細(xì)與圓角大小，都根據(jù)不同產(chǎn)品類型與目標(biāo)用戶確定。而大多數(shù)線性圖標(biāo)主要有四種基礎(chǔ)造型：纖細(xì)+小圓角、纖細(xì)+大圓角、粗描邊+小圓角/無圓角、粗描邊+大圓角。

1.2.1 纖細(xì)+小圓角

精致、嚴(yán)謹(jǐn)，多用在銀行、新聞類APP。沒有圓角，會使圖標(biāo)更加尖銳，對于銀行類APP會給人一種威脅，但是太大的圓角，顯得有點(diǎn)輕浮、可愛，不符合銀行莊嚴(yán)的感覺，所以稍微添加一些圓角，使圖標(biāo)更有親和力的同時，也保留一些莊嚴(yán)的感覺。

1.2.2 纖細(xì)+大圓角

更加精致、有親和力，這種風(fēng)格是目前市面上軟件使用得最多的一種線性圖標(biāo)風(fēng)格。

1.2.3 粗描邊+無圓角/小圓角

粗曠、個性、有很強(qiáng)的力量感。更多的用在運(yùn)動、汽車這類主要用戶傾向男性的軟件，同時也會在一些潮流類電商軟件中出現(xiàn)，凸顯更有個性的設(shè)計風(fēng)格。

1.2.4 粗描邊+大圓角

圓潤、可愛、親和力強(qiáng)，常用在偏向兒童的產(chǎn)品

2. 面性圖標(biāo)

面性圖標(biāo)時軟件使用的最多的一種圖標(biāo)類型，設(shè)計師通過改變色塊、圖形圓角、正負(fù)形和底托等元素，讓面性圖標(biāo)呈現(xiàn)不同的設(shè)計風(fēng)格，但無論是哪種設(shè)計風(fēng)格，面性圖標(biāo)設(shè)計沖擊力相比面性圖標(biāo)更強(qiáng)，因此市面上大多數(shù)核心功能都會用到面性圖標(biāo)來提高功能的設(shè)計層級，讓功能在頁面中更加突出。

2.1 扁平風(fēng)格扁平風(fēng)格的圖標(biāo)常為單色圖標(biāo)，圖標(biāo)整體沒有漸變、高光、陰影等裝飾性設(shè)計效果，因此更加簡潔，更突出功能本身，圖標(biāo)功能性更強(qiáng)，圖標(biāo)制作成本低，曾經(jīng)也是風(fēng)靡一時。但扁平風(fēng)格的圖標(biāo)缺少亮點(diǎn)與制作成本的原因，導(dǎo)致圖標(biāo)同質(zhì)化嚴(yán)重，缺少特點(diǎn)，很難被人記住，因此現(xiàn)在很少被使用。

2.2 漸變色塊

在扁平風(fēng)的基礎(chǔ)上，在色塊上添加漸變色，在保留了扁平圖標(biāo)的功能性外，使圖標(biāo)色彩更加豐富，在不同類型的軟件中都可以使用這種風(fēng)格，算是一個比較百搭的圖標(biāo)風(fēng)格。同時漸變色塊也是很多面性圖標(biāo)的組合基礎(chǔ)，在漸變色塊這個基礎(chǔ)上還可以添加不同的效果形成不同設(shè)計風(fēng)格。

在設(shè)計漸變色塊風(fēng)格的圖標(biāo)時要注意兩點(diǎn)：

1 ) 市面上的app都會選擇同類色作為漸變色，然后通過改變顏色的飽和度，使?jié)u變色的明亮對比更加明顯的同時，顏色過渡也更加柔和舒服，使圖標(biāo)更有通透感，增加視覺沖擊力。

2 ) 在設(shè)計這種有白色色塊在頂部的圖標(biāo)時，可以給色塊添加一個淺淺的透明漸變，讓色塊過渡自然一些，同時也可以添加一層淺淺的陰影，增加層次感。

2.3 圖層疊加

圖層疊加風(fēng)格的圖標(biāo)看上去像兩個透明圖層疊加在一起的感覺，圖標(biāo)層次感強(qiáng)，細(xì)節(jié)也更加豐富，圖標(biāo)風(fēng)格更新穎、更年輕化，因此如果在設(shè)計一個年輕人使用或者希望打造年輕化頁面感受的時候，可以嘗試使用圖層疊加風(fēng)格。

繪制圖層疊加風(fēng)格的圖標(biāo)時要注意：

1 ) 重疊在一起的那個色塊是通過布爾運(yùn)算得到的，并不是通過簡單的透明圖層得到的。而重疊在一起的那個色塊也不宜過于顯眼，畢竟看的是圖標(biāo)的整體。因此可以參考一下“智行火車票”，通過改變飽和度5%到10%和使用15%左右的同類色，就可以讓用戶看得清圖標(biāo)的變化，同時也不會是色塊太突兀影響觀感。

2 ) 盡量統(tǒng)一疊加部分圖形與圖標(biāo)之間的占比。

2.4 毛玻璃

毛玻璃是近年最火的一種設(shè)計風(fēng)格，不僅設(shè)計風(fēng)格新穎、特別，而且還有很強(qiáng)的質(zhì)感表現(xiàn)，因此不僅在金融產(chǎn)品，還是生鮮產(chǎn)品或票務(wù)產(chǎn)品，都有毛玻璃風(fēng)格的圖標(biāo)。

而在設(shè)計毛玻璃圖標(biāo)時，里面也有很多細(xì)節(jié)需要注意：

1 ) 背景模糊效果不需要太大，有一種若隱若現(xiàn)的感覺就可以。如果調(diào)太大，可能就看不出是毛玻璃效果了。

2 ) 添加背景模糊效果的圖層不需要用純白色。像百度這種同類色配色的毛玻璃圖標(biāo)，只需要將圖標(biāo)的主色調(diào)低飽和度后，就可以使用。這樣的好處是不僅讓圖標(biāo)顏色過渡更加自然，同時有更多的組合方式、更多的層次。

3 ) 使用邊緣光。毛玻璃圖標(biāo)有很多相互重疊的圖形，如果重疊的圖形顏色相近的話，圖形邊緣就會被弱化，使用邊緣光可以明確圖形邊界，增加層次感。同時使用邊緣光，還可以為圖形塑造類似玻璃的厚度，細(xì)節(jié)更加豐富。

2.5 晶白風(fēng)格

晶白類圖標(biāo)利用圓角正方形或圓形作為底托再在上面添加一個主色為白色的圖標(biāo)，然后通過調(diào)節(jié)透明度、投影、漸變給圖標(biāo)添加一些質(zhì)感，是常見的圖標(biāo)風(fēng)格，也是使用了很久的一種設(shè)計風(fēng)格。

后面也延伸出了另一種設(shè)計風(fēng)格圖標(biāo)主題通常不會是統(tǒng)一的造型，像喜馬拉雅這種圖標(biāo)，圖標(biāo)本身元素復(fù)雜、細(xì)節(jié)較多，形狀也更加不可控，因此用一個淺色圓形底托，將他們統(tǒng)一起來。不僅可以將復(fù)雜的圖形統(tǒng)一起來，還可以添加吸引人眼球的漸變色更好地增加圖標(biāo)的視覺占比，有更強(qiáng)的視覺沖擊感。

在繪制晶白風(fēng)格時，注意兩點(diǎn)：

1 ) 可以適當(dāng)改變底托圖形的形狀，增強(qiáng)差異化。

2 ) 統(tǒng)一光源，越白的地方越亮，注意控制好透明度的變化與角度。

2.6 實物展示

這類圖標(biāo)會出現(xiàn)在生鮮類、藥品類、潮流電商類產(chǎn)品中，因為使用圖標(biāo)很難將這些類型概括起來，直接使用圖片展示更加直觀，但因為圖片細(xì)節(jié)、元素更多更復(fù)雜，如果使用太多會使圖標(biāo)看起來很雜亂。

3. 寫實向圖標(biāo)

寫實向圖標(biāo)模擬現(xiàn)實中的物體，更貼近生活，用戶對這類圖標(biāo)理解能力也更強(qiáng)，繪制難度也更高，繪制時間也更長。寫實向圖標(biāo)除了基本的色塊組合、顏色搭配外，還有更多的透視與光影來增強(qiáng)實感。常常用在運(yùn)營設(shè)計上，或用在一些特殊界面模塊從而增強(qiáng)視覺層級。

3.1 輕擬物圖標(biāo)

輕擬物圖標(biāo)是最近很好的的設(shè)計風(fēng)格，但是輕擬物圖標(biāo)出現(xiàn)在界面設(shè)計上還是比較少的。因為輕擬物圖標(biāo)元素比較復(fù)雜，視覺沖擊力強(qiáng)，放在界面上有可能搶走用戶對核心內(nèi)容的關(guān)注度，通常會運(yùn)用在運(yùn)營設(shè)計長圖、彈窗、核心功能等。

而繪制輕擬物圖標(biāo)，主要注意的是光影的打造。光影主要由這幾個元素組成：亮面、暗面、明暗交接線、反光。在繪制輕擬物圖標(biāo)時，主要注意以下幾點(diǎn)：

1 ) 在繪制輕擬物圖標(biāo)時，不一定需要使用統(tǒng)一色相中的顏色，可以通過改變顏色的飽和度明度的對比和冷暖色的對比來營造光影，使圖標(biāo)色彩更豐富、對比更明顯。

2 ) 反光可以使用圖標(biāo)主色的對比色，降低飽和度，提高明度，運(yùn)用在輕擬物圖標(biāo)邊緣，使邊緣更更清晰，不會糊在一起，圖標(biāo)整體立體感更強(qiáng)。

3 ) 明暗對比越明顯，輕擬物圖標(biāo)越顯通透、立體。

3.2 2.5D圖標(biāo)

2.5D曾經(jīng)是很火的一種設(shè)計風(fēng)格，但是現(xiàn)在已經(jīng)逐漸被輕擬物與建模替代。2.5D圖標(biāo)固定展示了三個面，有很強(qiáng)的立體感，常常運(yùn)用在科技類的網(wǎng)站設(shè)計中。

在繪制2.5D風(fēng)格圖標(biāo)時，要注意：

1)統(tǒng)一好圖標(biāo)的厚度。

3.3 3D圖標(biāo)

隨著時代進(jìn)步，3D逐漸成為一個主流的設(shè)計風(fēng)格。通過專業(yè)軟件給予了圖形材質(zhì)質(zhì)感、真實的光影，更加貼近生活真實物件，同時還可以配合動效的設(shè)計，有很強(qiáng)的視覺沖擊力和新鮮感。常常出現(xiàn)在網(wǎng)頁設(shè)計中、運(yùn)營設(shè)計中。目前繪制3D圖標(biāo)主要用blender和C4D，C4D在渲染方面有oc的加持，渲染效果直接拉滿；Blender則是完全免費(fèi)的軟件，目前熱度也是瘋狂漲，在渲染方面雖然沒有oc好，但是還是可以滿足日常工作。

而在繪制3D圖標(biāo)需要注意以下幾點(diǎn)：

1 ) 統(tǒng)一主光源方向。建模里面會出現(xiàn)很多打光類型，如主光、輔光（有時不止一個）、邊緣光等。

2 ) 統(tǒng)一攝像機(jī)位置。攝像機(jī)與物體的距離、角度影響渲染的最終效果。

3 ) 用數(shù)值定義物體大小。建模軟件不像繪圖軟件那樣強(qiáng)調(diào)物體的數(shù)值大小，拉遠(yuǎn)看物體就是小，拉近看就是大，做一個物體時還好，但是要做一組3D圖標(biāo)時，就要定義好物體的大小，使圖標(biāo)更加統(tǒng)一。

四、如何確定使用哪種類型的圖標(biāo)

不同風(fēng)格的圖標(biāo)有著不同的特點(diǎn)，設(shè)計師要根據(jù)圖標(biāo)放置位置和功能選擇圖標(biāo)類型。其中最有決定性的因素就是圖標(biāo)的重量，而影響圖標(biāo)重量的因素有：占比、顏色、細(xì)節(jié)元素。線性圖標(biāo)在界面中占比較少，因此看起來會更加簡潔，視覺沖擊力弱，常用在重要程度低，不需要突出展示的功能上；面性圖標(biāo)占比更高，視覺上會更加飽滿，同時顏色色塊使圖標(biāo)更加顯眼，視覺沖擊力得到力增強(qiáng)，使用戶對圖標(biāo)的感知力更高，是最常用的圖標(biāo)類型，用在各個重要功能入口上；輕擬物和3D圖標(biāo)除了占比高、顏色豐富，還有各種光影、材質(zhì)的細(xì)節(jié)，圖標(biāo)元素更多，視覺沖擊力也更強(qiáng)了，也因為圖標(biāo)復(fù)雜、視覺沖擊力強(qiáng)，因此很少出現(xiàn)在界面上，通常運(yùn)用在一些特殊運(yùn)營入口或需要吸引用戶的大模塊中。

不同的類型在界面中也會搭配出現(xiàn)。

五、圖標(biāo)的繪制

1. 圖標(biāo)盒子

圖標(biāo)盒子是輔助繪制圖標(biāo)的一個工具，幫助設(shè)計師在設(shè)計圖標(biāo)時更好地規(guī)范好各個圖標(biāo)的尺寸大小。而圖標(biāo)盒子也有很多種，我最常用的是48*48px，這個尺寸對于線條的控制比較方便，通常用1px、2px、3px。

工具始終都是工具，界面圖標(biāo)不會由單一的形狀組合，所以形狀各異導(dǎo)致每一個圖標(biāo)的視覺體積都會有所區(qū)別，因此不能單純地利用統(tǒng)一的寬高或線去界別圖標(biāo)的大小，要根據(jù)圖標(biāo)的的特征去判斷。在平常的設(shè)計中，我通常會利用正方形來輔助圖標(biāo)繪制，在保持形狀特征下，讓正方形內(nèi)的區(qū)域占滿，哪個地方缺得越多，哪個地方就拉伸一點(diǎn)。

2. 圖標(biāo)的繪制方法

圖標(biāo)中會存在標(biāo)準(zhǔn)化圖標(biāo)，像刪除就是一個垃圾桶、像首頁通常是一個家的圖標(biāo)、還有搜索則是放大鏡的圖，照片是兩個山一個太陽，這些圖標(biāo)都習(xí)慣以這種表達(dá)方式出現(xiàn)，用戶已經(jīng)習(xí)慣了這種表現(xiàn)形式，因此對于標(biāo)準(zhǔn)化圖標(biāo)，盡量維持以往的變現(xiàn)形式，讓用戶更好地理解圖標(biāo)意思。

非標(biāo)準(zhǔn)化圖標(biāo)可以細(xì)分為具象與抽象，對于具象類圖標(biāo)，現(xiàn)實中有實物可以參照。這類圖標(biāo)的設(shè)計較為簡單，可以在某度上尋找相關(guān)照片，根據(jù)實物的造型進(jìn)行提煉和簡化。

抽象圖標(biāo)則較為復(fù)雜，通常是某些特定行為的名詞，沒有具體直接的參照物。因此在設(shè)計前，我們要先充分理解功能本身，這個功能是什么、用戶怎么用，然后提煉關(guān)鍵詞，接著根據(jù)關(guān)鍵詞發(fā)散思維，尋找相關(guān)聯(lián)的圖形來表示含義。例如“社區(qū)”功能，功能目的是提供一個讓用戶互相交流的環(huán)境，同時吸引無目的的用戶逛起來發(fā)現(xiàn)感興趣的話題，讓更多的信息流得到曝光從功能目的中提煉一下關(guān)鍵詞：聚在一起、發(fā)現(xiàn)、交流。接著發(fā)散思維進(jìn)行腦暴，聚在一起：一群人-圈子-同一個世界的人-星球，發(fā)現(xiàn)：看-眼睛；尋找-望遠(yuǎn)鏡-雷達(dá)-指南針，交流：聊天-聊天氣泡-聲波。

六、圖標(biāo)的使用場景

圖標(biāo)運(yùn)用在功能入口上是最基礎(chǔ)的使用場景之一，如首頁中的金剛區(qū)、個人中心都會用到很多圖標(biāo)作為功能入口。

1. 金剛區(qū)

目前國內(nèi)的APP包含的功能有很多，而金剛區(qū)的作用就整合產(chǎn)品功能并放置在首頁中，提高這些功能的曝光量，給其他功能引流，讓更多用戶知道或使用上產(chǎn)品功能，增強(qiáng)用戶對產(chǎn)品的粘性。像美團(tuán)，很多人對他的了解是一個外賣工具，但它里面還有很多其他功能，使用金剛區(qū)展示它多元化的服務(wù)。

金剛區(qū)圖標(biāo)通常會有1～3行，根據(jù)業(yè)務(wù)具體需求做調(diào)整，在每行中會有4～5個圖標(biāo)。尺寸范圍一般在40px～48px左右（@1x），同時會根據(jù)具體的業(yè)務(wù)需求，調(diào)整大小，最終都是一預(yù)覽效果為準(zhǔn)。

2. 個人中心

個人中心是個人類型功能、運(yùn)營活動入口和工具的集合地，是除了金剛區(qū)外，含圖標(biāo)最多的一個地方。個人中心中包含很多不同類型的功能，可以使用卡片式的設(shè)計，將功能圖標(biāo)更好地分類。在圖標(biāo)風(fēng)格的選擇上，個人類型功能是最重要的功能，通常會以面性風(fēng)格放置在頂部，如果個人中心中需要展示運(yùn)營入口時，需要減弱個人類型功能圖標(biāo)的視覺沖擊，會使用線性風(fēng)格圖標(biāo)。

3. 運(yùn)營入口

運(yùn)營入口主要作用是讓用戶點(diǎn)擊后跳轉(zhuǎn)到產(chǎn)品活動頁，因此具有強(qiáng)視覺沖擊力的圖標(biāo)，會更吸引用戶眼球，從而提高點(diǎn)擊運(yùn)營入口的機(jī)會。

因此運(yùn)營入口上，通常會使用面性圖標(biāo)、寫實向圖標(biāo)或3d圖標(biāo)。因為寫實向圖標(biāo)或3D圖標(biāo)可以提高視覺層級，因此經(jīng)常運(yùn)用在主要運(yùn)營板塊上，而面性圖標(biāo)相比下較弱，當(dāng)頁面已存在一個主視覺或主要功能時，運(yùn)用在運(yùn)營板塊上。

4. 主題板塊

在軟件中會有很多不同主題的信息板塊，同時信息板塊間有較大的差異，如果全部展示出來會使頁面樣式不同統(tǒng)一、信息混亂導(dǎo)致降低用戶的閱讀體驗。因此使用主題板塊，將不同主題信息集中在一起，然后露出部分關(guān)鍵信息在頁面中，保證視覺統(tǒng)一的同時，還可以起到流量分發(fā)的作用，讓用戶在茫茫信息流中快速找到自己感興趣的方向，提供用戶閱讀體驗。

純文字的排版在信息流中略顯枯燥，而圖標(biāo)在主題板塊中起到潤色主題的作用，渲染主題氣氛，提高不同主題板塊的識別度與差異化。對于一些長標(biāo)題的主題板塊，只需要記住圖標(biāo)就能快速定位主題板塊位置。

5. 底部tab欄

底部tab欄功能數(shù)量通常在2～5個，在設(shè)計時，要設(shè)計點(diǎn)擊前和點(diǎn)擊后兩個圖標(biāo)狀態(tài)，同時幫助兩個狀態(tài)是有明顯的變化。底部tab欄圖標(biāo)大小通常在22px（@1x）左右，而圖標(biāo)底下的文字時10px（@1x）。底部tab欄作為最常出現(xiàn)的區(qū)域，是傳達(dá)產(chǎn)品品牌感、提升產(chǎn)品辨識度、記憶點(diǎn)的重要區(qū)域，很多產(chǎn)品都會在底部tab欄的圖標(biāo)設(shè)計上加入品牌元素，增強(qiáng)辨識度。

七、如何提高圖標(biāo)設(shè)計能力

1. 階段一：臨摹

臨摹是人類學(xué)習(xí)一個新技能開始，就像嬰兒學(xué)習(xí)父母說話一樣。但是一開始很多都不會臨摹，或者照著畫也不會，那我們應(yīng)該如何去做？

1.1 臨摹效果不佳

1 ) 提高審美能力，多看一些主流的圖標(biāo)，可以上追波看看目前流行的設(shè)計風(fēng)格，不行的話就去看看大廠都在畫怎樣的圖標(biāo)。

2 ) 明確自己的能力，對自己目前的設(shè)計水平有一個客觀的評價，到一個怎樣的水平。很多人都急于求成，最基礎(chǔ)的線性圖標(biāo)都不會就上來搞輕擬物，畫來畫去都不好看，最后就放棄了。

3 ) 敢于支出自己的不足，許多人畫了許多時間去畫一組圖標(biāo)，就很容易被自己催眠，以為自己已經(jīng)畫得很好了，其實還會有很多不足。所以我們要敢于指出自己的不足，在前期臨摹階段，畫完后多去對比原作，自 己有哪些地方?jīng)]有原作做得好的

1.2 會了，但沒完全會

什么是會了，指的是可以繪制出于優(yōu)秀原作一樣的圖標(biāo)；什么是沒完全會，指的是不知道原作是怎么達(dá)到這個好看的效果的。而且很重要的一點(diǎn)是，你臨摹的作品可能也有一些不好，需要改進(jìn)的地方，以此在這個階段我們要做的是：

1 ) 多看別人總結(jié)的知識點(diǎn)，知道如何去判斷一個圖標(biāo)是否還有可以改進(jìn)的地方，這樣繪制是不是正確的

2 ) 懂得總結(jié)與思考，原作是用來什么樣的手法讓我覺得它是好看的，這些技法怎么用，還可以用在哪

2. 階段二：半原創(chuàng)

臨摹是一個提升自己的手法，但不代表可以直接用到自己的作品中，直接復(fù)制別人的設(shè)計，并不叫設(shè)計師，復(fù)制粘貼誰不會啊，所以在懂得如何臨摹后，我們要敢于嘗試半原創(chuàng)。這里說的半原創(chuàng)不是指在別人圖標(biāo)的基礎(chǔ)上加上兩筆就是半原創(chuàng)，而是要吸取了優(yōu)秀圖標(biāo)的優(yōu)點(diǎn)后，重新設(shè)計出一個有相同特點(diǎn)的圖標(biāo)。那我們應(yīng)該如何半原創(chuàng)呢？

1 ) 還是多看，但是不同于臨摹階段，我們在臨摹的時候還要多想，這個圖標(biāo)的特點(diǎn)是什么、怎么做、還能怎么用，積累圖標(biāo)不同的表現(xiàn)形式2 ) 多練，這個建立在多臨摹上，目的知道別人的技法是什么做的，練習(xí)了不同的技法后，將它們再融合在一起

3. 階段三：原創(chuàng)

第三個階段，也是最難得階段。目前很多情況都是只能成為融圖設(shè)計師，將不同作品優(yōu)秀的點(diǎn)組合起來。但如果要建立自己的風(fēng)格也是要做融圖設(shè)計師的基礎(chǔ)上，多想、多嘗試，敢于突破，在一次次的融圖后，發(fā)現(xiàn)出自己的特點(diǎn)，為自己的作品打上自己標(biāo)簽，輸出具有差異化特點(diǎn)的設(shè)計。最有印象的就是夸克的設(shè)計，品牌特色很明顯，其實我們每個人也可以成為一個品牌，只要我們足夠努力