怎么适配高分屏_图解iPhoneX移动端UI适配设计

今天你抢到 iPhone X 了嘛？

---

一：发生了什么新变化

不久前，苹果发布的 iPhone X 等新产品以及正式推出的 iOS 11 刷爆了朋友圈。作为设计师，在喧嚣过后最关心的莫过于怎样迎接接下来的界面设计适配工作了。本文将会针对新硬件及系统所带来的变化，将相关的适配经验分享给大家！

二：如何做手机端适配

1、选择合适的屏幕分辨率

目前关于iPhone X 的设计资料有限，我们看官方的文档《Human Interface Guidelines》中的示例，标注的都是@1x分辨率。从开发的角度看这比较符合工程师们的习惯，但对拥有像素眼的视觉设计师来说，按实际分辨率来设计是理所当然。不过考虑到设计师要输出多套设计稿的工作量，我们要学会“科学地偷懒”，具体来说：

选择@2x分辨率为标准，以750*1334px进行视觉设计。

• 通过微调宽度与高度，向下兼容窄屏640*1136px，输出@2x资源包

• 通过等比缩放1.5倍，微调高度以适配高分辨率设备，输出@3x资源包

iOS适配图示

说完iOS再看Android一样可以适用，在750*1334px的基础上：

• 通过微调宽度与高度，适配安卓720*1280px，输出HDPI资源包

• 通过等比缩放1.44倍，适配安卓1080*1920px，输出XHDPI资源包

• 需要注意单位转换，Android开发是以dp为单位

这样，设计师可以有一套标准生产模版，在750*1334px的基础上快速输出多套设计稿。兼顾iOS工程师、安卓工程师和前端工程师的需要，开发根据各自终端特性换算单位即可满足。

P.S. 对涉及多页面或交互型的界面，也可以选择以@1x分辨率进行设计，既能节省文档资源也相对高效～

2、输出完备的界面开发包

设计师需要输出完备的界面开发资源包，其中包括：各状态的效果图、切图素材和界面标注稿。

另外，也不要忘记和开发工程师们交待单位的换算和其他适配注意点哦！

• 展示效果图：输出@2x分辨率的视觉稿，一般包含窄屏、标准屏、高清屏和安卓端4套效果图就足够了。如果涉及流程跳转和控件样式变化，也应提供完整效果展版。

• 切图素材包：提供@1x、@2x、@3x规格的切图资源，包括PNG、PDF、SVG、JPG等格式。此外，可根据情况补充Android的点9等切图。

• 界面标注稿：包含各元素、控件和页面布局的说明，所有图像以切片大小为准，需注意点击热区和安全区的标注说明。

3、注意新产品的安全区

iPhone X 的全面屏本质上是一块异形屏。为了实现Face ID等功能，顶部多了一块“刘海”，同时底部也因为去除了物理Home键而多出一条虚拟Home条；而四个圆角以及双边的曲率也带来了熟悉又陌生的“安全显示区”的概念。

设计师们需要注意竖屏、横屏情况下，屏幕四周的安全范围及设计规范，避免界面内容被遮挡。

另外，图片在不同分辨率下的最佳展示效果不同，在进行开屏图的适配性设计时，需保证图片的主体内容居于安全区内。

三：应用示例及模版下载

1、应用示例

示例：顶通Banner适配

示例：大众点评APP界面

2模版下载

iPhoneX界面设计模版：Sketch文件

云盘地址：[犀牛云盘](犀牛云盘)

提取码：TuYTpk