iOS11人机交互指南-概览-01 iPhone X

 iPhone X具有更大、更高大分辨率、圆形的、边缘到边缘的显示器,它提供了前所未有的沉浸式、内容丰富的体验。

屏幕尺寸

在人群定位(人物画像苹果官网用的是Portrait)方面,iPhone X显示屏的宽度与iPhone 6、iPhone 7和iPhone 8 4.7显示器的宽度相匹配。但是iPhone X显示屏的高度是145pt,比4.7"显示屏高,大约能够显示垂直空间内额外20%的内容

应用程序的所有艺术品都能呈现高分辨率的图像。iPhone X的显示器是@3x高分辨率,符号等的平面、矢量图形,最好采用独立分辨率的PDF格式。对于位图,需要同时提供@2x和@3x的切图文件。

布局

当为iPhone X设计时,必须确保布局填满屏幕,而不被设备的圆角、传感器外壳或访问主屏幕的指示器所掩盖。

大多数使用标准的、系统提供的UI元素(如导航栏、表格和集合)的应用程序可以自动适应设备的新形式。背景材料扩展到显示的边缘,并且适当地插入和定位UI元素。

对于自定义布局的应用程序,支持iPhone X也应该相对容易,尤其是如果应用程序使用自动布局并遵循安全区域和边缘布局指南的话。

在iPhone上预览您的应用程序。你可以使用模拟器(包括Xcode)预览您的应用程序和检查是否存在剪切和其他布局问题。一些功能,如颜色比较多的图像,最好能在实机上预览。

提供全屏体验。确保背景延伸到显示器的边缘,而垂直滚动的布局,如标签和其他工具栏一直位于底部。

插入防止裁剪的基本内容。一般来说,内容应该居中和对称地插入,确保它在任何方向看起来都很好,而且不会被角落或设备的传感器外壳剪切,或者被用来访问主屏幕的指示器遮蔽。为了达到最佳效果,使用标准的、系统提供的控件元素和自动布局来设计界面。所有的应用程序布局应遵循由UIKit间隔出来的安全区域,保证适当的嵌入基于设备上下文。安全区也可以防止内容改变状态栏,导航栏,工具栏和标签栏的位置。

注意状态栏的高度。iPhone上的状态栏比其他iPhone高。如果你的应用程序假定一个固定状态栏高度来定位内容低于状态栏,你必须更新你的应用程序布局动态地基于用户的设备定位内容。注意,当像录音和位置跟踪这样的后台任务处于活动状态时,iPhone X上的状态栏不会改变高度。

如果你的应用程序目前隐藏状态栏,在Phone X请重新考虑这个决定。iPhoneX 上的显示高度比4.7个“iPhone”显示更多的垂直空间,而状态栏占据了应用程序可能无法充分利用的屏幕区域。状态栏告知用户最有用的信息。只有为了某些特殊目的才隐藏状态栏。

注意重用现有界面的长宽比差异。iPhone 4.7“X和iPhone的纵横比不同。所以,全屏幕4.7“iPhone界面出现裁剪或文本框全屏幕显示。全屏幕的iPhone X界面出现在4.7“iPhone会被剪切。确保在两个显示大小上都保留重要的视觉内容。

避免在屏幕的最底部和角落放置交互控件。人们在显示器的下边缘使用滑动手势来访问主屏幕和应用程序切换器,这些手势可能会取消在这个区域中实现的自定义手势。屏幕的角落可能是难以到达的舒适区域。

不要掩盖或启用重要功能时需要特别注意。不要试图通过在屏幕顶部和底部放置黑条来隐藏设备的圆角、传感器外壳或访问主屏幕的指示器。不要用视觉装饰如支架、挡板,形状,或说明文字唤起人们特别注意这些方面。

允许自动隐藏指示器以方便地访问主屏幕。当启用自动隐藏时,如果用户没有触摸屏幕几秒钟,指示器就会淡出。它出现在用户触摸屏幕时再次。这种行为应该启用只有被动的观看体验,比如观看视频或照片幻灯片。

颜色

在iPhone X支持P3彩色空间的显示,它可以产生比sRGB更丰富、更饱和的色彩。

使用多种颜色来增强视觉体验。照片和视频,使用广泛的色彩更逼真,使用多种颜色的视觉数据和状态的指示器更有效。


手势

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

避免干扰系统屏幕边缘手势。人们依靠这些手势完成在每个应用程序的工作。在极少数情况下,像游戏这样的沉浸式应用程序可能需要自定义屏幕边缘手势,这些手势优先于系统的手势,第一次单击调用特定于应用程序的手势,第二次单击则调用系统手势。这种行为(称为边缘保护)应该谨慎地执行,因为它使人们难以访问系统级操作。

其他设计思考

关于验证方法准确。iPhone X支持人脸身份认证。如果你的应用与苹果支付或其他系统认证功能相集成,不要在iPhone X上引用Touch ID,同样要确保你的应用程序不在支持Touch ID的设备上引用人脸ID。

不要重复系统提供键盘功能。在iPhone X上,即使使用自定义键盘,表情/世界按钮和听写按钮自动出现在键盘上。你的应用程序不能影响这些按钮,所以不要在键盘上重复它们,以免造成混乱。

资源

下载iPhone X的UI设计模板资源

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,001评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,210评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,874评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,001评论 1 291
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,022评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,005评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,929评论 3 416
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,742评论 0 271
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,193评论 1 309
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,427评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,583评论 1 346
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,305评论 5 342
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,911评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,564评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,731评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,581评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,478评论 2 352

推荐阅读更多精彩内容