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

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

1. 工具層面

1.1 降低用戶理解成本

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

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

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

1.3 更快定位功能位置

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

2.裝飾層面

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

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

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

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

2.3 渲染氣氛

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

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

1.  可識(shí)別性

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

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

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

3. 大小統(tǒng)一

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

4. 色彩統(tǒng)一

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

5. 占比統(tǒng)一

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

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

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

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

6. 疏密統(tǒng)一

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

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

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

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

1. 線性圖標(biāo)

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

1.1.1 單色

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

1.1.2 雙色

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

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

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

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

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

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

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

1.1.4 線面結(jié)合

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

1.2 線的影響

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

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

1.2.1 纖細(xì)+小圓角

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

1.2.2 纖細(xì)+大圓角

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

1.2.3 粗描邊+無(wú)圓角/小圓角

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

1.2.4 粗描邊+大圓角

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

2. 面性圖標(biāo)

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

2.1 扁平風(fēng)格扁平風(fēng)格的圖標(biāo)常為單色圖標(biāo)，圖標(biāo)整體沒(méi)有漸變、高光、陰影等裝飾性設(shè)計(jì)效果，因此更加簡(jiǎn)潔，更突出功能本身，圖標(biāo)功能性更強(qiáng)，圖標(biāo)制作成本低，曾經(jīng)也是風(fēng)靡一時(shí)。但扁平風(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)色彩更加豐富，在不同類(lèi)型的軟件中都可以使用這種風(fēng)格，算是一個(gè)比較百搭的圖標(biāo)風(fēng)格。同時(shí)漸變色塊也是很多面性圖標(biāo)的組合基礎(chǔ)，在漸變色塊這個(gè)基礎(chǔ)上還可以添加不同的效果形成不同設(shè)計(jì)風(fēng)格。

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

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

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

2.3 圖層疊加

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

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

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

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

2.4 毛玻璃

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

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

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

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

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

2.5 晶白風(fēng)格

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

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

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

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

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

2.6 實(shí)物展示

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

3. 寫(xiě)實(shí)向圖標(biāo)

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

3.1 輕擬物圖標(biāo)

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

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

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

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

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

3.2 2.5D圖標(biāo)

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

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

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

3.3 3D圖標(biāo)

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

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

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

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

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

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

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

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

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

1. 圖標(biāo)盒子

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

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

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

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

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

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

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

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

1. 金剛區(qū)

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

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

2. 個(gè)人中心

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

3. 運(yùn)營(yíng)入口

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

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

4. 主題板塊

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

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

5. 底部tab欄

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

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

1. 階段一：臨摹

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

1.1 臨摹效果不佳

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

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

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

1.2 會(huì)了，但沒(méi)完全會(huì)

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

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

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

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

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

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

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

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