恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
iPhone X 设计适配指南(含 iOS 11 新特性)
0.0°
2017-09-15 自译外文 经验/观点 原作者: Apple 举报 7638 123 39 0

饿了么UED 对 iPhone X 的相关内容进行了翻译,希望设计师朋友们可以根据最新的指南规范快速适配 iPhone X 和 iOS 11 。

Image title


9 月 13 日凌晨发布会之后,Apple 更新了 iOS 的 Human Interface Guidelines,在 Overview 部分新增了「iPhone X」和「What's New in iOS 11」两个内容。


饿了么UED 的小伙伴也加班加点进行了翻译,希望设计师朋友们可以根据最新的指南规范快速适配 iPhone X 和 iOS 11 。


iPhone X 设计适配指南


原文链接:https://developer.apple.com/ios/human-interface-guidelines/overview/iphone-x/
翻译:王永全


iPhone X 采用了一款高分辨率圆角全面屏,这给用户带来了前所未有的沉浸式阅读体验。

Image title


屏幕尺寸

iPhone X 的屏幕宽度同 iPhone 6、iPhone 6s、iPhone 7 和 iPhone 8 的 4.7 英寸屏幕宽度相同,即 375pt。垂直高度上增加了 145pt,这意味着增加了 20% 的可视空间。

Image title


竖屏规格:1125px × 2436px (375pt × 812pt @3x)

横屏规格:2436px × 1125px (812pt × 375pt @3x)


请为你的应用提供高分辨率的设计素材。iPhone X 有非常高的分辨率,请提供 @3x 的设计素材。对于图形类或其他扁平化图像素材,最好使用一倍尺寸下的 PDF 格式。更多信息请查看图像尺寸及分辨率自定义图标


布局

在你为 iPhone X 设计界面时,请必须保证所有设计内容不能被屏幕圆角、上方传感器区域、下方返回主页指示器所遮挡。

Image title

大部分应用都使用了系统提供的标准组件,如导航栏、表单等…这些系统部件会自动适配 iPhone X 的屏幕,部件的背景将会向上拉伸至屏幕边缘,状态栏中的元素将会按照规则重新摆放。

Image title


对于使用自定义布局的应用,如果想要适配 iPhone X 也比较容易,特别是当应用使用了响应式布局(Auto Layout)时,请参考下方提供的安全区和边距布局规范。


在 iPhone X 上预览你的应用。你可以 Simulator(Xcode 附属应用 )来预览你的应用。请注意检查应用元素是否被屏幕切割、布局是否正常等。对于一些新特性,比如广色域显示,使用实体设备才能起到最好的预览效果。


提供全屏使用体验。 确保背景能够延伸到屏幕边缘,垂直滚动布局,如表单或集合页需一直延续至屏幕底部。

Image title


插入必要内容以防止被裁切。一般来说,内容应该是居中对称的,这样在任何方向上都能获得比较好的观感,也不会被屏幕圆角、传感器区域和主屏幕支持器所影响。为了保证最佳效果,请使用系统提供的标准控件和响应式布局来构建您的页面。所有的应用都应该遵循 UIKit 定义的安全区域和布局边距,这些区域可以根据设备的上下文进行适当的填充。同时,安全区可以防止你的内容覆盖状态栏、导航栏、工具栏和标签栏。


注意状态栏的高度。iPhone X 的状态栏比其他 iPhone 上要更高一些。如果您的应用元素尺寸是根据状态栏高度来判断,或是元素位置处于状态栏下方,则必须更新您的应用,请跟据用户的设备来动态定位内容。请注意,当后台任务(如录音和位置跟踪)处于活动状态时,iPhone X上的状态栏不会改变高度。


如果您的应用目前是隐藏状态栏,请根据 iPhone X 屏幕特点重新考虑。iPhone X 的屏幕比 4.7 英寸 iPhone 的屏幕高很多,省去状态栏占据的内容区域可能并不会得到很好的利用。状态栏还展示了人们觉得有用的一些信息,请思考当你将它隐藏时换来的价值要高于显示。

Image title

Image title


在重复使用现有图稿时,请注意长宽比差异。iPhone X 与常规 iPhone 的屏幕长宽比不同,因此,全屏的 4.7 寸屏图像在 iPhone X 上会出现裁切或适配宽度显示。同理 iPhone X 的图片在 4.7 寸屏上也会出现此情况。所以,重要的视觉稿请根据设备型号做相应的调整。


避免将可交互控件放在屏幕底部和角落。屏幕底部可以通过手势进入主屏幕和多任务页面,这些手势可能会覆盖您在此区域中实现的自定义手势。屏幕角落可能无法让人们舒适地触达。


不要遮盖或引导关注屏幕新特性的关键位置。不要使用放置黑色栏在屏幕上下区域等方式来试图隐藏设备的圆角、传感器区域和主页指示器,也不要使用类似括号、轮廓、形状和教学文案等视觉元素来引导用户关注这些区域。


允许自动隐藏回到主屏幕指示器。当自动隐藏开启时,用户几秒钟不触碰屏幕指示器便会渐隐消失。用户触碰屏幕后指示器再次显示。此特性只能用于沉浸式预览样式,比如视频播放或幻灯片样式。


更多信息请查看适应性和布局



颜色


iPhone X 屏幕支持 P3 色彩空间,这意味着它将可以显示更多的色彩,比 sRGB 要更加艳丽。


使用广色域来提高视觉体验。使用了广色域的图片和视频会更加生动,使用广色域的数据图表和状态指示器会更加有冲击力。更多信息请查看色彩管理

Image title



手势


iPhone X 使用屏幕边缘手势来访问主屏幕、应用切换、通知中心和控制用心。


避免干扰到系统级别的屏幕边缘手势。人们使用这些手势来使用所有应用,在极少数情况下,像游戏这样的沉浸式应用程序可能需要自定义的屏幕边缘手势。优先于系统的手势:第一次滑动会调用自定义手势,而第二次滑动则会调用系统手势。这种自定义行为(称为边缘保护)应该谨慎使用,因为它使得用户难以访问系统级的操作。更多信息请查看手势



其他设计注意事项


检查认证方法的正确性。 iPhone X 支持 Face ID 进行身份验证。如果您的应用程序与 Apple Pay 或其他系统身份验证功能集成,请勿在 iPhone X 上引用 Touch ID。同样,请不要在支持 Touch ID 的设备上引用Face ID。更多信息请查看验证


不要重复定义系统提供的键盘功能。 在 iPhone X 上,Emoji、语言切换和语音识别按钮会自动显示在键盘的下方(即使使用自定义键盘)。 您的应用程序不能影响这些按钮,为了避免造成困扰,请不要在键盘中重复定义这些按钮。更多信息请查看自定义键盘



资源

资源目录下载 Photoshop、Sketch 模板文件。



iOS 11 新特性


原文链接:https://developer.apple.com/ios/human-interface-guidelines/overview/whats-new/
翻译:Fishpaw


有了 iOS 11,你能够创作出比以往任何时候都要强大、对用户友好的应用。

Image title


AR 增强现实:利用 AR 增强现实,可无缝融合虚拟对象与真实世界,提供浸入感十足的愉悦体验。


更重的导航:在浏览和搜索时,使用含更大字号、更粗字重标题的导航栏,页面结构会更清晰,场景感知会更强烈。


更简洁的图标:填充图形和厚重的笔触使得图标更小,还能增强对比度。参见自定义图标系统图标


拖放操作:仅用一根手指,就能将图片、文字等内容从一个地方移到另一个地方。在 iPad 上,甚至能在 App 间拖放。


Face ID 和 Touch ID:可为应用集成系统级的生物识别安全特性,以提供人们信任的、安全且熟悉的身份验证。


NFC 近场通信:在支持的设备上运行的 App 能无线读取实物上的电子标签的信息。


安全区布局指南:遵循布局指南,确保正确地在安全区内插入内容,防止内容与状态栏、导航栏、工具栏或标签栏重叠。


排版发生变化:更大的字号和更粗的字重有助于整个系统的可读性。另外,考虑到对辅助功能有需求的用户,除了标准的动态字号,系统也提供了一系列更大的字号。



延伸阅读


致谢

本文作者为王永全和 Fishpaw,也感谢 icojump、张鹏、梓非徐三位的帮助。


版权说明

本文翻译自 Apple 官网,如有遗漏或错误还请指正;如需转载需注明出处。


更新:2017-09-15

收藏

123人已收藏

饿了么UED

打造中国最好的外卖体验,dribbble.com/eleme

  • 9

    作品

  • 1102

    粉丝

  • 3

    关注

  • iOS 11 最全面的设计通讯
  • 为什么设计师需要理解产品业务?——结构化思维的应用
  • 结束与回顾:Weekly 的这一年
  • 设计评审指南

    猜你喜欢

      2017-09-15 自译外文 经验/观点 原作者: Apple 举报 7638 123 39 0

      iPhone X 设计适配指南(含 iOS 11 新特性)

      0.0°

      你确定要举报iPhone X 设计适配指南(含 iOS 11 新特性)

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2017年09月14日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      39
      123
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录