专栏首页京程一灯【最新】iPhone X 交互设计官方指南

【最新】iPhone X 交互设计官方指南

昨天凌晨,苹果公司发布了带刘海的 iPhone X,这需要 iOS 开发者针对其屏幕做新的适配,会后苹果公司发布了 iPhone X 的适配指南,下面是翻译稿,供大家参考。

iPhone X

iPhone X 拥有一个宽大的而且高分辨率的屏幕,从外观看是圆角的,并且扩展到屏幕的边缘。这提供了前所未有的沉浸式体验,可以使我们体验更加丰富的内容。

屏幕尺寸

iPhone X 屏幕的宽度与 iPhone6,iPhone 7 和 iPhone8 的 4.7 英寸的屏幕相同。但是,iPhone X 的屏幕比 4.7 英寸屏幕高 145pt,这样一来就多了大约 20%的垂直高度。

  • 竖屏尺寸:1125px × 2436px(375pt × 812pt @3x)
  • 横屏尺寸:2436px × 1125px(812pt × 375pt @3x)

你需要为自己的应用程序中的所有的图片稿件提供一份高分辨率图像。iPhone X 具有比例因子为 @3x 的高分辨率。对于字体和其他平面矢量图,最好实用与分辨率无关的 PDF 格式。对于光栅化图稿,你可以提供 @3x 和 @2x 版本的设计稿件。请参阅 图像大小和分辨率 和 自定义图标。

布局

在对 iPhone X 中的应用进行设计时,你必须确保布局能够填满屏幕,并且保证他们不会被设备的圆角、传感器外壳或者用于访问主屏幕的指示灯遮盖。

大多数使用系统提供的标准 UI 元素(如导航栏、表格和集合)的应用程序能够自适应设备的新外形。背景材料可以延伸到屏幕的边缘,而且 UI 元件也能够被适当地插入和定位。

如果你的的应用程序具有自定义布局,那么支持 iPhone X 也应该比较容易。如果你的应用程序使用 Auto Layout 并且遵守安全区域和边距布局指南的话。

在 iPhone X 上预览您的应用程序。您可以使用 Simulator(附带 Xcode)来进行预览,并且可以检查剪辑和其他布局相关的问题。例如宽彩色图像之类的属性,你最好在设备上进行预览。

提供全屏体验。要确保背景延伸到屏幕的边缘,并且垂直可滚动的布局(例如表格或集合)能够一直延续到底部。

插入必要内容以防止裁剪。一般来说,内容应该是居中对称的,所以它在任何方向看起来都很不错,不会被角落或设备的传感器外壳裁剪掉,或者被主屏幕的指示器遮挡。 为了能够获得最佳的效果,请使用系统提供的标准的界面元素和 Auto Layout 来实现你的界面。所有的应用程序都应遵循 UIKit 中定义的安全区域和布局边距,这些区域可以根据设备和上下文进行适当的填充。安全区域还能够防止内容把状态栏、导航栏、工具栏和标签栏覆盖掉。

注意状态栏的高度。iPhone X 上的状态栏比其他 iPhone 上的更高。如果你的应用程序的状态栏高度比默认状态栏高,那么你必须更新自己的应用程序,这样才能动态的根据用户设备定位内容。但是请注意,当背景任务(例如录音和位置跟踪)处于活动状态时,iPhoneX 上的状态栏并不会改变高度。

如果你的应用程序对隐藏状态栏进行了隐藏,那么请重新考虑在 iPhone X 上的设计。iPhone 上的显示高度为 4.7 英寸,并且它的屏幕上提供了更多的垂直空间内容,状态栏占据了你的应用程序本来可以使用的屏幕区域,状态栏还显示了对人们有用的信息,只有在交换附加值时候才能被隐藏。

在复用现有的图稿时,请注意长宽比的差异。iPhone X 和 4.7 英寸 iPhone 的长宽比具有比较大的差异,因此当全屏时, 4.7 英寸的 iPhone 图形会在 iPhone X 上出现裁剪或者 letterboxed。同样的道理,iPhone X 上的图稿在全屏显示时会被裁剪或者添加黑边。 如果要继续使用在 4.7 英寸 iPhone 上全屏显示的图稿,一定要注意在两种显示尺寸上的兼容性问题。

避免将交互式控件放置在屏幕最底部和角落里。人们可以使用显示屏底部的滑动手势来访问主屏幕和对应用程序进行切换,这些手势可能会覆盖掉你在此区域中设定的自定义手势。另外屏幕的两个角落令人很难进行有效操作。

不要遮挡或突出显示关键显示特性。不要隐藏设备的圆角和传感器外壳,也不要通过在屏幕顶部和底部放置黑色条的方式来突出主屏幕的指示器。不要使用类似括号、边框、形状或文字之类的视觉装饰来引起人们对这些区域的注意。

为了使用户能够轻松的访问主屏幕,可以自动隐藏虚拟 Home 键。当启用自动隐藏时,如果几秒钟内用户没有触摸屏幕,那么Home 键将会被自动隐藏。如果用户再次触摸屏幕,虚拟 Home 键会重新出现。上述行为应该只被用在被动观看的场景体验,例如在播放视频或幻灯片时。请参阅 适应性和布局。

颜色

iPhone X 上的屏幕支持 P3 色彩空间,这可以产生比 sRGB 更加丰富与更加饱和的颜色。为了增强视觉体验,请使用多元的颜色。 使用宽色彩的照片和视频更加逼真,使用宽色的视觉数据和状态指示器能够是你的应用程序更具有影响力。 请参阅 颜色管理。

手势

iPhone X 支持使用屏幕边缘手势来访问主屏幕、应用程序切换器、通知中心与控制中心。避免使用干扰系统功能的屏幕边缘手势。人们可以在每个应用程序中使用这些手势。只有在极其少数的情况下,例如游戏这样的沉浸式应用才有可能需要对屏幕边缘手势进行自定义。手势具有优先级: 第一次滑动会调用你应用的手势,在第二次滑动时才会调用系统手势。应该谨慎使用这种行为(称为边缘保护),因为这会导致用户很难访问系统级的手势操作。 参阅 手势

附加设计注意事项

准确的参考认证方法。iPhone X 支持使用 Face ID 功能进行身份验证。 如果你想把自己的应用程序与 Apple Pay 或者其他身份验证功能进行集成,请不要在 iPhoneX 上引用 Touch ID功能。同样请确保你的应用程序在支持 Touch ID 的设备上没有引用 Face ID功能。 请参阅 验证。

在使用自定义键盘时,不要重复实现系统提供的键盘功能。在键盘的下方会自动显示Emoji/Globe 和 Dictation 按钮。你的应用程序并不能影响这些按钮,所以不要在你的自定义键盘中出现这些按钮,以免造成混乱。 请参阅 自定义键盘。

资源

可以通过下面的链接下载 Photoshop 和 Sketch 格式的 iPhone X UI 设计模板:

https://developer.apple.com/design/resources/#ios-apps


往期精选文章

ES6中一些超级好用的内置方法

浅谈web自适应

使用Three.js制作酷炫无比的无穷隧道特效

一个治愈JavaScript疲劳的学习计划

全栈工程师技能大全

WEB前端性能优化常见方法

一小时内搭建一个全栈Web应用框架

干货:CSS 专业技巧

四步实现React页面过渡动画效果

让你分分钟理解 JavaScript 闭包


小手一抖,资料全有。长按二维码关注京程一灯,阅读更多技术文章和业界动态。

本文分享自微信公众号 - 京程一灯(jingchengyideng),作者:疯狂的技术宅

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2017-09-14

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 苹果将提前大规模量产iPhone 8

    根据市场研究公司BlueFin Research Partners获得的供应链消息,苹果将提前从6月起开始生产iPhone 8,但这并不一定意味着iPhone8...

    疯狂的技术宅
  • 快速优化 Web 性能的10 个手段

    优化网站的性能需要花费大量的时间,并且如果要根据自己的需求进行优化则花费的时间可能更多。

    疯狂的技术宅
  • 如何写好技术简历 —— 实例、模板及工具

    光是做人才拍卖这几个月,我就看了几千份技术简历,觉得很感慨。有太多程序员因为不知道如何表达自己,而埋没了自己的才华,拿着原本可以拿到一半的薪资,在一家默默无闻的...

    疯狂的技术宅
  • 使用FindBugs插件检查Android代码

    用户1205080
  • 高阶自定义View --- 粒子变幻、隧道散列、组合文字

    高阶自定义View --- 粒子变幻、隧道散列、组合文字 作者:林冠宏 / 指尖下的幽灵 腾讯云+社区:https://cloud.tencent.com...

    林冠宏-指尖下的幽灵
  • 笔记:NEC QTP 第五个实例-ClassCol

        strSentence = strSentence & "set obj = New " & className '创建对象   

    超级大猪
  • 3分钟实现iOS语言本地化/国际化(图文详解)前言配置需要国际化的语言(一)应用名称本地化/国际化(二)代码中字符串的本地化(三)多人开发情况下的字符串本地化(四)图片本地化(五)查看/切换本地语言

    VV木公子
  • Java单体应用 - 项目实战(后台) - 03.后台账户管理 - 02.账户列表展示

    原文地址:http://www.work100.net/training/monolithic-project-iot-cloud-admin-manager-...

    光束云
  • bootstrap 查询 展示 分页 常用**

    <!doctype html> <html> <head> <meta charset="utf-8"> <title>联想控股</title> <m...

    用户5760343
  • Bootstrap学习------按钮

          Bootstrap为我们提供了按钮组的样式,博主写了几个简单的例子,以后也许用的到。 效果如下  ? 代码如下 <!DOCTYPE html> <h...

    用户1055830

扫码关注云+社区

领取腾讯云代金券