小莫

小编:一篇文章带你了解如何为新推出的全屏幕超视网膜显示屏优化你的应用和游戏。

阅读信息:

iPhone X 采用了一块大尺寸,高分辨率,圆润,边到边的显示屏,提供了前所未有的丰富内容和沉浸式体验。

 

屏幕尺寸

纵向上,iPhone X 的显示屏宽度与 iPhone 6,7,8的4.7“显示屏一致。但 iPhone X 的显示屏比4.7”显示屏高145 pt,导致垂直方向多出来大约20%的区域可以显示更多的内容。

为你应用里的所有视觉元素提供高清的素材。iPhone X 搭配一块比例因子为@3x 的高清显示屏。对于文字和其他矢量图形,最好提供可以无视分辨率的 PDF 文件。对点阵图,你可以提供@3x 和@2x 两种比例因子的素材。更多请参阅?Image Size and Resolution?和?Custom Icons。

 

布局

在为 iPhone X 设计时,你必须确保布局填满屏幕,并且不会被设备的圆角,上端的传感器或用于访问主屏幕的指示条遮挡。

大多使用标准的,系统提供的如导航栏,表格和集合等 UI 元素的应用会自动适应新屏幕。背景会延伸到显示屏边缘,而 UI 元件也会被适当地布置。

对于自定义布局的应用,支持 iPhone X 也不难,尤其是当你的应用使用了自动布局并遵守了安全区和边距布局规范。

在 iPhone X 上预览你的应用。你可以使用 Xcode 附带的模拟器来预览应用,检查遮挡或其他布局问题。但是像高色域图像显示效果之类问题,最好在真机上预览。

提供全屏的体验。确保背景延伸到显示屏的边界,并且如表格和集合等垂直可滚动的 UI 元素,确保它们一直延展到底部。

插入必要内容以防遮挡。一般来说,内容应该居中对称,这样它在任何方向看起来都很赞,不会被四角,传感器或访问主屏幕的指示条遮挡。为获得最佳效果,搭建界面时请使用标准的系统提供的 UI 元素和自动布局。所有应用都应遵循 UIKit 中定义的安全区和边距布局规范,这个规定保障了基于设备和内容的稳妥的摆放。安全区同时预防了内容和状态栏,导航栏,工具栏,标签栏的重叠问题。

留心状态栏的高度。状态栏在 iPhone X 上比在其他 iPhone 上更高。如果你的应用采用了一个固定高度的状态栏并将内容摆放其下,则必须更新为根据用户的设备来动态定位内容。请注意,当如录音和定位等后台任务处于激活状态时,iPhone X 上的状态栏不会改变高度。

如果你的应用隐藏状态栏,请重新考虑 iPhone X 上的情况。iPhone X 上的显示屏比高度为4.7“的 iPhone 提供了更多的垂直空间,状态栏占据了你应用可能没有完全利用的一块屏幕区域。状态栏显示了对人们有用的信息,它只应该在能带来更多价值的情况下被隐藏。

在复用现有视觉元素时,留心比例差异。iPhone X 具有不同于4.7“ iPhone 的长宽比,因此4.7” iPhone 上的全屏图像在 iPhone X 上显示时会被裁剪或等比缩放以适应屏幕。同样,iPhone X 上的全屏图像在在4.7“ iPhone 上显示时也会被裁剪或等比缩放以适应屏幕。请确保重要的视觉内容在两种屏幕尺寸上都能很好展示。

避免将交互式控件摆放在屏幕的底部和角落。用户在显示屏底部使用滑动手势来访问主屏幕和多任务切换,这些手势可能会干扰你在此区域中的自定义手势。屏幕上方的两个角落太远了,并不是用户的操作舒适区。

不要在关键显示区域搞花样。请勿尝试通过在屏幕顶部和底部放置黑色色块来隐藏设备的圆角,传感器或主屏指示条。不要使用像括号,边框,形状或指示文字等视觉装饰在这些区域吸引用户注意力。

谨慎允许自动隐藏主屏指示条。当启用自动隐藏时,如果用户几秒没有触摸屏幕,指示条将消失。当用户再次触摸屏幕时重新出现。这种行为应该只被用于例如播放视频或幻灯片的观看场景。

更多请参阅?Adaptivity and Layout。

 

颜色

iPhone X 的显示屏支持 P3 色彩空间,拥有比 sRGB 更丰富,更饱和的颜色。

使用更丰富的颜色来增强视觉体验。采用高色域的照片和视频会更加栩栩如生,使用高色域的信息样式和状态指示会更有效果。更多请参阅?Color。

 

手势

iPhone X 的显示屏使用屏幕边缘手势来访问主屏幕,多任务处理,通知中心和控制中心。

避免和系统级的屏幕边缘手势冲突。人们会在每个应用里使用这些屏幕边缘手势。在少数情况下,像游戏这样的沉浸式应用可能需要自定义优先于系统手势的屏幕边缘手势 – 滑动一次会调用应用的自定义手势,第二次则会调用系统手势。 这种方式(称为边缘?;ぃ┯魃魇褂?,因为它使得用户难以访问系统级的操作。更多请参阅?Gestures。

 

 

其他注意事项

准确引用身份验证方式。iPhone X 采用 Face ID 进行身份验证。 如果你的应用集成 Apple Pay 或其他系统身份验证功能,请勿在 iPhone X 上引用Touch ID。同样,请确保你的应用程序在支持 Touch ID 的设备上没有引用 Face ID。 更多请参阅?Authentication。

不要重复提供系统已有的键盘功能。在 iPhone X 上即使自定义键盘,Emoji,Globe 和 Dictation 按钮也常置于键盘的下方。你的应用无法影响这些按钮,因此请避免在自定义键盘中重复布置这些按钮,以至给用户带来困扰。更多请参阅?Custom Keyboards。

 

文章总结:

看直播看到三点,梦里都是齐刘海??蠢凑獯文苷壬杓剖Φ闹挥懈痔篮吞烀?。

 

扩展阅读:

 

素材分享:

由于 iPhone X 刚发布,网上免费的资源并不多,笔者找到一个?iPhone X mockup,设计师们骚起来吧。

 

作者:徐小马非科班设计(公众号)

feikeban

转载请注明:学UI网—UI设计师学习教程平台 » 「译」苹果官方 iPhone X 人机界面指南

登录收藏

学UI就上学UI网!越努力,越幸运!

“学UI网www.ccopus.com?”最值得关注的UI学习平台! 每天发布高质量的设计教程和分享设计经验,服务于20万UI设计师,帮助初学者快速转型。每周六晚上免费YY公开课(36013311),给大家提供更多免费学习的机会。想成为设计师的你快来关注吧!

【特色推荐】

APP截图站app.ccopus.com” 海量APP截图,让你灵感爆发!国内最好的APP截图站。

UI作业网 zuoye.ccopus.com” 每一个作业题都尽量配有教程,交作业就有大神免费帮你点评作业,爽歪歪!

UI设计导航站 hao.ccopus.com” 专为UI设计学习者打造的资源+学习,双用途的网址导航站。亲爱的,你收藏了吗?

【学UI网 原创文章 投稿邮箱:tougao@ccopus.com,也可以找各个群的管理】

 
你可能喜欢的:
解析百度贴吧升级的故事I:用户洞察与交互升级解析百度贴吧升级的故事I:用户洞察与交互升级
从iOS 11看怎样设计APP图标从iOS 11看怎样设计APP图标
5 分钟交互设计指南:对话框5 分钟交互设计指南:对话框
UI设计师设计思路的进阶之路UI设计师设计思路的进阶之路
移动端的长表单应该如何设计?移动端的长表单应该如何设计?
网易设计师复盘小程序轻设计网易设计师复盘小程序轻设计
移动UI进化中!10种创新的导航菜单实例移动UI进化中!10种创新的导航菜单实例
网易严选APP品牌设计流程详解网易严选APP品牌设计流程详解
作为交互设计师的经验感悟作为交互设计师的经验感悟
iOS 11 vs 10: UI和交互全面对比分析iOS 11 vs 10: UI和交互全面对比分析
?