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

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

提交需求

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

0/20
0/200

设计大赛

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

提交完成
感谢您对UI中国的支持和信赖!
iPhone X官方设计指南
0.0°
2017-09-14 自译外文 教程 原作者: Apple 举报 3367 9 8 0

iPhone X设计指南翻译。

iPhone X拥有一块无边框的高分辨率圆角大屏,可以提供前所未有的沉浸式内容体验。

Image title


屏幕尺寸

纵向握持时,iPhone X的屏幕宽度和4.7英寸的iPhone 6,iPhone7还有iPhone 8一致。但在高度上,iPhone X比4.7英寸的屏幕多出了145个像素,这使iPhone X的屏幕可以多显示20%的内容。

Image title


App中使用的所有图像都应该是高分辨率的。iPhone X的高分辨率的屏幕需要适配@3x的图像,对于符号和扁平的、矢量的图像,请使用不受分辨率影响的PDF格式。对于栅格化图像,请提供@3x和@2x两个版本的图像。详细信息,请参考图像尺寸和分辨率以及自定义图标。


页面布局

设计iPhone X的界面时,你需要确保布局充满整个屏幕,同时不被屏幕的圆角、传感器区域(额头)、以及底部的主页指示条遮挡。

Image title


大多数App使用系统提供的标准UI元素,例如导航栏,Table,Collection等组件。它们会自动适应iPhone X的屏幕。背景元素会扩展到屏幕的边缘,UI元素则会被放置到合适的位置。

Image title


对于使用自定义布局的App来说,适应iPhone X的屏幕也并不困难,特别是使用了自动布局,并且遵守了屏幕边距安全布局指南。


在iPhone X上预览App。你可以使用模拟器预览App,来检查是否存在遮挡和其他布局问题。需要注意的是,一些特定的功能,例如广色域图像等,最好在实际设备上预览。


提供全屏体验。确保背景延伸到屏幕边缘,纵向滚动的布局元素,例如tables和collections,则一直向下扩展到屏幕底部。

Image title


将必须的内容内容放置在安全区域内以避免被遮挡。一般来说,内容应该居中放置,使其在任何握持方向上都观感良好,不会被屏幕的圆角、传感器区域以及主页指示条遮挡。尽量使用系统提供的标准UI元素和自动布局来构建界面。所有的App都应该遵循UIKit定义的安全区域和布局边距,这可以保证在跨设备和场景的通用性。同时,安全区域也可以保证内容不被状态栏、导航栏、工具栏以及Tab栏遮挡。


注意状态栏的高度。iPhone X的状态栏比其他iPhone更高。如果你的App内容定位方式是基于固定的状态栏高度,那么你需要升级App,从而能根据不同设备动态调整内容位置。注意:iPhone X的状态栏高度固定,不会因为运行录音和定位这样的后台任务而改变。


重新考虑在iPhone X上是否要隐藏状态栏。相比较4.7英寸的iPhone们,iPhone X的屏幕提供了更多的纵向空间,可以容纳更多内容。你的App可能并不能有效利用状态栏占据的空间。状态栏其实提供了一些用户需要的信息,因此如果没有必要,不要隐藏状态栏。


调整现有图像的尺寸时需注意长宽比。iPhone X的屏幕比例不同于4.7英寸的iPhone们。所以,在4.7英寸的iPhone上可以全屏显示的图像,在iPhone X上或者被截断一部分,或者上下两端留出部分空白。类似的,在iPhone X上全屏显示的图像,显示在4.7英寸的iPhone屏幕上时,或者会被截断一部分,或者左右两端留出部分空白。你需要确保的是,在两种尺寸的屏幕上,重要的视觉内容都能完美呈现。

Image title


不要在极为接近屏幕底部和角落的位置上放置可交互控件。用户会在屏幕底部边缘使用滑动手势来返回主页或切换App,这些系统手势可能会和你的自定义手势冲突。至于屏幕角落,则是用户难以舒服触摸到的区域。


不要遮盖重要功能区域,也不要故意强化。不要在屏幕上下两端使用黑色来隐藏屏幕的圆角,传感器区域以及底部的主页指示条。同样,也不要使用图案、文字等元素来强化这些区域。


慎重考虑是否允许主页指示条自动隐藏。当自动隐藏启用时,如果用户几秒内不触碰屏幕,主页指示条就会自动隐藏。当用户再次触摸屏幕时则会自动出现。自动隐藏功能仅适用于观看视频,自动播放照片这样的不需要用户主动操作的场景。


更多请参考适应性和布局



颜色

iPhone X的屏幕支持P3色彩空间,对比sRGB色彩空间,能提供更丰富、饱和的色彩。

Image title


使用广色域来增强视觉体验。使用广色域的图像和视频更加鲜活生动。使用广色域的数据可视化和状态指示器也更有冲击力。



手势

iPhone X通过屏幕边缘手势来返回主页,切换App,访问通知中心和控制中心。

避免使用干扰系统层面的屏幕边缘手势的手势。用户在每一个App中都依赖这些手势。在一些特殊场景中,例如沉浸式的游戏中,可能需要自定义屏幕边缘手势来取代系统手势——第一次滑动激活自定义手势,第二次滑动激活系统手势(称作边缘保护)。但是,这种方式应尽可能少用,因为这让用户不易执行系统级的操作。更多内容请参考手势



资源

点击下载iOS11的UI模板。

更新:2017-09-14

收藏

9人已收藏

lvyoungyoung

The best or nothing.

  • 13

    作品

  • 480

    粉丝

  • 12

    关注

  • Principle速成第十一课——拖动交互
  • Principle速成第十课——视差效果
  • Principle速成第九课——简单启动页
  • principle速成第八课——跟随拖动的小机器人
相关标签
iPhoneXdesignguideline

    猜你喜欢

      2017-09-14 自译外文 教程 原作者: Apple 举报 3367 9 8 0

      iPhone X官方设计指南

      0.0°

      你确定要举报iPhone X官方设计指南

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

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

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      8
      9
      0

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

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

      登录

      手机号

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

      登录
      第三方账号登录