一切為了程序猿！詳析手機端的8px原理

作者Akanelee，中國臺灣設(shè)計師妹子，個人博客：blog.akanelee。

上回好玩的《中國臺灣設(shè)計師吐槽：我們的UI到底怎么了？》剛發(fā)，這回純干貨呈上。做UI設(shè)計的童鞋，還沒弄懂8px的趕緊來學習一下。

淘寶網(wǎng)的官方Blog有篇「一張圖解釋手機端8px原理」，簡單來說就是把 iOS 和 Android 放在一起比較。同時探討 1x、2x、ldpi、mdpi、hdpi、Xhdpi、xxhdpi 的尺寸與分辨率。本文就以我個人角度提出看法。（圖片取自?Android - Devices and Displays）

8px 的文章內(nèi)容就我的理解是基于「iOS 接口和 Android 接口長得完全一樣」的情況下進行開發(fā)所寫。iOS 和 Android 是兩種完全不同的系統(tǒng)，用戶操作習慣完全不同，在開發(fā)上本來就不應(yīng)該把這兩套做得完全一模一樣。退個一百步、就算因為客戶預(yù)算不足導(dǎo)致接口相同，也沒有這么愉快的一套打天下方式。

屏幕尺寸換算

先講最容易理解的 iOS：1x（320x480px）、@2x（640x1136px），就這兩種尺寸。頂多留意一下 iPhone4 的 640x960，視簽約內(nèi)容而定，仍屬于 @2x 的制圖規(guī)范。要注意的就是「做大縮小」時所有尺寸單位要是雙數(shù)，包含距離、坐標、切圖等等（字級倒是允許0.5pt）?，F(xiàn)在的 Store 審核就算不做 1x 尺寸也能通過，但 iOS 工程師在刻接口時仍就以 1x 為基準，坐標什么的還是要用1x 當單位。所以 UI 在做 @2x 大圖時還是乖乖的把所有的數(shù)字都設(shè)定成雙數(shù)吧。

Android 比較麻煩，屏幕尺寸和機種非常多，不可能每種尺寸都出一版 PSD，通常簽約時就會載明在「特定某幾支手機」一定沒問題、其他手機盡量完美運行但不保證。我在做 Android 接口時會出 1.5x、2x、3x 這三種尺寸的切圖。1x 的機型已經(jīng)不多見了，何況 0.75x 的 ldpi？（官方圖解上已拿掉ldpi、增加 4x 的xxxhdpi。）（每個國家國情不同，這部份要研究一下當?shù)貦C型尺寸。）

dpi 對 UI 來說影響不大，最大的問還是在屏幕尺寸身上。我自己常用的尺寸如下，px 尺寸也許和其他人慣用的不太一樣，但無影響，Android 屏幕尺寸本來就很多種，所以才需要 9-patch 來輔助。

• mdpi 160dpi (1x) 480x320
• hdpi 240dpi (1.5x) 800x480
• xhdpi 320dpi (2x) 1280x720
• xxhdpi 480dpi (3x) 1920x1080

Android 屏幕尺寸

此部份感謝友人 Takeru 說明。

• 為了適應(yīng)android百花齊放的屏幕分辨率與屏幕尺寸，都是以dpi(Dot peer inch)為基準；
• 在Guideline的定義中?http://blog.csdn.net/moruite/article/details/6028547?這邊有dpi的計算方法；
• dpi會受到屏幕尺寸實際大小的影響；
• 即使同樣分辨率在不同的屏幕尺寸中，會得到不同dpi；
• 已有網(wǎng)站整理目前各機種的屏幕分辨率和dpi?http://screensiz.es/phone；
• 所以當dpi在480~320之間時，系統(tǒng)會以xxhdpi的圖檔為第一優(yōu)先；
• 至于1920x1080則是目前最常見的分辨率；
• 之后，320~240之間，則是以xhdpi的圖檔為優(yōu)先，以此類推；
• 同樣的，在xhdpi中1280x720是最常見的分辨率；
• 所以，最初列表中的分辨率為常見的分辨率，并非絕對；
• 圖檔文件夾雖是以dpi作為區(qū)隔，都是以一個范圍，非單一值；

（大部份都是以此為標準，當然也有例外，例如：note2）；

圖片放大縮小

為了 iOS 和 Android 總共只出一套psd、不能使用 9-patch 延伸的圖片部分，在 1x 情況下都要以 4px 為單位設(shè)計，做 2x 圖時是以 8px 當單位。所有圖片能用向量制作就用向量，設(shè)定 4px 是「?為了避免因比例換算產(chǎn)生 0.X px 導(dǎo)致圖片模糊失真?」（px 一定是整數(shù)、沒有小數(shù)點），而不是最后的切圖產(chǎn)出。切圖一樣要針對不同分辨率切幾套出來，別以為用 4px 當單位、整個 psd 文件放大 2 倍，像素 icon 圖就不會糊掉了。

切圖和標示文件不可能共享

光切圖方式就不一樣了是要怎么用同一份標示文件？Android 有個獨有的切圖方式稱「9-patch」，可以讓切圖自動延展。iOS 同樣也有延展設(shè)計，但標示方式和 Android 不同，我另外開文寫這部分。（有的 iOS RD 會要求使用坐標來制作標示文件，但 Android RD 沒辦法使用坐標。）

即使是相同的設(shè)計也無法使用同一套切圖，舉個例子：就以按鈕來講，iOS 可以把文字直接和底圖上切成一張圖，不管是 iPhone 5s 或 iPhone 4 上文字邊緣依然銳利。但若希望 Android 每臺手機都能看到銳利的文字，底圖和文字就要分開，給 RD 的切圖就是標了 9-patch 的純底圖一張，文字必需由系統(tǒng)產(chǎn)生才能保持絕對清晰。

在無法使用內(nèi)建文字的情況下，Android 底圖和文字要分開切、不能使用 9-patch。9-patch 只能延伸底圖，如果延伸很長的話，會變成底圖很大字還是很小的情況。

結(jié)論

為了 RD（工程師）好，還是把 iOS 和 Android 分開看待...直接拿 iOS 的切圖和標示文件給 Android 的 RD 就等著被退貨吧。

1. iOS 和 Android 分別設(shè)計接口。
2. 做 1x 再放大給其他尺寸使用最安全。
3. 做大縮小的情況下所有數(shù)值一定要設(shè)成雙數(shù)。
4. 研究一下如何放大縮小圖片無損吧，我有寫過教學文。
5. iOS、Android 一定要「分開」切圖。
6. 標示文件一定要 iOS、Android 「分開」。

再強調(diào)一次?iOS 接口本來就不應(yīng)該和 Android 長得一樣?。光是實體的 Back 就有差。就某些 RD 的角度會覺得出一版給兩家平臺使用維護很方便，是 UI 就該仰天長嘯「這不優(yōu)雅～」。

原文地址：blog.akanelee
作者：Akanelee

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

 
================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是一個分享網(wǎng)頁設(shè)計、無線端設(shè)計以及PS教程的干貨網(wǎng)站。
【特色推薦】
設(shè)計師需要讀的100本書：史上最全的設(shè)計師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計微博：擁有粉絲量68萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計 ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計資源、下載頂尖設(shè)計素材。
設(shè)計導(dǎo)航：全球頂尖設(shè)計網(wǎng)站推薦，設(shè)計師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設(shè)計教程、經(jīng)驗分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁設(shè)計 微信號：【youshege】優(yōu)設(shè)哥的全拼
您也可以通過掃描下方二維碼快速添加：