为iPhone X设计-全面屏尺寸及 iOS 11设计指南

iPhone X,一款屏幕更高且几乎没有边框的新一代iPhone。也带来了全面屏时代的到来,iOS11伴随着iPhone X的诞生而产生新的适配规则。5.8英寸的OLED屏幕比iPhone 8 Plus的5.5英寸屏幕还要大,对于设计师而言,这意味着更自由的设计空间。

Phone X ,一款屏幕更高且几乎没有边框的新一代 iPhone iOS11 伴随着 iPhone X 的诞生而产生新的适配规则。 5.8 英寸的 OLED 屏幕比 iPhone 8 Plus 5.5 英寸屏幕还要大,但机身尺寸与 iPhone 8 相同。对于设计师而言,这意味着更自由的设计空间。

更高的屏幕

正如下图所示,高出来的 145 pt 可能意味着增加了一行内容,或者增加了一个老哥俱乐部曾经认为太过狭窄的菜单。尽管分辨率不一样,但是这部分多出来的空间同样适用于 iPhone 8 and 8 Plus ,因为它们拥有相同的比例。

更多的内容空间

如果与最初的 iphone 相比, iPhone X 增加了 332 pt 的高度,这相当于 7 个导航条的高度。未来在新款 iPhone 上呈现的内容将会看起来更棒,同时汉堡包菜单也被弱化。

当把不同时代的两款 iPhone 放在一起时,老哥俱乐部可以注意到内容的空间几乎翻了一番。普遍来说,这意味着目前的应用程序需要包含这些栏目:状态栏、导航栏、选项卡和用于访问主屏幕的指示器( home indicator )。省去这些栏目不仅会使用户体验变差,而且还会让你的应用程序与 iOS 的原生程序不一致。

齐刘海

也许新设计中最有争议的前 10% 齐刘海 。原深感摄像头系统,也被成为凹槽(国内形象的称为 齐刘海 ),它作为一个分割元素使得 iPhone X 的屏幕真正实现了 从屏幕边缘到手机边缘 。从技术上来看,由于集成了 Face ID 、摄像头和听筒,去掉凹槽是不可能的,从设计上来看,这是苹果近年来最大的妥协之一。但是,看看其他手机制造商是如何解决这个问题的时候,不管是 高额头 还是 低下巴 ,抑或是两者的结合,很难说他们没有妥协。

苹果建议不要使用黑色状态栏来隐藏这个凹槽。他们的理由是,尽管这个地方很令人头疼,但是其仍然为状态栏和额外的内容提供了宝贵的空间。它使得上下文内容产生连贯性,同时给人一种屏幕更大的感觉。诸如壁纸、地图和色彩等背景元素在被圆角和凹槽稍微修剪时不会受到太大影响。通过隐藏该空间,你的 app 将会感觉更小,同时与其它应用程序不一致。

大标题

iOS 11 中,屏幕的标题大小一般为 34pt (点),并且是粗黑字体。有趣的是,当你向上滑动屏幕时,标题会自动转换到导航栏的位置上,把宝贵的空间还给老哥俱乐部。在横屏的状态下只留给导航栏很小的一部分区域,这就给设计师们提出了一个非常明确的信息,首先,你应该更合理的利用这些额外的空间;其次,你需要使你的设计具有自动适配性,因为很可能在竖屏的时候拥有的额外空间,横屏的模式下这些空间就不存在了。

视频播放器

更大的状态栏

状态栏的高度相较之前增加了一倍多,从 20pt 增加到 44pt 。现在通知栏可以通过左状态栏下滑来唤醒,而控制中心则是由右导航栏的下滑操作来唤醒的。当快速完成操作后,用户只需要轻扫一下屏幕的底部边缘就能轻松返回到主屏幕。但是,如果想要看到导航栏,就必须中断轻扫这个动作。

视频播放器

安全区域布局指南

当老哥俱乐部在为 iPhone X 进行设计时,老哥俱乐部应当时刻注意并且尽量去避免设计的内容被圆角和凹槽裁剪掉的情况。怎样才能更好的避免这样的情况呢?安全区域的使用可以很好的帮助你,确保内容不被裁剪掉。一般来说,背景的使用上可以不受安全区域的限制,而文本,图像和按钮这些都需要在安全区域内进行设计。

横屏状态下的 iPhone X

在横屏的模式中,状态栏是隐藏的,目的是为了将内容的空间最大化。 iOS 11 的导航栏减小到了 32pt ,标签栏是 30pt ,虚拟 home 键的尺寸为 23pt 。虽然大多数情况下用户不会在 iPhone X 上切换到横向模式,但还会有一些比较重要的使用场景会用到横屏的模式。例如,老哥俱乐部在翻看横向的照片,全屏视频或者阅读文字较大的文章时,都会采用横屏的模式。当用户完成使用后,会直觉性的切换回竖屏模式,那么,老哥俱乐部就必须要保证切换后的内容也可以正常展示给用户,特别是当设备在横屏时停留在一个比较舒适的位置的时候。

如果你的 app 已经可以适配到 iPad 上了,那为什么不能也很好的在 iPhone 上进行横屏适配呢?大多数的 app 都已经开始采用响应式布局的设计理念,从而以最小的成本来获得最大的收益。

iPhon X 横屏状态下的网页

如果你是一名产品设计师,你可能会在网页上进行工作。在横屏的 iPhone X 上,你的网页在左右两侧会存在一个较大的空白区域。这是因为安全区自动切割超出安全区域的内容部分所带来的糟糕结果。为了避免这种尴尬,苹果出台了一套规范以此指导你的网页在横屏时适配 iPhone X 。这样基本可以使网页在横屏状态横向拓展背景以填充屏幕的同时,确保安全区域内网页内容的完整显示。

圆角

内容的剪辑也会发生在 iPhoneX 屏幕的四角。除非你隐藏了状态栏及底部的触碰区,否则不会面对这样的问题,因为他们覆盖了屏幕的四角。但是,对于大多数全屏使用的应用程序,比如相机确保四角中有足够的空白是非常重要的。建议你的按钮半径设置为 16pt ,以完美的遵循圆角的规则。

iOS 模拟器上预览你的应用程序

发布之后 iPhone X 可能会迅速售空,因此,老哥俱乐部大多数人无法立即使用。 手头没有设备,唯一的方法就是通过 iOS 模拟器。 您可以通过安装 Xcode 来预览您的应用程序和网站。

汉堡菜单之死

十年来,设计师们争先恐后地在原先的 iPhone 小屏幕上适配着内容,有很多设计师因为标签栏占用了太多的屏幕空间而彻底省去它。还有一些人的做法相对有创意一些,他们会放一个能从左面滑出的按钮来替代。这也就是最初的汉堡菜单。虽然起初很新鲜有趣,但最终却发现它是可用性的一个噩梦。因为在使用时,用户需要更多的点击操作。这也就意味着二级标签会更少使用。而且人们常常会忘记还隐藏了更多的内容。

随着屏幕的变大,单手操作也开始受到了影响。苹果公司甚至设计了双击 home 键就可以下滑整个用户界面的手势操作,这样以便手指可以够到导航栏。而汉堡菜单通常又是放在屏幕的左上角,用户就需要一个额外的双击才能到达这个菜单了。这也就导致了用户更难对这个菜单进行操作。随着屏幕的加长,设计师也不再需要那么纠结内容占了多少屏幕空间了。所以现在设计时都会选择用标签栏来取代汉堡菜单。 iPhone X 更是如此,也就是说,如果你的应用程序有超过两部分的内容,那老哥俱乐部就强烈建议你使用标签栏,而且 iOS11 的标签栏占用的屏幕空间也更小。

汉堡菜单在网页设计上是很常见的,也可以说是移动网页在手机上的设计体验比不上基于手机的设计体验更好的原因之一。虽然目前一些适配手机的网页采用了原生的控件,这对于网页设计来说是一个很棒的方法,但是,在 iOS 系统中尤其是 iPhone X 的设计中,你依然应该使用标签栏来代替汉堡菜单。

视频播放器
自适应布局和多任务处理

随着越来越多的屏幕分辨率需要适配,让你的页面布局具有适配性越加重要。使用像 Sketch Constraints Xcode 的Auto Layout这样的工具,你需要在设计的时候要考虑到屏幕尺寸是灵活的,在需要的时候可以展开多余的菜单。

STACK VIEWS

Xcode 里,你还会发现Stack Views , 这是一个神奇的工具用来帮助你的布局实现更灵活的变化。一些元素和组可以动态的堆积在一起,你需要做的仅仅是编辑是元素间的间距以及框内的内容填充。然后你可以使用 Auto Layout 来完成剩下的工作。苹果的建议是先使用 Stack Views 再使用 Auto Layout

点( pt )和像素( px

开发人员使用点值,因此了解点值与像素的区别非常重要。当 iPhone 第一次推出时,这两个单位是一样的: 1pt 等于 1px 。然后,当视网膜的屏幕出现时, 1pt 变成了 2px 。所以,把 pt 看做首代 iPhone 中一个物理区域的标准大小, px 就是存在于这个物理区域内的实际像素的密度( iPhone 4 5 6 7 8 = @ 2x iPhone 8 Plus iPhone X = @ 3x )。

iPhone 的解决方案

iPhone 主要有 5 个分辨率: 320×480 pt iPhone 4 ), 320×568 pt iPhone 5 ), 375×667 pt iPhone 8 ), 414×736 pt iPhone 8 Plus )和 375×812 pt iPhone X )。布局不缩放,但可基于屏幕的分辨率进行扩展。例如,导航栏只调整宽度,但保持相同的高度,里面的元素大小也保持不变。

iPhone 8 Plus 是唯一在横向模式下更像 iPad iPhone 。换句话说,此时可能会出现一个左侧导航来替代标签栏。

原文来自: Design+Code

原文地址: https://designcode.io/ios11-iphone-x


关注公众号,获取更多H5设计、响应式网页设计资讯

10