48e80114d69585dacb110164e9d823a7
iPad 设计指南「更大的屏幕会如何影响设计」

原文 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

top Created with Sketch.