移动端界面设计之尺寸篇

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

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 工程概况 本工程位于集美区杏滨中心小学内,本工程为地下一层,地下建筑面积6845.64平方米,设计地下停车位215...
    小潭潭阅读 321评论 0 1
  • js 变量提升 首先 javascript 是一种弱类型、动态的、解释型的脚本语言。 弱类型:类型检查不严格,偏...
    Mo_ham_med阅读 235评论 0 1
  • 片子这么好,奈何没流量,爱看4G也是一卡一卡的,忒烦恼。不说了,不如去学习吧。
    youngerest阅读 270评论 0 0
  • 那是2017年8月30,有点秋意,那一天记忆犹新。而那天对我以及整个家庭来说是灾难性的一天。那一天妈妈逼逼叨...
    yc荏苒阅读 219评论 0 0
  • “推动我不断向前的唯一动力,是我喜欢我做的事”
    3小侠阅读 187评论 0 0