查看完整版本: iPhone X额头上的“刘海”将怎么影响UI设计[8Ρ]

iPhone X额头上的“刘海”将怎么影响UI设计[8Ρ]

具有下一代旗舰意义的苹果iPhone X正式发布，这款新机苹果摒弃了home键，采用全面屏设计，显示屏采用新的工艺和技术，精准贴合机身的曲线，一直延伸至优雅圆润的边角。引起吐槽最多的无疑是iPhone X额头上的“刘海”，尽管这块布满了黑科技传感器的区域肯定有存在的理由，比如Face ID等，但是其将影响许多原来的UI界面元素，短期内用户难免不接受改变。
[img=695,418]https://p1.pstatp.com/large/316200046d304142e9e2[/img]在iPhoneX发布后苹果更新了“人机交互界面设计准则”，特别指出应用开发者不应该尝试“隐藏设备显示的圆角边沿部分、传感器遮蔽区域，”也不许在顶部或底部设置黑色栏尝试隐去这部分。也不要用括号，边框，形状或指示文本等视觉元素特别突出该区域。
也就是说像下图左侧的尝试用黑栏让刘海区域融为一体，或者用黑栏突出底部的HOME唤出滑条都是苹果认为错误的UI设计方案。
[img=700,483]https://p3.pstatp.com/large/3160000e17f1839ab4d2[/img]苹果称大部分应用标准的系统UI元素的应用都会自动适应iPhone X的全新显示区域，背景元素将自动延展覆盖这些区域。
[img=700,469]https://p3.pstatp.com/large/3161000b265c1025481d[/img]为了确保一些可操作交互元素和重要视觉元素不被iPhone X的圆角区域覆盖，原则上这些操控元素都应该置于下图的“安全区域”内，App Store审核应用时会评估这一准则是否得到应用。苹果特别踢到了不要将任何互动操控件放置在全面屏的最下方，这将影响HOME唤出滑条。
[img=607,466]https://p9.pstatp.com/large/3160000e17f298d6575c[/img]苹果的官网提供了许多UI设计实例，演示正确的交互原则下应用在iPhone X下的视觉外观。
当然。这些宣传实例缺少了横屏状态下的UI外观演示，不少开发商通过新Xcode的模拟器演示了iOS 11在iPhone X下的横屏截图。在浏览网页时左右异形显示区域会空出一部分，这部分颜色将取到网页的默认背景色。
[img=491,364]https://p3.pstatp.com/large/3161000b265f6f3bb106[/img][img=485,411]https://p3.pstatp.com/large/3161000b266038186283[/img]全屏放大图片和玩全屏游戏时，全面屏将自动延展拉伸以覆盖这些区域。
[img=622,402]https://p3.pstatp.com/large/3161000b2662b045ba23[/img]不幸的是在视频播放时，默认状态下苹果会设置视频留出两侧黑边，以完整收看视频，但用户也可以双击让它全屏，视频会延展拉伸覆盖这些区域，而刘海部分自然会影响观看效果。
[img=499,389]https://p9.pstatp.com/large/3160000e17f36af37fe5[/img]

一发布就引来关注一片，不愧是苹果。耐心等待降价，嘻嘻

软件公司已经开始研究匹配了,生产膜的已经开始着手准备了,相应的都在伺机而动。

以前苹果每一次都能引领潮流，现在苹果的创新越来越不够看了