相信很多人在開發(fā)設(shè)計(jì)app的時(shí)候都遇到過很多界面上的問題，如以多大的尺寸來(lái)設(shè)計(jì)，分辨率是多少，如何做適配，該怎么切圖等。

下面就從界面尺寸 界面組成 字體規(guī)范 圖標(biāo)規(guī)范 界面切圖 5個(gè)方面進(jìn)行總結(jié)和梳理

安卓界面尺寸：

什么是px 什么是dp 

px：像素是UI設(shè)計(jì)師在PS中最常用的單位，它是一張圖片中最小的點(diǎn)，一張位圖就是由這樣的點(diǎn)組成的。

dp:常用于Android系統(tǒng)，方便其不同版本之間的適配。不同的像素密度上有不同的顯示效果 ，和設(shè)備硬件有關(guān)

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

為什么要用dp代替px 

原因是他們不會(huì)因?yàn)閐pi（屏幕密度值）的變化而變化，在相同物理尺寸和不同dpi下，他們呈現(xiàn)的高度大小是相同。也就是說(shuō)更接近物理呈現(xiàn)，而px則不行。

根據(jù)換算方法可以得出以下結(jié)論

在目前的Android app設(shè)計(jì)項(xiàng)目中 我們并不會(huì)去為每一種分辨率設(shè)計(jì)一套UI界面 這是一種理想的狀態(tài)，小公司肯定是耗不起的，所以我們要學(xué)會(huì)變通，為了適應(yīng)多分辨率：

1. 在標(biāo)準(zhǔn)基礎(chǔ)(720px*1280px)上開始，然后放大或者縮小，來(lái)適應(yīng)其他的尺寸。

2. 從設(shè)備的最大尺寸（1080px*1920px）開始，然后縮小，并適應(yīng)所有的其他尺寸。

方法一是我們的一般處理方式 為什么選擇720*1280尼 因?yàn)殡m然現(xiàn)在分辨率已經(jīng)支持到1080*1920像素 大家可以選擇這個(gè)尺寸作圖，但是圖片素材將會(huì)增大應(yīng)用安裝包的大小，并且尺寸越大的圖片占用的內(nèi)存也就越高，所以在實(shí)際設(shè)計(jì)工作中，設(shè)計(jì)師可以從720px*1280px開始設(shè)計(jì)界面，因?yàn)檫@個(gè)尺寸兼顧了美觀性和經(jīng)濟(jì)性并提供了最簡(jiǎn)單的dp換算。

美觀性：以這個(gè)尺寸做出的應(yīng)用，在720*1280屏幕中顯示完美，在1080*1920屏幕中放大之后仍舊比較清晰。

經(jīng)濟(jì)性：這個(gè)分辨率下導(dǎo)出的圖片尺寸適中，內(nèi)存消耗不會(huì)過高，并且圖片文件大小適中，安裝包也不會(huì)過大。

界面基本組成元素：

Android的界面主要由狀態(tài)欄、導(dǎo)航欄、主菜單欄和中間的內(nèi)容區(qū)域4個(gè)元素組成

1. 狀態(tài)欄（信號(hào)、運(yùn)營(yíng)商、電量等顯示手機(jī)狀態(tài)的區(qū)域）

   
   

2.導(dǎo)航欄：顯示當(dāng)前界面的名稱，包含相應(yīng)的功能或者頁(yè)面間的跳轉(zhuǎn)按鈕

 

3.主菜單欄：提供當(dāng)前頁(yè)面的分類內(nèi)容的快速跳轉(zhuǎn)

 

4.內(nèi)容區(qū)域：展示應(yīng)用提供的相應(yīng)內(nèi)容，整個(gè)布局中變更最為頻繁

 

字體規(guī)范：

在Android上最受歡迎的字體是droid sana fallback,他是谷歌自己的字體，與微軟雅黑很像，中文字體為方正蘭亭雅黑或微軟雅黑。（Android4.0之后，roboto字體在新設(shè)備上越來(lái)越流行 大有沖擊之勢(shì)。）

下面選用720px*1280px的尺寸設(shè)計(jì)對(duì)字體的具體大小進(jìn)行講解。

注釋最小字體：24px;

文本字體：28px;

文章標(biāo)題或者圖標(biāo)名稱：32px;

導(dǎo)航標(biāo)題：36px;

(備注：教你一個(gè)最笨的方法，可以高清截圖自己喜歡的app界面，放入PS對(duì)比調(diào)節(jié)字體大小)

 

 

圖標(biāo)規(guī)范：

1.啟動(dòng)圖標(biāo)

啟動(dòng)圖標(biāo)在“主屏幕”和所有應(yīng)用中代表你的應(yīng)用程序入口，所以要確保啟動(dòng)圖標(biāo)在任何背景和使用場(chǎng)景下都依稀可見。

大小和縮放：移動(dòng)設(shè)備上啟動(dòng)圖標(biāo)的大小是48*48dp

 

2.操作欄圖標(biāo)

操作欄圖標(biāo)是app中最常用到的圖標(biāo)，在操作欄和列表中都會(huì)用到，覆蓋的范圍極其廣泛。

大小和縮放：移動(dòng)設(shè)備上操作欄大小應(yīng)當(dāng)是32*32dp,圖像資源大小為32*32dp,圖形區(qū)域尺寸為24*24dp,    

 

3.小圖標(biāo)

一般在表示特定狀態(tài)的地方需要使用小圖標(biāo)

大小和縮放：移動(dòng)設(shè)備上的小圖標(biāo)大小應(yīng)當(dāng)是16*16dp 圖形區(qū)域尺寸是12*12dp

（備注以上圖標(biāo)用到的尺寸都是dp不同的分辨率屏幕設(shè)計(jì)中的PX值是不一樣的自己根據(jù)上面的換算率換算）

 

界面尺寸標(biāo)注：

根據(jù)不同的平臺(tái)、不同的開發(fā)方法，可能程序員需要不同的標(biāo)注。標(biāo)注的內(nèi)容有：

控件的絕對(duì)坐標(biāo)、大小、間距

文字的字號(hào)、行距、色值

列表項(xiàng)

圖形等

 下面是“營(yíng)銷家”首頁(yè)界面標(biāo)注實(shí)例

 

標(biāo)注工具：

馬克曼（推薦使用 因?yàn)槊赓M(fèi) 而且操作超簡(jiǎn)單）  

pxcook（優(yōu)點(diǎn)在于將標(biāo)注和切圖這兩項(xiàng)設(shè)計(jì)完圖之后最棘手的工作集成在一個(gè)軟件內(nèi)完成，支持Windows和mac） 

.