編輯導語：圖示是介面視覺組成的關鍵要素之一，而瞭解這些圖示的基礎知識，也是入門設計的必備條件之一。本文作者總結了一些產品的圖示，對圖示的基礎知識進行了分析，一起來看一下吧。
日常生活和工作中，我們與各種各樣的介面打交道。作為設計師，圖示是介面視覺組成的關鍵元素之一。瞭解圖示相關的知識，以及正確規範的繪製方法，是入門設計的必備條件之一。本文將對圖示進行系統的介紹，希望我的這篇文章可以給大家帶來一些幫助。
一、什麼是圖示
1。 概念
圖示，是一種圖形化的標識，它有廣義和狹義兩種概念，廣義主要指具有指代意義的圖形符號，具有高度濃縮並快捷傳達資訊、便於記憶的特性。一個圖示是一個小的圖片或物件，代表一個檔案、程式、網頁或命令。
圖示有助於使用者快速執行命令和開啟程式檔案，單擊或雙擊圖示以執行一個命令。圖示也用於在瀏覽器中快速展現內容，所有使用相同副檔名的檔案具有相同的圖示。
隨著計算機的出現，圖示被賦予了新的含義，又有了新的用武之地。在這裡圖示成了具有明確指代含義的計算機圖形，桌面圖示是軟體標識，介面中的圖示是功能標識，在計算機軟體中，它是程式標識、資料標識、命令選擇、模式訊號或切換開關、狀態指示。
圖示在計算機可視作業系統中扮演著極為重要的角色，它可以代表一個文件、一段程式、一張網頁或是一段命令。我們還可以透過圖示執行一段命令或開啟某種型別的文件，你所要做的只是在圖示上單擊或雙擊一下。
圖示是具有指代意義的具有標識性質的圖形，它不僅是一種圖形，更是一種標識，它具有高度濃縮並快捷傳達資訊、便於記憶的特性。
2。 範圍
圖示應用範圍很廣，軟硬體網頁社交場所公共場合無所不在。例如：商城裡的導視系統、男女廁所標誌和各種交通標誌等。狹義主要指應用於計算機軟體方面，包括：程式標識、資料標識、命令選擇、模式訊號或切換開關、狀態指示等。
二、圖示的發展史
1。 起源
圖示不僅歷史久遠，從上古時代的圖騰，到20、21世紀具有更多含義和功能的各種圖示，而且應用範圍極為廣泛，可以說它無所不在。1973年，在施樂公司帕洛阿爾託研究中心發明出來。該電腦首次使用了桌面比擬（Desktop metaphor）和滑鼠驅動的圖形使用者介面（GUI）技術，誕生了最早的擁有圖形化介面的電腦，著名的「 Xerox Alto」。
但是當時電腦效能不足，董事會也不看好，並未推出商品化，所以這款概念機並沒有走進人們的視野，但是它的後續機型施樂之星在1981年問世，並且成為了計算機史上的里程碑。
1979年喬布斯參觀了施樂的PARC研究所看到施樂原型機 Xerox Alto，喬布斯決定開發圖形使用者介面的新電腦。1983年蘋果公司推出了Apple Lisa，首次採用GUI的商品化電腦。1985年微軟公司也應用GUI推出了Windows 1。0。
2。 歷程
80年代，本身是想把圖示做的的具象，卻因為當時電腦效能不足無法做到，所以設計師只能在有限的空間裡面進行創作，對好的標準是越具象越好。
微軟和蘋果相繼推出了新的系統介面，隨著1995年計算機顯示卡在解析度和色域上的提高，設計師或藝術家有了更大的發揮空間，隨之出現了更多顏色的運用以及更多透視效果的可能性。剛開始只能設計單色的簡單的圖示，到後來可以執行各種創意，實現各種效果，一直到現在。
2007年，蘋果釋出第一代iPhone以及iOS系統，主題圖示和當時的 mac OS 系統一致，玻璃質感及擬物化的風格顯著，它的出現打破了人們對“傳統手機”的定義。這款 iPhone 的主題圖示風格，一直穩定到了 iOS7 的釋出，才出現了顛覆性的變化。
2013年的WWDC大會中，蘋果公司釋出的iOS7系統，系統介面開始向扁平化風格轉變。這場大會也使擬物風格逐漸走向下坡路，直到扁平風格的全面普及，擬物風格就沒有再被廣泛應用。
2020年WWDC20蘋果釋出mac OS Big Sur，這次的更新把圖示採用了“新擬物”。“新擬物”的前身就是擬物圖示，這是最早被Apple提出的設計概念，就是在介面中模仿現實物體紋理材質，在特定光照下的效果設計；目的是讓人們在使用介面時習慣性地聯想到現實物體的使用方式。而“新擬物”是將真實光線用於虛擬物件。
三、產品應用圖示
產品應用圖示，也叫啟動圖示，是品牌和產品的核心元素。圖示以簡單、大膽、友好的方式傳達產品的核心理念和意圖。因為產品應用圖示的設計師不同，設計無法得到統一，所以蘋果官方在ios系統中統一了圓角矩形的大小，在有限的區域內進行設計。而安卓就沒有那麼規範，處於百家齊放的現象。
1。 中文文字圖示
常見中文圖示又分為單字、多字和字加圖形的幾種型別。提取產品名稱中最具代表性的獨立文字，進行字型設計，透過對筆畫及整體骨架進行設計調整，以達到符合產品特性和視覺差異化的目的。作為國人對漢字的敏感度，這樣的設計形式大大降低了使用者對品牌的認知成本。
2。 英文字母圖示
英文字母圖示通常是提取產品名稱首字母進行設計，由於英文字母本身造型簡潔，結合產品特點進行創意加工，很容易達到美感和識別性兼備。
3。 數字圖示
數字對於我們來說是非常敏感的，利用數字進行設計能給人親和力。由於數字的識別性很強，易於品牌傳播與使用者記憶。
4。 特殊符號圖示
特殊符號圖示在應用圖示的設計案例中相對較少，由於符號本身的含義會對產品屬性有一定限制，所以針對性比較強。
5。 幾何圖形圖示
幾何圖形的運用設計給人簡約、現代、個性、富有空間感等視覺感覺，從單個具象圖形到複雜的空間感營造，幾何圖形的表現形式非常豐富。
6。 動物/單雙行剪影圖示
動物剪影通常是提取動物整體形象或者區域性特徵部位作為設計元素，這類應用圖示背景為單色或者漸變色，少量的會輔助一些圖形作為背景元素，動物採用單色填充，以白色填充居多。
單雙形是指應用圖示只展示單個或兩個的剪影圖形，生活中可以作為剪影設計的元素很多。如食物、工具、生活用品、學習用品、娛樂道具等等。可以獨立形成剪影圖形，也可以根據產品特點進行創意加工，最終形成應用圖示獨有的造型圖案。
7。 圖形重複圖示
將相同的圖形進行有序的排列，排列形式有梯度變化、等大均排、規律性重複、配色差異、大小錯落等。這樣的設計方式可以給單調的圖形增加層次感和構圖飽滿，有一定梯度變化和規律性重複的圖形組合可以傳遞一定的韻律感和動感。
8。 正負形圖示
正負形的設計在LOGO圖形設計中是比較常見的表現手法，運用在圖示設計中，以正形為底突出負形特徵，以負形表達產品屬性。利用正負形進行設計，圖形設計感較強，正形與負形可以更加充分地表達產品特徵與服務。
9。 線形圖示
線性圖示風格給人簡潔輕快的感覺，線性設計的方式分閉合式和開放式，可以是一條連續的線條或者幾條線段組成。在有色背景上面線條通常反白處理，背景設計可以是單色、漸變色、其他輔助圖形設計等。
10。 白色漸變圖示
白色漸變圖示是利用白色漸變填充，不透明度 100%到X%之間設定完成。白色漸變圖形具有空間感、質感，視覺效果較好，被廣泛運用在應用圖示設計中。
11。 彩色漸變圖形
彩色漸變圖示是利用多種顏色進行漸變，比起白色漸變圖形，彩色漸變圖形的色彩表現更加豐富。多種顏色進行漸變銜接的時候要注意色相的對比，營造空間感。
12。 動物區域性圖示
利用動物區域性進行圖形設計，可以讓元素特徵更加明顯。比起展示整個動物形象，區域性特徵展示視覺表現力更強。
13。 人體區域性圖形
利用人體區域性作為圖形設計元素，比較常用的有眼、嘴巴、手掌、頭部等。利用人體的元素進行設計，使用者對圖形的敏感度更強，易於傳播和記憶。
14。 卡通形象圖示
卡通形象與動物形象容易混淆，因為很多卡通形象都是基於動物設計演變而來。這裡單獨提取出來是為了歸類一些單純以動物外形為設計元素的表現手法。卡通形象設計在應用圖示的設計中是非常常見的，很容易對使用者形成記憶。
15。 擬人化圖形圖示
透過對接近圓形或者構圖飽滿的圖形新增眼睛等元素，可以使整個圖形擬人化。給原本冰冷的圖形賦予其生命，擁有一定的情感表達，讓產品更加親民，更容易被使用者所接受和記憶。
16。 從功能服務提煉圖形
為了更加清晰的傳遞產品的某項功能與服務，根據產品的功能服務提取元素進行圖形設計也是比較常用的表現手法，如計算器、日曆、導航等直接提取相關聯的圖形元素進行設計，一目瞭然地傳遞出產品資訊。也可以從產品服務內容入手進行提煉，如教育類產品，提取學士帽為元素進行設計。
17。 漸變色背景圖示
漸變色背景的運用越來越受到設計師青睞，相對於單色的背景視覺表現力更加豐富，整體色彩給人通透的感覺。漸變色可以是雙色漸變，也可以是多色漸變，根據產品的氣質靈活地運用。
18。 文藝風格圖示
文藝風格圖示設計配色清新、復古、簡約，適合帶有文藝風格類的產品。設計方向為簡約的圖形組合或者文藝風格的字型設計為主，圖示整體留白較多，配色簡約，白色背景居多。如果是深色背景則採用黑色、復古色為主。
19。 活動氛圍圖示
對應用圖示進行特定的活動氛圍包裝。會保留原本的圖形面貌，進行整體的氛圍營造，以突出購物火爆的場景感。
20。 遊戲角色圖示
遊戲類應用圖示設計需要設計師具備較強的寫實圖示設計功底，設計方向主要有：遊戲角色、純文字、道具或標識、明星頭像、輔助圖形或元素等。設計表現力需要顏色鮮豔、角色表情和動作誇張、設計精美有質感等。
IOS啟動圖示keyline線規範：
蘋果官方會給 Production Templates 檔案，我們只需要使用1024px*1024px這個尺寸進行啟動圖示的設計，把設計好的的啟動圖示放在檔案裡的智慧物件的圖層裡，這個時候你會發現所有的尺寸的圖示都會換成我們做好的啟動圖示。
這裡提醒一下，雖然我們看見的iOS的圖示是個圓角矩形，但是機上它並不是標準的圓角矩形，而是某種連續曲線。但我們很難肉眼地看出區別，因此並不用糾結它的圓角，按照直角矩形的尺寸進行繪製就好。
Android啟動圖示keyline線規範：
創安卓 Material Design 要求的基本尺寸說 48dp，但這是 1：1 的尺寸，也是原始尺寸，而繪製時要求是基礎尺寸的 400%，也就是 192dp，與之相對應的網格基準由 1px 變為 4px。透過保持此比率，對原始影象所做的任何更改都將按比例放大或縮小，從而在比例值返回到100%（48dp）時保留銳邊並正確對齊。
圖示網格為圖形元素的一致但靈活的定位建立了明確的規則。關鍵線形狀基於網格，透過使用這些核心形狀作為基線，您可以在整個產品圖示中保持一致的視覺比例。這些關鍵線形狀使用預設標準：圓形、正方形、矩形、正交線和對角線。它們統一了產品圖示，並在網格上保持一致的位置。
四、功能圖示
1。 單色線性圖示
風格簡約、外形簡單，具有強烈的識別性，在視覺感知上輕鬆、乾淨。
2。 雙色線性圖示
更具表現力，細節更豐富，結合顏色的疊加、對比、互補提升了圖示的層次感和豐富度。
3。 不透明度線性圖示
不透明度的疊加和變化，提升圖示的層次感和空間感，降低圖示的壓迫性。
4。 漸變線性圖示
漸變線性帶出圖示的質感，結合「不同深度」或「不同飽和度」的變化，讓圖示更具有細節和層次。
5。 單色面 + 點綴色圖示
外形使用統一的顏色，結合圖示的不同屬性感知使用不同的顏色進行點綴；或使用不同顏色作為主色，黑白作為點綴色。
6。 雙色圖示
透過對比色、鄰近色的搭配營造整體的圖示氛圍，提升了圖示的層次和豐富度，雙色的表達也增添了圖示的趣味性。
7。 漸變圖示
微弱的漸變提升圖示的質感，漸變的方向會影響整體圖示的視覺效果，因此可以根據不同設計的需要調整。
8。 不透明度/灰度/飽和度變化
讓單色圖示變得更加具有層次感和空間感，設計細節更加豐富，降低了單色面性圖示的厚重感。
9。 不透明度/弧度/飽和度變化+漸變
漸變設計提升了面形圖示的質感，從顏色上具有一定的豐富度，在漸變的基礎上，還可以對圖示做顏色的差異化，讓圖示更有層次感。這類圖示被應用在UI介面的列表中或者頂部入口的位置。
10。 顏色疊加穿透
圖示透明疊加之後產生了交錯的負形，疊加出來第三個面，整體設計依舊保持扁平化，但卻多了一份層次感，並增加了圖示的細節。
11。 漸變層次疊加
整體效果與不透明度變化較為接近，透過漸變的深淺變化，使得形狀的銜接處出現了明暗對比，因此圖示也具有了厚度和層次感。
12。 毛玻璃圖示
利用背景模糊的效果，單從視覺上與透明度變化或者顏色疊加相比都更具有空間感一點，圖示具有較強的設計感。
13。 輕質感圖示
與漸變層次疊加相似，區別在於顏色更加豐富，利用多個色塊，多種顏色或者多角度的漸變及陰影，整體風格偏向插畫風和漸變質感，視覺上更接近於立體圖形，整體風格比較偏向絢麗多彩的顏色風格，質感和細節比較豐富。大多數用在品類區，與常規的單色圖示相比，需要更具有吸引力。
14。 輕擬物圖示
核心基礎和擬物設計一致，省略了更多複雜的細節，重點放在光影的表達上，高光和陰影都非常到位。
15。 寫實圖示
零幾年一幾年的時候，直接反映現實、投射現實，方便使用者看一眼就知道設個功能或者這個按鈕是幹嘛的，後來因為顯示器的解析度跟不上，慢慢風格變為扁平化，最近幾年又逐漸興起，最典型的就是Apple的Mac系統上的圖示。
16。 2。5D圖示
建立在軸測圖的基礎上，XYZ軸，具有立體透視的感覺。
17。 卡通圖示
比較適合固定的功能區/品類區，一般會用在運營位比較多。
18。 照片處理圖示
常見於生鮮類APP，讓食物看上去更真實，更鮮活。
19。 裝飾圖案填充圖示
黑白線+品牌色，或者兩個相近色。
20。 整體填充圖示
弱面強線的外形識別度較高，更符合圖示的表達。
21。 線面錯點陣圖標
在雙色圖示的基礎上，線和麵按照統一的百分比進行縮放，或使用統一/有規律的圖案，進行透視和位移的設計，整體呈現一種交錯疊加的視覺效果。
22。 卡通插畫圖示
整體感覺比較卡通、可愛、二次元。
五、設計規範
圖示是任何設計系統或產品體驗的重要組成部分。圖示能夠幫助我們快速導航，它們與語言無關，最重要的是：它們非常小，所以它們不佔用很多地方。圖示是良好設計系統的基本組成部分。因此科學嚴謹的設計規範能幫助我們設計精緻、風格統一的圖示。
1。 尺寸
ios的刪格式 4 的倍數，安卓的刪格式 8 的倍數。想要做到兩端都適配就得選用8的倍數，又因為ios的最小可點選區域是 44px，所以 48px 是比較合適的尺寸。不是硬性規定，最好要遵行一下 4 或者 8 的倍數。
圖示繪製基於 48x48px 畫布繪製的線性圖示，線寬預設為 4px。
不同場景縮放比例使用：
圖示為 64x64px 時線寬為 6px（基準線寬）
圖示為 32x32px 時線寬為 3px（基準線寬）
圖示為 24x24px 時線寬為 2px（基準線寬）
圖示為 16x16px 時線寬為 2px（基準線寬）
2。 圖示的keyline線
圖示網格為圖形元素的一致但靈活的定位建立了明確的規則，Keyline 形狀是網格的基礎。透過使用這些核心形狀作為指導，您可以跨系統圖標保持一致的視覺比例。
3。 圖示關鍵圖形
圖示柵格用於圖示元素繪製的參考並幫助建立清晰的內容輪廓邊界。關鍵線有助於促進圖示統一性，簡化設計過程中比例調整成本。繪製小圖形需要參照小正方形的 Keyline。
4。 圖示的拐角
1）直角拐角
當基礎圖形為滿容器正方形時，建議使用3X 圓角。當基礎圖形為滿高（寬）矩形時，建議使用2X圓角。當基礎圖形為較小（小於 1/2 寬高）矩形時，建議使用1X圓角。
2）非直角拐角
非直角根據圖示場景，通常情況下無論角度，預設均為1X圓角；特殊弧度的曲線“拐角”情況除外，根據圖示設計需要進行單獨考慮。
5。 圖示區域 – 封閉和非封閉
封閉區域，由閉合曲線構成的為封閉區域，可以進行獨立顏色填充。
非封閉區域，由非閉合曲線構成的為非封閉區域，原則上是不能進行獨立的顏色填充。
封閉區域為曲線形狀且有相交線段時，原則上是不能進行獨立的顏色填充。
6。 圖示組成 – 線段和端點
為保證風格的整體一致性，圖示所有線段端點預設均應為與線段同寬的圓角端點；通常情況下線段端點和可編輯節點座標以整數座標為佳。
預設基於 48dp 畫布繪製的線性圖示，線寬預設為 4dp；無論直線和曲線在任何時候均保持一致線寬。
7。 圖示繪製規則
當線段與曲線相交或者與直線非垂直相交時，線段末端用圓頭；當線段與直線垂直相交時，線段末端用方頭；當圓點的直徑與線寬一樣時，圓點用圖形繪製，不用線段。
當圓形和方形在小於16px時建議用圖形繪製，不要用線。
8。 圖示中的傾斜角度
圖示中的傾斜角度應為 45 的倍數，保持與 Keyline 中的對角線或十字垂直相交線保持平行關係。
若是矩形外框，傾斜角度也可以與矩形的對角線或十字垂直相交線保持平行關係。
角度為 45°、30° 和 60° 的對角線比 13。7° 或 81° 等不均勻角度的對角線看起來更銳利。
9。 圖示斷口與間距
內部結構與外框的間距不得小於線寬；內部元素之間的間距不得小於線寬的 2/1px。
外形框的埠尺寸梯度：4px、8px、12px，建議尺寸為4的倍數。
10。 圖示風格變換
圖示的在特定規律下允許不同風格之間的變換，分別為線性風格（預設）、填充風格、混合風格、多色混合風格。
11。 命名規則
科學和高效的命名規則能夠，幫助我們快速定位到自己製作的圖示，並且幫助開發縮短命名時間，加快團隊協作效率。切圖命名可以按照「業務_型別_功能_大小_狀態」的格式，最好使用英文。
12。 頁面或功能中英文對照表
13。 UI模組
六、圖示設計的評判標準
我們已經瞭解了圖示的基本理論，那我們如何設計出一個好的圖示呢？怎麼看我們設計的圖示是否符合產品呢？下面我們將從4個方面進行了解，什麼才是一個好的圖示。
1。 識別性
設計師們有時會過於注重形式，忽略了本身的功能，導致圖示難以識別，這打破了它最重要的圖形意象屬性 – 圖示的傳達含義功能必須放在首位。
圖示是一個物件或動作的視覺體現。如果對於使用者而言，這個圖示含義不明確，該圖示就立刻失去它的實用價值，併成為一個視覺干擾。在圖示設計中，我們必須保證圖形是簡潔、嚴謹、清晰、邊緣乾淨利落的，這是提升產品介面品質感的一個重要而且基礎的部分，而不是盲目地追求流行的視覺風格和炫技。
達到基礎水平以外，在圖示中我們還可以透過融入品牌資訊、有趣的細節使圖示更有吸引力，提升使用者對產品/品牌的好感度。
圖示設計理念的本質是減到最簡形態 – 簡化圖示是出於降低學習曲線的需要。設計應確保即使圖示在小尺寸更具有可讀性和清晰度，所以精心設計的圖示應該能夠快速辨認，一目瞭然。
2。 規範性
我們需要保證每個圖示的視覺大小的一致性，圖示柵格用於圖示元素繪製的參考並幫助建立清晰的內容輪廓邊界。關鍵線有助於促進圖示統一性，簡化設計過程中比例調整成本。
3。 統一性
在繪製一整套圖示時候，統一性就非常重要，不要在一整套圖示中混入不同風格的樣式，風格一致性將幫助使用者識別圖示並理解它們具有同等重要性或狀態。
介面中的圖示一般是成系列的設計，除了視覺風格和特徵保持一致以外，在同一產品內，同樣的功能和資訊圖示應也保持一致的形態，避免使用者產生疑惑。圖示的統一性上可以從線條的粗細、顏色、圓角、傾斜角度方面進行檢查。
4。 呼吸感
呼吸感的意思就是適當留白。不管是在做圖示還是做介面，適當的留白可以突出主體，讓空間更有張力，更具備可看性。圖示的相鄰元素之間的空間不應太小或在整體中不一致。定義最小間隙並將其保留在任何地方以避免輪廓“粘連”。
七、總結
圖示 設計是設計師必備的能力，圖示繪製看似簡單，要做好卻並不容易，好的圖示設計不僅能幫助使用者更高效地解決問題，還能幫助產品和品牌形成差異化，非常考驗設計師們的細節，不過UI設計處處充滿細節，想要自己的介面更加精緻，就不要忽略每一個可以提升的點。
以上就是分享的圖示基礎知識的大部分內容了，圖示本身是一個比較大的範圍，文中難免有很多不深入的內容，歡迎各位總監們的指教。最後感謝大家閱讀，希望今天的這篇文章能夠幫到你。
附錄·參考文獻
《Material Design》
《Apple Developer》
《History of icons》
《An oral history of the hamburger icon》
《Hopefully， the Ultimate Guide to an Interface Icon Set》
《設計師必看的圖示設計指南》
本文由 @明非 原創釋出於人人都是產品經理，未經許可，禁止轉載。
題圖來自Unsplash，基於 CC0 協議。
