Bf2d6c19c25f7d6b002bf6a1089692e0
iPhone 暨 iPhone X 设计指南

原文 Designing for iPhone X


iOS 11 标志了 iPhone X 的诞生,一款加长的几乎没有边框的 iPhone。5.8 英寸的 OLED 屏幕比 iPhone 8 Plus 的 5.5 英寸屏幕还要大,但机身尺寸却和 iPhone 8 差不多。对于设计师来说则意味着更加自由的画布。

更长的屏幕

多出来的 145pt 高度可以增加一行内容,或是增加一个之前放不下的菜单。这些多出来的空间对 iPhone 8 和 iPhone 8 Plus 也是适用的,因为比例还和原来一样,只是分辨率不同罢了。

内容有了更多空间

iPhone X 比初代 iPhone 长 332pt,相当于 7 个导航栏的高度。这样更有利于显示内容,同时对汉堡菜单的依赖性也越来越低。

如果把 iPhone X 和初代 iPhone 并排放在一起,会发现用于显示内容的空间几乎长了一倍。所以现代 app 基本都需要所有“栏”:状态栏、导航栏、tab bar 和底部小白条(home indicator)。如果没有这些“栏”不仅会导致糟糕的用户体验,还会导致与自带 app 体验不一致。

刘海

全新设计的 iPhone X 最具争议的地方可能就是顶部那 10% 了。传感器之家“刘海”会分散用户的注意力,但没有它 iPhone X 也不会成为真正意义上的无边框。
从技术上来说,目前是不可能去掉刘海的,因为它里面容纳了 Face ID、摄像头和扬声器。但从设计上来说,这是苹果最近几年最大的妥协之一。不过再看看其他手机厂商的处理方式,都是大额头、大下巴或是两个都有,大家其实都进行了妥协。

苹果建议不要用黑条来隐藏刘海,“虽然刘海很烦人,当还是可以为状态栏和额外的内容提供有意义的空间”。刘海可以为下方的内容提供上下文,让用户感觉屏幕更大。背景元素即使被刘海和圆角切去一部分也没有关系,例如壁纸、地图和颜色。但如果把刘海隐藏掉,app 就会显得更小、和其他 app 的体验也不连续,就像这个视频所说的那样。

大标题

在 iOS 11 里,界面标题字体基本都是 34pt 黑色 Semibold。好玩的是,在用户滑动时标题就会变成导航栏,节约出那块宝贵的空间。而横屏模式下标题一直都很小。这就给了设计师一个明确的信号,首先应该明智的使用这块额外的空间,其次要让设计能够自适应,因为在竖屏模式下有这块多余的空间,但横屏模式下没有。

更大的状态栏

状态栏比原来高了两倍不止,从 20pt 涨到了 44pt。通知中心现在可以从左上角拉出。控制中心则要从右上角拉出。从底部快速上滑就可以回到主屏。如果要进入后台,就要从底部滑动然后悬停一下。

安全区布局指南(Safe Area Layout Guides)

在为 iPhone X 设计时,圆角边框和刘海可能会裁掉内容。应该避免出现这种情况。使用安全区布局指南,可以把内容放在没有刘海的区域,从而保证不会被裁掉。一般来说,背景元素不应该采用安全区指南,但内容,例如文本、图片和按钮,则应该遵循此指南。

横屏模式下的 iPhone X

横屏模式下会隐藏状态栏,以便让显示内容的空间最大化。导航栏缩小为 32pt 高,tab bar 缩小为 30pt 高,底部小白条缩小为 23pt 高。虽然大部分用户不会在横屏模式下使用 iPhone X,但横屏依然有很多使用场景。例如查看一张横屏拍摄的照片、全屏观看视频或是用更大的字体来阅读文章,结束后最好能自然地切换回竖屏状态,尤其是设备放在底座上或用户侧着拿手机的时候。

如果你的 app 已经支持了 iPad,那为什么不一并支持 iPhone 的横屏模式呢?大部分现代 app 都应该支持自适应布局,一箭双雕的事情。

横屏模式下的网站

如果你是产品设计师,可能会需要做网站。在 iPhone X 的横屏模式下,网站会在左侧和右侧有巨大的空白。这是因为自动启用了安全区来避免裁剪,但这样的结果更加糟糕。要避免这种情况,苹果创建了一份指南供网站适配横屏模式下的 iPhone X。大致上来说就是可以延伸背景来填充整个屏幕,同时又确保内容在安全区内。

圆角

内容也可能被 iPhone X 的圆角裁剪掉。如果没有隐藏状态栏或底部小白条,就不用担心这种情况。但是对于经常在全屏模式下使用的 app 来说,例如相机,就有必要确保四个角上都有足够的外边距了。要完美契合圆角,建议按钮的圆角半径为 16pt

在 iOS 模拟器里预览 App

大部分人应该都还没有购买 iPhone X。但即使手上没有真实的设备,也可以通过 iOS 模拟器来体验。只要安装 Xcode 就可以预览你的 app 和网站了。

汉堡菜单之死

十年前设计师都在拼命把内容塞进初代 iPhone 的小屏幕里。很多设计师决定完全放弃 tab bar,因为它占用太多纵向空间了。有些很有创意的设计师把按钮放在从左侧滑出的界面上,这就是大名鼎鼎的汉堡菜单。最开始汉堡菜单新鲜又好玩,但从可用性角度上来说,这简直是一场噩梦。要到达另一个界面,需要多按好几下。结果就是用户减少了访问次级 tab 的次数,用户甚至会经常忘记还有更多的内容。

有了大屏手机之后,单手操作变得困难。苹果甚至做了双击 Home 键来向下滑动整个用户界面的功能,就是为了让大拇指能够按到导航栏。这样的话,访问菜单又多了两个双击操作。汉堡菜单基本都是放在屏幕左上角,所以要够到汉堡菜单就更难了。现在屏幕更长了,不再需要为内容挤出空间。很明显,我们应该用 Tab Bar 来取代汉堡菜单,因为我们有了更多空间,iPhone X 更是明确了这个方向。如果你的 app 有不止两个分区,那就没什么理由不使用 Tab bar 了。在 iOS 11 的横屏模式下,Tab bar 占用更少的空间还会更少。

汉堡菜单在网页上还很常见,这可以说是移动端网页体验还没有赶上 native 体验的原因之一。即便 React Native 使用的都是原生控件,这对于 Web 技术来说是很棒的方向,但是在 iOS 里尤其是 iPhone X 中,你应该使用 Tab bar 而不是汉堡菜单。

自适应布局和多任务处理

随着设备不同分辨率的日益增加,自适应布局变得至关重要。借助一些工具,例如 Sketch 的 Constraints 和 Xcode 的 Auto Layout,我们可以以一种全新的方式来进行设计,屏幕尺寸是灵活的,如果需要的话可以显示额外的菜单。

Stack View

Xcode 里的 Stack View 是一个很棒的工具,可以让布局更加具有适应性。相同的元素和组可以动态堆叠在一起,你需要编辑的就只有间距和内容填充的方式。然后 Auto Layout 就会完成剩余的工作。苹果建议先使用 Stack View,然后使用 Auto Layout。

点和像素(Points and Pixels)

开发者用的是点值,所以需要理解点和像素的区别。在初代 iPhone 发布时,这两个单位是相同的:1pt 就是 1px。然后随着 retina 屏的出现,1pt 就变成了 2px。所以点就是初代 iPhone 里的值,像素则是根据像素密度得到的真实值(iPhone 4、5、6、7、8 是 @2x,iPhone 8 Plus 和 iPhone X 则是 @3px)。要更好的理解点和像素间的区别,我强烈建议看一下这个视频)。

iPhone 分辨率

iPhone 有 5 个主要的分辨率:320 x 480 pt(iPhone 4S)、320 x 568 pt(iPhone SE)、375 x 667 pt(iPhone 8)、414 x 736 pt(iPhone 8 Plus)和 375 x 812 pt(iPhone X)。布局不会被拉伸,而只是基于分辨率进行延伸。例如,导航栏的高度不会改变,而只是调整宽度,里面的元素也保持原样。

iPhone 里只有 iPhone 8 Plus 有操作类似 iPad 的横屏操作模式。也就是说会在左侧显示一个导航,这样就不需要用 Tab bar 了。

iPhone Size Classes

Size Class 可以把屏幕宽度和高度进行分类,并根据这些组合来设置条件。例如,可以设置头像在 Compact(紧凑) 宽度的屏幕上是 30 x 30 pt,但在 Regular(标准) 宽度的屏幕上则是 50 x 50 pt,因为在更大的屏幕上空间也更多。由于布局在横屏和竖屏模式下或 iPhone 和 iPad 间可能有很大区别,所以使用 Size Class 来自定义布局是很有必要的,而不能仅仅依赖普通的 Auto Layout constraint。

宽度和高度都有三种类型的 Size Class:CompactRegularAny(任意)。通过排列组合,可以一次影响多种设备。例如 Compact(宽度)x Regular(高度)表示所有的竖屏模式下的 iPhone,但不会影响横屏模式或 iPad。

有趣的是,虽然横屏模式下 iPhone 的宽度很大,但 Compact x Compact 还是会影响横屏模式下的 iPhone(除了 iPhone 6 Plus、7 Plus 和 8 Plus)。所以,一定要熟悉不同的排列组合,如下图所示。

App Icon

App Icon 就相当于 app 的商标。用户体验的第一步就是 App Icon。它会出现在主屏、App Store、Spotlight 搜索和设置里,相当关键。

支持

iPhone 不再需要 @1x 的 asset 了,所以不用生成它们。App 图标现在有两种分辨率:@2x 和 @3x,有三种类型:App Icon、Spotlight 搜索和设置。而 iPad 则会使用 @1x 和 @2x。

超椭圆

从 iOS 7 开始,圆角已经从普通的圆角变成了超椭圆(super-ellipse)形状。一定要记住导出图标时不应该带有遮罩,否则可能会出现黑边。相反,只要导出方形 asset 到 App Store 即可。

图标网格

苹果在他们的一些图标上应用了黄金比例,确保图标好看的同时比例又好。虽然黄金比例很好,但并不是硬性规定,即使是苹果的很多图标也没有采用黄金比例。

颜色

iOS 使用鲜艳的颜色来表示按钮。这些颜色在白色背景和黑色背景下看起来都会很棒。记住应该少量使用颜色,用在行为召唤(call-to-action)和导航栏等地方。大体上来说,你的设计中应该只有 10-20% 是有颜色的,否则对内容的影响就太大了。

iOS 经常会在背景和菜单区域使用中性色。黑底白字对比明显,可以让文字阅读起来更舒服。最后,使用浅蓝色来突出按钮。

系统字体

系统字体现在是 SF Pro Text,用于 20 pt 以内的文字,SF Pro Display 则用于 20 pt 以上的文字。要注意的是现在系统字体支持“动态字体”了,可以根据用户的设置来调节字体大小。

按钮和字体大小

通用的规则是按钮用 44pt,小字用 12pt,正文用 17pt,标题用 20pt+。

间距和对其

通用的规则是内间距(padding)外间距(margin)8pt 或以上。这样就有了足够的呼吸空间(breathing room),布局也更容易扫视,文字也更容易阅读。还有,UI 元素应该对其,文字也应该保持相同的基线(baseline)位置。

状态栏

建议尽可能使用状态栏。用户依赖状态栏来查看重要信息,例如信号、时间和电量。状态栏的文字和图标可以是白色或黑色,但背景可以自定义为任意颜色,和导航栏融为一体。

top Created with Sketch.