2021-4-27 周周
編者按：設(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ì)于這門(mén)學(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 之前，蘋(píng)果的圖標(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ù)，做到整體的一致性。
蘋(píng)果公司最近引入了 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.teruid.com )是一家專注而深入的界面設(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.teruid.com