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

pp
1 評(píng)論 12795 瀏覽 60 收藏 4 分鐘

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

因?yàn)榘沧渴謾C(jī)品牌太多,每個(gè)手機(jī)品牌系統(tǒng)不同可能對(duì)桌面圖標(biāo)的處理也不相同。

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

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

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

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

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

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

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

注:

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

  • 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è)計(jì)過(guò)程中,在四周空出幾個(gè)像素點(diǎn)使得設(shè)計(jì)的圖標(biāo)與其他圖標(biāo)在視覺(jué)上一致。

例如:

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

 

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

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

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