iPhone X 交互设计官方指南

编译|覃云北京时间 9 月 13 日凌晨,苹果发布了带刘海的 iPhone X,这个屏幕需要 iOS 开发者做新的适配,会后苹果发布了 iPhone X 的适配指南,我们将它翻译出来供大家参考。本文首发于 InfoQ 垂直号移动开发前线,ID:bornmobileiPhone XiPhone X 拥有一个宽大的、高分辨率、圆角的、扩展到边缘的屏幕,提供了以前从未有过的沉浸式、内容丰富的体验。屏幕尺寸在纵向方向上,iPhone X 显示屏...

编译|覃云
北京时间 9 月 13 日凌晨,苹果发布了带刘海的 iPhone X,这个屏幕需要 iOS 开发者做新的适配,会后苹果发布了 iPhone X 的适配指南,我们将它翻译出来供大家参考。

本文首发于 InfoQ 垂直号移动开发前线,ID:bornmobile

iPhone X

iPhone X 拥有一个宽大的、高分辨率、圆角的、扩展到边缘的屏幕,提供了以前从未有过的沉浸式、内容丰富的体验。

iPhone X 交互设计官方指南

屏幕尺寸

在纵向方向上,iPhone X 显示屏的宽度与 iPhone6,iPhone 7 和 iPhone8 的 4.7 英寸的显示屏宽度相同。然而,iPhone X 上的屏幕比 4.7 英寸显示屏高 145pt,导致多出了大约 20%的垂直高度。

iPhone X 交互设计官方指南

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

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

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

布 * 局

在 iPhone X 中设计时,您必须确保布局填满屏幕,并且不会被设备的圆角、传感器外壳或用于访问主屏幕的指示灯遮蔽。

iPhone X 交互设计官方指南

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

iPhone X 交互设计官方指南

iPhone X 交互设计官方指南

对于具有自定义布局的应用程序,支持 iPhone X 也应该比较容易,特别是如果您的应用程序使用 Auto Layout 并遵守安全区域和边距布局指南。

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

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

iPhone X 交互设计官方指南

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

注意状态栏的高度。状态栏在 iPhone X 上比在其他 iPhone 上更高。如果您的应用程序的固定状态栏高度在状态栏的下方,则您必须更新您的应用程序,才能根据用户的设备动态定位内容。请注意,当背景任务(如录音和位置跟踪)处于活动状态时,iPhoneX 上的状态栏不会改变高度。

如果您的应用程序目前隐藏状态栏,请重新考虑 iPhone X 上的决定。iPhone 上的显示高度为 4.7 英寸,iPhone 的显示屏提供了更多的垂直空间内容,状态栏占据了您应用程序本可能赢得的屏幕区域,状态栏还显示了人们发现的有用的信息,只有在交换附加值时候才能被隐藏。

iPhone X 交互设计官方指南

iPhone X 交互设计官方指南

在重复使用现有图稿时,请注意长宽比差异。iPhone X 具有不同于 4.7 英寸 iPhone 的长宽比,因此,全屏 4.7 英寸 iPhone 图形在 iPhone X 上全屏显示时出现裁剪或 letterboxed。同样,全屏 iPhone X 图稿在显示时被裁剪或被添加黑边。 全屏显示在 4.7 英寸 iPhone 上,确保重要的视觉内容保持在两种显示尺寸上。

避免将交互式控件放置在屏幕最底部和角落里。人们使用显示屏底部的滑动手势访问主屏幕和应用程序切换器,这些手势可能会取消您在此区域中实现的自定义手势。屏幕的两个角落很难让人触及。不要遮挡或突出显示关键的显示特性。请勿尝试隐藏设备的圆角、传感器外壳或通过在屏幕顶部和底部放置黑色条来指示主屏幕的指示器。不要使用像括号、边框、形状或教学文字等视觉装饰来让人注意这些区域。

允许自动隐藏虚拟 Home 键,以便轻松访问主屏幕。当启用自动隐藏时,如果用户没有触摸屏幕几秒钟,Home 键将自动隐藏。当用户再次触摸屏幕时,它会重新出现。这种行为应该只能用于被动观看体验,如播放视频或幻灯片。请参阅 适应性和布局。

颜色

iPhone X 上的屏幕支持 P3 色彩空间,可以产生比 sRGB 更丰富,更饱和的颜色。使用多元的颜色来增强视觉体验。 使用宽颜色的照片和视频更加逼真,使用宽色的视觉数据和状态指示器更有影响力。 

iPhone X 交互设计官方指南

手势

iPhone X 上的显示屏使用屏幕边缘手势来访问主屏幕、应用程序切换器、通知中心和控制中心。避免干扰系统范围的屏幕边缘手势。人们依靠这些手势在每个应用程序中工作。在极少数情况下,像游戏这样的沉浸式应用程序可能需要自定义的屏幕边缘手势,优先于系统的手势 - 第一个滑动会调用特定于应用的手势,而第二次滑动则会调用系统手势。这种行为(称为边缘保护)应该谨慎实施,因为它使得用户难以访问系统级的操作。

附加设计注意事项

准确的参考认证方法。iPhone X 支持 Face ID 进行身份验证。 如果您的应用程序与 Apple Pay 或其他系统身份验证功能集成,请勿在 iPhoneX 上引用 Touch ID。同样,请确保您的应用程序在支持 Touch ID 的设备上未引用 Face ID。 请参阅 验证。

在 iPhone X 上不要重复系统提供的键盘功能。即使用自定义键盘,Emoji/Globe 按钮和 Dictation 按钮也自动显示在键盘的下方。您的应用程序不能影响这些按钮,因此避免在键盘中重复这些按钮造成混乱。 请参阅 自定义键盘。

资源

在 资源 中下载 Photoshop 和 Sketch 中的 iPhone X UI 设计模板:

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

iPhone X 交互设计官方指南

原创文章,作者:交互精选,如若转载,请注明出处:https://www.iamue.com/34931/

(0)
交互精选交互精选
上一篇 2018-01-31
下一篇 2018-01-31

相关推荐

  • 用户体验与智能产品设计专业课程研修班

    通知:根据国务院学位委员会(2013)36号文件,原用户体验与智能产品设计在职研究生课程统一更名为“用户体验与智能产品设计在职研修课程”!一培养目标:良好的用户体验是产品成功的关键。在科学技术日益突飞猛进的今天,用户体验与创新设计不仅是国际IT界、设计界和商业界最活跃的热点,甚至成为企业成败的决定因素。随着科技进步和社会发展,人们对产品的需求由满足可用的时代提升到更加重视主观感受和体验。用户在使用产品、服务、系统的前期期望、使用过程中,...

    2018-04-06
  • 【用户体验.春节特辑】 珍惜眼前人(总第271期)

    亦可访问www.koushutianxia.com了解详情编家谱   修家史   留视频建祠堂   亲互动   传万代总第271期2016年初,快要过春节的时候,有一天我没什么事给父亲打电话,但是半天没人接听,我就有疑虑,因为这个点按父亲的习惯应该是坐在书桌前看书或写字的。长时间没接电话,不免让我有些不安。父亲今年83岁了,作息习惯非常规律,身体也非常好。母亲比他小5岁,身体也很健康。我父母育有三个子女,我是小儿子,上面有两个姐姐,都已...

    2018-02-22
  • UED专访 | 张永和、王昀:寻找未来城市共生的答案

    📌编辑、剪辑| P.S📌采访| YHz2017年10月16日,全球天文学界联合发布一项新的重大发现,在1.3亿光年外,双中子星合并产生的引力波带着他的伴侣首次造访地球,这次长途跋涉的旅行为人类探索宇宙打开了新的大门。从爱因斯坦预言引力波到如今的发现,百年间,人类在探索未知空间的同时,也不断改造着我们的生存家园。着眼当下,我们对未来城市有何新的畅想?下文中有张永和、王昀专访视频不要错过!!!未来城市探讨在UED之前的采访中,厦门大学建筑与...

    2018-02-08
  • 一文看懂用户体验五要素

    《用户体验要素》是美国AJAX之父Jesse James Garrett的经典之作,被称为互联网入门必读的书籍,系统介绍了产品用户体验设计的模型。原作第一版完成于2002年,距今已经16年了,本书的最初是针对网页设计写作而成,但在这16年间,从internet到APP再到移动互联网,这个理论都能适用,越来越被称为经典,可见其在当下以及可见的未来,都具有普适性。因此,学习下用户体验的五要素还是很有必要的。用户体验五要素是将产品设计的过程抽...

    2018-03-17
  • 用户体验地图

    利用用户体验地图实现产品的情感化设计;先来看一张图:我们可以将用户体验地图分为三个区域,其中:# ZONE A 提供了对地图的界定;# ZONE B 是视觉化的用户体验过程;# ZONE C 描述了用户的痛点;我们通过拆分各个区来实现一个用户体验地图的构建;A区:1 : 表示一个角色,即体验的用户是谁,或者说你的产品的目标客户群体是什么样类型的人;2 :表示待调研的场景,即在用户什么情景下会使用你的产品;B区:3 :可分段的体验过程,即...

    2018-03-28
  • 交互设计工作坊探秘 | WTM 2018 实录

    重构购票流程的信息架构假期将至,你打开再熟悉不过的订票网页,輸入出发日期、目的地、人数,选择了最合适时段的火车票,预定、付款,整个过程不超过 3 分钟。关闭网页后,你甚至不会记得支付后的画面到底显示了什么,因为这一切流畅的就像呼吸般的自然。4 月 14 日,我们邀请到了春秋航空的高级交互设计师——程琳琳,带领一群对交互设计有热情的伙伴们,以欧洲铁路局的项目为范本,一起重现购票流程的信息架构,让大家了解这流畅的购票交互设计是通过什么方法一...

    2018-04-28
  • 全新的交互体验 | 三星Bixby中文版首发体验视频

    在三星盖乐世 S8 | S8+发布之时,三星还发布了全新语音助手“Bixby”,但中文适配需要时间所以让国内的星粉久等了!为了可以让国内小伙伴快速上手,饼饼特地做了 Bixby中文版体验视频,快速了解 Bixby来这里看就对了!三星Bixby不同于一般的语音助手,在满足一般功能操作的同时还可以进行更深度操作,比如发微博、微信发红包、打开相机自动拍照以及导航等;有关更多Bixby的深度功能,我们期待与大家共同挖掘!点击下方“阅读原文”,了...

    2018-01-30
  • 星环AI部门招聘 | 春风十里,星环有你

    星环简介星环科技是全球领先的大数据与人工智能基础平台供应商,专注于提供企业级容器云计算、大数据和人工智能核心平台的研发和服务,打造大数据和人工智能生态的“中国心”。公司以上海为总部,以北京、广州、多伦多为区域总部,并在南京、郑州、成都设有支持中心,同时在深圳、天津、武汉等地设有办事机构。经过多年自主研发,星环科技建立了四条产品线:一站式大数据平台Transwarp Data Hub(TDH)、基于容器的云操作系统Transwarp Op...

    2018-04-02
  • 用户体验要素

    当前浏览器不支持播放音乐或语音,请在微信或其他浏览器中播放HaloBeyoncé - I Am...Sasha Fierce用户体验为什么如此重要说到我们所使用的那些产品和服务,我们对它们的感情可谓是爱恨交加,它时而令我们备受鼓舞,时而令我们感到泪丧,它使生活变得简单,又使生活变得复杂,它使我们变得疏远,又使我们更加亲近,即使这样,我们还是不得不每天都和不计其数的产品和服务打交道,当产品满足了人们的需要时,它的制造者应该备受赞扬,反正,...

    2018-03-24
  • 用户体验设计专题——前言

    元宵佳节一过,春节假期正式步入尾声,相信大家的工作也已步入正轨。为了感谢大家对我们这个略显晦涩却干货满满的公众号的支持,经过系统梳理,我们归纳总结了9个用户产品设计的基本原理,结合从数千个小流量评估实验中筛选的经典案例予以阐述,在未来两个月的时间里,会逐步分享给大家!废话少叙,步入正题!笼统地说,用户体验(User Experience,简称UX或者UE),是指用户在使用一个产品、系统或者服务时建立起来的纯主观感受。这里我们会关注两个重...

    微信热点 2018-03-02