最美UI

iPhone X 适配设计指南!ui设计师必备知识点

明天早上,我的 iPhone X 总算到了(当然是 256G),迫不及待的开机点亮,哇~ 还真是很惊艳。

 

异形全面屏无疑是它的最大亮点,这样做的好处就是可以让别人一眼就能认出来这是 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。

 

底部必须给主页指示器预留 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://mp.weixin.qq.com/

微信公众号微信公众号:zuimeiui

扫一扫 关注公众号

[ 最美特色栏目推荐 ]
设计导航:全球顶尖设计网站推荐,设计师必备导航! → 猛戳这里
设计欣赏:收集海量精选APP截图,让你设计灵感小宇宙大爆发!! → 猛戳这里
APP图标:精选APP图标,看看各大app图标的设计风格提升设计感! → 猛戳这里
【原创文章 投稿邮箱:tougao@zuimeiui.com | 期待您的投稿!】

上一篇
做到这几点,让你的UI设计更精致!
下一篇
“低保真到高保真”需要多少次的推敲与考量