巴蜀网

 找回密码
 免费注册

QQ登录

只需一步,快速开始

扫一扫,访问微社区

开启左侧
查看: 61|回复: 0
 红英 发表于: 2017-9-17 06:35:00|显示全部楼层|阅读模式

[纪实·新闻] iPhone X额头上的“刘海”将怎么影响UI设计

 [复制链接]
  : 环球网
  具有下一代旗舰意义的苹果iPhone X正式发布,这款新机苹果摒弃了home键,采用全面屏设计,显示屏采用新的工艺和技术,精准贴合机身的曲线,一直延伸至优雅圆润的边角。引起吐槽最多的无疑是iPhone X额头上的“刘海”,尽管这块布满了黑科技传感器的区域肯定有存在的理由,比如Face ID等,但是其将影响许多原来的UI界面元素,短期内用户难免不接受改变。
_OjY-fykywuc4032861.jpg
</p>  在iPhone X发布后苹果更新了“人机交互界面设计准则”,特别指出应用开发者不应该尝试“隐藏设备显示的圆角边沿部分、传感器遮蔽区域,”也不许在顶部或底部设置黑色栏尝试隐去这部分。也不要用括号,边框,形状或指示文本等视觉元素特别突出该区域。
  也就是说像下图左侧的尝试用黑栏让刘海区域融为一体,或者用黑栏突出底部的HOME唤出滑条都是苹果认为错误的UI设计方案。
urR1-fykymue6315835.jpg
</p>  苹果称大部分应用标准的系统UI元素的应用都会自动适应iPhone X的全新显示区域,背景元素将自动延展覆盖这些区域。
Ts1v-fykywuc4032928.jpg
</p>  为了确保一些可操作交互元素和重要视觉元素不被iPhone X的圆角区域覆盖,原则上这些操控元素都应该置于下图的“安全区域”内,App Store审核应用时会评估这一准则是否得到应用。苹果特别踢到了不要将任何互动操控件放置在全面屏的最下方,这将影响HOME唤出滑条。
rOjF-fykywuc4032951.png
</p>  苹果的官网提供了许多UI设计实例,演示正确的交互原则下应用在iPhone X下的视觉外观。
  当然。这些宣传实例缺少了横屏状态下的UI外观演示,不少开发商通过新Xcode的模拟器演示了iOS 11在iPhone X下的横屏截图。在浏览网页时左右异形显示区域会空出一部分,这部分颜色将取到网页的默认背景色。
_GAB-fykymwm9145398.png
</p>
p5rQ-fykymwk2371209.png
</p>  全屏放大图片和玩全屏游戏时,全面屏将自动延展拉伸以覆盖这些区域。
__gz-fykywuc4032980.png
</p>  不幸的是在视频播放时,默认状态下苹果会设置视频留出两侧黑边,以完整收看视频,但用户也可以双击让它全屏,视频会延展拉伸覆盖这些区域,而刘海部分自然会影响观看效果。
WFoo-fykywuc4033012.png
</p>
『 巴蜀网 』提醒,在使用本论坛之前您必须仔细阅读并同意下列条款:
  1. 遵守《全国人大常委会关于维护互联网安全的决定》及中华人民共和国其他各项有关法律法规,并遵守您在会员注册时已同意的《『 巴蜀网 』管理办法》;
  2. 严禁发表危害国家安全、破坏民族团结、破坏国家宗教政策、破坏社会稳定、侮辱、诽谤、教唆、淫秽等内容;
  3. 本帖子由 红英 发表,享有版权和著作权(转帖除外),如需转载或引用本帖子中的图片和文字等内容时,必须事前征得 红英 的书面同意;
  4. 本帖子由 红英 发表,仅代表用户本人所为和观点,与『 巴蜀网 』的立场无关,红英 承担一切因您的行为而直接或间接导致的民事或刑事法律责任。
  5. 本帖子由 红英 发表,帖子内容(可能)转载自其它媒体,但并不代表『 巴蜀网 』赞同其观点和对其真实性负责。
  6. 本帖子由 红英 发表,如违规、或侵犯到任何版权问题,请立即举报,本论坛将及时删除并致歉。
  7. 『 巴蜀网 』管理员和版主有权不事先通知发帖者而删除其所发的帖子。
您需要登录后才可以回帖 登录 | 免费注册

本版积分规则

© 2002-2017, 蜀ICP备12031014号, Powered by 5Panda
GMT+8, 2017-9-27 02:17, Processed in 0.670801 second(s), 12 queries, Gzip On, MemCache On
快速回复 返回顶部 返回列表