產(chǎn)品圖標(biāo)

產(chǎn)品圖標(biāo)作為一個(gè)品牌下產(chǎn)品、服務(wù)和工具的一種視覺(jué)表現(xiàn)，能夠簡(jiǎn)潔、顯眼且友好地傳遞產(chǎn)品的核心理念與內(nèi)涵。盡管每個(gè)產(chǎn)品圖標(biāo)看上去截然不同，但對(duì)于一個(gè)給定品牌，產(chǎn)品圖標(biāo)應(yīng)在理念和實(shí)踐中統(tǒng)一。

產(chǎn)品圖標(biāo)是傳達(dá)品牌內(nèi)涵的一個(gè)重要載體。從使用以下準(zhǔn)則開(kāi)始，確保產(chǎn)品圖標(biāo)的顏色和其他關(guān)鍵要素能夠正確反映你的品牌標(biāo)識(shí)。

http://wiki.jikexueyuan.com/project/material-design/images/style_logos_product_intro_definition.png" alt="" />

設(shè)計(jì)途徑

產(chǎn)品圖標(biāo)設(shè)計(jì)從現(xiàn)實(shí)材料的質(zhì)感和觸感中獲得啟發(fā)。每個(gè)圖標(biāo)都像真實(shí)紙張一樣被裁剪、折疊和點(diǎn)燃，而用一些簡(jiǎn)單的圖形元素來(lái)表現(xiàn)。我們通過(guò)干凈的折痕和清晰的邊緣來(lái)表現(xiàn)結(jié)實(shí)堅(jiān)固的質(zhì)感，或是利用微妙的亮點(diǎn)和一致的陰影來(lái)展現(xiàn)材料的磨砂拋光。

http://wiki.jikexueyuan.com/project/material-design/images/style_logos_product_intro_material_physical.png" alt="現(xiàn)實(shí)原型" />

現(xiàn)實(shí)原型

http://wiki.jikexueyuan.com/project/material-design/images/style_logos_product_intro_material_lighting.png" alt="光線考究" />

光線考究

http://wiki.jikexueyuan.com/project/material-design/images/style_logos_product_intro_material_material.png" alt="材料原型" />

材料原型

http://wiki.jikexueyuan.com/project/material-design/images/style_logos_product_intro_material_color.png" alt="色彩考究" />

色彩考究

圖標(biāo)網(wǎng)格

產(chǎn)品圖標(biāo)網(wǎng)格已經(jīng)形成了一致的標(biāo)準(zhǔn)，且建立了一套明確的圖形元素定位規(guī)則。這種標(biāo)準(zhǔn)化帶來(lái)了靈活，而連貫的系統(tǒng)。

http://wiki.jikexueyuan.com/project/material-design/images/style_logos_product_grid_logo_grid.png" alt="網(wǎng)格" />

網(wǎng)格

http://wiki.jikexueyuan.com/project/material-design/images/style_logos_product_grid_logo_keylines.png" alt="關(guān)鍵線" />

關(guān)鍵線

關(guān)鍵線的形狀

關(guān)鍵線的形狀是網(wǎng)格的基礎(chǔ)。利用這些核心形狀做為向?qū)?，即可使整個(gè)相關(guān)產(chǎn)品的圖標(biāo)保持一致的視覺(jué)比例。

http://wiki.jikexueyuan.com/project/material-design/images/style_logos_product_grid_shapes_square.png" alt="方形" />

方形

高&寬: 152

http://wiki.jikexueyuan.com/project/material-design/images/style_logos_product_grid_shapes_circle.png" alt="圓形" />

圓形

直徑: 176

http://wiki.jikexueyuan.com/project/material-design/images/style_logos_product_grid_shapes_vert_rectangle.png" alt="豎直矩形" />

豎直矩形

高:176 寬:128

http://wiki.jikexueyuan.com/project/material-design/images/style_logos_product_grid_shapes_hori_rectangle.png" alt="水平矩形" />

水平矩形

高:128 寬:176

DP 單位網(wǎng)格

設(shè)備上的啟動(dòng)器以 48dp 的尺寸顯示產(chǎn)品圖標(biāo) (邊緣 1dp)，所以當(dāng)你創(chuàng)建圖標(biāo)時(shí)，請(qǐng)使用 48dp 的尺寸，必要時(shí)可將其放大 400% 到 192 x 192 dp (邊緣變位 4dp)。

保持這樣的放縮比即可在尺寸在縮小時(shí)保持邊緣的鋒利和對(duì)齊的正確性。

http://wiki.jikexueyuan.com/project/material-design/images/style_logos_product_grid_unit_1to1.png" alt="1:1 單元網(wǎng)格" />

1:1 單元網(wǎng)格

http://wiki.jikexueyuan.com/project/material-design/images/style_logos_product_grid_unit_1to1.png" alt="4:1 單位網(wǎng)格" />

4:1 單元網(wǎng)格

幾何

我們?yōu)檫@幾種特定的關(guān)鍵線制定了預(yù)設(shè)規(guī)則：圓形線、方形線、矩形線、正交線和對(duì)角線。這個(gè)通用且簡(jiǎn)潔的元素調(diào)板形成的目的是統(tǒng)一產(chǎn)品圖標(biāo)和規(guī)范它們?cè)诰W(wǎng)格上的布置。

http://wiki.jikexueyuan.com/project/material-design/images/style_logos_product_grid_geometry1.png" alt="" /> http://wiki.jikexueyuan.com/project/material-design/images/style_logos_product_grid_geometry2.png" alt="" /> http://wiki.jikexueyuan.com/project/material-design/images/style_logos_product_grid_geometry2.png" alt="" /> http://wiki.jikexueyuan.com/project/material-design/images/style_logos_product_grid_geometry4.png" alt="" />

產(chǎn)品圖標(biāo)剖析

下面我們來(lái)解剖那些組成產(chǎn)品圖標(biāo)的圖形元素。對(duì)于一個(gè)給定的品牌，在這些圖標(biāo)中，元素的一致性是形成一個(gè)共享視覺(jué)語(yǔ)言的關(guān)鍵。熟悉這些元素可以更容易地理解每個(gè) logo 和它們之間細(xì)微差異的特征。它也將幫助你學(xué)會(huì)識(shí)別 logo 設(shè)計(jì)的底層結(jié)構(gòu)。

1. 拋光
2. material 背景
3. material 前景
4. 色彩
5. 陰影

http://wiki.jikexueyuan.com/project/material-design/images/style_logos_product_anatomy_components.png" alt="組件" />

組件

直接從上方看，組件相互重疊。

http://wiki.jikexueyuan.com/project/material-design/images/style_logos_product_anatomy_components_perspective.png" alt="構(gòu)建視角" />

構(gòu)建視角

顯示圖標(biāo)構(gòu)造中各成分的立體分解圖。

http://wiki.jikexueyuan.com/project/material-design/images/style_logos_product_anatomy_material_background.png" alt="material 背景" />

material 背景

最里層的元素。

http://wiki.jikexueyuan.com/project/material-design/images/style_logos_product_anatomy_material_foreground.png" alt="material 前景" />

material 前景

在一層陰影之上的元素。

http://wiki.jikexueyuan.com/project/material-design/images/style_logos_product_anatomy_color_spot.png" alt="斑點(diǎn)色" />

斑點(diǎn)色

施加到元素中一小部分的顏色。

http://wiki.jikexueyuan.com/project/material-design/images/style_logos_product_anatomy_color_flooding.png" alt="泛色" />

泛色

從邊到邊施加到整個(gè)元素的顏色。

http://wiki.jikexueyuan.com/project/material-design/images/style_logos_product_anatomy_edges_tinted.png" alt="亮邊" />

亮邊

在一個(gè)材質(zhì)元素的頂部邊緣，染上與亮色混合的顏色，以減淡了原有的顏色。

http://wiki.jikexueyuan.com/project/material-design/images/style_logos_product_anatomy_edges_shaded.png" alt="暗邊" />

暗邊

在一個(gè)材質(zhì)元素的底部邊緣，染上與暗色混合的顏色，以加深了原有的顏色。

http://wiki.jikexueyuan.com/project/material-design/images/style_logos_product_anatomy_shadow.png" alt="聯(lián)系陰影" />

聯(lián)系陰影

在一個(gè)上層元素周圍的柔和陰影。

http://wiki.jikexueyuan.com/project/material-design/images/style_logos_product_anatomy_finish.png" alt="拋光" />

拋光

在所有元素之上，自左上到右下逐漸變淡，提供照明的柔和色彩。

產(chǎn)品圖標(biāo)指標(biāo)

光線

在 material 環(huán)境中，虛擬光線照射在物體上并使其產(chǎn)生投影。從正上方發(fā)出的光使 material 元素產(chǎn)生上文提及的聯(lián)系陰影，可以突出物體的上下邊緣，而帶有角度的光線則可以增強(qiáng)元素表面的質(zhì)感。

http://wiki.jikexueyuan.com/project/material-design/images/style_logos_product_lighting_lighting_top.png" alt="頂部光源" />

頂部光源

http://wiki.jikexueyuan.com/project/material-design/images/style_logos_product_lighting_lighting_45.png" alt="45度光源" />

45度光源

投影

對(duì)于一個(gè)產(chǎn)品圖標(biāo)來(lái)說(shuō)，來(lái)自頂部的光線會(huì)使其產(chǎn)生一個(gè)圍繞上層元素的柔和陰影。左上陰影較輕而右下陰影較重，且總在外輪廓之內(nèi)。

http://wiki.jikexueyuan.com/project/material-design/images/style_logos_product_lighting_shadow.png" alt="下墜式陰影指標(biāo)" />

下墜式陰影指標(biāo)

模式：普通

不透明度：20%

X 偏移：0px

Y 偏移：6px

模糊：6px

色彩：參考色中的陰暗色

亮邊和暗邊

material 元素的上下兩邊提供一種深度感和表面感，元素還有 1px 的標(biāo)準(zhǔn)厚度。要注意所有邊的距離都是從元素的內(nèi)邊緣算起的。

亮邊只可用在所有元素的頂邊，而暗邊只可用在所有元素的底邊。

http://wiki.jikexueyuan.com/project/material-design/images/style_logos_product_lighting_edge_tinted.png" alt="亮邊" />

亮邊

高度: 1dp

不透明度: 20%

顏色: White (#FFFFFF)

http://wiki.jikexueyuan.com/project/material-design/images/style_logos_product_lighting_edge_shaded.png" alt="暗邊" />

暗邊

高度: 1dp

不透明度: 20%

顏色: 參考色中的陰暗色

拋光

拋光層是 45 度虛擬光線照射的結(jié)果。它從左上延伸至右下，且只在圖標(biāo)邊界之內(nèi)。

http://wiki.jikexueyuan.com/project/material-design/images/style_logos_product_lighting_finish.png" alt="漸變梯度" />

漸變漸變

類型: 放射

角度: 45o

顏色: White (#FFFFFF)

中點(diǎn)位置: 33%

漸變 1 不透明度: 10% 位置: 0%

漸變 2 不透明度: 0% 位置: 100%

參考顏色，暗度和陰影值

當(dāng)顏色、暗度、和陰影改變時(shí)，每種顏色表現(xiàn)出的變化并不相同。元素的顏色或每條邊緣的色調(diào)和暗影都需要根據(jù)相鄰的顏色進(jìn)行調(diào)整。為了確保顏色看起來(lái)較和諧，請(qǐng)遵循下列合適的各值。

http://wiki.jikexueyuan.com/project/material-design/images/style_logos_product_lighting_values_cool.png" alt="參考顏色" /> http://wiki.jikexueyuan.com/project/material-design/images/style_logos_product_lighting_values_fresh.png" alt="參考顏色" /> http://wiki.jikexueyuan.com/project/material-design/images/style_logos_product_lighting_values_warm.png" alt="參考顏色" /> http://wiki.jikexueyuan.com/project/material-design/images/style_logos_product_lighting_values_hot.png" alt="參考顏色" /> http://wiki.jikexueyuan.com/project/material-design/images/style_logos_product_lighting_values_neutral.png" alt="參考顏色" />

產(chǎn)品圖標(biāo)模式

借鑒現(xiàn)實(shí)材質(zhì)的表現(xiàn)，我們簡(jiǎn)單約定表面質(zhì)感和觸感的表達(dá)。材質(zhì)與顏色之間的相互作用也會(huì)產(chǎn)生許多的獨(dú)特成分。

顏色

讓色彩平鋪在平面上，不要加上任何的邊角裝飾。

http://wiki.jikexueyuan.com/project/material-design/images/style_logos_product_patterns_color_do.png" alt="顏色" />

(上圖)可取

http://wiki.jikexueyuan.com/project/material-design/images/style_logos_product_patterns_color_dont.png" alt="顏色" />

(上圖)不可取

圖層

每層元素都會(huì)有深度和邊角，布局中不要超過(guò)兩層，否則將因過(guò)于復(fù)雜而喪失重點(diǎn)。

http://wiki.jikexueyuan.com/project/material-design/images/style_logos_product_patterns_layer_do.png" alt="圖層" />

(上圖)可取

http://wiki.jikexueyuan.com/project/material-design/images/style_logos_product_patterns_layer_dont.png" alt="圖層" />

(上圖)不可取

狗耳

折角（或叫狗耳）用來(lái)隱喻與傳統(tǒng)紙張文檔有關(guān)的表格或文件。不要放在左邊，這樣會(huì)產(chǎn)生破壞和諧的陰影。

http://wiki.jikexueyuan.com/project/material-design/images/style_logos_product_patterns_dogear_do.png" alt="狗耳" />

(上圖)可取

http://wiki.jikexueyuan.com/project/material-design/images/style_logos_product_patterns_dogear_dont.png" alt="狗耳" />

(上圖)不可取

提升

提升一個(gè)關(guān)鍵 material 元素到背景的上方，使其成為關(guān)注重點(diǎn)。不要讓提升的元素被切分或中斷。

http://wiki.jikexueyuan.com/project/material-design/images/style_logos_product_patterns_elevate_do.png" alt="提升" />

(上圖)可取

http://wiki.jikexueyuan.com/project/material-design/images/style_logos_product_patterns_elevate_dont.png" alt="提升" />

(上圖)不可取

劃線

劃線能在不破壞形狀的情況下?tīng)I(yíng)造層次感，不過(guò)要放在對(duì)稱中心。不要用多條劃線或是放在非中央位置。

http://wiki.jikexueyuan.com/project/material-design/images/style_logos_product_patterns_score_do.png" alt="提升" />

(上圖)可取

http://wiki.jikexueyuan.com/project/material-design/images/style_logos_product_patterns_score_dont.png" alt="提升" />

(上圖)不可取

折疊

被伸拉的折疊元素會(huì)更加立體，但斑點(diǎn)色應(yīng)避免使用，會(huì)導(dǎo)致關(guān)鍵元素扭曲改變。

http://wiki.jikexueyuan.com/project/material-design/images/style_logos_product_patterns_fold_do.png" alt="折疊" />

(上圖)可取

http://wiki.jikexueyuan.com/project/material-design/images/style_logos_product_patterns_fold_dont.png" alt="折疊" />

(上圖)不可取

重疊

重疊的元素創(chuàng)造出獨(dú)特的剪影，但邊緣和陰影僅限于輪廓的內(nèi)部。不要使用超過(guò)兩個(gè)以上的重疊，會(huì)導(dǎo)致圖標(biāo)太復(fù)雜，缺乏重點(diǎn)。

http://wiki.jikexueyuan.com/project/material-design/images/style_logos_product_patterns_overlap_do.png" alt="重疊" />

(上圖)可取

http://wiki.jikexueyuan.com/project/material-design/images/style_logos_product_patterns_overlap_dont.png" alt="重疊" />

(上圖)不可取

手風(fēng)琴

手風(fēng)琴式折疊的元素由兩個(gè)折疊的元素相接而成，用來(lái)增加單個(gè)元素的尺寸。不要使用超過(guò)兩個(gè)以上的手風(fēng)琴式折疊，會(huì)導(dǎo)致圖標(biāo)太復(fù)雜，缺乏重點(diǎn)。

http://wiki.jikexueyuan.com/project/material-design/images/style_logos_product_patterns_accordian_do.png" alt="手風(fēng)琴" />

(上圖)可取

http://wiki.jikexueyuan.com/project/material-design/images/style_logos_product_patterns_accordian_dont.png" alt="手風(fēng)琴" />

(上圖)不可取

扭曲

產(chǎn)品圖標(biāo)應(yīng)保持原有幾何形狀，永遠(yuǎn)不要扭曲它。

http://wiki.jikexueyuan.com/project/material-design/images/style_logos_product_patterns_distort_do.png" alt="扭曲" />

(上圖)不可取

http://wiki.jikexueyuan.com/project/material-design/images/style_logos_product_patterns_distort_dont.png" alt="扭曲" />

(上圖)不可取

系統(tǒng)圖標(biāo)

系統(tǒng)圖標(biāo)或者 UI 界面中的圖標(biāo)代表命令、文件、設(shè)備或者目錄。系統(tǒng)圖標(biāo)也被用來(lái)表示一些常見(jiàn)功能，比如清空垃圾桶、打印或者保存。

系統(tǒng)圖標(biāo)的設(shè)計(jì)要簡(jiǎn)潔友好，有現(xiàn)代感，有時(shí)候也可以帶點(diǎn)趣味性。多重含義在一個(gè)簡(jiǎn)化圖標(biāo)上表達(dá)出來(lái)，還須保證在小尺寸下，圖標(biāo)仍然清晰易懂。

http://wiki.jikexueyuan.com/project/material-design/images/Style-SystemIcon-icon_set_large_mdpi.png" alt="SystemIcons icon" />

設(shè)計(jì)原則

使用較粗的幾何線條。

圖標(biāo)獨(dú)特的品質(zhì)依賴于對(duì)稱性與一致性，且須兼顧鮮明和簡(jiǎn)潔。

http://wiki.jikexueyuan.com/project/material-design/images/style_icons_system_intro_principles_simple.png" alt="DesignPrinciples1 icon" />

簡(jiǎn)潔

http://wiki.jikexueyuan.com/project/material-design/images/style_icons_system_intro_principles_intuitive.png" alt="DesignPrinciples2 icon" />

直觀

http://wiki.jikexueyuan.com/project/material-design/images/style_icons_system_intro_principles_actionable.png" alt="DesignPrinciples3 icon" />

可操作

http://wiki.jikexueyuan.com/project/material-design/images/style_icons_system_intro_principles_consistent.png" alt="DesignPrinciples4 icon" />

一致

網(wǎng)格、比例與尺寸

DP單位網(wǎng)格

系統(tǒng)圖標(biāo)以 24dp 的尺寸顯示，當(dāng)創(chuàng)建圖標(biāo)時(shí)，以能夠 100% 的精確像素縮放設(shè)計(jì)圖標(biāo)是非常重要的。

http://wiki.jikexueyuan.com/project/material-design/images/style_icons_system_grid_unitgrid_100.png" alt="" />

100% 縮放

http://wiki.jikexueyuan.com/project/material-design/images/style_icons_system_grid_icongrid_800.png" alt="" />

800% 縮放

圖標(biāo)網(wǎng)格

圖標(biāo)網(wǎng)格已經(jīng)形成一致的標(biāo)準(zhǔn)，且建立起統(tǒng)一元素放置的規(guī)范。此標(biāo)準(zhǔn)化帶來(lái)了一個(gè)富有彈性而連貫的系統(tǒng)。

http://wiki.jikexueyuan.com/project/material-design/images/style_icons_system_grid_icongrid_grid.png" alt="" />

網(wǎng)格

http://wiki.jikexueyuan.com/project/material-design/images/style_icons_system_grid_icongrid_keylines.png" alt="" />

關(guān)鍵線

內(nèi)容區(qū)域

內(nèi)容應(yīng)該保持在活動(dòng)區(qū)域以內(nèi)，如有必要，內(nèi)容可以延展至修飾區(qū)域之中，但不能超出。

http://wiki.jikexueyuan.com/project/material-design/images/style_icons_system_grid_area_live.png" alt="" />

活動(dòng)區(qū)域

http://wiki.jikexueyuan.com/project/material-design/images/style_icons_system_grid_area_trim.png" alt="" />

修飾區(qū)域

關(guān)鍵線形狀

關(guān)鍵線形狀是網(wǎng)格的基礎(chǔ)，通過(guò)關(guān)鍵線，即可保持系統(tǒng)圖標(biāo)的一致性。

http://wiki.jikexueyuan.com/project/material-design/images/style_icons_system_grid_shapes_square.png" alt="" />

方形

寬&高：18px

http://wiki.jikexueyuan.com/project/material-design/images/style_icons_system_grid_shapes_circle.png" alt="" />

圓形

直徑：20px

http://wiki.jikexueyuan.com/project/material-design/images/style_icons_system_grid_shapes_vert_rectangle.png" alt="" />

豎直矩形

高：20px, 寬：16px

http://wiki.jikexueyuan.com/project/material-design/images/style_icons_system_grid_shapes_hori_rectangle.png" alt="" />

水平矩形

高：16px, 寬：20px

幾何

我們?yōu)檫@幾種特定的關(guān)鍵線制定了預(yù)設(shè)規(guī)則：圓形線、方形線、矩形線、正交線和對(duì)角線。這個(gè)通用且簡(jiǎn)潔的元素調(diào)板形成的目的是統(tǒng)一 Google 系統(tǒng)圖標(biāo)和規(guī)范它們?cè)诰W(wǎng)格上的布置。

http://wiki.jikexueyuan.com/project/material-design/images/style_icons_system_grid_geometry1.png" alt="" />

構(gòu)建

http://wiki.jikexueyuan.com/project/material-design/images/style_icons_system_grid_geometry2.png" alt="" />

組成

系統(tǒng)圖標(biāo)剖析

1. 筆劃末端
2. 角
3. 留白
4. 筆觸
5. 內(nèi)部角
6. 邊界區(qū)域

http://wiki.jikexueyuan.com/project/material-design/images/style_icons_system_anatomy.png" alt="" />

角

一致的圓角半徑（2px）是統(tǒng)一全系列系統(tǒng)圖標(biāo)的關(guān)鍵，不要修改它。

圖標(biāo)內(nèi)部的角應(yīng)為直角，也不要修改它。

http://wiki.jikexueyuan.com/project/material-design/images/style_icons_system_anatomy_corner_exterior.png" alt="" />

外部角

http://wiki.jikexueyuan.com/project/material-design/images/style_icons_system_anatomy_corner_interior.png" alt="" />

內(nèi)部角

筆觸

一致的畫筆寬度（2px）也是統(tǒng)一全系列系統(tǒng)圖標(biāo)的關(guān)鍵，請(qǐng)?jiān)趦?nèi)外部的邊角上保持使用2px的寬度。

http://wiki.jikexueyuan.com/project/material-design/images/style_icons_system_anatomy_strokes_consistency.png" alt="" />

一致

http://wiki.jikexueyuan.com/project/material-design/images/style_icons_system_anatomy_strokes_curves.png" alt="" />

折線和角

http://wiki.jikexueyuan.com/project/material-design/images/style_icons_system_anatomy_strokes_terminal.png" alt="" />

筆劃末端

http://wiki.jikexueyuan.com/project/material-design/images/style_icons_system_anatomy_strokes_counter.png" alt="" />

內(nèi)部角

視覺(jué)校正

極端情況下必要的校正能夠增加圖標(biāo)的清晰度。 如有必要，需與其他圖標(biāo)保持一致的幾何形狀，不要加以扭曲。

http://wiki.jikexueyuan.com/project/material-design/images/style_icons_system_anatomy_optical_complex.png" alt="" />

復(fù)雜

http://wiki.jikexueyuan.com/project/material-design/images/style_icons_system_anatomy_optical_small.png" alt="" />

縮小

清空

為了可讀性和觸摸操作的需要，圖標(biāo)周圍可以留有一定的空白區(qū)域。

http://wiki.jikexueyuan.com/project/material-design/images/style_icons_system_anatomy_clearance_area.png" alt="" />

清空區(qū)域

http://wiki.jikexueyuan.com/project/material-design/images/style_icons_system_anatomy_clearance_placement.png" alt="" />

放置

最佳范例

一致的圖標(biāo)可以有利于用戶理解，在不同應(yīng)用中也盡量使用已有的系統(tǒng)圖標(biāo)。

http://wiki.jikexueyuan.com/project/material-design/images/style_icons_system_best_do1.png" alt="" />

(上圖)可取

使用相同的畫筆寬度以及方形的筆劃末端。

http://wiki.jikexueyuan.com/project/material-design/images/style_icons_system_best_dont1.png" alt="" />

(上圖)不可取

不要使用不相同的畫筆寬度以及非方形的筆劃末端。

http://wiki.jikexueyuan.com/project/material-design/images/style_icons_system_best_do2.png" alt="" />

(上圖)可取

讓圖標(biāo)顯得正面且堅(jiān)定。

http://wiki.jikexueyuan.com/project/material-design/images/style_icons_system_best_dont2.png" alt="" />

(上圖)不可取

不要傾斜、旋轉(zhuǎn)圖標(biāo)，或是讓圖標(biāo)顯得立體。

http://wiki.jikexueyuan.com/project/material-design/images/style_icons_system_best_do3.png" alt="" />

(上圖)可取

簡(jiǎn)化圖標(biāo)使其更具清晰度和可讀性。

http://wiki.jikexueyuan.com/project/material-design/images/style_icons_system_best_dont3.png" alt="" />

(上圖)不可取

不要過(guò)度擬物化使得圖標(biāo)復(fù)雜。

http://wiki.jikexueyuan.com/project/material-design/images/style_icons_system_best_do4.png" alt="" />

(上圖)可取

讓圖標(biāo)更加幾何化而變得更加顯眼。

http://wiki.jikexueyuan.com/project/material-design/images/style_icons_system_best_dont4.png" alt="" />

(上圖)不可取

不要過(guò)度精細(xì)，使用過(guò)細(xì)畫筆寬度。

http://wiki.jikexueyuan.com/project/material-design/images/style_icons_system_best_do5.png" alt="" />

(上圖)可取

使用一致的幾何形狀。

http://wiki.jikexueyuan.com/project/material-design/images/style_icons_system_best_dont5.png" alt="" />

(上圖)不可取

不要使用過(guò)于松散的形狀。

http://wiki.jikexueyuan.com/project/material-design/images/style_icons_system_best_do6.png" alt="" />

(上圖)可取

讓圖標(biāo)在像素點(diǎn)上（X、Y 坐標(biāo)值不包含小數(shù)）。

圖標(biāo)應(yīng)有相等的寬高(e.g. 24x24)，避免扭曲。

http://wiki.jikexueyuan.com/project/material-design/images/style_icons_system_best_dont6.png" alt="" />

(上圖)不可取

圖標(biāo)不在像素點(diǎn)上。

寬高不等。

顏色

可用圖標(biāo)的標(biāo)準(zhǔn)不透明度在亮色背景上是54%（#000000）。可視等級(jí)較低的禁用圖標(biāo)的不透明度應(yīng)為 26%（#000000）。

可用圖標(biāo)的標(biāo)準(zhǔn)不透明度在暗色背景上是 100%（#FFFFFF）?？梢暤燃?jí)較低的禁用圖標(biāo)的不透明度應(yīng)為 30%（#FFFFFF）。

http://wiki.jikexueyuan.com/project/material-design/images/style_icons_system_color1.png" alt="" />

http://wiki.jikexueyuan.com/project/material-design/images/style_icons_system_color2.png" alt="" />

原文：Material Design Style Icons

翻譯：Goshin Haoxiqiang