想必大家都知道，圖標(biāo)是一種圖形化的標(biāo)識(shí)，對(duì)于圖標(biāo)都不陌生，多多少少都應(yīng)該了解一點(diǎn)的啦，我們先從基礎(chǔ)的理論入手哈：圖標(biāo)：它具有高度濃縮并高效快捷傳達(dá)信息，便于記憶的特性。在UI的設(shè)計(jì)體系中，圖標(biāo)是最重要的組成部分之一，是任何UI界面中都不可或缺的視覺(jué)元素。了解圖標(biāo)相關(guān)的概念，以及正確繪制的方法，可以說(shuō)是入門(mén)UI設(shè)計(jì)的必備條件。從古代的圖騰到現(xiàn)代圖標(biāo)，可以看出其不僅運(yùn)用廣泛，且功能強(qiáng)大還附有特殊的含義。它可以是一個(gè)國(guó)家的國(guó)旗，一個(gè)品牌的標(biāo)志，也可以是交通等公共指示牌。關(guān)于這一點(diǎn)大家可能覺(jué)得，圖標(biāo)真的那么牛嗎？那當(dāng)然啦?，F(xiàn)在網(wǎng)上有很多文章、視頻、問(wèn)答之類(lèi)的都有關(guān)于圖標(biāo)的介紹，都是都比較片面，碎片化的只是太多了，需要慢慢的整理消化，認(rèn)識(shí)不全面，在設(shè)計(jì)的過(guò)程中總會(huì)蒙圈，設(shè)計(jì)作品總感覺(jué)缺少啥，不完善一樣。對(duì)于這個(gè)圖標(biāo)的設(shè)計(jì)問(wèn)題我覺(jué)得我有必要在這里我詳細(xì)的給大家總結(jié)一下圖標(biāo)設(shè)計(jì)的所有要點(diǎn)和具體的設(shè)計(jì)方法，幫助更所的設(shè)計(jì)新人更快的學(xué)習(xí)掌握?qǐng)D標(biāo)設(shè)計(jì)的要點(diǎn)接下來(lái)我們先了解幾個(gè)基本的圖片內(nèi)容：一：圖標(biāo)的基本認(rèn)識(shí)我們可以把圖標(biāo)分為廣義和狹義兩種概念：廣義指的是在現(xiàn)實(shí)中有明確指向含義的圖形符號(hào)狹義主要應(yīng)用于計(jì)算機(jī)軟件方面，UI中的圖標(biāo)是具有明確指代含義的計(jì)算機(jī)圖形，主要針對(duì)的也是這一個(gè)概念，與非常大的覆蓋性UI界面視覺(jué)組成的關(guān)鍵元素之一最常見(jiàn)的扁平化設(shè)計(jì)風(fēng)格中，界面的實(shí)際視覺(jué)組成4種元素有：圖片、文字、幾何圖形、圖標(biāo)。圖片、文字、幾何圖形的運(yùn)用：用于到排版的技巧圖標(biāo)則是UI設(shè)計(jì)中除了插畫(huà)元素以外唯一需要我們“繪制”、“創(chuàng)作”的元素，一涉及到這兩件事，難度就直線(xiàn)上升了?？赡苡腥藭?huì)說(shuō)：往界面里弄一些方方圓圓、貼幾張圖片、填一些字就可以了，用也是可以的，為什么還要那么費(fèi)勁的設(shè)置圖標(biāo)呢？原因很簡(jiǎn)單。文字雖然也是一種圖形符號(hào)，但相對(duì)于圖標(biāo)而言，文字肯定沒(méi)有圖標(biāo)文那么方便簡(jiǎn)潔，既能展現(xiàn)要突出的意義又符合大眾的審美，賞心悅目的同時(shí)還可以容易讓人記憶深刻，在識(shí)別效率上有先天的劣勢(shì)。視覺(jué)上的沖擊力也是一方面，大家可以看下圖想象一下只有文字沒(méi)有圖婊會(huì)是給人什么樣的視覺(jué)效果？從功能分類(lèi)角度分為：?jiǎn)?dòng)圖標(biāo)、應(yīng)用圖標(biāo)、功能圖標(biāo)，以啟動(dòng)圖標(biāo)為例講解：?jiǎn)?dòng)圖標(biāo)啟動(dòng)圖標(biāo)的設(shè)計(jì)比前面兩種類(lèi)型的圖標(biāo)說(shuō)起來(lái)更難，因?yàn)樗鼘?shí)際上就是把“LOGO嵌套進(jìn)系統(tǒng)圖標(biāo)模版”的圖標(biāo)。除了必要的規(guī)范掌握以外，啟動(dòng)圖標(biāo)的主體物設(shè)計(jì)就是LOGO的設(shè)計(jì)，已經(jīng)超出了圖標(biāo)繪制本身的知識(shí)點(diǎn)一下是設(shè)計(jì)形式解析：A：文字形式適用了文字作為圖標(biāo)主體物的類(lèi)型，通常是這類(lèi)應(yīng)用本身的品牌LOGO就使用了文字，所以這里就把字體照搬過(guò)來(lái)。B：圖標(biāo)形式對(duì)于一些偏工具，適合用簡(jiǎn)單圖形傳達(dá)應(yīng)用功能的啟動(dòng)圖標(biāo)，就會(huì)采取使用工具圖標(biāo)的方式設(shè)計(jì)。C：圖形圖標(biāo)圖形形式看起來(lái)和圖標(biāo)形式很接近，但實(shí)際上完全不屬于同一類(lèi)型，之所以它不是圖標(biāo)，是因?yàn)檫@類(lèi)圖標(biāo)的主體圖形是一種經(jīng)過(guò)高度抽象化的標(biāo)識(shí)，傳達(dá)的是品牌性，而不是圖形的含義。D：插畫(huà)形式對(duì)于一些比較純粹的應(yīng)用，如讀本、漫畫(huà)、幼兒類(lèi)應(yīng)用，就熱衷于采用卡通形象作為圖標(biāo)的主體進(jìn)行設(shè)計(jì)。工具圖標(biāo)：即應(yīng)用內(nèi)有明確功能、提示含義的標(biāo)識(shí)我們將風(fēng)格分為線(xiàn)性風(fēng)格、面性風(fēng)格、線(xiàn)面結(jié)合、2.5D及微擬物風(fēng)這五種風(fēng)格風(fēng)格1：線(xiàn)性風(fēng)格線(xiàn)性圖標(biāo)，即圖形是通過(guò)線(xiàn)條的描邊輪廓勾勒出來(lái)的！多數(shù)人對(duì)它樣式認(rèn)識(shí)的第一反應(yīng)應(yīng)該是使用純色的閉合輪廓，比如上圖案例，線(xiàn)性圖標(biāo)的創(chuàng)作空間看似不多，但實(shí)際上有非常多的調(diào)整空間。線(xiàn)性風(fēng)格的圖標(biāo)不同粗細(xì)，圓角或直角帶給人的視覺(jué)感覺(jué)是完全不同效果，可以看下圖：·圓角圖標(biāo)圓角的圖標(biāo)給人柔和、親切的一面。版本之后，粗線(xiàn)條圓角圖標(biāo)被越來(lái)越多的人運(yùn)用，可以說(shuō)它是當(dāng)下較為流行的一種。直角圖標(biāo)直角的圖標(biāo)給人干脆、果斷的一面。雙色圖標(biāo)雙色圖標(biāo)色彩可以選擇App或者品牌主色和輔色。用于分類(lèi)頁(yè)面相比單色來(lái)說(shuō)，多加一個(gè)色彩點(diǎn)綴，畫(huà)面不會(huì)顯得比較單調(diào)。且不會(huì)過(guò)于復(fù)雜、花哨。透明度圖標(biāo)通過(guò)區(qū)分圖標(biāo)的透明度或者是同色的深淺變化，來(lái)增加圖標(biāo)的層次，豐富細(xì)節(jié)。風(fēng)格2：面性風(fēng)格·面性-透明度疊加·面性-顏色疊加·面性-微漸變質(zhì)感·面性-光影漸變質(zhì)感這種帶有光影質(zhì)感的圖標(biāo)，常用于一些運(yùn)營(yíng)類(lèi)或游戲的圖標(biāo)面性圖標(biāo)，即使用對(duì)內(nèi)容區(qū)域進(jìn)行色彩填充的圖標(biāo)樣式。同樣，在這類(lèi)圖標(biāo)中，也不是只能應(yīng)用純色的方式進(jìn)行填充，還有非常多的視覺(jué)表現(xiàn)類(lèi)型風(fēng)格3：混合風(fēng)格（線(xiàn)面結(jié)合圖標(biāo)）·線(xiàn)面錯(cuò)位線(xiàn)性圖標(biāo)結(jié)合縮放錯(cuò)位的鄰近色的面，增加了圖標(biāo)的層次感。相比單色線(xiàn)性圖標(biāo)更為豐富。線(xiàn)面漸變風(fēng)格4：2.5D風(fēng)圖標(biāo)2.5D是一種偏卡通、像素畫(huà)風(fēng)格的扁平設(shè)計(jì)類(lèi)型，在一些非必要的設(shè)計(jì)環(huán)境中，使用2.5D會(huì)比較容易搭配主流的界面設(shè)計(jì)風(fēng)格，有更強(qiáng)的趣味性和層次感。炫彩漸變這是一個(gè)拗口的原創(chuàng)名詞，找不到更合適的，還是覺(jué)得浮夸點(diǎn)符合它的氣質(zhì)。這種圖標(biāo)，就是通過(guò)一系列非常激進(jìn)的漸變和撞色實(shí)現(xiàn)，通常還會(huì)使用彩色的陰影。使用這樣圖標(biāo)的區(qū)域，通常都會(huì)呈現(xiàn)出一副五彩斑斕的景象，只有在內(nèi)容非常豐富且用戶(hù)偏向年輕化的產(chǎn)品中可以使用，是一種非常難駕馭的設(shè)計(jì)風(fēng)格。實(shí)物貼圖最后一種，就是采用了真實(shí)攝影物體的設(shè)計(jì)風(fēng)格。雖然它不屬于完全依靠我們創(chuàng)作和繪制出來(lái)的，但想想還是放進(jìn)來(lái)合適。因?yàn)檫@種圖標(biāo)的出現(xiàn)頻率非常高，有必要再后面掌握它的做法。風(fēng)格5：擬物風(fēng)格雖然當(dāng)下流行于扁平風(fēng)格，但仍然保留了微擬物風(fēng)格，并被部分行業(yè)或營(yíng)銷(xiāo)活動(dòng)運(yùn)用。擬物風(fēng)格的圖標(biāo)現(xiàn)在出現(xiàn)的頻率越來(lái)越高，集中在大型的運(yùn)營(yíng)活動(dòng)中，通常這些活動(dòng)會(huì)通過(guò)擬物的方式將頭部設(shè)計(jì)成有故事性的場(chǎng)景，因?yàn)閷?duì)于這些應(yīng)用來(lái)說(shuō)，擬物設(shè)計(jì)所傳遞的信息往往更直觀和準(zhǔn)確，所以自然頂部的相關(guān)圖標(biāo)使用擬物的設(shè)計(jì)形式會(huì)更貼合。圖標(biāo)的設(shè)計(jì)方式是多種多樣的，除了以上的那些，還有很多需要我們慢慢的挖掘，比如：明星大頭照、攝影圖、游戲原畫(huà)等等下邊再來(lái)了解一下：扁平風(fēng)格扁平風(fēng)格的裝飾圖標(biāo)，通常可以理解成是用扁平插畫(huà)的方式畫(huà)出來(lái)的圖標(biāo)，除了繼承扁平的純色填充特性以外，也相對(duì)于普通圖標(biāo)有更豐富的細(xì)節(jié)與趣味性裝飾圖標(biāo)和工具圖標(biāo)比起來(lái)，裝飾圖標(biāo)的視覺(jué)性作用更多。對(duì)于一些比較復(fù)雜的應(yīng)用來(lái)說(shuō)，過(guò)分的簡(jiǎn)約并不能彌補(bǔ)信息過(guò)多的信噪問(wèn)題，我們要通過(guò)豐富視覺(jué)體驗(yàn)的方法來(lái)增加內(nèi)容的觀賞性，減少一屏內(nèi)顯示內(nèi)容的數(shù)量。比如在分類(lèi)列表里，是可以只使用線(xiàn)框和文字把大量?jī)?nèi)容濃縮到一屏以?xún)?nèi)，但實(shí)際瀏覽效率并不會(huì)增加，而且并不美觀。裝飾圖標(biāo)在識(shí)別性上的作用就是國(guó)內(nèi)的界面設(shè)計(jì)環(huán)境，會(huì)根據(jù)運(yùn)動(dòng)需求設(shè)計(jì)進(jìn)行特殊化處理，尤其在電商領(lǐng)域，首屏的圖標(biāo)都會(huì)改成首頁(yè)風(fēng)格的樣式，增加活動(dòng)氛圍。那么設(shè)計(jì)圖標(biāo)需要到哪些軟件呢？UI主要使用的設(shè)計(jì)軟件包含、XD/XD這兩個(gè)軟件是我們?cè)O(shè)計(jì)UI界面的主力。主要的功能是用來(lái)完成UI界面元素的排版，而不是創(chuàng)作和繪圖。雖然它們都包含路徑、鋼筆、布爾、等功能（相對(duì)XD更完善一點(diǎn)點(diǎn)），想要繪制一些非常基礎(chǔ)的線(xiàn)性或面性圖標(biāo)時(shí)沒(méi)有問(wèn)題，但只要涉及到比較復(fù)雜的圖形，那是不可行的。剛?cè)腴T(mén)的小伙伴不要著急從這兩個(gè)軟件入手。先掌握PS和AI，這兩個(gè)軟件就相對(duì)簡(jiǎn)單，在UI設(shè)計(jì)里邊也比較常用，后面想要快速實(shí)現(xiàn)一些簡(jiǎn)單的圖標(biāo)時(shí)，自然懂得如何使用和XD。是一款無(wú)論什么東西都設(shè)計(jì)得出來(lái)的設(shè)計(jì)軟件，但是，它本質(zhì)上是一款“位圖軟件”我們會(huì)用PS設(shè)計(jì)一些視覺(jué)表現(xiàn)相對(duì)復(fù)雜的圖標(biāo)，例如啟動(dòng)圖標(biāo)、擬物圖標(biāo)、實(shí)物圖標(biāo)等等。（零基礎(chǔ)不知道怎么入手的可以說(shuō)下，進(jìn)期找到一套從軟件介紹到入門(mén)的視頻）和PS一樣，也是UI設(shè)計(jì)必學(xué)的一款軟件，它的功能異常豐富，主要用來(lái)設(shè)計(jì)矢量圖形。對(duì)比PS，它有更好的矢量操作支持，對(duì)于路徑細(xì)節(jié)的調(diào)整上，是比較全面的，并且AI中的圖形還可以直接復(fù)制黏貼到其它應(yīng)用的畫(huà)布中。看完還有不明白的地方或想了解的都可以私我，從事設(shè)計(jì)多年，資源有不少，現(xiàn)在準(zhǔn)備清理網(wǎng)盤(pán)了。最后說(shuō)下，除了正確設(shè)計(jì)出圖標(biāo)以外，高低階的UI設(shè)計(jì)師之間的區(qū)別也包含圖標(biāo)設(shè)計(jì)類(lèi)型掌握的。在開(kāi)始學(xué)習(xí)前，可以擴(kuò)散思維，不要局限在一個(gè)空間里，要學(xué)會(huì)慢慢的挖掘，只有這樣，才能發(fā)覺(jué)更多的樂(lè)趣，就好比探索新事物是一樣的道理哦