二、Icons
Material icons使用幾何圖形直觀地來表示其核心概念，功能或主題。
產品icons是一個品牌下產品、服務和工具的一種視覺表現
系統icons則代表一個命令、檔案、裝置、目錄或常用操作。
尺寸
產品icons 48dp，邊緣1dp；系統icons 24dp。
Icons在淺色背景上
| Icon狀態 | 不透明度 |
|---|---|
| 觸發+聚焦 | 87% |
| 觸發+未聚焦 | 54% |
| 未觸發 | 38% |
Icons在深色背景上
| Icon狀態 | 不透明度 |
|---|---|
| 觸發+聚焦 | 100% |
| 觸發+未聚焦 | 70% |
| 未觸發 | 50% |
產品icons（Product icons）
產品icons作為一個品牌下產品、服務和工具的一種視覺表現，能夠簡潔、醒目且友好地傳遞產品的核心理念與內涵。雖然每個 產品 icons看上去都截然不同，但對於品牌來說你應該通過理念和實踐把它們都統一起來。
產品icons是傳達品牌內涵的一個重要載體。從使用以下準則開始，確保產品icons的顏色和其他關鍵要素能夠正確反映你的品牌特性。
Material icons (Material icons are easy to use in your web, Android, and iOS projects)
設計方法
產品icon設計從現實材料的質感和觸感中獲得啟發。每個icon都像真實紙張一樣被裁剪、摺疊、照亮，並且這一切都是通過一些簡單的圖形元素來表現的。通過乾淨的摺痕和清晰的邊緣來表現Material結實堅固的質感，利用微妙的亮光和陰影來展現材料的啞光質感。
產品icon網格
使用產品icon網格進行設計有利於一致性，同時也為icon的定位建立了一套明確的規則。這種標準化帶來了靈活且一致的系統。
參考線的形狀
參考線的形狀是網格的基礎。利用這些核心形狀做為嚮導，即可使整個相關產品的icons保持一致的視覺比例。
寬: 128dp
寬: 176dp
DP單位網格
Android的產品icon尺寸是48dp，邊緣為1dp。所以當你建立icon時，請使用48dp的尺寸，但將其放大至400%時，尺寸為192 x 192 dp（邊緣則變為4dp）
幾何形狀
我們為參考線制定了一些預設的標準形狀：圓形、方形、矩形、正交線和對角線。
產品icon剖析圖
產品icon剖析圖描述了組成一個產品icon的圖形物件。在這些icons中，物件的一致性是形成統一視覺語言的關鍵。熟悉這些物件可以更容易地理解每個logo和它們之間特徵的細微差異。它也將幫助你學習瞭解logo設計中的基礎結構。
- 最終處理
- Material 背景
- Material 前景
- 色彩
- 投影
產品icon準則
光線
在material環境中，模擬燈光照射在物體上並使其產生投影。頂部發出的光使material物件產生上文提及的陰影，以此突出物體的上下邊緣，而帶有角度的光線則可以增強物件表面的質感。
陰影
對於產品icon來說，頂部的光會讓物件周圍投下柔和的陰影並且在元素的頂部和左邊會有高光出現。左上陰影較輕而右下陰影較重，並且它總會處於整個icon的輪廓中。
模式：普通
不透明度：20%
X軸偏移：0px
Y軸偏移：6px
模糊值：4px
色彩：參考色彩，形狀和陰影的數值
亮邊和暗部
Material物件的頂部和底部邊緣提供了一種深度感和表面感。Material物件有一個1dp的標準厚度。要注意所有邊的距離都是從該物件的內邊緣算起的。
亮邊是突出了所有物件的上邊緣。而左、右和底部的邊緣是沒有亮邊的。
暗部是突出了所有物件的下邊緣。而左、右和頂部的邊緣是沒有暗部的。
亮邊
高度: 1dp
透明度: 20%
顏色值: White (#FFFFFF)
暗部
高度: 1dp
透明度: 20%
顏色值: 參考圖示色彩中陰暗部分的數值
最終處理
最終處理是指一個45度的虛擬照射光線。它從左上延伸至右下，且只作用在圖示之內。
漸變引數
樣式: 徑向
角度: 45º
顏色值: White (#FFFFFF)
中點位置: 33%
漸變 1 不透明度: 10% 位置: 0%
漸變 2 不透明度: 100% 位置: 0%
亮部、暗部和投影值
物件因受到光照的影響會使亮部、暗部和投影的顏色呈現出不同的改變。這時就需要我們根據它們固有色來對物件的亮邊、暗部和陰影進行調整。為了確保顏色看起來和諧，請遵循下列顏色取值。
產品icon模式
受到現實材料物理行為的影響，我們簡單的規定了物件的表面質感和觸感。材質與顏色之間的相互作用也為更多獨特的作品創作提供了可能性。
顏色
讓顏色元素與material物件表面齊平。不要給顏色元素增加任何的邊緣或投影。
圖層
對material物件進行分層能夠形成空間深度（有邊緣和投影）。
但要謹慎對待material物件層疊的數量，避免因過於複雜而喪失焦點。
抬升
抬升一個關鍵的material物件到一個簡單背景上，使其成為關注的焦點。不要讓抬升的物件被切斷成其他的形狀。
劃痕
劃痕能在不破壞形狀的情況下營造層次感，不過要放在對稱中心。
不要使用多條劃痕或者是放在非中央位置。
摺疊
加入摺疊後會使material物件變得更加立體。但應避免使用專色（Spot colors），以免改變或歪曲關鍵物件。
重疊
對material物件進行重疊能夠創造出獨特的投影。所有元素、邊緣和陰影都是限制在物件輪廓內部的。
不要使用超過兩個以上的重疊，避免因過於複雜而喪失焦點。
手風琴式
手風琴式摺疊的元素由兩個摺疊的物件相接而成，以此用來提高單一物件的空間感。
不要使用超過兩個以上的物件，避免因過於複雜而喪失焦點。
扭曲
產品icons不能進行扭曲或變形。物件應該保持他們原來的幾何形式，不對它們進行傾斜、旋轉或扭曲。
人形icon圖解
你可以通過下面的指南和示例瞭解如何用最優方法將人的形象融入你的UI中。
構成
參考線形狀
紙vs顏色
作手勢
人形icon規則
系統icons（System icons）
系統icons，或UI icon 可以表示一個命令、檔案、裝置或目錄。系統icons也被用來表示一些常見的行為像扔垃圾，列印或儲存。
系統icons的設計風格應是簡單的、現代的、友好的，也可以是有趣味性的。對於每個icon來說，重要的是能夠準確傳達出你想要表達的意思，並且確保在小尺寸情況下，icon仍然保持清晰可見。
Material design icons （Download our system icons）
設計原則
形狀是由幾何形的粗線條組成。
Icons獨特的品質依賴於對稱性與一致性，且須兼顧鮮明和簡潔的特質。
網格、比例和大小
DP單元網格
系統icons以24dp的尺寸顯示。以能夠100% pixel-perfect 縮放標準來設計icon是非常重要的。
在以滑鼠和鍵盤為主要輸入方式的裝置上，icon的尺寸會根據裝置螢幕密度進行適配。在高密度的螢幕上，icon可以縮小到20dp。
Icon網格
icon網格已經形成了一套標準，並且建立起了統一元素放置規範。
內容區域
一個icon的內容應該保持在其活動區域以內。活動區域是影象的安全區域。其中，圖形需要具有足夠的顯示空間，不能被檢視切斷（例如，側邊欄在滾動時出現）。
修剪區域指圖形檔案的最終大小。
如果內容需要附加視覺權重，那它可以將自身區域延展到活動區域和修剪區域之間的區域裡面。需要注意：請勿將icon的任何部分置於修剪區域之外。
高密度
在高密度的螢幕上，icon的活動區域可能被縮減至20dp，附加區域為2dp。
參考線形狀
參考線形狀是網格的基礎。使用參考線可保持系統icons的一致性。
方形
寬&高：18px
圓形
直徑：20px
縱向矩形
高：20px, 寬：16px
橫向矩形
高：16px, 寬：20px
幾何
預設標準已經確定了具體參考線的形狀：圓、正方形、長方形、直角、對角線。這些通用且簡潔的模板是為了統一Google系統icons和規範它們在網格上的佈置。
系統icon剖析
- 路徑末端
- 外部角
- 留白區域
- 筆畫
- 內部角
- 邊界區域
角
一致的角半徑（2pd）是統一整個系統icons的關鍵。不要去改變它。
Icon內部的拐角應為直角，不要使用圓角。
路徑
一致的路徑粗細（2dp）也是統一整個系統icons的關鍵。請對所有路徑（曲線、角度以及內外路徑）都保持2dp的粗細。
視覺校正
在特殊情況下必要的調整能夠增加icons的易讀性。在對icon進行調整時，也需與其他icon保持一致的幾何形狀，不要加以扭曲。
間隙
為了可讀性和觸控操作的需要，icon周圍可以留有一定的空白區域。在以滑鼠和鍵盤為主要輸入方式的裝置上，icon的尺寸會根據裝置螢幕的密度進行適配。
間隙區域
Icon: 24dp
點選範圍: 48dp
高密度下的icon間隙區域
Icon: 20dp
點選範圍: : 40dp
放置位置
最佳範例
一致的icons有利於使用者理解，在不同應用中也儘量使用已有的系統icons。
可行
使用相同的路徑粗細，路徑末端用方形。
人形icon
人形icon剖析
1.頭
2.脖子
3.上半身
4.手臂
5.腿
表現形式
舉例：裁剪
舉例：具體部位
整個身體
上半身
容器
具體部位
人形icon的規則
顏色
觸發狀態下的icon在淺色背景上的標準不透明度是54%（#000000）。未觸發狀態下的icon不透明度則是26%（#000000）。
觸發狀態下的icon在深色背景上的標準不透明度是100%（#FFFFFF）。未觸發狀態下的icon不透明度則是50%（#FFFFFF）。
應用快捷icons（App shortcut icons）
快捷icon能夠幫助使用者快速、方便地開啟應用功能（最多4個）。同時也可以將每個功能新增到主介面上。
應用icon的位置決定快捷操作的顯示方式。例如，在螢幕左邊緣附近的應用icon將在有可用空間的地方顯示操作。
以下指南將幫助你建立標準的快捷icon、單一頭像以及群組頭像。
快捷icon
快捷icon是圓形的。它們包含一個標準的系統icon（或者至少有一個頭像）。Icon的內容必須整齊的放置在區域內（圖形的區域）。
尺寸
- 活動區域：44dp的圓
- 整個區域：48dp的圓
44x44dp的活動區域周圍存在2dp的內邊距。
顏色
活動區域: 填充Grey 100(#F5F5F5)
陰影
快捷icon沒有陰影
活動區域
所有icon內容應該存在這44dp的區域內。背景色，Grey 100 (或 #F5F5F5)
整個面積
活動區域周圍存在2dp的內邊距。總大小是48x48dp
標準的快捷icons
標準的快捷icons在活動區域內有一個居中對齊的Material系統icon。
尺寸
活動區域：44dp的圓
整個區域：48dp的圓
系統icon: 24dp
顏色
系統icon應該和應用主色或應用icon有著同樣的顏色 (應與圓形的背景有足夠的對比度）。
檔案格式
快捷icons應該提供SVG格式的檔案，並允許icons自動縮放。你也可以使用向量圖片、彩色點陣圖或圖層列表。
不要使用非向量圖片，因為它們在某些情況下不能縮放。
系統icon尺寸
系統icon應該有相等的寬度和高度：24 x24dp
放置在活動區域中
Icon應在活動區域中垂直水平居中
單個頭像
單一頭像包含一個影象。它們必須在XXXHPDI的解析度下建立。
尺寸
- 活動區域：44dp的圓
- 頭像區域：44dp的圓
- 整個區域：48dp的圓
檔案格式
PNG檔案
活動區域以及頭像區域
頭像必須充滿整個活動區域，它們必須在XXXHPDI的解析度下建立。
整個區域
44x44dp的活動區域周圍存在2dp的內邊距，且整個區域大小為48x48dp
群組頭像
一個群組包含2到4的頭像。它們必須在XXXHPDI的解析度下建立。
尺寸
- 活動區域：44dp的圓
- 頭像區域：30dp的圓
- 整個區域：48dp的圓
顏色
活動區域: 填充Grey 100 (#F5F5F5)
檔案格式
PNG檔案
活動區域
活動區域應該有一個Grey 100的底 (#F5F5F5).
頭像區域
頭像區域必須符合30X30dp大小。以44x44dp的圓（活動區域）為中心，並處於活動區域之內。
整個區域
44x44dp的活動區域周圍存在2dp的內邊距，且整個區域大小為48x48dp