2022-6-13 博博
做好圖標(biāo)設(shè)計是一個入門級 UI 設(shè)計師的必備技能之一，圖標(biāo)是界面中非常重要的組成部分，在實際的工作中，即便是一些工作多年且有一定經(jīng)驗的設(shè)計師，也很難保證自己設(shè)計的圖標(biāo)有多么完美。不同位置的圖標(biāo)在界面中所起到的作用不同、風(fēng)格也不同、其設(shè)計思路更是有所區(qū)別，例如金剛區(qū)、分類、標(biāo)簽欄、服務(wù)工具等。
用圖標(biāo)準(zhǔn)確的表達(dá)出實際含義，僅僅學(xué)其「形」是不夠的，需要對圖標(biāo)有較為全面、系統(tǒng)的認(rèn)識，了解圖標(biāo)的相關(guān)概念、正確的繪制方法及處理好一系列的細(xì)節(jié)，本篇文章將介紹圖標(biāo)設(shè)計的具體方法及要點，幫你規(guī)避掉一些常見的問題，讓圖標(biāo)設(shè)計有理有據(jù)。
本期大綱
1. 什么是圖標(biāo)？
圖標(biāo)是一種具有高度概括性的圖形化標(biāo)識，在界面中與文案相互支撐、搭配使用，隱晦或直白的表達(dá)內(nèi)容的具體含義、屬性特征、形象氣質(zhì)等豐富的視覺信息。
從概念上來講，圖標(biāo)可分為廣義、狹義兩種，廣義指的是現(xiàn)實世界中的圖形符號、且有明確指向的含義，而狹義的圖標(biāo)指的設(shè)備界面中的符號，這些設(shè)備泛指承載互聯(lián)網(wǎng)產(chǎn)品的載體，如手機(jī)、電腦、iPad…等。在 UI 設(shè)計中主要具是針對狹義的概念。
圖標(biāo)設(shè)計是一門學(xué)問，在我們的認(rèn)知中，通常將圖標(biāo)理解為某個概念的抽象圖形，通過設(shè)計清晰易懂的圖形傳達(dá)出比文字更高效率的信息，同時提升界面的美觀程度。想要將圖標(biāo)設(shè)計的更加出色，則需要頻繁練習(xí)、不斷試錯、持續(xù)探究并嘗試新的風(fēng)格，所以很值得我們花費大量的時間去鉆研練習(xí)。
2. 圖標(biāo)的基本特征
一個界面是由文字、圖標(biāo)、幾何圖形、圖片（音頻、視頻）組成，從 UI 設(shè)計師的角度，相對來說，其他三種元素大多運用到的是排版技巧，而圖標(biāo)則是需要繪制、創(chuàng)作的元素，在沒有圖標(biāo)的情況下，純文字也可以代替，可為什么貴還要費力費時的設(shè)計圖標(biāo)呢？原因主要有兩點：
首先，圖標(biāo)作為一種圖形符號的存在，跟文字的復(fù)雜程度相比，在識別效率上有著先天的優(yōu)勢，因文字需根據(jù)語種、長短的不同，所占用的界面空間資源就不同，在文字較多的情況下，大大減低了用戶瀏覽速度及信息傳達(dá)的效率，固圖標(biāo)將文字信息進(jìn)行了濃縮。好的圖標(biāo)不僅易于識別、效率更高，且讓界面更加簡潔，所以我們常見的圖文結(jié)合界面，絕大多數(shù)都是圖標(biāo)在上、文字在下，或者圖標(biāo)在左、文字在右，這些設(shè)計足以說明圖標(biāo)視覺傳達(dá)的優(yōu)先級高于文字。
其次，不同風(fēng)格、樣式的圖標(biāo)能讓界面看起來更美觀，提高用戶的視覺舒適度。設(shè)想一下，如果界面沒有任何圖標(biāo)的點綴，即便用戶也能使用，但看多來多少都有些枯燥無味，全部用文字來理解內(nèi)容還容易引起視覺疲勞。
扁平風(fēng)格圖標(biāo)主要是由形狀的描邊、填充進(jìn)行各種組合搭配來表達(dá)不同的含義，并通過不同的色彩體現(xiàn)出不同的視覺效果，最常見配色有以下幾種：
單色：簡潔、清晰視覺效果，常見于基礎(chǔ)功能圖標(biāo)。例如：B端功能入口，移動端個人中心、二/三級頁面的工具欄等，也有很多app的金剛區(qū)利用底色塊襯托反白的圖標(biāo)。
雙色：是很常見的功能性圖標(biāo)，至少由兩個以上的元素組成，在單色的基礎(chǔ)上加以色彩點綴，讓本身就不是很突出的元素不再單調(diào)，如果融入品牌色，能提升整個界面品牌調(diào)性，適用場景跟單色圖標(biāo)相比則范圍更廣。
多色：至少由三種或以上的形狀、顏色組合而成，常用于金剛區(qū)、產(chǎn)品分類列表、定制化菜單等。
漸變：漸變色的圖標(biāo)顯得較年輕化，可以是單元素的漸變或多元素的漸變組合，能映射出一種活潑、熱烈的氛圍。例如：視頻、直播等娛樂類型的APP，或車載UI等。
不透明度：調(diào)整圖標(biāo)中某個元素的不透明度，可在不變換色系的情況下豐富配色細(xì)節(jié)，還能與底色融合的更加細(xì)膩，解決多色漸變視覺跳躍的問題。
另外，在 UI 界面中，扁平化風(fēng)格圖標(biāo)使用最多的當(dāng)屬線性、面性、線面結(jié)合這三種類型。
線性
線性圖標(biāo)主要是通過線條描邊勾勒出來的圖形，在界面中的尺寸普遍偏小，其線條不能過于復(fù)雜，否則將會影響辨識度，看似不多的簡單線條搭配不同的色彩，則有很大的調(diào)整空間。
面性
面性圖標(biāo)主要通過剪影的形式來制作抽象的形體，相比線性圖標(biāo)則面積更大、視覺層級更高且更有體積感。通過不同色彩填充、切割手法塑造不同的設(shè)計感，以達(dá)到多種視覺表現(xiàn)的效果。
線面結(jié)合
線面結(jié)合的圖標(biāo)既有線段或輪廓、又有填充的色塊，相比純線/面性單一樣式的圖標(biāo)則細(xì)節(jié)更加豐富，如果把控到位，會有更好的視覺效果及信息傳達(dá)的效率，也不失趣味性。
擬物風(fēng)格的圖標(biāo)主要通過細(xì)節(jié)和光影、根據(jù)現(xiàn)實世界中的物品塑形打造出圖形立體效果，非?？简炘O(shè)計師的造型繪制、技法表現(xiàn)能力。這種風(fēng)格的圖標(biāo)有著極強(qiáng)的代入感，能讓用戶快速領(lǐng)會圖標(biāo)所傳達(dá)出的意圖及氣質(zhì)。
因為擬物化圖標(biāo)信息元素的高復(fù)雜度及突出的視覺效果非常搶眼，在頁面中頻繁出現(xiàn)會成為干擾其他信息的存在，游戲類應(yīng)用中使用的非常普遍（不過多贅述）。在其他類型的應(yīng)用中，大部分出現(xiàn)在營銷類型的界面，例如專題頁、成就榜、會員中心等。
跟擬物化圖標(biāo)相比，輕質(zhì)感就不會有太多復(fù)雜的元素，主要通過各種色彩漸變、發(fā)光、投影等圖層樣式體現(xiàn)出非常柔和的立體感，整體風(fēng)格偏年輕化，給人輕盈、簡潔及精致的感覺。在設(shè)計過程中，請使用干凈且和諧的配色，主要使用在界面較大區(qū)域的位置。
不僅僅是頁面背景有毛玻璃風(fēng)格，圖標(biāo)的毛玻璃風(fēng)格也很出彩，主要通過背景模糊、疊加、剪切圖層來實現(xiàn)（網(wǎng)上很多教程）。輕量漸變搭配毛玻璃的朦朧感，可以體現(xiàn)出圖標(biāo)的質(zhì)感與神秘感。
除上述這幾種風(fēng)格的圖標(biāo)之外，還有例如 2.5D、3D、像素風(fēng)、新擬態(tài)…等，但在 UI 設(shè)計中并不常用，就不一一舉例說明了。
1. 性格走向（描邊/拐角）
力量型：粗線條、直角拐點，給人一種力量、狂野的感覺，常用于體育、健身、機(jī)械類型的產(chǎn)品；
可愛型：粗線條、圓角設(shè)計，看起來活潑可愛，給人舒適、飽滿的感覺，在兒童、教育類產(chǎn)品中很常見；
嚴(yán)謹(jǐn)型：細(xì)線條、直角拐點，看起來工整、嚴(yán)謹(jǐn)，中規(guī)中矩，適合政府、法律類型的產(chǎn)品；
精致型：細(xì)線條、圓潤的拐角，柔和、干凈、纖細(xì)且精致的感覺，很適合極簡風(fēng)格的設(shè)計，在藝術(shù)、金融、珠寶等奢華類產(chǎn)品中比較常見。
2. 動態(tài)效果
如果想要突出金剛區(qū)、工具列表中的某個功能入口，將圖標(biāo)設(shè)計成動態(tài)效果，既能保持整體圖標(biāo)風(fēng)格的統(tǒng)一、又能單獨突出功能的重要性，起到強(qiáng)調(diào)的作用，用來吸引用戶的注意力，引導(dǎo)用戶操作，提升其點擊率。切記動效圖標(biāo)不能過多，當(dāng)什么都突出了等于什么都沒有突出。
其次，在年輕化、娛樂類型的產(chǎn)品 Tab 欄中的圖標(biāo)切換時，加入動態(tài)效果，可起到畫龍點睛的作用，還能通過動效表達(dá)出不同的情緒，降低切換時的枯燥感，好的 Tab 動效能傳達(dá)出整個產(chǎn)品的氣質(zhì)。
最后，如果有類似運營或短期內(nèi)的活動，需要吸引用戶注意但又不適合固定在界面中的某個位置，這時可以設(shè)計一個動態(tài)圖標(biāo)懸浮在設(shè)備某個位置（注意用戶體驗及交互原則），既不過多的占用頁面資源，還能同時顯示在多個界面，一舉多得。
動效圖標(biāo)：@墨染 ART 授權(quán)
遵循圖標(biāo)設(shè)計規(guī)范有利于設(shè)計師之間的合作及接下來的設(shè)計，以及產(chǎn)品整體圖標(biāo)風(fēng)格的統(tǒng)一性，起到約束的作用，即便在更換設(shè)計師的情況下，也不至于出現(xiàn)較大的問題。在制定合理的設(shè)計規(guī)范前需要先了解圖標(biāo)到底有哪些規(guī)范，應(yīng)從哪些方面入手，以便接下來的圖標(biāo)設(shè)計順利進(jìn)行。
為了保持圖標(biāo)元素的平衡，尺寸大小需要保持一致，通常我們會建立基礎(chǔ)網(wǎng)格尺寸進(jìn)行圖標(biāo)的繪制，常見的網(wǎng)格尺寸有 16、24、36、48、64、128、512、1024，這些網(wǎng)格尺寸并非固定，也會根據(jù)設(shè)計中的特殊尺寸而變化。
一個圖標(biāo)系統(tǒng)包括網(wǎng)格尺寸和圖標(biāo)元素兩部分，設(shè)定好網(wǎng)格尺寸后，就需要用 keyline 來約束圖標(biāo)形狀的長、寬比例了。最終設(shè)計的圖標(biāo)大小并不是跟隨網(wǎng)格尺寸，而是根據(jù)不同的形狀占比受制于圖標(biāo) keyline，最終形成統(tǒng)一的視覺大小。
從上圖中可以看出，相同尺寸的圖標(biāo)在真實的視覺中相差很大，這就好比一個 100 像素的圓形、跟 100 像素的方形相比，站在邏輯角度，大小是相同的，但在視覺上，一定是方形顯得更大。所以我們常說的圖標(biāo)大小相同，并非真實尺寸，而是視覺感受。
為保持圖標(biāo)視覺上的一致性和平衡感，需要先繪制 keyline 用來指導(dǎo)、規(guī)范圖標(biāo)設(shè)計。keyline 由圓形、正方形、長方形-橫、長方形-豎、三角形和對角線組成，網(wǎng)格的大小需保持 4 的倍數(shù)，便于不同尺寸的圖標(biāo)都能適配，可使用 24*24px 的網(wǎng)格尺寸為基準(zhǔn)，其他尺寸的圖標(biāo)可通過增加倍數(shù)以此類推，如 48*48px、72*72px……
下圖是以 24px 尺寸的網(wǎng)格參考基準(zhǔn)示例（出血為 2px）：
根據(jù)產(chǎn)品屬性及目標(biāo)用戶并結(jié)合應(yīng)用場景，找到最符合自身產(chǎn)品性格、氣質(zhì)的圖標(biāo)設(shè)計風(fēng)格，例如健身應(yīng)用屬力量、粗獷類型，圓角、曲線適合女性產(chǎn)品等，在前面的「性格與氣質(zhì)」中有舉例說明。
經(jīng)過圖標(biāo)風(fēng)格的確定，圖標(biāo)細(xì)節(jié)便是接下來繪制過程的核心部分，對線性圖標(biāo)來說，注重的是線條的粗心，而面性圖標(biāo)則注重各小圖形之間的距離，所以在繪制時，需要保持線條、間距的統(tǒng)一，方便后期的圖標(biāo)更新迭代。
線性描邊粗細(xì)
我們以 iOS@2x 為基準(zhǔn)（避免@1x 的 3px 描邊變成 1.5px，小數(shù)點），可適配最 2px、3px、4px 最常用的描邊粗細(xì)，4px 視覺較重，用于優(yōu)先級較高區(qū)域的功能性圖標(biāo)，2px 看起來會顯得更加精致，在設(shè)計中，還需根據(jù)產(chǎn)品的行業(yè)屬性及調(diào)性來確定描邊的粗細(xì)，并統(tǒng)一起來。
面性正負(fù)形間距
面性圖標(biāo)需要確保每個單獨的形狀之間有足夠的間距，以 24px 大小的形狀為例，其間距不能小于 1px，以此類推，雖然未規(guī)定上限，但間距也不宜太大，否則無法相互組合關(guān)聯(lián)，以實際視覺的舒適度為準(zhǔn)。
根據(jù)行業(yè)類型及風(fēng)格進(jìn)行創(chuàng)意設(shè)計，如線性統(tǒng)一斷點、融入品牌基因、單個元素傾斜、節(jié)日氛圍烘托、修飾元素等，為圖標(biāo)塑造靈魂或傳遞更多信息而進(jìn)行的二次創(chuàng)作。
1. 識別性
圖標(biāo)存在的意義，主要是為了快速傳遞信息，不能讓其成了無用的裝飾品。隨著互聯(lián)網(wǎng)的普及、時間的積累，人們對一些線上圖標(biāo)信息的隱喻已根深蒂固，早就形成了慣性思維，所以我們設(shè)計的圖標(biāo)必須要符合用戶的認(rèn)知，能讓用戶快速理解，即便出現(xiàn)個別特殊情況，也要用文字清楚的標(biāo)注說明，否則一旦讓用戶產(chǎn)生疑惑，圖標(biāo)就起了負(fù)面作用，在很大程度上影響使用體驗。符合認(rèn)知的圖標(biāo)能讓用戶下意識的理解且接近心理預(yù)期，減少學(xué)習(xí)成本，提升使用效率。
2. 簡潔美觀
圖標(biāo)是將現(xiàn)實世界中的事件/事務(wù)用抽象的圖形表現(xiàn)出來，如果過于追求完美而設(shè)計的太復(fù)雜，還不如直接上圖片來的快，所以不能過于展現(xiàn)真實物品的細(xì)節(jié)，最終設(shè)計出正確而不失真的圖標(biāo)尤為重要，這樣既能用于傳遞信息，又便于用戶快速且清晰感知。
3. 視覺對齊
為確保視覺平衡，異形元素在使用系統(tǒng)自動對齊后，會有一定的偏差，需手動微調(diào)進(jìn)行視覺對齊。
4. 保持一致
針對大型項目，要想整個家族的圖標(biāo)更加和諧，保持相同的樣式及設(shè)計原則著實不易，尤其是在多人完成設(shè)計的情況下，事先有一個清晰的設(shè)計原則和規(guī)范是必不可少的。圖標(biāo)都有著對應(yīng)的視覺重量，例如描邊粗細(xì)、填充模式、繁簡程度等屬性，需要做的就是控制好這些關(guān)鍵因素，讓整體看起來視覺重量相同且能相互關(guān)聯(lián)組合到一起，保持所有圖標(biāo)的一致性。
5. 最小間隙
單個圖標(biāo)的各元素之間要有呼吸感，需要適當(dāng)?shù)牧舭?，如果描邊過大，整個條看起來感覺像糊成一團(tuán)或臃腫不堪，如果存在類似問題，可通過減小描邊值或降低圖標(biāo)的復(fù)雜程度來解決。
6. 使用 2 的倍數(shù)
以偶數(shù)為單位的設(shè)計便于數(shù)據(jù)的計算（2 的倍數(shù)），例如正負(fù)形間距、描邊值等，在 iOS@2x 設(shè)計下，@1x 也不會出現(xiàn)小數(shù)點。在移動端設(shè)計中，最小的圖標(biāo)為 24px，可被 2、3、4、6、8、12 整除，也是可以被整除最多的數(shù)值，因此，可靈活的等比縮放。
7. 延展性
即便做好了前面的一切，圖標(biāo)設(shè)計工作也并未完成，需要做的是持續(xù)測試圖標(biāo)的可用性，做好后續(xù)的完善與優(yōu)化，沒有最好、只有更好，以確保上線后的效果和后續(xù)的迭代。
阿里巴巴矢量圖標(biāo)庫： https://www.iconfont.cn/ ，90%以上常見的矢量圖標(biāo)下載；
飛書官方圖標(biāo)庫： https://iconpark.oceanengine.com/official ，海量資源可在線修改，調(diào)整描邊、填充、單/雙/多色、端點后下載 SVG 格式圖標(biāo)。
雖然上述圖標(biāo)資源基本能滿足我們的日常設(shè)計所需，但僅僅只能是作為參考而已，一味的圖方便、投機(jī)取巧只會毀了自己的動手、創(chuàng)新能力。
圖標(biāo)設(shè)計是一個非常龐大的版塊，且有很多個分支，例如：金剛區(qū)、標(biāo)簽欄、應(yīng)用圖標(biāo)…等，每個分支都有自己的一套設(shè)計法則，我們需要在不斷的學(xué)習(xí)與創(chuàng)新中獲得更多經(jīng)驗。一篇文章不足以道出圖標(biāo)設(shè)計的精髓，但可以在不斷沉淀、相互探討、持續(xù)的學(xué)習(xí)中一起進(jìn)步。
轉(zhuǎn)載請注明：優(yōu)設(shè)網(wǎng)
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計( m.88yangsc.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、
UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司
圖標(biāo)定制設(shè)計之一：6大章節(jié)！圖標(biāo)設(shè)計基礎(chǔ)知識全方位入門指南
圖標(biāo)定制設(shè)計之二：超全總結(jié)！金剛區(qū)圖標(biāo)設(shè)計的 10 大風(fēng)格
圖標(biāo)定制設(shè)計之三：想讓圖標(biāo)更精致？先掌握這11個容易忽略的設(shè)計細(xì)節(jié)！
圖標(biāo)定制設(shè)計之四：學(xué)會SVG圖標(biāo)的高級用法，界面適配效率翻一倍！
圖標(biāo)定制設(shè)計之五：研究微軟 Fluent 圖標(biāo)規(guī)范后，我總結(jié)了這9個知識點！
圖標(biāo)定制設(shè)計之六：為什么別人的圖標(biāo)設(shè)計又快又好？來看騰訊高手總結(jié)的知識點！
圖標(biāo)定制設(shè)計之七：客戶說B端圖標(biāo)太普通沒新意，該怎么解決？
圖標(biāo)定制設(shè)計之八：從6個方面幫你快速掌握圖標(biāo)設(shè)計規(guī)范
圖標(biāo)定制設(shè)計之九：不止畫圖標(biāo)！5 個金剛區(qū)的交互設(shè)計思考
藍(lán)藍(lán)設(shè)計的小編 http://m.88yangsc.com
