手機APP UI設計尺寸基礎知識

• 現象

• 像素密度

• 倍率與邏輯像素

• 單位

• Web怎麼辦

• 實際應用

• iPhone

• Android

• Web

• 總結

原文  http://www.shejidaren.com/mobile-ui-chi-cun.html

對於剛入行的UI設計師，每每會遇到一個基礎問題，就是設計移動APP時，是用什麼尺寸或者用哪一種屏幕的尺寸是最適當的？有的同窗花了很長時間也不知道怎麼作，爲了解決這個問題，今天設計師」十萬個為什麼」爲你們從原理開始介紹一下移動端設計尺寸規範。

推薦配合這個閱讀：《 最新Android & iOS設計尺寸規範 》

現象

首先說現象，你們都知道移動端設備屏幕尺寸很是多，碎片化嚴重。尤爲是Android，你會聽到不少種分辨率：480×800, 480×854, 540×960, 720×1280, 1080×1920，並且還有傳說中的2K屏。近年來iPhone的碎片化也加重了：640×960, 640×1136, 750×1334, 1242×2208。

不要被這些尺寸嚇倒。實際上大部分的appUI設計和移動端網頁，在各類尺寸的屏幕上都能正常顯示。說明尺寸的問題必定有解決方法，並且有規律可循。

回到頂部

像素密度

要知道，屏幕是由不少像素點組成的。以前提到那麼多種分辨率，都是手機屏幕的實際像素尺寸。好比480×800的屏幕，就是由800行、480列 的像素點組成的。每一個點發出不一樣顏色的光，構成咱們所看到的畫面。而手機屏幕的物理尺寸，和像素尺寸是不成比例的。最典型的例子，iPhone 3gs的屏幕像素是320×480，iPhone 4s的屏幕像素是640×960。恰好兩倍，然而兩款手機都是3.5英寸的。

因此，咱們要引入最重要的一個概念：像素密度，也就是PPI（pixels per inch）。這項指標是鏈接數字世界與物理世界的橋樑。

Pixels per inch，準確的說是每英寸的長度上排列的像素點數量。1英寸是一個固定長度，等於2.54釐米，大約是食指最末端那根指節的長度。像素密度越高，表明屏幕顯示效果越精細。Retina屏比普通屏清晰不少，就是由於它的像素密度翻了一倍。

回到頂部

倍率與邏輯像素

再用iPhone 3gs和4s來舉例。假設有個郵件列表界面，咱們不妨按照PC端網頁設計的思惟來想象。3gs上大概只能顯示4-5行，4s就能顯示9-10行，並且每行 會變得特別寬。但兩款手機實際上是同樣大的。若是照這種方式顯示，3gs上剛恰好的效果，在4s上就會小到根本看不清字。

在現實中，這二者效果倒是同樣的。這是由於Retina屏幕把2×2個像素當1個像素使用。好比本來44像素高的頂部導航欄，在Retina屏上用了88個像素的高度來顯示。致使界面元素都變成2倍大小，反而和3gs效果同樣了。畫質卻更清晰。

在之前，iOS應用的資源圖片中，同一張圖一般有兩個尺寸。你會看到文件名有的帶@2x字樣，有的不帶。其中不帶@2x的用在普通屏上，帶@2x的用在Retina屏上。只要圖片準備好，iOS會本身判斷用哪張，Android道理也同樣。

由此能夠看出，蘋果以普通屏爲基準，給Retina屏定義了一個2倍的倍率（iPhone 6plus除外，它達到了3倍）。實際像素除以倍率，就獲得邏輯像素尺寸。只要兩個屏幕邏輯像素相同，它們的顯示效果就是相同的。

Android的解決方法相似，但更復雜一些。由於Android屏幕尺寸實在太多，分辨率高低跨度很是大，不像蘋果只有那麼幾款固定設備、固定 尺寸。因此Android把各類設備的像素密度劃成了好幾個範圍區間，給不一樣範圍的設備定義了不一樣的倍率，來保證顯示效果相近。像素密度概念雖然重要，但 用不着咱們本身算，iOS與Android都幫咱們算好了。

如圖所示，像素密度在120左右的屏幕歸爲ldpi，160左右的歸爲mdpi，以此類推。這樣，全部的Android屏幕都找到了本身的位置，並賦予了相應的倍率：

• ldpi [0.75倍]

• mdpi [1倍]

• hdpi [1.5倍]

• xhdpi [2倍]

• xxhdpi [3倍]

• xxxhdpi [4倍]

各型號iPhone的倍率比較簡單，咱們後面會講到。那麼Android手機那麼多，具體怎麼分？哪些手機是幾倍的倍率呢？咱們先看一張表，這是友盟2014年10月到2015年03月的數據：

就目前市場情況而言，各類手機的分辨率能夠這樣粗略判斷。雖然不全面，但至少在1年內都還有必定的參考意義：

• ldpi 現在已絕跡，不用考慮

• mdpi [320x480]（市場份額不足5%，新手機不會有這種倍率，屏幕一般都特別小）

• hdpi [480x800、480x85四、540x960]（早年的低端機，屏幕在3.5英寸檔位；現在的低端機，屏幕在4.7-5.0英寸檔位）

• xhdpi [720x1280]（早年的中端機，屏幕在4.7-5.0英寸檔位；現在的中低端機，屏幕在5.0-5.5英寸檔位）

• xxhdpi [1080x1920]（早年的高端機，現在的中高端機，屏幕一般都在5.0英寸以上）

• xxxhdpi [1440x2560]（極少數2K屏手機，好比Google Nexus 6）

天然地，以1倍的mdpi做爲基準。像素密度更高或者更低的設備，只需乘以相應的倍率，就能獲得與基準倍率近似的顯示效果。

不過須要注意的是，Android設備的邏輯像素尺寸並不統一。好比兩種常見的屏幕480×800和1080×1920，它們分別屬於hdpi和 xxhdpi。除以各自倍率1.5倍和3倍，獲得邏輯像素爲320×533和360×640。很顯然，後者更寬更高，能顯示更多內容。因此，即便有倍率的 存在，各類Android設備的顯示效果仍然沒法作到徹底一致。

回到頂部

單位

不難發現，真正決定顯示效果的，是邏輯像素尺寸。爲此，iOS和Android平臺都定義了各自的邏輯像素單位。iOS的尺寸單位爲pt，Android的尺寸單位爲dp。說實話，二者實際上是一回事。

單位之間的換算關係隨倍率變化：

• 1倍：1pt=1dp=1px（mdpi、iPhone 3gs）

• 1.5倍：1pt=1dp=1.5px（hdpi）

• 2倍：1pt=1dp=2px（xhdpi、iPhone 4s/5/6）

• 3倍：1pt=1dp=3px（xxhdpi、iPhone 6）

• 4倍：1pt=1dp=4px（xxxhdpi）

單位決定了咱們的思考方式。在設計和開發過程當中，應該儘可能使用邏輯像素尺寸來思考界面。設計Android應用時，有的設計師喜歡把畫布設爲 1080×1920，有的喜歡設成720×1280。給出的界面元素尺寸就不統一了。Android的最小點擊區域尺寸是48x48dp，這就意味着在 xhdpi的設備上，按鈕尺寸至少是96x96px。而在xxhdpi設備上，則是144x144px。

不管畫布設成多大，咱們設計的是基準倍率的界面樣式，並且開發人員須要的單位都是邏輯像素。因此爲了保證準確高效的溝通，雙方都須要以邏輯像素尺 寸來描述和理解界面，不管是在標註圖仍是在平常溝通中。不要再說「底部標籤欄的高度是96像素，我是按照xhdpi作的」這樣的話了。

回到頂部

Web怎麼辦

移動端頁面的絕對單位仍然是px，至少代碼裏這麼寫，但它的道理也和app同樣。因爲像素密度是設備自己的固有屬性，它會影響到設備中的全部應 用，包括瀏覽器。前端技術能夠善加利用設備的像素密度，只需一行代碼，瀏覽器便會使用app的顯示方式來渲染頁面。根據像素密度，按相應倍率縮放。

能夠經過這個測試頁面 http://greenzorro.github.io/demo/basic/響應式斷點.html 來看看你的移動設備屏幕寬度，這是邏輯像素寬度。

以iPhone 5s爲例，屏幕的分辨率是640×1136，倍率是2。瀏覽器會認爲屏幕的分辨率是320×568，仍然是基準倍率的尺寸。因此在製做頁面時，只須要按照 基準倍率來就好了。不管什麼樣的屏幕，倍率是多少，都按邏輯像素尺寸來設計和開發頁面。只不過在準備資源圖的時候，須要準備2倍大小的圖，經過代碼把它縮 成1倍大小顯示，才能保證清晰。

回到頂部

實際應用

你們最關心的仍是實際運用，畫布該怎麼設置。咱們就iOS、Android、Web三個平臺來分別梳理一下。不過在這以前，我要爲使用PS進行設計的朋友介紹一個小技巧。

以前我說過，咱們要以邏輯像素尺寸來思考界面。體現到設計過程當中，就是要把單位設置成邏輯像素。打開PS的首選項——單位與標尺界面，把尺寸和文 字單位都改爲點（Point）。這裏的點也就是pt，不管設計iOS、Android仍是Web應用，單位都用它。固然，各平臺單位名稱仍是要記住的。這 裏咱們用的只是它的原理，不用在乎名稱。

要調節倍率，則經過圖像大小裏的DPI來控制。這個DPI，其實就是PPI，像素密度。有個常識你們都知道，屏幕上的設計DPI設成72，印刷品設計DPI設成300。爲何是這兩個數字？

首先說300，這和人眼的分辨能力有關。因爲1英寸是固定長度，每1英寸有多少個像素點決定了畫質清晰程度。以前說過，這就是像素密度，也就是 DPI。DPI達到300以上，其細膩程度就會給人真實感，像真實世界中的物件。相反，DPI只有10的話，在你一個食指指節大小的長度內只有10個像 素，這明顯就是馬賽克了。因此印刷品要設成300，才能保證清晰。

再說72，這有必定的歷史緣由。最先的圖形設計是在mac電腦上進行的，mac自己的顯示器分辨率就是72。PS中把圖像DPI也設成72，就能保證屏幕上顯示的尺寸和打印尺寸相同，便於設計。72的PC顯示器分辨率逐漸成爲一種默認的行業標準，這套規則就這麼沿用下來。

如今回到正題，咱們怎麼經過DPI來調節倍率？既然屏幕自己的分辨率是72，DPI設成72恰好是1倍尺寸，那設成72的兩倍就是倍率爲2的屏幕了，就這麼簡單。

下面來看看3個平臺各自的畫布設置：

回到頂部

iPhone

iPhone的屏幕尺寸各不相同，我說的是邏輯像素尺寸，這確實是讓人很頭疼的事情。若是想用一套設計涵蓋全部iPhone，就要選擇邏輯像素折中的機型。

從市場佔有率數據來看，目前最多的是iPhone5/5s的屏幕。倍率爲2，邏輯像素320×568。上升勢頭最猛，將來有望登上第一的是iPhone 6的屏幕。倍率爲2，邏輯像素375×667。

按照這兩種尺寸來設計，都是比較主流的作法。能夠兼顧短一些的iPhone 4s，大一點的6 plus也不會過於空曠。

不過在切圖的時候要注意，因爲iPhone 6 plus的3倍圖是由2倍圖放大而來，因此位圖要注意保證清晰。

回到頂部

Android

都說Android碎片化嚴重，但它如今反而比iOS好處理。由於現在的Android屏幕邏輯像素已經趨於統一了：360×640，就看你設成幾倍了。想以xhdpi爲準，就把DPI設成72×2=144。想以xxhdpi爲準，就把DPI設成72×3=216。

對於那些比較老的低端機，寬度是480px的那批，畫面確實會小一些，顯示內容會更少。稍微留意一下，重要內容儘可能保持在界面中上部分。

固然，這些機型不出一年就會被邊緣化，基本淘汰。如今能運轉的也是看成功能機在用，軟件多了必卡無疑，用戶體驗無從談起。不做考慮也是OK的。

回到頂部

Web

手機端網頁就沒有統一標準了，比較流行的作法是按照iPhone 5的尺寸來設計。倍率2，邏輯像素320×568。

這樣的作法比較實在，倍率2的屏幕不管在iOS仍是Android方面都是主流，並且又是2倍屏幕中邏輯像素最小的。因此圖片的尺寸能夠保持在較小的水平，頁面加載速度快。固然，缺點就是在倍率3的設備上看，圖片不是特別清晰。

若是追求圖片質量，願意犧牲加載速度，那麼能夠按照最大的屏幕來設計。也就是iPhone 6 plus的尺寸，倍率3，邏輯像素414×736。

回到頂部

總結

移動端的尺寸比PC端複雜，關鍵就在倍率。但也正由於倍率的存在，把大大小小的屏幕拉回到同一水平線，得以保證一套設計適應各類屏幕。站在這條水平線的角度看，會發現它很好理解。

做者：十萬個為什麼

來源： uicn