前几天看到了颜伟CSD的一篇关于 iPhone X 的适配文章 “说人话！三分钟弄懂iPhone X 设计尺寸和适配”，自己做了一点摘录和思考补充如下：
1. 改变的性质
目前我在进行 App 设计都是以 iPhone 6 为设计基础，再去进行不同尺寸适配（对Plus / SE），及Android 平台差异的适配。
单纯从设计的逻辑分辨率的角度看，相对iPhone6，宽度不变，高度增加。
2. 逻辑高度增加多少呢？
-
物理分辨率的变化，导致@x1的逻辑分辨率增加了145，
δ = +145pt -
考虑 Safe Area的限制，去掉头部状态栏（44pt），底部 Home Bar（30pt），高度的逻辑分辨率变化
δ = +145 -44 -30 = +71pt -
原来的 Status Bar 显示在了现在头部的刘海区域，原来占用的20pt可以用来设计内容和行为，高度变化
δ = +71 +20 = +91pt
总体而言，
- 可以用来设计行为的 Safe Area 增加了 91pt。
- 可以用来显示内容的区域，可以尝试利用 Home Bar 位置的30pt。
3. 对设计的影响
- 瀑布流布局，基本没有影响。
- 竖直方向更多空间，不做任何调整也能保证重要内容一屏显示完。为了显示效果更好，建议做适当调整，比如竖直方向的间隔拉升。
- 需要整屏显示的页面，如启动页，播放页面，需要微调。
- 需要沉浸式的应用，如视频、阅读等大多数内容消费应用，Danger Area 可以用来显示内容，增加内容显示的空间，提高使用感受。
- H5页面，大部分都是图片，在同样屏幕比例时，只需要等比缩放。在比例变化时，适当调整间隔即可。当然，如果是整张图，就需要调整活动图片了。
- 因为屏幕比例变化，更加瘦长，等比例放大会导致左右两侧内容被裁切，需要注意。
BTW，我只是从交互设计的角度进行一些学习思考，难免存在偏误，欢迎指证。
Thanks
Wedy
网友评论