微軟MICROSOFT • 365圖標(biāo)

Wes Cockx與 Nando Costa 和 Microsoft 設(shè)計(jì)團(tuán)隊(duì)合作，定義了一種獨(dú)特的方式來(lái)渲染一些經(jīng)典的 Microsoft 365 圖標(biāo)，同時(shí)在其他環(huán)境中與 Microsoft 應(yīng)用程序的品牌保持一致。在這項(xiàng)任務(wù)中，我們將它們重建為三維模型，利用照明和
材料組合將圖標(biāo)提升到新的高度。

圖標(biāo)是UI設(shè)計(jì)中除了文字之外最不可或缺的視覺(jué)元素，在設(shè)計(jì)中看似只占一個(gè)很小的區(qū)域，但是它卻是考驗(yàn)設(shè)計(jì)師基本功的重要標(biāo)準(zhǔn)，了解圖標(biāo)相關(guān)的概念，以及正確繪制的方法，是入門(mén) UI設(shè)計(jì)的必備條件。

本文盡量將圖標(biāo)進(jìn)行系統(tǒng)一些的介紹說(shuō)明，當(dāng)然僅一篇文章是不可能面面俱到包含所有知識(shí)點(diǎn)。內(nèi)容比較基礎(chǔ)，主要以 設(shè)計(jì)概念 和 設(shè)計(jì)思路 為主，對(duì)圖標(biāo)相關(guān)的內(nèi)容進(jìn)行組織梳理和分類(lèi)，便于小伙伴們建立圖標(biāo)的概念體系。過(guò)程中也有針對(duì)幾種典型的圖標(biāo)結(jié)構(gòu)進(jìn)行實(shí)操代練，想要把圖標(biāo)設(shè)計(jì)的更好，這就需要我們?cè)谄綍r(shí)勤加練習(xí)外，還要進(jìn)行深度的思考，希望我的這篇梳理可以給大家?guī)?lái)幫助。

1.1 圖標(biāo)的定義

圖標(biāo)，也稱(chēng)為icon或Picoto，是計(jì)算機(jī)世界對(duì)現(xiàn)實(shí)世界的隱喻和概括，代表軟件產(chǎn)品中的功能及操作。它的本質(zhì)是一種符號(hào)，它采用對(duì)這個(gè)世界的隱喻，來(lái)指代功能，含義，用途等。

圖標(biāo)做為國(guó)際通用性語(yǔ)言，生活中隨處可見(jiàn)，例如商場(chǎng)導(dǎo)視中收銀臺(tái)圖標(biāo)、出口圖標(biāo)、衛(wèi)生間圖標(biāo)等，日常手機(jī)里使用的那些App圖標(biāo)，如微信、電話(huà)、短信等。的確，圖標(biāo)的形式有很多種，它可以應(yīng)用在很多場(chǎng)景中，并且表現(xiàn)方式非常豐富，有線(xiàn)的、有面的、還有擬物的等。  

如果粗淺劃分的話(huà)，UI設(shè)計(jì)中常見(jiàn)的圖標(biāo)大致分為2大類(lèi)，第一類(lèi)我們稱(chēng)之為「標(biāo)志性圖標(biāo)」，比如手機(jī)中應(yīng)用啟動(dòng)圖標(biāo)；第二類(lèi)我們稱(chēng)之為「功能性圖標(biāo)」，這類(lèi)圖標(biāo)經(jīng)常出現(xiàn)于 App 或網(wǎng)站中，用于功能性指示引導(dǎo)或操作。

1.2 圖標(biāo)的重要性

對(duì)于UI設(shè)計(jì)而言，圖標(biāo)可以說(shuō)是整個(gè)產(chǎn)品的點(diǎn)睛之筆，它甚至可以直接影響著一款產(chǎn)品的形象和氣質(zhì)。在不少 UI 界面中，圖標(biāo)幾乎是這個(gè)頁(yè)面的核心支撐體，它直接影響著產(chǎn)品的視覺(jué)體驗(yàn)和產(chǎn)品調(diào)性。它有以下幾點(diǎn)好處：

全球通用：Windows,iOS, etc., 中文版和英文版甚至各種語(yǔ)言版本，在不打開(kāi)菜單之前，基本上都長(zhǎng)一樣；

節(jié)約空間：如果在一個(gè)圖標(biāo)能夠表述清楚含義的時(shí)候，比如用一個(gè)叉就可以不用寫(xiě)「關(guān)閉」；

快速定位：圖標(biāo)可以用它獨(dú)特的形狀或者顏色讓人快速定位到一個(gè)功能；

上下文的定位：比如小飛機(jī)的圖標(biāo)單獨(dú)放出來(lái)不確定是什么，但是在和收件箱在一起它就可以認(rèn)為是發(fā)件箱了。

1.3 發(fā)展歷程

如你所知，圖標(biāo)、標(biāo)識(shí)都不是界面設(shè)計(jì)師所創(chuàng)造的概念，它的存在可以追溯到人類(lèi)文明誕生之初，在漫長(zhǎng)的歷史長(zhǎng)河當(dāng)中，早期用來(lái)傳達(dá)信息的圖標(biāo)演變?yōu)橄到y(tǒng)的文字，而在地圖、圖書(shū)、壁畫(huà)和建筑等各種各樣的地方，還存在著用來(lái)代表和傳達(dá)特定概念的圖標(biāo)和標(biāo)識(shí)。

隨著技術(shù)的發(fā)展，計(jì)算機(jī)誕生了，而顯示器的出現(xiàn)，也為圖形化界面的誕生，鋪平了道路。20世紀(jì)70年代，施樂(lè)在位于帕羅奧托的研究所當(dāng)中，誕生了最早的擁有圖形化界面的電腦，著名的「 Xerox Alto」。這款昂貴的概念機(jī)最終并沒(méi)有走進(jìn)大眾的視野，但是它的后續(xù)機(jī)型施樂(lè)之星在1981年問(wèn)世，并且成為了計(jì)算機(jī)史上的重要里程碑，而Xerox Alto 對(duì)于喬布斯和比爾蓋茨的啟發(fā)，更是引發(fā)了計(jì)算機(jī)歷史上最著名的一場(chǎng)戰(zhàn)爭(zhēng)：蘋(píng)果VS微軟，Windows 對(duì)抗 Macintosh。當(dāng)然這都是后話(huà)。

來(lái)自蘋(píng)果的Macintosh系統(tǒng)在圖形化界面發(fā)展史上是無(wú)法繞過(guò)的里程碑。1991年，蘋(píng)果借由Macintosh，首次發(fā)布了彩色的圖標(biāo)設(shè)計(jì)。圖標(biāo)所能容納的信息量比起上一個(gè)黑白界面的時(shí)代更大，全新的樣式使得它在信息傳達(dá)的功能性上有了明顯的提升。

從iMac到iPhone引領(lǐng)的擬物圖標(biāo)更是開(kāi)啟了一個(gè)絢麗的圖標(biāo)設(shè)計(jì)時(shí)代。擬物時(shí)代盛行也帶來(lái)了一些麻煩——擬物圖標(biāo)的質(zhì)感、光影會(huì)分散用戶(hù)的注意力，形成「視覺(jué)噪聲」。于是UI設(shè)計(jì)師開(kāi)始探索更新的表現(xiàn)形式來(lái)設(shè)計(jì)界面中的圖標(biāo)。如微軟引領(lǐng)的Metro風(fēng)格圖標(biāo)設(shè)計(jì)和Google引領(lǐng)的長(zhǎng)投影風(fēng)格的圖標(biāo)設(shè)計(jì)，但由于它們的表現(xiàn)形式太過(guò)于抽象，缺乏情感的傳遞，并沒(méi)有獲得用戶(hù)的青睞。 

在此之后，越來(lái)越多的圖標(biāo)開(kāi)始借由靈活而強(qiáng)大的數(shù)字技術(shù)而誕生，并且基于不同的需求而演化出不同的分支和風(fēng)格。許多操作系統(tǒng)和工具開(kāi)始預(yù)制一些成體系的圖標(biāo)，誕生基于種種需求，越來(lái)越多的自制的、重設(shè)計(jì)的圖標(biāo)，逐步進(jìn)入了我們的視野。圖標(biāo)類(lèi)型很多，我們可以用不同的方式來(lái)劃分它們。

圖標(biāo)的類(lèi)型

2.1 擬物圖標(biāo)

由于人們都是通過(guò)以往的認(rèn)知來(lái)理解新事物，所以基于這一點(diǎn)，早期應(yīng)用界面必然要采用擬物風(fēng)格，以便于人們的理解和操作。是一個(gè)由實(shí)物 → 符號(hào)的發(fā)展歷程。

例如「保存」圖標(biāo)就是將「軟盤(pán)」符號(hào)化之后形成的圖形，「軟盤(pán)」是「保存」圖標(biāo)的實(shí)體。但隨著時(shí)間的推移，人們逐漸將長(zhǎng)期接觸的符號(hào)本身作為一種新的實(shí)體，在大家的眼里，它不再是一個(gè)具象事物的抽象符號(hào)，而是直接當(dāng)成一個(gè)實(shí)體來(lái)使用，甚至這個(gè)符號(hào)的實(shí)體已經(jīng)淡出歷史，但人們還在習(xí)慣性使用這個(gè)符號(hào)。

更具體點(diǎn)來(lái)說(shuō)，擬物設(shè)計(jì)就是追求模擬現(xiàn)實(shí)物品的造型和質(zhì)感，通過(guò)疊加高光、紋理、材質(zhì)、陰影等各種效果對(duì)實(shí)物進(jìn)行再現(xiàn)（也可適當(dāng)程度變形和夸張）；扁平化設(shè)計(jì)就是摒棄以上對(duì)效果（尤其是高光、陰影等能造成透視感的效果）的追求，轉(zhuǎn)而通過(guò)抽象、簡(jiǎn)化、符號(hào)化的設(shè)計(jì)元素來(lái)表現(xiàn)。你還記得曾經(jīng)熬夜畫(huà)寫(xiě)實(shí)圖標(biāo)的日子嘛～上千個(gè)圖層不在話(huà)下有木有！

但是隨著 ICON 的發(fā)展，擬物圖標(biāo)也帶來(lái)了一些問(wèn)題，因?yàn)橛脩?hù)關(guān)注的核心永遠(yuǎn)都是信息本身，華麗的視覺(jué)元素或許在用戶(hù)使用的初期，起到賞心悅目的裝飾，但久而久之，這都將成為對(duì)用戶(hù)獲取信息的一種干擾。再者，大家都熟悉的事物其實(shí)非常有限，而 APP 的創(chuàng)新卻在不斷進(jìn)行，很多創(chuàng)新的產(chǎn)品本身在現(xiàn)實(shí)世界就沒(méi)有參照物，所以也決定了擬物圖標(biāo)必然會(huì)被取代。

2.2 扁平圖標(biāo)

區(qū)別于擬物化更加接近于真實(shí)的實(shí)物，扁平化則是簡(jiǎn)化真實(shí)的物體，進(jìn)行平面化的表現(xiàn)。

2013年，蘋(píng)果推出了iOS7 開(kāi)啟了擬物向扁平轉(zhuǎn)變的風(fēng)潮。扁平化的概念最核心的地方就是：去掉冗余的裝飾效果，意思是去掉多余的透視，紋理，漸變等等能做出3D效果的元素讓“信息”本身重新作為核心被凸顯出來(lái)。并且在設(shè)計(jì)元素上強(qiáng)調(diào)抽象、極簡(jiǎn)、符號(hào)化的概念。

扁平圖標(biāo)風(fēng)格發(fā)展的后期，由于它們表現(xiàn)形式太過(guò)于抽象、缺乏情感的傳遞，也沒(méi)有獲得大眾的青睞，這也表明 UI 新的趨勢(shì)再一部向“突出內(nèi)容”的本質(zhì)靠攏，即“認(rèn)知簡(jiǎn)約”。也許當(dāng)滿(mǎn)世界都是扁平化后，擬物化的設(shè)計(jì)卻又變得更顯眼了呢？最近流行的新擬物風(fēng)格就是最好的證明。

2.3 微扁平、輕擬物

從扁平風(fēng)格發(fā)展至現(xiàn)在，圖標(biāo)慢慢開(kāi)始發(fā)展到微扁平輕擬物的方向，相較于擬物風(fēng)格不會(huì)有太多復(fù)雜的視覺(jué)元素，與扁平風(fēng)格又有了更豐富的情感內(nèi)容，所以現(xiàn)在界面中，在面積比較小的區(qū)域我們使用扁平圖標(biāo)或線(xiàn)形圖標(biāo)；在面積比較大的區(qū)域我們會(huì)使用加入漸變甚至輕質(zhì)感的圖標(biāo)。

2.4 線(xiàn)性圖標(biāo)

線(xiàn)性圖標(biāo)是由直線(xiàn)、曲線(xiàn)、點(diǎn)在內(nèi)等元素組合而成的圖標(biāo)樣式，通過(guò)線(xiàn)來(lái)塑造輪廓。線(xiàn)性圖標(biāo)具有辨識(shí)度高，清晰，簡(jiǎn)約易識(shí)別等優(yōu)點(diǎn)，線(xiàn)性圖標(biāo)不會(huì)對(duì)頁(yè)面造成太多的視覺(jué)干擾。缺點(diǎn)是：線(xiàn)性圖標(biāo)的創(chuàng)作空間較少，太復(fù)雜的線(xiàn)性圖標(biāo)對(duì)識(shí)別性產(chǎn)生較大的困擾。

在圖標(biāo)設(shè)計(jì)中使用的線(xiàn)有粗細(xì)之分，常用的App圖標(biāo)設(shè)計(jì)線(xiàn)的粗細(xì)一般有2PX或者3PX，不同的線(xiàn)條粗細(xì) ICON 所帶來(lái)的視覺(jué)感受也不同，細(xì)線(xiàn)顯得精致，粗線(xiàn)視覺(jué)面積大，顯得厚重。直角線(xiàn)條的icon顯得專(zhuān)業(yè)嚴(yán)謹(jǐn)，圓角粗線(xiàn)條的 ICON 顯得飽滿(mǎn)而可愛(ài)。

2.5 面性圖標(biāo) 

面性圖標(biāo)是通過(guò)面來(lái)塑造形體的圖標(biāo)，采用了剪影的設(shè)計(jì)形式，通過(guò)線(xiàn)或者面去切割基礎(chǔ)輪廓面，通過(guò)分型來(lái)塑造圖標(biāo)的體積感。不同的切割手法造成了面性圖標(biāo)設(shè)計(jì)感的差別。

面形圖標(biāo)具有表意能力強(qiáng)，細(xì)節(jié)豐富，情緒感強(qiáng)，視覺(jué)突出，創(chuàng)作空間大等優(yōu)點(diǎn)。面性圖標(biāo)可以讓用戶(hù)迅速定位圖標(biāo)位置，預(yù)知點(diǎn)擊后的狀態(tài)。但是面性圖標(biāo)在頁(yè)面中不可過(guò)多出現(xiàn)，否則會(huì)造成頁(yè)面臃腫，難分主次，用戶(hù)視覺(jué)疲勞。

2.5 文字圖標(biāo)

文字圖標(biāo)是指用文字直接表示特定含義的圖標(biāo)符號(hào)。由于文字本身就是一種演化而來(lái)的符號(hào)，英文的首字母或者詞語(yǔ)關(guān)鍵字本身也具備很強(qiáng)的信息濃縮性，因此在某些場(chǎng)景下，采用文字或字符作為圖標(biāo)，是一種很不錯(cuò)的表現(xiàn)手法。

比如「提示」圖標(biāo)，使用一個(gè)圓圈包裹一個(gè)英文字母「i」，表示 information，表示「注釋信息」的含義；比如停車(chē)場(chǎng)直接使用「Parking」中的首字母 「P」，這些都是比較約定俗稱(chēng)的使用方式。還有一些場(chǎng)景，很難用象形或者表意的方式進(jìn)行表達(dá)，那么就很適合使用文字符號(hào)，例如京東/天貓某些商品具備「正品保證」的標(biāo)識(shí)，這個(gè)概念太抽象了，很難用象形去概括，創(chuàng)造新的表意符號(hào)又很難被大眾接受，這時(shí)「正」字就很適合作為這個(gè)場(chǎng)景特定的圖標(biāo)符號(hào)，作為針對(duì)中國(guó)用戶(hù)群體的產(chǎn)品圖標(biāo)，簡(jiǎn)單粗暴且有效。

如果可能的話(huà)，盡量避免在圖標(biāo)中使用文字。因?yàn)閳D標(biāo)應(yīng)該是全球性的。如果你確實(shí)需要文字圖標(biāo)(例如貨幣符號(hào)等等)，那么請(qǐng)你自己繪制，而不是直接使用字體。

2.6 " 新擬物 "風(fēng)格圖標(biāo)

蘋(píng)果在 WWDC20 搞了個(gè)大新聞：macOS 將與 iOS 統(tǒng)一步調(diào)，從X86 平臺(tái)遷移至ARM 平臺(tái)，并從macOS 10迭代為macOS 11。這 20 年一遇的 Mac 大版本更新被稱(chēng)為Big Sur。

macOS Big Sur是第一個(gè)將 " 新擬物 " 設(shè)計(jì)投入大規(guī)模商用的操作系統(tǒng)，這可視為 " 新擬物 "在實(shí)用化道路上的首次勝利。值得一提的是，在 Big Sur 的 " 外觀 " 設(shè)置里，多了一項(xiàng)名為" 自適應(yīng)強(qiáng)調(diào)色 "的選項(xiàng)。蘋(píng)果將主題色的指定權(quán)留給開(kāi)發(fā)者，這是否暗示新一代 App 在光影上會(huì)有更豐富的效果？

" 新擬物 " 設(shè)計(jì)的精髓在于對(duì)光線(xiàn)的絕妙運(yùn)用。它把光效拿捏在 " 扁平 " 與 " 擬物 " 之間，進(jìn)而打造一種全新的視覺(jué)體驗(yàn)。

不同于傳統(tǒng)的擬物，" 新擬物 "雖然將符合物理規(guī)律的光影效果引入界面，但它所模擬的材質(zhì)是自然界不存在的。換句話(huà)說(shuō)，" 新擬物 " 是將真實(shí)光線(xiàn)用于虛擬對(duì)象，而 " 擬物 " 是還原實(shí)際物品在特定光照下的效果；

由于整個(gè)設(shè)計(jì)界將不得不考慮新擬物風(fēng)格，圍繞該風(fēng)格的可能性將會(huì)有爆炸性的發(fā)展，并且這種新的數(shù)字空間設(shè)計(jì)理念如何能夠合理地適用于用戶(hù)界面設(shè)計(jì)和功能性將取得更大的突破。與以往一樣，第三方應(yīng)用將比蘋(píng)果更大膽、更快速地推動(dòng)這一風(fēng)格——這也是我們將會(huì)真正開(kāi)始解鎖新擬物優(yōu)勢(shì)的時(shí)候。

產(chǎn)品應(yīng)用圖標(biāo)有不同的風(fēng)格，這些風(fēng)格有可能偏擬物，也有可能很扁平，有可能很抽象，也可能很具象。通過(guò)不同的設(shè)計(jì)風(fēng)格可以更加標(biāo)新立異，從而被用戶(hù)記住。因此能在第一時(shí)間贏得用戶(hù)的好感和記憶非常重要，將產(chǎn)品圖標(biāo)設(shè)計(jì)的好看且容易被人記住就成了非常重要的任務(wù)。應(yīng)用圖標(biāo)的風(fēng)格主要有以下幾種。

3.1 中文文字圖標(biāo)

中文是我們的母語(yǔ)，每一個(gè)漢字都令人記憶深刻，文字也是最直白的信息，而且不容易被曲解，所以很多國(guó)內(nèi)的產(chǎn)品都會(huì)使用文字作為自己的產(chǎn)品圖標(biāo)。中文設(shè)計(jì)模式即字體設(shè)計(jì)，提取應(yīng)用名稱(chēng)中的一個(gè)或多個(gè)漢字，進(jìn)行設(shè)計(jì)變形，變形后的字體圖形具有產(chǎn)品屬性的外貌特征。常見(jiàn)中文圖標(biāo)又分為單字、多字和字加圖形的幾種類(lèi)型。

3.1.1 單字  

提取產(chǎn)品名稱(chēng)中最具代表性的文字，通過(guò)對(duì)筆畫(huà)及整體骨架進(jìn)行字體設(shè)計(jì)，以達(dá)到符合產(chǎn)品特性和視覺(jué)差異化的目的。其優(yōu)點(diǎn)是可以直截了當(dāng)?shù)膫鬟f產(chǎn)品信息，識(shí)別性強(qiáng)。

3.1.2 多字  

多字圖標(biāo)設(shè)計(jì)要注意的是整體的協(xié)調(diào)性和可讀性，一般為2-3個(gè)字，最多兩行（四個(gè)字）排列。

其優(yōu)點(diǎn)是更加直接的告訴用戶(hù)產(chǎn)品名稱(chēng)，達(dá)到品牌推廣的目的，減輕用戶(hù)記憶成本。其缺點(diǎn)是如果圖標(biāo)上的文字和下面的輔助文字完全一樣，會(huì)顯得重復(fù)啰嗦，像介紹了兩遍自己一樣。

3.1.3 字加圖形組合

文字加輔助圖形的組合，也是常見(jiàn)的產(chǎn)品圖標(biāo)設(shè)計(jì)方法，相比純文字圖標(biāo)，顯得更加豐富有獨(dú)特的產(chǎn)品的氣質(zhì)和屬性。需要注意的是做好文字和輔助圖形間的平衡。

3.2 英文字母圖標(biāo)

英文設(shè)計(jì)與中文設(shè)計(jì)的設(shè)計(jì)模式相似，通常是提取應(yīng)用名稱(chēng)的首字母融合產(chǎn)品的功能賣(mài)點(diǎn)或行業(yè)屬性進(jìn)行創(chuàng)意加工，新的字母圖形依舊保持本身的識(shí)別性。

3.2.1 單字母 

通常提取英文首字母進(jìn)行設(shè)計(jì)，由于英文字母本身結(jié)構(gòu)簡(jiǎn)潔，稍加改動(dòng)就很容易達(dá)到設(shè)計(jì)感于識(shí)別性兼?zhèn)涞漠a(chǎn)品圖標(biāo)。需要注意的是英文字母本來(lái)就少，都用字母很容易創(chuàng)意雷同，難以形成差異化。

3.2.2 多字母  

提取產(chǎn)品全稱(chēng)或幾個(gè)單詞的首字母組合而成，形成獨(dú)有的產(chǎn)品簡(jiǎn)稱(chēng)，方便用戶(hù)記憶。

3.2.3 字母加圖形組合  

字母加圖形組合的設(shè)計(jì)形式比較廣泛，圖形分為幾何圖形和通過(guò)提煉的圖形。通過(guò)字母與圖形進(jìn)行創(chuàng)意加工，可以使應(yīng)用圖標(biāo)視覺(jué)表現(xiàn)更加飽滿(mǎn)。

3.3 數(shù)字圖標(biāo)

直接用數(shù)字做應(yīng)用圖標(biāo)的相對(duì)較少，但是數(shù)字識(shí)別性強(qiáng)，易于傳播的特點(diǎn)。利用數(shù)字進(jìn)行設(shè)計(jì)能給人親和力。難點(diǎn)是怎樣與品牌形成強(qiáng)關(guān)聯(lián)性。

3.4 特殊符號(hào)圖標(biāo)

由于符號(hào)本身的含義會(huì)對(duì)產(chǎn)品屬性有一定限制，所以特殊符號(hào)在應(yīng)用圖標(biāo)的設(shè)計(jì)案例中相對(duì)較少。如“$”符號(hào)可代表與金錢(qián)有關(guān)聯(lián)性的產(chǎn)品，無(wú)法運(yùn)用在與此屬性無(wú)關(guān)的產(chǎn)品上。不過(guò)也正是由于自身屬性強(qiáng)的特點(diǎn)，可以很好的詮釋關(guān)聯(lián)的產(chǎn)品屬性。

除了中英文圖標(biāo)，還有圖形類(lèi)圖標(biāo)比較常見(jiàn)。這種類(lèi)型的設(shè)計(jì)模式的優(yōu)點(diǎn)就是直觀醒目和簡(jiǎn)潔大方，視覺(jué)沖擊力強(qiáng)。常見(jiàn)的有以下幾種：

3.5 幾何圖形

幾何圖形的設(shè)計(jì)模式給人簡(jiǎn)約、現(xiàn)代、個(gè)性等視覺(jué)感受，從單個(gè)具象圖形到復(fù)雜的空間感營(yíng)造，幾何圖形的表現(xiàn)形式非常豐富。不同的形狀給人的情感表達(dá)不同，如三角形給人傳達(dá)個(gè)性、穩(wěn)定、現(xiàn)代、時(shí)尚等，添加圓角后又會(huì)更加親民、可愛(ài)。我們可以結(jié)合產(chǎn)品特征，合理的選擇適合的形狀圖形進(jìn)行創(chuàng)意。此類(lèi)型較考驗(yàn)設(shè)計(jì)師的圖形創(chuàng)意能力。

3.6 單雙形/剪影

單雙形是指應(yīng)用圖標(biāo)只展示單個(gè)或兩個(gè)的剪影圖形。通常有兩種設(shè)計(jì)方式，在深色背板上使圖形反白，背景可以是單色也可以是漸變色；在淺色的背板上讓圖形填充顏色，圖形可以是單色也可以是漸變色。這種設(shè)計(jì)模式的優(yōu)點(diǎn)是簡(jiǎn)潔明確，易于用戶(hù)在眾多的應(yīng)用圖標(biāo)陣列中快速找到目標(biāo)。

3.7 線(xiàn)形

線(xiàn)形的設(shè)計(jì)模式分為兩種設(shè)計(jì)方式，在深色的背板上讓圖標(biāo)反白，背景可以是單色也可以是漸變色；在淺色的背板上讓圖標(biāo)填充顏色，圖標(biāo)可以是單色也可以是漸變色，或是其他視覺(jué)效果。纖細(xì)的線(xiàn)框圖形傳遞出簡(jiǎn)潔輕快的氣質(zhì)，適合于文藝、清新的應(yīng)用，在界面設(shè)計(jì)時(shí)保持這種干凈明快的風(fēng)格，才能與應(yīng)用圖標(biāo)設(shè)計(jì)表里如一。線(xiàn)性風(fēng)格一定注意不可太細(xì)，如果做得太細(xì)，在手機(jī)上看會(huì)非常尖銳，顯得不易點(diǎn)擊。例如airbnb，它的背景是一個(gè)微漸變，線(xiàn)性風(fēng)格曲線(xiàn)組成“A”，同時(shí)是一個(gè)小蜜蜂。

3.8 動(dòng)物圖形/剪影

動(dòng)物作為圖標(biāo)設(shè)計(jì)元素是比較常見(jiàn)的方式之一，通過(guò)提取動(dòng)物整體形象或者局部特征部位作為設(shè)計(jì)元素，背景填充單色或漸變色，簡(jiǎn)潔明了。動(dòng)物給人的印象比較可愛(ài)，有助于加深用戶(hù)對(duì)產(chǎn)品的印象。常見(jiàn)的表現(xiàn)形式有剪影、線(xiàn)性描邊風(fēng)格、面性風(fēng)格等。

3.9 卡通形象

卡通風(fēng)格的產(chǎn)品圖標(biāo)會(huì)讓用戶(hù)更有好感，一個(gè)可愛(ài)的卡通形象有助于加深用戶(hù)對(duì)產(chǎn)品的印象。很多決策者會(huì)認(rèn)為卡通是一種低齡的審美，這種想法其實(shí)是錯(cuò)誤的?？ㄍ梢哉f(shuō)是一種各年齡層都能接受的風(fēng)格，如騰訊就是以一個(gè)企鵝作為品牌形象開(kāi)始拓展自己的版圖。

3.10 正負(fù)形

以正形為底突出負(fù)形特征，以負(fù)形表達(dá)產(chǎn)品屬性，傳遞產(chǎn)品信息。例如NPR One，圖標(biāo)中的負(fù)形圖形是對(duì)話(huà)氣泡，告訴我們這是一個(gè)媒體或社交的應(yīng)用，而正形圖形強(qiáng)調(diào)產(chǎn)品氣質(zhì)。

3.11 白色漸變

白色漸變的設(shè)計(jì)模式與透明白色相似，都是通過(guò)白色不透明度來(lái)構(gòu)建出圖形的立體控件感，它比單純的剪影圖形更加具有質(zhì)感，這種質(zhì)感帶給了我們視覺(jué)上的享受。例如印象筆記·圈點(diǎn)，它是一只白色的鵝毛形象，垂直的線(xiàn)型漸變使鵝毛富有了生命力一般，顯得更加輕柔。

3.12 彩色漸變

色彩比任何圖形都更能抓住用戶(hù)的注意力，同時(shí)色彩更加具有情緒，能傳遞出應(yīng)用的產(chǎn)品氣質(zhì)。比起白色漸變圖形，彩色漸變圖形的色彩表現(xiàn)更加豐富。多種顏色進(jìn)行漸變銜接的時(shí)候要注意色相的對(duì)比，營(yíng)造空間感。應(yīng)用圖標(biāo)的背景和圖形的色彩要拉開(kāi)對(duì)比，一般為白色或淺色背景。

3.13 無(wú)

無(wú)，即沒(méi)有設(shè)計(jì)。除了背板什么也沒(méi)有。雖然這類(lèi)設(shè)計(jì)模式比較獨(dú)特，但我們并不鼓勵(lì)，因?yàn)橛脩?hù)很難從一個(gè)顏色上得到有用的信息。例如“黃油相機(jī)”的圖標(biāo)設(shè)計(jì)成一塊黃油的樣子已深入人心了。

應(yīng)用圖標(biāo)尺寸規(guī)格

4.1 iOS應(yīng)用圖標(biāo)

iOS6及之前的版本，應(yīng)用圖標(biāo)的圓角半徑都可以通過(guò)1/4圓繪制出來(lái)，即繪制標(biāo)準(zhǔn)的圓角矩形即可，主屏幕應(yīng)用圖標(biāo)為114*114px，使用20px圓角半徑，App store應(yīng)用圖標(biāo)為512*512px，使用90px圓角半徑等。從iOS7開(kāi)始，主屏幕應(yīng)用圖標(biāo)調(diào)整為120*120px，并且不再是標(biāo)準(zhǔn)的圓角矩形，而是某種連續(xù)曲線(xiàn)，接近于26-27px圓角半徑。

我們把兩個(gè)圓角曲線(xiàn)放大重疊后進(jìn)行對(duì)比，其中灰色線(xiàn)框?yàn)闃?biāo)準(zhǔn)圓角矩形繪制的圓角，紅色為iOS平滑圓角，它與圓角矩形擁有相同的對(duì)角線(xiàn)錨點(diǎn)，區(qū)別在于其曲線(xiàn)稍微向中心收緊。

事實(shí)上，我們很難在Retina屏幕上區(qū)分這么席位的差別，因此設(shè)計(jì)師在繪制iOS應(yīng)用圖標(biāo)時(shí)不必過(guò)分糾結(jié)它的圓角，直接繪制成直角矩形交給開(kāi)發(fā)同學(xué)即可，如果應(yīng)用圖標(biāo)需用于展示，可以繪制120*120px圓角矩形、27px圓角半徑代替。

4.2 安卓應(yīng)用圖標(biāo)

安卓應(yīng)用圖標(biāo)同樣需要很多尺寸，主流需求是1024px、512px、144px、96px、72px、48px六種。設(shè)計(jì)師提供給程序員的同樣是直角矩形，然后程序員通過(guò)代碼進(jìn)行切割使其變成圓角圖標(biāo)。

4.3 iOS應(yīng)用圖標(biāo)設(shè)計(jì)流程

在我之前的設(shè)計(jì)作品中，有個(gè)“影記”的攝影社區(qū)APP，本篇我們就以此為產(chǎn)品案例拋磚引玉來(lái)學(xué)習(xí)一個(gè)iOS應(yīng)用圖標(biāo)的繪制過(guò)程。

4.3.1 尋找隱喻

隱喻是在彼類(lèi)事物的暗示之下感知、體驗(yàn)、想象、理解、談?wù)摯祟?lèi)事物的心理行為、語(yǔ)言行為和文化行為，即人們看到某樣?xùn)|西或聽(tīng)到某件事情能夠馬上在大腦中形成聯(lián)想。例如說(shuō)到攝影，馬上就能想到相機(jī)、快門(mén)、閃光燈、暗房等。然后通過(guò)這些聯(lián)想詞，去找一些氣質(zhì)相符的圖片制作情緒版，通過(guò)情緒版可以感受到產(chǎn)品的調(diào)性，然后從中提取一些形狀和色彩作為產(chǎn)品圖標(biāo)的主要造型。

4.3.2 競(jìng)品分析

應(yīng)用市場(chǎng)各類(lèi)產(chǎn)品不勝其數(shù)，在同類(lèi)應(yīng)用中存在大量相似的應(yīng)用圖標(biāo)設(shè)計(jì)，如何保持應(yīng)用圖標(biāo)的唯一識(shí)別性非常重要。唯一識(shí)別性不單單指圖形與其他應(yīng)用有所差異，避免創(chuàng)意撞車(chē)，讓用戶(hù)在腦中形成思維模式，它還指圖形表意是否清晰，是否符合用戶(hù)的心里預(yù)期。

4.3.3 提取關(guān)鍵詞

根據(jù)收集的圖片，創(chuàng)建情緒版，結(jié)合自己的產(chǎn)品提取關(guān)鍵詞，然后就知道在接下來(lái)的設(shè)計(jì)中應(yīng)該突出什么。我們從“影記”中可提取首字母“Y”，相機(jī)中的“快門(mén)”“信號(hào)燈”“開(kāi)關(guān)機(jī)”，并依次將關(guān)鍵詞描繪成下列圖形。

4.3.4 抽象圖形

確立了首字母“Y”、“快門(mén)/開(kāi)關(guān)機(jī)”和“信號(hào)燈”作為應(yīng)用圖標(biāo)的主圖形，接下來(lái)將繪制好的3個(gè)圖形相結(jié)合，即完成初步設(shè)想。

4.3.5 圖標(biāo)柵格線(xiàn)

使用iOS應(yīng)用圖標(biāo)柵格線(xiàn)作為設(shè)計(jì)一句有助于建立和諧的圖標(biāo)繪制比例，并與iOS系統(tǒng)保持統(tǒng)一，下圖為iOS系統(tǒng)天氣應(yīng)用使用了圖標(biāo)柵格線(xiàn)。將圖形放置在圖標(biāo)柵格上調(diào)整大小并注意圖形與其比例協(xié)調(diào)。

4.3.6 豐富細(xì)節(jié)

通過(guò)上面圖形組合已基本完成應(yīng)用圖標(biāo)的設(shè)計(jì)，接下來(lái)我們還應(yīng)從顏色、質(zhì)感、背板等著手豐富圖形的細(xì)節(jié)，建立起應(yīng)用的產(chǎn)品氣質(zhì)。“影記”作為攝影師分享佳作平臺(tái)，攝影師們用的器材顏色大多以黑色為主，因此酷酷的黑色更適合作為應(yīng)用的主色。然后，白色的信號(hào)燈過(guò)于普通，使用相機(jī)本身發(fā)出的橘紅色燈光作為信號(hào)燈的顏色，使其更加具有動(dòng)感和活力。整體像「消息氣泡」的造型暗示可以在這里進(jìn)行攝影交流。

4.3.7 多場(chǎng)景測(cè)試

將120*120px應(yīng)用圖標(biāo)設(shè)計(jì)稿放大至1024*1024px，交付開(kāi)發(fā)提交至App Store上架，正確的圖標(biāo)設(shè)計(jì)稿應(yīng)是直角矩形，iOS會(huì)自動(dòng)應(yīng)用一個(gè)圓角遮罩將圖標(biāo)的4個(gè)角遮住，假如圖標(biāo)設(shè)計(jì)稿自帶圓角，就有可能露出圖標(biāo)透明區(qū)域。

△ 注：上圖非實(shí)際大小，僅表明不同分辨率下的比例關(guān)系

此外，應(yīng)用圖標(biāo)還會(huì)以不同的分辨率出現(xiàn)在不同場(chǎng)景中，例如在iPhone 8plus上需@3x的圖，即將120px的圖標(biāo)放大至1.5倍；而在iPhone7的設(shè)置頁(yè)需要58px的圖，就需要將120px的圖縮小。將大圖縮小成小圖時(shí)，一些細(xì)節(jié)就會(huì)丟失，使畫(huà)面變得模糊，因此設(shè)計(jì)師應(yīng)對(duì)小尺寸圖標(biāo)進(jìn)行席位調(diào)整，去除不必要的裝飾元素，以確保應(yīng)用圖標(biāo)在小分辨率應(yīng)用場(chǎng)景下也能保持清晰的識(shí)別度。

APP中的功能圖標(biāo)

除了產(chǎn)品圖標(biāo)，還有一種圖標(biāo)被稱(chēng)為功能（或系統(tǒng)）圖標(biāo)，功能圖標(biāo)指的是擔(dān)負(fù)一定功能和含義的圖形，一般來(lái)說(shuō)需要像文字一般地被人迅速理解，所以表達(dá)方式上不適合特別復(fù)雜，如微信底部四個(gè)系統(tǒng)圖標(biāo)就使用了比較簡(jiǎn)潔的線(xiàn)性風(fēng)格。

功能圖標(biāo)在UI設(shè)計(jì)中占據(jù)非常重要的作用，幾乎存在于每一個(gè)應(yīng)用界面中，無(wú)論是在導(dǎo)航欄、工具欄或標(biāo)簽欄，還是在首頁(yè)、詳情頁(yè)或個(gè)人中心頁(yè)，都隨處可見(jiàn)功能圖標(biāo)的身影。功能圖標(biāo)具有明確的表意功能，其作用在于替代文字或輔助文字來(lái)指引用戶(hù)進(jìn)行快速導(dǎo)航，它具有圖形化的符號(hào)，比文字更加直觀，符合普羅大眾的認(rèn)知習(xí)慣，有助于用戶(hù)形成記憶思維，提高應(yīng)用的易用性。同時(shí)設(shè)計(jì)精致、風(fēng)格統(tǒng)一的功能圖標(biāo)提升了產(chǎn)品視覺(jué)效果，不但給用戶(hù)帶來(lái)視覺(jué)上的愉悅感，還帶來(lái)了良好一致的使用體驗(yàn)。

在 @1x 一倍圖設(shè)計(jì)模式下，以 24px 為網(wǎng)格基準(zhǔn)的話(huà)，常使用的圖標(biāo)粗細(xì)有：1px 、1.5px、2px、3px，1.5的粗細(xì)常用于高倍屏，如近幾年旗艦機(jī)的手機(jī)屏幕或者 retina電腦屏，否則像素渲染會(huì)比較模糊。

5.1 圖標(biāo)柵格

圖標(biāo)柵格被用來(lái)促進(jìn)圖標(biāo)的一致性，以及為圖形元素的定位建立一組清晰的規(guī)范。這種標(biāo)準(zhǔn)化的規(guī)范造就了一個(gè)靈活但有條理的系統(tǒng)，令所有的設(shè)計(jì)保持協(xié)調(diào)、一致和美學(xué)的視覺(jué)特征。

5.1.1 像素柵格

基于像素劃分的像素柵格是最基礎(chǔ)的柵格系統(tǒng)。在繪制圖標(biāo)時(shí)，我們總是希望將對(duì)象對(duì)齊到每一個(gè)像素，特別是直線(xiàn)。因?yàn)橄袼貙?duì)齊不僅僅可以更好地渲染，還能讓圖標(biāo)更加整潔、舒服。下圖展示了Sketch 中像素對(duì)齊和沒(méi)對(duì)齊圖標(biāo)之間的差異：

左：像素不對(duì)齊    右：像素對(duì)齊

可以在繪制圖標(biāo)之前就先設(shè)置好柵格，在Sketch和Figma中都有相似的設(shè)置。

Material Design官網(wǎng)給出了圖標(biāo)的輔助網(wǎng)格，為設(shè)計(jì)師繪制小圖標(biāo)提供一致的標(biāo)準(zhǔn)。圖標(biāo)網(wǎng)格通常包含三部分內(nèi)容：活動(dòng)區(qū)域，修飾區(qū)域，關(guān)鍵線(xiàn)形狀。我們以此為例進(jìn)行介紹。

活動(dòng)區(qū)域：是指圖標(biāo)主要內(nèi)容的繪制區(qū)域，通常而言圖標(biāo)圖形的主體都在該區(qū)域內(nèi)。

修飾區(qū)域：是指用于承載部分圖標(biāo)的一些出格圖形，某些視覺(jué)占比較小的圖形可以延伸到修飾區(qū)域，但不能超出網(wǎng)格范圍。

關(guān)鍵線(xiàn)形狀：關(guān)鍵線(xiàn)形狀是網(wǎng)格的基礎(chǔ)。有4種關(guān)鍵線(xiàn)形狀，利用這些核心形狀作為向?qū)В憧梢栽诋a(chǎn)品圖標(biāo)的設(shè)計(jì)中保持一致的視覺(jué)比例。

如 Material Deisgn 的圖標(biāo)網(wǎng)格中，活動(dòng)區(qū)域?qū)挾葹?20dp，修飾區(qū)域?qū)挾葹?2dp，4 種關(guān)鍵形狀分別對(duì)齊于 20pd和 18dp 和 16dp的邊緣，對(duì)齊于像素。

上圖為基于網(wǎng)格和關(guān)鍵線(xiàn)形狀繪制圖標(biāo)的示例：如左側(cè)「剪切板」圖標(biāo)，整體核心圖形部分以網(wǎng)格中的正方矩形為模板，頂部的掛鉤圖形視覺(jué)面積較小，部分內(nèi)容伸入修飾區(qū)域。右側(cè)「相機(jī)」圖標(biāo)以長(zhǎng)方矩形為模板。

5.1.2 視覺(jué)柵格

除了像素柵格，還有視覺(jué)柵格。視覺(jué)柵格可以幫助我們找出圖標(biāo)的中心在哪里，以及人眼能感知到它有多大。圓形和弧形物體看起來(lái)會(huì)比正方形更小。因此我們應(yīng)該在繪制圖標(biāo)時(shí)設(shè)定一個(gè)固定大小的容器，這樣它們?cè)趯?dǎo)出時(shí)就都是相同的尺寸了。添加內(nèi)邊距可以讓圖標(biāo)在視覺(jué)上看起來(lái)更加平衡，避免以后開(kāi)發(fā)時(shí)還需要重新調(diào)整。

5.1.3 視覺(jué)重量

繪制圖標(biāo)不光要滿(mǎn)足物理上大小統(tǒng)一，還要實(shí)現(xiàn)視覺(jué)上大小統(tǒng)一。設(shè)計(jì)師要懂得調(diào)節(jié)圖標(biāo)大小以避開(kāi)視覺(jué)上的覺(jué)錯(cuò)。

UI界面的圖標(biāo)通常可以近似的看做以下的基本格式之一：橫向矩形，縱向矩形，對(duì)角矩形，圓形，三角形，正方形。如果把它們做成高斯模糊效果，你就會(huì)發(fā)現(xiàn)它們具有相同的視覺(jué)重量，因?yàn)樗鼈冏兂苫蚨嗷蛏傧嗤陌唿c(diǎn)效果。

根據(jù)圖標(biāo)形狀，將它們放在相應(yīng)的框架中。你就會(huì)發(fā)現(xiàn)，方形圖標(biāo)比三角形或細(xì)長(zhǎng)圖標(biāo)更緊湊。

5.2 圖標(biāo)繪制細(xì)節(jié)

清晰是圖標(biāo)的基本要素，在sketch中，參數(shù)不要有小數(shù)點(diǎn)，讓圖標(biāo)占滿(mǎn)像素網(wǎng)格。因?yàn)橛?jì)算機(jī)不能識(shí)別小數(shù)點(diǎn)，導(dǎo)出圖標(biāo)時(shí)計(jì)算機(jī)會(huì)把不能識(shí)別參數(shù)的部分拉伸填滿(mǎn)像素網(wǎng)格，導(dǎo)致圖標(biāo)出現(xiàn)虛邊。

如果為圖標(biāo)設(shè)置1像素的邊框，邊框應(yīng)該使用外部或內(nèi)部的描邊樣式，但是不建議居中描邊樣式，居中描邊的1px邊框，雖然在放大它們的時(shí)候，它們看起來(lái)很清晰。但在100%比例大小顯示的時(shí)候，它們會(huì)模糊，如下圖：

根據(jù)像素的網(wǎng)格線(xiàn)來(lái)設(shè)置一條線(xiàn)的起點(diǎn)和終點(diǎn)，會(huì)讓你的圖標(biāo)看起來(lái)更清晰。通常情況下，線(xiàn)的傾斜角度在45°，30°，60°的時(shí)候，清晰度會(huì)比一些不常見(jiàn)的角度效果會(huì)更好，比如13.7°，81°等等。所以，盡量避免用這些奇怪的數(shù)值。

從一套圖標(biāo)中最復(fù)雜的那個(gè)開(kāi)始來(lái)設(shè)計(jì)通常是最有效的，因?yàn)樗鼤?huì)幫助我們定義相同的視覺(jué)重量，讓所有的圖標(biāo)視覺(jué)重量保持一致。因?yàn)楫?dāng)圖標(biāo)具有不同的細(xì)節(jié)層次時(shí)，更復(fù)雜的圖標(biāo)會(huì)吸引用戶(hù)更多的注意力，而且視覺(jué)上看上去更重。

5.3 圖標(biāo)的基本元素

5.3.1 大小

一致性是設(shè)計(jì)圖標(biāo)的關(guān)鍵，在繪制時(shí)，一定要確保所有的圖標(biāo)都相同大小。在UI界面設(shè)計(jì)中，網(wǎng)格的大小必須要是4或12的倍數(shù)。@2x下作圖要保證是4的倍數(shù)，這樣可以整除2，適配@1x的屏幕；@3x下作圖就需要是12的倍數(shù)了，這個(gè)數(shù)值可以整除2、3、4，適配@1x和@2x的屏幕，界面中通常使用的圖標(biāo)尺寸24*24px、48*48px。

通常我們只需要選擇一個(gè)通用的尺寸來(lái)繪制，然后讓開(kāi)發(fā)人員根據(jù)倍數(shù)調(diào)整可能需要的尺寸即可，這樣就不用一遍又一遍的去繪制不同大小的相同圖標(biāo)了。

不過(guò)當(dāng)我們的圖標(biāo)涉及一些復(fù)雜的細(xì)節(jié)時(shí)，還是需要根據(jù)尺寸大小單獨(dú)繪制。比如我們的產(chǎn)品圖標(biāo)可能是24px，但是營(yíng)銷(xiāo)圖標(biāo)是80px，兩者的使用差別會(huì)很大，那么我們就需要為那些較大的尺寸添加一些細(xì)節(jié)。

這里建議從最大的尺寸開(kāi)始，然后依次繪制小一點(diǎn)的。因?yàn)閯h除和簡(jiǎn)化細(xì)節(jié)要比添加容易得多，也能最大程度的保留圖標(biāo)原始狀態(tài)。

5.3.2 描邊和填充

沒(méi)有什么比看到一個(gè)填充圖標(biāo)和一個(gè)線(xiàn)性圖標(biāo)放在一起更讓人抓狂的了。確保你的圖標(biāo)風(fēng)格一致是非常非常重要的。比如你想用填充圖標(biāo)來(lái)表示選中狀態(tài)，那么請(qǐng)一定要確保你的其他圖標(biāo)風(fēng)格一致，只有少量的變化。

通常，填充圖標(biāo)具有更高的可識(shí)別性，而描邊圖標(biāo)更方便添加細(xì)節(jié)。并且在選擇你哪種風(fēng)格更合適的時(shí)候，也別忘了考慮品牌定位和風(fēng)格。

如果你要繪制描邊圖標(biāo)，那么需要保證所有的筆畫(huà)都是相同的粗細(xì)，并且筆畫(huà)之間的間距不要比筆畫(huà)本身更細(xì)。

當(dāng)我們繪制線(xiàn)性圖標(biāo)的填充版本時(shí)，首先需要考慮如何簡(jiǎn)化線(xiàn)條。理想情況下，填充圖標(biāo)類(lèi)似于陰影，而不是直接翻轉(zhuǎn)顏色。繪制填充圖標(biāo)的描邊版本，需要確定好線(xiàn)條的粗細(xì)，以及在保證清晰度的情況下可以添加多少細(xì)節(jié)。

5.3.3 顏色

如果是功能圖標(biāo)，那么最好只使用一種顏色:黑色。否則你的組件可能變得過(guò)于復(fù)雜，不利于和其他設(shè)計(jì)師協(xié)作。而對(duì)于營(yíng)銷(xiāo)圖標(biāo)，出于品牌宣傳的目的，你可能會(huì)想要使用兩種顏色，個(gè)人認(rèn)為圖標(biāo)最好是單一顏色的，3種或3種以上顏色的東西都是插圖，而不是圖標(biāo)。

5.4 功能圖標(biāo)的風(fēng)格

常見(jiàn)的功能性圖標(biāo)風(fēng)格大致有三種：線(xiàn)性圖標(biāo)、面形圖標(biāo)和扁平化圖標(biāo)。但其實(shí)我們可以將「扁平化圖標(biāo)」可以看作是「線(xiàn)性圖標(biāo)」和「面型圖標(biāo)」的一種組合形式，所以歸根到底，基礎(chǔ)的圖標(biāo)風(fēng)格有兩大類(lèi)：「線(xiàn)性圖標(biāo)」和「面型圖標(biāo)」；

5.4.1 線(xiàn)性圖標(biāo)

線(xiàn)性圖標(biāo)是通過(guò)線(xiàn)條來(lái)表現(xiàn)物體的輪廓，它比面形圖標(biāo)更能塑造優(yōu)美的外觀，且作為貫穿圖標(biāo)繪制的線(xiàn)條本身就是一種設(shè)計(jì)語(yǔ)言，因此繪制整套線(xiàn)性圖標(biāo)會(huì)更加統(tǒng)一，具有整體感。例如twitter和微信底部的tab圖標(biāo)等。在一個(gè)場(chǎng)景下的幾個(gè)同等重要的圖標(biāo)，如果線(xiàn)條粗細(xì)不一致，會(huì)給人一種權(quán)重上存在差異的感覺(jué)。所以，在繪制線(xiàn)型圖標(biāo)時(shí)，通常會(huì)使用統(tǒng)一粗細(xì)的線(xiàn)條。

常用的App圖標(biāo)設(shè)計(jì)線(xiàn)的粗細(xì)一般有2PX或者3PX，不同的線(xiàn)條粗細(xì) ICON 所帶來(lái)的視覺(jué)感受也不同，細(xì)線(xiàn)顯得精致，粗線(xiàn)視覺(jué)面積大，顯得厚重。圓角粗線(xiàn)條的 ICON 顯得飽滿(mǎn)而可愛(ài)，個(gè)別 App 的底部標(biāo)簽欄圖標(biāo)采用粗線(xiàn)條設(shè)計(jì)，但粗線(xiàn)條的 ICON 圖形較為極簡(jiǎn)才適用。

線(xiàn)性圖標(biāo)根據(jù)樣式還可以分為：雙色線(xiàn)性圖標(biāo)、線(xiàn)面填充圖標(biāo)、線(xiàn)性漸變圖標(biāo)。

5.4.2 面形圖標(biāo)

面形圖標(biāo)是以面為主要表現(xiàn)形式的圖標(biāo)。在「微信」底部標(biāo)簽欄中，為選中的圖標(biāo)是線(xiàn)性圖標(biāo)，而選中的圖標(biāo)則是面形圖標(biāo)，同時(shí)顏色會(huì)變成微信的品牌綠色再次暗示用戶(hù)選中狀態(tài)。面形圖標(biāo)占用的面積要比線(xiàn)性圖標(biāo)多，所以更加顯眼。實(shí)際上，蘋(píng)果在新的設(shè)計(jì)規(guī)范中也建議開(kāi)發(fā)者在APP底部標(biāo)簽欄中全部使用面形圖標(biāo)，是否處于點(diǎn)擊態(tài)通過(guò)改變填充圖標(biāo)的顏色進(jìn)行區(qū)別。這是因?yàn)樘畛鋱D標(biāo)看上去像可點(diǎn)擊的。

面性圖標(biāo)根據(jù)不同的配色樣式可以分為：?jiǎn)紊柡投忍畛鋱D標(biāo)，純色漸變圖標(biāo)和多色漸變圖標(biāo)。

基于最基本的「線(xiàn)性圖標(biāo)」和「面型圖標(biāo)」，通過(guò)不同的形態(tài)和風(fēng)格的組合，再結(jié)合豐富的 表現(xiàn)手法，就可以設(shè)計(jì)出形形色色的圖標(biāo)風(fēng)格了。比如：不同粗細(xì)線(xiàn)條線(xiàn)性圖標(biāo)的組合，或者面面組合，或者線(xiàn)面組合。大家在設(shè)計(jì)圖標(biāo)的時(shí)候，需要根據(jù)自己的產(chǎn)品特征、受眾和使用場(chǎng)景，去選擇適合自己的表現(xiàn)形式。

6.1 圖標(biāo)繪制方法

圖標(biāo)的繪制方式主要有兩種：布爾運(yùn)算 和 貝塞爾曲線(xiàn)。

6.1.1 布爾運(yùn)算

布爾指的是喬治·布爾，19世紀(jì)的一位數(shù)學(xué)家，為了紀(jì)念布爾在符號(hào)邏輯運(yùn)算中的杰出貢獻(xiàn)，所以將這種運(yùn)算稱(chēng)為布爾運(yùn)算。

布爾運(yùn)算聽(tīng)起來(lái)比較難，但其實(shí)非常簡(jiǎn)單，布爾運(yùn)算采用的數(shù)字邏輯推演法，主要有數(shù)字邏輯的聯(lián)合、相交、相減。設(shè)計(jì)師在使用軟件過(guò)程中引用了這種邏輯運(yùn)算方法，對(duì)應(yīng)到設(shè)計(jì)軟件中，就有：合并形狀、減去頂層形狀、與形狀區(qū)域交叉、排除重疊形狀。例如兩個(gè)圓形相減可以得到一個(gè)月亮的造型，這就是布爾運(yùn)算。

合并形狀：將兩個(gè)形狀合并為一個(gè)，取的是交集；

減去頂層形狀：用底層圖形減去頂層圖形所得最終圖形；

與形狀區(qū)域相交：得到的形狀是兩個(gè)圖形重疊的部分，取的是交集；

排除重疊形狀：簡(jiǎn)單理解就是減去兩個(gè)圖形重疊的部分，與「與形狀區(qū)域相交」相反；

基本上通過(guò)布爾運(yùn)算，我們能繪制出常見(jiàn)的大部分圖標(biāo)了，但有時(shí)我們需要針對(duì)某些線(xiàn)條進(jìn)行單獨(dú)的調(diào)整，又或者我們需要打造一套手繪風(fēng)的矢量圖標(biāo)，這個(gè)時(shí)候就需要用到貝塞爾曲線(xiàn)了。

6.1.2 貝塞爾曲線(xiàn)

貝塞爾曲線(xiàn)適用于二維圖形繪制的數(shù)學(xué)曲線(xiàn)。1962年法國(guó)工程師皮埃爾·貝塞爾（Pierre Bézier）所發(fā)表。他運(yùn)用貝塞爾曲線(xiàn)來(lái)為汽車(chē)的主體進(jìn)行設(shè)計(jì)。貝塞爾曲線(xiàn)是繪制矢量圖形時(shí)的重要工具，使用鋼筆工具畫(huà)出的所有圖形一般來(lái)說(shuō)都是貝塞爾曲線(xiàn)組成的。

貝塞爾曲線(xiàn)包括：節(jié)點(diǎn)、控制點(diǎn)、控制線(xiàn)、曲線(xiàn)這幾個(gè)基本概念。

矢量圖形便是由這幾個(gè)基本概念構(gòu)成的。圖形由基礎(chǔ)節(jié)點(diǎn)作為支撐構(gòu)成，控制點(diǎn)和節(jié)點(diǎn)之間的線(xiàn)段稱(chēng)為控制線(xiàn)，控制線(xiàn)就像皮筋一樣，調(diào)整控制點(diǎn)的位置，可以改變曲線(xiàn)的形狀，就像被皮筋（控制線(xiàn)）拉扯一樣。

節(jié)點(diǎn)包括 4 種基礎(chǔ)屬性類(lèi)型，一種是沒(méi)有控制點(diǎn)和控制線(xiàn)的「直線(xiàn)節(jié)點(diǎn)」；另一種是「鏡像關(guān)聯(lián)節(jié)點(diǎn)」，這種節(jié)點(diǎn)控制其中一側(cè)的控制點(diǎn)，另一側(cè)的控制點(diǎn)會(huì)發(fā)生鏡像變化，適合繪制對(duì)稱(chēng)結(jié)構(gòu)的曲線(xiàn)；再有一種是「無(wú)關(guān)聯(lián)節(jié)點(diǎn)」，即節(jié)點(diǎn)兩側(cè)的控制點(diǎn)可以各自自由控制它們那一側(cè)的曲線(xiàn)而不互相影響；最后一種是「不對(duì)稱(chēng)關(guān)聯(lián)節(jié)點(diǎn)」，這種類(lèi)型下，節(jié)點(diǎn)兩側(cè)的控制點(diǎn)和節(jié)點(diǎn)會(huì)永遠(yuǎn)保持在同一條直線(xiàn)上，但是卻不會(huì)對(duì)稱(chēng)控制線(xiàn)的長(zhǎng)度。

在 Sketch 中，我們可以在選中節(jié)點(diǎn)后通過(guò)快捷鍵 1 / 2 / 3 / 4 來(lái)快速切換當(dāng)前節(jié)點(diǎn)的類(lèi)型，加快繪制效率。

6.1.3 鋼筆工具

繪制自由貝塞爾曲線(xiàn)常用的工具便是鋼筆工具，鋼筆工具也是所有矢量軟件的核心工具。它的使用對(duì)于新手可能稍微薇有點(diǎn)復(fù)雜，但是一但上手，會(huì)非常方便。The Bézier Game 這個(gè)是一個(gè)非常不錯(cuò)的練習(xí)鋼筆工具的網(wǎng)站，以游戲的形式練習(xí)鋼筆工具，通關(guān)的時(shí)候你對(duì)鋼筆工具就已經(jīng)輕車(chē)熟路了。

繪制實(shí)戰(zhàn)

這里選擇了幾個(gè)比較典型的圖標(biāo)，簡(jiǎn)單演示下繪制方法和各自的繪制思路：

6.1.4 面性

眼睛：布爾運(yùn)算相交 / 相減 / 合并形狀

繪制一個(gè)正圓，然后復(fù)制這個(gè)正圓形，通過(guò)布爾運(yùn)算「與形狀區(qū)域相交」得到眼睛外輪廓，再繪制兩個(gè)圓通過(guò)「相減」與合并形狀得到眼睛造型。

位置定位：旋轉(zhuǎn) / 相減

這個(gè)圖標(biāo)由兩個(gè)大小圓形相減，得到環(huán)形，再繪制一個(gè)和大圓半徑相等的正方形，和圓環(huán)左、下對(duì)齊，最后逆時(shí)針旋轉(zhuǎn)45度完成。

WIFI：相加 / 相減 / 旋轉(zhuǎn)

繪制多個(gè)圓通過(guò)布爾運(yùn)算的相加減得出三個(gè)圓圈嵌套“靶子造型，再繪制一個(gè)正三角形，和靶子圖形相交得到Wi-Fi圖標(biāo)。

齒輪：旋轉(zhuǎn) / 相減

通過(guò)兩個(gè)圖形的布爾運(yùn)算得到環(huán)形，然后繪制一個(gè)梯形，復(fù)制一個(gè)鏡像，將其對(duì)齊環(huán)形兩端，復(fù)制梯形編組并旋轉(zhuǎn)復(fù)制三次（45度），最后合并全部形狀完成。

鈴鐺：相加 / 相減

由3個(gè)矩形組成鈴鐺主體，鈴鐺頂部圓頂結(jié)構(gòu)通過(guò)設(shè)置全圓角所得，鈴鐺底部的半圓使用圓形和矩形進(jìn)行布爾運(yùn)算，完成。

6.1.5 線(xiàn)性

放大鏡：旋轉(zhuǎn) / 相加

繪制一個(gè)正圓和一條線(xiàn)，用對(duì)齊工具將其居中對(duì)齊，編組后逆時(shí)針旋轉(zhuǎn)45度即可。

時(shí)鐘：鋼筆 / 剪刀工具

繪制一個(gè)正圓和一個(gè)矩形，使圓形的左下角對(duì)齊圓形中心，用鋼筆工具在矩形左邊和下邊增加兩個(gè)錨點(diǎn)，再用剪刀工具減去多余的線(xiàn)條即可。注意指針的長(zhǎng)短關(guān)系。

雨傘：相減 /  剪刀工具

繪制一個(gè)正圓，再繪制一個(gè)矩形與其相減得到傘頂，然后繪制一個(gè)矩形，通過(guò)剪刀工具減去多余部分，得到傘架，完成。

相機(jī)：合并

繪制一個(gè)矩形和一個(gè)梯形，通過(guò)合并得到相機(jī)主體，再繪制一個(gè)正圓完成相機(jī)鏡頭部分，完成。

愛(ài)心：相加 / 旋轉(zhuǎn)

繪制兩個(gè)正圓和一個(gè)直徑與圓形等寬的正方形，然后逆時(shí)針旋轉(zhuǎn)45度所得。

6.2 制定規(guī)范

無(wú)規(guī)矩不成方圓，規(guī)矩的出現(xiàn)可以讓一切雜亂的東西變得合理，統(tǒng)一起來(lái)。在設(shè)計(jì)上也是如此，規(guī)范具有統(tǒng)一輸出，指引細(xì)節(jié)、便于查看的好處，規(guī)范就是一組圖標(biāo)中的規(guī)矩，所有圖標(biāo)的繪制都按照規(guī)矩來(lái)，最終的成品就會(huì)顯得井然有序。

小小的圖標(biāo)是由很多圖形元素組成的，在這些圖標(biāo)中，元素的一致性是建立一個(gè)共同視覺(jué)于洋的關(guān)鍵。熟悉這些元素可以更容易地理解每個(gè)圖標(biāo)和他們之間細(xì)微的差異，也將幫助我們學(xué)會(huì)圖標(biāo)設(shè)計(jì)的底層結(jié)構(gòu)，依次是筆畫(huà)末端、圓角、留白、筆觸、內(nèi)部角、禁繪區(qū)。

在制定規(guī)范時(shí)，我們通常先繪制出一個(gè)符合業(yè)務(wù)風(fēng)格的圖標(biāo)，然后根據(jù)這一個(gè)圖標(biāo)定制后續(xù)的圖標(biāo)規(guī)范，依次按照上述圖標(biāo)元素進(jìn)行規(guī)范。如果是漸變填充圖標(biāo)還要規(guī)定它的漸變角度，光影角度等。在一組中的圖標(biāo)需要在這些圖形屬性中進(jìn)行統(tǒng)一，這樣的圖標(biāo)雖然形狀不一樣但是在視覺(jué)上看起來(lái)是屬于同一系列的。

制定規(guī)范的三個(gè)過(guò)程：

• 拆分細(xì)節(jié)：將圖標(biāo)中的細(xì)節(jié)元素（圓角、筆畫(huà)末端等）進(jìn)行分解，并在規(guī)范中制定細(xì)節(jié)元素的使用法則。
• 風(fēng)格定位：根據(jù)產(chǎn)品調(diào)性，業(yè)務(wù)屬性在規(guī)范中制定相應(yīng)的色彩、質(zhì)感風(fēng)格。
• 功能劃分：不同功能（金剛區(qū)和標(biāo)簽欄等）的圖標(biāo)要區(qū)分開(kāi)來(lái)，功能相近的包括色彩、質(zhì)感應(yīng)該采取相近性。

圖標(biāo)設(shè)計(jì)規(guī)范

6.3 圖標(biāo)管理和交付

完成圖標(biāo)后需要進(jìn)行視覺(jué)檢視，避免任何多余的線(xiàn)條或形狀，保證盡可能整潔。檢查所有線(xiàn)條是否都在標(biāo)準(zhǔn)框架內(nèi)，讓其他人幫忙來(lái)檢查你的圖標(biāo)是否整潔是非常有必要的。對(duì)圖標(biāo)精心設(shè)計(jì)評(píng)審，合格后再加入資源庫(kù)，這樣避免多人同時(shí)修改而造成混亂。

文件格式是導(dǎo)出圖標(biāo)的關(guān)鍵。不同的人需要的文件格式也不同，如果你為外部合伙人提供圖標(biāo)，那么可能會(huì)提供1x、2x和3x.的png文件，以適應(yīng)多種設(shè)備。而對(duì)于開(kāi)發(fā)和其他設(shè)計(jì)人員，則通常需要導(dǎo)出.svg文件，這些文件可以在設(shè)計(jì)程序中編輯，并且可以通過(guò)代碼在應(yīng)用程序或?yàn)g覽器中繪制。當(dāng)導(dǎo)出SVG時(shí)，代碼應(yīng)該盡可能簡(jiǎn)潔。選擇Figma的另一個(gè)重要原因是它有超小的SVG導(dǎo)出，并且還能自動(dòng)優(yōu)化。

圖標(biāo)資源管理工具：Nucleo

或許你能做出完美無(wú)瑕的圖標(biāo)，但如果不能讓它們產(chǎn)品中發(fā)揮作用的話(huà)，那將毫無(wú)意義。所以在你開(kāi)始設(shè)計(jì)之前，可以和開(kāi)發(fā)人員談?wù)劊麄兡芨嬖V你圖標(biāo)交付的要求，這將改變你的一些選擇，比如圖標(biāo)的粗細(xì)或大小。問(wèn)問(wèn)其他設(shè)計(jì)師過(guò)去做過(guò)什么，以確保你們沒(méi)有重復(fù)工作。你還可以和市場(chǎng)運(yùn)營(yíng)人員聊一下，看看他們?cè)谌粘Ｎ锪现腥鄙偈裁??？傊?，多向別人尋求反饋、建議和幫助。他們會(huì)激勵(lì)你發(fā)現(xiàn)更好的想法，并讓你了解自己應(yīng)該做什么。一套完整的圖標(biāo)設(shè)計(jì)規(guī)范是有必要的。

6.4 線(xiàn)性or面性

設(shè)計(jì)中，我們應(yīng)該是用「線(xiàn)性圖標(biāo)」還是「面性圖標(biāo)」呢？

其實(shí)二者沒(méi)有太明顯的選擇優(yōu)劣，很多場(chǎng)景下已經(jīng)越來(lái)越模糊，但總的來(lái)說(shuō)，還是有一些法則可以作為參考：

• 常用的手法：在App的底部導(dǎo)航欄，選中狀態(tài)使用面型圖標(biāo)，而非選中狀態(tài)使用線(xiàn)性圖標(biāo)；
• 16px左右的小圖標(biāo)慎用線(xiàn)性圖標(biāo)，線(xiàn)性圖標(biāo)在16px下，可排布像素的區(qū)域較小，這個(gè)時(shí)候線(xiàn)性圖標(biāo)不容易設(shè)計(jì)；
• 面型圖標(biāo)比起線(xiàn)性圖標(biāo)，除裝飾性外具備更強(qiáng)的視覺(jué)信息層次感，更具引導(dǎo)性，比如金剛區(qū)功能圖標(biāo)、IOS設(shè)置界面，使用面型圖標(biāo)；
• 車(chē)載等系統(tǒng)界面，更適合用面型圖標(biāo)，面型圖標(biāo)的視覺(jué)面積較大，短時(shí)間內(nèi)更加容易識(shí)別；
• 線(xiàn)性圖標(biāo)看起來(lái)通常會(huì)更加細(xì)膩精致，適合比較精致簡(jiǎn)潔的設(shè)計(jì)或者女性化產(chǎn)品設(shè)計(jì)；

功能圖標(biāo)在UI設(shè)計(jì)中占據(jù)非常重要的作用，幾乎存在于每一個(gè)應(yīng)用界面中，無(wú)論是在導(dǎo)航欄、工具欄或標(biāo)簽欄，還是在首頁(yè)、詳情頁(yè)、或個(gè)人中心頁(yè)，都隨處可見(jiàn)功能圖標(biāo)的身影。功能圖標(biāo)具有明確的表意功能，起作用在于替代文字或輔助文字來(lái)指引用戶(hù)進(jìn)行快速導(dǎo)航，它具有圖形化的符號(hào)，比文字更加直觀，符合普羅大眾的認(rèn)知習(xí)慣，有助于用戶(hù)形成記憶思維，提高應(yīng)用的易用性。同時(shí)，設(shè)計(jì)精美、風(fēng)格統(tǒng)一的功能圖標(biāo)提升了產(chǎn)品視覺(jué)效果，不但給用戶(hù)帶來(lái)視覺(jué)上的愉悅感，還帶來(lái)良好一致的使用體驗(yàn)。

7.1 線(xiàn)性圖標(biāo)使用場(chǎng)景

在iOS所有原生應(yīng)用的導(dǎo)航欄和工具欄都采用了2px線(xiàn)框的圖標(biāo)設(shè)計(jì)，很多APP產(chǎn)品的標(biāo)簽欄都選擇用線(xiàn)性風(fēng)格的圖標(biāo)設(shè)計(jì)。無(wú)疑，線(xiàn)性圖標(biāo)可以減少視覺(jué)干擾，讓用戶(hù)集中在產(chǎn)品核心功能上，同時(shí)輕量化的視覺(jué)語(yǔ)言也與扁平化的設(shè)計(jì)風(fēng)格更為融合。它比面形圖標(biāo)更能塑造優(yōu)美的外觀，且線(xiàn)條本身就是一種設(shè)計(jì)語(yǔ)言，因此繪制整套線(xiàn)性圖標(biāo)會(huì)更加統(tǒng)一，具有整體感。

通常，在UI設(shè)計(jì)中，線(xiàn)性圖標(biāo)很少和背板同時(shí)存在，因?yàn)榫€(xiàn)條的圖形視覺(jué)表現(xiàn)力較弱，容易埋沒(méi)在背景色中，但也不是必須的，如果掌握好一定的規(guī)則，一些簡(jiǎn)單的線(xiàn)性圖標(biāo)和背板的組合也會(huì)很協(xié)調(diào)。

7.2 面形圖標(biāo)使用場(chǎng)景

面形圖標(biāo)具有廣泛適用性，通常在運(yùn)動(dòng)、時(shí)尚類(lèi)應(yīng)用的標(biāo)簽欄出現(xiàn)。由于面形圖標(biāo)的視覺(jué)占比最大化，具有強(qiáng)烈的視覺(jué)表現(xiàn)力，一般用于應(yīng)用界面的主要功能入口，以方便用戶(hù)快速尋找。

功能入口的面形圖標(biāo)通常分為反白和正形兩種類(lèi)型。反白即在彩色背板上顯示白色的圖標(biāo)，正形即圖標(biāo)直接填充色彩且無(wú)背板。在帶有背板的圖標(biāo)設(shè)計(jì)時(shí)要注意圖標(biāo)與背板的尺寸比例，雖沒(méi)有嚴(yán)格的繪制標(biāo)準(zhǔn)，但從整體視覺(jué)效果上考慮，圖標(biāo)尺寸最好不低于背板直徑但1/2，最大不超過(guò)背板直徑的0.618(黃金比例)，同時(shí)還要考慮所有圖標(biāo)的視差一致。

7.3 扁平圖標(biāo)的使用場(chǎng)景

扁平化圖標(biāo)實(shí)際上是線(xiàn)性圖標(biāo)和面形圖標(biāo)的一種組合形式，這種類(lèi)似插畫(huà)感覺(jué)的圖形一開(kāi)始多用于引導(dǎo)頁(yè)、空狀態(tài)也的情感化設(shè)計(jì)，后來(lái)逐漸在標(biāo)簽欄、首頁(yè)主要功能入口也出現(xiàn)了扁平化圖標(biāo)的身影。精致的扁平化圖標(biāo)令人賞心悅目，拉近了與用戶(hù)之間的距離，從而建立起良好的用戶(hù)印象。

我們了解了 icon 的基本知識(shí)，那么如何設(shè)計(jì)一個(gè)好的 icon 呢？怎樣評(píng)判我們的 icon 是否合適，是否貼合整個(gè)產(chǎn)品呢？我們需要了解什么才是一個(gè)好的 icon 。

我們可以從以下五個(gè)方面來(lái)檢驗(yàn)，分別是：識(shí)別性，規(guī)范性、統(tǒng)一性、呼吸感與品牌感。

8.1 識(shí)別性

圖標(biāo)就是幫助用戶(hù)理解信息，所以識(shí)別性（也可以說(shuō)是可訪問(wèn)性）是一個(gè)圖標(biāo)最重要的一項(xiàng)，尤其在沒(méi)有文字說(shuō)明的情況下，一定不能讓用戶(hù)產(chǎn)生疑惑。我們檢測(cè)圖標(biāo)的可讀性通常要將圖標(biāo)的背景色底板在黑色和白色之間進(jìn)行切換對(duì)比，不論是黑色還是白色的背景都可以看清圖標(biāo)的全部細(xì)節(jié)，還需要確保圖標(biāo)中的每一種顏色都是可見(jiàn)的。第二就是將圖標(biāo)拿到強(qiáng)光下進(jìn)行觀察，在強(qiáng)光下是否可以看清圖標(biāo)的主題結(jié)構(gòu)，圖標(biāo)是否有足夠的辨識(shí)度。

圖標(biāo)識(shí)別性可以分為兩類(lèi)，分別是含義識(shí)別和視覺(jué)識(shí)別。

含義識(shí)別：是視覺(jué)語(yǔ)言是否可替換文字語(yǔ)言，簡(jiǎn)言之就是讓你的圖標(biāo)可以被用戶(hù)理解，不會(huì)讓用戶(hù)產(chǎn)生歧義。

視覺(jué)識(shí)別：圖標(biāo)的大小，顏色，線(xiàn)條的粗細(xì)，這些影響視覺(jué)識(shí)別的因素識(shí)別性是否高。

8.2 規(guī)范性

規(guī)范性也是做好一個(gè)圖標(biāo)的基礎(chǔ)，我們要保證圖標(biāo)在視覺(jué)大小的一致性，圖標(biāo)飽滿(mǎn)度、遵循同一種規(guī)律，細(xì)節(jié)統(tǒng)一性。

視覺(jué)大小的一致性：在相同尺寸的基礎(chǔ)上分析形狀間的視覺(jué)差異，來(lái)審視視覺(jué)上是否統(tǒng)一，如一樣尺寸大小的圓和方形的視覺(jué)大小就不一致，那么我們可以規(guī)定它的最大尺寸，進(jìn)而在尺寸規(guī)范中適當(dāng)調(diào)整，使得視覺(jué)大小達(dá)到統(tǒng)一；

飽滿(mǎn)度：常用的衡量方法就是正負(fù)形衡量法，在圖標(biāo)所占區(qū)域的矩形框中，看圖標(biāo)的正形的面積是否還可以增加；

相同規(guī)律：同一套圖標(biāo)必須是以同種風(fēng)格呈現(xiàn)的，例如是否全部使用了圓角或直角的風(fēng)格，圓角大小、繪制風(fēng)格是否一致；

細(xì)節(jié)統(tǒng)一：包括像素是否對(duì)齊、圓角、描邊粗細(xì)是否統(tǒng)一的問(wèn)題；

8.3 統(tǒng)一性

在繪制多個(gè)類(lèi)型相同的圖標(biāo)時(shí)，我們需要注意這一套圖標(biāo)合集需要在視覺(jué)上保持統(tǒng)一性。在一整套產(chǎn)品中，會(huì)有很多種圖標(biāo)，但是圖標(biāo)的功能不一樣，所表達(dá)的內(nèi)容也不同。這時(shí)，圖標(biāo)一致性的意義就體現(xiàn)出來(lái)了，根據(jù)格式塔原理中的相似性原則：人們會(huì)將如元素彼此相似的東西感知為一組。這也意味著如果具有相同功能、含義和層次結(jié)構(gòu)級(jí)別的元素，則應(yīng)在視覺(jué)上保持統(tǒng)一匹配。

圖標(biāo)內(nèi)容的統(tǒng)一會(huì)讓用戶(hù)明白相似的圖標(biāo)所代表的的功能也相同，而且在視覺(jué)上也更加和諧美觀。因此我們?cè)诶L標(biāo)后還需檢查線(xiàn)條的粗細(xì)比重，邊角的大小，配色方案，細(xì)節(jié)層次和設(shè)計(jì)元素在整個(gè)合集中是否是不變且一致的。

8.4 呼吸感

呼吸感的意思就是適當(dāng)留白。不管是圖標(biāo)還是界面，適當(dāng)?shù)牧舭卓梢酝怀鲋黧w內(nèi)容，讓內(nèi)容具備易看性。在圖標(biāo)的繪制過(guò)程中，我們應(yīng)該注意圖標(biāo)元素之間的間距不宜過(guò)近，元素也不宜過(guò)多。圖標(biāo)是一個(gè)物體的簡(jiǎn)略縮影，目的是為了表達(dá)內(nèi)容，讓用戶(hù)快速理解，太過(guò)復(fù)雜的細(xì)節(jié)會(huì)影響圖標(biāo)的識(shí)別速度。因此在圖標(biāo)的繪制過(guò)程中應(yīng)該刪除所有無(wú)法傳達(dá)圖標(biāo)意義的元素，避免使圖標(biāo)變得太過(guò)復(fù)雜難以識(shí)別。

8.5 品牌感

品牌感就是我們上面談到的要與品牌理念相符，傳達(dá)給用戶(hù)的感受一致，通過(guò)吸取品牌色，提取品牌元素，采用品牌吉祥物和品牌圖形的方法來(lái)提取品牌基因。我們要試著從品牌設(shè)計(jì)的角度去理解，尋找自己產(chǎn)品獨(dú)特的品牌氣質(zhì)，挑選合適的技法。然后把這些元素具象化，融入在界面設(shè)計(jì)中。

那么，該如何提升品牌感，打造屬于自己App的獨(dú)特風(fēng)格呢？品牌基因?yàn)槲覀兲峁┝艘恍┚€(xiàn)索，這是近年來(lái)非常流行的一種趨勢(shì)。

我們都知道圖標(biāo)在APP設(shè)計(jì)中的重要性，但是打開(kāi)許多APP你會(huì)發(fā)現(xiàn)他們的圖標(biāo)設(shè)計(jì)都非常普通，似乎是在圖標(biāo)網(wǎng)站上下載的素材。雖然一些優(yōu)秀的設(shè)計(jì)師在進(jìn)行圖標(biāo)設(shè)計(jì)師加入一些諸如圓角、斷線(xiàn)等設(shè)計(jì)語(yǔ)言，但是仍逃脫不了與其他APP設(shè)計(jì)雷同、毫無(wú)個(gè)性的通病，使得UI看上去普通、不精致，缺少產(chǎn)品氣質(zhì)。

那么，該如何打造屬于自己APP的獨(dú)特風(fēng)格呢？品牌基因?yàn)槲覀兲峁┝艘恍┚€(xiàn)索。它是由平面設(shè)計(jì)中的VIS（視覺(jué)識(shí)別系統(tǒng)）引入的一種設(shè)計(jì)策略，通過(guò)對(duì)品牌形象進(jìn)行延生設(shè)計(jì)形成一套完整的視覺(jué)符號(hào)。每一個(gè)APP都有其品牌形象，代表了與眾不同的氣質(zhì)。接下來(lái)，我們就來(lái)學(xué)習(xí)如何利用品牌基因進(jìn)行圖標(biāo)設(shè)計(jì)。

9.1 提取品牌圖形

通常一個(gè)App的第一個(gè)tab是首頁(yè)，是用戶(hù)進(jìn)入App后看到的第一個(gè)頁(yè)面，最常見(jiàn)的圖標(biāo)設(shè)計(jì)是一個(gè)小房子的圖形。首頁(yè)是App中最重要的頁(yè)面，承載了整個(gè)產(chǎn)品的核心功能，是用戶(hù)瀏覽最多的地方，因此使用一個(gè)讓人印象深刻的品牌圖形作為“首頁(yè)”圖標(biāo)是必要的，不但使App內(nèi)外形成了視覺(jué)聯(lián)系，同時(shí)也二次傳遞了品牌形象，加強(qiáng)了用戶(hù)對(duì)App的良好印象。例如網(wǎng)易云音樂(lè)的首頁(yè)標(biāo)簽就直接使用了它的品牌圖形，其優(yōu)點(diǎn)不言而喻。

但是請(qǐng)注意，這種設(shè)計(jì)策略并不適合于所有的App，當(dāng)?shù)谝粋€(gè)tab被賦予特定功能，就不可使用品牌圖形，否則用戶(hù)會(huì)難以理解。例如微信第一個(gè)tab是聊天列表，此時(shí)使用氣泡就比品牌圖形更加合適。

還有另外一種情況。通常一個(gè)App的最后一個(gè)tab是個(gè)人中心，即“我的”。如果App的品牌圖形是動(dòng)物圖形，也可以使用其整體或局部圖形來(lái)作為「?jìng)€(gè)人中心」的入口圖標(biāo)。

9.2 提取品牌色彩

色彩也是圖標(biāo)設(shè)計(jì)中重要的構(gòu)成元素之一，合理協(xié)調(diào)的色彩搭配讓用戶(hù)在瀏覽頁(yè)面時(shí)感覺(jué)舒服。從品牌形象中提取色彩作為圖標(biāo)設(shè)計(jì)的依據(jù)，可以給用戶(hù)帶來(lái)由內(nèi)而外一致的視覺(jué)體驗(yàn)。在設(shè)計(jì)時(shí)提取品牌色彩可適當(dāng)調(diào)整色彩的飽和度，明度，既可以將圖形整體填充色彩（例如微信），也可以局部填充色彩，還可以填充為圖標(biāo)背景色，使圖標(biāo)之間形成色彩上的關(guān)聯(lián)。直播應(yīng)用Bigo Live的品牌色是青藍(lán)色，在標(biāo)簽欄的圖標(biāo)設(shè)計(jì)上（選中態(tài)）將圖形局部元素填充青藍(lán)漸變色，活潑清爽的搭配帶給用戶(hù)輕快的感覺(jué)，與整體品牌調(diào)性高度一致。

9.3 提取設(shè)計(jì)語(yǔ)言

在VI設(shè)計(jì)中通常提取輔助圖形作為設(shè)計(jì)元素，這在圖標(biāo)設(shè)計(jì)中同樣適用，當(dāng)所有的圖標(biāo)都具備了相同的設(shè)計(jì)元素，他們就構(gòu)成了一套完整的視覺(jué)符號(hào)。例如飛豬的品牌圖形就很特別，豬的頭部輪廓是由大寫(xiě)字母F演變成的翅膀造型，因此可以看到“我的”小人圖標(biāo)的也使用了類(lèi)似的輪廓，這樣他們就形成了某種視覺(jué)聯(lián)系。

9.4 提取產(chǎn)品氣質(zhì)

品牌形象決定了產(chǎn)品的氣質(zhì)，而產(chǎn)品的氣質(zhì)決定了吸引什么樣的用戶(hù)。就如當(dāng)我們第一次看到一個(gè)人的時(shí)候，往往會(huì)根據(jù)他的外貌形象特征，產(chǎn)生一個(gè)大致的印象，這就是一個(gè)人的氣質(zhì)。APP也同樣，例如傳遞傳統(tǒng)手工藝人社交的「東家」，其產(chǎn)品流淌著古樸、溫潤(rùn)、精致的人文氣息，它將宋體漢字的筆畫(huà)進(jìn)行拆解組合，創(chuàng)造出具有東方韻味且極具形式感的圖標(biāo)設(shè)計(jì)。

9.5 拆分品牌名稱(chēng)

App標(biāo)簽欄圖標(biāo)最常見(jiàn)的形式是圖形加文字的組合，由于文字本身就能傳達(dá)最直接的含義，因此圖形的識(shí)別性并不那么重要了，我們就可以在其視覺(jué)表現(xiàn)形式上賦予更多創(chuàng)意和個(gè)性。MONO是一款閱讀類(lèi)App，它的標(biāo)簽欄圖標(biāo)直接將品牌名稱(chēng)中的4個(gè)字母拆分成4個(gè)圖形。雖然每個(gè)字母與其對(duì)應(yīng)的功能模塊本身并沒(méi)有直接聯(lián)系，但加上標(biāo)簽文字的輔助也不會(huì)造成閱讀困難，而且產(chǎn)品本身的用戶(hù)人群就是比較能接受新鮮事物的年輕人，因此這樣的創(chuàng)意反而給App設(shè)計(jì)加分了。

9.6 展開(kāi)形象聯(lián)想

我們?nèi)粘Ｊ褂玫谋姸郃pp大多數(shù)都有著相同的功能模塊：首頁(yè)、發(fā)現(xiàn)、動(dòng)態(tài)、我的等，因此也就出現(xiàn)了很多雷同的圖標(biāo)設(shè)計(jì)。比如“首頁(yè)”是尖頂房子，“發(fā)現(xiàn)”是眼睛，“動(dòng)態(tài)”是氣泡，如果有差別也只是設(shè)計(jì)風(fēng)格的差異，有的直角有的圓角，有的線(xiàn)性有的面形。這樣的設(shè)計(jì)沒(méi)有品牌歸屬感，試一下將這些圖標(biāo)單獨(dú)拿出來(lái)就無(wú)法判斷它是誰(shuí)，它從哪兒來(lái)？

優(yōu)秀的設(shè)計(jì)師不僅要具備將圖標(biāo)繪制精美的能力，還要具備豐富的設(shè)計(jì)想象力，不拘泥于設(shè)計(jì)規(guī)范的條條框框，有時(shí)候打破規(guī)則才能設(shè)計(jì)出優(yōu)秀的圖標(biāo)。“首頁(yè)”除了小房子我們還可以想到什么？馬蜂窩的做法就很巧妙，“首頁(yè)”圖標(biāo)是“蜂巢”，而蜂巢是馬蜂的房子，這樣的設(shè)計(jì)與品牌形象緊密相連，簡(jiǎn)直完美！不過(guò)最新的改版好像已經(jīng)改沒(méi)了。

總之，要想在繪制整套圖標(biāo)時(shí)建立統(tǒng)一風(fēng)格，就要從外觀和顏色上確立主風(fēng)格，在局部尋求個(gè)性特征，將兩者結(jié)合，并融合產(chǎn)品屬性和符合用戶(hù)定位，先在腦海中構(gòu)思出清晰的概念，然后在稿紙上繪制草圖，最后確立一個(gè)最佳方案上機(jī)完成，只有不斷地思考和打磨才能創(chuàng)作出最佳的設(shè)計(jì)方案。

寫(xiě)在最后

圖標(biāo)設(shè)計(jì)是UI設(shè)計(jì)中非常重要的環(huán)節(jié)，因?yàn)槌宋淖趾蛨D片的排版之外，在扁平時(shí)代能夠傳遞給用戶(hù)情緒和設(shè)計(jì)感的通道就是頁(yè)面中的各種圖形與圖標(biāo)。在尺寸有限的界面上，小小的 icon 可以更加簡(jiǎn)單高效的表達(dá)含義，傳遞給用戶(hù)正確和友好的指引。建議每位UI設(shè)計(jì)師在平時(shí)做大量的練習(xí)嘗試各種不同的風(fēng)格，以滿(mǎn)足不同的業(yè)務(wù)需求。

OK，圖標(biāo)設(shè)計(jì)指南就分享到這里，希望對(duì)大家有所幫助。因?yàn)槠^長(zhǎng)，幾經(jīng)修改，有細(xì)節(jié)不嚴(yán)謹(jǐn)?shù)牡胤?，歡迎斧正，感謝閱讀。

參考文獻(xiàn)

Material Design

Human Interface Guidelines

ICON | 設(shè)計(jì)指南——v優(yōu)客

ICON設(shè)計(jì)指南——Bonnie Kate Wolf

圖標(biāo)設(shè)計(jì)零基礎(chǔ)科普指南

UI設(shè)計(jì)師必須知道的 iOS和Android的APP圖標(biāo)設(shè)計(jì)指南

品牌基因圖標(biāo)設(shè)計(jì)技巧

作者：印跡時(shí)光

分享大綱：

1.層疊手法

2.圖標(biāo)圖形化

3.單色弱漸變透明圖標(biāo)

層疊手法

顧名思義圖標(biāo)之間有縱深前后關(guān)系，通過(guò)這樣去處理，可以讓圖標(biāo)層次豐富，增加設(shè)計(jì)細(xì)節(jié)，打破枯燥無(wú)味的單色扁平圖標(biāo)。

通常大部分人設(shè)計(jì)一個(gè)圖標(biāo)就直接將圖形畫(huà)出來(lái)后，這樣就完事了，沒(méi)有繼續(xù)深入下去。這樣圖標(biāo)看著枯燥乏味，普通了一些。

如上圖，將圖標(biāo)在接口處進(jìn)行細(xì)節(jié)弱透明度處理，那么效果就完全不一樣了。

這里需要注意，一般都是在圖標(biāo)的接口處進(jìn)行層疊處理，從A到B的一個(gè)線(xiàn)性漸變。

下面來(lái)看看案例：

Atlassian的品牌圖標(biāo)系統(tǒng)

使用建議：運(yùn)用在面形圖標(biāo)效果會(huì)更好些，或者線(xiàn)條粗一些的圖標(biāo)，一般運(yùn)用在TabBar上面居多。

圖標(biāo)圖形化

這種比較好用，將圖標(biāo)進(jìn)行抽象放大化處理，變成一種圖形方式。一般運(yùn)用在卡片設(shè)計(jì)上面居多。

左側(cè)卡片上面，圖標(biāo)直接使用描邊效果?？ㄆ锩骐m然加了一些底紋圖形，但是整體效果略顯平庸了一些 。

重新將圖標(biāo)進(jìn)行圖形化處理，既能夠表達(dá)當(dāng)前含義，同時(shí)設(shè)計(jì)上細(xì)節(jié)和品質(zhì)感有所提升。

其他思路延展示例：

當(dāng)然還有一種類(lèi)似的思路，可以將圖標(biāo)進(jìn)行放大化，并進(jìn)行色彩分割處理為背景，前景放圖標(biāo)和文案等。

如圖，我將前面兩個(gè)思路綜合運(yùn)用，圖形化背景和層疊圖標(biāo)。這里的圖形希望大家不要亂用，盡量使用圖標(biāo)的圖形來(lái)演變。

單色弱漸變透明圖標(biāo)

圖標(biāo)通過(guò)弱漸變透明處理，其思路有點(diǎn)類(lèi)似第一個(gè)。但是這個(gè)方法圖標(biāo)整體帶透明度的范圍更大。

先來(lái)直接看個(gè)案例：

這種圖標(biāo)給人比較新穎的時(shí)尚感，層次也豐富。

如何處理這種圖標(biāo)？

非常重要的一點(diǎn)，需要注意不識(shí)別度問(wèn)題。如左側(cè)圖，圖標(biāo)和背景之間幾乎融為一體，看不清主體元素。右側(cè)處理剛好，能夠識(shí)別出圖標(biāo)含義。

處理時(shí)候一定要注意透明度的關(guān)系，當(dāng)然也與卡片背景色有關(guān)系。

寫(xiě)在最后

關(guān)于圖標(biāo)設(shè)計(jì)三個(gè)小技巧，可多看幾遍，思路比較簡(jiǎn)單直接。當(dāng)然最重要的是靈活運(yùn)用，也可以將三個(gè)思路都融合起來(lái)去設(shè)計(jì)圖標(biāo)。

本文只是拋磚引玉，這些圖標(biāo)處理的技法，并不是能適用所有場(chǎng)景。大家還是需要根據(jù)自己產(chǎn)品特征，找到合適的突破點(diǎn)去設(shè)計(jì)。

原文地址：功夫UX（公眾號(hào)）

作者：功夫UX

設(shè)計(jì)：Song hojong

1. 雙色漸變圖標(biāo)（Duoton Icon）

2019年漸變色流行了一整年，那么2020年雙色漸變?cè)O(shè)計(jì)依然持續(xù)是一個(gè)大趨勢(shì)，因?yàn)閱我坏纳{(diào)無(wú)法滿(mǎn)足產(chǎn)品所需，雙色調(diào)圖標(biāo)的特點(diǎn)就是色彩對(duì)比鮮明，青春活力，這種相比單色調(diào)圖標(biāo)，更適合應(yīng)用于一些主流偏年輕化產(chǎn)品，因此設(shè)計(jì)師還可以通過(guò)設(shè)計(jì)色彩打動(dòng)用戶(hù)，提升產(chǎn)品競(jìng)爭(zhēng)力，工具化產(chǎn)品也可以使用這樣有層次的圖標(biāo)，不過(guò)使用時(shí)，需要對(duì)色彩進(jìn)行克制使用。因此，如果您希望自己的設(shè)計(jì)界面脫穎而出，可以去大膽的使用雙色調(diào)色彩。

a. 雙色調(diào)多層質(zhì)感(彌散漸變，直投影，混合模式)

b. 雙色調(diào)混合模式疊加

2. 單色漸變透明圖標(biāo)（Alpha Icon）

Alpha icon 圖標(biāo)風(fēng)格最大特點(diǎn)就是單色帶透明漸變，通過(guò)弱透明度來(lái)制造視覺(jué)層次，如果是純白色，就會(huì)顯得圖標(biāo)平庸了一些，這種圖標(biāo)運(yùn)用范圍可以是界面中空?qǐng)鼍盎蛘咭恍╆P(guān)鍵模塊的主功能圖標(biāo)。

如下圖左側(cè)大卡片上面圖標(biāo)應(yīng)用思路。

3. 層疊式圖標(biāo)（Cascade Icon）

層疊式圖標(biāo)，相比于純白色線(xiàn)條圖標(biāo)，它帶來(lái)一種更舒適的質(zhì)感，其設(shè)計(jì)方法是通過(guò)穿插層疊的手法，將日常我們所見(jiàn)到的單一的線(xiàn)條圖標(biāo)，變得更具有視覺(jué)層次感，當(dāng)然這種圖標(biāo)使用場(chǎng)景一般會(huì)是在功能說(shuō)明性頁(yè)面，功能介紹等。

4. 品牌植入（Brand Icon）

品牌植入一直是非常大趨勢(shì)，包括今年我們所看到兩大廠的品牌更新IBM和UBER等，都是將品牌核心符號(hào)植入設(shè)計(jì)中，我想這樣的思路在2020年將持續(xù)會(huì)是一個(gè)重要表達(dá)產(chǎn)品氣質(zhì)和記憶點(diǎn)手法打造思路之一，因?yàn)橛脩?hù)已經(jīng)很熟悉目前圖標(biāo)模式，如何能創(chuàng)新區(qū)別其他產(chǎn)品，那么融入品牌將是一個(gè)不錯(cuò)的選擇~品牌的融入技巧有高低之分，需要設(shè)計(jì)師去巧妙設(shè)計(jì)

圖標(biāo)與IBM字母基因某些地方保持一致性，點(diǎn)擊查看此視頻。

同樣多鄰國(guó)在前段時(shí)間更新品牌，并將其LOGO特征符號(hào)植入字體中。

5. 動(dòng)態(tài)圖標(biāo)（Motion Icon）

動(dòng)態(tài)圖標(biāo)是一個(gè)能提升產(chǎn)品體驗(yàn)的方法之一，也是微交互中的一種，它可以增加產(chǎn)品趣味性，F(xiàn)acebook在評(píng)論入口的表情動(dòng)畫(huà)就運(yùn)用了動(dòng)態(tài)圖標(biāo)， 包括蘋(píng)果Apple Pay支付成功圖標(biāo)動(dòng)畫(huà)，Google Assistant智能助手，Messenger中的打招呼動(dòng)畫(huà)等等我們可以逐漸發(fā)現(xiàn)動(dòng)態(tài)圖標(biāo)比靜態(tài)圖標(biāo)的表達(dá)性更強(qiáng)，更受到青睞，隨著硬件升級(jí)，這種動(dòng)態(tài)圖標(biāo)運(yùn)用逐漸在越來(lái)越多場(chǎng)景可見(jiàn)到。

看看整個(gè)表情動(dòng)畫(huà)，點(diǎn)擊查看動(dòng)畫(huà)視頻。

看完是不是覺(jué)得特別有趣好玩。表情更接近我們生活。

再來(lái)個(gè)Apple pay支付動(dòng)態(tài)效果，點(diǎn)擊查看視頻演示。

其他類(lèi)型圖標(biāo)動(dòng)畫(huà)

OutLook中的日歷圖標(biāo)動(dòng)畫(huà)

總結(jié)

在整個(gè)互聯(lián)網(wǎng)大趨勢(shì)下，研究圖標(biāo)將來(lái)的風(fēng)格走向，做好未雨綢繆，希望以此為開(kāi)端，大家能發(fā)現(xiàn)更好的設(shè)計(jì)趨勢(shì)風(fēng)格，融入產(chǎn)品設(shè)計(jì)里面，當(dāng)然趨勢(shì)是好的，我們運(yùn)用時(shí)候更多需要從產(chǎn)品本身定位出發(fā)，產(chǎn)品性格去合理運(yùn)用設(shè)計(jì)趨勢(shì)，提升產(chǎn)品設(shè)計(jì)品質(zhì)。

作者：LoveXiaoTao，微信號(hào)：UX-Talk

如果把平面設(shè)計(jì)看作是形與色的組合，那么Illustrator就是勝在對(duì)形的把握，而Photoshop則重在對(duì)色的渲染。如果是想要做出有質(zhì)感的畫(huà)面，那勢(shì)必要用到PS不可。

今天我們就來(lái)利用PS打造一枚質(zhì)感水晶風(fēng)格圖標(biāo)，說(shuō)是圖標(biāo)，其實(shí)也可以當(dāng)作平面的素材使用。水晶本身是幾何狀，很容易做出現(xiàn)代的簡(jiǎn)約風(fēng)格。

靈感來(lái)源

來(lái)自Jose A.ortiz的一組光感作品，看了作品里對(duì)光源把握很好，于是臨摹了一下，有所心得。在他原有的作品上，增加了光的作用，此外也增加了我自己的方法和理解。

警語(yǔ)

軟件：Photoshop 2019

本文對(duì)所涉及的軟件基礎(chǔ)工具不多做特別詳細(xì)的解釋?zhuān)绻麑?duì)工具仍然不熟悉的小伙伴，可以先移步軟件的基礎(chǔ)操作再進(jìn)行實(shí)例練習(xí)，本文更多提供的是一種創(chuàng)作的思維過(guò)程和方法。

用筆刷實(shí)現(xiàn)漸變

我很喜歡PS的筆刷，但是用來(lái)用去發(fā)現(xiàn)最常用的還是默認(rèn)那款。今天我們就用最普通的筆刷來(lái)「刷」出色彩。

雖然軟件里有漸變工具，但是要想實(shí)現(xiàn)漸變這一視覺(jué)效果，在PS中有無(wú)限的實(shí)現(xiàn)途徑。比如今天我們要用的就是用筆刷來(lái)實(shí)現(xiàn)漸變。

用筆刷來(lái)實(shí)現(xiàn)漸變，和繪畫(huà)是一個(gè)道理，非常自由的調(diào)配色彩。這樣能讓漸變的色彩表現(xiàn)更自由。

以上左右兩個(gè)圓的色彩填充就是分別采用了漸變工具、柔邊圓畫(huà)筆筆刷。可以看到右邊筆刷刷出的漸變比較自然靈動(dòng)，而左邊相對(duì)比較平直，沒(méi)有變化。如果想要實(shí)現(xiàn)比較靈活的視覺(jué)效果，左邊用漸變工具以后，還需要做更多的處理。

繪制水晶晶體外形

首先還是需要我們?cè)赑S中繪制出水晶的外觀輪廓。

STEP 01

我們可以首先在草圖上找到合適的形態(tài)，水晶是一種有機(jī)形態(tài)，可以探索多種不同的形態(tài)畫(huà)法。

這里大家可以看到我們有多條邊線(xiàn)，這是把位于水晶背面的邊線(xiàn)也表現(xiàn)出來(lái)了。這是為了讓我們?cè)谲浖锢L制形狀時(shí)清楚水晶的結(jié)構(gòu)，每一個(gè)面都需要填色到位，我們要讓水晶保持透明。

STEP 02

打開(kāi)PS，新建一個(gè)2000*2000px的文檔，將背景設(shè)置為暗藍(lán)色。一般來(lái)說(shuō)，光感效果都需要暗色背景來(lái)襯托其光亮。

STEP 03

按照草圖給定的輪廓線(xiàn)，運(yùn)用鋼筆工具進(jìn)行繪制。繪制的目的是建立起水晶晶體不同的「面」，這樣才能幫助填色。

水晶的晶體一共有8個(gè)面，前后分別表現(xiàn)為4個(gè)面。

前后4個(gè)面是遮擋的關(guān)系（前面擋住了后面），在這里如果降低了圖層的透明度就能看到，因?yàn)橥该?，這8個(gè)面的視覺(jué)相互影響。

相應(yīng)的，在圖層上也需要安排好它們的順序。

「刷」出色彩

按照順序，從前方的左下這個(gè)形狀開(kāi)始填色。

STEP 04

首先我們需要調(diào)出這塊三角形的輪廓線(xiàn)，在輪廓線(xiàn)內(nèi)涂抹色彩。這就可以利用我們上一步所繪制的8個(gè)形狀，分別進(jìn)行。

在按住鍵盤(pán)上的Ctrl鍵時(shí)再單擊鼠標(biāo)左鍵，就能形成螞蟻線(xiàn)輪廓，新建一個(gè)圖層，把所涂抹的色彩放到新圖層上，下方的形狀圖層就可以關(guān)閉了。

這里我只使用柔邊圓這個(gè)最普通的畫(huà)筆，將其放大，可以任意涂抹大塊的色彩。

色彩我們可以從藍(lán)色開(kāi)始，然后再為其增加其他的色彩比如紫色、紅色等。

PS在色彩方面的優(yōu)勢(shì)就是可以對(duì)色彩進(jìn)一步優(yōu)化，比如大家在色彩搭配方面一開(kāi)始并不滿(mǎn)意，后期也可以通過(guò)調(diào)色或者改變透明度、圖層混合模式等一系列方式進(jìn)行質(zhì)感的提升。

STEP 05

按照上述方法繼續(xù)涂抹正面的另3個(gè)面，色彩不要太過(guò)，讓整體畫(huà)面保持平衡。

在這里我的配色方案是用藍(lán)、紫作為主色，然后輔以橙色以及洋紅。

STEP 06

接下繪制位于背面的4個(gè)面，這4個(gè)面在正面的「下方」，但這里不需要關(guān)閉上面的圖層，而是保持上面的圖層可見(jiàn)，看看它們彼此重疊后的效果，可以隨時(shí)調(diào)整上面的圖層的透明度甚至色彩。

進(jìn)一步潤(rùn)色

到這一步我們就已經(jīng)把初步的工作完成，接下只需要進(jìn)一步修飾、潤(rùn)色。

STEP 07

可以把每一面的圖層都經(jīng)過(guò)調(diào)色處理，這通常處理一些比較細(xì)的色彩細(xì)節(jié)。最常用的調(diào)色工具是【色相/飽和度】，這一步主要是為下一步整體調(diào)色服務(wù)。

也許這并看不出多少改變，因?yàn)榇藭r(shí)還只是微調(diào)，色彩只要不出偏差，都不需要大的調(diào)整。

STEP 08

這一步開(kāi)始增加高亮的部分，這部分采用小一些的白色柔邊圓增加在面的邊緣部分。這里我采用的是增加剪切蒙版的方式，如果光亮太過(guò)白，可以實(shí)當(dāng)減弱其透明度。

將白色的高光增加在邊緣部分能進(jìn)一步強(qiáng)調(diào)水晶的體積感。

調(diào)色階段

這時(shí)正式進(jìn)入進(jìn)一步調(diào)色的階段。

STEP 09

這時(shí)將除了背景以外的所有圖層編為一組，然后把這個(gè)組命名為備份，再?gòu)?fù)制一個(gè)組，將這個(gè)組合并為一個(gè)圖層，然后把這個(gè)圖層命名為水晶，我們對(duì)這個(gè)水晶圖層進(jìn)行調(diào)色。

原有的備份組關(guān)閉其可見(jiàn)，但在需要比較調(diào)色后的效果時(shí)，也可以開(kāi)啟隨時(shí)比較觀察。

首先我們運(yùn)用【自然飽和度】，增加色彩的飽和度。

STEP 10

再調(diào)整【曝光度】以及【曲線(xiàn)】，增加畫(huà)面的色調(diào)明暗對(duì)比。

STEP 11

再進(jìn)一步采用【色彩平衡】，對(duì)色彩做進(jìn)一步修飾。

雖然沒(méi)調(diào)色之前，看起來(lái)并沒(méi)有什么不妥，但是調(diào)色之后再對(duì)比，就會(huì)發(fā)現(xiàn)之前的版本的色調(diào)看起來(lái)很黯淡。

到這一步色彩已經(jīng)完成。

光色美化

光線(xiàn)是我們這次練習(xí)的重點(diǎn)，因此接下就來(lái)繼續(xù)增加光效。

STEP 12

首先來(lái)增加其本身的色光，復(fù)制上一步的水晶圖層，然后柵格化圖層，將其進(jìn)行【高斯模糊】。模糊參數(shù)可以設(shè)置到72，甚至更大。

然后將這個(gè)圖層的混合模式改為【濾色】，透明度降至70%。這樣也會(huì)為畫(huà)面增加一種夢(mèng)幻感。

STEP 13

再將原有的水晶圖層進(jìn)行柵格化，這里我們要對(duì)這個(gè)圖層應(yīng)用【濾鏡>光照效果】

STEP 14

最后，在背景之上新建一個(gè)空?qǐng)D層，用畫(huà)筆畫(huà)出中央略亮的感覺(jué)。

到此我們就完成了整個(gè)制作步驟。設(shè)計(jì)沒(méi)有終點(diǎn)，這一步以后還可以返回重新調(diào)色，增加光效等。

最終效果

目前這篇文章，我們就做到這一步：

后記：用時(shí)間打磨出質(zhì)感

很多人對(duì)PS的印象，還是停留Photo這個(gè)層面，但是我們可以看到PS對(duì)質(zhì)感的營(yíng)造是獨(dú)一無(wú)二的，所有在AI或者其他工具畫(huà)出的插畫(huà)，我覺(jué)得都可以利用PS來(lái)進(jìn)一步潤(rùn)色得更為精致。

在沒(méi)有調(diào)色之前，其實(shí)很多畫(huà)面的色彩都看得過(guò)去，放到PS當(dāng)中潤(rùn)飾之后，通過(guò)對(duì)比都能發(fā)現(xiàn)差異，一稿就能做出優(yōu)秀配色，恐怕是需要幾十年深厚的配色功底。質(zhì)感也都是通過(guò)時(shí)間慢慢打磨出來(lái)的。

在有限的時(shí)間里，實(shí)踐時(shí)間利用的最大化，就能深入到更細(xì)的細(xì)節(jié)。一點(diǎn)實(shí)踐的體會(huì)。

原文鏈接：https://www.ifeiwu.com/blog/design/1494

1 使用光柵來(lái)更好的設(shè)計(jì)圖標(biāo)

UI界面的圖標(biāo)通?？梢越频目醋鲆韵碌幕靖袷街唬簷M向矩形，縱向矩形，對(duì)角矩形，圓形，三角形，正方形。 如果把它們做成高斯模糊效果，你就會(huì)發(fā)現(xiàn)它們具有相同的視覺(jué)重量，因?yàn)樗鼈冏兂苫蚨嗷蛏傧嗤陌唿c(diǎn)效果。

根據(jù)圖標(biāo)形狀，將它們放在相應(yīng)的框架中。你就會(huì)發(fā)現(xiàn)，方形圖標(biāo)比三角形或細(xì)長(zhǎng)圖標(biāo)更緊湊。

圖標(biāo)越緊湊，所需空間就越小。圖標(biāo)的邊緣越銳利，細(xì)節(jié)越多，它們占據(jù)的畫(huà)板空間就越多。

請(qǐng)注意，不要過(guò)分的依賴(lài)于網(wǎng)格來(lái)設(shè)計(jì)圖標(biāo)。它們是用來(lái)幫你而不是限制你的。如果一個(gè)圖標(biāo)的某些元素伸展出來(lái)更好看，那就順其自然讓它們伸出來(lái)。

2注意像素網(wǎng)格的重要性

在非視網(wǎng)膜屏幕上設(shè)計(jì)圖形的時(shí)候，要特別遵循使用像素網(wǎng)格，并優(yōu)先選用2像素的邊框作為圖標(biāo)的線(xiàn)條。因?yàn)樗梢宰寛D標(biāo)在這些顯示屏上更加清晰。

如果為圖標(biāo)設(shè)置1像素的邊框，這個(gè)時(shí)候，這些邊框應(yīng)該使用外部或內(nèi)部的描邊樣式，但不建議是居中的。如下圖，你可以看到他們的區(qū)別。

居中描邊的一像素邊框，雖然在放大它們的時(shí)候，它們看起來(lái)很清晰。但在100%比例大小顯示的時(shí)候，它們會(huì)模糊掉。所以，慎用~下面兩張圖是圖標(biāo)在居中描邊的時(shí)候所產(chǎn)生的效果：

根據(jù)像素的網(wǎng)格線(xiàn)來(lái)設(shè)置一條線(xiàn)的起點(diǎn)和終點(diǎn)，會(huì)讓你的圖標(biāo)看起來(lái)更清晰。通常情況下，線(xiàn)的傾斜角度在45°，30°，60°的時(shí)候，清晰度會(huì)比一些不常見(jiàn)的角度效果會(huì)更好，比如13.7°，81°等等。所以，盡量避免用這樣的數(shù)值。

3保持一定的圖標(biāo)細(xì)節(jié)

從一套圖標(biāo)中最復(fù)雜的那個(gè)開(kāi)始來(lái)設(shè)計(jì)通常是最有效的，因?yàn)樗鼤?huì)幫助我們定義相同的視覺(jué)重量，讓所有的圖標(biāo)視覺(jué)重量保持一致。

當(dāng)圖標(biāo)具有不同的細(xì)節(jié)層次時(shí)，更復(fù)雜的圖標(biāo)會(huì)吸引用戶(hù)更多的注意力，而且視覺(jué)上看上去更重。

4控制最小的間隙尺寸

圖標(biāo)的相鄰元素之間空間在整個(gè)圖標(biāo)集中不應(yīng)太小或不一致。在任何情況下，都要定義最小間隙，以避免輪廓“粘滯”。比如下方的圖標(biāo)，太小的間隙，所產(chǎn)生的粘滯感要特別注意：

下面這個(gè)則是調(diào)整后的效果，是不是好多了？

對(duì)于線(xiàn)性圖標(biāo)來(lái)說(shuō)，圖標(biāo)線(xiàn)段的最小間隙應(yīng)該等于線(xiàn)的粗度。另外，線(xiàn)條應(yīng)該明確的分開(kāi)或者準(zhǔn)確的閉合連接。下圖是從錯(cuò)誤的例子：

下面這個(gè)則是修改后的效果，是不是好多了？

5去除重復(fù)部分

在一套圖標(biāo)集中，你很可能會(huì)重復(fù)一些細(xì)節(jié)，比如下圖這樣。但是盡量不要這么做，讓觀眾的注意力集中在不同的東西上。這就像數(shù)學(xué)中的分?jǐn)?shù)簡(jiǎn)化一樣。您看到的圖形噪聲越少，用戶(hù)的理解就越清晰。

比如下方這個(gè)郵件收發(fā)主題的圖標(biāo)，當(dāng)用戶(hù)已經(jīng)非常熟知自己的具體操作，比如收郵件，發(fā)郵件，回復(fù)等等。那就不要在設(shè)計(jì)圖標(biāo)的時(shí)候反復(fù)強(qiáng)調(diào)“信封”這個(gè)圖形了。將它們簡(jiǎn)化，效果反而更好。

此規(guī)則還涉及圖標(biāo)周?chē)母鞣N裝飾，框架，背景。如果它們沒(méi)有幫助幫助更好的閱讀圖標(biāo)，就讓它們更加簡(jiǎn)化一點(diǎn)比較好。

6保持圖標(biāo)風(fēng)格統(tǒng)一

下面的兩幅圖可以很好的展示正確的和錯(cuò)誤的例子，比如一套家具的圖標(biāo)，如果一個(gè)圖標(biāo)的繪制角度是斜45°，那么其他的圖標(biāo)也盡量保持這樣的角度。而不能一個(gè)是正視，一個(gè)是斜視?？纯聪旅鎯煞鶊D，哪幅圖是正確的呢？

相同的原理適用于線(xiàn)性圖標(biāo)和填充圖標(biāo)。 如果你把它們混為一談，人們可能會(huì)認(rèn)為它們具有不同的重要性或地位。 當(dāng)然，除非你刻意想要那個(gè)。 例如，填充圖標(biāo)用于鍵命令，線(xiàn)圖標(biāo)用于其他命令。

當(dāng)然，我們可以用填充圖標(biāo)表示當(dāng)前態(tài)，線(xiàn)性圖標(biāo)代表非選中狀態(tài)，這樣也是不錯(cuò)的選擇。

7基于二倍數(shù)的度量系統(tǒng)來(lái)設(shè)計(jì)

與基于十進(jìn)制的大小調(diào)整相比，8像素網(wǎng)格和12列布局用于許多接口更靈活。 12可以分為2,3,4和6。因此，24或48像素圖標(biāo)區(qū)域已成為標(biāo)準(zhǔn)。 如果需要更大的尺寸，可以縮放這些圖標(biāo)。是時(shí)候補(bǔ)習(xí)下數(shù)學(xué)啦！

8保持輪廓的干凈和準(zhǔn)確

對(duì)于完美主義，設(shè)計(jì)師不能鉆牛角尖，因?yàn)闆](méi)有完美的事物。但是在你的最終設(shè)計(jì)稿里邊，正確的，不扭曲的圖標(biāo)設(shè)計(jì)還是非常重要的。特別要注意，確保相鄰的節(jié)點(diǎn)和相鄰的元素是完全對(duì)齊或者沒(méi)有間隙的。

一定要避免 “8.999 px”或“100.001 px”這樣的尺寸。如果節(jié)點(diǎn)定位準(zhǔn)確，圖標(biāo)邊緣看起來(lái)很清晰。這個(gè)非常必要，保持整數(shù)吧！

9清理SVG圖標(biāo)中的垃圾代碼

我們都知道SVG圖標(biāo)最終是一串代碼。在Sketch中生成的SVG圖標(biāo)通常會(huì)包含很多不必要的冗余代碼，比如組，顏色圖層還有遮罩。下面的這個(gè)圖標(biāo)在Sketch中看起來(lái)很棒，但是…….

我們把Sketch生成的SVG圖標(biāo)在AI中打開(kāi)的時(shí)候，你會(huì)發(fā)現(xiàn)它的圖層非?；靵y。這些混亂的圖層都可以會(huì)讓前端開(kāi)發(fā)工程師在轉(zhuǎn)換代碼的時(shí)候出現(xiàn)問(wèn)題。

我們可以把這些不必要的圖層刪除掉，這樣看起來(lái)簡(jiǎn)潔多了：

10不要把本文當(dāng)公式

當(dāng)然，以上我們討論的建議只是建議，他們不是刻板的公式。如果你知道自己在做什么，則可以?xún)H僅把它們當(dāng)作參考，而不一定要完全遵從它們。設(shè)計(jì)是靈活多變的，只要符合用戶(hù)體驗(yàn)的規(guī)律，都可以被我們所用。

作者：Slava Shestopalov

原文：https://medium.muz.li/icon-set-3b4fc87dc6b5

翻譯：靜電

UI最重要組建之一就是圖標(biāo)，隨著扁平化設(shè)計(jì)的發(fā)展趨勢(shì)，越來(lái)越注重圖標(biāo)的簡(jiǎn)潔與寓意表達(dá)，平面圖標(biāo)已占主導(dǎo)地位。每位設(shè)計(jì)師所處的階段所關(guān)注的要點(diǎn)是不一樣的，我把圖標(biāo)設(shè)計(jì)分為2個(gè)階段–初階與高階，這樣分是為了有步驟性的學(xué)習(xí)和進(jìn)階的加強(qiáng)，當(dāng)然，能人的話(huà)一步到位，對(duì)于新人來(lái)講會(huì)較難，需要實(shí)際工作中輔導(dǎo)與自己經(jīng)驗(yàn)總結(jié)。我不會(huì)華麗高大尚的語(yǔ)言，但是我可以分享一些實(shí)實(shí)在在的基礎(chǔ)方法，也是這幾年會(huì)給帶的學(xué)生反復(fù)必講的入門(mén)輔導(dǎo)，有自己成熟方法表達(dá)的設(shè)計(jì)師可忽略這里，這里先說(shuō)初階的設(shè)計(jì)關(guān)鍵要點(diǎn)。

目錄:

1. 一. 概念類(lèi)別

2. 二. 設(shè)計(jì)技法要點(diǎn)

3. 三. 系列成型圖標(biāo)

 ———————————————————————————————

【一】概念類(lèi)別

扁平化圖標(biāo)大部分無(wú)非就是剪影表現(xiàn)，而這里為什么重點(diǎn)是講圖標(biāo)的形狀設(shè)計(jì)，而非色彩，因?yàn)橐磺邢扔行尾趴紤]下一步。形不好再怎么營(yíng)造整體風(fēng)格都白費(fèi)力，好比建筑造型與裝修的關(guān)系，而色彩等營(yíng)造的風(fēng)格都可另起文章分析 。圖標(biāo)造型表現(xiàn)上無(wú)非就是典型的2種：面與線(xiàn) 。運(yùn)用這兩種基礎(chǔ)元素去造型也可以進(jìn)行多種組合不同的表現(xiàn) 。組合造型一般有單體造型、多個(gè)元素組合造型，線(xiàn)與面之間的獨(dú)立與結(jié)合的變化。

• l 簡(jiǎn)化的微寫(xiě)實(shí)圖標(biāo)

這類(lèi)通常是彩色一體表現(xiàn)，造型和組合上較寫(xiě)實(shí)，不是純剪影，是寫(xiě)實(shí)過(guò)渡來(lái)的簡(jiǎn)化，又接近剪影，扁平簡(jiǎn)化設(shè)計(jì)，這里主要是利用面和顏色來(lái)進(jìn)行造型的設(shè)計(jì)。質(zhì)感風(fēng)格上也有6種（已有人分析），大概是純平面、折疊、輕質(zhì)感、折紙風(fēng)、長(zhǎng)投影、微立體。這種相對(duì)剪影的好畫(huà)很多，也更加容易塑造風(fēng)格，更多是在色彩上有得發(fā)揮和考究，用在界面里也是最為突出的。最近還非常流行用色塊來(lái)進(jìn)行二維、三維的裝飾表達(dá)，叫所謂的“低面建模“,感興趣的去搜一下。

上面提到的元素組合，比如下圖這個(gè)圖標(biāo)目前是2個(gè)元素–信封加信紙，如果還要再加什么功能狀態(tài)示意，最多在右上角加個(gè)很小的消息提醒。因?yàn)樵卦蕉嘣綇?fù)雜，所表達(dá)的含義也就越多，同時(shí)也會(huì)影響造型的調(diào)動(dòng)。不管多少個(gè)元素總有一個(gè)最重要的對(duì)象，其他為輔助圖形，在塑形大小復(fù)雜度上有區(qū)別。

1.1本文半原創(chuàng)圖例

l  剪影的正負(fù)形圖標(biāo)

這類(lèi)通常是單色表現(xiàn)，當(dāng)然也有綜合彩色的。其更加簡(jiǎn)潔抽象， 言簡(jiǎn)意賅，高度提煉精華，講究表象意境，具有理解的門(mén)檻。所以這才是最難設(shè)計(jì)的一關(guān)。非?？季吭O(shè)計(jì)的理性與感性之間在功能傳達(dá)上的邏輯思維。也是UI界所謂現(xiàn)代極簡(jiǎn)主義的代表，注意，沒(méi)把握好就會(huì)變得很“空虛”，把握好了就是時(shí)尚的feel啦~

負(fù)形圖標(biāo)是以線(xiàn)繪制的圖形，高度的輪廓概括，就跟畫(huà)骨骼一樣的要求精準(zhǔn)到位，也叫線(xiàn)形圖標(biāo)。負(fù)形剪影是所有圖標(biāo)中最講究也最難表達(dá)型的一種風(fēng)格，如果畫(huà)不好就很容易俗氣和簡(jiǎn)陋。

正形圖標(biāo)是以面繪制的圖形，也有和線(xiàn)綜合表現(xiàn)情況，自己根據(jù)需要進(jìn)行創(chuàng)造變化吧。通常與負(fù)形圖標(biāo)之間做當(dāng)前狀態(tài)的轉(zhuǎn)換，手機(jī)tab上最常見(jiàn)，如ios7。

優(yōu)點(diǎn)：簡(jiǎn)潔清新優(yōu)雅；極具現(xiàn)代感（雖然遠(yuǎn)古時(shí)代就有高度概括的符號(hào)表達(dá)，這里指的范圍是互聯(lián)網(wǎng)上的全新應(yīng)用）；具有設(shè)計(jì)與涵義綜合的拓展性；還可以完成一些抽象詞匯的圖形傳達(dá)。

1.2本文原創(chuàng)圖例

圖標(biāo)為上傳到云端的之意，這里的主對(duì)象是云，所以箭頭和云的比例是不同的，上傳箭頭是輔助圖形。了解界定多元素之間的主次關(guān)系，就能夠把握一個(gè)整體的造型走向。典型的基礎(chǔ)表現(xiàn)就是上面兩種，然后在實(shí)際繪制中根據(jù)自己的喜好和設(shè)計(jì)來(lái)進(jìn)行融合，可以得出更加豐富的表現(xiàn)。

【二】設(shè)計(jì)技法要點(diǎn)

1、關(guān)鍵節(jié)點(diǎn)繪制法

擬物化設(shè)計(jì)就是盡可能的繪制繁瑣細(xì)節(jié)，追求豐富和相似度。而剪影圖標(biāo)則是相反，以簡(jiǎn)練為繪制手段。但是細(xì)節(jié)就沒(méi)有嗎，不是的，而是更加謹(jǐn)慎認(rèn)真的注重每一筆，且越來(lái)越優(yōu)雅。這里舉例剪影圖標(biāo)繪制方法技巧，3步驟可以搞定，看似又簡(jiǎn)單又難，簡(jiǎn)單的是只是繪制參照物輪廓，保留基礎(chǔ)識(shí)別性，步驟很少；難的是這調(diào)整的過(guò)程與產(chǎn)品環(huán)境的融合性，易用性，還有你自己的創(chuàng)意想法。說(shuō)簡(jiǎn)單點(diǎn)就是去繁擇簡(jiǎn)并經(jīng)過(guò)思考改造過(guò)的設(shè)計(jì)過(guò)程。而最基本的最需要犀利眼神抓準(zhǔn)的是造型的關(guān)鍵節(jié)點(diǎn)，雛形出來(lái)后再根據(jù)想法調(diào)整。

• l 提煉精華勾勒輪廓

通常在繪制已有參照物的基礎(chǔ)上去設(shè)計(jì)一個(gè)圖標(biāo)，可以根據(jù)你喜歡的造型參照物去進(jìn)行分析，先抓取到參照物的關(guān)鍵節(jié)點(diǎn)，幾何繪制出來(lái)一個(gè)相似的基本圖形。

• l 調(diào)整線(xiàn)鋒優(yōu)雅得體

基礎(chǔ)雛形出來(lái)后就開(kāi)始加入自己的想法調(diào)整線(xiàn)鋒，線(xiàn)條走向決定造型。這個(gè)時(shí)候就得要調(diào)多幾個(gè)版本了。設(shè)計(jì)師的處女座精細(xì)和糾結(jié)情結(jié)就在這里灑汗了，不斷調(diào)整對(duì)比，挑選出一個(gè)最優(yōu)再進(jìn)行下一步。

• l 增特有細(xì)節(jié)出風(fēng)格

最后一步的塑形，就是畫(huà)龍點(diǎn)睛！造型的特點(diǎn)就在這一步去完成。

2.1 本文原創(chuàng)圖例

對(duì)于新老設(shè)計(jì)師來(lái)說(shuō)，這樣的方法都是比較可取好用的，交互設(shè)計(jì)師也可以這樣快速入門(mén)哦親！尤其是第一步驟，能否非常快速的出雛形。下面是其他案例的設(shè)計(jì)方法欣賞，跟我上面總結(jié)的一樣道理。

2.2圖例來(lái)源于Digial Art

2.3圖例來(lái)源于iconwerk

2、精致的基礎(chǔ)要素

精致即精細(xì)極致?？此坪?jiǎn)單的圖標(biāo)其實(shí)并不是隨便了事，但知道了這些基本要素你就可以完成一個(gè)合格的圖標(biāo)了。好的圖標(biāo)是謹(jǐn)慎認(rèn)真的注重每一筆每一像素每一矢量錨點(diǎn)的，盡可能的往精美優(yōu)雅的方向努力吧騷年~

• l 犀利清晰

需要鍛煉厲害的眼睛，使出你的火眼金星捕捉每個(gè)像素之差，像素滿(mǎn)格才能清晰的呈現(xiàn)，細(xì)分出來(lái)通常會(huì)遇到以下3種情況，這也是最影響圖標(biāo)基本質(zhì)量的問(wèn)題點(diǎn)。

1)    輪廓發(fā)虛

圖標(biāo)一定要用矢量繪制，但是新手很容易犯的第一個(gè)錯(cuò)誤就是圖標(biāo)模糊的問(wèn)題，也不清楚為何會(huì)這樣。其實(shí)就是矢量邊緣模糊產(chǎn)生的問(wèn)題，也是個(gè)人繪制的不良習(xí)慣造成。避免這個(gè)問(wèn)題，必須在100%畫(huà)布上繪制圖形，而且不能直接推動(dòng)圖標(biāo)放大縮小，即使這樣改變大小了也要放大畫(huà)布調(diào)整路徑的錨點(diǎn)，反復(fù)查看及校正是否對(duì)齊1px網(wǎng)格，而不是0.1~0.9px，正是不滿(mǎn)1px格才會(huì)生產(chǎn)虛線(xiàn)。而圓形的繪制保證十字架4個(gè)邊緣點(diǎn)對(duì)準(zhǔn)就可以了。

2.4本文原創(chuàng)圖例

2)    斜形發(fā)虛

斜線(xiàn)也是會(huì)有模糊與精致之分的，不仔細(xì)對(duì)比其實(shí)是比較難看到問(wèn)題，可能很多人都會(huì)碰到圖形進(jìn)行傾斜效果時(shí)是有鋸齒的，那就是角度的處理問(wèn)題了，自己進(jìn)行多角度對(duì)比下試試，會(huì)發(fā)現(xiàn)哪一個(gè)角度最清晰。也可以將圖層進(jìn)行雙層疊加，會(huì)非常犀利哦~

2.5本文原創(chuàng)圖例

3)    像素不夠或多余

看下來(lái)都是像素發(fā)虛與清晰的原因都是一樣的，下面這個(gè)例子是箭頭在小尺寸情況下可點(diǎn)陣矢量像素繪制，如果是大尺寸（如上面最大的箭頭示例）可以直接鋼筆繪制。

2.6本文原創(chuàng)圖例

總結(jié)一下上面的處理方法，堅(jiān)持最少發(fā)虛原則：

2.7本文原創(chuàng)圖例

• l 比例協(xié)調(diào)

圖形內(nèi)部結(jié)構(gòu)要注意元素構(gòu)成之間的比例，有黃金比例分割也有感性的平衡方法。嚴(yán)謹(jǐn)?shù)膱D標(biāo)比例可參照蘋(píng)果IOS圖標(biāo)規(guī)范案例，打好內(nèi)部統(tǒng)一結(jié)構(gòu)線(xiàn)進(jìn)行圖形繪制和比例分配。

2.8來(lái)自蘋(píng)果圖標(biāo)及來(lái)自Seevi Kargwal圖例

如果頭眼昏花嫌麻煩，也可靠經(jīng)驗(yàn)感覺(jué)快速完成一個(gè)具有平衡感的圖標(biāo)。

2.9本文原創(chuàng)圖例

• l 視差平衡

同一個(gè)尺寸規(guī)格，但根據(jù)不同形狀的圖標(biāo)，會(huì)導(dǎo)致面積占比引起的視差大小不同，但要在參考尺寸范圍內(nèi)繪制進(jìn)行調(diào)整。以下圖標(biāo)示例都是撐滿(mǎn)方框邊緣繪制，按道理這好像是準(zhǔn)確的，但由于人的肉眼會(huì)有視差問(wèn)題，所以做的設(shè)計(jì)就要暫時(shí)拋開(kāi)科學(xué)，以人的真實(shí)情況去判斷再調(diào)整。

2.10本文原創(chuàng)圖例

【三】系列成型圖標(biāo)

能夠熟悉掌握完以上基礎(chǔ)要素，恭喜你可以大膽的去創(chuàng)造系列圖標(biāo)了，當(dāng)個(gè)數(shù)圖標(biāo)設(shè)計(jì)確定好后，接力的圖標(biāo)必須延展其風(fēng)格設(shè)定：造型規(guī)則、樣式、細(xì)節(jié)特征等要素統(tǒng)一設(shè)計(jì)–繁衍具同視覺(jué)與內(nèi)在含義屬性的圖標(biāo)。

3.1圖例來(lái)源于iconwerk

Ps：我非常欣賞iconwerk的圖標(biāo)設(shè)計(jì)，只因我在5年前發(fā)現(xiàn)他的剪影圖標(biāo)作品一直到現(xiàn)在都是那么愛(ài)。傳送門(mén)：http://iconwerk.de/iconwerk10/index.html

3.2本文原創(chuàng)圖例

3.3圖例來(lái)源于Yorlmar Campos

3.4圖例忘記來(lái)源于哪位設(shè)計(jì)師了

3.5圖例來(lái)源于Jee

【結(jié)尾】

值得注意的是在簡(jiǎn)約與裝飾之間的平衡要靠自己的把握，正是這個(gè)把握的度是考驗(yàn)設(shè)計(jì)師是否成熟的表現(xiàn)。進(jìn)階的優(yōu)秀圖標(biāo)是能夠平衡于識(shí)別性、簡(jiǎn)約與裝飾之間的琢磨，具有功能又具情感的。希望本文對(duì)新同學(xué)有幫助，歡迎一起探討和補(bǔ)充。

(本文出自騰訊CDC博客: http://cdc.tencent.com/?p=8239)