規(guī)范篇:Android設(shè)計規(guī)范—桌面圖標(biāo)

pp
1 評論 12867 瀏覽 60 收藏 4 分鐘

不同的安卓手機(jī)系統(tǒng)對應(yīng)的桌面圖標(biāo)處理也不相同,作者經(jīng)過檢驗發(fā)現(xiàn):主流安卓手機(jī)在96x96px尺寸下圓角小于等于20px為安全值。

因為安卓手機(jī)品牌太多,每個手機(jī)品牌系統(tǒng)不同可能對桌面圖標(biāo)的處理也不相同。

并不是完全統(tǒng)計:除了小米手機(jī),其他的安卓手機(jī)在網(wǎng)上沒有查到規(guī)范,并不像ios系統(tǒng)直接提供直角即可。需要先搞清楚對桌面圖標(biāo)進(jìn)行統(tǒng)一剪裁的手機(jī)平臺規(guī)范,就可知道圓角設(shè)置能保證在這些平臺可完全匹配,不出現(xiàn)白邊黑邊的情況。

在多個統(tǒng)一剪裁的手機(jī)里面裝上一些用戶多的app進(jìn)行比較,看是否都完美的匹配未出現(xiàn)白邊黑邊的情況。

比較了淘寶、京東、QQ、支付寶、微信、騰訊、愛奇藝、小紅書等APP,發(fā)現(xiàn)除了小紅書其他的APP都未出現(xiàn)問題,那么就可以肯定小紅書的圓角大小是不安全的。

下圖為從apk包里找出來的桌面圖標(biāo)切圖,以下4個尺寸為開發(fā)包里所需要的切圖尺寸。

發(fā)現(xiàn)在96x96px尺寸下圓角為20px占到了42%,那么21px-22px是否能保證完美匹配?

可以將圓角21px和圓角22px的切圖輸出給開發(fā)小哥哥,放到包里然后在測試機(jī)上檢驗,發(fā)現(xiàn)在小米手機(jī)上會出現(xiàn)白邊黑邊的情況。

那么可以得出結(jié)論在96x96px尺寸下圓角小于等于20px為安全值(這個安全值并不能說明可以包含所有的安卓手機(jī),畢竟安卓手機(jī)品牌太多系統(tǒng)版本也是很多,但至少可以涵蓋大部分主流安卓手機(jī)品牌)選用這個值也有一定道理,會發(fā)現(xiàn)20px這個值在各分辨率等比縮放下都能保證圓角是整數(shù)。

注:

應(yīng)用程序圖標(biāo) (Icon)是一個?Alpha?通道透明的32位?PNG?圖片。由于安卓設(shè)備眾多,一個應(yīng)用程序圖標(biāo)需要設(shè)計幾種不同大小,如:

  • LDPI?(Low?Density Screen,120?DPI),其圖標(biāo)大小為 36 x 36?px。
  • MDPI?(Medium Density Screen, 160 DPI),其圖標(biāo)大小為 48 x 48?px。
  • HDPI (High Density Screen, 240 DPI),其圖標(biāo)大小為 72 x 72?px。
  • xhdpi (Extra-high density screen, 320 DPI),其圖標(biāo)大小為 96 x?96?px。

在設(shè)計過程中,在四周空出幾個像素點使得設(shè)計的圖標(biāo)與其他圖標(biāo)在視覺上一致。

例如:

  • 96 x 96 px 圖標(biāo)可以畫圖區(qū)域大小可以設(shè)為 88 x 88 px, 四周留出4個像素用于填充(無底色)。
  • 72 x 72 px 圖標(biāo)可以畫圖區(qū)域大小可以設(shè)為 68 x 68 px, 四周留出2個像素用于填充(無底色)。
  • 48 x 48 px 圖標(biāo)可以畫圖區(qū)域大小可以設(shè)為 46 x 46 px, 四周留出1個像素用于填充(無底色)。
  • 36 x 36 px 圖標(biāo)可以畫圖區(qū)域大小可以設(shè)為 34 x 34 px, 四周留出1個像素用于填充(無底色)。

 

本文由 @pp 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載。

題圖來自Unsplash,基于CC0協(xié)議。

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發(fā)揮!