header_v1.7.39

iPhone X 设计图该怎么弄

22天前发布

原创文章 / UI / 教程
KEVINSONGG 原创,如需商业用途或转载请与KEVINSONGG联系,谢谢配合。

iPhone X 的设计图该怎么弄,本文是对自己的学习理解做的整理,希望对大家在了解iPhone X 的设计时有所帮助。

iPhone X发布有段时间了,最近也是工作中遇到要适配iPhone X,所以仔细研究了一番。网上的适配设计文章很多,本文就是是自己看完这些文章后做的理解总结,希望对大家在做设计图时有所帮助。

注明:以下图片内容均来自网络


中文字幕苹果官方的iPhone X 设计指南



1、iPhone X 屏幕和之前的几代有何不同?

如图所示,iPhone X 的屏幕是这个样子,四周多了圆角,屏幕顶部有“刘海”,底部取消和home按键。


2、iPhone X 的安全区域与布局边距怎么定义。

为了不影响内容的显示,必须保证所有内容不能被圆角、上方“刘海”和底部指示器遮挡,所以要在安全区域内进行设计。


3、设计稿尺寸有变化吗?

iPhone X 是1125px*2436px,换算为逻辑尺寸是375pt*812pt;iPhone8是750px*1334px,换算为逻辑尺寸是375pt*667pt,可以发现屏幕尺寸上宽度没有变化,只是垂直高度多了812pt-667pt=145pt,也就意味着屏幕增加了20%的显示空间。

竖屏尺寸:1125px*2436px  (375pt × 812pt)

横屏尺寸:2436px*1125px  (812pt × 375pt)


4、和其他iPhone相比有什么不同,设计稿怎么设定?

iPhone X 和iPhone 8 相比顶部的状态栏(Status Bar)由之前的20pt变为现在的44pt,多出44pt-20pt=22pt,底部由于多了指示器(Home Indicator),所以从之前只有标签栏(Tab bar)49pt变为83pt,指示器的预留高度为83pt-49pt=34pt。由于状态栏和指示器,实际多出的可自由利用的有效高度是145pt-34pt-22pt=87pt。键盘高度由原来的216pt变为现在的219pt。设计文字输入时,要注意这一点。下图是具体的设计稿尺寸规范,大家可以根据这个尺寸来设定自己的iPhone X 设计图。

此图来自站酷大神王羽枫,我只对文字内容做下修改调整

http://www.zcool.com.cn/work/ZMjQwMTQ5NzY=.html


此图来自站酷大神王羽枫,我只对文字内容做下修改调整

http://www.zcool.com.cn/work/ZMjQwMTQ5NzY=.html


5、是不是要多切一套图啊?

全新的iphone x会不会多切一个尺寸的图呢?答案是不用的,来让我们一起分析一波,一探究竟。

我们从iPhone的尺寸看起,前面说过iPhone X 尺寸是1125px*2436px;iPhone 8 尺寸是750px*1334px,那么算数好的可以看出,1125是750的1.5倍,1125是375的3倍,所以iPhone X 可以适配@3x的切图,和8p、7p、6p适配图一样,并没有多一套所谓@4x的切图,所以在切图这里设计师门不用慌张了,按照你的设计图输出@2x和@3x的切图即可。


6、顶部的状态栏和底部的指示器预留部分,颜色怎么选择啊?

这两处不可以自己定义颜色,系统会自动判断背景的颜色,深色背景时显示深色,浅色背景时显示浅色。



最后附上iOS11 UIKit 模板 PSD+Sketch+XD 源文件

链接: https://pan.baidu.com/s/1bL4C7W 密码: u3fq



2

    文章信息

    • 文章标签

    Hello PM 意见反馈
    没有新消息
    密码登录
    短信登录
    微信二维码登录

    提示文案

    提示文案

    提示失败
    提示成功