dpi、ppi、dp、px、分辨率、@1x、@2x、@3x
從事設計以來，這些單位概念，總是反復循環的遺忘混淆，于是下定決心整理一份自己容易理解的筆記，分享出來供大家一起參考。
-
px：像素
- 分辨率：屏幕水平方向上的像素 × 垂直方向上的像素，單位為px；
例：iphone5的分辨率為：640 × 1136 px
-
ppi：Pixel per inch，每英寸像素數，為像素密度，單位：像素/每英寸
針對顯示器設計時， ppi=dpi
-
dpi：dots per inch，每英寸像素點，為像素密度，單位：像素/每英寸；
dpi=√ (屏幕水平像素^2 + 屏幕垂直像素^2) / 屏幕英寸數
-
dp：在Android開發中，使不同密度的屏幕顯示一致的UI元素。稱“密度獨立像素”
dp=（dpi/（160像素/英寸））px
-
@1x、@2x、@3x：在ios開發中，為使在不同設備下顯示一致的UI元素，將iphone手機分為了3類，對應稱之為一倍圖、二倍圖、三倍圖
在Android開發中的應用
如上圖所示，為方便開發，Android將主流設備分為了mdpi、hdpi、xhdpi、xxhdpi、xxxhdpi五大類。
例如：華為 Nova手機
主屏尺寸：5英寸 1080x1920像素
則：ppi=dpi=√ (1080^2 + 1920^2) / 屏幕英寸數 ≈ 440像素/每英寸
dp=（440/（160像素/英寸））px ≈ 3px
其實當我們計算出dpi的時候，通過上表就可以知道，該屏幕屬于xxhdpi屏，俗稱3倍圖
通過計算可以得出，一般情況下：
360px 寬的屏幕為mdpi（1倍圖）
480px 寬的屏幕為hdpi（1.5倍圖）
720px 寬的屏幕為xhdpi（2倍圖）
1080px 寬的屏幕為xxhdpi（3倍圖）
1440px 寬的屏幕為xxxhdpi（4倍圖）
Android設計中常見的尺寸與距離：
- 頂部狀態欄高度：24dp
- Appbar最小高度：56dp
- 底部導航欄高度：48dp
- 懸浮按鈕尺寸：56x56dp/40x40dp
- 用戶頭像尺寸：64x64dp/40x40dp
- 小圖標點擊區域：48x48dp
- 側邊抽屜到屏幕右邊的距離：56dp
- 卡片間距：8dp
- 分隔線上下留白：8dp
- 大多元素的留白距離：16dp
- 屏幕左右對齊基線：16dp
- 文字左側對齊基線：72dp
柵格系統的最小單位是8dp， 一切距離、尺寸都應該是8dp的整數倍
所有可操作元素最小點擊區域尺寸：48dp × 48dp；如實在滿足不了可縮小視覺控件的大小，但是需要保留點擊區域的大小
在iOS開發中的應用
如上圖所示，為方便開發，蘋果將設備分為了@1x、@2x、@3x三大類。
除了狀態欄高度無法改變，別的可以根據實際設計進行微調。
在@2x屏幕下，所有可操作元素最小點擊區域尺寸為88px；如實在滿足不了可縮小視覺控件的大小，但是需要保留點擊區域的大小
根據上表所示，我個人習慣用iPhone5作為設計原始稿尺寸，所有icon都用矢量的圖形元素進行繪制，方便后續的放大縮小處理。之所以用iPhone5的尺寸，是因為，5和6同為@2x，如用6的尺寸來設計，容易使5的界面元素太過擁擠。
參考資料：
http://www.cnblogs.com/yaozhongxiao/archive/2014/07/14/3842908.html
http://www.zcool.com.cn/article/ZNzEwMjg=.html
https://developer.apple.com/ios/human-interface-guidelines/graphics/app-icon/
來自：http://www.ui.cn/detail/187075.html