原文:Design for iPad

给 iPad 做设计并不是只要把所有东西都放大一遍。更大的屏幕可以提供更多的内容,但同时依然遵循导航、排版和视觉层级等基本的规则。不要把 iPad 当作大号的 iPhone,而要把它当作触屏桌面电脑。换句话说,要让用户更高效、看见更多内容,还要让用户的操作更快,例如输入文字、拖拽操作和多任务处理。

更大的内容

很多时候 iPhone 上的 app 图片很小,以便适应小屏幕,但转换到 iPad 上之后这样就不是很好了。相反,尝试更大的图片,如果没有威胁到内容的话,就让每行多显示几张图片。例如 App Store 的卡片在竖屏模式、横屏模式和 iPhone 上的尺寸都有所不同。此外在 iPad 上每行会显示两张卡片,但在 iPhone 上只有一张。

包裹文字

在 iPhone 上,文字占据了屏幕整个宽度,但在 iPad 上,文字被包裹在容器中,以确保每行的字数不会超过 90 个。

注意 App Store 中的文字,它们都被良好的包裹住了,每行都不会太长。哪怕是在 iPad Pro 上,容器的宽度也不会超过 800 pt

居中模态窗口

在 iPhone 上,模态窗口基本都是全屏的,这是常规做法。但在 iPad 上要避免,因为这样模态窗口就过于巨大了。如果模态窗口不是全屏的,就要水平和垂直居中它,同时有一个固定的大小。

移动内容

为大屏重新设计布局是最难搞的事情之一。如果 app 有太多负空间,就要尝试用不同模块的内容来进行填充。例如音乐 app,专辑封面图和描述就被移动到了布局的左侧。尝试给内容分组便于转换。

iPad 分辨率

iPad 有三种分辨率:768 x 1024 pt(iPad),834 x 1112 pt(iPad Pro)以及 1024 x 1366 pt(12.9 英寸的 iPad Pro)。12.9 英寸的 iPad Pro 竖屏时的宽度就等于 iPad 横屏时的宽度,1024 pt。从硬件来看 iPad 相当于一台专业级的桌面电脑,所以差的就是软件了。

遗憾的是,iPad 上还没有出现像 Sketch 或者 Xcode 这样强大的 app。但对于很少使用复杂工具的人,例如照片编辑、视频剪辑和其它生产力 app,iPad 已经可以替代桌面电脑了。所以目前 iPad 有一些局限,但用户对于专业级 app 的需求也在增长。

多任务

由于 iPad 支持多任务,自适应布局就很有必要了,要能够适配全屏模式、Slide Over 和拆分视图(Split View)模式。

Slide Over

Slide Over 是一个显示在屏幕右边的悬浮窗,不会影响当前 app 的布局。在 iOS 11 中,从 dock 栏拖出某个 app 就可以触发此模式。悬浮 app 在 12.9 英寸 iPad Pro 上的宽度是 375 pt,在其它型号的 iPad 上则是 320 pt

拆分视图

拆分视图让用户可以同时、并排运行两个 app,需要 app 支持 16 种宽度。由于分辨率数量过多,最明智的做法就是使用 Auto Layout 和 Size Class 来实现。

横屏模式下,拆分的 app 可能占据屏幕宽度的 1/32/31/2,在竖屏模式下则可能占据 1/32/3。和 Slide Over 一样,占据 1/3 屏幕的 app 在 12.9 英寸 iPad Pro 上的宽度为 375 pt,在其它型号的 iPad 上则为 320 pt

iPad Size Classes

Size Class 用于给屏幕宽度和高度分类,并基于组合条件来设置布局。Size Class 在 iPad 上变得更加必要了,因为现在要处理的屏幕分辨率太多,这都要归功于全新的多任务处理功能。

宽度和高度都有 3 种类型的 Size Class:Compact(紧凑)Regular(常规)Any(任意)。通过组合它们,可以一次性影响多种设备。在全屏模式下就是 Regular x Regular

在拆分视图模式下,由于 12.9 英寸的 iPad Pro 分辨率更大,所以可能会有所不同。

拖拽

iOS 11 增加了一个新功能,可以跨 app 拖拽文字和图片。这项功能对 iPad 来说尤其实用,因为 iPad 的大屏可以一拆为二。对设计师来说则要确保内容是可拖动的,也就是说就是不要把文字嵌在图片里,或者嵌在不可拖动的元素里。

控制中心

iPad 上的控制中心会显示额外的一些元素,例如打开的 app 和 dock 栏。App 显示的比较小,所以确保内容是有趣的,以便在此模式下可以轻易找到。标题要大,正文至少要 17 pt,这些会在本专栏的排版章节详细介绍。

正反例子

以下是 iPad 的最佳实践。总的来说就是布局要具备适应性,充分利用大屏幕。图片和媒体都应该更大,文字则应该易于阅读。

资源

iPad 的资源相比 iPhone 来言更为稀缺,因为 iPhone 对于设计师来说是一块更大的市场,但同时我们也不应该忽视专业用户对于 app 的需求的价值。对于工具、视频、阅读和其他类型的专业 app 来说这是一个很好的机会,扩展那些愿意为质量付费的用户群。

自适应和布局

这个网页介绍了更多关于自适应布局的内容,非常好,来自 iOS 的人机界面指南。

iPad UI Kit

目前还没有 iPad 的 iOS 11 UI Kit,不过这是目前最好的。这是使用最广泛、支持最好的模板。