恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
你的iPhone XS/XS Max/XR 适配尺寸已上线啦
0.0°
2018-09-21 原创文章 教程 举报 52827 138 98 2

新机型一发布,设计师们就要考虑适配问题。关于适配的文章看了几篇了? 眼花缭乱否? 不如看一篇简单直接的!


首先,我们来看下这三款机型的屏幕参数。

Image title

iPhone XS 

1125 X 2436px 分辨率, 458 ppi

iPhone XS Max

1242 x 2688px 分辨率,458 ppi

iPhone XR

828 X 1792px 分辨率,326ppi


从ppi看,万幸,一切都是熟悉的,也就是说切图倍数没有改变


iPhone XS, XS Max 和 iPhone X 一致,都是 458 ppi,因此还是3倍切图@3x就好了! iPhone XR 和 iPhone 6/7/8 一致,都是 326ppi,因此采用2倍切图@2x 。


切图方面没有什么麻烦,现在看下新尺寸对设计布局的影响。


首先我们看下新机型的逻辑像素(pt)尺寸(即密度无关像素尺寸)

iPhone XS:分辨率/3,即 375 x 812pt,因此跟iPhone X 的布局完全一致;

iPhone XS Max: 分辨率/3, 即 414 x 896pt;

iPhone XR:分辨率/2,即 414 x  896pt。


也就是说,相当于只增加了一个尺寸 414 x 896pt,而且 XS Max 和 XR 都是全面屏需要留出安全区域


因此如果你是以 iPhone 8 (375x667pt) 为基准做 XS Max 和 XR 的设计稿,那么就是拉宽拉高尺寸到 414 x 896, 然后状态栏由20pt变为44pt,添加底部主页指示器34pt。

Image title


如果你是以 iPhone X (375x812) 为基准做 XS Max 和 XR 的设计稿,只需要拉宽拉高尺寸到 414 x 896,状态栏和底部主页指示器均不用更改。

Image title


而后续的图片等元素的适配,就需要从视觉角度灵活调整了。


不过,对于尺寸计算和安全区域,现在完全不需要你手动操作,墨刀已经率先火速为大家新出了 XS/ XS Max 和 XR的适配,一键创建 XS/ MAX/ XR项目就可以


状态栏和底部主页指示器已经默默地躺在那里给你们用了!

Image title

创建项目时,直接选择“iPhone XS Max 和 XR”的尺寸



不管是从Sketch导入基准设计稿稍作调整,还是在墨刀完成新设计,

点击”预览“,便能 show 出 XS/ XS Max 和 XR 的展示效果了!

Image title

 墨刀的一个iPhone XS Max 原型范例


赶快使用墨刀秀出你的新iPhone产品效果图吧!

更新:2018-09-21

收藏

138人已收藏

墨刀_MockingBot

在线产品设计写作一体化平台

  • 494

    作品

  • 1449

    粉丝

  • 3

    关注

  • 产品经理和设计师谈恋爱,看得我比“老坛酸菜”还酸!
  • Figma”断供“后:墨刀能为中国企业做什么?
  • 产品经理干久了,有哪些后遗症?
  • 超实用的后台原型,产品大佬的摸鱼技巧都在这里!

    猜你喜欢

      2018-09-21 原创文章 教程 举报 52827 138 98 2

      你的iPhone XS/XS Max/XR 适配尺寸已上线啦

      0.0°

      你确定要举报你的iPhone XS/XS Max/XR 适配尺寸已上线啦

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2018年09月21日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      98
      138
      2

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录