這是一個翻譯系列,原文是谷歌18年所出的材料設計指南(文末有鏈接),強大的材料設計將帶我們一起深入了解UI設計中的所有規范。每周會更新數篇,一共百余篇,歡迎關注哦。

 

系統圖標用于表示常用操作、文件、設備和目錄等。

 

目錄

設計原則
網格和關鍵線形狀
系統圖標規格
顏色
圖標主題

 

設計原則

概念

系統圖標的設計應簡單、時尚、友好,有時也要帶點趣味性。每個圖標都精簡到最小形式,表達出基本特征即可。

 

圖標形狀都是醒目的幾何體。它們有對稱和一致的外觀,即使尺寸很小,也要保證可讀性和清晰度。

 

網格和關鍵線形狀

圖標尺寸

系統圖標的顯示尺寸為24x24dp。創建100%比例查看的圖標可獲得完美像素精度。

 

密集型布局

在桌面端,當鼠標和鍵盤為主要的輸入方式時,尺寸可以縮小到20dp。

 

布局

圖標內容應該處于安全區域內,即不會被遮擋的地方(例如滾動時出現側邊欄)。

如需增加視覺權重,內容可以延伸到安全區域與裁剪區域(整個圖像大?。┲g的內邊距。圖標的任何部分都不應該延伸到剪裁區域之外。

 

關鍵線形狀

圖標網格和關鍵線

圖標網格為圖形元素的一致性和靈活定位建立了明確的規則。

關鍵線形狀是網格的基礎。通過使用這些核心形狀作為準則,可以使系統圖標在設計中都保持視覺比例上的一致。

 

基本形狀

特定的關鍵線呈現出一些確定的形狀:圓形、方形、矩形、正交線和對角線。這些基礎形狀有助于統一Google系統圖標并規范它們在圖標網格上的位置。

 

幾何形狀

預設標準已經確定了一些明確的關鍵線:圓形、方形、矩形、正交線和對角線。這些通用且簡單的元素已經被用來統一Google的系統圖標,并將圖標在網格上的位置系統化。

 

清晰(完美像素)

為避免扭曲圖標,通過將X軸和Y軸的坐標設置成整數(沒有小數)使圖標放置在“像素之上”。

 

系統圖標規范

剖析

  1. 筆畫末端
  2. 拐角
  3. 內部區域
  4. 筆畫
  5. 內部筆畫
  6. 邊界區域

 

拐角

圓角半徑默認值為2dp。拐角的內部應該是方形而非圓形。對于寬度小于或等于2dp的形狀,不要把描邊的拐角也做成圓角。

 

筆畫

系統圖標使用一致的2dp筆畫寬度,包括曲線、斜線,以及內部和外部的描邊。

 

復雜的圖標形狀

如果系統圖標需要復雜的細節,則可進行細微的調整以提高其可讀性。這些調整稱為視覺校正,任何視覺校正都應該使用基礎的幾何形態,不要傾斜或扭曲這些形狀。

 

復雜的調整

回形針圖標使用了原本2dp筆畫區域中的1.5dp,以便在24 x 24 dp的空間內適應多個彎角。

 

空間

系統圖標周圍應保留足夠的空間,以增加可讀性和觸控范圍。尺寸為24dp的圖標可使用尺寸為48dp的觸控范圍。

  1. 間隙區域
  2. 放置方式

 

緊湊布局(桌面端)

當鼠標和鍵盤為主要輸入方式時,可以壓縮尺寸以適應更緊湊的布局。尺寸為20dp的密集圖標使用尺寸為40dp的觸控范圍。

  1. 間隙區域
  2. 放置方式

 

顏色

淺色背景上的圖標

激活圖標

聚焦狀態下的激活圖標在淺色背景上的標準不透明度是87%(#000000)。激活但未聚焦的狀態是54%。

未激活圖標

未激活圖標在視覺層次中級別較低,它應具備的不透明度是38%(#000000 )

 

深色背景上的圖標

激活圖標

聚焦狀態下的激活圖標在深色背景上的標準不透明度是100%(#FFFFFF)。激活但未聚焦的狀態是70%。

未激活圖標

未激活圖標在視覺層次中級別較低,它應具備的不透明度是50%(#FFFFFF)

 

 

圖標主題

為創建定制的系統圖標,可以自定義系統圖標的三個屬性:筆畫與填充、圓角半徑以及顏色。

預設圖標主題

通過調整這些屬性可以創建以下四個預設定制圖標集。

 

輪廓圖標

輪廓圖標可以自定義筆畫和填充屬性來營造輕盈干凈的風格,以適用密集型界面。通過調整輪廓圖標的筆畫粗細能補足或平衡排版權重。

筆畫和填充

當系統圖標未被填充時,它們由其筆畫來定義。較粗的筆畫增加了重量和塊狀感,也使填充的圖標感覺更沉重。較細的筆畫意味著輕盈,給未填充圖標帶來了一種輕松明快的感覺。

 

筆畫對齊

筆畫位置(形狀的內部、中間或外部)影響圖標的整體外觀。大多情況下,筆畫最好與形狀內部對齊。

  1. 標準材料圖標
  2. 筆畫內部對齊
  3. 筆畫中間對齊
  4. 筆畫外部對齊

 

 

這些線性圖標的輕筆畫沿用了應用品牌的細線風格。

 

  1. 品牌logo
  2. 線性圖標
  3. app中的線性圖標

 

尖角和圓角圖標

尖角圖標

尖角圖標通過直邊來顯示角,清爽的樣式即使在較小的比例下也能保持清晰可讀。

圓角圖標

圓角圖標使用圓角半徑,能很好地匹配以較重排版、曲線logo或圓形元素為表現風格的品牌。

圓角半徑

圖標的圓角半徑由彎曲的外部拐角組成。圖標可以較大或較小的圓角半徑作為特征。

推薦圓角半徑值在0dp和4dp之間。

 

 

 

圓角半徑為0dp的尖角圖標與app的矩形設計細節相呼應。

 

  1. 品牌logo
  2. 尖角圖標
  3. app中的尖角圖標

 

這個app使用了圓角按鈕和線性logo。

 

  1. 品牌logo
  2. 圓角圖標
  3. app中的圓角圖標

 

雙色圖標

雙色圖標增加了一個維度,它使用了筆畫、填充和顏色等屬性。對比筆畫與填充色使多品牌色得以使用,也提高了可讀性。

 

雙色圖標能對一個圖標的筆畫和填充使用不同的顏色??梢哉{整填充的透明度來提高清晰度和匹配品牌。

淺色背景 深色背景
筆畫 87%純色 100%純色

圖標筆畫的不透明度必須是淺色背景上使用87%和深色背景上使用100%。填充色可以根據背景色調來改變。

 

這個電子郵件app中使用了雙色品牌元素,例如logo。

 

  1. 品牌logo
  2. 雙色圖標
  3. app中的雙色圖標

 

原文地址:Material Design

譯者:招財魚

 

轉載請注明:學UI網 » Material Design System icons 系統圖標

登錄收藏
 
你可能喜歡的:
【面試題】喵街tab商城頁改版總結【面試題】喵街tab商城頁改版總結
Material Design States 狀態Material Design States 狀態
Material Design Selection 選擇Material Design Selection 選擇
從「科學方法」到「設計實踐」 – 云產品設計師會夢見服務器么?從「科學方法」到「設計實踐」 – 云產品設計師會夢見服務器么?
異常場景怎么處理?異常場景怎么處理?
UI設計交接給開發之后看起來更糟的7個原因,以及為什么這可能是你的錯UI設計交接給開發之后看起來更糟的7個原因,以及為什么這可能是你的錯
如何設計好一款APP的首頁?如何設計好一款APP的首頁?
B端品牌如何面向C端用戶B端品牌如何面向C端用戶
如何搭建一個易學性高可用性強的功能框架?如何搭建一個易學性高可用性強的功能框架?
盤點 | 4個成為標桿的超強體驗設計盤點 | 4個成為標桿的超強體驗設計
?
京东方a股票