昨天我們了解到聲音可以具有不同的屬性及特徵，運用不同的編排可以使用在各種物件狀態及情境事件上，在應用程式的畫面層次中依序建立聲音回饋，藉此讓使用者得到更多的互動回饋，提升使用者體驗。

今天我們進入到 Material Design 中 Iconography 影像學的章節，讓我們繼續看下去吧。

Iconography 影像學

Product icons 產品圖示
System icons 系統圖示
Animated icons 動畫的圖示

Product icons 產品圖示

產品圖示是品牌和產品的視覺表達，包括其服務和工具。圖示以簡單、直覺、友善的方式傳達產品的核心概念和意含。儘管每個圖示在外觀上都不相同，但品牌中的圖示都應通過設計原則和執行方式加以統一。

這些設計原則可以透過圖示顏色和品牌主要元素反應品牌的識別度。

物品的觸覺和物理材質反應在圖示設計中。每個圖示都可以像紙張一樣被切割、折疊，通過細微的燈光照射顯示一致的陰影。簡單的圖形元素可以表現材質的品質堅固、褶皺整齊、邊緣清晰。

本圖片截取自 Material Design。

在設計圖示尺寸時以 400% （192 x 192 dp）進行觀看和編輯，每一格像素剛好顯示為 4dp，在元件上的任何更改都可以依照比例放大縮小，當我們將畫面回到 100% 顯示時，可以看到我們設計的圖示保留銳利的邊緣並且與網格對齊。

在畫面中參考線對齊網格，通過參考線我們可以輕鬆的將圖示對齊或放大縮小。在設計圖示時常運用基礎形狀，如: 圓形、正方形、長方形、自由曲線和對角線。

在產品中使用的所有圖示元素應與品牌形象保持一致，在形象上有助於建立品牌與元件間的相似特徵，表達共同的視覺語言。圖示屬於疊加型的設計: 繪製實體外型 → 加入燈光及陰影 → 加入材質 → 將圖示上色。

來自系統建立的虛擬光接觸到元件所產生的陰影稱為 "接觸陰影"，柔和的陰影在元件的上方和左側輕輕環繞，並且在元件的下方和右側稍微強調。通過元件邊框上色並加上陰影強化了深度感，上色可以突顯頂部邊框，陰影使底部元件邊緣變暗。

在設計圖示可以使用下列手法執行: 顏色、層次、區分、摺疊、重疊、彎曲。

• 當色彩與元件組合後可以產生許多特別的組合方式。需要注意的是顏色不具有高度和深度所以不需要在色彩本身加上陰影。
• 當元件的層次具有不同高度時會產生陰影，元件的層次過多時會導致圖示過於複雜。
• 將圖示區分成兩半來上色產生深度的視覺，分線應居中置於對稱圖形上。
• 當圖示元素以多個角度折疊，會產生攤開後會大於目前尺寸的錯覺。
• 當圖示元素重疊會創造一個新的輪廓、邊框、陰影。
• 包含一個或兩個摺頁的元素圖示，會增加元件尺寸。
• 圖示應保持幾何形狀，不能傾斜、旋轉、凹凸、變形或彎曲。

系統圖示表示常用操作、文件、設備和目錄。

System icons 系統圖示

系統圖示以現代、簡單、一致、友善，且有時帶有個性來表示常用操作的文件、設備和目錄，小圖示以基本粗體和幾何來表現特徵，即使在小尺寸下也可以保持可讀性和清晰度。

本圖片截取自 Material Design。

系統圖示尺寸為 24 x 24 dp，以 100％ 的比例設計，下載圖示設計模板使用 Adobe Illustrator 文件創造自己的系統和產品圖示。當目標對象主要使用滑鼠及鍵盤方始操作時，圖示設計尺寸可縮小為 20dp。

圖示永遠放置於活動區域內，此區域不太可能從畫面中隱藏（例如: 滾動時出現側邊欄），而圖示尺寸應設計於 20 X 20dp 範圍內，在周圍保有 2dp 的留白在不同設計提供擴展視覺平衡的空間，圖示設計上不應該超出 24 x 24 dp ( 剪裁區域 ) 的空間。

網格是圖示幾何參考線( 圓形，正方形，長方形，自由曲線和對角線 ) 的基礎，通過將這些核心形狀對齊網格，可以在系統圖示之間保持一致的視覺比例，這些基本形狀有助於統一 Google 系統圖示並規範在圖示網格上的擺放位置。可以靈活的在網格內運用幾何參考線設計系統圖示。

為了避免圖示失真，請通過將 X 和 Y 坐標設置為整數（不帶小數），將座標定位在像素上。在 Android 及 IOS 平台的系統圖示設定上有些許不同，( 例如: 返回鍵、更多項目的點點 ) 在設計上要注意用戶的適應性。

本圖片截取自 Material Design - Cross-platform adaptations。

接下來讓我們開始解析圖標的設計細節，在預設情況下圓角半徑為 2dp，內角應為正方形，而不是圓形。小於寬度 2dp 或更小的形狀不設計為圓角。在系統圖示繪製統一使用 2dp 的筆劃寬度來設計，包含曲線、角度以及內部和外部筆劃。

在設計圖示上需要復雜的細節，可以進行微調提高清晰度，這些調整稱為 "optical corrections 光學校正"。如果系統圖示需要復雜的細節，可以進行細微筆畫寬度調整以提高清晰度。任何光學校正基於目前設計的元素來修正，避免這些形狀傾斜或變形。

在設計圖示時在周圍保持留白空間在 48dp 的範圍內放置 24dp 大小的圖示， 可以更容易辨識與觸控。當目標對象主要使用滑鼠及鍵盤方始操作時，可以使用 40dp 的範圍內放置 20dp 大小的圖示，讓整體排版更緊密。

在淺色背景上圖示的透明度設定，以黑色為例，被選擇或按下時不透明度為 87%，未被選擇及按下時不透明度為 54%，等待被點選的圖示不透明度為 38%。

在深色背景上圖示的透明度設定，以白色為例，被選擇或按下時不透明度為 100%，未被選擇及按下時不透明度為 70%，等待被點選的圖示不透明度為 50%。

可以自訂系統圖示屬性：筆刷和上色、圓角半徑和顏色，通過調整這些屬性創造以下四種預設圖示。

顯示輪廓的圖示，藉由自訂的筆刷和上色區塊，提供一種輕巧、乾淨的感覺，此類圖示適合用在密集的畫面，可以調整輪廓圖示的筆劃粗細，較粗的筆畫增加了沉重感和粗壯感，上色後的圖示感覺更沉重。較細的筆刷提高整體亮度，未上色的圖示具有較輕的樣式感受。

筆畫在設計上可以設定繪製於框線內、繪製於框線外、框線內外各一半三種，不同的繪製方式圖示完成的感受也不盡相同，在多數情況下建議使用繪製於框線內，以免框線超出圖示網格。根據您的設計和品牌調整形狀，也可以自定筆刷和對齊方式。

帶有直角的圖示能在小尺寸顯示下也可以清晰辨識，直角的圖示能表現乾淨俐落的品牌風格。圓形圖示可以搭配字型較粗的字體，彎曲的標誌或圓形元素可以搭配具有同樣元素的品牌風格。圖示邊緣帶有圓角半徑時可以調整圓角半徑大小，建議圓角半徑設定為在 0dp ~ 4dp 之間，如果筆劃粗細為 2dp 或更小，則轉角半徑必須為 1dp。

雙色圖示是筆劃和填色使用不同顏色的圖示，在上色時可以使用多種品牌識別色，兩個顏色可以個別調整透明度，需要依據背景顏色來選擇透明度的調整。

Animated icons 動畫的圖示

每個圖示動畫都與視覺設計上的動作保持一致。動畫反映了圖標執行的動作，從而增加了吸引力和樂趣。

轉場是連接兩個圖示的動畫，在切換完成之前銜接兩個圖示，例如: 按下播放鍵圖示轉換為暫停的圖示。根據圖示的重要性選擇使用簡單或複雜的轉場，一般的圖示使用簡單的動畫效果表現轉場，在重要的應用列表圖示可以使用比較複雜的轉場效果。

本圖片截取自 Material Design。

圖示動畫越複雜需要更長的動畫時間避免感到倉促。在同樣複雜的動畫中使用相同的動畫時間，簡單的動畫：100ms、普通的動畫：200ms、複雜的動畫：500ms。

在圖示動畫的細節上可以依據不同速度在畫面中顯示，可以從左到右淡入讓圖示有依序出現漸進感。圖示動畫可以表現被選取而執行動畫，藉此增強狀態更改。圖示動畫也可以反映品牌風格，活潑的動畫帶來年輕有活力的感受。

今天我們了解到 Iconography 影像學中各種圖示設計的注意事項，圖示由不同的設計元素構成，透過網格我們可以設計出具有統一性的圖示，配合筆畫粗細、圖示顏色、排版疏密、主題性，讓設計更符合品牌，透過圖示動畫可以展現品牌風格和元件狀態，也可以吸引注目性並提升樂趣。

明天讓我們繼續完成 Shape 形狀，每天一點一點的逐個擊破，找出那些藏在細節中的魔鬼，不要讓大魔王有機會可以捉弄我們，迎向更美好的介面設計吧(握拳)！

如果您喜歡這篇文章或是這篇文章有幫助到您，歡迎按讚鼓勵，我們明天見囉~