原文:小专栏:iPhone 暨 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)位置。

状态栏

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

导航栏

导航栏用于快速获取与界面有关的信息。左边可以放返回个人主页菜单等按钮,右边一般用来放操作按钮例如添加编辑完成。注意如果使用系统图标的话,并不需要创建 asset。

和状态栏一样,导航栏的背景可以自定义为任意颜色,通常都带有轻微的毛玻璃效果以便确保文字的可读性。显示状态栏时,它俩的背景会融为一体。

搜索栏

如果有很多内容,应该让内容可以被搜索。

工具栏

如果需要更多地方来放操作按钮和界面状态,就应该使用工具栏了。

Tab Bar

Tab Bar 是不同界面间的主要导航方式。如果东西不多,避免使用汉堡菜单。始终可见的菜单会增加使用量,因为明显总是更好的(obvious always win)。此外还建议在图标旁搭配文字,因为大部分人都没法立刻认出符号,特别是不常见的符号。

状态

非活跃的图标是灰色的,这样不会分散用户注意力。

Table View(表格视图)

Table View 是罗列内容的常规用户界面。大部分 app 都以某种形式使用了 Table View。可以使用最基本的 Table View,也可以高度定制化其中最细微的那些元素。

基本样式

可以使用一些预置的样式和附件(accessory)。

分区(Section)

也可以给单元格(cell)分组,上面放一个标题,下面放一条描述。

Collection View(集合视图)

如果是网格样式,既有行又有列的话,就需要用 Collection View。虽然 Collection View 只比 Table View 高级一点点,却几乎可以创造你能想到的所有布局。

Collection View 布局

Collection View 的布局可能如下所示,或是其中几个布局的结合。可能性无限。

模态(Modal)

Alert(警告)对话框用于传达至关重要的信息并提供快速操作。Alert 应该保持简单,退出方式必须显而易见。

Activity Modal

Activity 对话框用于分享内容(文本、图片、链接),可以分享给 iOS 的功能,例如隔空投送(Airdrop)、添加收藏、添加书签,也可以分享给 app,例如邮件、Facebook、Twitter。虽然外观不能自定义,但其中的选项可以。

全尺寸模态

如果展示的信息不少,可以设计一个全尺寸的模态窗口,全尺寸的模态窗口基本上都会用滑入、淡入淡出、翻转或翻页等动画来显示。和其它模态窗口一样,必须容易取消并且尽量保持简短。

键盘

键盘用于在文本框里输入内容,例如搜索、聊天或登录。键盘是可以高度定制的,用于输入 URL、Email、电话号码甚至是 Emoji 表情。可以选择浅色和深色主题,以及操作按钮的名字(默认是换行)。

Picker(选择器)

如果要从多个选项中进行选择,可以使用 Picker 控件。对于选择日期来说尤其有用,一次可以控制 3 个字段。

Segmented Control(分段控件)

Tab Bar 用于主要区域间的导航,而 Segmented Control 则用于次要区域间的导航。

滑块(Slider)

滑块是一个不太精准的交互控件,但对于声音、亮度和视频进度等快速设置来说极其实用。

进度(Progress)

进度条用于指示活动的进展。例如,可以使用它来显示网页的加载进度。注意进度条的高度是可以定制的。

开关(Switch)

使用开关来快速切换状态。除非是只有开启和关闭两种状态,否则不要使用此控件。

Stepper(步进器)

比滑块更慢,但更精确,用户可以用 Stepper 给某个值增加或减少一定量。边框和背景可以自定义。

iOS 图标

下面这些自带图标 iOS 里到处都是,由于被大量使用,用户可以立刻识别出它们的含义。如果把它们用于其它目的则会迷惑用户,所以一定要知道 iOS 是如何使用它们的。

如果你要设计自定义图标,一定要使用被大家所熟知的符号。此外,我强烈推荐给它们搭配小字,使用 10pt 或更大的字体。

资源

下面这些模板不仅可以用于学习,还可以复用和自定义,所以你不用从头开始,以免出现错误。熟悉它们之后,就会有更多创意了。

来自苹果的 iOS 11 GUI

如果你在为 iOS 11 设计,可能会需要使用现成的元素,例如状态栏、导航栏和 tab bar。熟悉一下所有的颜色、尺寸、字体和组件。由苹果官方支持。

Great Simple Studio 的 iOS 11 GUI

最完整的 iOS GUI,提供了很多很多元素。

矢量设备模型

我的个人收藏,有超过 260 个模型,全部都是矢量的。非常适合设计展示。这些设备也会在本专栏中贯穿使用。

Facebook 的设计资源

iOS 设计资源的百宝箱,包括 SoundKit(用于原型的交互声音集合)、多样的设备和实用的 GUI。

不该做的事

特别好的一篇文章,关于为 iPhone X 设计。包括一些绝佳的负面教材,为你介绍给 iPhone X 设计的错误方式。

UI 设计该做的和不该做的

有一些做法是你应该不惜一切代价避免的,特别在刚开始为 iOS 做设计的时候。看一遍苹果收集的这些例子。即使走马观花看一遍也是非常有用的。

Ivo Mynttine 的 iOS 指南

如果你想用不同的视角来阅读有关 iOS 的文章,看看这份杰出的、全面的指南。