移动端界面设计之尺寸篇

参考苹果官方文档尺寸详见:

image.png

IOS界面750 x 1334 设计稿尺寸(单位是1pt=2px):

iPhone 新机型 : 状态栏高度 44pt 、导航栏高度 44pt 、 TabBar高度 49pt、 Home条68px
iPhone 旧机型 : 状态栏高度 20pt 、导航栏高度 44pt 、 TabBar高度 49pt
间隔快:16pt

安卓界面720 x 1280 设计稿尺寸(1dp=2px):

安卓机型 : 状态栏高度 25dp 、导航栏高度 48dp 、 TabBar高度 48dp


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安装一个 蓝湖可以在手机上实时观看效果。(免费)
强烈推荐"蓝湖"。最好用的插件,没有之一

推荐阅读更多精彩内容

  • pdf下载地址:Java面试宝典 第一章内容介绍 20 第二章JavaSE基础 21 一、Java面向对象 21 ...
    王震阳阅读 83,050评论 26 522
  • 工程概况 本工程位于集美区杏滨中心小学内,本工程为地下一层,地下建筑面积6845.64平方米,设计地下停车位215...
    小潭潭阅读 27评论 0 1
  • js 变量提升 首先 javascript 是一种弱类型、动态的、解释型的脚本语言。 弱类型:类型检查不严格,偏...
    Mo_ham_med阅读 33评论 0 1
  • 片子这么好,奈何没流量,爱看4G也是一卡一卡的,忒烦恼。不说了,不如去学习吧。
    youngerest阅读 30评论 0 0
  • 我在简书记录我的一些想法。 无所谓对错。 很多想法都会变的,改变常常给我带来惊艳的恐慌。 聊以自慰。假装交流。 事...
    叮叮当当ah阅读 15评论 0 0