《iOS 人机界面准则》中文版

iOS 人机界面准则郎启旭?L AN G Q I X U.C O M

译者按

本书译自 Apple 官方推出的设计指南《iOS Human Interface Guidelines》，但并未取得官方翻译授权。

由于经验不足、水平有限，翻译中难免存在错误和疏漏之处，欢迎来信指正。后续如有更新，也会在我的微信公众号上告知（搜索微信号：langnote ），欢迎关注。

郎启旭

2014 年 1 月 25 日

邮箱：langqixu@49d4b8707c1cfad6195fa7c7 | 知乎：49d4b8707c1cfad6195fa7c7/people/langqixu | 博客：49d4b8707c1cfad6195fa7c7

1

2013-10-22 | Copyright ? 2013 Apple Inc. All Rights Reserved.

目录

用户界面设计基础 8

为 iOS 7 而设计 8

依从内容 9

清晰呈现 11

纵深传达 15

iOS 应用解析 21

启动和停止 23

立即启动 23

随时准备停止 24

布局 27

导航 30

模态情境 33

交互和反馈 35

用户对标准手势了如指掌 35

交互性元素引人触控 37

反馈增进理解 41

信息输入轻松容易 42

动画 43

品牌化 45

色彩和字体 47

色彩增进沟通 47

文字清晰易读 48

2013-10-22 | Copyright ? 2013 Apple Inc. All Rights Reserved.

2

目录

图标和图形 51

应用图标 51

条栏图标 51

图像 52

术语和措辞 53

与 iOS 整合 55

正确使用标准 UI 元素 55

响应设备方向变化 56

弱化文件和文档处理 57

必要时提供设置方式 58

充分利用 iOS 技术 59

设计策略 60

设计原则 61

美学完整性 61

一致性 61

直接操控 62

反馈 63

隐喻 64

用户控制 64

从概念到产品 65

定义你的 App 65

1. 列出所有你认为用户会喜欢的功能点 65

2. 定义你的目标用户 65

3. 通过定义目标用户来筛选功能点 66

4. 继续向前 66

为任务量身定制 67

原型&迭代 68

案例研究：从桌面到 iOS 69

iPad 中的 Keynote 69

iPhone 中的「邮件」 71

iOS 中的网页内容 72

2013-10-22 | Copyright ? 2013 Apple Inc. All Rights Reserved.

3

目录

在 iPhone 5 中运行 74

iOS 技术 81

Passbook 82

多任务处理 84

路线导航 86

社交媒体 88

iCloud 90

App 内购买 92

Game Center 94

通知中心 96

iAd 富媒体广告 99

AirPrint 102

位置服务 104

快速预览 106

声音 107

理解用户期望 107

定义应用的声音行为 108

管理音频中断 111

合适地处理远程多媒体控制事件 113

VoiceOver 114

编辑菜单 115

撤销和重做 117

2013-10-22 | Copyright ? 2013 Apple Inc. All Rights Reserved.

4

目录

键盘和输入视图 118

用户界面元素 119

条栏 120

状态栏 120

导航栏 121

工具栏 123

工具栏和导航栏图标 124

标签栏 126

标签栏图标 127

搜索栏 129

范围栏 130

内容视图 131

活动 131

活动视图控制器 132

精选视图 133

容器视图控制器 134

图像视图 135

地图视图 136

页面视图控制器 137

弹出窗口（仅 iPad） 138

滚动视图 141

分栏视图控制器（仅 iPad） 142

表格视图 144

文本视图 149

Web 视图 150

控件 152

活动视图指示器 152

「添加联系人」按钮 153

日期选择器 153

详情展开按钮 154

信息按钮 155

标签 155

网络活动指示器 156

页码控件 156

2013-10-22 | Copyright ? 2013 Apple Inc. All Rights Reserved.

5

目录

选择器 157

进度视图 158

刷新控件 158

圆角矩形按钮 159

分段控件 159

滑块 160

步进器 161

开关 161

系统按钮 162

文本框 163

临时视图 165

警告框 165

操作菜单 168

模态视图 170

图标和图像设计 171

图标和图像尺寸 172

应用图标 174

文档图标 177

Spotlight 和「设置」图标 177

启动画面 179

条栏按钮图标 181

报刊杂志图标 184

Web Clip 图标 186

创建可伸缩图像 187

文档修订历史 188

2013-10-22 | Copyright ? 2013 Apple Inc. All Rights Reserved.

6

表格

声音 107

表 30-1 音频会话类别及其相关行为 109

条栏 120

表 35-1 用于工具栏和导航栏的标准按钮 125

表 35-2 用于标签栏的标准标签图标128

图标和图像设计 171

表 39-1 自定义图标和图像的尺寸（像素单位）173

报刊杂志图标 184

表 43-1 每期报刊杂志图标的最大缩放尺寸 185

2013-10-22 | Copyright ? 2013 Apple Inc. All Rights Reserved.

7

用户界面设计基础

?「为 iOS 7 而设计」（第 8 页）

?「iOS 应用解析」（第 21 页）

?「启动和停止」（第 23 页）

?「布局」（第 27 页）

?「导航」（第 30 页）

?「模态情境」（第 33 页）

?「交互和反馈」（第 35 页）

?「动画」（第 43 页）

?「品牌化」（第 45 页）

?「色彩和字体」（第 47 页）

?「图标和图形」（第 51 页）

?「术语和措辞」（第 53 页）

?「与 iOS 整合」（第 55 页）

2013-10-22 | Copyright ? 2013 Apple Inc. All Rights Reserved.

8

为 iOS 7 而设计

iOS 7 具体体现了以下主旨：

?依从（Deference）。用户界面（UI）应当有助于用户理解内容并与之互动，而非对抗。

?清晰（Clarity）。

文字在每种字号下都易于阅读，图标表意准确清晰，装饰也恰到其度，并以对功能的无比关注驱动设计。

?纵深（Depth）。视觉上的分层界面和逼真的动作使其更赋活力，提升了用户的愉悦和理解。

无论你是重新设计一个现有的 app，还是创造一个全新 app，都可以考虑借鉴 Apple 重新设计内置 app 的方法：

?首先，剥离界面，将核心功能展露，并重新审视应用的实质。

?接着，基于

iOS 7 的主旨（依从、清晰和纵深）去提升用户界面设计和用户体验。谨慎且有根据地构建每一个细节和装饰。

92013-10-22 | Copyright ? 2013 Apple Inc. All Rights Reserved.

iOS 7 中的「天气」

iOS 6 中的「天气」

?在这个过程中，随时准备推翻成见，保持怀疑，并以内容与功能为中心来驱动每一个设计上的决定。依从内容

虽然通透、美观的界面和流畅的动画效果是 iOS 7 体验中最为瞩目的部分，但用户的内容才是真正的核心。下面这些方法可以确保你的设计追随功能，并依从于用户内容。

充分利用整块屏幕。重新考量对插图和视觉框架的使用，可以考虑

让内容扩展到屏幕边缘。「天气」就是一个很好的范例：漂亮的全

屏界面非常直观地呈现出某个地点当前天气的关键信息，而且还有

多余空间可以显示每个小时的天气数据。

102013-10-22 | Copyright ? 2013 Apple Inc. All Rights Reserved.

为 iOS 7 而设计

依从内容

重新考量模拟现实的视觉表现。浮雕、渐变和阴影效果有时会让界面元素变得沉重，进而喧宾夺主。相反，要突出内容并让界面扮演一个辅助性的角色。

112013-10-22 | Copyright ? 2013 Apple Inc. All Rights Reserved.

为 iOS 7 而设计

依从内容

通过半透明的界面元素来暗示背后的内容。半透明效果（如「控制

中心」）可以提供情境，帮助用户看到更多可用的内容，并给人一

种短暂停留的暗示。在 iOS 7 中，半透明元素只模糊渲染在其正

背后的内容，给人一种透过宣纸的感觉，但屏幕上的其他部分并不

会模糊。

清晰呈现

清晰呈现是另一种在你的 app 中来确保依从内容的方法。下面这些方法可以使得最重要的内容和功能都能清晰呈现并便于操作。

122013-10-22 | Copyright ? 2013 Apple Inc. All Rights Reserved.

为 iOS 7 而设计

清晰呈现

大量使用留白。留白会让重要内容和功能更为突出、更易于理解。同时，留白还可以传达一种安静平和的感觉，这会让 app 看上去

更加专注和高效。

132013-10-22 | Copyright ? 2013 Apple Inc. All Rights Reserved.为 iOS 7 而设计

清晰呈现

用色彩简化界面。使用一种主题色——例如「便签」中的黄色——来突出重点，并巧妙地暗示其交互性。同时，这会给 app 带来一致性的视觉主题。内置的 app 使用了一系列纯净的系统颜色，而每一种颜色在深色浅色两种背景中看起来都很好。

142013-10-22 | Copyright ? 2013 Apple Inc. All Rights Reserved.

为 iOS 7 而设计

清晰呈现

使用系统字体以确保易读性。iOS 7 的系统字体能够自动调整字间距和行高，这会让文本内容易于阅读，且在任意字号下都显示良好。无论你是使用系统字体还是自定义字体，请确保使用「动态字体」（Dynamic Type），这样在用户选择不同的字号时你的 app 可以作出响应。

152013-10-22 | Copyright ? 2013 Apple Inc. All Rights Reserved.

为 iOS 7 而设计

清晰呈现

拥抱无边框按钮。在 iOS 7中，所有的条栏按钮都没有边框。无边

框按钮会在按钮的内容区域内使用情境、颜色和一个动作导向的标

题来暗示其交互性。如果合适，还可以通过显示纤细的边框或者浅

色背景来让按钮更加突出。

纵深传达

iOS 7 会在不同的分层界面（layers）上显示内容，这些包含层次和位置的分层界面能帮助用户理解界面对象之间的关系。

162013-10-22 | Copyright ? 2013 Apple Inc. All Rights Reserved.

为 iOS 7 而设计

纵深传达

通过在主屏幕之上浮现一个半透明背景，来将文件夹中的内容和屏幕其他部分区分开来。

172013-10-22 | Copyright ? 2013 Apple Inc. All Rights Reserved.

为 iOS 7 而设计

纵深传达

「提醒事项」在多个图层中显示列表，如图所示。当用户使用其中某一个列表时，其他的列表会在屏幕底部被收起。

182013-10-22 | Copyright ? 2013 Apple Inc. All Rights Reserved.

为 iOS 7 而设计

纵深传达

当用户在「日历」的年度、月份和日视图之间切换时，强烈的转场动画会给他们一种纵深和层次感。滚动如图所示的年视图，用户一眼就能看到当天的日期并执行其他日历任务。

192013-10-22 | Copyright ? 2013 Apple Inc. All Rights Reserved.

为 iOS 7 而设计

纵深传达

当用户选中某个月份，年度视图会以放大效果消失，并随之展现月份视图。当天的日期仍然保持红色高亮，而年份则出现在返回按钮中，这样用户便能准确了解自己现在所处的位置，是从哪里过来的，以及如何返回。

202013-10-22 | Copyright ? 2013 Apple Inc. All Rights Reserved.

为 iOS 7 而设计

纵深传达

本文来源：https://www.bwwdw.com/article/da7q.html