提交需求
赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!
之前很多相关文章,但依然不知道怎么适配,所以写了这篇文章
为了帮助大家完成这个过渡,苹果官方出了一个设计指南视频,强烈推荐大家观看
从上周五,我的 iPhone X 总算到了,迫不及待的开机点亮,哇~ 还真是很惊艳。异形全面屏无疑是它的最大亮点,这样做的好处就是可以让别人一眼就能认出来这是 iPhone X,哦不是,可以使用 Face ID,满足你的装 X 梦。
代价嘛,就是要专门为 iPhone X 做适配,而且 iOS 11 的人机交互指南单独为它新增了一节。当中的坑还真不少,下面就跟大家详细说说。
一、尺寸
iPhone X 是真 3 倍图,屏幕分辨率是 1125×2436 px,对应的设计稿尺寸是 375×812 pt。看到 375 就有种看到亲人的感觉,这也就意味着宽度上几乎不用做修改。
与 iPhone 6、7、8 (375×667pt) 相比,Status Bar 高度由 20pt 变为 44pt。
底部必须给主页指示器(Home Indicator)预留 34pt,加上 Tab Bar 高度由 49pt 变成 83pt。
所以实际多出来的高度是 145-24-34 = 87pt。
另外,键盘高度由 216pt 变为 291pt,多出了 75pt,文字输入区一定要注意。
适配方法
顶部将 375×667pt 的设计稿的 Status Bar 换成 iPhone X 的 Status Bar。Navigation Bar 如果是按 44pt 做的不用修改,如果是 64pt 在 Symbols 里把高度向上延伸 24pt 并填充原有颜色。
底部预留 34pt 用与放置主页指示器(Home Indicator),有 Tab Bar、Toolbar 的页面如果是用 Symbols 做的将他们下延 34pt 并填充原有颜色。没有 Bar 的页面底部不用再填充颜色,只需盖上主页指示器即可。
二、布局
为了不让边角圆角和留海影响使用,苹果为此不惜引入两个新的概念:安全区域(Safe Area)与 布局边距( Layout Margins)。安全区域用于承载内容, 布局边距限制内容边界。
适配方法
竖屏模式:安全区域延伸至屏幕左右两侧,上方留 44pt 给 Status Bar,下方留 34pt 给 主页指示器,布局边距数值根据产品自定义。
横屏模式:安全区域被四面围城,左右各留 44pt,上方留32pt,下方留21pt,布局边距数值根据产品自定义。
三、Don’ts and Do’s
3.1 不隐藏 iPhone X 特点,也不要强调它
3.2 确保控件在安全区域内,特别要注意与主页指示器保持距离
3.3 横屏模式保持控件位置对称,帮助用户建立肌肉记忆
3.4 原来靠边的控件需修改样式
是不是觉的缺了点什么,没错,你还缺少一套 iPhone X 的 UIkit 和 最新的 SF Pro 字体。需要的朋友不用客气啦
链接: https://pan.baidu.com/s/1slNXmAp 密码: i2w8
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册