產(chǎn)品圖標(biāo)網(wǎng)格已經(jīng)形成了一致的標(biāo)準(zhǔn)，且建立了一套明確的圖形元素定位規(guī)則。這種標(biāo)準(zhǔn)化帶來了靈活，而連貫的系統(tǒng)。今天為大家分享APP圖標(biāo)設(shè)計規(guī)范及要求，一起來學(xué)習(xí)吧！

以上已經(jīng)是全尺寸比例高寬網(wǎng)格圖可以右擊另存作為參考圖使用

網(wǎng)格

關(guān)鍵線的形狀

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

方形

高&寬: 152

圓形

直徑: 176

豎直矩形

高:176 寬:128

水平矩形

高:128 寬:176

DP 單位網(wǎng)格

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

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

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

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

幾何

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

 

為什么要這樣設(shè)計？以上右圖著名的視覺錯覺案例可以例證：

一樣長的線段不同的視覺表現(xiàn)產(chǎn)生不一樣的視覺感知，矩形的視覺感知面積相對大，所以相對網(wǎng)格線居中定格最小部分來設(shè)計來達到各種其他形狀樣式的圖標(biāo)統(tǒng)一感。

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

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

活動區(qū)域

修飾區(qū)域

關(guān)鍵線形狀

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

方形

寬&高：18px

圓形

直徑：20px

豎直矩形

高：20px, 寬：16px

豎直矩形

高：20px, 寬：16px

幾何

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

構(gòu)建

組成

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

筆劃末端

角

留白

筆觸

內(nèi)部角

邊界區(qū)域

角

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

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

外部角

內(nèi)部角

筆觸

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

一致

折線和角

筆劃末端

內(nèi)部角

視覺校正

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

復(fù)雜

縮小

清空

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

清空區(qū)域

放置

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

最佳范例

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

(上圖)可取

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

(上圖)不可取

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

(上圖)可取

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

(上圖)不可取

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

(上圖)可取

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

(上圖)不可取

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

(上圖)可取

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

(上圖)不可取

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

(上圖)可取

使用一致的幾何形狀。

(上圖)不可取

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

(上圖)可取

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

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

(上圖)不可取

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

寬高不等。

以上就是APP圖標(biāo)設(shè)計規(guī)范及要求介紹，教程很實用，希望大家看完本篇教程能有所幫助！