app圖標設計規范

 　　產品圖標網格已經形成了一致的標准，且建立了一套明確的圖形元素定位規則。這種標准化帶來了靈活，而連貫的系統。

　　以上已經是全尺寸比例高寬網格圖可以右擊另存作為參考圖使用

　　網格

　　關鍵線的形狀

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

　　方形

　　高&寬: 152

　　圓形

　　直徑: 176

　　豎直矩形

　　高:176 寬:128

　　水平矩形

　　高:128 寬:176

　　DP 單位網格

　　設備上的啟動器以 48dp 的尺寸顯示產品圖標 (邊緣 1dp)，所以當你創建圖標時，請使用 48dp 的尺寸，必要時可將其放大 400% 到 192 x 192 dp (邊緣變位 4dp)。

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

　　1:1 單元網格

　　4:1 單元網格

　　幾何

　　我們為這幾種特定的關鍵線制定了預設規則：圓形線、方形線、矩形線、正交線和對角線。這個通用且簡潔的元素調板形成的目的是統一產品圖標和規范它們在網格上的布置。

　　為什麼要這樣設計?以上右圖著名的視覺錯覺案例可以例證：

　　一樣長的線段不同的視覺表現產生不一樣的視覺感知，矩形的視覺感知面積相對大，所以相對網格線居中定格最小部分來設計來達到各種其他形狀樣式的圖標統一感。

　　內容區域

　　內容應該保持在活動區域以內，如有必要，內容可以延展至修飾區域之中，但不能超出。

　　活動區域

　　修飾區域

　　關鍵線形狀

　　關鍵線形狀是網格的基礎，通過關鍵線，即可保持系統圖標的一致性。

　　方形

　　寬&高：18px

　　圓形

　　直徑：20px

　　豎直矩形

　　高：20px, 寬：16px

　　豎直矩形

　　高：20px, 寬：16px

　　幾何

　　我們為這幾種特定的關鍵線制定了預設規則：圓形線、方形線、矩形線、正交線和對角線。這個通用且簡潔的元素調板形成的目的是統一 Google 系統圖標和規范它們在網格上的布置。

　　構建

　　組成

　　系統圖標剖析

　　筆劃末端

　　角

　　留白

　　筆觸

　　內部角

　　邊界區域

　　角

　　一致的圓角半徑(2px)是統一全系列系統圖標的關鍵，不要修改它。

　　圖標內部的角應為直角，也不要修改它。

　　外部角

　　內部角

　　筆觸

　　一致的畫筆寬度(2px)也是統一全系列系統圖標的關鍵，請在內外部的邊角上保持使用2px的寬度。

　　一致

　　折線和角

　　筆劃末端

　　內部角

　　視覺校正

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

　　復雜

　　縮小

　　清空

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

　　清空區域

　　放置

　　----------------------------------------------------------------------------------------------

　　最佳范例

　　一致的圖標可以有利於用戶理解，在不同應用中也盡量使用已有的系統圖標。

　　(上圖)可取

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

　　(上圖)不可取

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

　　(上圖)可取

　　讓圖標顯得正面且堅定。

　　(上圖)不可取

　　不要傾斜、旋轉圖標，或是讓圖標顯得立體。

　　(上圖)可取

　　簡化圖標使其更具清晰度和可讀性。

　　(上圖)不可取

　　不要過度擬物化使得圖標復雜。

　　(上圖)可取

　　讓圖標更加幾何化而變得更加顯眼。

　　(上圖)不可取

　　不要過度精細，使用過細畫筆寬度。

　　(上圖)可取

　　使用一致的幾何形狀。

　　(上圖)不可取

　　不要使用過於松散的形狀。

　　(上圖)可取

　　讓圖標在像素點上(X、Y 坐標值不包含小數)。

　　圖標應有相等的寬高(e.g. 24x24)，避免扭曲。

　　(上圖)不可取

　　圖標不在像素點上。

　　寬高不等。