重要:未經泰瑞廣告的書面授權,我們拒絕一切形式的屬于本公司網站所屬文字和圖片的商業轉載使用,并保留由此引發的不當利益追索權利!

泰瑞廣告有限公司

南京市江寧區九竹路臨港同策同心園1幢301.
1-301,No.402, Jiuzhu Road,Jiangning, Nanjing, China.

郵編 P.C:210000
電話 Tel:(86)-025-83323458
傳真 Fax:(86)-025-83323458
郵箱 E-mail:Tiradcn@126.com

Material Design中文完整版

作者:admin    發布日期:2017-8-16 16:47:26

Icons    

Material icons使用幾何圖形直觀地來表示其核心概念,功能或主題。

 

產品icons是一個品牌下產品、服務和工具的一種視覺表現

 

系統icons則代表一個命令、文件、設備、目錄或常用操作。


尺寸  

產品icons 48dp,邊緣1dp;系統icons 24dp。


Icons在淺色背景上  

Icon狀態不透明度
觸發+聚焦87%
觸發+未聚焦54%
未觸發38%


Icons在深色背景上  

Icon狀態不透明度
觸發+聚焦100%
觸發+未聚焦70%
未觸發50%


40d6594bd802a8012193a35c22ab.jpg


- 產品icons(Product icons)  

產品icons作為一個品牌下產品、服務和工具的一種視覺表現,能夠簡潔、醒目且友好地傳遞產品的核心理念與內涵。雖然每個 產品 icons看上去都截然不同,但對于品牌來說你應該通過理念和實踐把它們都統一起來。


產品icons是傳達品牌內涵的一個重要載體。從使用以下準則開始,確保產品icons的顏色和其他關鍵要素能夠正確反映你的品牌特性。

 

                  

caf1594bd825a8012193a314963c.jpg


設計方法

產品icon設計從現實材料的質感和觸感中獲得啟發。每個icon都像真實紙張一樣被裁剪、折疊、照亮,并且這一切都是通過一些簡單的圖形元素來表現的。通過干凈的折痕和清晰的邊緣來表現Material結實堅固的質感,利用微妙的亮光和陰影來展現材料的啞光質感。

7328594bd830a8012193a31f1a35.jpg

物理原型


 

2b3e594bd839a8012193a32963ab.jpg

光線考究


69a4594bd843a8012193a30a7b2c.jpg

Material原型


8872594bd84ba8012193a3e1e625.jpg

顏色考究

 

產品icon網格

使用產品icon網格進行設計有利于一致性,同時也為icon的定位建立了一套明確的規則。這種標準化帶來了靈活且一致的系統。

dd76594bd855a8012193a3226555.jpg

網格


37ef594bd861a8012193a36b3f83.jpg

參考線


參考線的形狀

參考線的形狀是網格的基礎。利用這些核心形狀做為向導,即可使整個相關產品的icons保持一致的視覺比例。


4c97594bd86aa8012193a35e0e66.jpg

方形

高&寬: 152dp


a05c594bd872a8012193a3ab0e24.jpg

圓形

直徑:176 dp


7ce0594bd87aa8012193a3a69cdc.jpg

豎直矩形

高: 176dp

寬: 128dp


ecc4594bd881a8012193a3473e77.jpg

水平矩形

高: 128dp

寬: 176dp


DP單位網格

在线电影免费Android的產品icon尺寸是48dp,邊緣為1dp。所以當你創建icon時,請使用48dp的尺寸,但將其放大至400%時,尺寸為192 x 192 dp(邊緣則變為4dp)

f90c594bd890a8012193a3fa6ffd.jpg

1:1的單位網格


46d7594bd89ca8012193a312f96b.jpg

4:1的單位網格


幾何形狀

我們為參考線制定了一些預設的標準形狀:圓形、方形、矩形、正交線和對角線。

a778594bd8a4a8012193a34222cc.jpg


a4ce594bd8aca8012193a3a92ad4.jpg


6146594bd8b4a8012193a3f2412f.jpg


40d5594bd8bca8012193a3e2d755.jpg


 

產品icon剖析圖

在线电影免费產品icon剖析圖描述了組成一個產品icon的圖形對象。在這些icons中,對象的一致性是形成統一視覺語言的關鍵。熟悉這些對象可以更容易地理解每個logo和它們之間特征的細微差異。它也將幫助你學習了解logo設計中的基礎結構。


  • 最終處理

  • Material 背景

  • Material 前景

  • 色彩

  • 投影


b0a0594bd8c8a8012193a30d5a03.jpg

組件

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


dbc2594bd8d0a8012193a37ce335.jpg

構建視角

顯示圖標構造中各對象的立體分解圖。


b8bf594bd8d9a8012193a34e5b8e.jpg

在线电影免费Material 背景

最底層的對象。


aba6594bd8e2a8012193a393dd83.jpg

Material 前景

上面抬起的material對象,它會在material背景上投射陰影


  
5f9b594bd8f2a8012193a37f73b2.jpg

專色

在线电影免费應用到元素中一小部分的顏色


f806594bd8fca8012193a3048a03.jpg

泛色

在线电影免费無邊框,應用到整個對象的顏色


114e594bd904a8012193a35250a9.jpg

邊緣色(亮邊)

在线电影免费在material對象的頂部邊緣。該顏色混合了白色,它比固有色更亮


dcf3594bd90ea8012193a327212b.jpg

邊緣色(暗邊)

在material對象的底部邊緣。該顏色混合了深色,它比固有色更暗


 

307c594bd919a8012193a315da60.jpg

投影

Material對象抬高后周圍形成的一個柔和投影。


2d5f594bd924a8012193a359d1b1.jpg

最終處理

為所有對象提供了一個柔和的色彩照明,從左上角到右下角逐漸減弱。

 

產品icon準則

光線

在线电影免费在material環境中,模擬燈光照射在物體上并使其產生投影。頂部發出的光使material對象產生上文提及的陰影,以此突出物體的上下邊緣,而帶有角度的光線則可以增強對象表面的質感。

e8af594bd934a8012193a30e9bf0.jpg

光在正頂部時


8b4f594bd94aa8012193a382c7c0.jpg

光為45%時


陰影

在线电影免费對于產品icon來說,頂部的光會讓對象周圍投下柔和的陰影并且在元素的頂部和左邊會有高光出現。左上陰影較輕而右下陰影較重,并且它總會處于整個icon的輪廓中。

b77c594bd95ca8012193a39e20c6.jpg

陰影數值

模式:普通

不透明度:20%

X軸偏移:0px

Y軸偏移:6px

模糊值:4px

色彩:參考色彩,形狀和陰影的數值


亮邊和暗部

Material對象的頂部和底部邊緣提供了一種深度感和表面感。Material對象有一個1dp的標準厚度。要注意所有邊的距離都是從該對象的內邊緣算起的。


亮邊是突出了所有對象的上邊緣。而左、右和底部的邊緣是沒有亮邊的。


 

在线电影免费暗部是突出了所有對象的下邊緣。而左、右和頂部的邊緣是沒有暗部的。


64f6594bd96ca8012193a31339cd.jpg

亮邊

高度: 1dp

透明度: 20%

顏色值: White (#FFFFFF)


036c594bd975a8012193a3b3055a.jpg

暗部

高度: 1dp

透明度: 20%

顏色值: 參考圖標色彩中陰暗部分的數值


最終處理

最終處理是指一個45度的虛擬照射光線。它從左上延伸至右下,且只作用在圖標之內。


d176594bd981a8012193a3b84afe.jpg

漸變參數

樣式: 徑向

角度: 45o

在线电影免费顏色值: White (#FFFFFF)

中點位置: 33%


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

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


 

亮部、暗部和投影值

對象因受到光照的影響會使亮部、暗部和投影的顏色呈現出不同的改變。這時就需要我們根據它們固有色來對對象的亮邊、暗部和陰影進行調整。為了確保顏色看起來和諧,請遵循下列顏色取值。

af9c594bd991a8012193a30785f9.jpg

冷色


402f594bd999a8012193a369797f.jpg

清新色


7e0c594bd9a2a8012193a32d7425.jpg

暖色


10fd594bd9aba8012193a3bf9532.jpg

熱色


dc15594bd9b4a8012193a3907b2d.jpg

中性色


產品icon模式

受到現實材料物理行為的影響,我們簡單的規定了對象的表面質感和觸感。材質與顏色之間的相互作用也為更多獨特的作品創作提供了可能性。

 

顏色  

讓顏色元素與material對象表面齊平。不要給顏色元素增加任何的邊緣或投影。

4d0c594bd9bea8012193a3463261.jpg

可行


e3cb594bd9c6a8012193a307bc67.jpg

不可行


圖層

對material對象進行分層能夠形成空間深度(有邊緣和投影)。

 

在线电影免费但要謹慎對待material對象層疊的數量,避免因過于復雜而喪失焦點。

0220594bd9d3a8012193a3b2f8de.jpg

可行

prev:純干貨:AI高手完全應用手冊   |  next:工業設計與視覺動力-09