本文純屬個人收藏整理加之經(jīng)驗之談，不足之處希望大家指出！

       大家好上午好，半個月沒見啦，大家都還好嗎？？兩周前發(fā)表了ios設計規(guī)范，好多人給我留言，雖然文章還有很多地方有不足之處，但是大家溫暖的話語還是在冰冷的冬季讓我覺得好溫暖，小編謝謝大家的支持與鼓勵，我會繼續(xù)努力發(fā)表更多實用精彩的好文章與大家共享。

       原諒小編今天有點小激動，廢話不多說，開始正題。今天大家期待了半個月的APP界面的Android尺寸規(guī)范終于今天如期和大家見面啦^.^

       當你拿到Android的設計需求后，開始著手進行界面的設計，卻不知道如何設計才能讓用戶對界面感到滿意，設計出來的界面差強人意，返稿無數(shù)以至于一遍遍的修改？如果這就是你現(xiàn)在的狀況，那么先別急著重新進行界面的設計，因為你首先得靜下心來看一看這篇Android的界面設計規(guī)范。

       我本身是一名GUI設計師，所以我只站在設計師的角度去把自己所學所了解的東西告訴大家?？赡芄静煌蠹以O計習慣不盡相同，但是終究還是能有些幫助。依舊聲明：這里寫的只是我個人的使用習慣，只是一種工作方法，大家在具體工作中，一定要靈活運用。另外，技術的更新是非?？斓?，我寫的這些可能某些東西已經(jīng)和你們的工程師搭檔所用的方法不一樣了，所以，還是要靈活運用~

       首先帶領大家先了解一下本文大致分為哪幾個模塊，大家可以最后留言評論，看看大家對哪個模塊更感興趣或者對哪個模塊仍然不懂，小編最后統(tǒng)計完之后會針對大家的問題重新梳理著重給大家講解。

一、Android設計常識

       開始介紹之前先幫大家梳理一下Android常用單位，方便各位親們更好的掌握并了解Android端設計規(guī)范。

1.1 Android常用單位

1.1.1.

PPI(pixels per inch)：數(shù)字影像的解析度，也就是每英寸所擁有的像素數(shù)，即像素密度；

PPI計算公式：ppi=√（長度像素數(shù)2 + 寬度像素數(shù)2）/屏幕對角線英寸數(shù)

1.1.2.

DPI(dots per inch)：是指印刷上的計量單位，也就是每英寸上能印刷的網(wǎng)點數(shù)，我們設計用于顯示器的默認為（72像素/英寸）就好了；

1.1.3.

屏幕尺寸（Screen Size）：一般我們所說的手機屏幕尺寸，比如3英寸、5.5英寸等，都是指對角線的長度，而不是手機的面積；

1.1.4.

分辨率（Resolution）：是指手機屏幕垂直和水平方向上的像素個數(shù)，比如分辨率為：720*1280，是指設備水平方向有720個像素點，垂直方向有1280個像素點

1.1.5.

px( pixels)： 像素，不同設備顯示效果相同

1.1.6.

pt（ point）：一個標準的長度單位，ios的邏輯單位，1Pt=1/72英寸，用于印刷業(yè)，非常簡單易用；標注字體大小（72是早期臺式機的DPI）

1.1.7.

sp（Scaled-independentpixels）：放大像素， 安卓的字體單位；

1.1.8.

Dp（Density-independentpixels）：是指設備的獨立像素，不同的設備有不同的顯示效果，它與設備硬件有關系；

sp和dp基本一樣，是android開發(fā)里特有的單位，都是為了保證文字在不同密度的顯示屏上顯示相同的效果；dp與設備硬件有關，與屏幕密度無關，sp與屏幕密度和設備硬件均無關；

1.2 換算關系

       android開發(fā)中，文字大小的單位是sp，非文字的尺寸單位用dp，但是我們在設計稿用的單位是px。這些單位如何換算，是設計師、開發(fā)者需要了解的關鍵。

       * dp：以160PPI屏幕為標準，則1dp=1px。

                dp和px的換算公式 ：dp*ppi/160 = px。

                對于320ppi的屏幕，1dp x 320ppi/160= 2px。

       * sp：它是安卓的字體單位，以160PPI屏幕為標準，當字體大小為 100%時，                  1sp=1px。

       sp 與 px 的換算公式：sp*ppi/160= px。

       對于320ppi的屏幕，1sp x 320ppi/160 = 2px。

       簡單理解的話，px（像素）是我們UI設計師在PS里使用的，同時也是手機屏幕上所顯示的，dp是開發(fā)寫layout的時候使用的尺寸單位。

       dp和px的換算公式 ：dp*ppi/160 =px或者px=dp*ppi/160。

       為什么要把sp和dp代替px？原因是他們不會因為ppi的變化而變化，在相同物理尺寸和不同ppi下，他們呈現(xiàn)的高度大小是相同。也就是說更接近物理呈現(xiàn)，而px則不行。

根據(jù)單位換算方法，可總結出：

       當運行在mdpi模式下時，1dp=1px ：也就是說設計師在PS里定義一個item高48px，開發(fā)就會定義該item高48dp ；

       當運行在hdpi模式下時，1dp=1.5px ：也就是說設計師在PS里定義一個item高72px，開發(fā)就會定義該item高48dp ；

       當運行在xhdpi模式下時，1dp=2px ：也就是說設計師在PS里定義一個item高96px，開發(fā)就會定義該item高48dp ；

具體換算關系如下：

ldpi模式下                           1dp=0.75px

mdpi模式下(baseline)         1dp=1px

hdpi模式下                          1dp=1.5px

xhdpi模式下                        1dp=2px

xxhdpi模式下                      1dp=3px

Xxxhdpi模式下                    1dp=4px

       小結：其實對于我們設計師來講，我們做效果圖的單位仍然是px，那些sp、dp、pt單位都是Android開發(fā)中所使用到的單位，但是我們必須要了解每種單位的含義以及它們之間的關系，這樣才能使我們的設計更加統(tǒng)一和完美。

1.3 Android屏幕分辨率

        Android按照DPI分為了LDP、MDPI、HDPI、XHDP和XXHDPI五類，Android 4.3還添加了XXXHDPI這個新的DPI分類。

下面是Android界面尺寸詳細總結：

目前主流的安卓手機分辨率有以下3種：

hdpi，對應480*800的手機。主流機型：小米1 ，1s 三星 htc 等

xdpi，對應720*1280的手機。主流機型：三星Galaxy系列和華為p6等

xxdpi，對應1080*1920的手機。主流機型：小米手機，華為榮耀手機系列為主加上 htc one

下面是當面流行的安卓手機的屏幕尺寸和分辨率：

1.4 設計稿基本元素的尺寸設置

      Android手機那么多，具體怎么分？哪些手機是幾倍的倍率呢？我們設計人員需要按照哪個尺寸進行設計？我們先看一張表，這是友盟2014年10月到2015年03月的數(shù)據(jù)：

      從友盟的分辨率占比數(shù)據(jù)來看：720*1280的手機占比最高為31.9%，800*480的手機占比為18.5%位居第二，而540*960 的手機占比最少為9.8% ，xxdhpi模式的高分辨率1080 * 1920手機占比也越來越高，目前為10.2% 。所以我沒可以得出結論：目前Android主流手機屏幕分辨率為：xdhpi模式的高分辨率720*1280。

    在目前我們的安卓APP設計項目當中，我們并不會去為每一種分辨率去設計一套UI界面。為每一種分辨率單獨設計一套UI界面，這是一種追求完美和理想的狀態(tài)。所以，這個時候我們需要學會變通，為了適應多分辨率，我們一般選擇一個較合適的分辨率最為基準，以下3種方法分別是我經(jīng)常用到的方式，僅供大家參考：

方法1：

      以中間尺寸（xdpi：720*1280px）作為基準，然后放大或縮小，以適應到其他尺寸；

      不足之處是，對于更高分辨率的手機，圖標被放大后會導致質量不高。

方法2：

      以較大尺寸（xxdpi：1080*1920px）作為基準，然后縮小，并適應到所需的最小屏幕尺寸；

      缺點是，圖標等若都是最大尺寸，加載時速度慢且耗費流量較多，對于小分辨率的用戶也不夠好。

方法3：

      有些時候我們也會在實際開發(fā)過程中，Android和ios的設計稿若無太大差異，也可從ios的分辨率（750*1334px）開始，再調整設計稿的比例，適應其他分辨率；

不足之處：在切圖的時候需要做一些圖片的調整，如果不是矢量圖的原件，需要重新按照720*1280的尺寸設計下。

      結合友盟的分辨率占比數(shù)據(jù)、也為了方便換算到android開發(fā)中的尺寸單位，推薦設計稿的畫布尺寸選用 720X1280px，分辨率為72ppi（像素/英寸）。

說到這里不知道大家暈了沒有，只是寶寶一口氣說了這么多，已經(jīng)累到不行T.T

二、Android設計規(guī)范

2.1界面基本組成元素

      Android的APP界面和iphone的界面基本相同：狀態(tài)欄+導航欄+主菜單欄+內容區(qū)域

      具體大小請參照1.3中Android界面尺寸

2.2字體設計規(guī)范

      安卓4.0之后用的字體是Roboto。中文字體：方正蘭亭黑體，是谷歌自己的字體，與微軟雅黑很像。

2.3界面圖標規(guī)范

      界面中圖形的實現(xiàn)由兩種，一種是用圖片，另一種是代碼畫出來。代碼畫的方式比較耗費程序員腦力和代碼量，圖片則耗費空間，增加APP 的體積。一般是偏重使用圖片，但是一些簡單形狀的按鈕可以直接讓程序員畫出來即可。

2.3.1切圖要點

1.有一些小的icon式按鈕，不能只切到icon邊緣，而是要考慮到最終實現(xiàn)的時候，是把這個圖片做成按鈕，和用戶交互。所以必須要多留一些透明的邊，讓能點擊的圖片在88×88以上，這樣用戶才保證比較好點到。

2.對于不改變可見圖形而又需要加大點擊區(qū)域的圖。那么切圖的時候建議在可見圖形的四周都加上1像素的透明，這是為了放大拉伸而不產(chǎn)生可見區(qū)域的圖像失真。

3.切圖的高度。對于一個通用的背景圖，如文字圓角邊框背景，那么切圖的時候并不是效果圖上有多高就切多高，為了通用而是只需切一行文字的高度就可以了。不過這也不是絕對的，準確的說應該切的高度為H=paddingTop+textHeight+paddingBottom，及文字相對背景的上邊距+一行文字的高度+文字相對背景的下邊距。

4.切圖的寬度。如果是一個通用的背景圖，那么他的寬度應該是他在效果圖中的最小寬度，也就是說這個背景可能在多處使用到了，就取最小的那個寬度就可以了。比較麻煩的是鋪滿全屏的時候，這就需要看看你做的效果圖的寬屏寬度，所以說做效果圖的時候最好是做小屏幕的效果圖。有人可能會問點9的圖不是可以拉伸、壓縮嗎，為什么需要參考最小的寬度呢？根據(jù)個人經(jīng)驗發(fā)現(xiàn)，一個大圖在屏幕小的情況下點9圖中拉伸的部分會變得顏色更深。

5.以每個模塊分開創(chuàng)建文件夾存放切圖資源；這樣更有助于程序員在每個模塊的時候找到相應的圖片；

6.所有切圖尺寸必須是偶數(shù)，一般是png-24格式；

2.3.2底部工具欄icon切圖（有兩種方法）

方法1：icon單獨切，有默認和選中兩種狀態(tài)

方法2：icon + 文字一起切，有默認和選中兩種狀態(tài)

2.3.3切圖命名規(guī)范：

下面是常用的一些命名縮寫：

導航欄：nav        主菜單欄：tab         背景：bg          按鈕：btn

按鈕常態(tài)：nor         按鈕選中：sel         按鈕按下：down         圖標：icon

搜索：search         個人資料：proflie          用戶：user        彈出：pop

返回：back           刷新：refresh            刪除：delete       編輯：edit

例如：nav_bg、tab_btn_sel

2.3.4點九切圖：

       首先我們要知道什么是點9圖：點九圖是andriod平臺的應用軟件開發(fā)里的一種特殊的圖片形式，是一種可拉抻而不失真的圖，文件擴展名為：.9.png。其實相當于把一張png圖分成了9個部分（九宮格），分別為4個角（圖中：1、3、6、8），4條邊（圖中：2、4、5、7），以及一個中間區(qū)域（圖中：9）。

       比如我們的微信、QQ的聊天氣泡就是典型的點9圖，因為聊天氣泡需要隨文字的多少進行拉抻。一般圖在整體放大時會出現(xiàn)失真的情況，而點9圖是把圖中某些部分進行拉抻，而不重復的地方，比如圓角和光澤等部分都不做變化，以此來實現(xiàn)圖片的放大，不會出現(xiàn)失真的情況。

      接著我們來說一下點9圖的繪制方法：當然點9圖的繪制方法也有很多種，直接用點9切圖的軟件，譬如：draw9patch、cutterman等，安卓開發(fā)中的SDK里有tools文件夾，里面有一個draw9patch.bat，或者直接用ps繪制點9切圖；我個人還是習慣用ps直接繪制點9圖，因為軟件有時候自己把握不好尺寸導致點9圖在程序中識別出現(xiàn)問題。

Ps繪制點9圖的步驟：

※確定切圖后直接改變圖片的畫布大??；

※手動將上下左右各增加1px留白；

※使用鉛筆工具，手動繪制拉伸區(qū)域，色值必須為黑色（#000000），透明度100%；

 左上為拉伸區(qū)域，右下為內容顯示區(qū)域

※存儲為web所用格式，選擇png-24，儲存時手動將后綴名改為xxx.9.png；

2.4 48dp規(guī)律

      48dp規(guī)律：通常把48dp作為可觸摸的UI元件的標準。為什么要用48dp呢？

　　一般來說，48dp轉化為一個物理尺寸約9毫米。建議的目標大小為7-10毫米的范圍，這是一個用戶手指能準確并且舒適觸摸的區(qū)域。

如果你設計的元素高和寬至少48dp，你就可以保證：

（1）觸摸目標絕不會比建議的最低目標（7mm）小，無論在什么屏幕上顯示。

（2）在整體信息密度和觸摸目標大小之間取得了一個很好的平衡。而每個UI元素之間的空白通常是8dp。

2.5標注規(guī)范

      通常APP設計都會涉及到多個分辨率兼容開發(fā)的問題，因此設計的時候，要定好規(guī)范。最好建立相關文檔，記錄使用的字體、顏色，常用的字號和間距，給出編號A1 A2 A3 B1 B2 B3，不同分辨率下?lián)Q算的結果，便于技術人員進行開發(fā)。

      如需對設計稿進行后期的標注，則可使用該套規(guī)范，對設計稿中的字號、顏色、間距進行標注。

Ps:如果想做一個好的UI設計師，一定要從規(guī)范入手。很多都是細節(jié)的東西，在于積累。