設(shè)計(jì)方法
產(chǎn)品icon設(shè)計(jì)從現(xiàn)實(shí)材料的質(zhì)感和觸感中獲得啟發(fā)。每個(gè)icon都像真實(shí)紙張一樣被裁剪、折疊、照亮，并且這一切都是通過(guò)一些簡(jiǎn)單的圖形元素來(lái)表現(xiàn)的。通過(guò)干凈的折痕和清晰的邊緣來(lái)表現(xiàn)Material結(jié)實(shí)堅(jiān)固的質(zhì)感，利用微妙的亮光和陰影來(lái)展現(xiàn)材料的啞光質(zhì)感。
物理原型
光線考究
Material原型
顏色考究
產(chǎn)品icon網(wǎng)格
使用產(chǎn)品icon網(wǎng)格進(jìn)行設(shè)計(jì)有利于一致性，同時(shí)也為icon的定位建立了一套明確的規(guī)則。這種標(biāo)準(zhǔn)化帶來(lái)了靈活且一致的系統(tǒng)。
網(wǎng)格
參考線
參考線的形狀
參考線的形狀是網(wǎng)格的基礎(chǔ)。利用這些核心形狀做為向?qū)?，即可使整個(gè)相關(guān)產(chǎn)品的icons保持一致的視覺(jué)比例。
方形
高&寬: 152dp
圓形
直徑:176 dp
豎直矩形
高: 176dp
寬: 128dp
水平矩形
高: 128dp
寬: 176dp
DP單位網(wǎng)格
Android的產(chǎn)品icon尺寸是48dp，邊緣為1dp。所以當(dāng)你創(chuàng)建icon時(shí)，請(qǐng)使用48dp的尺寸，但將其放大至400%時(shí)，尺寸為192 x 192 dp（邊緣則變?yōu)?dp）
1:1的單位網(wǎng)格
4:1的單位網(wǎng)格
幾何形狀
我們?yōu)閰⒖季€制定了一些預(yù)設(shè)的標(biāo)準(zhǔn)形狀：圓形、方形、矩形、正交線和對(duì)角線。
產(chǎn)品icon剖析圖
產(chǎn)品icon剖析圖描述了組成一個(gè)產(chǎn)品icon的圖形對(duì)象。在這些icons中，對(duì)象的一致性是形成統(tǒng)一視覺(jué)語(yǔ)言的關(guān)鍵。熟悉這些對(duì)象可以更容易地理解每個(gè)logo和它們之間特征的細(xì)微差異。它也將幫助你學(xué)習(xí)了解logo設(shè)計(jì)中的基礎(chǔ)結(jié)構(gòu)。
-
最終處理
-
Material 背景
-
Material 前景
-
色彩
-
投影
組件
直接從上方看，組件相互重疊。
構(gòu)建視角
顯示圖標(biāo)構(gòu)造中各對(duì)象的立體分解圖。
Material 背景
最底層的對(duì)象。
Material 前景
上面抬起的material對(duì)象，它會(huì)在material背景上投射陰影
專色
應(yīng)用到元素中一小部分的顏色
泛色
無(wú)邊框，應(yīng)用到整個(gè)對(duì)象的顏色
邊緣色（亮邊）
在material對(duì)象的頂部邊緣。該顏色混合了白色，它比固有色更亮
邊緣色（暗邊）
在material對(duì)象的底部邊緣。該顏色混合了深色，它比固有色更暗
投影
Material對(duì)象抬高后周圍形成的一個(gè)柔和投影。
最終處理
為所有對(duì)象提供了一個(gè)柔和的色彩照明，從左上角到右下角逐漸減弱。
產(chǎn)品icon準(zhǔn)則
光線
在material環(huán)境中，模擬燈光照射在物體上并使其產(chǎn)生投影。頂部發(fā)出的光使material對(duì)象產(chǎn)生上文提及的陰影，以此突出物體的上下邊緣，而帶有角度的光線則可以增強(qiáng)對(duì)象表面的質(zhì)感。
光在正頂部時(shí)
光為45%時(shí)
陰影
對(duì)于產(chǎn)品icon來(lái)說(shuō)，頂部的光會(huì)讓對(duì)象周圍投下柔和的陰影并且在元素的頂部和左邊會(huì)有高光出現(xiàn)。左上陰影較輕而右下陰影較重，并且它總會(huì)處于整個(gè)icon的輪廓中。
陰影數(shù)值
模式：普通
不透明度：20%
X軸偏移：0px
Y軸偏移：6px
模糊值：4px
色彩：參考色彩，形狀和陰影的數(shù)值
亮邊和暗部
Material對(duì)象的頂部和底部邊緣提供了一種深度感和表面感。Material對(duì)象有一個(gè)1dp的標(biāo)準(zhǔn)厚度。要注意所有邊的距離都是從該對(duì)象的內(nèi)邊緣算起的。
亮邊是突出了所有對(duì)象的上邊緣。而左、右和底部的邊緣是沒(méi)有亮邊的。
暗部是突出了所有對(duì)象的下邊緣。而左、右和頂部的邊緣是沒(méi)有暗部的。
亮邊
高度: 1dp
透明度: 20%
顏色值: White (#FFFFFF)
暗部
高度: 1dp
透明度: 20%
顏色值: 參考圖標(biāo)色彩中陰暗部分的數(shù)值
最終處理
最終處理是指一個(gè)45度的虛擬照射光線。它從左上延伸至右下，且只作用在圖標(biāo)之內(nèi)。
漸變參數(shù)
樣式: 徑向
角度: 45º
顏色值: White (#FFFFFF)
中點(diǎn)位置: 33%
漸變 1 不透明度: 10% 位置: 0%
漸變 2 不透明度: 100% 位置: 0%
亮部、暗部和投影值
冷色
清新色
暖色
熱色
中性色
產(chǎn)品icon模式
讓顏色元素與material對(duì)象表面齊平。不要給顏色元素增加任何的邊緣或投影。
可行
不可行
圖層
對(duì)material對(duì)象進(jìn)行分層能夠形成空間深度（有邊緣和投影）。
但要謹(jǐn)慎對(duì)待material對(duì)象層疊的數(shù)量，避免因過(guò)于復(fù)雜而喪失焦點(diǎn)。
可行
不可行
抬升
抬升一個(gè)關(guān)鍵的material對(duì)象到一個(gè)簡(jiǎn)單背景上，使其成為關(guān)注的焦點(diǎn)。不要讓抬升的對(duì)象被切斷成其他的形狀。
可行
不可行
劃痕
劃痕能在不破壞形狀的情況下營(yíng)造層次感，不過(guò)要放在對(duì)稱中心。
不要使用多條劃痕或者是放在非中央位置。
可行
不可行
折疊
加入折疊后會(huì)使material對(duì)象變得更加立體。但應(yīng)避免使用專色（Spot colors），以免改變或歪曲關(guān)鍵對(duì)象。
可行
不可行
重疊
對(duì)material對(duì)象進(jìn)行重疊能夠創(chuàng)造出獨(dú)特的投影。所有元素、邊緣和陰影都是限制在對(duì)象輪廓內(nèi)部的。
不要使用超過(guò)兩個(gè)以上的重疊，避免因過(guò)于復(fù)雜而喪失焦點(diǎn)。
可行
不可行
手風(fēng)琴式
手風(fēng)琴式折疊的元素由兩個(gè)折疊的對(duì)象相接而成，以此用來(lái)提高單一對(duì)象的空間感。
不要使用超過(guò)兩個(gè)以上的對(duì)象，避免因過(guò)于復(fù)雜而喪失焦點(diǎn)。
可行
不可行
產(chǎn)品icons不能進(jìn)行扭曲或變形。對(duì)象應(yīng)該保持他們?cè)瓉?lái)的幾何形式，不對(duì)它們進(jìn)行傾斜、旋轉(zhuǎn)或扭曲。
不可行
不可行
人形icon圖解
你可以通過(guò)下面的指南和示例了解如何用最優(yōu)方法將人的形象融入你的UI中。
構(gòu)成
構(gòu)造
與參考線對(duì)齊
參考線形狀
正方形
圓形
縱向矩形
橫向矩形
紙vs顏色
紙
顏色
作手勢(shì)
構(gòu)造
完成品
形狀是由幾何形的粗線條組成。
Icons獨(dú)特的品質(zhì)依賴于對(duì)稱性與一致性，且須兼顧鮮明和簡(jiǎn)潔的特質(zhì)。
簡(jiǎn)潔
直觀
一致性
網(wǎng)格、比例和大小
系統(tǒng)icons以24dp的尺寸顯示。以能夠100% pixel-perfect 縮放標(biāo)準(zhǔn)來(lái)設(shè)計(jì)icon是非常重要的。
100%的比例
高密度屏幕下，20dp的100%的比例效果
800%的比例
高密度屏幕下，20 dp的800%的比例效果
Icon網(wǎng)格
icon網(wǎng)格已經(jīng)形成了一套標(biāo)準(zhǔn)，并且建立起了統(tǒng)一元素放置規(guī)范。
內(nèi)容區(qū)域
一個(gè)icon的內(nèi)容應(yīng)該保持在其活動(dòng)區(qū)域以內(nèi)。活動(dòng)區(qū)域是圖像的安全區(qū)域。其中，圖形需要具有足夠的顯示空間，不能被視圖切斷（例如，側(cè)邊欄在滾動(dòng)時(shí)出現(xiàn)）。
修剪區(qū)域指圖形文件的最終大小。
如果內(nèi)容需要附加視覺(jué)權(quán)重，那它可以將自身區(qū)域延展到活動(dòng)區(qū)域和修剪區(qū)域之間的區(qū)域里面。需要注意：請(qǐng)勿將icon的任何部分置于修剪區(qū)域之外。
高密度
在高密度的屏幕上，icon的活動(dòng)區(qū)域可能被縮減至20dp，附加區(qū)域?yàn)?dp。
活動(dòng)區(qū)域
高密度屏幕下的活動(dòng)區(qū)域
參考線形狀是網(wǎng)格的基礎(chǔ)。使用參考線可保持系統(tǒng)icons的一致性。
方形
寬&高：18px
圓形
直徑：20px
縱向矩形
高：20px, 寬：16px
橫向矩形
高：16px, 寬：20px
幾何
預(yù)設(shè)標(biāo)準(zhǔn)已經(jīng)確定了具體參考線的形狀：圓、正方形、長(zhǎng)方形、直角、對(duì)角線。這些通用且簡(jiǎn)潔的模板是為了統(tǒng)一Google系統(tǒng)icons和規(guī)范它們?cè)诰W(wǎng)格上的布置。
構(gòu)造
-
路徑末端
-
外部角
-
留白區(qū)域
-
筆畫
-
內(nèi)部角
-
邊界區(qū)域
角
一致的角半徑（2pd）是統(tǒng)一整個(gè)系統(tǒng)icons的關(guān)鍵。不要去改變它。
Icon內(nèi)部的拐角應(yīng)為直角，不要使用圓角。
外部角為2dp圓角半徑
內(nèi)部角
一致的路徑粗細(xì)（2dp）也是統(tǒng)一整個(gè)系統(tǒng)icons的關(guān)鍵。請(qǐng)對(duì)所有路徑（曲線、角度以及內(nèi)外路徑）都保持2dp的粗細(xì)。
一致性
曲線和角度
路徑末端
內(nèi)部角
相對(duì)縮小
間隙
為了可讀性和觸摸操作的需要，icon周圍可以留有一定的空白區(qū)域。在以鼠標(biāo)和鍵盤為主要輸入方式的設(shè)備上，icon的尺寸會(huì)根據(jù)設(shè)備屏幕的密度進(jìn)行適配。
間隙區(qū)域
Icon: 24dp
點(diǎn)擊范圍: 48dp
高密度下的icon間隙區(qū)域
Icon: 20dp
點(diǎn)擊范圍: : 40dp
放置位置
最佳范例
一致的icons有利于用戶理解，在不同應(yīng)用中也盡量使用已有的系統(tǒng)icons。
可行
使用相同的路徑粗細(xì)，路徑末端用方形。
不可行
不要使用不相同的路徑粗細(xì)，路徑末端不要用圓形。
可行
給icon一個(gè)正面的角度且顯得堅(jiān)固。
不可行
不要傾斜、旋轉(zhuǎn)icon，或是讓icon有其他維度。
可行
簡(jiǎn)化圖標(biāo)，讓icon更清晰和易讀。
不可行
不要過(guò)度擬物化使得icon復(fù)雜。
可行
讓icon更加幾何化而變得更加顯眼。
不可行
不要過(guò)度精細(xì)，使用過(guò)細(xì)路徑粗細(xì)。
可行
使用一致的幾何形狀。
不可行
不要使用過(guò)于松散的形狀。
可行
Icon應(yīng)對(duì)齊像素（X、Y 坐標(biāo)值不包含小數(shù)）。
Icons應(yīng)有相等的寬高(e.g. 24x24)，避免扭曲。
不可行
Icon沒(méi)有對(duì)齊像素。
寬高不等。
人形icon
1.頭
2.脖子
3.上半身
4.手臂
5.腿
整個(gè)身體
上半身
表現(xiàn)形式
舉例：整個(gè)身體
舉例：上半身
舉例：裁剪
舉例：具體部位
整個(gè)身體
舉例: 整個(gè)身體
視覺(jué)對(duì)其
上半身
舉例:上半身
視覺(jué)對(duì)其
容器
具體部位
人形icon的規(guī)則
可行
使用相同粗細(xì)的路徑，在腿和手臂的路徑末端使用方形
不要打破容器的邊界。
可行
增加人形元素是為了幫助人們更好的理解icon的含義。
不可行
不可行
觸發(fā)狀態(tài)下的icon在淺色背景上的標(biāo)準(zhǔn)不透明度是54%（#000000）。未觸發(fā)狀態(tài)下的icon不透明度則是26%（#000000）。
觸發(fā)狀態(tài)下的icon在深色背景上的標(biāo)準(zhǔn)不透明度是100%（#FFFFFF）。未觸發(fā)狀態(tài)下的icon不透明度則是50%（#FFFFFF）。
快捷icon能夠幫助用戶快速、方便地打開應(yīng)用功能（最多4個(gè)）。同時(shí)也可以將每個(gè)功能添加到主界面上。
應(yīng)用icon的位置決定快捷操作的顯示方式。例如，在屏幕左邊緣附近的應(yīng)用icon將在有可用空間的地方顯示操作。
以下指南將幫助你創(chuàng)建標(biāo)準(zhǔn)的快捷icon、單一頭像以及群組頭像。
最多一次可顯示四個(gè)快捷icon。你可以確定快捷icon的順序。
快捷icon是圓形的。它們包含一個(gè)標(biāo)準(zhǔn)的系統(tǒng)icon（或者至少有一個(gè)頭像）。Icon的內(nèi)容必須整齊的放置在區(qū)域內(nèi)（圖形的區(qū)域）。
尺寸
-
活動(dòng)區(qū)域：44dp的圓
-
整個(gè)區(qū)域：48dp的圓
44x44dp的活動(dòng)區(qū)域周圍存在2dp的內(nèi)邊距。
顏色
活動(dòng)區(qū)域: 填充Grey 100(#F5F5F5)
陰影
快捷icon沒(méi)有陰影
活動(dòng)區(qū)域
所有icon內(nèi)容應(yīng)該存在這44dp的區(qū)域內(nèi)。背景色，Grey 100 (或 #F5F5F5)
整個(gè)面積
活動(dòng)區(qū)域周圍存在2dp的內(nèi)邊距?？偞笮∈?8x48dp
標(biāo)準(zhǔn)的快捷icons
標(biāo)準(zhǔn)的快捷icons在活動(dòng)區(qū)域內(nèi)有一個(gè)居中對(duì)齊的Material系統(tǒng)icon。
尺寸
活動(dòng)區(qū)域：44dp的圓
整個(gè)區(qū)域：48dp的圓
系統(tǒng)icon: 24dp
顏色
系統(tǒng)icon應(yīng)該和應(yīng)用主色或應(yīng)用icon有著同樣的顏色 (應(yīng)與圓形的背景有足夠的對(duì)比度）。
文件格式
快捷icons應(yīng)該提供SVG格式的文件，并允許icons自動(dòng)縮放。你也可以使用矢量圖片、彩色位圖或圖層列表。
不要使用非矢量圖片，因?yàn)樗鼈冊(cè)谀承┣闆r下不能縮放。
系統(tǒng)icon尺寸
系統(tǒng)icon應(yīng)該有相等的寬度和高度：24 x24dp
放置在活動(dòng)區(qū)域中
Icon應(yīng)在活動(dòng)區(qū)域中垂直水平居中
可行
Icon的顏色應(yīng)該和背景（Grey 100）有足夠的對(duì)比
不可行
不要使用與背景沒(méi)有足夠?qū)Ρ鹊念伾?/p>
單個(gè)頭像
單一頭像包含一個(gè)圖像。它們必須在XXXHPDI的分辨率下創(chuàng)建。
尺寸
-
活動(dòng)區(qū)域：44dp的圓
-
頭像區(qū)域：44dp的圓
-
整個(gè)區(qū)域：48dp的圓
文件格式
PNG文件
活動(dòng)區(qū)域以及頭像區(qū)域
頭像必須充滿整個(gè)活動(dòng)區(qū)域，它們必須在XXXHPDI的分辨率下創(chuàng)建。
整個(gè)
44x44dp的活動(dòng)區(qū)域周圍存在2dp的內(nèi)邊距，且整個(gè)區(qū)域大小為48x48dp
群組頭像
一個(gè)群組包含2到4的頭像。它們必須在XXXHPDI的分辨率下創(chuàng)建。
尺寸
-
活動(dòng)區(qū)域：44dp的圓
-
頭像區(qū)域：30dp的圓
-
整個(gè)區(qū)域：48dp的圓
活動(dòng)區(qū)域: 填充Grey 100 (#F5F5F5)
PNG文件
活動(dòng)區(qū)域
活動(dòng)區(qū)域應(yīng)該有一個(gè)Grey 100的底 (#F5F5F5).
頭像區(qū)域
頭像區(qū)域必須符合30x30dp大小。以44x44dp的圓（活動(dòng)區(qū)域）為中心，并處于活動(dòng)區(qū)域之內(nèi)。
整個(gè)區(qū)域
44x44dp的活動(dòng)區(qū)域周圍存在2dp的內(nèi)邊距，且整個(gè)區(qū)域大小為48x48dp
