APP圖標(biāo)設(shè)計(jì)規(guī)范及要求介紹

發(fā)布時(shí)間：2016-01-08 11:39:49 作者：佚名

今天為大家分享APP圖標(biāo)設(shè)計(jì)規(guī)范及要求，教程很不錯(cuò)，對(duì)于app圖片設(shè)計(jì)的朋友很值得學(xué)習(xí)，推薦過(guò)來(lái)，大家一起來(lái)學(xué)習(xí)吧

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

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

網(wǎng)格

關(guān)鍵線的形狀

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

方形

高&寬: 152

圓形

直徑: 176

豎直矩形

高:176 寬:128

水平矩形

高: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ì)齊的正確性。

1: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)格上的布置。

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

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

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

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

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

修飾區(qū)域

關(guān)鍵線形狀

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

方形

寬&高：18px

圓形

直徑：20px

豎直矩形

高：20px, 寬：16px

豎直矩形

高：20px, 寬：16px

幾何

我們?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)格上的布置。