一線UI設計師對APP切圖尺寸換算指導

1.在Android的顯示模式為mdpi的時候,1dp等於1px。

2.在mdpi的情況下,屏幕解析度是320*480px。

3.在ios的解析度模式為@x1的時候,屏幕解析度是320*480px。(注意這時候pt和px比例是1:1)

4.因為ios在@x1時候的像素關係和Android的mdpi時候的像素關係是一樣的,@x2等於mdpi的2倍,也就是xhdpi的解析度,所以推導關係如下:

對應@x1的標準解析度時(iPhone2、3還有iPad1、2)

mdpi文字/圖標/間距 = (@x1)*1 = px;

hdpi文字/圖標/間距 = (@x1)*1.5 = px;

xhdpi文字/圖標/間距 = (@x1)*2 = px;

xxdpi文字/圖標/間距= (@x1)*2.25 = px;

對應@x2的高清解析度時(iPhone4、4s、5、5s還有iPad Retina)

mdpi文字/圖標/間距 = (@x2/2)*1 = px;

hdpi文字/圖標/間距 = (@x2/2)*1.5 = px;

xhdpi文字/圖標/間距 = (@x2/2)*2 = px;

xxdpi文字/圖標/間距= (@x2/2)*2.25 = px;

對應@x3的高清解析度時(iPhone6、6p)

mdpi文字/圖標/間距 = (@x3/3)*1 = px;

hdpi文字/圖標/間距 = (@x3/3)*1.5 = px;

xhdpi文字/圖標/間距 = (@x3/3)*2 = px;

xxdpi文字/圖標/間距= (@x3/3)*2.25 = px;

5.給開發的時候注意按著dpi模式把尺寸標註改成對應的dp。


推薦閱讀:

必須警惕一切圖謀淡化公民權的企圖——看"現代自由還意味著公民權的淡化。"危害性
sketch插件-Sketch Slicer

TAG:設計 | 設計師 | UI設計師 | 切圖 | 指導 | 尺寸 |