提交需求
赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!
中文字幕苹果官方的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
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册