iPhone X发布,彻底全新的设计,也彻底定义了新的体验,与以往的iPhone都有不同,玻璃外壳、搭载着苹果A11处理器,电池续航能力比iPhone 7长了两个小时,并且在iPhone X的设计上首次使用了全面屏、面部识别、无线充电等技术,搭载1200万像素双摄镜头。
然鹅,这些我觉得没有那顶部的刘海惹人注目,那么UI界面设计和交互细节也会有很多改变,不敢评价,总结一下官方文档的内容好了,就当作笔记了……
设计适配:
iPhone X 屏幕宽375pt,1125px@3x,高812pt,比iPhone 8 高度多出20%。(真正的@3x!)
为iPhone X设计需要确保布局填充屏幕,不被圆角、传感器和home指示器(下面有说明)所掩盖。
iPhone X 屏幕底部任意位置上滑可以返回主屏或者进入任务切换界面,屏幕底部有一个home指示器固定显示在app上层。
大多数app使用系统提供的UI元素,会自动适应iPhone X 的屏幕。Navigation bar、tab bar和tool bar会扩展到屏幕顶部和底部弧形区域。
水平布局时,table view全屏显示,内容只在中间安全区显示,iOS 11新增了一种布局叫做「Safe Area layout guide」。(下图蓝色+红色区域是安全区域,红色是margin,注意水平布局时不显示状态栏,安全区底部仍然要留出home指示器的位置)
如果app使用自定义控件或非标准布局,要在iPhone X上运行良好需要一点修改。
一、全屏显示
iPhone X和4.7寸iPhone屏幕长宽比不同,提供 Fill 和 Fit 2种图片缩放方式。
二、重新设置关键交互和关键信息的位置。
交互元素不要靠近角落
屏幕边缘的视觉元素要移动位置,部分情况下要重新设计。
iPhone X 状态栏高度更高,在电话和定位等后台任务时,高度不会变化(就是打电话和导航时,原先顶部增加的彩色带,现在变成时间信息底部的彩色气泡,见下图)
水平布局时,交互元素两侧距离相等,左侧右侧旋转时位置固定,方便用户记忆。
应用可以打开edge protection(边缘保护?),第1次操作拉出home指示器,第2次退出应用。