安卓界面設(shè)計(jì)規(guī)范

1、目前主流的安卓手機(jī)分辨率有以下3種：hdpi，對(duì)應(yīng)800*480的手機(jī)。主流機(jī)型，很多。如小米1 ，1s 三星 htc 等xdpi，對(duì)應(yīng)1280*720的手機(jī)。三星Galaxy系列和華為p6.xxdpi，對(duì)應(yīng)1080*1920的手機(jī)。小米手機(jī)，華為榮耀手機(jī)系列為主加上htc one。下面是當(dāng)面流行的安卓手機(jī)的屏幕尺寸和分辨率：小米 3和小米4 屏幕尺寸和分辨率： 5英寸 19201080像素魅族MX2 屏幕尺寸和分辨率： 4.4英寸 1280800像魅族MX3 屏幕尺寸和分辨率： 5.1英寸 18001080像素HTC one屏幕尺寸和分辨率： 4.7英寸 19201080像素華為榮耀6屏幕尺

2、寸和分辨率： 5英寸 19201080像素華為p6屏幕尺寸和分辨率： 4.7英寸 1280720像素華為p7屏幕尺寸和分辨率： 5英寸 19201080像素什么是屏幕像素密度？屏幕像素密度，即每英寸屏幕所擁有的像素?cái)?shù)，英文簡(jiǎn)稱PPI。在目前我們的安卓APP設(shè)計(jì)項(xiàng)目當(dāng)中，我們并不會(huì)去為每一種分辨率去設(shè)計(jì)一套UI界面。這是一種追求完美和理想的狀態(tài)。小公司肯定是耗不起這樣的。所以，這個(gè)時(shí)候我們需要學(xué)會(huì)變通。為了適應(yīng)多分辨率，1：在標(biāo)準(zhǔn)基礎(chǔ)（xdpi：1280*720）上開(kāi)始，然后放大或縮小，以適應(yīng)到其他尺寸。2：從設(shè)備的最大尺寸（xxdpi：19201080）開(kāi)始，然后縮小，并適應(yīng)到所需的最小屏幕尺

3、寸。有些時(shí)候我們也會(huì)在實(shí)際開(kāi)發(fā)過(guò)程中，Android和IOS的設(shè)計(jì)稿若無(wú)太大差異，也可從IOS的分辨率（960*640）開(kāi)始，再調(diào)整設(shè)計(jì)稿的比例，適應(yīng)其他分辨率。但是這種方法在切圖的時(shí)候 需要做一些圖片的調(diào)整。如果不是矢量圖的元件需要重新按照1280*720的尺寸設(shè)計(jì)下。2、安卓app設(shè)計(jì)規(guī)范之字體和字體大小我們必須知道的安卓設(shè)計(jì)常識(shí)：安卓4.0之后用的字體是Roboto。中文字體：方正蘭亭黑體今天跟大家講解的是在720*1280的基礎(chǔ)上的字體設(shè)計(jì)大小。注釋最小字體： 12sp = 24px文本字體： 14sp = 28px文章標(biāo)題或圖標(biāo)名稱： 16sp = 32px導(dǎo)航標(biāo)題： 18sp =

4、36px一般android設(shè)置長(zhǎng)度和寬度多用dip,設(shè)置字體大小多用sp. 在屏幕密度為160，1dp=1px=1dip, 1pt = 160/72 sp 1pt = 1/72 英寸.當(dāng)屏幕密度為240時(shí)，1dp=1dip=1.5px.安卓多分辨率解決方案Android的多分辨率，一向是設(shè)計(jì)師和開(kāi)發(fā)者非常頭疼的事兒。盡管如此，對(duì)于多分辨造成的復(fù)雜問(wèn)題，也是大家要優(yōu)先解決的。Android支持多種不同的dpi模式：ldpi 、mdpi 、hdpi 、xhdpi 、xxhdpi 、xxxhdpi 注意，ppi、dpi 是密度單位，不是度量單位 ： * ppi (pixels per inch)：圖

5、像分辨率 （在圖像中，每英寸所包含的像素?cái)?shù)目） * dpi (dots per inch)： 打印分辨率 （每英寸所能打印的點(diǎn)數(shù)，即打印精度）dpi主要應(yīng)用于輸出，重點(diǎn)是打印設(shè)備上；ppi對(duì)于設(shè)計(jì)師應(yīng)該比較熟悉，photoshop畫(huà)布的分辨率常設(shè)置為72像素/英寸，這個(gè)單位其實(shí)就是ppi 。盡管概念不同，但是對(duì)于移動(dòng)設(shè)備的顯示屏，可以看作ppi=dpi 。ppi的運(yùn)算方式是：PPI = （長(zhǎng)度像素?cái)?shù) + 寬度像素?cái)?shù)） / 屏幕對(duì)角線英寸數(shù)。即：長(zhǎng)、寬各自平方之和的開(kāi)方，再除以屏幕對(duì)角線的英寸數(shù)。以iphone5為例，其ppi=（1136px + 640px）/4 in=326ppi（視網(wǎng)膜Re

6、tina屏） 對(duì)于android手機(jī)，一個(gè)不確切的分法是，720 x 1280 的手機(jī)很可能接近 320 dpi （xhdpi模式），480 x 800 的手機(jī)很可能接近 240 dpi （hdpi模式），而320 x 480 的手機(jī)則很接近 160 dpi（mdpi模式）。來(lái)自友盟指數(shù)2014年3月份的數(shù)據(jù)（ 戳這里看最新數(shù)據(jù) ）： 480 x 800的手機(jī)占比最高為31.9%，720 x 1280的手機(jī)占比為16.5%位居第二，而240 x 320的手機(jī)占比最少為1.0% 。xxdhpi模式的高分辨率1080 x 1920手機(jī)占比也越來(lái)越高，目前為6.1% 。2、單位換算方法android

7、開(kāi)發(fā)中，文字大小的單位是sp，非文字的尺寸單位用dp，但是我們?cè)谠O(shè)計(jì)稿用的單位是px。這些單位如何換算，是設(shè)計(jì)師、開(kāi)發(fā)者需要了解的關(guān)鍵。 * dp：Density-independent pixels，以160PPI屏幕為標(biāo)準(zhǔn)，則1dp=1px。dp和px的換算公式 ：dp*ppi/160 = px。對(duì)于320ppi的屏幕，1dp x 320ppi/160 = 2px。 * sp：Scale-independent pixels，它是安卓的字體單位，以160PPI屏幕為標(biāo)準(zhǔn)，當(dāng)字體大小為 100%時(shí)， 1sp=1px。sp 與 px 的換算公式：sp*ppi/160 = px。對(duì)于320ppi

8、的屏幕，1sp x 320ppi/160 = 2px。 簡(jiǎn)單理解的話，px（像素）是我們UI設(shè)計(jì)師在PS里使用的，同時(shí)也是手機(jī)屏幕上所顯示的，dp是開(kāi)發(fā)寫(xiě)layout的時(shí)候使用的尺寸單位。為什么要把sp和dp代替px？ 原因是他們不會(huì)因?yàn)閜pi的變化而變化，在相同物理尺寸和不同ppi下，他們呈現(xiàn)的高度大小是相同。也就是說(shuō)更接近物理呈現(xiàn)，而px則不行。根據(jù)單位換算方法，可總結(jié)出： 當(dāng)運(yùn)行在mdpi下時(shí)，1dp=1px ：也就是說(shuō)設(shè)計(jì)師在PS里定義一個(gè)item高48px，開(kāi)發(fā)就會(huì)定義該item高48dp ； 當(dāng)運(yùn)行在hdpi模式下時(shí)，1dp=1.5px ：也就是說(shuō)設(shè)計(jì)師在PS里定義一個(gè)item高7

9、2px，開(kāi)發(fā)就會(huì)定義該item高48dp ； 當(dāng)運(yùn)行在xhdpi模式下時(shí)，1dp=2px ：也就是說(shuō)設(shè)計(jì)師在PS里定義一個(gè)item高96px，開(kāi)發(fā)就會(huì)定義該item高48dp ； 當(dāng)你的app需要適配多個(gè)dpi模式的時(shí)候，請(qǐng)參考圖1的比例進(jìn)行換算 。3、設(shè)計(jì)稿基本元素的尺寸設(shè)置為了適應(yīng)多分辨率的手機(jī)，理想的方式是為每種分辨率做一套設(shè)計(jì)稿，包括所用到的icon、設(shè)計(jì)稿標(biāo)注等。但在實(shí)際開(kāi)發(fā)中，這種方法耗時(shí)耗力。所以通常會(huì)選擇折中的方法。方法一： 在標(biāo)準(zhǔn)基礎(chǔ)上（比如xhdpi）開(kāi)始，然后放大或縮小，以適應(yīng)到其他尺寸。不足之處是，對(duì)于更高分辨率的手機(jī)，圖標(biāo)被放大后會(huì)導(dǎo)致質(zhì)量不高。 方法二： 以最高分辨

10、率為基準(zhǔn)設(shè)計(jì)，然后縮小適應(yīng)到所需的小分辨率上。缺點(diǎn)是，圖標(biāo)等若都最大尺寸，加載時(shí)速度慢且耗費(fèi)流量較多，對(duì)于小分辨率的用戶也不夠好。結(jié)合友盟的分辨率占比數(shù)據(jù)、也為了方便換算到android開(kāi)發(fā)中的尺寸單位， 推薦設(shè)計(jì)稿的畫(huà)布尺寸選用 720X1280 ，分辨率仍舊為72ppi（像素/英寸） 。在android規(guī)范中對(duì)于導(dǎo)航欄、工具欄等的尺寸沒(méi)有明確的規(guī)定。但根據(jù)48dp原則，以及一些主流的android應(yīng)用的截圖分析，總結(jié)一下尺寸要求： 狀態(tài)欄高度： 50 px 導(dǎo)航欄、操作欄高度： 96 px=48dp x 2 主菜單欄高度： 96 px 內(nèi)容區(qū)域高度： 1038 px （1280-50-96

11、-96=1038） Android最近出的手機(jī)都幾乎去掉了實(shí)體鍵，把功能鍵移到了屏幕中，高度也和菜單欄一樣為：96 px4、圖標(biāo)和字體大小（來(lái)自官方規(guī)范文檔）a、啟動(dòng)圖標(biāo)（home頁(yè)或app列表頁(yè)） 整體大小為48 x 48 dp b、操作欄圖標(biāo)，代表用戶在app中可以使用到的最重要的圖標(biāo) 整體大小為32 x 32 dp ，圖形實(shí)際區(qū)域?yàn)?24 x 24 dp c、小圖標(biāo)/場(chǎng)景圖標(biāo)，提供操作或特定項(xiàng)目的狀態(tài)。 比如gmail app的星型標(biāo)記、一些內(nèi)容展開(kāi)收起用到的向下向上的圖標(biāo)等。整體大小為16 x 16 dp ，圖形實(shí)際區(qū)域?yàn)?12 x 12 dp 。 d、通知圖標(biāo) 如果app有通知，要提

12、供一個(gè)有新通知時(shí)顯示在狀態(tài)欄的通知圖標(biāo)。整體大小為24 x 24 dp ，圖形實(shí)際區(qū)域?yàn)?22 x 22 dp 。 注：android規(guī)范提供的尺寸單位是dp，若設(shè)計(jì)稿尺寸設(shè)為720 x 1280 ，圖標(biāo)大小需在規(guī)范要求的尺寸數(shù)字上乘以2。比如操作欄圖標(biāo)32 x 32 dp ，則設(shè)計(jì)稿上應(yīng)該是64 x 64 px 。e、字體大小 Android規(guī)范中的要求如下： 前面提到Android開(kāi)發(fā)中的字號(hào)單位是sp，而換算關(guān)系是 sp*ppi/160 = px 。所以720 x 1280尺寸的設(shè)計(jì)稿上，字體大小可選擇為 24px 、28px 、32px 、36px ，主要根據(jù)文字的重要程度來(lái)選擇，特殊情況下也可能選擇更大或更小的字體。f、其他尺寸要求 通常把48dp作為可觸摸的UI元件的標(biāo)