移动端界面设计之尺寸篇
2018-06-28 本文已影响1628人
赵羽珩
image.png
IOS界面750 x 1334 设计稿尺寸(单位是1pt=2px)：
iPhone 新机型 ： 状态栏高度 88px 、导航栏高度 88px 、 tabBar高度 98px、 Home条68px
iPhone 旧机型 ： 状态栏高度 40px 、导航栏高度 88px 、 tabBar高度 98px
间隔快：16pt
安卓界面720 x 1280 设计稿尺寸(1dp=2px)：
安卓机型 ： 状态栏高度 50px 、导航栏高度 96px 、 tabBar高度 96px
IOS启动页尺寸16个：
我们单位自己项目的启动图
| 启动图尺寸 | 机型 | 倍数 | 开发尺寸 |
|---|---|---|---|
320×480 |
iPhone3GS |
@1x |
320×480 |
640 × 960 |
iPhone4s |
Default@2x |
320×480 |
640 × 1136 |
iPhone5s |
Default-568h@2x |
320×568 |
750 × 1334 |
iPhone6.7.8 |
Default-667h@2x |
375×667 |
1242 × 2208 |
iPhonePlus（6+／7+／8+） |
Default-736h@3x |
414×736 |
1125 × 2436 |
iPhoneX、XS |
Default-812h@3x |
375×812 |
828 x 1792 |
iPhoneXR |
Default-828h@2x |
414×896 |
1242 x 2688 |
iPhoneX Max |
Default-1242h@3x |
414×896 |
1792×828 |
iPhoneXR_横向 |
-- |
-- |
2208×1242 |
iPhonePlus_横向 |
-- |
-- |
2436×1125 |
iPhoneX, XS_横向 |
-- |
-- |
2688×1242 |
iPhoneX Max_横向 |
-- |
-- |
768×1024 |
iPad（旧版） |
-- |
-- |
2048×1536 |
iPad（新版）+ iPad mini 4 |
-- |
-- |
1024×768 |
iPad（旧版）_横向 |
-- |
-- |
1536×2048 |
iPad（新版）+ iPad mini 4_横向 |
-- |
-- |
| --- | --- | --- | --- |
2732×2048 |
12.9 英寸 iPad Pro |
-- |
-- |
2388×1668 |
11 英寸 iPad Pro |
-- |
-- |
2224×1668 |
10.5 英寸 iPad Pro |
-- |
-- |
1024×1366 |
iPad Pro（旧版） |
-- |
-- |
IOS图标的13个尺寸、不需要切圆角
20×20、 29×29、 40×40、 58×58、 60×60、 76×76、80×80、87×87、120×120、152×152、167×167、180×180、 1024×1024、
参考Xcode开发工具
安卓图标4个尺寸、圆角切图设计多大才合适
72×72、96×96、 144×144、 192×192
参考小米的安卓圆角切图
常见的字体大小：
24px、28px、32px、36px等等。记住是偶数的。最小字号20px。
界面里的小图标常见的尺寸：
96px、128px等，因为要考虑iPad的适配，个人觉要把图标做的大一些
设计稿实时预览：
Ps安装一个Ps Mirror可以在手机上实时观看效果。（60块钱）
sketch安装一个 蓝湖可以在手机上实时观看效果。（免费）
强烈推荐"蓝湖"。最好用的插件，没有之一
