編者按：設(shè)計(jì)原則總是看起來(lái)簡(jiǎn)單抽象不言自明的，但是在細(xì)分的設(shè)計(jì)領(lǐng)域，這些原則其實(shí)有著各自不同適用情況，有著「特定的條件」。圖標(biāo)設(shè)計(jì)，就是如此。今天的這篇文章，來(lái)自專業(yè)的圖標(biāo)設(shè)計(jì)師 Helena Zhang，她結(jié)合自己制作 Phosphor 系列圖標(biāo)的經(jīng)驗(yàn)，來(lái)分享她對(duì)于圖標(biāo)設(shè)計(jì)原則的理解。
這些設(shè)計(jì)原則就像一份清晰的設(shè)計(jì)框架，或者設(shè)計(jì)自查表單一樣，幫你規(guī)避設(shè)計(jì)陷阱，讓你的設(shè)計(jì)成果更加出色。
創(chuàng)建高質(zhì)量系列圖標(biāo)，你得使用一套周到系統(tǒng)的方法，需要有訓(xùn)練有素的雙眼，大量的迭代學(xué)習(xí)，以及堅(jiān)持實(shí)踐，才能做到。下面，我將結(jié)合7項(xiàng)設(shè)計(jì)原則，和大量的實(shí)際案例，來(lái)為你詳細(xì)說(shuō)明，如何創(chuàng)建高質(zhì)量的圖標(biāo)。
掌握這些設(shè)計(jì)原則，就是創(chuàng)造出優(yōu)質(zhì)圖標(biāo)的關(guān)鍵。
圖標(biāo)存在的目的，是快速傳達(dá)概念。
下圖是 Prius Prime 儀表板上的圖標(biāo)。
在這一系列符號(hào)當(dāng)中，你能明白其中哪些的含義？對(duì)于這款車的駕駛者而言，可能會(huì)隨著使用時(shí)間的積累，逐漸明白其中一部分圖標(biāo)的含義。很大程度上，這是因?yàn)檫@些圖標(biāo)本身并不直觀。你可能需要對(duì)著說(shuō)明書(shū)，才能明白它們各自的含義。
我們可以從下面看到，圖標(biāo)是怎么一步步變得難以識(shí)別的：
當(dāng)圖標(biāo)開(kāi)始使用我們不熟悉的含義和隱喻時(shí)候，它就自然變得難以理解。從左往右數(shù)第三個(gè)圖標(biāo)，是安全帶的提示燈圖標(biāo)，當(dāng)它亮起的時(shí)候，意味著你沒(méi)有系好安全帶。這個(gè)含義相對(duì)直觀，你可能能夠很快掌握。而最右邊的這個(gè)「電動(dòng)助力轉(zhuǎn)向系統(tǒng)警告燈」含義就非常模糊了。
通常，不清晰的圖標(biāo)設(shè)計(jì)會(huì)讓你感到沮喪，但是對(duì)于開(kāi)車的人而言，含義模糊的圖標(biāo)意味著誤解，而誤解的結(jié)果可能是生命安全。
下面是我們更為熟悉的圖標(biāo)——喜愛(ài)、警告、音樂(lè)和向上。
上圖為 Phosphor Carbon 中的圖標(biāo)
向上的箭頭在很多場(chǎng)景當(dāng)中，都是非常清晰、實(shí)用的符號(hào)。
紐約地鐵中的標(biāo)識(shí)
最成功的圖標(biāo)設(shè)計(jì)，不僅僅是讓圖標(biāo)本身易于理解，而且對(duì)于不同的文化背景、不同年齡段、不同知識(shí)背景的人都能理解，只有做到這樣才行。
如果你想要表達(dá)的信息過(guò)于抽象，那么單獨(dú)使用圖標(biāo)，可能不是最清晰的解決方案，應(yīng)當(dāng)將圖標(biāo)和文本標(biāo)簽結(jié)合起來(lái)使用。
有了易于理解的圖標(biāo)之后，你需要確保它的可讀性足夠強(qiáng)。
Icons in the Amtrak mobile app
由于細(xì)節(jié)太過(guò)精細(xì)，很難讓 Amtrak 的圖標(biāo)被清晰地感知到。
Transit 應(yīng)用圖標(biāo)也有相同的問(wèn)題。它們的剪貼板這個(gè)圖標(biāo)中的細(xì)節(jié)很難看清：
Icons in the Transit mobile app
稍加調(diào)整之后，好了很多：
Adjusted clipboard icon
當(dāng)你在處理圖標(biāo)中多個(gè)不同的圖形元素的時(shí)候，應(yīng)該確保其中的空間留足。太細(xì)小的筆觸細(xì)節(jié)、更多的信息量會(huì)讓圖標(biāo)顯得更加難以閱讀。
Google Maps 的公交車圖標(biāo)就非常的出色——它看起來(lái)足夠小，但是可讀性也很強(qiáng)。
Google Map icons
確保每個(gè)圖標(biāo)都感覺(jué)平衡，盡量進(jìn)行視覺(jué)對(duì)齊
不平衡的播放圖標(biāo)
Unbalanced play icon
在這個(gè)播放圖標(biāo)當(dāng)中，盡管三角形被放置在中間位置，但是它并沒(méi)有視覺(jué)對(duì)齊，我們的眼睛看到的時(shí)候，會(huì)覺(jué)得中間的三角形說(shuō)向左靠的。三角形靠左的這一邊在視覺(jué)上更重，因此它應(yīng)該向右移動(dòng)一點(diǎn)來(lái)確保平衡。
就像字體排版設(shè)計(jì)師，他們也經(jīng)常會(huì)微調(diào)文字的布局來(lái)確保視覺(jué)平衡。比如字母 i 和 j 頂上的小圓點(diǎn)會(huì)偏移，而字母 O 的上下部分則為稍微超出邊界，來(lái)確保字體的平衡。
設(shè)計(jì)的時(shí)候，適當(dāng)?shù)奈⒄{(diào)就能達(dá)到平衡的效果。
Balanced play icon
明顯更好了。
要點(diǎn)：不要單純的相信數(shù)據(jù)，要用你的雙眼來(lái)進(jìn)行檢查和修正。
用盡可能少的詞匯來(lái)進(jìn)行表達(dá)和描述，這樣會(huì)更加優(yōu)雅高效。
「將你所學(xué)的知識(shí)分享出去，可以增強(qiáng)你對(duì)于這門學(xué)科的理解?！?/span>
Material Design 在他們的導(dǎo)視系統(tǒng)中，使用的圖標(biāo)大都足夠簡(jiǎn)潔，他們善用圖標(biāo)而是說(shuō)話：
這是一個(gè)復(fù)雜的船的圖標(biāo)：
它還有更為簡(jiǎn)約的版本：
Succinct boat icon (Source: Material)
簡(jiǎn)潔是圖標(biāo)設(shè)計(jì)的精髓之一，因?yàn)槲覀兘?jīng)常需要在很小的屏幕上操作，圖標(biāo)可以傳達(dá)很多信息，而不同文本或者其他復(fù)雜的內(nèi)容。
在用戶界面當(dāng)中，簡(jiǎn)約準(zhǔn)確的設(shè)計(jì)風(fēng)格能夠凸顯重點(diǎn)，讓內(nèi)容發(fā)揮效用。Telegram 的圖標(biāo)設(shè)計(jì)，就非常的簡(jiǎn)約有趣：
Telegram icons
有的時(shí)候，UI圖標(biāo)會(huì)選用更偏向插畫(huà)風(fēng)的樣式。下面這些關(guān)于美食的圖標(biāo)就設(shè)計(jì)得非常令人愉悅，代表泰國(guó)菜的圖標(biāo)中，蝦的描繪就非常傳神：
Yelp icons by Scott Tusk
圖標(biāo)可以適用于各種不同的硬件平臺(tái)，手機(jī)、 電腦、平板，適當(dāng)?shù)男畔⒘恳庖馕吨O(shè)計(jì)師可以在色彩、層次縱深上，有更大的操作空間。因?yàn)閳D標(biāo)本身會(huì)應(yīng)用于特定的APP 或者網(wǎng)站當(dāng)中，因此圖標(biāo)可以適時(shí)地凸顯品牌和產(chǎn)品特征。
iOS 平臺(tái)上的 Procreate 、火狐和 Netflix 的圖標(biāo)
為了讓圖標(biāo)家族顯得更加和諧，始終保證相同的樣式和設(shè)計(jì)規(guī)則
在 iOS 13 之前，蘋果的圖標(biāo)設(shè)計(jì)有著各種不同的粗細(xì)筆觸，不同的填充樣式，大小也各不相同：
仔細(xì)看看這套圖標(biāo)，是不是有的圖標(biāo)看起來(lái)比其他的更重？
任何圖標(biāo)都有著相應(yīng)的視覺(jué)重量。而視覺(jué)重量取決于圖標(biāo)筆觸的粗細(xì)、填充模式、大小和形狀這幾個(gè)屬性。而圖標(biāo)設(shè)計(jì)的難點(diǎn)就在于，如何控制所有的這些參數(shù)，做到整體的一致性。
蘋果公司最近引入了 SF Symbols 這個(gè)功能，將圖標(biāo)直接制作成為圖標(biāo)字體，在這套字體當(dāng)中，圖標(biāo)有 9 種不同的「字重」和3種不同的的風(fēng)格（也許有點(diǎn)復(fù)雜，但是絕對(duì)充分夠用）。從圖標(biāo)到符號(hào)，在填充模式、筆觸輪廓等多個(gè)不同的屬性上，確保你能挑出感覺(jué)更加和諧的圖標(biāo)。
Icons from Apple’s SF Symbols
對(duì)于一個(gè)大型的成套圖標(biāo)而言，保持一致性并不是一件容易的事情，尤其當(dāng)這套圖標(biāo)涉及到多個(gè)制作者的時(shí)候。遵循清晰的原則和規(guī)范在此時(shí)上至關(guān)重要的。
這套 Phosphor 圖標(biāo)是由我和另一位朋友共同制作并嚴(yán)格測(cè)試的，我們使用一套準(zhǔn)則確保這 700 個(gè)圖標(biāo)保持一致性。盡管每個(gè)形狀都不盡相同，但是它們給人的整體視覺(jué)重量是完全相同的，并且很好地相互組合到一起：
Subset of the Phosphor Carbon icon family
每套圖標(biāo)都應(yīng)當(dāng)尤其獨(dú)有的風(fēng)格和氣質(zhì)。是什么讓它們與眾不同？它們對(duì)于品牌是否有所助益？它們會(huì)給人什么樣的情緒？
Waze icons
Waze 大受歡迎的用戶界面，很大程度上是它本身所使用的圖標(biāo)設(shè)計(jì)所造就的。這些用色跳脫斑斕的圖標(biāo)，仿佛在說(shuō)「我們就是特立獨(dú)行！」
Twitter 的圖標(biāo)是柔和、清晰明亮的：
Sketch 的圖標(biāo)則是精致而通透的：
Freemojis 的圖標(biāo)是可可愛(ài)愛(ài)的：
而這些 Android 的圖標(biāo)則風(fēng)格各異，抽象風(fēng)、像素風(fēng)、霓虹風(fēng)，不一而足：
完美地繪制了整套圖標(biāo)之后，你的工作并沒(méi)有完成。接下來(lái)，你需要繼續(xù)做測(cè)試和其他的準(zhǔn)備工作，比如讓參與圖標(biāo)制作的志愿者可以更好地參與后續(xù)的制作和完善，讓設(shè)計(jì)師在日常設(shè)計(jì)工作當(dāng)中使用和測(cè)試，在數(shù)字屏幕和印刷品上應(yīng)用確保效果，讓開(kāi)發(fā)者將它們集成到其他的服務(wù)當(dāng)中，確保能夠應(yīng)用。
一套高質(zhì)量的圖標(biāo)，需要經(jīng)過(guò)良好的組織、記錄，并且在不同的應(yīng)用場(chǎng)景中進(jìn)行測(cè)試，并且最好能夠得到個(gè)性化圖標(biāo)制作工具的支持。
7.1、組織性
你需要確保圖標(biāo)集的整齊規(guī)范，有合理的命名，便于查找，并且想清楚以什么樣的方式來(lái)進(jìn)行分類。按照字母順序？按照大小，還是類型？
這套 Nucleo Sketch 圖標(biāo)，是按照也沒(méi)類型來(lái)進(jìn)行組織分類的
7.2、有據(jù)可查
你需要闡明整套圖標(biāo)的核心原則：
我以我所制作的 Phosphor 系列圖標(biāo)為例（和以上原則內(nèi)容有重復(fù)）來(lái)進(jìn)行說(shuō)明：
下面是技術(shù)規(guī)則。我還是以 Phosphor 圖標(biāo)作為返利：
按照這這樣的步驟來(lái)進(jìn)行設(shè)計(jì)，并根據(jù)需求來(lái)公開(kāi)相應(yīng)的文檔，就像下面這樣：
7.3、進(jìn)行測(cè)試
檢查一致性。確保圖標(biāo)在不同場(chǎng)合可以使用，并且尺寸合理。確保它們和大型是視覺(jué)系統(tǒng)能夠協(xié)調(diào)存在。
將圖標(biāo)排列在一起，并且按照以上的 7 個(gè)原則來(lái)進(jìn)行檢測(cè)。
Phosphor 的品質(zhì)控制流程中所用到的測(cè)試表。
7.4、定制化工具
最后，如果你有足夠的資源，可以開(kāi)發(fā)相應(yīng)的工具來(lái)方便用戶使用圖標(biāo)。
Material Design 讓用戶可以通過(guò)自定義庫(kù)來(lái)訪問(wèn)圖標(biāo)，搜索文件，選擇喜歡的格式、配色、大小和主題。
Font Awesome 的圖標(biāo)設(shè)計(jì)并沒(méi)有完全遵循上面所提到的全部原則，但是它依然是目前來(lái)說(shuō)最易用的圖標(biāo)集。它提供的功能甚至超出了以上提到的范疇：它支持前端框架、CDN、圖標(biāo)字體以及 SVG。
下面是一些額外的圖標(biāo)素材資源。
7.5、資源
這個(gè)圖標(biāo)合集項(xiàng)目雖然在質(zhì)量上參差不齊，但卻是非常適合拿來(lái)搜集靈感、作為參考好地方。
Icon Managers
這是一款來(lái)自 Nucleo 的應(yīng)用程序，你可以導(dǎo)入圖標(biāo)集，查看，修改，導(dǎo)出，非常實(shí)用。
文章來(lái)源：優(yōu)設(shè)網(wǎng) 作者：Helena Zhang
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
如何打造視覺(jué)平衡：正確的尺寸+視覺(jué)對(duì)齊+完美的圓角修飾。
我們的眼睛很奇怪，經(jīng)常誤導(dǎo)我們。但如果你知道人類視覺(jué)的特殊性，就可以構(gòu)建更好的設(shè)計(jì)。
20 世紀(jì) 20 年代，格式塔的視覺(jué)感知理論得到了發(fā)展。它解釋了我們的眼睛如何處理不同的圖像以及我們的大腦如何解釋它們。你可能已經(jīng)聽(tīng)說(shuō)過(guò)諸如親近原則或共同命運(yùn)規(guī)則之類的話題，本文引用了格式塔理論的一些觀點(diǎn)，重點(diǎn)介紹了實(shí)踐方面而不是學(xué)術(shù)研究上的問(wèn)題。在底部有關(guān)于這個(gè)主題的相關(guān)推薦列表，有興趣的話可以瀏覽。
400 px 的正方形和 400 px 的圓哪一個(gè)更大？從幾何角度來(lái)說(shuō)，它們的寬和高是相等的。但看看下面的圖片，我們的眼睛立刻發(fā)現(xiàn)正方形大于圓。
下圖是帶有標(biāo)注的：
讓我們?cè)倏匆粡堈叫魏蛨A的圖。就視覺(jué)重量而言，它們相同嗎？
至少很難立即指出哪一個(gè)比較重，不足為奇，因?yàn)槲以黾恿藞A的直徑。
我重疊了第一個(gè)和第二個(gè)示例中的形狀。左圖，400 px 正方形的面積大于 400 px 圓的面積。這就是為什么我們?cè)谝曈X(jué)上看到它更大的原因。右邊，圓和正方形是平衡的，基本上它們的面積也相似，但是寬和高不同。
我們可以看到菱形、三角形具有同樣效果。為了在視覺(jué)上與正方形保持平衡，它們應(yīng)該更寬和更高，以使得它們的面積相似?；诿娣e的方法非常適合最簡(jiǎn)單的形狀。
在 icon 中怎么使用呢？
當(dāng)你創(chuàng)建一組圖標(biāo)時(shí)，重要的是要使它們保持平衡，以使圖標(biāo)不會(huì)顯得太突出或太小。如果我們直接把圖標(biāo)放在正方形內(nèi)，那么越像正方形的圖標(biāo)看起來(lái)就越大。
我建議補(bǔ)償不同形狀圖標(biāo)的重量，允許視覺(jué)上較小的圖標(biāo)懸掛在正方形外，并在視覺(jué)上較重的圖標(biāo)和正方形之間留出一些距離。
下面是一組修改過(guò)的圖標(biāo)：
現(xiàn)在了解了，為什么一個(gè)圖標(biāo)區(qū)域總是比圖標(biāo)主體大，只是為了讓非正方形圖標(biāo)適合它并且看起來(lái)不小于正方形圖標(biāo)。
檢查視覺(jué)平衡最簡(jiǎn)單的測(cè)試是模糊設(shè)計(jì)。如果你的圖標(biāo)變成相似的斑點(diǎn)，則它們具有形同的視覺(jué)權(quán)重。
例如，F(xiàn)acebook 和 Instagram 的圖標(biāo)是方形的，而 Twitter 的圖標(biāo)則是鳥(niǎo)的輪廓，Pinterest 則是一個(gè)環(huán)繞的「P」。這就是為什么 Twitter 和 Pinterest 的圖標(biāo)要大一點(diǎn)，以便于它們與 Facebook 和 Instagram 圖標(biāo)保持平衡。
視覺(jué)平衡的另一個(gè)例子是將文本框與圓形按鈕放在一起。如果按鈕的直徑等于文本框的高度，那么按鈕會(huì)顯得更小。當(dāng)你把它放大一點(diǎn)，整個(gè)結(jié)構(gòu)就會(huì)變得更加平衡。
但如果你改變按鈕的樣式，就不需要放大了。在下圖中，按鈕和文本框的高度是 80 px，但是右邊的按鈕視覺(jué)上看起來(lái)并沒(méi)有很弱，因?yàn)樗呛谏摹?/span>
Tips：
視覺(jué)對(duì)齊是視覺(jué)平衡主題的延續(xù)?？聪聢D：它們看起來(lái)一樣長(zhǎng)嗎？
以 px 為單位，答案是肯定的。但是，第一眼看上去，第一條要比第二條長(zhǎng)一些。
現(xiàn)在看下圖，有什么變化嗎？
我對(duì)第二條矩形應(yīng)用了視覺(jué)補(bǔ)償。允許尖峰值超過(guò)上條矩形長(zhǎng)度的 20 px，是補(bǔ)償峰值之間的間隙并使兩個(gè)形狀在視覺(jué)上相等。
還有一些特殊圖形的例子：
所以，如果你設(shè)計(jì)一張帶有折疊條紋和文字的海報(bào)，或者商品圖角標(biāo)設(shè)計(jì)時(shí)，請(qǐng)注意使它們達(dá)到視覺(jué)平衡。銳利的邊緣應(yīng)該超出形狀的其他部分。
文本和有背景的段落怎么對(duì)齊？這取決于背景的視覺(jué)密度。如果它很輕，你可以將突出顯示的段落與文本的其余部分對(duì)齊。
由于背景較淺，因此不會(huì)中斷正常的文本流。
對(duì)于深色背景，可以使用不同的方法。在圖片上，黑色背景與文本的其余部分對(duì)齊，而其中的白色文本以縮進(jìn)方式放置。
與淺色背景的情況不同，黑色背景具有較大的視覺(jué)重量，如果目標(biāo)是無(wú)縫瀏覽段落，則最好按照以下所示的方式對(duì)齊。
相同的原理同樣適用于按鈕和輸入字段。當(dāng)然這只是基于人類視覺(jué)感知的設(shè)計(jì)。
左側(cè)輸入字段的淺色背景可以超出輸入標(biāo)簽和輸入文本的范圍。「發(fā)送」按鈕的與輸入背景的右對(duì)齊，因?yàn)樵摪粹o較暗且從視覺(jué)角度看較重。
在右側(cè)，輸入具有實(shí)線邊框，當(dāng)用戶輸入的框內(nèi)有凹痕時(shí)，我將其與標(biāo)簽對(duì)齊。「發(fā)送」按鈕的側(cè)面為三角形。該按鈕向右移動(dòng)一點(diǎn)，看起來(lái)與上面的矩形輸入字段保持平衡。
在這里，我們探討另一個(gè)對(duì)齊問(wèn)題：文本和圖標(biāo)按鈕的對(duì)齊。下圖，文字看起來(lái)居中嗎？
秘訣在于，右邊是三角形，因此在右邊的按鈕上我將文本向左移動(dòng)了一點(diǎn)。此外，箭頭按鈕的寬度為 40 像素，看起來(lái)與矩形按鈕在視覺(jué)上相等。
文本按鈕不僅具有水平對(duì)齊，而且具有文本和背景的垂直對(duì)齊。我想講的第一種方法是在各種操作系統(tǒng)、站點(diǎn)和 APP 中使用的。它是基于字體的大寫字母的高度（即上限）對(duì)齊方式，它等于「 H」或「 I」的高度。
基本上，大寫字母上下的空間和按鈕的邊緣是相等的。這是有道理的，因?yàn)椴僮靼粹o通常以大寫字母書(shū)寫，并且英文字母的升序更多，上伸出部分（l，t，d，b，k，h）比下伸出部分（y，j，g，p ）多。
另一種方法是使用字體的小寫字母的高度（所謂的x高度）來(lái)對(duì)齊文本和背景。在 sans 和 sans serif 字體中，它等于字母「 x」的高度。
由于文本的主要視覺(jué)重量集中在小寫字母的區(qū)域，因此該方法也是可行的。
這些方法之間有什么區(qū)別嗎？有區(qū)別，但差異不大。
對(duì)于「取消」和「確定」（常用按鈕），由左列代表的上限高度方法肯定更好，因?yàn)椤溉∠箾](méi)有下垂部分（y，j，g，p ），并且「確定」都是大寫字母。
右欄中顯示的 x 高度方法僅對(duì)「同步」按鈕更好，該按鈕的名稱同時(shí)具有上下突出的元素；「取消」和「確定」兩個(gè)詞似乎位置太高了。
圖標(biāo)按鈕的情況與文本按鈕略有不同，讓我們?cè)趫A形背景上放一個(gè)「發(fā)送」圖標(biāo)。哪個(gè)看起來(lái)視覺(jué)更加平衡？
希望你已經(jīng)注意到左邊的那個(gè)有問(wèn)題。發(fā)生這種情況的原因是對(duì)齊方法不同。第一個(gè)選項(xiàng)將圖標(biāo)視為矩形，在某種程度上說(shuō)是正確的，因?yàn)楫?dāng)你將 SVG 或 PNG 文件給開(kāi)發(fā)人員時(shí)，它是一張矩形圖。右側(cè)顯示圖標(biāo)的位置，使其所有尖銳邊緣與圓形按鈕背景的距離相等。
如果為開(kāi)發(fā)輸出文件，則需要保留一些區(qū)域，以便他們可以使圖標(biāo)在背景上正確居中。
同樣「播放」按鈕也一樣，如果直接對(duì)齊這些形狀（圓角矩形和三角形），它們將看起來(lái)很奇怪。
如果要使三角形的視覺(jué)位置更好，則將其圍繞并使其與按鈕背景對(duì)齊會(huì)更好。
Tips：
還有什么比圓形更圓的圖形嗎？
我曾認(rèn)為沒(méi)有，但是正如我在本文開(kāi)頭所說(shuō)的那樣，我們的眼睛很奇怪，有時(shí)會(huì)欺騙我們。那么，下面圖片中哪個(gè)圓看起來(lái)最平滑？
我之前問(wèn)過(guò)的人在 3 號(hào)和 4 號(hào)之間進(jìn)行糾結(jié)。1 號(hào)和 2 號(hào)絕對(duì)太瘦了，5 號(hào)太豐滿了。如果我們將第三個(gè)和第四個(gè)變體（一個(gè)幾何圓和一個(gè)修改的圓）重疊在一起，我們會(huì)發(fā)現(xiàn)，后者比第一個(gè)重一些。
為了說(shuō)明我的意思，我從 Futura，Circe 和 Geometria 這三種著名的幾何字體中選取了字母「 o」。鑒于高質(zhì)量字體是基于人類的視覺(jué)感知構(gòu)建的，并且使用了復(fù)雜的視覺(jué)構(gòu)造系統(tǒng)，因此我認(rèn)為它們的圓形看起來(lái)比幾何形狀更圓。
讓我們將它們與幾何圓重疊。即使是最幾何圖形的 Futura 的「 o」也有四個(gè)突出部分。此外，Circe 和 Geometria 的字母比圓圈寬，但即使它們的高度和寬度相等，我們也可以看到這四個(gè)「肚子」好像小了。
因此，從視覺(jué)角度而言，修改后的圓（右側(cè)）看起來(lái)比幾何圓（左側(cè)）更「圓形」。
我們?nèi)绾问褂眠@種現(xiàn)象？當(dāng)然要進(jìn)行圓角處理。如果你在圖形編輯器中直接修改圓角，效果其實(shí)并不好。
人眼立即發(fā)現(xiàn)直線突然變成曲線的點(diǎn)，而且這種處理看起來(lái)并不自然。
考慮到我們的視覺(jué)感知，我修改了這個(gè)圓角。
這種嵌入具有超出幾何圓的額外區(qū)域，使得直線與曲線相交的點(diǎn)不那么明顯。
只是嘗試感受一下這些嵌入方法之間的差異。
現(xiàn)在，我們可以將這種方法應(yīng)用于圓形按鈕。
你可能已經(jīng)注意到，右側(cè)的按鈕具有更平滑的圓角倒角，并且你的眼睛更加舒適。
與 APP 圖標(biāo)相同，人們不只是使用標(biāo)準(zhǔn)的圓角整數(shù)來(lái)達(dá)到理想的效果。在深入探討此問(wèn)題前，讓我們看一下下面圖形的差異：
第一個(gè)是我在 Sketch 中創(chuàng)建的圓角矩形。第二個(gè)形狀是超橢圓形，也稱為 Lamé 曲線。它是由法國(guó)數(shù)學(xué)家加布里埃爾·拉梅（GabrielLamé）發(fā)現(xiàn)的，根據(jù)公式的不同，其范圍可能從四點(diǎn)星形到實(shí)際上看起來(lái)像是圓角正方形。
馬克·愛(ài)德華茲（Marc Edwards）提出了 Lamé 曲線的公式，該公式產(chǎn)生了平滑且視覺(jué)上完美的形狀。從 iOS 7 開(kāi)始的圖標(biāo)均基于此設(shè)計(jì)的。
后來(lái)，通過(guò)添加黃金比例和用于指導(dǎo)新圖標(biāo)設(shè)計(jì)者的網(wǎng)格來(lái)修改此形狀。
使用超橢圓等形狀的主要好處是其光滑的外觀。另一方面，這些非標(biāo)準(zhǔn)形狀很難到真實(shí)項(xiàng)目中。應(yīng)該將多個(gè) SVG 組合在一起，在代碼中包含特殊的公式或腳本，或者像 Apple 為其應(yīng)用程序圖標(biāo)那樣使用 PNG 掩碼。
至于設(shè)計(jì)過(guò)程本身，有一個(gè)簡(jiǎn)單的圓角修復(fù)方法。您需要調(diào)整合適的圓角度數(shù)。
銳角倒圓的差異更加明顯，這對(duì)于繪制道路或交通設(shè)計(jì)非常重要。
Tips：
有時(shí)，非幾何正方形看起來(lái)更像方形。你可能會(huì)想，「這是什么廢話？」 那么，你看下面的正方形？哪種形狀看起來(lái)更方形？
如果你選擇了左側(cè)的形狀，你就能感受到視覺(jué)差異的點(diǎn)。
文章來(lái)源：優(yōu)設(shè)網(wǎng) 作者：UX Talk
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
本文從圖標(biāo)的起源、定義到基礎(chǔ)的設(shè)計(jì)方法總結(jié)無(wú)一不包，還有大量的案例幫你理解布爾運(yùn)算，是新人設(shè)計(jì)師學(xué)習(xí)圖標(biāo)設(shè)計(jì)的必備干貨！
一說(shuō)到圖標(biāo)，我想您一定會(huì)覺(jué)得非常熟悉。圖標(biāo)，也稱為 icon 或 picto，是指有明確含義的圖形視覺(jué)語(yǔ)言。那么當(dāng)我們一提起圖標(biāo)設(shè)計(jì)，您的腦中會(huì)想起哪個(gè)圖標(biāo)來(lái)呢？有可能您想起的是微信APP ，由兩個(gè)白色氣泡組成的啟動(dòng)圖標(biāo)，或者是我們每天使用的 APP 中的那些返回、關(guān)閉等系統(tǒng)圖標(biāo)，也可能是商場(chǎng)導(dǎo)視里的衛(wèi)生間圖標(biāo)等。沒(méi)錯(cuò)，圖標(biāo)的形式有很多種，它可以應(yīng)用在很多場(chǎng)景中，并且表現(xiàn)方式非常豐富：有線的、有面的、也有擬物的等等。圖標(biāo)的歷史可以追溯到象形文字（Pictogram），我們的祖先在發(fā)明文字之前就使用圖標(biāo)記錄一天的生活了。聽(tīng)著是不是不可思議呢？從亙古時(shí)代的象形文字開(kāi)始，我們的祖先就偏愛(ài)使用這種抽象的圖形來(lái)表達(dá)意思了。在平面設(shè)計(jì)領(lǐng)域的商標(biāo)其實(shí)也是一種圖標(biāo)，平面設(shè)計(jì)里的視覺(jué)導(dǎo)視（例如衛(wèi)生間的圖標(biāo)）也有圖標(biāo)的應(yīng)用，所以圖標(biāo)在我們的生活中應(yīng)用非常廣泛。
△ 生活中隨處可見(jiàn)的圖標(biāo)
在計(jì)算機(jī)時(shí)代，從80年代的施樂(lè)公司界面中的單色圖標(biāo)開(kāi)始，圖標(biāo)就開(kāi)始出現(xiàn)在屏幕之中了，圖標(biāo)較編程語(yǔ)言更容易被大眾理解。到了后來(lái)從 iMac 到 iPhone 引領(lǐng)的擬物圖標(biāo)更是開(kāi)啟了一個(gè)絢麗的圖標(biāo)設(shè)計(jì)時(shí)代。擬物時(shí)代盛行也帶來(lái)了一些麻煩：擬物圖標(biāo)的質(zhì)感、光影會(huì)吸引走用戶的注意力，我們稱之為「視覺(jué)噪音」。于是 UI設(shè)計(jì)師開(kāi)始探索更新的表現(xiàn)形式來(lái)設(shè)計(jì)界面中的圖標(biāo)。扁平圖標(biāo)發(fā)展史上有過(guò)很多次嘗試，比如微軟引領(lǐng)的 Metro風(fēng)格中的圖標(biāo)設(shè)計(jì)和 Google 引領(lǐng)的扁平設(shè)計(jì)風(fēng)格中的長(zhǎng)投影風(fēng)格圖標(biāo)，但由于它們表現(xiàn)形式太過(guò)于抽象、缺乏情感的傳遞，并沒(méi)有獲得用戶的垂青。而我們現(xiàn)在界面設(shè)計(jì)中的圖標(biāo)設(shè)計(jì)是一種「輕擬物」或「微扁平」的風(fēng)格：在面積比較小的區(qū)域我們使用扁平圖標(biāo)或線形圖標(biāo)；在面積比較大的區(qū)域我們會(huì)使用加入漸變甚至輕質(zhì)感的圖標(biāo)。（關(guān)于圖標(biāo)風(fēng)格的變化，可以參考這個(gè)網(wǎng)站：https://historyoficons.com）。
△ 不同的圖標(biāo)設(shè)計(jì)風(fēng)格
如今我們界面中的圖標(biāo)可謂非常豐富了，如果根據(jù) Material Design 對(duì)圖標(biāo)的分類，UI設(shè)計(jì)中的圖標(biāo)可以分為帶有品牌屬性和特性的產(chǎn)品圖標(biāo)、有功能指示作用的系統(tǒng)圖標(biāo)兩種圖標(biāo)，下面我們將針對(duì)于這兩種圖標(biāo)進(jìn)行研究。
產(chǎn)品圖標(biāo)是我們?cè)谠O(shè)計(jì)界面的時(shí)候體現(xiàn)品牌調(diào)性和特性的圖標(biāo)。通過(guò)產(chǎn)品圖標(biāo)，用戶就可以大概感知這個(gè)產(chǎn)品主要是做什么的。比如微信的產(chǎn)品圖標(biāo)是兩個(gè)對(duì)話氣泡，暗示了這是一款社交APP；再比如 ofo 的產(chǎn)品圖標(biāo)是字母ofo 的組合，同時(shí)也是一輛自行車，這暗示了這款產(chǎn)品是共享單車的APP；再比如 KEEP 的字母「K」的圖標(biāo)，像極了一個(gè)在抬腿做運(yùn)動(dòng)的人，暗示了這是一個(gè)運(yùn)動(dòng)APP。
同時(shí)有些產(chǎn)品也依靠自身已經(jīng)在用戶心中產(chǎn)生的品牌來(lái)直接設(shè)計(jì)產(chǎn)品圖標(biāo)，比如淘寶APP 的產(chǎn)品圖標(biāo)就是一個(gè)「淘」字；支付寶的產(chǎn)品圖標(biāo)就是一個(gè)「支」字。優(yōu)秀的產(chǎn)品圖標(biāo)都會(huì)在我們心中打上一個(gè)烙印，當(dāng)我們看到這些圖形、配色時(shí)，腦中會(huì)立即想起來(lái)它們的功能和特點(diǎn)。產(chǎn)品圖標(biāo)除了在手機(jī)屏幕中作為啟動(dòng)圖標(biāo)，也會(huì)出現(xiàn)在閃屏、情感化設(shè)計(jì)、「關(guān)于我們」界面等場(chǎng)景中，所以也要有一定的靈活性，在設(shè)計(jì)上要以簡(jiǎn)單、大膽、友好的方式傳達(dá)產(chǎn)品的核心理念和意圖。產(chǎn)品圖標(biāo)很類似在企業(yè)識(shí)別系統(tǒng)（VI）里的 logo，需要讓用戶一眼看到它就能夠與腦中的產(chǎn)品相關(guān)聯(lián)。所以設(shè)計(jì)一個(gè)優(yōu)秀的產(chǎn)品圖標(biāo)對(duì)于任何產(chǎn)品來(lái)說(shuō)都是非常重要的。
產(chǎn)品圖標(biāo)有不同的風(fēng)格，這些風(fēng)格有可能很擬物，也有可能很扁平；有可能很抽象，也可能很具象。通過(guò)不同的設(shè)計(jì)風(fēng)格可以更加標(biāo)新立異，從而被用戶記住。讓用戶記住我們的圖標(biāo)真是一件非常重要的事兒，要知道，每個(gè)手機(jī)都像是一把瑞士軍刀，它有無(wú)數(shù)個(gè)功能，而我們的產(chǎn)品只是萬(wàn)種功能中的一個(gè)。用戶不可能記住手機(jī)里所有的 APP 都是什么，所以能在第一時(shí)間取得好感和記憶非常重要，產(chǎn)品圖標(biāo)設(shè)計(jì)得好看并且容易被人記住就成了非常重要的任務(wù)。產(chǎn)品圖標(biāo)的主要風(fēng)格有以下幾種。
文字風(fēng)格
文字是最直白的信息，而且不容易被曲解。所以很多國(guó)內(nèi)的產(chǎn)品都會(huì)使用文字來(lái)作為自己的產(chǎn)品圖標(biāo)。比如：支付寶、淘寶、今日頭條、OFO、愛(ài)奇藝、知乎、網(wǎng)易新聞、毛豆新車等。這么做也有它的問(wèn)題，比如文字給人美的感受不如圖形，因?yàn)槲淖中枰喿x而不是觀察。并且移動(dòng)端設(shè)備都會(huì)在啟動(dòng)圖標(biāo)之下加上一行輔助文字，如果圖標(biāo)上的文字和下面的輔助文字完全重合，會(huì)顯得像介紹了自己兩遍一樣。如果您決意要使用文字作為產(chǎn)品圖標(biāo)，且是中文的話，那么一定要記得文字最好為1-2個(gè)，并且不應(yīng)該是產(chǎn)品的全稱。如果是英文的話，最好是首字母而不是產(chǎn)品全稱。當(dāng)然不管是中文還是英文都需要選擇合適氣質(zhì)的字體并做一定的變化。
單讀：?jiǎn)巫x是一個(gè)偏文藝的閱讀產(chǎn)品，所以產(chǎn)品圖標(biāo)使用了黑白配色和兩個(gè)非常有文藝氣息的宋體繁體字，這樣的設(shè)計(jì)符合產(chǎn)品調(diào)性，傳遞給用戶一種產(chǎn)品的文藝氣息。
今日頭條：今日頭條是一款優(yōu)秀的新聞APP。它的圖標(biāo)非常直白，一張報(bào)紙上有紅色的頭條標(biāo)題，頭條使用了非常粗的黑體字，非常顯眼。
淘寶：淘寶采用了一個(gè)俏皮的「淘」字作為 icon 的主要元素，并且背景顏色是令人興奮和刺激的橘黃色，凸顯了電商屬性。并且這個(gè)字使用了很久，用戶對(duì)此有一定的品牌認(rèn)知。
愛(ài)奇藝：愛(ài)奇藝的 icon 采用了英文字母iQIYI 和上下邊框相組合的形式。整體看來(lái)像是一個(gè)電視機(jī)，強(qiáng)調(diào)了品牌屬性和功能，并且使用了在視頻領(lǐng)域非常有識(shí)別性的綠色，讓人一看便知這是愛(ài)奇藝了。
△ 單讀、今日頭條、淘寶、愛(ài)奇藝的產(chǎn)品圖標(biāo)
如果您的品牌使用英文作為產(chǎn)品圖標(biāo)，我們?cè)谠O(shè)計(jì)的時(shí)候要格外注意英文字母之間的正負(fù)空間關(guān)系以及不同西文字體的不同氣質(zhì)。
ONE：雖然是中文產(chǎn)品，但是 ONE 的icon 顯得非常的高端和小眾。ONE 三個(gè)字母的正負(fù)空間關(guān)系做了微調(diào)，并且選擇了無(wú)襯線字體來(lái)體現(xiàn)時(shí)尚感。下面的小字是一個(gè) slogan，并且和 ONE 的寬度一致。
Pinterest：Pinterest 的產(chǎn)品圖標(biāo)是一個(gè)手寫體的P，并且用紅色圓形作為陪襯。這樣一個(gè)字母作為 ICON 的好處就是方便用戶記憶。
HULU：HULU 是一個(gè)國(guó)外視頻產(chǎn)品，它的產(chǎn)品圖標(biāo)顏色很鮮艷，字母本身有韻律感，所以沒(méi)有做過(guò)多的設(shè)計(jì)。
Facebook：作為一個(gè)社交產(chǎn)品，F(xiàn)acebook 的產(chǎn)品圖標(biāo)同樣采用了一個(gè)字母代表較長(zhǎng)的單詞。
△ ONE、Pinterest、HULU、Facebook的產(chǎn)品圖標(biāo)
正負(fù)形與隱喻風(fēng)格
圖標(biāo)的設(shè)計(jì)可以使用正負(fù)形和隱喻，來(lái)讓圖標(biāo)更加有耐人尋味的看點(diǎn)。
抖音：抖音的產(chǎn)品圖標(biāo)是一個(gè)音符，但是不知道大家是否發(fā)現(xiàn)，下面圓形的負(fù)空間也是一個(gè)音符，所以顯得非常巧妙。為了增加動(dòng)感還加了紅和藍(lán)綠色的類似3D的動(dòng)感效果。
Keep：Keep 產(chǎn)品圖標(biāo)是一個(gè)K，但是同時(shí)也是一個(gè)人抬著腿正在鍛煉。
Skillshare：Skillshare 是一個(gè)技能交換平臺(tái)，第一眼看是兩個(gè)手像太極一樣交換著技能，同時(shí)也是該產(chǎn)品的首字母：S。
△ 抖音、Keep、Skillshare、OFO的產(chǎn)品圖標(biāo)
折紙風(fēng)格
折紙的效果會(huì)讓人感覺(jué)很立體，所以很多產(chǎn)品也選擇了折紙效果（比較扁平的手法）來(lái)設(shè)計(jì)產(chǎn)品圖標(biāo)。
Calendar：這個(gè)產(chǎn)品的產(chǎn)品圖標(biāo)是一個(gè)正在翻頁(yè)的日歷，非常簡(jiǎn)潔明了。
Snapseed：除了扁平的設(shè)計(jì)之外，使用了長(zhǎng)投影的設(shè)計(jì)風(fēng)格。這個(gè)長(zhǎng)投影也是扁平化的設(shè)計(jì)。
Netflix：Netflix 的產(chǎn)品圖標(biāo)是該產(chǎn)品的首字母N，這個(gè) N 用了一些陰影來(lái)表示立體感。
繪聲繪影：同樣是用了長(zhǎng)投影和折紙效果，顯得非常清新。
△ Calendar、Snapseed、Netflix、繪聲繪影的產(chǎn)品圖標(biāo)
填充圖標(biāo)風(fēng)格
產(chǎn)品圖標(biāo)使用填充圖標(biāo)風(fēng)格是非常合適的。填充圖標(biāo)風(fēng)格具有簡(jiǎn)潔和識(shí)別性強(qiáng)的特點(diǎn)。這種 ICON 的可擴(kuò)展性更高，比如在一些特殊節(jié)日時(shí)可以用手繪、拼貼等形式來(lái)做輔助圖形。所以很多公司都鐘愛(ài)填充圖標(biāo)風(fēng)格。
Lucking：這是一個(gè)線上咖啡外賣的產(chǎn)品。它的 APP圖標(biāo)使用了一個(gè)鹿回頭的造型。這個(gè)鹿造型簡(jiǎn)潔，非常有識(shí)別性。
Tinder：這是一個(gè)國(guó)外社交APP，通過(guò)一個(gè)火的填充圖標(biāo)讓人第一時(shí)間記住這個(gè)產(chǎn)品。
youtube：這是國(guó)外著名視頻APP，它的產(chǎn)品圖標(biāo)同樣使用了填充圖標(biāo)風(fēng)格，是一個(gè)有電視機(jī)隱喻的圓角矩形，并且中心是一個(gè)播放鍵，簡(jiǎn)明扼要地說(shuō)明了這個(gè)產(chǎn)品的功能。
Twitter：國(guó)外著名社交APP，它的 icon 同樣使用了填充圖標(biāo)風(fēng)格，非常簡(jiǎn)潔好記。
△ Lucking、Tinder、Youtube、Twitter的產(chǎn)品圖標(biāo)
線性風(fēng)格
由于目前設(shè)計(jì)流行趨勢(shì)，很多產(chǎn)品圖標(biāo)都會(huì)采用扁平的設(shè)計(jì)風(fēng)格。扁平除了填充的圖標(biāo)之外，還有一種非常流行的形式——線性風(fēng)格。線性風(fēng)格一定要注意不要太細(xì)，因?yàn)槭謾C(jī)和電腦設(shè)計(jì)環(huán)境顯示尺寸不同，如果我們做得太細(xì)，那么在手機(jī)上看會(huì)非常尖銳，顯得不太好點(diǎn)擊。
Airbnb：Airbnb 的背景是一個(gè)微漸變，線性風(fēng)格是一個(gè)曲線組成的 A，同時(shí)也是一個(gè)小蜜蜂。
LOFTCam：為了凸顯文藝產(chǎn)品調(diào)性，使用了偏細(xì)的線條，同時(shí)使用了兩種主題色。
NextDay：同樣非常文藝的產(chǎn)品，使用了比較抽象的手法。這個(gè) ICON 是一個(gè)牛奶，突出了這個(gè)產(chǎn)品必須今天看，否則就如牛奶一樣會(huì)過(guò)期。
VUE：這是一個(gè)攝影產(chǎn)品，同樣應(yīng)用了黑色的微漸變，前面是非常前衛(wèi)的45度長(zhǎng)短不同的線。
△ Airbnb、LOFTCam、NextDay、VUE的產(chǎn)品圖標(biāo)
LOWPOLY風(fēng)格
我曾介紹過(guò) LOWPOLY 這種設(shè)計(jì)風(fēng)格，這種風(fēng)格如果應(yīng)用在產(chǎn)品圖標(biāo)上同樣非常搶眼，因?yàn)橛脩舻氖謾C(jī)上可能安裝了很多 APP，那么第一眼掃過(guò)去一定會(huì)注意到最亮眼的圖標(biāo)。而 LOWPOLY 因?yàn)楸旧碓煨偷莫?dú)特性非常吸引眼球。當(dāng)然 LOWPOLY 也有它的問(wèn)題，比如容易讓圖標(biāo)失去細(xì)節(jié)等，所以很多產(chǎn)品圖標(biāo)都是使用 LOWPOLY 作為圖形的背景。
潮自拍：潮自拍使用了暖色鄰近色漸變的 LOWPOLY 作為背景，前景使用了一個(gè)很潮的S。
潘通色：潘通色本身的最大特征就是色卡，所以使用了 LOWPOLY 的形式。
美妝相機(jī)：通常 LOWPOLY 的形式是方塊，而美妝相機(jī)使用了三角作為基礎(chǔ)元素，很特別。
人人：人人的產(chǎn)品圖標(biāo)使用了不同的矩形斜度45°，增加了設(shè)計(jì)的速度感。
△ 潮自拍、潘通色、美妝相機(jī)、人人的產(chǎn)品圖標(biāo)
微漸變風(fēng)格
微漸變也是非常常見(jiàn)的表現(xiàn)手法。在擬物被扁平替代以后，我們會(huì)發(fā)現(xiàn)無(wú)法表達(dá)空間上的 Z軸。所以用輕微的漸變表現(xiàn)圖片的深度非常流行。我認(rèn)為微漸變可能是眾多圖標(biāo)設(shè)計(jì)風(fēng)格中最有競(jìng)爭(zhēng)力的一種。
每日優(yōu)鮮：每日優(yōu)鮮在背景上用了很多炫彩的圓球，由于促銷時(shí)段在原有圖標(biāo)上增加了一個(gè)雙十一的小標(biāo)識(shí)，在手機(jī)中非常搶眼。
陌陌：陌陌圖標(biāo)如果設(shè)計(jì)成扁平你還會(huì)注意到它嗎？使用線性圖標(biāo)會(huì)使得圖標(biāo)厚度感不夠，而微漸變可以非常好地解決這個(gè)問(wèn)題。
全民K歌：使用了紫紅色的漸變來(lái)塑造一只鸚鵡，如果遇到其他使用場(chǎng)景可以使用扁平版本，這樣會(huì)讓產(chǎn)品圖標(biāo)的使用更加靈活。
Mindnode：這款腦圖軟件的產(chǎn)品圖標(biāo)使用了三組鄰近色的漸變，同時(shí)使用了非常微妙的陰影。
△ 每日優(yōu)鮮、陌陌、全民K歌、Mindnode的產(chǎn)品圖標(biāo)
卡通風(fēng)格
卡通風(fēng)格的產(chǎn)品圖標(biāo)會(huì)讓用戶更有好感，所以我們可以為產(chǎn)品設(shè)計(jì)一個(gè)可愛(ài)的卡通角色。好多決策者會(huì)認(rèn)為卡通是一種低齡的審美，其實(shí)是錯(cuò)誤的?？ㄍ梢哉f(shuō)是一種通吃的風(fēng)格，比如騰訊就是以一個(gè)企鵝作為品牌形象開(kāi)始拓展自己的版圖。而卡通本身有不同的風(fēng)格，比如擬物類的卡通、扁平類的卡通等，也會(huì)給人不同的感受。所以如果我們的產(chǎn)品要使用卡通作為產(chǎn)品圖標(biāo)，最好以目標(biāo)用戶群的喜好作為標(biāo)尺。
開(kāi)心消消樂(lè)：開(kāi)心消消樂(lè)是一個(gè)休閑游戲，游戲類APP 的產(chǎn)品圖標(biāo)通常是使用擬物風(fēng)格，這樣可以最大地吸引玩家的注意力和興趣。
映客：映客是直播APP，通常用戶年齡不是很大，所以使用了一個(gè)很可愛(ài)的貓頭鷹作為產(chǎn)品圖標(biāo)。
Waze：Waze 的產(chǎn)品圖標(biāo)不僅可愛(ài)而且突出了 Waze 的地圖查找功能。
BOO!：BOO! 是一個(gè)兒童社交產(chǎn)品，用戶比較低齡，所以更適合使用可愛(ài)的卡通作為圖標(biāo)。
△ 開(kāi)心消消樂(lè)、映客、Waze、BOO!的產(chǎn)品圖標(biāo)
如果我們想設(shè)計(jì)一個(gè)小圖標(biāo)，那么我們可以把畫(huà)布放大到400％來(lái)設(shè)計(jì)。同時(shí)可以使用網(wǎng)格和參考線來(lái)作為我們?cè)O(shè)計(jì)的輔助。網(wǎng)格在很多軟件里都有，比如在 Illustrator 中點(diǎn)擊視圖 > 網(wǎng)格，即可開(kāi)啟網(wǎng)格了。參考線模板則需要下載第三方設(shè)計(jì)的模板，比如 Material Design 的參考線模板就有正方形、圓形、圓形和長(zhǎng)方形結(jié)合等不同形式。如果對(duì)齊模板中的形狀，即可得到面積相等的長(zhǎng)方形、正方形、圓形。這對(duì)我們構(gòu)建視覺(jué)上面積相等的圖標(biāo)很有益處。
△ 網(wǎng)格和參考線
△ 不同形狀的網(wǎng)格布局
△ 在網(wǎng)格的輔助下可以設(shè)計(jì)出大小均衡的圖標(biāo)
蘋果啟動(dòng)圖標(biāo)尺寸
蘋果需要很多尺寸的圖標(biāo)用在不同的場(chǎng)景上，比如說(shuō)在網(wǎng)頁(yè)端打開(kāi)iTunes會(huì)使用512px的大圖標(biāo)，而在手機(jī)、iPad桌面上的圖標(biāo)大小也不同。除了尺寸不同，這些圖標(biāo)的圓角也有不同的數(shù)值。為了簡(jiǎn)化這部分的難度，蘋果為開(kāi)發(fā)者提供了模板，有了模板就不用記那么多東西啦。蘋果官方HIG 下載的這套資源中，有 Template-AppIcons-iOS 這個(gè)文件，這個(gè)文件提供了 PS、Sketch、XD等不同格式。我比較推薦使用 PS 的格式。
打開(kāi)這個(gè)文件，用我們自己設(shè)計(jì)的啟動(dòng)圖標(biāo)替換掉任意智能對(duì)象里的內(nèi)容。那么打開(kāi)智能對(duì)象就是一個(gè)1024x1024px的矩形畫(huà)布，把我們的產(chǎn)品圖標(biāo)放在這里，保存這個(gè)智能對(duì)象再關(guān)閉它就可以了。這時(shí)，你會(huì)發(fā)現(xiàn)所有尺寸的圖標(biāo)都變成了我們的圖標(biāo)。然后我們把背景隱藏，切出這些圖標(biāo)即可。如果是 AI 完成的產(chǎn)品圖標(biāo)可以直接 Ctrl+C 然后在 PS智能對(duì)象中 Ctrl+V復(fù)制過(guò)來(lái)就行。
△ Template-AppIcons-iOS
安卓啟動(dòng)圖標(biāo)尺寸
安卓啟動(dòng)圖標(biāo)同樣需要很多尺寸，主流是需要：1024x1024px、512x512px、144x144px、96x96px、72x72px、48x48px這六種。我們提供給程序員的是直角的矩形，然后程序員通過(guò)代碼進(jìn)行切割變成圓角圖標(biāo)。在這里我也做了一個(gè)智能對(duì)象的模板送給您，只要替換其中的智能對(duì)象圖像，換成您的1024x1024px圖標(biāo)保存即可。
△ 安卓圖標(biāo)模板
設(shè)計(jì)產(chǎn)品圖標(biāo)前，首先我們需要找一些和產(chǎn)品氣質(zhì)相符的圖片制作情緒板。通過(guò)情緒板我們可以感受到產(chǎn)品的調(diào)性，然后我們從中提取一些形狀和色彩作為我們產(chǎn)品圖標(biāo)的主要造型。這里我舉我的產(chǎn)品每日名畫(huà)的例子，每日名畫(huà)是一個(gè)美術(shù)方面的APP，所以我找了一些和美術(shù)相關(guān)的圖片。
△ 關(guān)于美術(shù)的情緒板
下面我開(kāi)始在 AI 設(shè)計(jì)產(chǎn)品圖標(biāo)了。我建立了一個(gè)1024x1024px的畫(huà)布，然后根據(jù)盧浮宮前的金字塔建筑設(shè)計(jì)了一枚抽象的產(chǎn)品圖標(biāo)，它內(nèi)在的符號(hào)是：帶領(lǐng)大家走進(jìn)藝術(shù)的殿堂。同時(shí)我也增加了一些自己對(duì)美術(shù)的含義，如藝術(shù)來(lái)源于生活高于生活等。這些都寫在了設(shè)計(jì)說(shuō)明中。
△ 在Illustrator中設(shè)計(jì)產(chǎn)品圖標(biāo)
然后我給這枚圖標(biāo)加入了蒙德里安的配色，增加產(chǎn)品的藝術(shù)感，并最終完成產(chǎn)品圖標(biāo)的設(shè)計(jì)。這個(gè)圖標(biāo)也可以作為該產(chǎn)品的企業(yè)形象（VIS），將來(lái)產(chǎn)品周邊都可以使用這個(gè)圖形。
△ 最終定稿的圖標(biāo)
由于產(chǎn)品會(huì)首先上線到蘋果設(shè)備上，所以我下面把 AI 繪制的產(chǎn)品圖標(biāo)全選復(fù)制，然后打開(kāi)圖標(biāo)模板中的智能對(duì)象（雙擊圖標(biāo)模板中智能對(duì)象圖層的縮略圖），粘貼過(guò)來(lái)。粘貼的時(shí)候系統(tǒng)會(huì)提示選擇粘貼過(guò)來(lái)的方式，這里我們選擇：智能對(duì)象。然后保存并關(guān)閉智能對(duì)象，這時(shí)回到模板PSD 中，就看到了這個(gè)效果。
△ 替換了模板中智能對(duì)象的效果
接下來(lái)隱藏背景圖層，然后按下鍵盤上的 ctrl+Shift+Alt+S，調(diào)出存儲(chǔ)為Web所用模式，選擇保存到桌面上，格式選擇僅圖片。關(guān)閉 PS，打開(kāi)桌面上的文件夾，就看到圖標(biāo)被我們工整地切好了。
△ 產(chǎn)品圖標(biāo)的切圖文件
第二種圖標(biāo)被稱為系統(tǒng)圖標(biāo)。系統(tǒng)圖標(biāo)指的是擔(dān)負(fù)著一定功能和含義的圖形，一般來(lái)說(shuō)需要像文字一般地被人迅速理解，所以表達(dá)方式上不適合特別復(fù)雜。比如微信底部四個(gè)系統(tǒng)圖標(biāo)：「微信」、「通訊錄」、「發(fā)現(xiàn)」、「我」就使用了比較簡(jiǎn)潔的線性風(fēng)格。
當(dāng)然系統(tǒng)圖標(biāo)也不一定要做的非常無(wú)趣，比如我們常用的58同城APP 中就有大量的系統(tǒng)圖標(biāo)，在保證識(shí)別性的前提下使用了多彩的顏色和不同的造型，顯得非?；顫?。所以系統(tǒng)圖標(biāo)同樣可以做得有趣和多樣，前提是保證圖標(biāo)的可識(shí)別性。
填充圖標(biāo)（Filled icon）
填充圖標(biāo)是以面為主要表現(xiàn)形式的圖標(biāo)。在微信APP 底部的 tab欄中，未選中的圖標(biāo)是線性圖標(biāo)，而選中態(tài)則是填充圖標(biāo)，并且會(huì)變成較為鮮亮的顏色暗示用戶該功能被選中了。填充態(tài)圖標(biāo)占用的面積要比線性圖標(biāo)多，所以更加顯眼。實(shí)際上，在最新的蘋果設(shè)計(jì)規(guī)范中，蘋果也建議開(kāi)發(fā)者在 APP底部 Tab欄中全部使用填充圖標(biāo)，點(diǎn)擊態(tài)通過(guò)改變填充圖標(biāo)的顏色進(jìn)行區(qū)別。這是因?yàn)樘畛鋱D標(biāo)看上去像可點(diǎn)擊的。
△ 圖為填充圖標(biāo)
線性圖標(biāo)（Outlined icon）
線性圖標(biāo)的表現(xiàn)形式是線條，在系統(tǒng)圖標(biāo)里通常是由統(tǒng)一粗細(xì)的線條組成。這里可能很多新朋友不明白為什么要使用統(tǒng)一的粗細(xì)，這是因?yàn)橥ǔＯ到y(tǒng)圖標(biāo)并非單一出現(xiàn)，而是成組使用。比如微信底部的四個(gè) tab圖標(biāo)、網(wǎng)易云音樂(lè)頂部導(dǎo)航欄的圖標(biāo)等。在一個(gè)場(chǎng)景下的幾個(gè)同等重要的圖標(biāo)，如果線條粗細(xì)不一致，很容易造成它們存在權(quán)重上差異的感覺(jué)。所以我們?cè)诶L制線性圖標(biāo)時(shí)，線條通常都會(huì)使用統(tǒng)一的粗細(xì)。
△ 圖為線性圖標(biāo)
圓角圖標(biāo)（Rounded icon）
無(wú)論是線性還是填充的圖標(biāo)，在圖標(biāo)的邊角處使用圓角都是圓角圖標(biāo)風(fēng)格。圓角圖標(biāo)的好處就是讓人覺(jué)得很溫柔，可以非常舒適地點(diǎn)擊它。所以很多產(chǎn)品的圖標(biāo)都會(huì)使用圓角圖標(biāo)。
△ 圖為圓角圖標(biāo)
尖角圖標(biāo)（Sharp icon）
無(wú)論是線性還是填充的圖標(biāo)，在圖標(biāo)的邊角處使用尖角都是尖角圖標(biāo)風(fēng)格。尖角圖標(biāo)的好處是讓人感覺(jué)到有棱角，視覺(jué)上會(huì)多凝視幾秒。并且給人以正式的感覺(jué)，所以像銀行、辦公等APP 中都較多地使用尖角圖標(biāo)風(fēng)格。
△ 圖為尖角圖標(biāo)
斷線圖標(biāo)（Breaking Lines）
如果我們的線性圖標(biāo)顯得太死板，我們可以使用斷線這種方式來(lái)讓它變得俏皮。斷線圖標(biāo)就是線性圖標(biāo)的一種風(fēng)格變化，它的特點(diǎn)就是在線條中出現(xiàn)斷口。但是這個(gè)斷口并不是看起來(lái)那么簡(jiǎn)單，它得遵循幾個(gè)規(guī)則：第一，斷線開(kāi)口只有一個(gè)，否則圖標(biāo)會(huì)無(wú)法識(shí)別；第二，斷線開(kāi)口位置不應(yīng)該在中心線上；第三，斷線開(kāi)口盡量在轉(zhuǎn)折處；第四，斷線不應(yīng)該太過(guò)于瑣碎。
△ 土豆APP的標(biāo)簽欄使用了斷線的風(fēng)格
雙調(diào)圖標(biāo)（Two-Tone icon）
如果我們把圖標(biāo)簡(jiǎn)單地分為線性圖標(biāo)和填充圖標(biāo)，是不是太無(wú)聊了？比如我們要設(shè)計(jì)一個(gè) iOS平臺(tái)的 APP，它的底部Tab欄就一定是未選中態(tài)是線性的，選中就是填充的嗎（或者全部是填充態(tài)，僅僅改變顏色）？這也太無(wú)聊了吧！所以又出現(xiàn)了雙調(diào)圖標(biāo)的設(shè)計(jì)風(fēng)格。即：雙調(diào)圖標(biāo)的外形還是線性圖標(biāo)，但是用透明度很高的同類色填充到線性圖標(biāo)內(nèi)部空間里。這樣的圖標(biāo)顯得俏皮可愛(ài)，并且感覺(jué)非常透氣。
△ 圖為雙調(diào)圖標(biāo)
動(dòng)態(tài)圖標(biāo)（Motion）
動(dòng)態(tài)圖標(biāo)是非常有趣的，如果靜態(tài)圖標(biāo)不足以讓用戶感受到新鮮，那我們不妨給圖標(biāo)增加動(dòng)效。比如 QQ應(yīng)用中底部 Tab欄的圖標(biāo)點(diǎn)擊其中一個(gè)的時(shí)候，其他圖標(biāo)會(huì)「偷看」選中態(tài)圖標(biāo)的方向。除了底部標(biāo)簽欄之外，很多 APP 點(diǎn)擊能觸發(fā)導(dǎo)航的「漢堡包圖標(biāo)」，點(diǎn)擊時(shí)也會(huì)有一個(gè)從導(dǎo)航圖標(biāo)變成返回圖標(biāo)的動(dòng)畫(huà)。這都是非常能夠調(diào)動(dòng)用戶好奇心的。
△ Material Design中的動(dòng)態(tài)圖標(biāo)
我們?cè)谑褂?Photoshop 工具的時(shí)候會(huì)感嘆，畫(huà)筆比鋼筆好用，橡皮比布爾運(yùn)算好用。那么我們?cè)诋?huà)圖標(biāo)的時(shí)候能不能使用畫(huà)筆這樣的工具來(lái)繪制圖標(biāo)呢？在 Photoshop 里使用畫(huà)筆工具和橡皮工具、涂抹工具、選區(qū)工具的填充、油漆桶工具制作的圖形，以及從網(wǎng)絡(luò)上復(fù)制過(guò)來(lái)的jpg圖片文件，這些都是像素圖形。它們是計(jì)算機(jī)記錄每一個(gè)點(diǎn)的顏色來(lái)呈現(xiàn)圖像的。這也是為什么我們把一張照片放得特別大它就虛了的原因。而我們通過(guò) Photoshop 中的鋼筆工具、布爾運(yùn)算、貝塞爾曲線、形狀圖層制作的圖形，以及 Illustrator 復(fù)制過(guò)來(lái)的圖形、Sktech繪制的圖形等，都是矢量圖形。它們是計(jì)算機(jī)記錄一個(gè)錨點(diǎn)到另一個(gè)錨點(diǎn)的方向、位置、色彩來(lái)呈現(xiàn)圖像的。所以像素圖形變化多端、顏色變換豐富、細(xì)節(jié)更多；矢量圖形則文件較小，并且具有隨意放大縮小都不虛的能力。因?yàn)槊總€(gè)錨點(diǎn)之間的方向、位置都是相對(duì)的，放大和縮小不受影響，而像素圖形記錄每個(gè)點(diǎn)的色彩，比如一張2000px x 2000px的圖片，縮小到1000px x 1000px就會(huì)損失一千個(gè)像素信息。我們繪制圖標(biāo)比較適合用矢量圖形來(lái)設(shè)計(jì)，因?yàn)槲覀兛赡苄枰S時(shí)調(diào)整圖標(biāo)的大小，并且在不同分辨率的適配中也更加方便。
布爾運(yùn)算聽(tīng)著很可怕，其實(shí)非常簡(jiǎn)單，布爾運(yùn)算是數(shù)字邏輯推演法，主要有數(shù)字邏輯的聯(lián)合、相交、相減。在我們使用的平面軟件中引用了這種邏輯運(yùn)算方法來(lái)使基本圖形通過(guò)聯(lián)合、相交、相減等數(shù)學(xué)計(jì)算變成新的造型。比如兩個(gè)圓形相減可以得到一個(gè)月亮的造型，這就是布爾運(yùn)算了。那么為什么叫布爾運(yùn)算呢？布爾指的是喬治·布爾（George Boole），一位19世紀(jì)最重要的數(shù)學(xué)家，為了紀(jì)念布爾在符號(hào)邏輯運(yùn)算中的杰出貢獻(xiàn)，所以我們將這種運(yùn)算稱為布爾運(yùn)算。布爾運(yùn)算在 Photoshop、Illustrator、Sketch、Adobe XD、After Effects等我們熟悉的軟件中都有，并且操作基本一致。
布爾運(yùn)算的核心就是兩個(gè)形狀的關(guān)系：即Union（并集）、Intersection（交集）和Subtraction（差集，包括A-B和B-A兩種）。這些關(guān)系有點(diǎn)像我們初中學(xué)過(guò)的數(shù)學(xué)，應(yīng)該比較好理解。但是很多軟件中對(duì)于布爾運(yùn)算的關(guān)系翻譯不同，所以可能大家會(huì)有些不適應(yīng)。比如在 Photoshop 中布爾運(yùn)算被翻譯成：合并形狀、減去頂層形狀、與形狀區(qū)域相交、排除重疊形狀。而在 Adobe XD 中則翻譯成：添加、減去、交叉、排除重疊。雖然名字不同，但是功能是相同的，所以大家在學(xué)習(xí)新的軟件時(shí)不妨先找一下布爾運(yùn)算。
△ 圖為布爾運(yùn)算不同運(yùn)算模式
貝塞爾曲線是用于二維圖形繪制的數(shù)學(xué)曲線。1962年法國(guó)工程師皮埃爾·貝塞爾發(fā)表了貝塞爾曲線，它的誕生主要是為了汽車的主體設(shè)計(jì)繪制圖形的。貝塞爾曲線是繪制矢量圖形時(shí)的重要工具，我們使用鋼筆工具畫(huà)出的所有圖形一般來(lái)說(shuō)都是貝塞爾曲線組成的。貝塞爾曲線由錨點(diǎn)和線段組成，點(diǎn)擊錨點(diǎn)就會(huì)出現(xiàn)兩個(gè)手柄，一邊是控制前面的線條走向，另一邊是控制后端的線條走向。同時(shí)我們也可以通過(guò)增加錨點(diǎn)工具和刪除錨點(diǎn)工具進(jìn)行調(diào)整。要想學(xué)好平面電腦繪圖軟件，貝塞爾曲線是必須修煉的一課（練習(xí)貝塞爾曲線的在線游戲：https://bezier.method.ac/）。一般來(lái)說(shuō)，二維平面軟件都有貝塞爾曲線的痕跡，鋼筆工具、增加錨點(diǎn)、刪除錨點(diǎn)、轉(zhuǎn)換點(diǎn)工具，這些都是平面軟件的標(biāo)配。并且，貝塞爾曲線和布爾運(yùn)算可謂是一對(duì)好朋友，在繪制矢量圖形時(shí)可以使用它們輕松地繪制出準(zhǔn)確的造型。
△ 圖為貝塞爾曲線繪制方法
那么我們使用什么軟件來(lái)繪制圖標(biāo)呢？這里我建議使用 Illustrator。首先，UI設(shè)計(jì)師使用不同的軟件來(lái)設(shè)計(jì)頁(yè)面，目前主流是 Photoshop和 Sketch，也有很多設(shè)計(jì)師選擇 Adobe XD。而這些軟件都是兼容 Illustrator 的，所以使用它來(lái)繪制圖標(biāo)非常有靈活性?？赡苣鷮?duì) Illustrator 并不熟悉，不過(guò)沒(méi)關(guān)系，我們?cè)谶@里只需要了解它與圖標(biāo)繪制功能相關(guān)的功能即可，比如鋼筆、布爾運(yùn)算、屬性面板、描邊、填充、混合工具等，并不需要學(xué)習(xí)非常深入。所以大家不必緊張。
笑臉圖標(biāo)
笑臉圖標(biāo)的設(shè)計(jì)步驟：畫(huà)出一個(gè)正圓；接著畫(huà)一個(gè)小圓，然后 ctrl+F復(fù)制平行移動(dòng)到旁邊，然后右鍵編組。接著，同時(shí)選中大圓和編組的小圓進(jìn)行水平居中對(duì)齊。我們繪制一個(gè)圓形，然后通過(guò)布爾運(yùn)算減去一個(gè)矩形得到半圓形組成嘴，完成。
△ 笑臉圖標(biāo)
對(duì)號(hào)圖標(biāo)
對(duì)號(hào)圖標(biāo)的設(shè)計(jì)步驟：使用矩形工具畫(huà)出一個(gè)長(zhǎng)方形，然后復(fù)制，將復(fù)制后的長(zhǎng)方形向右上移動(dòng)相同的距離，使用布爾運(yùn)算剪切，旋轉(zhuǎn)45°后變成一個(gè)對(duì)號(hào)。繪制一個(gè)正方形，使用路徑選擇工具選中，拖動(dòng)圓角的圓點(diǎn)拉出圓角得到圓角矩形。對(duì)號(hào)和圓角矩形進(jìn)行布爾運(yùn)算，完成。
△ 對(duì)號(hào)圖標(biāo)
WIFI圖標(biāo)
WIFI圖標(biāo)的設(shè)計(jì)步驟：繪制多個(gè)圓形并且通過(guò)布爾運(yùn)算相加減得出三個(gè)圓圈嵌套的靶子造型。通過(guò)旋轉(zhuǎn)過(guò)的45°矩形和之前圖形布爾運(yùn)算得到 Wifi圖標(biāo)，完成。
△ WIFI圖標(biāo)
地理位置圖標(biāo)
地理位置圖標(biāo)的設(shè)計(jì)步驟：選擇矩形工具單擊畫(huà)面輸入數(shù)值，建立一個(gè)100px的圓形。然后選擇這個(gè)圓形復(fù)制它，然后等比例縮小它，和之前的大圓進(jìn)行布爾運(yùn)算相減，得到環(huán)形。繪制50px的矩形，用對(duì)齊工具放在環(huán)形的左下方。旋轉(zhuǎn)45°得到地理圖標(biāo)，完成。
△ 地理位置圖標(biāo)
云彩圖標(biāo)
云彩圖標(biāo)的設(shè)計(jì)步驟：繪制兩個(gè)大小不同的圓形，使用對(duì)齊工具進(jìn)行底部對(duì)齊。繪制一個(gè)矩形，同樣底部對(duì)齊。合并形狀，完成。
△ 云彩圖標(biāo)
眼睛圖標(biāo)
眼睛圖標(biāo)的設(shè)計(jì)步驟：繪制出一個(gè)正圓。復(fù)制這個(gè)正圓形，然后按著 Shift+方向鍵下鍵，并通過(guò)布爾運(yùn)算得到眼睛外輪廓。繪制兩個(gè)圓形，通過(guò)對(duì)齊工具和布爾運(yùn)算工具得到最終眼睛造型，完成。
△ 眼睛圖標(biāo)
鈴鐺圖標(biāo)
鈴鐺圖標(biāo)的設(shè)計(jì)步驟：首先用圓形和矩形合并組成主體；使用矩形和圓形進(jìn)行布爾運(yùn)算繪制鈴鐺底部和鈴鐺頂部的零件，然后進(jìn)行合并形狀；鈴鐺底部的半圓使用圓形和矩形布爾運(yùn)算，完成。
△ 鈴鐺圖標(biāo)
簡(jiǎn)易齒輪圖標(biāo)
簡(jiǎn)易齒輪圖標(biāo)的設(shè)計(jì)步驟：通過(guò)兩個(gè)圓形進(jìn)行布爾運(yùn)算得到環(huán)形。繪制一個(gè)矩形，上下復(fù)制在圓形上，然后把它們倆編組和環(huán)形使用對(duì)齊工具進(jìn)行水平垂直對(duì)齊。復(fù)制矩形編組并旋轉(zhuǎn)90°，得到一個(gè)十字形。復(fù)制這個(gè)十字形并最終全部合并形狀，完成。
△ 簡(jiǎn)易圖標(biāo)
齒輪圖標(biāo)
齒輪圖標(biāo)的設(shè)計(jì)步驟：用 AI 的爆炸圖形和圓形進(jìn)行布爾運(yùn)算畫(huà)出齒輪；用兩個(gè)圓形進(jìn)行布爾運(yùn)算做出里面的零件，完成。
△ 齒輪圖標(biāo)
螺絲刀圖標(biāo)
螺絲刀圖標(biāo)的畫(huà)法：用圓形和矩形做出螺絲刀主體；用矩形旋轉(zhuǎn)并復(fù)制再布爾運(yùn)算做出凹槽；使用矩形做出前面的造型，完成。
△ 螺絲刀圖標(biāo)
蘋果圖標(biāo)
蘋果圖標(biāo)的畫(huà)法：繪制一個(gè)六邊形。將水平中間兩個(gè)點(diǎn)向上移動(dòng)。在中心線上下建立兩個(gè)錨點(diǎn)，并且向下移動(dòng)。將下面兩個(gè)點(diǎn)向內(nèi)分別移動(dòng)。使用圓角工具將每?jī)蓚€(gè)相同的點(diǎn)一組一組拉成圓角。繪制一個(gè)矩形并且旋轉(zhuǎn)45°，然后將左右兩個(gè)點(diǎn)向內(nèi)拉得到菱形。用圓角工具使菱形變成葉子造型并且旋轉(zhuǎn)45°。使用一個(gè)圓形和蘋果造型相切，完成。
△ 蘋果圖標(biāo)設(shè)計(jì)過(guò)程
放大鏡線性圖標(biāo)
放大鏡線性圖標(biāo)的畫(huà)法：繪制正圓。繪制一條直線。用屬性面板里的對(duì)齊工具把它們倆對(duì)齊。用描邊面板里的屬性將描邊改成圓頭，然后旋轉(zhuǎn)45°即可。
△ 放大鏡線性圖標(biāo)
時(shí)鐘線性圖標(biāo)
時(shí)鐘線性圖標(biāo)的畫(huà)法：繪制正圓。繪制一個(gè)矩形，對(duì)齊圓形中心。用增加錨點(diǎn)工具在矩形左和下邊上增加兩個(gè)錨點(diǎn)。用直接選擇工具框選沒(méi)用的線條，刪除即可。
△ 時(shí)鐘線性圖標(biāo)
點(diǎn)贊線性圖標(biāo)
點(diǎn)贊線性圖標(biāo)的畫(huà)法：繪制兩個(gè)矩形，并用直接選擇工具選擇重合的四個(gè)錨點(diǎn)，在屬性面板里使用對(duì)齊工具讓它們完全對(duì)齊。將大的矩形底部錨點(diǎn)向左移動(dòng)。繪制一個(gè)矩形并和大的矩形左對(duì)齊。用直接選擇工具選中直角，拖動(dòng)圓角小圓點(diǎn)讓它們變成圓角，完成。
△ 點(diǎn)贊線性圖標(biāo)
如果您掌握了以上填充態(tài)圖標(biāo)的設(shè)計(jì)方法，相信其他圖標(biāo)的設(shè)計(jì)只要以此及彼的思考，就可以完成。比如線性圖標(biāo)，在繪制線性圖標(biāo)時(shí)，我們首先會(huì)建立一個(gè)半透明的矩形來(lái)固定圖標(biāo)應(yīng)該繪制的范圍，比如「40px」。然后我們把填充關(guān)閉，只使用描邊來(lái)繪制線性圖標(biāo)即可。繪制完以后我們無(wú)需保存文件，僅通過(guò) Ctrl+C的復(fù)制快捷鍵，然后打開(kāi) Sketch 或者 Adobe XD 就可以使用 Ctrl+V 將圖標(biāo)粘貼過(guò)去了。但是，如果您使用 Photoshop 做界面設(shè)計(jì)，可能會(huì)多兩道手續(xù)，首先就是線性圖標(biāo)需要擴(kuò)展才可以復(fù)制到 Photoshop 中。將圖標(biāo)復(fù)制一份（擴(kuò)展之后的圖標(biāo)不方便修改，所以要留著可修改版本），然后點(diǎn)擊對(duì)象菜單 > 擴(kuò)展，點(diǎn)確定，就可以把原本是沒(méi)有閉合的路徑改為完整的形狀。
△ 在Illustrator中的擴(kuò)展
然后復(fù)制，打開(kāi) Photoshop 粘貼會(huì)打開(kāi)提示框，我們可以選擇把圖標(biāo)粘貼成為像素、智能對(duì)象、路徑、形狀。如果粘貼成像素的話，那無(wú)疑對(duì)修改是非常不利的。如果粘貼成智能對(duì)象，雙擊智能對(duì)象會(huì)回到 Illustrator 中修改，但是也有一定缺點(diǎn)，那就是智能對(duì)象不能直接在 Photoshop 中進(jìn)行調(diào)整。如果粘貼成路徑也不是很方便，所以最好是我們將 Illustrator 中繪制的小圖標(biāo)粘貼成形狀。選擇后，圖標(biāo)就粘貼成了形狀圖層，我們可以在 Photoshop 中對(duì)它進(jìn)行布爾運(yùn)算、錨點(diǎn)調(diào)整等操作了。
△ 粘貼到Photoshop中的選項(xiàng)
然而，我們會(huì)發(fā)現(xiàn)圖標(biāo)粘貼到 Photoshop 中，橫豎的路徑會(huì)出現(xiàn)虛邊的情況（圓角和斜線是允許一定的虛邊出現(xiàn)的，但是直線不可以）。這種虛邊有可能會(huì)影響用戶的體驗(yàn)，我們必須把它消滅掉。第一種方法：在 Photoshop 中我們可以用直接選擇工具后界面上方的對(duì)齊路徑功能，給它打鉤來(lái)嘗試修復(fù)這個(gè)問(wèn)題。第二種方法：我們可以使用直接選擇工具選中虛掉的某兩個(gè)錨點(diǎn)，然后按 Ctrl+T（自由變換），再按鍵盤的上下或左右「搖一搖」，路徑就會(huì)清晰了。第三種方法：也可以使用幾像素的矩形進(jìn)行布爾運(yùn)算強(qiáng)行對(duì)齊。三種方法一定能夠讓圖標(biāo)的橫豎路徑?jīng)]有虛邊，達(dá)到完美的效果。當(dāng)然 Sketch 和 Adobe XD 都是矢量工具所以復(fù)制后沒(méi)有這個(gè)問(wèn)題。
在 Photoshop 中使用「搖一搖」的方法對(duì)齊路徑
在 Adobe XD 中，圖標(biāo)無(wú)需進(jìn)行擴(kuò)展，并可以實(shí)時(shí)調(diào)整描邊粗細(xì)等屬性。
標(biāo)簽欄圖標(biāo)
在蘋果和安卓APP 的底部，一般都會(huì)有一個(gè)放置重要功能的常駐欄，在 iOS中被稱為標(biāo)簽欄（也叫做Tab欄）。一般，Tab欄的圖標(biāo)是2-5個(gè)。每個(gè)圖標(biāo)的區(qū)域平分整個(gè) Tab欄寬度，底部會(huì)有一個(gè)22px（11pt）的文字注釋。當(dāng)然如果圖標(biāo)釋義較為清晰，也可以為了保持設(shè)計(jì)感去掉文字注釋。如果我們是以 iPhone6/7/8尺寸設(shè)計(jì)界面，那么我們的標(biāo)簽欄圖標(biāo)尺寸應(yīng)該是60px（30pt）左右，可以基于這個(gè)范圍來(lái)設(shè)計(jì)我們的圖標(biāo)。
△ 互聯(lián)網(wǎng)產(chǎn)品中優(yōu)秀的標(biāo)簽欄圖標(biāo)設(shè)計(jì)
每個(gè) Tab欄的圖標(biāo)都應(yīng)該設(shè)計(jì)一個(gè)選中狀態(tài)，可以做樣式的變換也可以做顏色的改變，總之要讓人知道當(dāng)前所在的頁(yè)面是哪個(gè)。如果您的 Tab欄由五個(gè) icon 組成，那么可以在中間放置比較重要的功能，并做出突顯的樣式，比如使用一個(gè)圓球當(dāng)作背景。還要額外注意，圖標(biāo)的選中態(tài)樣式要和中間突出狀態(tài)的圖標(biāo)保持區(qū)別，以免發(fā)生誤會(huì)。
導(dǎo)航欄圖標(biāo)
在蘋果APP 的頂部區(qū)域，我們稱之為 Navigation Bar，就是導(dǎo)航欄。導(dǎo)航欄左右一般都會(huì)有圖標(biāo)，如果是二級(jí)頁(yè)面，左側(cè)一般是返回圖標(biāo)。安卓也有類似的設(shè)計(jì)。那么我們?cè)谠O(shè)計(jì)這種圖標(biāo)的時(shí)候一定要保證所有導(dǎo)航欄上的圖標(biāo)大小和風(fēng)格都是一致的。如果以 iPhone6/7/8尺寸設(shè)計(jì)界面，那么導(dǎo)航欄圖標(biāo)的尺寸大概是44px（22pt）左右。
△ 互聯(lián)網(wǎng)產(chǎn)品中優(yōu)秀的導(dǎo)航欄圖標(biāo)
金剛區(qū)圖標(biāo)
在我們逛淘寶和美團(tuán)的時(shí)候您會(huì)發(fā)現(xiàn)，在它們頁(yè)面首頁(yè)都會(huì)有一個(gè)區(qū)域放置很多分類，一般是6-8個(gè)大小一樣的圖標(biāo)，有可能是圓形，也可能是不規(guī)則形狀。這個(gè)區(qū)域其實(shí)在蘋果和安卓規(guī)范里并沒(méi)有，屬于設(shè)計(jì)師自創(chuàng)的規(guī)范。這個(gè)區(qū)域經(jīng)常有八個(gè)圖標(biāo)組成，被稱為「八大金剛圖標(biāo)」，后來(lái)很多產(chǎn)品在這個(gè)區(qū)域并不使用8個(gè)圖標(biāo)，我們就稱它們?yōu)榻饎倕^(qū)了。金剛區(qū)圖標(biāo)的設(shè)計(jì)風(fēng)格應(yīng)該盡量是微扁平、輕擬物的感覺(jué)，這樣會(huì)有更好的點(diǎn)擊感。尺寸方面，金剛區(qū)并沒(méi)有規(guī)范，所以大家可以以設(shè)計(jì)稿最終效果為準(zhǔn)。
△ 互聯(lián)網(wǎng)產(chǎn)品中優(yōu)秀的金剛區(qū)圖標(biāo)設(shè)計(jì)
設(shè)計(jì)方法：《用四個(gè)步驟，幫你學(xué)會(huì)金剛區(qū)圖標(biāo)的設(shè)計(jì)方法》
圖標(biāo)設(shè)計(jì)是 UI設(shè)計(jì)中非常重要的一環(huán)，因?yàn)槌宋淖趾蛨D片的排版之外，在扁平時(shí)代我們能夠傳遞給用戶情緒和設(shè)計(jì)感的通道就是頁(yè)面中的各種圖形和圖標(biāo)了，如果做不好圖標(biāo)，用戶就將在使用界面時(shí)失去樂(lè)趣。所以，我建議每位 UI設(shè)計(jì)師都需要在平時(shí)做大量的圖標(biāo)練習(xí)。在不同的圖標(biāo)風(fēng)格中，學(xué)會(huì)使用各式各樣的武器。
文章來(lái)源：優(yōu)設(shè)網(wǎng) 作者：郗鑒
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
借著疫情期間在家休假的時(shí)間，將平時(shí)用到的一些零零散散的圖標(biāo)繪制方法與思路進(jìn)行了一次全面的匯總與沉淀。從實(shí)習(xí)期間畫(huà)一組圖標(biāo)的無(wú)從下手，每一個(gè)圖標(biāo)看起來(lái)都像是散裝的一樣，到后來(lái)慢慢學(xué)習(xí)與練習(xí)，到現(xiàn)在變得了解了圖標(biāo)的繪制流程，過(guò)程也是比較麻煩，因?yàn)楹苌儆腥娴膱D標(biāo)講解文章，都是看一篇懂一點(diǎn)，然后在揉到練習(xí)當(dāng)中。所以本篇文章盡量將圖標(biāo)進(jìn)行細(xì)致一些的流程說(shuō)明，有不足之處還望指教。
圖標(biāo)可用性，顧名思義就是圖標(biāo)繪制出來(lái)是否能被用戶所看懂并快速識(shí)別，是否可以為業(yè)務(wù)賦能。為此我總結(jié)出了四條圖標(biāo)繪制的評(píng)判標(biāo)準(zhǔn)。
用戶是否能在某頁(yè)面上迅速找到該圖標(biāo)，凸顯性的目的是可以快速查找，幫助用戶做選擇。圖標(biāo)在識(shí)別的速度上遠(yuǎn)遠(yuǎn)大于文字，所以在一些頁(yè)面中的重要功能使用圖標(biāo)的目的是為了吸引用戶的注意力，讓重要功能得到凸顯，提高重要功能的點(diǎn)擊率。
圖標(biāo)的目的是要讓用戶猜出他看到的圖標(biāo)所表達(dá)的意義，有什么作用，以及點(diǎn)擊后會(huì)出現(xiàn)什么樣的場(chǎng)景，發(fā)生什么樣的事情。所以一個(gè)圖標(biāo)的好與壞最重要的因素就體現(xiàn)在這里：圖標(biāo)的可識(shí)別性與可預(yù)知性。
影響圖標(biāo)可識(shí)別性的三點(diǎn)因素
3. 美觀度
圖標(biāo)是否美觀，對(duì)用戶是否有足夠的吸引力。在《設(shè)計(jì)通用法則》一書(shū)中有一條設(shè)計(jì)法則是：美即適用效應(yīng)。不管任何事物，美麗的外表都會(huì)給人帶來(lái)好感，讓人覺(jué)得這種事物在任何方面都非常美好。作為設(shè)計(jì)師，把一件事物美觀化是一件終生的必修課，用戶對(duì)圖標(biāo)或者界面的第一印象就是始于顏值。
4. 業(yè)務(wù)屬性
圖標(biāo)是否符合業(yè)務(wù)屬性，是否可以喚起用戶的使用情緒，提高點(diǎn)擊率，起到為業(yè)務(wù)賦能的作用。在界面中，我們?cè)O(shè)計(jì)的圖標(biāo)最終目的不只是讓用戶覺(jué)得它美觀，而是要為我們的產(chǎn)品賦能，什么是為產(chǎn)品賦能呢？通俗來(lái)說(shuō)就是使圖標(biāo)能夠提升點(diǎn)擊率從而給公司創(chuàng)造收益。
圖標(biāo)如何為產(chǎn)品賦能呢？
1. 線性圖標(biāo)
線性圖標(biāo)，顧名思義，即圖標(biāo)是由直線、曲線、點(diǎn)在內(nèi)等元素組合而成的圖標(biāo)樣式。線性圖標(biāo)具有辨識(shí)度高，清晰唯美，簡(jiǎn)約易看等優(yōu)點(diǎn)，線性圖標(biāo)不會(huì)對(duì)頁(yè)面造成太多的視覺(jué)干擾。缺點(diǎn)是：線性圖標(biāo)的創(chuàng)作空間較少，太復(fù)雜的線性圖標(biāo)看起來(lái)會(huì)讓人感覺(jué)到累。
2. 面性圖標(biāo)
面性圖標(biāo)，即使用對(duì)圖形內(nèi)容進(jìn)行色彩填充的圖標(biāo)樣式。面性圖標(biāo)是現(xiàn)實(shí)生活中物體的縮影，優(yōu)點(diǎn)非常多，比如表意能力強(qiáng)，細(xì)節(jié)豐富，色彩豐富，情緒感強(qiáng)，視覺(jué)突出，創(chuàng)作空間大等。面性圖標(biāo)可以讓用戶迅速定位圖標(biāo)位置，快速預(yù)知點(diǎn)擊后的狀態(tài)。但是面性圖標(biāo)在頁(yè)面中不可過(guò)多出現(xiàn)，否則會(huì)造成頁(yè)面臃腫，難分主次，用戶視覺(jué)疲勞。
3. 混合型圖標(biāo)
在設(shè)計(jì)圖標(biāo)類型的時(shí)候，不一定局限于單純的線性與面性，也可以兩者結(jié)合，讓圖標(biāo)即有線性描邊的輪廓，還有色彩填充的區(qū)域，混合型圖標(biāo)可以讓頁(yè)面變得更加有活力，同時(shí)還可以吸引用戶的注意力，美觀與創(chuàng)意性強(qiáng)。但是混合型圖標(biāo)在商業(yè)產(chǎn)品中要謹(jǐn)慎使用，因?yàn)槭褂貌划?dāng)會(huì)讓頁(yè)面變得雜亂不堪，用戶無(wú)法識(shí)別圖標(biāo)表達(dá)的語(yǔ)義。
色彩情緒即顏色心理，指不同波長(zhǎng)色彩的光信息作用于人的視覺(jué)器官，通過(guò)視覺(jué)神經(jīng)傳入大腦后，經(jīng)過(guò)思維，與以往的記憶及經(jīng)驗(yàn)產(chǎn)生聯(lián)想，從而形成一系列的色彩心理反應(yīng)。在任何場(chǎng)景下合理使用色彩心理可以調(diào)起用戶情緒，還可以讓用戶產(chǎn)生聯(lián)想進(jìn)而快速識(shí)別。
在設(shè)計(jì)圖標(biāo)的時(shí)候，合理的運(yùn)用色彩情緒，會(huì)使圖標(biāo)更具有科學(xué)性，可以讓用戶在使用的過(guò)程中更加自然、舒服，同時(shí)也會(huì)增加用戶的識(shí)別速度喚起用戶的使用情緒。
色彩情緒表
在配色時(shí)，我們采用更具備科學(xué)性、更符合人類感官的 HSB 系統(tǒng)進(jìn)行配置。在根據(jù)主色配置漸變色時(shí)，我們經(jīng)常是在主色的基礎(chǔ)上加白或者加黑。但是只加入大量的白或者黑就會(huì)改變?cè)旧实拿鞫扰c飽和度，從而使畫(huà)面顯得霧蒙蒙的，不夠清晰通透。正確的做法是在給主色變亮減暗的同時(shí)，改變主色的飽和度。在 hsb 色相條中，最亮的三個(gè)顏色分別是，藍(lán)紫色，青綠色與黃色，如果需要加亮主色就在混白的同時(shí)將藍(lán)色向青色改變色相，如果需要減暗則是相反，這樣在調(diào)制漸變色變化的過(guò)程中不會(huì)出現(xiàn)太臟的顏色。
常見(jiàn)的色彩搭配
中性色（黑白）+主色、主色+點(diǎn)綴色、主色+透明度、單漸變、雙漸變錯(cuò)層、撞色疊加穿透等效果。一般常用的就是中性色+主色、主色+點(diǎn)綴色。
點(diǎn)綴色配色
我們?cè)诶L制圖標(biāo)的時(shí)候，應(yīng)該將圖標(biāo)的每個(gè)像素盡量對(duì)齊于像素點(diǎn)，這樣導(dǎo)出圖標(biāo)時(shí)像素的邊緣不會(huì)出現(xiàn)鋸齒，不會(huì)出現(xiàn)過(guò)于模糊的情況。通常在繪制時(shí)我們應(yīng)該去除繪制軟件中 x 與 y 軸，寬（w）與高（h）的小數(shù)點(diǎn)，這樣就可以避免無(wú)法對(duì)齊像素的情況。
在繪制兩個(gè)或者以上的圖標(biāo)時(shí)，為了避免多個(gè)圖標(biāo)出現(xiàn)大小不一的情況，我們應(yīng)該使用由谷歌材料設(shè)計(jì)語(yǔ)言提供的圖標(biāo)參考線進(jìn)行繪制，使用圖標(biāo)盒子可以讓一整套圖標(biāo)在視覺(jué)效果上更加統(tǒng)一和諧，不會(huì)出現(xiàn)一大一小一長(zhǎng)一短的情況。
使用方法
先繪制一個(gè) 152*152px 的正方形，一個(gè) 176*176px 的正圓形，一個(gè)寬 176*128px 的水平矩形和一個(gè) 128*176px 的垂直矩形，圓角為 4px，然后將這個(gè)四個(gè)形狀進(jìn)行水平居中對(duì)齊，之后得出一個(gè)圖標(biāo)的參考線。
在寬度相等的情況下，正方形的面積要大于正圓的面積，所以在繪制圓形圖標(biāo)時(shí)應(yīng)該將圓形的上下左右四個(gè)頂點(diǎn)頂齊與圖標(biāo)盒子正方形區(qū)域的四條邊；在繪制方形圖標(biāo)時(shí)應(yīng)該將方形的四個(gè)角點(diǎn)頂齊與圓形參考線的外圍邊；在繪制橫向矩形與縱向矩形圖標(biāo)時(shí)，應(yīng)該將圖標(biāo)的左右邊或者是上下邊控制在正方形的參考線之內(nèi)，這樣矩形圖標(biāo)繪制出來(lái)會(huì)更加的圓潤(rùn)，相對(duì)于其他的形狀圖標(biāo)更加匹配。
我們繪制的圖標(biāo)必須要保證清晰度，可辨別性。不管是在強(qiáng)光下還是正常光下都需要良好的可讀性。這就需要圖標(biāo)不論是自身元素之間的對(duì)比度還是和頁(yè)面底板背景之間的對(duì)比度都需要很好的可讀性。我們檢測(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í)，我們可以參考 WCAG 2.1：圖形和用戶界面組件的對(duì)比度至少為 3 : 1 的標(biāo)準(zhǔn)進(jìn)行相應(yīng)配色，以達(dá)到良好的可視狀態(tài)。
可訪問(wèn)性測(cè)試：https://webaim.org/resources/contrastchecker/
在繪制多個(gè)類型相同的圖標(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)一匹配。我們傾向于將彼此相似的元素視為同一個(gè)分組，相似性可以幫助我們組織和分類頁(yè)面里的元素對(duì)象，并將它們與特定的含義或功能相關(guān)聯(lián)。有不同的方法可以使元素被認(rèn)為是相似的，這些方法包括顏色、大小、形狀、紋理、尺寸和方向的相似性。
圖標(biāo)內(nèi)容的統(tǒng)一會(huì)讓用戶明白相似的圖標(biāo)所代表的的功能也相同，而且在視覺(jué)上也更加和諧美觀。因此我們?cè)诶L標(biāo)后還需檢查線條的粗細(xì)比重，邊角的大小，配色方案，細(xì)節(jié)層次和設(shè)計(jì)元素在整個(gè)合集中是否是不變且一致的。
呼吸感的意思就是適當(dāng)留白。在設(shè)計(jì)中，適當(dāng)?shù)牧舭卓梢酝怀鲋黧w內(nèi)容，讓內(nèi)容具備易看性。不管是圖標(biāo)還是界面，元素與元素之間都應(yīng)該存在一定的間距。在圖標(biāo)的繪制過(guò)程中，我們應(yīng)該注意圖標(biāo)元素之間的間距不宜過(guò)近，元素也不宜過(guò)多。圖標(biāo)是一個(gè)物體的簡(jiǎn)略縮影，目的是為了表達(dá)內(nèi)容，讓用戶快速理解，但是在有限的空間中，太過(guò)復(fù)雜的細(xì)節(jié)會(huì)影響圖標(biāo)的識(shí)別速度。因此在圖標(biāo)的繪制過(guò)程中應(yīng)該刪除所有無(wú)法傳達(dá)圖標(biāo)意義的元素，避免使圖標(biāo)變得太過(guò)復(fù)雜難以識(shí)別。
布爾運(yùn)算在設(shè)計(jì)行業(yè)中被得到廣泛的運(yùn)用，比如工業(yè)設(shè)計(jì)，影視后期，logo 設(shè)計(jì)等，布爾運(yùn)算具有一致性與規(guī)范性的優(yōu)點(diǎn)。我們?cè)谠O(shè)計(jì)面性圖標(biāo)的時(shí)候可以合理使用布爾運(yùn)算進(jìn)行繪制，這樣繪制的圖標(biāo)具有吸引力和說(shuō)服力。
在頁(yè)面中，有需要吸引用戶點(diǎn)擊的圖標(biāo)，也有起到輔助作用的指示圖標(biāo)，還有引導(dǎo)用戶操作的圖標(biāo)，這些圖標(biāo)在頁(yè)面中占據(jù)著不同的地位.在所有圖標(biāo)中，有色圖標(biāo)強(qiáng)于無(wú)色圖標(biāo)，多色圖標(biāo)強(qiáng)于單色圖標(biāo)，面性圖標(biāo)強(qiáng)于線性圖標(biāo)，帶背景圖標(biāo)強(qiáng)于無(wú)背景圖標(biāo)，在設(shè)計(jì)圖標(biāo)的時(shí)候應(yīng)該根據(jù)業(yè)務(wù)需要進(jìn)行視覺(jué)強(qiáng)弱不同的設(shè)計(jì)。
如文上所說(shuō)，圖標(biāo)采用與業(yè)務(wù)相符合的色彩搭配會(huì)讓用戶在使用的過(guò)程中更加自然、舒服，同時(shí)也會(huì)增加用戶的識(shí)別速度，喚起用戶的使用情緒。一個(gè)圖標(biāo)的繪制是否具備商業(yè)價(jià)值也恰恰體現(xiàn)在這里。
如下圖所示，左圖是斗魚(yú)直播 APP 的截圖，右圖是京東金融的圖標(biāo)截圖。這兩款產(chǎn)品的業(yè)務(wù)以及所對(duì)應(yīng)的用戶群體完全不一樣，斗魚(yú)是一款直播的產(chǎn)品，直播面向的用戶群體是青少年，所以整體的產(chǎn)品調(diào)性是：萌、活潑、多彩、絢麗、時(shí)尚等，斗魚(yú)直播的圖標(biāo)繪制需要面向年輕人，色彩的高飽和與有趣的元素來(lái)抓住用戶的眼球。但是京東金融是一款理財(cái)?shù)漠a(chǎn)品，面向的用戶則是中老年，大多數(shù)都是有一些存款的人，這些人不需要斗魚(yú)那樣花里胡哨的元素，他們只在乎這個(gè)產(chǎn)品是否安全，利息是否高，所以京東金融這個(gè)產(chǎn)品的整體風(fēng)格就需要偏向于：安全、高端、大氣，這樣才能給用戶從視覺(jué)上營(yíng)造信任感。我們?cè)O(shè)計(jì)圖標(biāo)時(shí)通常使用產(chǎn)品的調(diào)性作為主風(fēng)格，但是像美團(tuán)淘寶這些業(yè)務(wù)眾多的產(chǎn)品中，我們就需要根據(jù)產(chǎn)品下的細(xì)分業(yè)務(wù)進(jìn)行風(fēng)格定位，然后設(shè)計(jì)中相應(yīng)融入產(chǎn)品的品牌元素，使用合理的色彩情緒等讓圖標(biāo)變得更符合業(yè)務(wù)的風(fēng)格。
當(dāng)我們的圖標(biāo)繪制完成后需要測(cè)試這一組圖標(biāo)的重心是否統(tǒng)一，常用的方法是使用標(biāo)準(zhǔn)的正圓形和正方形來(lái)和所有繪制的圖標(biāo)進(jìn)行對(duì)比，保證所有的圖標(biāo)重心相近，視覺(jué)統(tǒng)一。也可以采用不同角度的觀察法，可以從上下左右四個(gè)角度去觀察圖標(biāo)，看看圖標(biāo)在不同的角度下重心是否統(tǒng)一。
情緒板是在執(zhí)行一項(xiàng)設(shè)計(jì)操作之前非常重要的一個(gè)步驟，情緒板并不是像設(shè)計(jì)平臺(tái)展示作品集里那樣放幾張圖片，幾個(gè)關(guān)鍵詞，而是一套對(duì)接下來(lái)設(shè)計(jì)的一個(gè)風(fēng)格走向定位。根據(jù)不同的用戶人群，不同顏色的色彩情緒，不同產(chǎn)品的業(yè)務(wù)，將用戶調(diào)研的結(jié)果，產(chǎn)品的背景進(jìn)行總結(jié)與思考，定位接下來(lái)的設(shè)計(jì)風(fēng)格。
選取照片
觀察生活，對(duì)想畫(huà)的圖標(biāo)進(jìn)行照片實(shí)物造型的提取。圖標(biāo)是對(duì)生活中事物的精簡(jiǎn)概括。利用現(xiàn)實(shí)照片作為設(shè)計(jì)參考可以讓繪制出的圖標(biāo)更真實(shí)，辨識(shí)度更高，還可以做到差異化設(shè)計(jì)。
造型勾勒
使用矢量軟件的基本圖形與鋼筆工具描著照片進(jìn)行輪廓的繪制。
簡(jiǎn)化優(yōu)化
簡(jiǎn)化草稿輪廓的結(jié)構(gòu)，只保留一個(gè)物體的主要特點(diǎn)元素，刪除多余元素。優(yōu)化圖標(biāo)細(xì)節(jié)，需要時(shí)將圖標(biāo)線性轉(zhuǎn)面性。
業(yè)務(wù)屬性
根據(jù)業(yè)務(wù)需要，調(diào)整圖標(biāo)風(fēng)格，添加質(zhì)感。
無(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ì)顯得井然有序。
在制定規(guī)范時(shí)，我們通常先繪制出一個(gè)符合業(yè)務(wù)風(fēng)格的圖標(biāo)，然后根據(jù)這一個(gè)圖標(biāo)定制后續(xù)的圖標(biāo)規(guī)范，最基本的規(guī)范便是描邊寬度，斷點(diǎn)位置、圓角大小，主色輔色，漸變角度，點(diǎn)綴元素，光影角度等，在一組中的圖標(biāo)需要在這些圖形屬性中進(jìn)行統(tǒng)一，這樣的圖標(biāo)雖然形狀不一樣但是在視覺(jué)上看起來(lái)是屬于同一合集的。
制定規(guī)范一般分為三個(gè)過(guò)程：
文章來(lái)源：優(yōu)設(shè)網(wǎng) 作者：簫灬西人生
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
一套 UI 界面當(dāng)中，核心的 APP 圖標(biāo)是用戶每天都要接觸、經(jīng)常使用的視覺(jué)組件和交互對(duì)象。設(shè)計(jì)圖標(biāo)的時(shí)候，要用到大家最熟悉的元素才能貼合用戶認(rèn)知，要醒目、統(tǒng)一，也要足夠「隱形」，避免喧賓奪主。今天這篇文章，來(lái)自著名的 Tubik Studio 團(tuán)隊(duì)，他們?yōu)槿A為旗下的 EMUI 10 系統(tǒng)設(shè)計(jì)了核心的圖標(biāo)系統(tǒng)，來(lái)看看他們的設(shè)計(jì)過(guò)程吧。
我們總不會(huì)低估一個(gè)操作系統(tǒng)基礎(chǔ)圖標(biāo)，對(duì)于產(chǎn)品的可用性和合意性的影響?；A(chǔ)圖標(biāo)雖然小巧，但是對(duì)于整個(gè)操作系統(tǒng)而言，總是極具影響力的，因?yàn)樗麄兪怯脩艚缑娴暮诵脑?，幫助用戶快速直觀地在系統(tǒng)中定位、瀏覽、導(dǎo)航。但是，對(duì)于設(shè)計(jì)師而言，圖標(biāo)的設(shè)計(jì)始終是挑戰(zhàn)，它看起來(lái)最為簡(jiǎn)單，但實(shí)則為最為艱難的工作。
圖標(biāo)需要高效，讓人一目了然，但是也要具備良好的可識(shí)別性，在傳統(tǒng)和創(chuàng)新之間達(dá)到平衡。這一次，Tubik Studio 設(shè)計(jì)團(tuán)隊(duì)將要給華為的 EMUI 10 來(lái)設(shè)計(jì)圖標(biāo)，而這篇文章將會(huì)為你揭示背后的設(shè)計(jì)過(guò)程。
這次的項(xiàng)目主要是由 Sergii Valiukh 、Arthur Avakyan 和 Polina Taran 來(lái)負(fù)責(zé)。這次的設(shè)計(jì)項(xiàng)目從最初的探索構(gòu)思入手，逐漸開(kāi)始繪制草圖，探索樣式，一直到最后打磨，完成設(shè)計(jì)。
為華為 EMUI 10 系統(tǒng)的用戶界面設(shè)計(jì)基礎(chǔ)的圖標(biāo)
我們?cè)?2019 年夏季，收到了來(lái)自華為的邀約，這次的項(xiàng)目要重新設(shè)計(jì) EMUI 這套基于 Android 系統(tǒng)的用戶界面基礎(chǔ)圖標(biāo)，這套圖標(biāo)會(huì)用來(lái)適配華為旗下的旗艦手機(jī)，這些圖標(biāo)將會(huì)隨著新版的系統(tǒng)部署到這些手機(jī)產(chǎn)品當(dāng)中。我們的任務(wù)，是創(chuàng)建總計(jì) 54 款符合當(dāng)下潮流趨勢(shì)的圖標(biāo)，這些圖標(biāo)要能夠貼合品牌和已有用戶的偏好，并且能夠吸引新的用戶。
這個(gè)圖標(biāo)設(shè)計(jì)項(xiàng)目如今已經(jīng)在當(dāng)下的華為旗下手機(jī)產(chǎn)品中應(yīng)用且部署好了，最早使用這套圖標(biāo)的智能手機(jī)型號(hào)為 Mate 30 ，緊接其后的是 P40。
在整個(gè)操作系統(tǒng)中，這些圖標(biāo)是始終位于用戶視野以內(nèi)、最基礎(chǔ)的最核心的交互元素，通常用戶每天都會(huì)同這些核心的基礎(chǔ) APP 進(jìn)行交互，有時(shí)候一天多達(dá)幾十次，因此它們應(yīng)當(dāng)具備良好的功能性，還應(yīng)該足夠美觀，給用戶帶來(lái)滿足感。同時(shí)，這套圖標(biāo)的設(shè)計(jì)，也應(yīng)當(dāng)足夠統(tǒng)一，以協(xié)調(diào)的體驗(yàn)切入到整個(gè) EMUI 的設(shè)計(jì)系統(tǒng)當(dāng)中，貼合整體的樣式特征。
所以，我們使用了一整套圖標(biāo)網(wǎng)格系統(tǒng)，應(yīng)對(duì)不同需求，在設(shè)計(jì)的過(guò)程中，這套網(wǎng)格有助于確保所有圖標(biāo)外部尺寸的一致性，也保證了內(nèi)部元素的統(tǒng)一性。
為了發(fā)掘全新的視角，我們決定從傳統(tǒng)的手繪圖標(biāo)開(kāi)始，尋找重新塑造圖標(biāo)設(shè)計(jì)的方法。這些圖標(biāo)所涉及到的元素，早已為全球數(shù)百萬(wàn)用戶所熟知，要重新設(shè)計(jì)圖標(biāo)外觀，并且還要成套且統(tǒng)一，這本身就是一個(gè)巨大的挑戰(zhàn)。
比如「電話」圖標(biāo)所對(duì)應(yīng)的聽(tīng)筒元素、「信息」圖標(biāo)所對(duì)應(yīng)的氣泡對(duì)話框這樣的元素，是不可能完全拋棄重新創(chuàng)造的，所以我們的真正的切入點(diǎn)是在形態(tài)和色彩上尋求解決方案。
越是簡(jiǎn)單的東西，重塑起來(lái)就越難。
在實(shí)際的設(shè)計(jì)過(guò)程中，我們嘗試了數(shù)以百計(jì)的造型變體，從完全放飛、非常規(guī)的的外部造型，到極其常規(guī)，大家熟知的造型解決方案，我們都逐一試過(guò)。而在色彩上的嘗試相對(duì)會(huì)顯得更加具有實(shí)驗(yàn)性：我們嘗試使用明亮的紫羅蘭色、栗色和淺綠色來(lái)進(jìn)行混搭。
當(dāng)然，我們很清楚，這樣的實(shí)驗(yàn)性的工作是探索過(guò)程中的一小步，但是它是必須的，是創(chuàng)造新設(shè)計(jì)的種子，是尋求正確答案的必經(jīng)之路。
在設(shè)計(jì)過(guò)程在，有一件有趣的事情發(fā)生在設(shè)計(jì)「相機(jī)」圖標(biāo)的過(guò)程中。我們嘗試過(guò)很多不同的圖標(biāo)造型，不同的元素，不同的樣式，但是其中始終有一個(gè)細(xì)節(jié)是不變的，那就是右上角的小紅點(diǎn)。這是為了暗示用戶，華為的攝像頭模組來(lái)自徠卡，這個(gè)紅色的小點(diǎn)就是向其致敬的標(biāo)識(shí)。
而下面的概念設(shè)計(jì)，則是強(qiáng)化了圖標(biāo)之間的幾何輪廓的差異，從而提升圖標(biāo)在智能手機(jī)屏幕上的對(duì)比度和識(shí)別度。
下一步，我們基于幾何圖形外觀差異性，設(shè)計(jì)了多種造型不同但同樣優(yōu)雅的圖標(biāo)。在基于這種風(fēng)格概念進(jìn)行延伸的過(guò)程中，我們會(huì)優(yōu)先考慮圓形的元素。而「天氣」圖標(biāo)明顯既不適合圓形也不適合方形來(lái)呈現(xiàn)，所以我們使用的是云和太陽(yáng)兩種元素的組合?！稿X包」圖標(biāo)使用的是矩形，然后搭配卡片的組合。盡管造型整體上是相對(duì)自由的，但是所有的圖標(biāo)都是遵循圖標(biāo)網(wǎng)格，并且在視覺(jué)權(quán)重上盡可能統(tǒng)一。
在色彩和樣式上，我們則更加傾向于漸變。沒(méi)有色彩漸變，純扁平的圖標(biāo)顯得過(guò)于幼稚和「古早」，沒(méi)有足夠的品質(zhì)感，所以，我們?cè)谛碌膱D標(biāo)設(shè)計(jì)上，開(kāi)始加入漸變色彩，提升質(zhì)感。
不過(guò)，在最終版本當(dāng)中，我們還是保留了圖標(biāo)外部的圓角矩形的外輪廓，然后將圖標(biāo)元素的內(nèi)徑進(jìn)行了適當(dāng)?shù)乜s減，漸變和核心的簡(jiǎn)約幾何特征依然是整套設(shè)計(jì)的最高優(yōu)先級(jí)。
這套設(shè)計(jì)方案展現(xiàn)了在整套 UI 界面中，圖標(biāo)這個(gè)小元素的設(shè)計(jì)上所需要投入的精力和潛在的難度。想要圖標(biāo)足夠協(xié)調(diào)、美觀、易用還要貼合品牌特征、還要區(qū)別于以往，是一件相當(dāng)不容易的事情。
細(xì)節(jié)里藏著魔鬼，任何細(xì)小的元素、線條輪廓、色彩的變化都可能會(huì)在屏幕上放大、被感知到。
文章來(lái)源：優(yōu)設(shè)網(wǎng) 作者：Tubik Studio
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
如期而至，這是標(biāo)簽欄控件總結(jié)的第二期。這一期真是掏空職業(yè)經(jīng)驗(yàn)，希望對(duì)你的工作有所幫助。
這一期我們來(lái)聊一聊標(biāo)簽欄中的關(guān)鍵元素——圖標(biāo)。
圖標(biāo)其實(shí)存在于界面中的許多地方，但因?yàn)檫@一期主要分析標(biāo)簽欄，所以我會(huì)借標(biāo)簽欄中較主流的圖標(biāo)樣式，總結(jié)一套圖標(biāo)制作與落地方法。這些方法在圖標(biāo)制作過(guò)程中都是相通的，大家可以舉一反三。
1. 圖標(biāo)樣式
圖標(biāo)具體樣式風(fēng)格的定義是非常主觀的，網(wǎng)絡(luò)上也流傳著許多的教程教大家如何設(shè)計(jì)五花八門的圖標(biāo)，所以在這里我就不再贅述了。我主要來(lái)總結(jié)一下基礎(chǔ)的標(biāo)簽欄圖標(biāo)一般有哪些樣式變化。
我調(diào)研了諸多的應(yīng)用程序，發(fā)現(xiàn)主流的 APP 標(biāo)簽欄樣式變化，大致分為以下五種。其中占比最多的是「由線型轉(zhuǎn)面型」。
調(diào)研的應(yīng)用程序中，所有使用到線性圖標(biāo)的應(yīng)用程序，都將描邊粗細(xì)限制在 1pt-2pt 之間。
2. 圖標(biāo)視覺(jué)大小
上一期我們講到，iOS 定義了一套標(biāo)簽欄圖標(biāo)的尺寸規(guī)范。
iOS 在這里所定義的尺寸并不是圖標(biāo)文件最后輸出的尺寸，而是給設(shè)計(jì)師作圖時(shí)，針對(duì)不同圖標(biāo)形狀的參考尺寸，目的是為了讓圖標(biāo)的視覺(jué)大小看上去一致。
那么為什么 iOS 會(huì)根據(jù)不同的圖標(biāo)形狀給出不同的圖標(biāo)尺寸呢？因?yàn)?50px×50px 的正方形比 50px×50px 的圓形面積更大，所以正方形的視覺(jué)大小也會(huì)大于圓形。為了統(tǒng)一圖標(biāo)的視覺(jué)大小，正方形要做適當(dāng)?shù)拿娣e收縮處理。（矩形同理）
于是我們看到許多平臺(tái)都推出了圖標(biāo)輔助網(wǎng)格規(guī)范 1。其實(shí)如果遵從「面積相等」原理，理論上所有的圖標(biāo)網(wǎng)格都應(yīng)該由下面這一套推理公式得出（以Material Design 標(biāo)準(zhǔn)圖標(biāo)網(wǎng)格為例）：
但實(shí)際情況是，不同平臺(tái)的圖標(biāo)輔助網(wǎng)格規(guī)范建議尺寸都有一定的差異。原因就在于，雖然有時(shí)候我們參考「面積相等」原則對(duì)圖標(biāo)視覺(jué)尺寸進(jìn)行了規(guī)范，但項(xiàng)目落地后發(fā)現(xiàn)視覺(jué)上可能還是有一些不協(xié)調(diào)，所以最終設(shè)計(jì)師還是會(huì)憑借自己的主觀判斷再進(jìn)行微調(diào)。
記?。汉玫脑O(shè)計(jì)作品是理性的設(shè)計(jì)理論與設(shè)計(jì)師本身感性的碰撞結(jié)果，二者缺一不可。
3. 圖標(biāo)輸出尺寸
iOS 規(guī)定標(biāo)簽欄圖標(biāo)的輸出尺寸統(tǒng)一為 31pt×28pt；Material Design 規(guī)定標(biāo)簽欄圖標(biāo)的輸出尺寸統(tǒng)一為 24dp×24dp。
但我們發(fā)現(xiàn)，在借助了圖標(biāo)網(wǎng)格解決了圖標(biāo)視覺(jué)大小的問(wèn)題之后，每一個(gè)不同形狀的圖標(biāo)，尺寸其實(shí)是不同的。為了方便前端落地，我們?cè)谳敵銮袌D文件時(shí)，要保持每一個(gè)圖標(biāo)文件的輸出尺寸是相同的。該怎么辦呢？
于是我們將一組圖標(biāo)都放置在一個(gè)比圖標(biāo)本身略大的相同尺寸容器中。而圖標(biāo)與這個(gè)容器之間的空白像素，正好也幫助我們規(guī)避了圖標(biāo)落地后，切圖邊緣像素可能被截?cái)嗟默F(xiàn)象發(fā)生，所以我們稱這個(gè)區(qū)域?yàn)椤赴踩吘唷埂?
對(duì)于安全邊距的規(guī)定：Material Design 全平臺(tái)規(guī)定圖標(biāo)的安全間距統(tǒng)一 2dp；iOS 則根據(jù)不同的圖標(biāo)使用場(chǎng)景給出的不同的圖標(biāo)網(wǎng)格和圖標(biāo)安全間距 2。
標(biāo)簽欄的圖標(biāo)一般分為靜態(tài)圖標(biāo)和動(dòng)態(tài)圖標(biāo)兩種。
靜態(tài)圖標(biāo)的實(shí)現(xiàn)方法相對(duì)容易，可以與前端溝通確定本次項(xiàng)目交付的標(biāo)簽欄圖標(biāo)文件是采用位圖還是矢量圖。如果是位圖建議交付 .png 格式文件；如果是矢量圖建議交付 .svg 格式文件。
使用位圖時(shí)請(qǐng)注意以下兩點(diǎn)：
不同項(xiàng)目環(huán)境輸出的切圖套數(shù)不同
請(qǐng)注意：這里我所提到的倍率全都是「絕對(duì)倍率」，這個(gè)概念非常關(guān)鍵。
「絕對(duì)倍率」指的是：以上所有的倍率都是針對(duì) @1x 設(shè)計(jì)稿下的輸出倍率尺寸。而當(dāng)你使用 @2x 作圖時(shí)，為了保證「絕對(duì)倍率」不變，你的切圖輸出倍率就應(yīng)該設(shè)置為 @0.5x/@1x/@1.5x 。
如果你在 @2x下作圖，卻依然保持輸出 @1x/@2x/@3x 的切圖，那你輸出的文件尺寸最終其實(shí)是 @2x/@4x/@6x。
有一點(diǎn)繞的話，我們以 Sketch 導(dǎo)出位圖切圖為例：
所以如果你日常使用的是 Sketch，也是用 Sketch 原生導(dǎo)出工具，那你的切圖預(yù)設(shè)應(yīng)該根據(jù)你的作圖尺寸而定，見(jiàn)下表：
如果你日常使用的是 PS，用 Cutterman 切圖，那么 Cutterman 會(huì)自動(dòng)識(shí)別你當(dāng)前的畫(huà)板，然后根據(jù)它的寬（橫屏情況下是高）來(lái)設(shè)定它的基準(zhǔn)分辨率。那么你在任何情況下輸出 @1x/@2x/@3x 的切圖，其實(shí)都是「絕對(duì)倍率」，不用像 Sketch 當(dāng)中一樣換算。前提是「設(shè)置當(dāng)前畫(huà)布為：Auto（自動(dòng)識(shí)別）」。
假設(shè)你在 @2x 下作圖，執(zhí)意不管不顧「絕對(duì)倍率」，又忘了交代前端人員手動(dòng)處理切圖尺寸的話，那你所有的切圖尺寸實(shí)際都是設(shè)計(jì)稿所需圖標(biāo)尺寸的2倍。就算前端小哥幫你手動(dòng)處理了切圖尺寸，每一張切圖所包含的像素信息，都比項(xiàng)目真實(shí)所需的要多很多，完全就是在徒增所需切圖文件的大小。
注意切圖文件大小
切記，公司的線上項(xiàng)目中，用戶從服務(wù)器下載的每一單位的流量都是要公司花錢的，所以許多項(xiàng)目管理者都是很在意控制線上文件大小的。于是壓縮切圖是 UI 必備的技能之一。
雖然圖標(biāo)的文件大小一般只有幾 KB，但是項(xiàng)目大了難免積少成多，所以在真實(shí)項(xiàng)目中，不管任何切圖我都會(huì)手動(dòng)壓縮一次。
這里推薦一個(gè)壓縮 .png 文件大小，但幾乎不會(huì)產(chǎn)生失真的免費(fèi)網(wǎng)站 tinypng3（是我曾經(jīng)深愛(ài)的一位前端小哥推薦給我的，在此表示感謝）。
位圖切圖會(huì)面臨交付的倍率圖過(guò)多、容易失真、文件大小難控制等問(wèn)題，但對(duì)于矢量圖，這些問(wèn)題都得到了解決。目前.svg矢量圖落地也在項(xiàng)目中越來(lái)越流行了。UI 可以在 Sketch 或 Ai 中制作。
一般與前端人員對(duì)接有在線圖標(biāo)庫(kù)對(duì)接與本地文件對(duì)接兩種。
在線矢量圖標(biāo)庫(kù)有很多，國(guó)內(nèi)比較流行的是阿里巴巴矢量圖標(biāo)庫(kù)-iconfont?；本地對(duì)接就是直接將文件發(fā)送給前端人員，他們會(huì)自行進(jìn)行項(xiàng)目文件的管理與調(diào)用。
如果 .svg 切圖輸出后，與設(shè)計(jì)稿中樣式不符，請(qǐng)注意排查以下三點(diǎn)：
svg 不支持漸變顏色填充；
為了提升用戶體驗(yàn)和產(chǎn)品趣味性，動(dòng)效微交互的標(biāo)簽欄圖標(biāo)也越來(lái)越流行了。
動(dòng)效在前端落地的方法其實(shí)有很多：
所以綜上所述，落地標(biāo)簽欄動(dòng)態(tài)圖標(biāo)，目前最高效可行的還是 Lottie 動(dòng)畫(huà)。
Lottie 是 Airbnb 開(kāi)源的一個(gè)跨平臺(tái)動(dòng)畫(huà)庫(kù)。表現(xiàn)層面它是一張圖片，但實(shí)現(xiàn)的方式是通過(guò)代碼，所以它是矢量的。很花式的動(dòng)畫(huà)也可以把文件大小做到非常小。
UI 與前端對(duì)接是通過(guò)交付一個(gè) json 代碼文件。
如果這是你第一次接觸 Lottie，再好不過(guò)的體驗(yàn)方法就是玩一玩阿里提供的一站式動(dòng)畫(huà)平臺(tái)：犸良動(dòng)畫(huà) 5。它最底層采用的技術(shù)就是 Lottie，只是被阿里二次封裝了許多預(yù)設(shè)的動(dòng)畫(huà)效果，你可以自定義其中的元素與參數(shù)，然后試著導(dǎo)出你的第一個(gè) json 文件。
接下來(lái)是簡(jiǎn)單粗暴的 UI 與前端對(duì)接實(shí)現(xiàn) Lottie 動(dòng)畫(huà)落地的全步驟參考。在此之前，想要全方位了解 Lottie 的相關(guān)信息，請(qǐng)參閱 Lottie 官方說(shuō)明文檔 6。
步驟一：安裝 Ae 和 bodymovin
制作 Lottie 動(dòng)畫(huà)，首先你必需兩個(gè)工具：Ae 和 bodymovin 插件。
Ae 最低版本要求為 Ae CC2014。又因?yàn)閾?jù)很多設(shè)計(jì)師反饋，目前 bodymovin 在漢化后的 Ae 中使用會(huì)出現(xiàn)諸多問(wèn)題，所以后面的教程都是基于 Ae 英文版。如果你漢化了Ae，最好在需要制作 Lottie 動(dòng)畫(huà)時(shí)取消漢化。
然后獲取 bodymovin7。bodymovin 插件更新至今，版本已非常多，并不一定最新版就適用于你當(dāng)前的項(xiàng)目，因?yàn)榍岸耸褂玫?bodymovin 解析包可能無(wú)法解析你用最新版 bodymovin 插件輸出的 json 文件。
一旦確定使用 Lottie，前端人員會(huì)在 GitHub 查詢 Lottie 相關(guān)文檔的，所以 UI 只需要配合前端確定一下合適的 bodymovin 插件版本就可以了。最終走查時(shí)，一定要確保當(dāng)前 bodymovin 輸出的動(dòng)畫(huà)在項(xiàng)目所需要運(yùn)行的所有環(huán)境中可運(yùn)行，才說(shuō)明 UI 使用的 bodymovin 插件和前端使用的 bodymovin 解析包版本是兼容的。
獲取了 bodymovin 后，將 bodymovin 拖入到 ZXP Installer8 中，ZXP Installer 會(huì)自動(dòng)識(shí)別插件安裝到 Ae。
安裝完成后，就可以在 AE 的「窗口-擴(kuò)展」中看到 bodymovin 啦。
步驟二：將 Sketch 或 Ai 中的文件導(dǎo)入 Ae
如果你技術(shù)嫻熟，當(dāng)然也可以直接在 Ae 中繪制圖案動(dòng)畫(huà)。但如果你還是習(xí)慣先在其他軟件中繪制好基礎(chǔ)圖案，再到 Ae 中制作動(dòng)畫(huà)，那你需要了解如何將圖案導(dǎo)入 Ae。
Ai 和 Ae 都是 Adobe 旗下的工具，所以 Ae 是可以完美解析 .ai 文件的，如果你是使用 Ai 作圖，可直接存儲(chǔ)為 .ai 文件，再在 Ae 中打開(kāi)。
如果你使用的是 Sketch，可以先導(dǎo)出為 .svg，再用 Ai 打開(kāi)該 .svg 文件，轉(zhuǎn)換存儲(chǔ)格式為 .ai，最后到 Ae 中打開(kāi)。
當(dāng)然，Sketch 還有直接和 Ae 對(duì)接的插件，AEUX（前身 Sketch2AE）9。需要在 Sketch 和 Ae 中同時(shí)安裝 AEUX 插件，Sketch 負(fù)責(zé)傳送，Ae 負(fù)責(zé)接收。具體的使用方法可以在官網(wǎng)教程中查看，我就不再贅述了。
步驟三：制作動(dòng)效并輸出
和靜態(tài)圖標(biāo)同理，為了保證落地時(shí)圖標(biāo)視覺(jué)大小一致，一組動(dòng)效圖標(biāo)輸出的文件尺寸應(yīng)該是相同的。所以在你制作動(dòng)畫(huà)之前需要確定合成文件的尺寸。Lottie 官方建議：因?yàn)?Lottie 輸出的是矢量動(dòng)畫(huà)，所以建議以 @1x 輸出動(dòng)效，前端人員在任何屏幕上放大并不會(huì)失真。
在制作之前請(qǐng)務(wù)必詳細(xì)閱讀 Lottie 所支持的 Ae 參數(shù)文檔10，以免辛苦做出的動(dòng)效，前端無(wú)法解析。特別提醒：原生環(huán)境中 bodymovin 是不支持解析 Ae 表達(dá)式的。
完成制作動(dòng)效后，就可以通過(guò) bodymovin 導(dǎo)出動(dòng)效了。
步驟四：預(yù)覽與交付
導(dǎo)出完成后在你的目的地文件夾中將存在一個(gè) .json 文檔，如果你的動(dòng)效中還使用了位圖，系統(tǒng)還會(huì)自動(dòng)生成一個(gè) images 文件夾。這些都是你需要交付給與你對(duì)接的前端開(kāi)發(fā)人員的文件。
.json 文件中記錄的動(dòng)效代碼 UI 不需要過(guò)多關(guān)心，但是其中兩個(gè)信息你是一定要了解的。它們是你與前端對(duì)接溝通和獲悉文件信息的一些關(guān)鍵參數(shù)。
UI 自檢動(dòng)效或其他相關(guān)人員需要預(yù)覽動(dòng)效的時(shí)候，可以用 LottieFiles11，拖入 .json 文件即可預(yù)覽。iOS 和 Android 還可以下載 LottieFiles APP，掃描預(yù)覽頁(yè)中的二維碼即可在移動(dòng)端預(yù)覽。
整個(gè)制作圖標(biāo)的流程我已經(jīng)全部整理出來(lái)了。首先要注意圖標(biāo)的規(guī)范，然后制作位圖、矢量、動(dòng)效圖標(biāo)時(shí)的注意點(diǎn)，我?guī)缀醢盐以谡鎸?shí)項(xiàng)目中踩過(guò)的坑都告訴大家了。剩下的創(chuàng)造性的環(huán)節(jié)就交給你了。
標(biāo)簽欄圖標(biāo)規(guī)范
靜態(tài)圖標(biāo)
1. 位圖圖標(biāo)
2. 矢量圖
動(dòng)態(tài)圖標(biāo)
1. Lottie的背景
2. Lottie如何上手
總結(jié)
文章來(lái)源：優(yōu)設(shè)網(wǎng) 作者：UCD耍家
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
圖標(biāo)在設(shè)計(jì)中是一個(gè)最為基礎(chǔ)的設(shè)計(jì)元素之一，對(duì)這部分知識(shí)花再多時(shí)間研究練習(xí)都是值得的，哪怕是工作多年的設(shè)計(jì)老手，也很難說(shuō)自己把圖標(biāo)設(shè)計(jì)，做到出類拔萃了。所以不論是溫故知新又或是學(xué)習(xí)精進(jìn)，花上幾分鐘看看這篇超干的文章，定有收獲。
本文會(huì)著重介紹圖標(biāo)基礎(chǔ)規(guī)則，深入探討圖標(biāo)的視覺(jué)重量和對(duì)齊問(wèn)題。
一個(gè)界面中的圖標(biāo)通常可以近似地看成是一些基本形的組合：橫向矩形、縱向矩形、傾斜矩形、圓形、三角形、正方形。模糊地看它們有相同的視覺(jué)重量，因?yàn)樗鼈兓蚨嗷蛏俚淖兂闪讼嗤陌唿c(diǎn)。
△ 圖標(biāo)的基本輪廓
根據(jù)圖標(biāo)的形狀，將其嵌入到對(duì)應(yīng)柵格中。例如，方形圖標(biāo)比三角形或細(xì)長(zhǎng)的圖標(biāo)更緊湊些。
△ 圖標(biāo)在柵格中
△ 柵格中的基本圖形
圖標(biāo)越緊湊，需要的空間就越少。圖標(biāo)銳利的邊緣或小細(xì)節(jié)越多，它在畫(huà)板上占據(jù)的空間就越大。
△ 圖標(biāo)示例，柵格中可以放不同異形的圖標(biāo)
△ 柵格中放更多細(xì)節(jié)的基本圖形：方形，圓形，三角形
當(dāng)心成為柵格的奴隸，柵格是用來(lái)輔助你而不是去限制你的。如果一個(gè)圖標(biāo)因?yàn)橐恍┩怀龅脑囟谝曈X(jué)上有更好的效果，那就讓它們突出。
為了使圖標(biāo)在非視網(wǎng)膜屏幕上清晰可見(jiàn)，請(qǐng)堅(jiān)持使用像素網(wǎng)格并在線性圖標(biāo)上優(yōu)先使用2px粗細(xì)的描邊。2px居中對(duì)齊的描邊通常會(huì)提供足夠的粗細(xì)和清晰的輪廓
△ 2像素線型圖標(biāo)示例
△ 2像素線型圖標(biāo)示例
如果圖標(biāo)選擇了1px的描邊，則應(yīng)該使用內(nèi)描邊或外描邊而不是居中的。
△ 1像素外描邊圖標(biāo)示例
△ 1像素外描邊圖標(biāo)示例
1px的居中描邊會(huì)使圖標(biāo)在放大到100%的情況下變的模糊，但如果放的更大會(huì)顯的清晰。
△ 1像素居中描邊線型圖標(biāo)示例
△ 1像素居中描邊線型圖標(biāo)示例
根據(jù)像素網(wǎng)格去設(shè)置斜線的起點(diǎn)和終點(diǎn)。當(dāng)斜線的角度為45°，30°和60°時(shí)會(huì)比不規(guī)則角度（像13.7°或81°）更清晰。如今仍有數(shù)百萬(wàn)人在使用低分辨率的屏幕設(shè)備，這就是為什么圖標(biāo)的清晰度仍然很重要的原因。
△ 矢量和位圖圖標(biāo)示例
最好從復(fù)雜的圖標(biāo)開(kāi)始去創(chuàng)建一個(gè)圖標(biāo)集。它將定義詳細(xì)程度，并且對(duì)設(shè)計(jì)具有相同視覺(jué)重量的圖標(biāo)們有幫助。
△ 不同細(xì)節(jié)程度的圖標(biāo)示例
當(dāng)圖標(biāo)的細(xì)節(jié)程度不一樣時(shí)，細(xì)節(jié)越多的圖標(biāo)越能吸引用戶的注意力，并且看起來(lái)視覺(jué)重量越大。
△ 細(xì)節(jié)不一致
在整個(gè)圖標(biāo)集中，圖標(biāo)內(nèi)部相鄰元素的間距不應(yīng)太小或不一致。定義最小間距并在各處以同樣的方式使用，以避免輪廓「粘連」。
△ 不一致的間隙
△ 間隙統(tǒng)一
對(duì)于線型圖標(biāo)，最好使最小間距和線條的粗細(xì)相等。線條要么清晰地分開(kāi)，要么精確地連在一起，永遠(yuǎn)不要含糊不清。
△ 不一致的間隙
△ 間隙統(tǒng)一
在圖標(biāo)集中，可能會(huì)有些重復(fù)的細(xì)節(jié)。刪掉它們，讓用戶的注意力集中在它們不同的地方，就像是數(shù)學(xué)里分?jǐn)?shù)要約分（化簡(jiǎn)分?jǐn)?shù)）一樣。你看到的視覺(jué)干擾越少，你對(duì)它的理解就越清晰。
如果目標(biāo)用戶已經(jīng)明白他或她使用的是什么，那就沒(méi)必要一遍遍的重復(fù)。例如：避免使用基于信封的圖標(biāo)不會(huì)讓人覺(jué)得這不是一個(gè)郵箱類app。（有點(diǎn)繞口，意思是：不用添加相關(guān)系列類的輔助圖標(biāo)也會(huì)讓人知道這是一個(gè)郵箱類app）
這條規(guī)則也適用于圖標(biāo)周圍的裝飾（框架，背景）。如果這些對(duì)圖標(biāo)的識(shí)別性沒(méi)幫助，則它們就會(huì)對(duì)圖標(biāo)識(shí)別產(chǎn)生阻礙。
不要將不同樣式，不同角度地元素混合在同一個(gè)圖標(biāo)集中。一致的風(fēng)格會(huì)對(duì)用戶識(shí)別圖標(biāo)有所幫助并讓用戶明白這些圖標(biāo)有同等的重要性和狀態(tài)。
△ 同一緯度的圖標(biāo)
△ 不同維度的圖標(biāo)
同樣的原理也適用于線型圖標(biāo)和面型圖標(biāo)。如果你把它們混在一起，人們可能會(huì)認(rèn)為它們有不同的重要性或狀態(tài)。當(dāng)然，除非你是故意的。例如，面型圖標(biāo)用于關(guān)鍵的指令，線型圖標(biāo)用于其他的指令。
△ 一組一致性圖標(biāo)
△ 一組不一致的圖標(biāo)
在界面中擁有兩種不同的圖標(biāo)是很好的。線型圖標(biāo)用作不可點(diǎn)擊或正常狀態(tài)，面型圖標(biāo)用于點(diǎn)擊狀態(tài)。
8px網(wǎng)格和12列布局常用于許多界面，與基于十進(jìn)制的尺寸相比更加靈活。12可以被2、3、4、6整除。因此24或48px的圖標(biāo)已成為了標(biāo)準(zhǔn)。如果需要更大的尺寸，可以對(duì)他們進(jìn)行縮放。
完美主義不是我們的目標(biāo)：沒(méi)有人需要為了像素完美而去追求完美的線條。但是，這對(duì)于產(chǎn)品中最終呈現(xiàn)正確而不失真的圖標(biāo)是很重要的。記住圖形中錨點(diǎn)數(shù)量達(dá)到最少并且相鄰元素之間不要有間隙。
△ 矢量圖標(biāo)的調(diào)整與優(yōu)化
還有那些煩人的「8.999px」或「100.001px」呢？如果錨點(diǎn)的位置很準(zhǔn)確，圖標(biāo)的邊緣看起來(lái)就會(huì)很清晰。此外，在合并形狀時(shí)，也不會(huì)有出現(xiàn)多余錨點(diǎn)和間隙的風(fēng)險(xiǎn)。
△ 矢量圖標(biāo)的調(diào)整與優(yōu)化
許多設(shè)計(jì)軟件（例如sketch）生成的svg文件都帶有不必要的文件——多余的編組，顏色圖層和剪切蒙版。讓我們看看，在sketch中，一切看起來(lái)似乎都不錯(cuò)。
△ sketch中的圖標(biāo)示例
在其它軟件中打開(kāi)這個(gè)SVG文件（例如Ai中），你會(huì)看到很多空?qǐng)D層，不必要的編組，有時(shí)還會(huì)有剪切蒙版。當(dāng)前端開(kāi)發(fā)人員將圖標(biāo)轉(zhuǎn)換成圖標(biāo)字體或在網(wǎng)頁(yè)上使用SVG文件的時(shí)候，這些都可能導(dǎo)致出現(xiàn)問(wèn)題。
△ Ai中的圖標(biāo)示例
你可以刪除這些垃圾文件然后保存。
你可以看到sketch生成的SVG文件（picture.svg）和Illustrator編輯后生成的SVG文件（picture_new.svg）在文件查看器中預(yù)覽的效果不一樣。順便說(shuō)下，也可以在代碼編輯器中刪除這些垃圾圖層。如果你知道SVG代碼的樣子，可以嘗試下直接刪除不必要的數(shù)據(jù)字符串。
當(dāng)然，這些建議并不是不可打破的規(guī)則。如果你知道自己在做什么，請(qǐng)隨時(shí)跳過(guò)它們。在我看來(lái)至少在兩種情況下嚴(yán)肅的幾何圖標(biāo)不是最好的選擇。
空狀態(tài)。如果你正在設(shè)計(jì)一個(gè)頁(yè)面的空狀態(tài)（缺省頁(yè)）如「沒(méi)有任務(wù)了」或「所有郵件已讀」，那么最好是用情感化的圖標(biāo)來(lái)表現(xiàn)或者只用文字去說(shuō)明。情感化圖標(biāo)會(huì)使用戶感到快樂(lè)，而沒(méi)有情感的幾何圖標(biāo)不會(huì)增加任何交互價(jià)值。
吉祥物和插圖。如果屏幕上你的界面中有吉祥物或者插圖，這種圖案應(yīng)該是感性的。我不知道設(shè)計(jì)師是如何通過(guò)有限的形狀選擇和堅(jiān)持使用網(wǎng)格去刻畫(huà)一個(gè)角色的。
還有一件事。在一些特殊情況下最好問(wèn)問(wèn)自己是否真的需要圖標(biāo)。這是解決問(wèn)題的最好方式嗎？寫點(diǎn)有意義的文字呢？要注意使用時(shí)的平衡，否則，可愛(ài)、時(shí)髦的圖標(biāo)將會(huì)讓人感到沮喪，所有的努力都將是徒勞的。
文章來(lái)源：優(yōu)設(shè)網(wǎng) 作者：彩云譯設(shè)計(jì)
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
最近發(fā)現(xiàn)一些能提高圖標(biāo)細(xì)節(jié)和高級(jí)感的小技巧，今天與大家分享下這幾種風(fēng)格的設(shè)計(jì)思路，以及需要注意的點(diǎn)。
分享大綱：
顧名思義圖標(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è)線性漸變。
下面來(lái)看看案例：
△ Atlassian的品牌圖標(biāo)系統(tǒng)
使用建議：運(yùn)用在面形圖標(biāo)效果會(huì)更好些，或者線條粗一些的圖標(biāo)，一般運(yùn)用在TabBar上面居多。
這種比較好用，將圖標(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)然還有一種類似的思路，可以將圖標(biāo)進(jìn)行放大化，并進(jìn)行色彩分割處理為背景，前景放圖標(biāo)和文案等。
如圖，我將前面兩個(gè)思路綜合運(yùn)用，圖形化背景和層疊圖標(biāo)。這里的圖形希望大家不要亂用，盡量使用圖標(biāo)的圖形來(lái)演變。
圖標(biāo)通過(guò)弱漸變透明處理，其思路有點(diǎn)類似第一個(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)系。
關(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ì)。
文章來(lái)源：優(yōu)設(shè)網(wǎng) 作者：功夫UX
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
圖標(biāo)是 UI 設(shè)計(jì)中最基礎(chǔ)也是很重要的部分，輔助人們更好的理解功能內(nèi)容。隨著扁平化設(shè)計(jì)風(fēng)格的普及，圖標(biāo)的風(fēng)格越來(lái)越簡(jiǎn)約，看似簡(jiǎn)單的圖形，實(shí)際要準(zhǔn)確的表達(dá)含義，也是需要注意一些方法的。以下是圖標(biāo)設(shè)計(jì)技巧的分享內(nèi)容：
設(shè)計(jì)圖標(biāo)是一個(gè)藝術(shù)創(chuàng)作的過(guò)程，里面也有很多需要被關(guān)注而不可忽視技巧。要知道如何設(shè)計(jì)好圖標(biāo)，是對(duì)于 UI 設(shè)計(jì)師來(lái)說(shuō)是不可或缺的重要技能。
在我設(shè)計(jì)圖標(biāo)的時(shí)候，我個(gè)人認(rèn)為有以下7個(gè)規(guī)則：
一個(gè)圖標(biāo)一個(gè)非寫實(shí)的表現(xiàn)。不需要擔(dān)心圖標(biāo)不夠真實(shí)，消除不必要的細(xì)節(jié)，用基本的形狀只保留最基礎(chǔ)的部分，讓這個(gè)圖標(biāo)更容易被理解。
有時(shí)候圖標(biāo)會(huì)因?yàn)橛懈嗉?xì)節(jié)而傳達(dá)了更復(fù)雜的意思，這反而是樣式問(wèn)題！
在整個(gè)圖標(biāo)系統(tǒng)中，你的圖標(biāo)要保持同一種樣式來(lái)確保圖標(biāo)完美協(xié)調(diào)。比如同樣的形狀，填充，描邊粗細(xì)，尺寸等。要制定好可以被復(fù)用的柵格，規(guī)范和樣式。
如果可以的話，盡可能重新設(shè)計(jì)這些圖標(biāo)，而不要混入其他不同風(fēng)格的圖標(biāo)來(lái)使用。
設(shè)計(jì)「完美像素」的圖標(biāo)，特別是在圖標(biāo)非常小的時(shí)候。這樣圖標(biāo)的描邊就可以保持銳利，不會(huì)有模糊。注意半像素的情況出現(xiàn)，盡量避免小數(shù)點(diǎn)參數(shù)。
這也可以幫你保持圖標(biāo)的辨識(shí)度，在你等比縮放他們的時(shí)候保持清晰。
確保你的圖標(biāo)的所有形狀有足夠的空間。筆畫(huà)和空間過(guò)于狹小會(huì)使圖標(biāo)更難被理解。
最少給2px的負(fù)空間
確保你的圖標(biāo)看起來(lái)是正確的，適當(dāng)?shù)恼{(diào)整元素的對(duì)齊來(lái)達(dá)到視覺(jué)上的平衡。
不要只關(guān)注參數(shù)，如果有需要就用上你的眼睛來(lái)衡量，輕微移動(dòng)這些元素。
所有圖標(biāo)保持同樣的尺寸，在圖標(biāo)周圍定義一個(gè)可調(diào)整的內(nèi)邊距范圍，盡量讓元素設(shè)計(jì)在這個(gè)范圍內(nèi)。不要擠滿所有元素。
當(dāng)圖標(biāo)需要額外控件時(shí)可以超出這個(gè)內(nèi)邊距范圍。
在設(shè)計(jì)階段，你的圖標(biāo)可能看起來(lái)是完美的，但還是需要將圖標(biāo)放到實(shí)際的界面環(huán)境中，測(cè)試他們是不是完美，有沒(méi)有可以調(diào)整的細(xì)節(jié)問(wèn)題。
確保每個(gè)新增的圖標(biāo)和其他圖標(biāo)顯示一致。
你在設(shè)計(jì)圖標(biāo)過(guò)程中，有用到以上的這些技巧嗎？可以在評(píng)論區(qū)告訴我，你是怎么怎么設(shè)計(jì)圖標(biāo)的。
文章來(lái)源：優(yōu)設(shè)網(wǎng) 作者：布萊恩臣
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
今天還是一篇非常干貨的原創(chuàng)文章。
內(nèi)容分為兩點(diǎn)：
圖標(biāo)的基礎(chǔ)特征
動(dòng)手設(shè)計(jì)之前，咱們先對(duì)完整的圖標(biāo)集進(jìn)行分析。
弄明白在畫(huà)整體的系統(tǒng)圖標(biāo)集合時(shí)，各個(gè)圖標(biāo)得具備哪些特征，有哪些切入點(diǎn)，可以作為我們?cè)趯?shí)際繪制時(shí)候的依據(jù)。
先來(lái)看幾組 iconfont 的案例，看不太清的同學(xué)可以戳圖片放大。
圍繞上面這些案例，咱們可以歸納出圖標(biāo)的幾點(diǎn)設(shè)計(jì)原則。比如：
1. 設(shè)計(jì)圖標(biāo)需要考慮延續(xù)性，圖標(biāo)之間互相牽連影響
圖標(biāo)幾乎不會(huì)以單個(gè)的形式出現(xiàn)，大多數(shù)都是以組歸類。符號(hào)整體性與統(tǒng)一性，都是依靠單個(gè) icon 的共性特征建立起來(lái)的。
比如 iconfont 中的這組icon，圖標(biāo)圓形的外輪廓，就保持了一致。其次用戶頭像的代表符號(hào)，也很好保持了延續(xù)性。
正是這種小特征，共同組成了圖標(biāo)庫(kù)的整體特征。
2. 設(shè)計(jì)手法趨同、圖形內(nèi)容差異
第二點(diǎn)好理解，設(shè)計(jì)風(fēng)格、手法要素需要統(tǒng)一，但是內(nèi)容傳達(dá)的差異必須要拉開(kāi)，避免圖形趨同導(dǎo)致功能混淆。
比如下面兩個(gè)案例，由于過(guò)于相近，導(dǎo)致用戶很難理解圖標(biāo)含義，是天氣，還是設(shè)置按鈕，這種情況我們?cè)谠O(shè)計(jì)時(shí)需要極力避免。
總結(jié)來(lái)說(shuō)，就是圖標(biāo)的共性往往體現(xiàn)在設(shè)計(jì)手法上，比如顏色、形狀粗細(xì)、細(xì)節(jié)的一致性，這些都是設(shè)計(jì)風(fēng)格的統(tǒng)一。
而圖標(biāo)的特性，往往體現(xiàn)在形狀內(nèi)容差異，形狀會(huì)決定圖標(biāo)的信息傳遞含義。所以共性要趨同，特性要拉開(kāi)，這個(gè)是設(shè)計(jì)圖標(biāo)集的基本原則。
3. 功能大于形式，圖形能理解的情況下樣式越簡(jiǎn)潔越好
不知道大家是否關(guān)注，曾經(jīng)在設(shè)計(jì)圈風(fēng)靡一時(shí)的MEB圖標(biāo)風(fēng)格，產(chǎn)品圈卻非常冷門，幾乎沒(méi)有產(chǎn)品在繼續(xù)用這種風(fēng)格作為功能性質(zhì)圖標(biāo)。
△ 該作品來(lái)自于網(wǎng)絡(luò)圖片，僅作交流使用
因?yàn)殡m然圖標(biāo)增加了小裝飾后，顯得有趣精致，但其實(shí)也增加了圖標(biāo)的識(shí)別難度以及識(shí)別效率，反而背離了圖標(biāo)的設(shè)計(jì)初衷。
所以對(duì)于系統(tǒng)功能圖標(biāo)而言，必要的簡(jiǎn)潔性，高效的識(shí)別率，才是關(guān)鍵。
圖標(biāo)的設(shè)計(jì)約束性
聊完了設(shè)計(jì)主張及基本的特征。接下來(lái)咱們開(kāi)始剖析圖標(biāo)的設(shè)計(jì)細(xì)節(jié)，包括分析制定圖標(biāo)的系統(tǒng)設(shè)計(jì)規(guī)范，應(yīng)該從哪些方面入手。
規(guī)范的第一點(diǎn)，就是圖標(biāo)的基礎(chǔ)形狀比例。這個(gè)比例，主要是約束長(zhǎng)與寬，共包含了四個(gè)關(guān)系，分別為「正方形 : 橫矩形 ：豎矩形 ：圓形」
這四個(gè)關(guān)系的約束，會(huì)讓圖標(biāo)集里的所有圖標(biāo)大小，看起來(lái)是一致的、統(tǒng)一的。橫矩形、豎矩形這兩個(gè)比例，會(huì)決定整套圖標(biāo)的飽滿程度，橫豎比例越一致，圖標(biāo)整體越飽滿。
這點(diǎn)大家可以自己斟酌，如果是泛娛樂(lè)型的產(chǎn)品，icon可以更飽滿一些。如果是偏工具化產(chǎn)品，那么還是可以優(yōu)先保障圖標(biāo)的識(shí)別度，飽滿程度倒是其次。
圓潤(rùn)飽滿型：
剛正工具型：
定了比例后，接下里就是對(duì)圖標(biāo)的細(xì)節(jié)刻畫(huà)。對(duì)于線性圖標(biāo)而言，最重要的細(xì)節(jié)就是線條粗細(xì)；對(duì)于面性圖標(biāo)而言，最重要的就是正負(fù)形之間的間距。
所以這些核心元素，在圖標(biāo)的核心線條、核心區(qū)域部分，間距樣式都應(yīng)當(dāng)保持統(tǒng)一。
通常在移動(dòng)端@2x內(nèi)，主流icon的粗細(xì)為3px，而4px大多數(shù)都是為功能性導(dǎo)航icon，細(xì)一點(diǎn)的圖標(biāo)通?？雌饋?lái)會(huì)更精致一些。
當(dāng)然也有部分產(chǎn)品使用的是2px，比如新版的YouTube，其次還有些較為復(fù)雜的icon，單根粗細(xì)的線段不一定能滿足其需求，所以還需要制定一條副線的粗細(xì)。
細(xì)節(jié)可以根據(jù)產(chǎn)品的調(diào)性來(lái)定，統(tǒng)一即可。
大比例跟基本元素確定后，也可以制定一些圖標(biāo)的個(gè)性化元素規(guī)范，比如圖標(biāo)的圓角大小、角度位置，等一些特殊的樣式。
像這些個(gè)性化的規(guī)范，顆粒度可以Case By Case來(lái)定義，圓潤(rùn)還是方正，可以根據(jù)產(chǎn)品的視覺(jué)風(fēng)格來(lái)定義就好。
這些規(guī)范樣式定好，就可以充分的讓圖標(biāo)集內(nèi)的圖標(biāo)，從設(shè)計(jì)上是保持一致的，且具有特色感。
上面講了關(guān)于圖標(biāo)的分析及規(guī)范。為了方便大家掌握，接下來(lái)咱們就來(lái)講講，具體動(dòng)手做，流程是什么樣的。這里我給個(gè)我的步驟作為參考：
第一步：繪制好圖標(biāo)基本網(wǎng)格
第一步，當(dāng)然是確定好圖標(biāo)icon的大小，以及上面我提到的基本尺寸比例，四個(gè)關(guān)系「正方形 : 橫矩形 ：豎矩形 ：圓形」的約束，構(gòu)建好基本骨骼。
我這里以圖標(biāo)容器大小為 56×56，預(yù)留8px安全間距，圖標(biāo)最大大小為 48×48。
由于視差關(guān)系，圓形在圖標(biāo)里面的尺寸是最大的，所以圓形的大小為48×48。因?yàn)槲蚁雸D標(biāo)飽滿一些，所以正方形的大小我兩邊各減去2，為42×42。
然后再繪制出橫矩形（48×36）與豎矩形（36×48），各線段之間的間距保持一致。
然后各個(gè)形狀居中對(duì)齊，這樣四個(gè)關(guān)系「正方形 : 橫矩形 ：豎矩形 ：圓形」定好后，基本的容器就制定好啦。
第二步：設(shè)定圖標(biāo)基本規(guī)范
接著制定好圖標(biāo)的基本規(guī)范，為了方便大家看得清，我這里設(shè)定圖標(biāo)的線條粗細(xì)為3px，圓角為6px，干凈簡(jiǎn)潔一些，讓它看起來(lái)更飽滿。
角度、斷點(diǎn)啥的，我這里就不定義了，因?yàn)橹皇鞘纠o大家看，講一下流程，所以盡可能簡(jiǎn)單一些。大家在做練習(xí)的時(shí)候，也可以嘗試自己去定義一下。
第三步：繪制圖標(biāo)
好了后就可以開(kāi)始繪制圖標(biāo)啦。我這里分別繪制十五個(gè)，作為示例
然后就是使用路徑工具，根據(jù)創(chuàng)意去繪制完善圖標(biāo)了。繪制的過(guò)程中，也可以不斷調(diào)整，讓圖標(biāo)看起來(lái)更協(xié)調(diào)，更飽滿，更容易識(shí)別。
花了十五分鐘左右，簡(jiǎn)單的十五個(gè)圖標(biāo)草稿就畫(huà)好了，接下來(lái)咱們開(kāi)始調(diào)整細(xì)節(jié)。
第四步：整體性調(diào)整
所有的圖標(biāo)繪制好了后，咱們就可以整體性的開(kāi)始打磨細(xì)節(jié)，把圖標(biāo)形狀的一些折角處、大小樣式調(diào)整一致，讓圖標(biāo)的節(jié)奏更清晰，整體樣式更統(tǒng)一。
這樣一組精致的系統(tǒng)icon就繪制好啦。
接著咱們也可以加點(diǎn)特色風(fēng)格進(jìn)行嘗試，比如填充一個(gè)顏色。
當(dāng)然細(xì)看的話，圖標(biāo)部分細(xì)節(jié)還是有點(diǎn)糙，其實(shí)還可以再調(diào)調(diào)，但這個(gè)主要做示例用，大家自己在做練習(xí)的時(shí)候，可別像我一樣偷懶嗷
上面講了很多方法經(jīng)驗(yàn)，文末給大家來(lái)點(diǎn)實(shí)際的。
我珍藏了很多較為不錯(cuò)的大廠圖標(biāo)集合庫(kù)，日常在畫(huà)圖標(biāo)沒(méi)靈感的時(shí)候，就會(huì)打開(kāi)看看這些，參考一下。
文件都是矢量格式的，編輯方便，還很全面。今天拿出來(lái)送大家白嫖了
文章來(lái)源：優(yōu)設(shè)網(wǎng) 作者：UX小學(xué)
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.yvirxh.cn