【UI设计】iOS 界面规范【教程贴】

UI设计讲师-黄晓炜 发布于 2018/04/29 20:08
查看:522|回复:0

35ae6e2e61825c454f77ebbdb9f817fd002.png

iPhone5、5C、5S、5SE的界面规范:

界面整体尺寸是:640x1136PX

顶部的状态栏尺寸是:640x40PX

导航栏尺寸是:640x88PX

底部的标签栏尺寸是:640x98PX

中间剩下的区域是内容区域,那么这个内容区域的一些尺寸是没有硬性规定的,主要根据设计师的想法去设定!


          ——


c8eb22f214a48e8b38fb91e502e8fd2c002.png

iPhone6P、7P、8P的渲染版界面规范:

界面整体尺寸是:1242x2208PX

顶部的状态栏尺寸是:1242x60PX

导航栏尺寸是:1242x132PX

底部的标签栏尺寸是:1242x146PX

中间剩下的区域是内容区域,那么这个内容区域的一些尺寸是没有硬性规定的,主要根据设计师的想法去设定!


          ——


ae7fa22e2e3b25378360aefb1a047fbe002.png

iPhone6、7、8的界面规范:

界面整体尺寸是:750x1334PX

顶部的状态栏尺寸是:750x40PX

导航栏尺寸是:750x88PX

底部的标签栏尺寸是:750x98PX

iPhone6的UI尺寸只是在宽度比iPhone5的宽度多了110PX,其余的栏的高度都保持不变!

中间剩下的区域是内容区域,那么这个内容区域的一些尺寸是没有硬性规定的,主要根据设计师的想法去设定!


          ——


ba8cf3768eef9d41a9e51c76df5f98da002.png

iPhone X 的界面规范:

界面整体尺寸是:1125x2436PX

iPhone X与其他的iPhone的区别就是顶部与底部多了两个安全区域,这两个区域是不能够放图标与文字的!

顶部的安全区域尺寸是:1125x132PX

导航栏尺寸是:1124x132PX

底部的标签栏尺寸是:1125x146PX

底部安全区域尺寸是:1125x102PX

中间剩下的区域是内容区域,那么这个内容区域的一些尺寸是没有硬性规定的,主要根据设计师的想法去设定!


查看点赞情况
全部点赞
总计: --
本贴还没有回复,赶紧来抢占沙发吧~
发布新贴
招版主啦

版主

  • 潘懿 潘懿
  • 黄根平 黄根平
  • UI讲师-冯志龙 UI讲师-冯志龙
  • UI设计讲师-江海金 UI设计讲师-江海金
  • UI设计讲师-黄晓炜 UI设计讲师-黄晓炜
  • UI设计讲师-熊祥淳 UI设计讲师-熊祥淳

注册有礼

完善以下信息,为你推荐课程

  • 学生
  • 白领
  • 高管
  • 自由职业
  • 其他
  • 工作需要
  • 自我提升
  • 兴趣爱好
  • 创业/转型
  • 其他
  • 小白
  • 了解
  • 熟悉
  • 精通
  • 其他
  • 高中/中专
  • 专科
  • 本科
  • 硕士
  • 其他
  • 影视枪战大片特效解析
  • PS视觉惊悚课堂
  • 45天7千平方大厦变形记
  • 原画学习痛点技法全解析
  • 影视动画奇幻课堂
  • AI高端商业设计全攻略
  • UG职场生存必备指南
  • 日赚千元之新媒体行业揭秘
出现异常