产品设计:iPhone X 官方人机交互指南中文版

摘要:iPhone X有一块超大型、高分辨率、圆角的、无边框的屏幕,为用户提供了前所未有的沉浸式的、内容丰富的体验……

QQ截图20170914091807.png

编者按:昨天凌晨刚更新了iPhone X 的人机交互指南,中午优设就邀请了@平行煎餅翻译成中文版,最新鲜的设计干货,来优设准没错!

iPhone X有一块超大型、高分辨率、圆角的、无边框的屏幕,为用户提供了前所未有的沉浸式的、内容丰富的体验。

屏幕尺寸

iPhone X的竖屏模式,宽度与iPhone6、iPhone7、iPhone8 的4. 7 寸显示屏宽度相同;iPhone X的高度比4. 7 寸的屏幕要高出145pt,增加大约20%的垂直显示空间。

竖屏尺寸:1125px × 2436px (375pt × 812pt @3x)

横屏尺寸:2436px × 1125px (812pt × 375pt @3x)

应用程序可以显示高分辨率的图像。iPhone X可以显示高分辨率的@3x图片。对于其他平面和矢量的图形,最好提供独立分辨率的PDF格式的图片;对于其他栅格化的图片,需要提供@3x和@2x的图片。

布局

在为iPhone X做设计时,您必须确保布局覆盖到整个屏幕,并且不会被设备屏幕上的圆角、传感器和指示灯所遮蔽。

应用程序中大多数使用标准化的、系统提供的UI元素(如导航栏、表格等)会自动适配iPhone X。背景延伸到显示器边缘,并适当的插入UI元素。

对于自适应布局的应用,支持iPhone X的适配应该也比较容易,特别是遵循安全区域和边距布局指南的自适应布局应用。