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