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

相关推荐

  • 交互设计暑假基础进阶班报名通道开启中

    编辑//花花对于考研,方向大于努力,为了找准跑道,慢慢摸索的路上你听了很多分享会,看过很多大牛干货,但是实践才能见真知,经验谈打不了胜战,没有领路人,考研太容易进入误区。这个暑假我们针对考研,定制了一套造型能力训练考研强化班,其作用在于,用最专业的的指导,在短时间内向学员传授训练手绘提高造型能力的方法。课程介绍01Day 01Introducing Interaction Design交互设计概论认识什么是交互设计,了解交互设计的历史演...

    2018-04-08
  • 【设计竞赛】第二届“衲田杯”等你来挑战!

    📌编辑 | Cassi.W编者按:第二届“衲田杯”可持续设计国际竞赛报名正式启动!中国城市规划设计研究院院长、全国工程勘察设计大师杨保军担任本次竞赛评委会主席。别犹豫啦,招呼你和你的小伙伴,快来报名参赛吧!不知大家是否记得宿迁那片迷人的多彩衲田花海?又是否还记得2017年这些在衲田花海绽放的一大波创意?▼▼▼点击图片了解更多 ↑↑↑没错!就是2017年国际设计竞赛的一匹黑马:“衲田杯”可持续设计国际竞赛第一届“衲田杯”可持续设计国际竞赛...

    2018-03-22
  • 读书会第二期:《用户体验要素》(下)

    接上文···框架层1界面设计界面设计要做的全部事情就是选择正确的界面元素。界面元素的种类繁多,书里列举了复选框、单选框、文本框、下拉菜单、多选菜单、按钮等一系列网站设计中常用的控件,在2001年的时候这些控件就已经出现了,至今仍在大量使用,但是作者写这本书的时候并没有预料到目前的互联网行业有多么繁荣,所以近些年出现的很多新控件都没在书里。目前ios平台和安卓平台都有完善的设计规范可供参考,网上也可以找到海量的控件模板,只要耐心积累,多观...

    2018-04-13
  • 交互设计背后隐藏的万亿级医美市场在哪?

    你一定过很多书,走过很多的路,可书山瀚海,究竟那一句改变了你?当前浏览器不支持播放音乐或语音,请在微信或其他浏览器中播放我期待张雨生 - 未来感谢你的阅读,百无一用是书生,十有九八堪白眼。什么是互联网交互:简单的是指互联网与手指或者语音之间的直接联系,2010年前简单的视频影音播放器还没有意识到用户和用户之间交互的强大之处,所以很多播放系统后来才加了弹幕功能,交互设计强调独立个体我与众多个体的交流交叉联系,微信微博是目前市场上最大的交互...

    微信热点 2018-02-26
  • 学交互设计,怎样选择到适合自己的学校?

    欢迎关注弗斯特国际艺术教育出国留学选择学校,哪些会成为你的考虑因素?学校名气超大,排名都是top级?明星校友超多,都是艺术大佬?学校位置超好,正居于市中心?校园环境超美,好似旅游学习?不得不说这些会成为许多学生和家长,在选择目标院校时经常考虑的一些因素。排名、明星校友、地理位置,可以作为参考依据。BUT!这些不能是最终的决定因素,最重要的还是自己对专业的最终追求。交 互 设 计 详 解交互设计又称互动设计,英文名称为Interactio...

    2018-04-03
  • 关注用户体验的酒店设计永不过时

    目前110000+人已加入品筑设计位于德国巴登-巴登(Baden-Baden)的Roomers酒店,建筑的外观采用简洁的黑白灰格调,错落有致的立面构成,干净利落。建筑的外观采用简洁的黑白灰格调,干净利落、错落有致的立面构成。酒店共设有130间客房及套房,另外还有餐厅与酒吧、屋顶酒吧、500m²的水疗中心、户外花园、无边泳池等等。在精品酒店的设计中,越来越关注客人的亲身体验感,其中有几个重要的关键点:家的温馨感、艺术馆般的艺术气息、现代极...

    2018-04-10
  • 用交互体验方式感受人类智慧结晶

    2017年9月26日,中国科技馆“华夏之光”展厅经过为时半年的更新改造后,将面向公众进行试运行,并于10月1日正式重新开放。“华夏之光”展厅位于中国科技馆主展厅一层,设有“中国古代的技术创新”、“中国古代的科学探索”、“华夏科技与世界文明的交流”三大主题分区,围绕不同主题,讲述中华民族在生存发展过程中不断创造与发明、探索与发现、交流与融合的科技故事。此次封厅改造是在原有展览的基础上进行的局部性升级换代。“华夏之光”展厅维持原有展览框架,...

    2018-01-30
  • 智能窗帘:场景化智能应用 让用户体验“懒”生活

    科技总是带给我们惊喜。智能家居不再是一个研发层面的概念,在日常生活中已经越来越普及。智能窗帘是智能家居系统中常常被忽视,却又见微知著的家装部分。智能窗帘无需手动,一键掌控家居空间的透光度,智能防紫外线、隔音隔热和保温环保,给用户细致的关怀。智能窗帘的场景化智能应用,让用户体验懒惰带来的享受。冬天清晨,想打开窗帘让阳光温暖房间,却又懒得起身离开暖被窝,使用智能窗帘,应时自动打开,敞开度适宜,光线强弱刚刚好,惬意的在阳光中醒来。炎热夏日,离...

    2018-02-25
  • 2018年产品经理交互设计交流分享大会

    活动背景一个优秀的产品经理不仅能引导产品的发展,而且还能引导公司的发展。同时,他还是一名优秀的执行者、项目管理和团队管理者,具备敏锐的洞察力,能在用户心理和产品细节间灵活游走,打磨出令人惊叹的产品。所以,在成为CEO之前,先成为一名出色的产品经理吧。然而当我们投入到实际工作中时,总是一次又_次遇到阻碍:和运营、枝术部门沟通不畅,项目推进难。公司要求不高,任务很轻松就能完成,想要挑战大公司,却深知自己还欠火候。看过许多千货,听过许多直播,...

    2018-04-17
  • 交互设计中的视觉基础-格式塔理论

    爱UI小课堂今天从交互设计开始Interaction design交互设计师是一个理性与感性相结合的职业,既要有严谨的逻辑思维能力还要有良好的审美能力,所要具备的知识涉及方方面面,格式塔理论作为视觉设计的基础知识也是交互设计师必备知识之一。20世纪初奥地利及德国心理学家创立了一套视觉感知的格式塔理论,格式塔理论是我们在心不在焉与没有引入反思的现象学状态时的知觉的最终结果,强调经验和行为的整体性。这个理论为用户界面设计准则提供了相关的基础...

    2018-04-26