怎么避免“刘海”尴尬?
很简单,要保持好安全距离,刘海片儿一点也不可怕!我根据官方文档量了下,边距是10pt(@1x)
另外,屏幕显示不再是矩形,而是切割成了大圆角矩形,为了避免显示遮挡,我们需要在四周留出更多边距。
布 局
在设计iPhone X的界面时,您必须确保布局填满屏幕,并且不会被设备的圆角,传感器外壳或被主屏幕的指示灯遮蔽。
全屏的图片需要考虑这个问题,特别是人物。否则一律贴上黑色刘海片儿。
那么横屏的游戏到底要怎么显示呢?我认为应该是这样的:
虽然说顶部状态栏44pt,底部home indicator是34pt,但是我们无法控制用户是向左还是向右横屏,因此两边如果要放功能按钮的话,左右留出44pt+10pt的范围,底部留出home indicator的34pt。背景和无关紧要的图则充满屏幕。
大部分使用系统提供的标准UI元素(如导航栏)的APP会自动适应iPhone X!
苹果定义的 iPhone X 设计「安全区」(直观可操作区域)
全屏显示
底部指示器是系统的核心交互,会强制显示,针对浅色和深色背景会改变颜色。
底部按钮要避开home指示器,home指示器不需要特殊强调
应用可以打开edge protection(边缘保护?),第1次操作拉出home指示器,第2次退出应用。
在底部的点击操作不会触发home指示器,即使app内容在指示器下层,也可以被点击。
全屏模式时指示器自动隐藏,触摸屏幕可以显示。