iOS12 规范-三米工作室翻译

如果无法正常显示,请先停止浏览器的去广告插件。
分享至:
1. 3MiD 三米米设计工工作室翻译 1
2. 3MiD 三米米设计工工作室翻译 1.IOS ........................................................................................................................ 6 1.2 IOS设计原则(Themes) ..................................................................................... 7 1.3 界面面元素(Interface Essentials) ..................................................................... 9 2.应用用架构(App Architecture) .............................................................................. 9 2.1 无无障碍(Accessibility) ...................................................................................... 9 2.2 载入入中(Loading) ............................................................................................. 11 2.3 模态情景(Modality) ....................................................................................... 13 2.4 导航(Navigation) ........................................................................................... 17 2.5 新手手上路路(Onboarding) .................................................................................. 19 2.6 请求权限(Requesting Permission) ............................................................. 22 2.7 设置(Settings) ............................................................................................... 24 3.用用户交互 ............................................................................................................ 26 3.1 3D触摸(3D Touch) ................................................................................... 26 3.2音音频(Audio) ................................................................................................ 31 3.3身份验证(Authentication) ........................................................................ 34 3.4 数据键入入 (Data Entry) ............................................................................. 39 3.5 拖放 (Drag and Drop) ............................................................................. 42 3.6 反馈 (Feedback) ...................................................................................... 49 3.7 文文件处理理(File Handling) .......................................................................... 52 3.8 手手势(Gestures) ....................................................................................... 53 3.9 近场通信技术(NFC——Near Field Communication) .............................. 57 3.10 撤销和重做(Undo and Redo) ................................................................ 59 4.系统能力力力 ............................................................................................................ 60 4.1增强现实(Augmented Reality) ...................................................................... 60 4.2 多任务处理理(Multitasking) ............................................................................ 71 4.3 通知(Notifications) ...................................................................................... 73 4.4 打印(Printing) ............................................................................................... 77 2
3. 3MiD 三米米设计工工作室翻译 4.5 快速查看(Quick Look) ................................................................................ 79 4.6 评级和评价(Ratings and Reviews) ............................................................ 80 4.7 截图 (Screenshots) ...................................................................................... 83 4.8 电视提供商(TV Providers) .......................................................................... 84 5.视觉设计(Visual Design) ................................................................................. 87 5.1适应性和布局(Adaptivity and Layout) .......................................................... 87 5.2 动效(Animation) ......................................................................................... 100 5.3 品牌化 (Branding) ........................................................................................ 101 5.4 颜色色 (Color) ................................................................................................. 102 5.5 术语 (Terminology) ..................................................................................... 108 5.6 排版 (Typography) .......................................................................................... ................................................................................................................................. 110 6.图标和图像(Icons and Images) ..................................................................... 122 6.1图像尺寸寸和分辨率(Image Size and Resoulution) ...................................... 122 6.2应用用图标(App Icon) .................................................................................... 124 6.3 自自定义图标(Custom Icons) ....................................................................... 129 6.4 启动画面面(Launch Screen) ........................................................................ 132 6.5 系统图标 (System Icons) ........................................................................... 135 7.UI栏(Bars) ........................................................................................................ 141 7.1导航栏(Navigation Bars) ............................................................................... 141 7.2搜索栏(Search Bars) .................................................................................... 145 7.3状态栏(Status Bars) ..................................................................................... 147 7.4标签栏 (Tab Bars) ......................................................................................... 151 7.5工工具栏(Toolbars) ............................................................................................... ................................................................................................................................. 153 3
4. 3MiD 三米米设计工工作室翻译 8.内容视图(view) ................................................................................................ 155 8.1动作菜单(Action Sheets) .............................................................................. 155 8.2活动视图(Activity Views) ............................................................................. 156 8.3警告框(Alerts) ............................................................................................... 158 8.4 精选(Collections) ......................................................................................... 161 8.5 图像视图(Image Views) .............................................................................. 163 8.6 地图(Maps) .................................................................................................. 164 8.7 翻⻚页(Pages) ................................................................................................. 166 8.8 弹出框(Popovers) ........................................................................................ 167 8.9 滚动视图(Scroll Views) ............................................................................... 169 8.10 分屏视图(Split View) .................................................................................. 171 8.11 表元素(Tables) ............................................................................................ 173 8.12 文文本视图(Text View) ................................................................................. 176 8.13 网网⻚页视图(Web View) ................................................................................. 178 9.控件(Controls) ............................................................................................... 179 9.1按钮(Buttons) ................................................................................................ 179 9.2编辑菜单(Edit Menus) ................................................................................. 183 9.3标注(Labels) ................................................................................................. 184 9.4⻚页面面控件(Page Controls) ............................................................................ 185 9.5选择器器(Pickers) ............................................................................................ 186 9.6进度指示器器(Progress Indicators) ............................................................... 188 9.7刷新内容控件(Refresh Content Controls) ................................................. 190 9.8分段控件(Segmented Controls) .................................................................. 191 9.9滑块(Sliders) ................................................................................................. 192 9.10分档器器(Steppers) ........................................................................................ 193 9.11开关(Switches) ............................................................................................ 194 9.12文文本字段(Text Fields) ................................................................................ 195 4
5. 3MiD 三米米设计工工作室翻译 10.扩展(Extensions) ........................................................................................... 198 10.1自自定义键盘(Custom Keyboards) ............................................................... 198 10.2文文件应用用(Document Providers) ............................................................... 200 10.3主屏幕快捷操作(Home Screen Actions) .................................................. 201 10.4消息(Messaging) ........................................................................................ 203 10.5照片片编辑(Photo Editing) ........................................................................... 209 10.6共享和协作(Sharing and Actions) ............................................................. 211 10.7小小部件(Widgets) ......................................................................................... 213 5
6. 3MiD 三米米设计工工作室翻译 IOS12 规范 1.IOS 1.1 IOS设计主题 作为一一名 App 设计师,你就有机会发布一一款能够登上App Store 榜首首的卓越产 品。为此,你的应用用在质量量和功能上必须精益求精。 iOS 与其他平台不不同,主要是下面面三大大原则: • 清晰: 整个系统中,任何字号的文文字都必须清晰易易读,图标表达含义准确易易 懂,修饰恰到好处,以功能驱动设计。留留白白、颜色色、字体、图形和其他界面面 6
7. 3MiD 三米米设计工工作室翻译 元素能够巧妙地突出重点内容并传达交互性。 • 顺应: 流畅的动效和清晰美观的界面面有助于用用户理理解内容并与之交互,且不不会 干干扰用用户。当内容占据整屏时,半透明和模糊处理理通常会暗示其他更更多的内 容。减少使用用边框、渐变和阴影,使界面面尽可能轻量量化,从而而突显内容。 • 纵深: 清晰的视觉层和生生动的动效赋予界面面层次感,使其富有活力力力并 有助于 理理解。使可触发界面面元素更更容易易被找到能提升体验的愉悦感,让用用户在触发 相应功能或者获取更更多内容时不不至至于茫然无无措。当用用户浏览内容时,流畅的 过渡能够提供纵深感。 1.2 IOS设计原则(Themes) 为了了最大大限度地提高高影响力力力和覆盖面面,请在考虑应用用的身份时牢记以下原则: 整体美感: 整体美感体现在一一款 App 的视觉外观、交互行行行为与其功能结合的优异程度。 例例如,一一款协助用用户完成重要任务的 App 应该使用用不不易易察觉且不不会造成干干扰的 图形、标准化控件和可预知的交互行行行为,从而而使用用户聚焦在任务本身。 反之, 一一款沉浸式体验的 App(如游戏),需要提供一一个有吸引力力力的界面面, 在鼓鼓励用用户 探索的同时为用用户带来无无穷的乐趣和激动。 一一致性: 一一致的应用用程序通过使用用系统提供的界面面元素,众所周知的图标,标准文文本样 式和统一一术语来实现熟悉的标准和范例例。该应用用程序以人人们期望的方方式结合了了 功能和行行行为。 直接操纵: 7
8. 3MiD 三米米设计工工作室翻译 屏幕内容的直接操作吸引人人们并促进理理解。用用户在旋转设备或使用用手手势影响屏 幕内容时会遇到直接操作。通过直接操纵,他们可以看到他们行行行动的直接,明 显的结果。 反馈: 反馈能够响应交互操作,呈现结果,便便于用用户了了解情况。系统自自带的 iOS 的 App 对用用户的每个操作都提供了了明确的反馈。 ● 交互元素在点击时会被高高亮显示 ● 进度指示器器显示了了需要⻓长时间运行行行的操作进度 ● 动效和声音音使用用户能够更更清晰地感知交互行行行为的结果 隐喻: 当一一个 App 的虚拟对象和行行行为与用用户所熟悉的体验相似时——无无论这种体 验 来源于现实生生活亦或是数字世界,用用户就能够更更快速地学会使用用这款App。 隐 喻在 iOS 中能够起作用用是因为用用户与屏幕在进行行行物理理上的交互。 ● 可以通过移动分层视图来显示被遮挡的内容 ● 可以拖拽并滑动对象 ● 可以切换开关,移动滑块,滚动数值选择器器 ● 可以通过轻扫来翻阅书籍和杂志 用用户控制: 在 iOS 中,用用户是决策者,而而不不是App。App可以对用用户行行行为提出建议,对 可 能造成严重后果的行行行为发出警告,但不不应该直接替用用户做决策。优秀的 App在 用用户主导和避免不不想要的结果之间找到平衡。为了了让用用户拥有掌控性, App可 以使用用用用户熟悉且可预知的交互元素,让用用户二二次确认破坏性的行行行为, 并且保 证可以停止止正在执行行行中的操作。 8
9. 3MiD 三米米设计工工作室翻译 1.3 界面面元素(Interface Essentials) 大大多数的 iOS App 使用用了了来自自 UIKit 的组件进行行行搭建,这是一一个定义了了基本界 面面元素的编程框架。这个框架让各种 App 在视觉上达到一一致的同时还提供了了高高 度的个性化。UIKit 元素是灵活且常⻅见的。且它们是可适配的,让你 能够设计 一一个在任何 iOS 设备上看起来都很棒的 App,而而且能够在系统发布新版本的时 候自自动更更新。由 UIKit 提供的界面面元素可以分为以下三种: 栏(Bars): 告知用用户现在在App中所处的位置,提供导航,而而且还可能包含按钮 或者其它用用来触发功能和交流信息的元素。 视图(Views): 包含用用户在App内最关注的信息,例例如文文本、图形、动画 和交互 元素的容器器。视图允许使用用诸如滚动、插入入、删除和排列列之类等交互行行行为。 控件(Controls): 触发功能和传递信息。控件包括按钮、开关、输入入框和进度指 示器器。 除了了定义 iOS 界面面,UIKit 还定义了了你的 App 能够采用用的功能。通过这个框架, 你的 App 可以对触摸屏上的手手势做出回应,还可以实现一一些例例如绘画辅助和打 印的功能。 iOS也和其他编程框架和技术紧密结合,例例如 Apple Pay、HealthKit 和 ResearcKit ,帮助你设计出一一个强大大且使人人惊叹的 App 。 2.应用用架构(App Architecture) 2.1 无无障碍(Accessibility) iOS为视力力力丧失,听力力力丧失和其他残疾的用用户提供广广泛的辅助功能。大大多数基 于UIKit的应用用程序都可以轻松访问,允许更更多人人使用用您的应用用程序,同时为所 有人人提供同样有吸引力力力的体验。 9
10. 3MiD 三米米设计工工作室翻译 为图像,图标和界面面元素提供替代文文本标签。替代文文字标签在屏幕上不不可 ⻅见,但它们让VoiceOver可听⻅见地描述屏幕上的内容,使视力力力障碍人人士士更更容 易易导航。 10
11. 3MiD 三米米设计工工作室翻译 响应可访问性首首选项。如果您的应用用程序使用用UIKit实现其用用户界面面,则文文本 和界面面元素会自自动适应某些可访问性首首选项,例例如粗体和大大文文本。您的应用用 还应在适当时检查并响应辅助功能首首选项,例例如启用用减少运动的选项时。实 现自自定义字体的应用用程序应尝试匹配系统字体的可访问性行行行为。 使用用辅助功能测试您的应用用。除了了文文本和动作更更改外,辅助功能选项还可以 更更改对比比度,反转颜色色,降低透明度等。启用用这些设置并观察您的应用用在启 用用这些功能的用用户中的外观和行行行为方方式。 包括隐藏式字幕和音音频说明。隐藏式字幕允许聋人人和听力力力障碍者在视频中感 知口口头对话和其他可听内容。音音频描述为视障人人士士提供重要视频内容的口口头 叙述。 使用用足足够的颜色色对比比度。您的应用用中对比比度不不足足会让每个人人都难以阅读内 容。例例如,图标和文文本可能与背景混合在一一起。在线颜色色对比比度计算器器可帮 助您准确分析应用用中的颜色色对比比度,以确保其符合最佳标准。力力力争最小小对比比 度为4.5:1,尽管7:1是首首选,因为它符合更更严格的可访问性标准。有关其 他设计指南,请参阅颜色色。 有关更更多信息,请参阅适用用于iOS的iOS辅助功能和辅助功能编程指。 2.2 载入入中(Loading) 当内容加载时,空白白或静态屏幕可能会使您的应用用程序被冻结,从而而导致混 11
12. 3MiD 三米米设计工工作室翻译 淆和沮丧,并可能导致人人们离开您的应用用。 在加载发生生时明确说明。至至少,显示一一个活动微调器器,表示正在发生生的事情。 更更好的是,显示明确的进度,以便便用用户可以判断他们将等待多⻓长时间。 尽 快显示内容。在看到他们期望的屏幕之前,不不要让人人们等待内容加载。立立即 显示屏幕,并使用用占位符文文本,图形或动画来确定内容尚不不可用用的位置。在 内容加载时替换这些占位符元素。尽可能在后台预加载即将播放的内容,例例 如在播放动画或用用户正在导航关卡或菜单时。 教育或娱乐人人们掩盖装载时间。考虑显示有关游戏玩法,娱乐视频序列列或有 趣的占位符图形的提示。 12
13. 3MiD 三米米设计工工作室翻译 自自定义加载屏幕:虽然标准的进度指标通常是正常的,但它们有时会感觉脱离 背景。考虑通过自自定义动画和与您的应用用或游戏⻛风格相匹配的元素来设计更更加 身临其境的体验。有关其他指导,请参阅进度指示器器。 2.3 模态情景(Modality) 模态通过阻止止人人们在完成任务或关闭消息或视图之前做其他事情来创建焦点。 操作表,警报和活动视图提供模态体验。当模态视图出现在屏幕上时,用用户必 须通过点击按钮或以其他方方式退出模态体验来做出选择。某些应用用程序实现模 态视图,例例如在日日历中编辑事件或在Safari中选择书签时。模态视图可以占据 整个屏幕,整个主视图,例例如弹出窗口口或屏幕的一一部分。模态视图通常包括退 出视图的完成和取消按钮。 13
14. 3MiD 三米米设计工工作室翻译 尽量量减少使用用模态。通常,人人们更更喜欢以非非线性方方式与应用用互动。考虑创建模 态上下文文时,只有在获得某人人的注意力力力,必须完成或放弃任务以继续使用用该应 用用程序或保存重要数据时,才能创建模态上下文文。 提供一一种明显且安全的退出模态任务的方方法。确保人人们在解雇模态视图时始终 知道他们行行行动的结果。 保持模态任务简单,简短,重点突出。不不要在您的应用用中创建应用用。如果模态 任务过于复杂,人人们可能会在进入入模态上下文文时忽略略他们暂停的任务。特别警 惕创建涉及视图层次结构的模态任务,因为用用户可能迷路路并忘记如何回溯他们 的步骤。如果模态任务必须包含子子视图,请提供层次结构中的单个路路径以及完 成的明确路路径。避免使用用“完成”按钮执行行行除完成任务之外的其他操作。 14
15. 3MiD 三米米设计工工作室翻译 如果适用用,显示标识任务的标题。您还可以在视图的其他部分中提供更更全面面描 述任务或提供指导的文文本。 保留留提供必要且理理想的可操作信息的警报。警报会中断体验并需要点击才能解 除,因此人人们必须认为入入侵是有道理理的。要了了解更更多信息,请参阅警报。 尊重通知首首选项。在“设置”中,用用户可以指定他们希望如何从您的应用用接收通 知。遵守这些首首选项,以便便他们不不会完全关闭您应用用的通知。 不不要在弹出框上方方显示模态视图。除了了警报之外,弹出窗口口上不不应出现任何内 容。在极少数情况下,如果需要在弹出框中执行行行操作后显示模态视图,请在显 示模态视图之前关闭弹出窗口口。 使用用您的应用用协调模态视图外观。例例如,模态视图可以包括导航栏。在这种情 况下,请使用用与应用用程序中导航栏相同的外观。 选择合适的模态视图样式。您可以使用用以下任何一一种样式: 15
16. 3MiD 三米米设计工工作室翻译 选择适当的过渡样式以显示模态视图。使用用与您的应用用程序协调的过渡样式, 增强对临时上下文文切换的意识。默认过渡垂直滑动模式视图从屏幕底部向上滑 动,一一旦被解除则向下滑动。翻转式过渡似乎水水平翻转视图以显示模态视图。 在视觉上,模态视图看起来像当前视图的背面面。一一旦被解雇,它就会退回。在 整个应用用中使用用一一致的模态转换样式。 16
17. 3MiD 三米米设计工工作室翻译 有关模态视图开发人人员指南,请参阅UIViewController和 UIPresentationController。 2.4 导航(Navigation) 人人们往往不不知道应用用程序的导航,直到它不不符合他们的期望。您的工工作是以支支 持应用用程序结构和目目的的方方式实现导航,而而无无需关注自自身。导航应该感觉自自然 和熟悉,并且不不应该主导界面面或将焦点从内容中拉开。在iOS中,有三种主要 的导航样式。 分层导航 每个屏幕做一一个选择,直到到达目目的地。要前往另一一个目目的地,您必须回溯您 的步骤或从头开始并做出不不同的选择。设置和邮件使用用此导航样式。 17
18. 3MiD 三米米设计工工作室翻译 始终提供清晰的路路径。人人们应该始终知道他们在您的应用用中的位置以及如何到 达下一一个目目的地。无无论导航⻛风格如何,通过内容的路路径都是合乎逻辑的,可预 测的并且易易于遵循。一一般来说,给人人们一一个通往每个屏幕的路路径。如果他们需 要在多个上下文文中查看屏幕,请考虑使用用操作表,警报,弹出窗口口或模态视图。 要了了解更更多信息,请参阅操作表,警报,弹出窗口口和模态。 设计一一种信息结构,使其快速轻松地获取内容。以需要最少数量量的点击,滑动 和屏幕的方方式组织您的信息结构。 使用用触摸手手势创建流动性。使用用最小小的摩擦力力力轻松移动界面面。例例如,您可以让 18
19. 3MiD 三米米设计工工作室翻译 人人们从屏幕侧面面滑动以返回上一一个屏幕。 使用用标准导航组件。尽可能使用用标准导航控件,例例如⻚页面面控件,选项卡栏,分 段控件,表视图,集合视图和拆分视图。用用户已经熟悉这些控件,并且会直观 地了了解如何绕过您的应用用。 使用用导航栏遍历数据层次结构。导航栏的标题可以显示层次结构中的当前位置, 后退按钮可以轻松返回上一一个位置。有关具体指导,请参阅导航栏。 使用用选项卡栏显示对等类别的内容或功能。标签栏可让人人们快速轻松地在不不同 类别之间切换,无无论当前位置如何。有关具体指导,请参阅选项卡栏。 当您有多个相同类型内容的⻚页面面时,请使用用⻚页面面控件。⻚页面面控件清楚地传达可 用用⻚页面面数和当前活动⻚页面面数。Weather应用用程序使用用⻚页面面控件来显示特定于位 置的天气气⻚页面面。有关具体指导,请参阅⻚页面面控件。 2.5 新手手上路路(Onboarding) 启动时间是您第一一次登上新用用户并重新连接返回的用用户。设计快速,有趣和有 教育意义的发布体验。 19
20. 3MiD 三米米设计工工作室翻译 提供启动屏幕。应用用程序启动时会出现启动屏幕,从而而给人人的印象是应用用程序 快速响应,同时允许加载初始内容。此屏幕很快就会被您应用用的第一一个屏幕取 代,因此除了了可本地化的文文本和交互元素外,它应该与此屏幕非非常相似。要了了 解更更多信息,请参阅启动屏幕。 以适当的方方向发射。如果您的应用用支支持纵向和横向模式,则应使用用设备的当前 方方向启动。如果您的应用用仅在一一个方方向上运行行行,则应始终以该方方向启动,并让 人人们在必要时轮换设备。除非非有令人人信服的理理由,否则横向模式的应用用程序应 正确定位,无无论设备是向左还是向右旋转。有关其他指导,请参阅适应性和布 局。 20
21. 3MiD 三米米设计工工作室翻译 迅速采取行行行动。避免显示启动画面面,菜单和说明,这样会缩短内容并开始使用用 您的应用用。相反,让人人们潜入入。如果您的应用用需要教程或介绍序列列,请提供一一 种跳过它们的方方法,而而不不是向返回的用用户显示它们。 预计需要帮助。积极寻找人人们可能被卡住的时间。例例如,游戏可以在暂停或⻆角 色色没有前进时随便便显示有用用的提示。让用用户重播教程,以防他们第一一次错过任 何内容。 坚持教程中的要点。为初学者提供指导是好的,但教育并不不能代替优秀的应用用 程序设计。首首先,让您的应用用程序直观。如果需要太多指导,请重新访问您的 应用用程序的设计。 让学习变得有趣和可被发现。边做边学比比阅读指令清单更更有趣,更更有效。使用用 动画和交互性逐步和上下文文教学。避免显示看似互动的屏幕截图。 避免事先询问设置信息。人人们希望应用用能够正常运作。为大大多数人人设计您的应 用用程序,让少数想要不不同配置的应用用程序调整设置以满足足他们的需求。尽可能 从设备设置和默认值或通过同步服务(如iCloud)派生生设置信息。如果您必须 询问设置信息,请在第一一次在应用用内提示,并让用用户稍后在您应用用的设置中进 行行行修改。 避免显示应用用内许可协议和免责声明。在App下载之前,让App Store显示协议 和免责声明。如果您必须在应用用程序中包含这些项目目,请以平衡的方方式集成它 21
22. 3MiD 三米米设计工工作室翻译 们,而而不不会破坏用用户体验。 当您的应用用重新启动时,恢复以前的状态。不不要让人人们回溯到您应用用中的先前 位置。保留留并恢复应用用的状态,以便便他们可以在中断的位置继续操作。 不不要让人人们过快或过于频繁地为您的应用用评分。过快或过于频繁地要求评级是 令人人讨厌的,并且会减少您收到的有用用反馈的数量量。为了了鼓鼓励考虑周全的反馈, 在要求评级之前,让人人们有时间对您的应用用发表意⻅见。始终提供退出评级提示 的方方法,并且永远不不要强迫用用户为您的应用用评分。 不不要鼓鼓励重启。重新启动需要花费时间,使您的应用用程序看起来不不可靠且难以 使用用。如果您的应用用程序有内存或其他问题导致难以运行行行,除非非系统刚刚启动, 您需要解决这些问题。 2.6 请求权限(Requesting Permission) 用用户必须授予应用用访问个人人信息的权限,包括当前位置,日日历,联系信息,提 醒和照片片。虽然人人们很欣赏使用用可以访问此信息的应用用程序的便便利利性,但他们 也希望能够控制其私有数据。例例如,人人们喜欢能够使用用自自己己的实际位置自自动标 记照片片或找到附近的朋友,但他们也希望选择禁用用此类功能。 22
23. 3MiD 三米米设计工工作室翻译 仅在您的应用用明确需要时才会请求个人人数据。对个人人信息的请求持怀疑态度是 很自自然的,特别是在没有明显需要的情况下。确保仅在人人们使用用明确需要个人人 数据的功能时才会发出权限请求。例例如,应用用可能仅在激活位置跟踪功能时请 求访问当前位置。 解释您的应用用需要信息的原因。提供自自定义文文本(称为目目的字符串串或用用法说明 字符串串)以显示在系统的权限请求警报中,并包含一一个示例例。保持文文字简短和 具体,使用用句句子子,并礼貌,所以人人们不不会感到压力力力。无无需包含您的应用用名称 - 系统已标识您的应用用。有关开发人人员指导,请参阅保护用用户的隐私。 23
24. 3MiD 三米米设计工工作室翻译 仅在您的应用用运行行行所需时才会在启动时请求权限。如果您的应用用程序显然依赖 于他们的个人人信息来操作,则用用户不不会被此请求所困扰。 不不要不不必要地请求位置信息。在访问位置信息之前,请检查系统以查看是否已 启用用位置服务。有了了这些知识,您可以延迟警报,直到功能真正需要它,或者 完全避免警报。要了了解如何实现位置功能,请参阅MapKit和位置和地图编程指 南。 2.7 设置(Settings) 某些应用用可能需要提供一一种方方法来进行行行设置或配置选择,但大大多数应用用可以避 免或延迟这样做。成功的应用用程序可以立立即适用用于大大多数人人,同时还提供一一些 方方便便的方方式来调整体验。当您将应用用程序设计为以大大多数人人期望的方方式运行行行时, 您可以减少对设置的需求。 24
25. 3MiD 三米米设计工工作室翻译 推断你可以从系统中得到什什么。如果您需要有关用用户,设备或环境的信息,请 尽可能向系统查询,而而不不是询问用用户。例例如,不不要让某人人输入入他们的邮政编码, 以便便您可以提供本地选项,请求使用用他们当前位置的权限。 周到地优先考虑应用用程序中的配置选项。您的应用用程序的主屏幕是一一个选择必 要或经常更更改的好地方方。辅助屏幕更更适合仅偶尔更更改的选项。 在“设置”中公开不不经常更更改的配置选项。“设置”应用用是在整个系统中进行行行配置 更更改的中心心位置,但人人们必须离开您的应用用才能到达目目的地。在您的应用用程序 中直接调整设置会更更方方便便。如果必须提供很少需要更更改的设置,请参阅“ 首首选 项和设置编程指南”中的“ 实现iOS设置包”以获取开发人人员指南。 25
26. 3MiD 三米米设计工工作室翻译 在适当的时候提供设置的快捷方方式。如果您的应用用包含将用用户定向到“设置”的 文文本,例例如“转到设置> MyApp>隐私>位置服务”,则会提供一一个自自动打开该位 置的按钮。对于开发人人员指南,请参阅openSettingsURLString在UIApplication 的。 3.用用户交互 3.1 3D触摸(3D Touch) 3DTouch为触控交互提供了了一一个全新的维度。用用户可以在支支持的设备中,通过 不不同力力力度按压屏幕来访问额外的功能。App会通过展示菜单、显示额外内容、 26
27. 3MiD 三米米设计工工作室翻译 播放动画等方方式来进行行行反馈。使用用3DTouch功能不不需要学习新的交互手手势,只 要轻轻按压屏幕就可以轻易易发现额外的内容。 主屏交互(Home Screen Interaction) 在主屏幕中,你可以通过按压一一个支支持3DTouch的App图标来显示动作面面板。 这个面面板可以让你快速执行行行App程序中的常⻅见任务或查看有趣的信息。例例如, 日日历App就提供了了“创建事件”的快捷方方式,还显示了了你的“日日程安排”中的下一一 个事件。关于设计指南,请参阅HomeScreenActions和Widgets。 轻按和重压(Peek and Pop) 轻按可以让用用户使用用3DTouch预览一一项内容,例例如⻚页面面、链接或者文文件,预览 窗口口处于⻚页面面内容的最前端。只需用用手手指轻按就能预览,而而抬起手手指就能退出 预览。如想要查看更更多信息,只需重压,直到预览窗口口弹出并充满整个屏幕即 可。在一一些预览窗口口中,你可以向上滑动来显示相关的操作按钮。例例如,在浏 览Safari中的网网⻚页时,你可以向上滑动屏幕,实现在“新标签⻚页中打开”,“加入入 阅读列列表”和“拷⻉贝”这三个操作。 27
28. 3MiD 三米米设计工工作室翻译 轻按可以提供实时的、内容丰富的预览效果:在理理想的情况下,预览窗口口是为 了了给当前的⻚页面面提供补充信息,或者帮助你决定是否打开该⻚页面面。例例如,先预 览一一下邮件中的链接,再决定是否在Safari中打开或与朋友共享此链接。轻触 还可以App在可被点击的列列表中,通过预览补充信息来决定是否选择该行行行。 28
29. 3MiD 三米米设计工工作室翻译 设计足足够大大的轻按视图:需要设计足足够大大的预览视图,使手手指不不会遮挡住内容。 并且用用户通过视图包含的信息来决定,是否应该重压打开完整项目目。 轻按和重压要保证场景的一一致性:如果你在相同类型的元素中有些地方方支支持轻 按和重压,在其它元素中不不支支持(译者注:比比如同一一个列列表中第一一个选项支支持 3DTouch功能,而而第二二个选项却不不支支持),用用户就会对在什什么地方方可以使用用这 个功能产生生混乱,或者认为你的App还是他们的设备发生生了了故障。 避免在轻按视图中显示按钮式元素:如果这时用用户抬起手手指来点击面面板中看起 来像按钮的元素,那么轻按就会消失。 允许每个轻按视图都能被重压:尽管轻按视图能提供给人人用用户所需的大大部分信 息,但如果他们决定直接离开当前⻚页面面,直达该⻚页面面时,那么轻按也应该能转 换成重压。重压展示出的内容也应该和点击该⻚页面面时一一样。 不不要让同一一元素具备轻按和编辑菜单两个功能:当一一个项目目都启用用两个功能时, 不不但会让用用户感到困惑,也会让系统难以判断用用户的意图。了了解更更多的指导, 请参阅EditMenus。 适时提供操作按钮:并不不是每个轻按都需要操作按钮,但这是一一个为常⻅见任务 提供便便捷入入口口的好方方法。如果你的App已经为该项目目提供了了自自定义的触控操作, 那么在最好在轻按中也加入入同样的操作。 29
30. 3MiD 三米米设计工工作室翻译 避免加上一一个操作按钮来打开轻按界面面:用用户一一般都通过更更用用力力力的按压来打开 他们轻按的项目目。所以,没有必要再提供一一个明显的打开按钮。 不不要让轻按成为唯一一能执行行行动作的操作:并不不是所有设备都支支持轻按和重压, 甚至至有的用用户会关闭3DTouch功能。你的App应该考虑到其它触发操作的方方式。 30
31. 3MiD 三米米设计工工作室翻译 比比如,你的App也可以通过点击和⻓长按时出现的轻按视图。 动态照片片(Live Photos) App可以支支持动态照片片,按压照片片可以用用来查看动态的照片片,包含动作和声音音 来再现拍照时前后的片片刻。了了解相关设计指导,请参阅LivePhotos。 3.2音音频(Audio) 用用户通过音音量量键、静音音键、耳耳机声控和屏幕上的音音量量调节滑块控制声音音。很多 第三方方配件也有声控功能。音音频可以通过内部或外部扬声器器、耳耳机输出,甚至至 通过支支持AirPlay或是蓝牙牙的设备来无无线输出。无无论声音音是你App的重要功能还 只是一一个点缀,你都应该知道用用户对声音音有什什么期待并且去满足足他们。 静音音(Silence) 用用户将他们的设备调至至静音音来避免被突发的声响(比比如电话铃声和短信提示声) 打扰。他们也想要关闭没有意义的声音音,包括按键声、音音效、游戏背景音音乐以 及其它音音频反馈。当设备被设置成静音音后,只能播放用用户确认打开过的声音音, 比比如媒体播放中的声音音、闹钟、音音频和视频信息。 声音音(Volume) 无无论是使用用设备按键或是屏幕中的滑块,用用户都期望音音量量的变化会改变整个系 统音音量量,包括音音乐声和App内的音音效。但是提示铃声音音量量是例例外,它只能在音音 频没有播放的情况下,被单独调节。 耳耳机(Headphones) 在私密环境中,用用户使用用耳耳机听声音音,并且能够解放双手手。当插入入耳耳机时,用用 户希望声音音能够自自动继续播放而而不不被中断。当拔掉耳耳机时,他们希望播放能够 31
32. 3MiD 三米米设计工工作室翻译 立立即暂停。 设计良好的音音效体验(Designing a Great Audio Experience) 有时自自动调整音音量量,但不不是总体音音量量:你的App可以调整特定的音音量量来达 到很 棒的音音响效果。但是最终的音音量量还是由系统音音量量来控制。 可以允许重置音音频:用用户经常会想要选择一一个不不同的音音频输出设备。比比如,他 们会想要用用客厅的立立体音音响、⻋车载收音音机或是苹果电视来听音音乐。请支支持这个 功能除非非你有十十足足的理理由不不这么做。 使用用系统自自带的音音量量窗口口来调节音音量量:音音量量窗口口是调整音音频的最好方方法。这个 窗口口是可以自自定义的,它包括一一个音音量量的滑块,甚至至还包括了了一一个重置音音频输 出的控件。 使用用系统自自带音音效来实现短音音和振动:了了解开发者指南,请参阅 SystemSoundServices 如果声音音对你的App十十分重要,请先设置音音频类型:不不同的音音频类型中,有的 允许声音音被静音音键静音音、有的与其它声音音混合、或是允许App在后台时播放。 根据不不同的类别和当前设备的音音频状态来选择合适的方方案,然后将其配置到你 的音音频中去。例例如,非非必要情况下,请不不要打断用用户正在收听的来自自另一一个App 的音音乐。总之,当你的App在运行行行时,最好不不要改变其原有类型,当然那种需 要录制和重放不不同时间音音频的App除外。开发者指南,请参阅 AudioSessionProgrammingGuide。 32
33. 3MiD 三米米设计工工作室翻译 类别 含义 个人环境 特性 声音不是必要的,但是 它会使其他音音频静 音。例如有背景音乐的 游戏。 受静音键控制。 不和其他声音混合。 不在后台播放。 环境 声音不是必须的,也不 会使其他音频静音。例 如一个游戏允许用户在 游戏时播放另一个App的 音乐来代替游戏本身的 背景乐。 受静音键控制。 可以和其他声音混合。 不在后台播放。 播放 声音是必要的而且可能 会和其他声音混合。例 如,有声读物或者外语 学习的教育App,用户可 以离开App后也能听到其 内容。 不受静音键控制。 可能也可能不与声音混 合。 可在后台播放。 录制 声音可录制。例如,一 个做笔记的App可以提供 录音模式。如果这种App 需要允许用户播放录制 的笔记,那么它有可能 要把类别转 换到回放类。 不受静音音键控制。 不和其他声音混合。 可在后台录制。 播放并录制 声音可能会同时进行录 制和播放。例如,一个 拥有音频短信或者视频 电话功能的App。 不受静音音键控制。 可能也可能不与声音混 合。 可在后台录制和播放。 当时可以重新播放被打断的音音频:有时正在播放的音音频会被另一一个App的音音频中 断。暂时性中断(如来电铃声)被认为是可恢复的。永久中断(如Siri打开的音音乐播 33
34. 3MiD 三米米设计工工作室翻译 放列列表)被认为是无无法恢复的。当一一个可恢复的中断发生生时,你的APP应该在中 断结束时自自动重新播放被打断的音音频。例例如,一一个正在播放配乐的游戏和一一个播 放音音频的多媒体App都应该可以恢复播放。 让其他App知道何时将暂时性的音音频播放完毕:如果你的App可能会暂时中断其 他App 的音音频,它应该对音音频会话进行行行适当的标记,这样其他App就能知道何 时可以安全的恢复。 更更多开发者指南,请参阅AVFoundation中的 AVAudioSessionSetActiveOptionNotifyOthersOnDeactivation 。 只在特定时间对声音音控件有反应:不不管你的App是在前台还是后台运行行行,用用户可 以从你App的外部控制音音频播放,比比如控制中心心或耳耳机控制。如果你的App正 在音音频相关的环境中播放音音频,或者连接到一一个支支持 AirPlay的设备上,那么它 可以对音音频控制做出回应。否则,当控件激活时,你的App不不能停止止其他App 正在播放的音音频。 不不要重新定义声音音控件:人人们希望音音频控制在所有App中都能保持一一致。永远不不 要重新定义声音音控件。如果你的App不不支支持相应控件,那么它就不不应该对它们 做出响应。 3.3身份验证(Authentication) 可以通过让用用户进行行行身份验证的条件来为他们提供有价值的服务,例例如个性化 体验、访问附加功能、购买内容或同步数据。如果你的App需要认证,那保持 登录过程的快速、简单和自自然,就不不会让你的App的体验感变差。 34
35. 3MiD 三米米设计工工作室翻译 在所有注册和登录流程中使用用密码自自动填写:此功能自自动生生成并填写密码和安全 代码,以便便人人们可以在验证界面面中花费更更少的时间。所有应用用程序都应该支支持 此功能。有关开发人人员指南,请参阅支支持密码自自动填写。 将登陆尽量量往后排序:当人人们在做一一些有用用的事情之前被迫登录时,他们往往会 35
36. 3MiD 三米米设计工工作室翻译 放弃这样的App。在强制用用户登陆前给他们一一个爱上你的App的机会。在购物 App中,让用用户可以在启动时能立立即浏览你的商品,并且只有在他们准备好购 买的时候才需要登录。在一一个流媒体App中,也在登录前让用用 可以搜索你的内 容,看看你的App能提供些什什么。 解释身份验证的优点,以及如何注册:如果你的App需要验证,请在登录屏幕上 展示简短友好的说明描述使用用这个流程的原因及好处。另外,请记住,并不不是 所有使用用你的 App的人人从一一开始就有一一个账户。确保你描述了了如何获得一一个账 户,或者提供一一个简单的App内的注册方方式。 显示合适的键盘类型来减少数据输入入:例例如要求填写Email地址时,显示Email键 盘屏幕,其中要包含常用用数据输入入的快捷键。有关相关指导,请参阅键盘。有 关可用用键盘类型的完整列列表,请参阅UI文文本输入入特性中的UI键盘类型。 永远不不要使用用“密钥”这个术语:当生生物识别认证失效时,密钥是用用于解锁用用户的 iOS设备,并与Apple Pay进行行行身份验证的。 了了解有关Apple Pay验证设计指南,请参阅Apple Pay。 脸部识别和触控(Face ID and Touch ID) 尽量量让你的App支支持生生物识别认证:Face ID和Touch ID是人人们所信任的比比较安 全、熟悉的认证方方法。如果用用户启用用了了生生物识别认证,你可以假设他们理理解它 的工工作原理理,喜欢这份便便利利,并且愿意随时使用用它。请记住,用用户可能会选择 在他们的设备上禁用用生生物识别认证,因此你的App要准备好应对这种情况。 36
37. 3MiD 三米米设计工工作室翻译 37
38. 3MiD 三米米设计工工作室翻译 向用用户展示一一个简单的验证方方法:当人人们不不必选择如何进行行行身份验证时,这是最 直观的一一种方方法。给他们一一个简单的选项,比比如 Face ID,在初始方方法失败时, 请求用用户名和密码,在返回刚才的操作。 仅在响应用用户操作时启动用用户认证:选择一一些显眼且明确的操作指示,比比如点击 一一个按钮,确认用用户是想主动进行行行身份验证的。在Face ID的情况下,它也提高高 了了用用户面面对摄像头的可能性。 始终标识身份验证方方法:例例如,使用用Face ID在你的App上登录的按钮,应该被 命名为“用用Face ID登录”,而而不不只是“登录”。 38
39. 3MiD 三米米设计工工作室翻译 准确使用用验证方方法:不不要在支支持Face ID的设备上引用用Touch ID。同样,也不不要 在支支持 Touch ID的设备上引用用Face ID。要检查设备的功能并使用用适当的术 语。 了了解有关开发者指南,请参阅LABiometryType 。 总之,不不要在你的App中提供选择生生物识别身份验证的设置:如果在系统层面面启 用用了了生生物识别身份验证,那么就假定用用户想要使用用它。如果你实现了了 一一个App 特定的设置,那么你的 App 会要求用用户进行行行生生物识别认证,但是实际上在系统 范围内它是被禁用用的。 3.4 数据键入入 (Data Entry) 无无论是点击界面面元素还是使用用键盘,键入入信息都是一一个乏味的过程。当一一 款 App 还没有提供实际的帮助,就要求用用户大大量量的键入入内容,会导致进程变慢, 用用户就可能会很快失去耐心心,甚至至完全放弃这个 App 。 39
40. 3MiD 三米米设计工工作室翻译 40
41. 3MiD 三米米设计工工作室翻译 尽量量显示选项:数据输入入高高效化。例例如,考虑使用用选择列列表来代替打字,因为从 提前设定好的选项中进行行行选择,要比比打字容易易多了了。 尽可能的从系统中获取信息:不不要强迫用用户提供那些可以自自动或是在用用户许可内 就能获取的信息,比比如联系人人或是日日历信息。 提供合理理的默认值:尽可能地预填可能性最大大的信息值。提供准确的默认值可以 进行行行快速决策。 41
42. 3MiD 三米米设计工工作室翻译 只有在收集完必要的信息之后才能进行行行下一一步:在启动“下一一步”或“继续”按钮之 前,确保所有需要的字段都有值。使用用可视化按钮,提示用用户可以继续 进行行行下 一一步。 立立刻验证填写信息:当你在填写完一一份冗⻓长的表格后,又又不不得不不回到前面面去纠正 错误是让人人十十分沮丧的。尽可能在输入入后立立即检查字段值,这样用用户就可以⻢马 上纠正它们(例例如输入入用用户名后立立⻢马检查格式和是否被注册,而而不不需要在输入入完 密码后再一一起验证)。 只有在必要时使用用文文本信息:只要在真正需要的信息,才使用用字段表达。 将信息列列表化以高高效预览:在列列表和集合中,选择一一个选项是更更容易易的。考虑将 信息列列成表,以字⺟母顺序排序或以另一一种逻辑方方式排序,从而而可以快速 扫视和 选择(译者注:如商品类目目以字⺟母排序的方方式在列列表中展现出来)。 在文文本框中显示提示,以助沟通:当字段中没有其他文文本时,文文本字段可以 包 含如“电子子邮件”或“密码”之类的占位符文文本。当占位符文文本足足以表述清 楚的话, 不不要再使用用单独的标签来进行行行描述。 3.5 拖放 (Drag and Drop) 只要一一根手手指,用用户就可以将选定的照片片、文文本或其他内容,从一一个位置拖到 另一一个位置来进行行行移动或复制,然后松开手手指将其放下。 42
43. 3MiD 三米米设计工工作室翻译 触摸并按住选择的内容使它看起来会上升并附着在用用户的手手指上。当内容被拖 动时,动画和视觉提示要识别你想放置的位置。当无无法放下,或着拖拽只能复 制而而不不是移动时,该系统会显示别的标识来提醒用用户。请参阅 UIKit 中的 Drag and Drop 。 原位置和目目的地 (Sources and Destinations) 拖放包括将选中的内容从原位置转移到目目的地。这些位置可以在同一一集合中, 如文文本视图,或分屏模式下两端的文文本视图。例例如,在 Notes 中,用用户可以 将选中的文文本拖到同一一条笔记中的新位置。在 Reminders 中,用用户可以将单个 提醒从一一个列列表中拖出来,并将其放入入另一一个列列表中。 43
44. 3MiD 三米米设计工工作室翻译 在iPad上,原位置和目目的地的位置也可以在不不同的 App 中,从而而产生生跨 App 的交互,比比如从 Safari 的网网⻚页中拖出一一张照片片到 Mail 里里里的新邮件中。在拖拽 内容的同时,用用户可以通过多任务处理理、退出到主屏幕或从屏幕底部 向上滑动 显示快捷键来访问另一一个 App 。 注意:在App程序之间拖放的内容是复制文文件,而而不不是内容本身(译者注: 即拖动 只是将内容复制到另一一个应用用中而而不不是移动存储位置)。 支支持拖放功能(Supporting Drag and Drop) 拖放是一一种高高效的、直观的功能,用用户期望在整个系统中都能实现。如果你的 App包含或生生成了了文文本,照片片,视频,音音频,或者其他用用户想要移动,复制或 插入入的内容,你的App应该支支持拖放功能。 所有可选择和可编辑的内容都能进行行行拖放:可选择的内容应该是可拖动的可编辑 44
45. 3MiD 三米米设计工工作室翻译 的内容也是可以放置内容的。还要确保你的 App 能够支支持在这些区域复制粘贴。 允许将内容放到控件上:总之,配置控件要支支持数据输入入或选择(比比如文文本字段) 接受可放置的内容。 尽可能使用用标准文文本视图和输入入框:系统自自带的这些组件都包含对拖放功能的原 生生支支持。 了了解更更多相关指导,请参阅 Text Fields 和 Text Views 。 了了解更更多开发者指南,请参阅 UITextField 和 UITextView 。 为提高高效率,考虑支支持多项拖放: 在很多 App 里里里,用用户可以用用一一根手手指拖动一一 个内容,同时用用另一一根手手指轻敲其它内容,就会在选择的第一一个内容的手手指下 方方显示出堆叠效果。然后,用用户可以将它们像组一一样拖放到指定的位 置。例例如, 主屏幕允许用用户根据这个方方法选中多个 App 程序图标,并将其拖放到一一个文文件 夹中。在 APP 中,如 “照片片”,提供了了用用户可以在拖拽之前选择多个对象的选 45
46. 3MiD 三米米设计工工作室翻译 择模式。 确定在你的 App 中拖放内容是移动还是复制: 一一般来说,当原位置和目目的地的 载体是相同时(在文文档中拖动文文本),才可以移动,而而当它们不不同时(在文文 档之间 或 App 程序之间进行行行拖动),则使用用复制。当然,情况并非非总是如此,重点是 拖放应该是直观的。在 “提醒” 中,列列表之间拖动操作是一一种移动而而不不是复制, 因为这是用用户想要的。而而在 App 程序之间拖放内容就总是复制了了。 用用户是应该可以撤销拖放的: 通常情况下,当用用户无无意中将内容放到错误的位 置时,他们应该能够使用用撤销来将App返回到之前的状态。也就是说,被放置 的内容可以被移除,如果被放置的内容是从你的App程序里里里移出的,那么它应 该恢复到原来的位置。 考虑用用一一下弹簧加载: 有了了弹簧加载,用用户可以通过拖动已选择的内容,并在 不不放置的情况下暂停,来激活某些控件,比比如按钮和分栏组件。例例如,在邮件 中,选择的消息可以被拖动到导航栏的 Back 按钮上,以到达邮箱里里里的其他位 46
47. 3MiD 三米米设计工工作室翻译 置。永远不不要让弹簧加载成为激活控件的唯一一方方法。把它当作一一种可以被发现 的小小惊喜。在大大多数情况下,一一个弹簧加载的控件也应该可以响应一一个点击手手 势。 开发者指南,请参阅 UISpringLoadedInteraction 。 提供可拖动的内容 (Providing Dragged Content) 可以自自定义拖动项的预览: 通常,在用用户手手指下显示被拖动的预览效果应该是 半透明内容,表明拖动正在进行行行中,并使用用户能够看到被拖动内容下面面的目目的 地。 尽可能的提供多个拖拽数据的显示类型,从高高保真到低保真排序: 例例如,当提 供线条稿时,你的 App 可以按照顺序依次提供一一个PDF矢矢量量显示,一一个具有透 明度的无无损 PNG 图像,以及一一个没有透明度的有损的 JPEG 图像。 这样,用用 户就可以选择最高高质量量的显示来导入入到目目的地。 将自自定义对象的本地版本作为最丰富的数据形式: 例例如,一一个允许人人们拖拽图 表的 App 应该首首先显示本地的图表对象。然后,它应该为那些不不支支持图表对象 的 App 提供可替代的图像版本。 当你 App 的内容传输会比比较耗费时间或资源密集的时候,文文件要提供程序 扩 展功能: 文文件提供程序扩展,并确保完成,即使你的 App 不不再运行行行也能做到。 请注意,只有用用户放下内容后传输才会开始。 了了解更更多开发者指南,请参阅 NSFileProviderExtension 。 当你的 App 需要时间传输内容时请提供进度指示: 如果内容需要下载或大大文文件 需要时间复制时,请提供进度信息。至至少提供内容的总大大小小,这样就可以计算 出剩余的时间,并显示恰当的进度指示器器。 47
48. 3MiD 三米米设计工工作室翻译 了了解更更多开发者指南,请参阅 NSProgress 。 接收放下的内容(Accepting Dropped Content) 使用用视觉提示来识别潜在目目的地,并预览放置内容的效果: 高高亮显示、插入入 点 光标和动画都是识别目目的地的好方方法。当内容被拖过来时,视图可以微妙地闪 烁并改变颜色色,或者段落可以分开为拖动的图像腾出空间。当屏幕上有多个可 能的目目的地时,一一次只识别一一个。如果原位置和目目标容器器是相同的, 那么可以 不不需要高高亮显示,除非非内容完全从原位置中拖出来,然后重新进入入。 当内容被 放下时或不不再位于目目的地之上时,确保不不显示高高亮。 自自动滚动目目的地的内容: 当内容被拖到目目的地的边界之外时,你的 App 可能需 要判断滚动显示当前视图遮挡的内容,或者允许用用户继续拖动到完全不不同的目目 的地。如果你的 App 让用用户进行行行滚动拖放,那就定义一一个区域,当拖拽的项目目 被放置在上面面时,这个区域会自自动滚动。例例如,当内容被拖到正文文区域的顶部 或底部时,邮件中的⻓长草稿会自自动滚动。标准文文本视图和输入入框会自自动采用用这 种方方式。 提取和展示要能展现出放置的丰富内容: 例例如,你的 App 可以为一一个图表 提供 的几几种表现形式。如果你的 App 支支持图表,它可以提取并显示出原始 图表对 象。如果你的 App 不不支支持图表,它可以提取并显示图表的图像版本。 只提取放置内容的相关部分: 例例如,如果用用户想将某个联系人人拖到邮件的收件 人人中,只需提取名称和电子子邮件即可,而而不不用用联系人人的地址信息。 当内容放置后,在表视图和精选视图中显示占位符: 占位符会暂时指示当内容 完成传输后,将停留留在哪里里里。 在放置内容需要时间进行行行传输时显示进度: 默认情况下,当 App 程序之间发生生 48
49. 3MiD 三米米设计工工作室翻译 耗时的转移时,系统会显示一一个 App 模式警报。可以使用用自自定义进程的显示方方 式,比比如在表视图或集合视图中显示占位符的进度指示器器,这样就不不会阻止止用用 户使用用你的 App 了了。请注意,只有用用户放下内容后传输才会开始。 为放置的内容启动一一个进程时提供反馈: 如果用用户将内容放置到发起任务的 一一 个控件上,例例如,将视频上传至至共享站点,就会显示任务已经开始并通知用用户 其进度。 放置失败时通知用用户: 如果放置的内容不不能插入入,可能是因为文文件传输中断, 要通知用用户放置内容失败。 用用适当的样式来放置文文本: 当原位置和目目的地支支持相同样式的文文本属性时, 放 置的文文本应该保留留其原始字体、字型、大大小小和其他属性。否则,放置文文本应该 采用用目目的地的样式。 提供一一种直观的方方式,当用用户不不能立立即撤销拖放时,可以选择退出: 例例如, 一一 个分享性的 App 会在放下内容之前提供一一个中间的附加表。这个附加表可以用用 来提供其他内容,比比如状态消息(译者注:如内容数量量和大大小小),同时还提供一一个 取消按键。当照片片被拖进共享的照片片流时, App 就显示了了这 种方方式。 3.6 反馈 (Feedback) 反馈让用用户知道 App 现在在做什什么,发现他们下一一步应该做什什么,并且了了 解 行行行动的结果。 49
50. 3MiD 三米米设计工工作室翻译 将状态和其他类型的反馈整合到你的界面面中:理理想情况下,用用户可以在不不操作或 不不被打扰的情况下获得重要信息。例例如,邮件在通过邮件箱导航时,巧妙地显 示了了工工具栏中的状态信息。这些信息不不会和屏幕上的主要内容抢⻛风头, 但用用户 可以在任何时候快速浏览。 避免不不必要的警报框:警报框是一一种强大大的反馈机制,但应该只用用于传递重 要 的信息。如果用用户看到太多包含无无关紧要信息的警报框,他们很快就会学 会忽 略略以后的警报。 了了解更更多指南,请参阅 Alerts 。 触觉反馈(Haptic Feedback) 触觉技术为用用户提供了了一一种身体接触的触觉反馈,从而而获得用用户关注并强化他 们的操作。系统提供的一一些界面面元素,例例如选择器器、开关和滑块,在用用户与它 们交互时会自自动提供触觉反馈。你的 App 还可以让系统生生成不不同类型的触觉反 馈。 iOS 管理理着这种反馈的强度和操作。 50
51. 3MiD 三米米设计工工作室翻译 请谨慎使用用触觉反馈:过度使用用会引起认知混乱并降低反馈的重要性。 一一般来说,触觉反馈是为了了响应用用户发起的操作:用用户很容易易将触觉与他们所发 起的操作联系起来。随意的反馈会让用用户感到不不连贯,以及造成误解。 不不要重新定义反馈类型:为确保用用户有一一致的体验,请按照预期使用用反馈类型。 例例如,不不要使用用 “冲突性”(impact)反馈来通知用用户一一个任务已经完成。 而而应该 是使用用“通知”反馈来表示“成功”的变化。 调整好给用用户触觉反馈的视觉体验:提供视觉和触觉的反馈,以在操作和结果之 间建立立更更深的联系。确保动画是清晰准确的,在视觉上符合用用户的感受 。 不不要依赖单一一的交流方方式:并不不是所有的设备都支支持全方方位的触觉反馈,如果可 以选择的话,用用户完全可以在设置中禁用用该功能。此外,只有当设备激活,而而 你的 App 是在当前⻚页面面时,触觉反馈才会发生生。通过视觉和听觉的提示来补充 51
52. 3MiD 三米米设计工工作室翻译 触觉,以确保重要信息不不会被遗漏漏。 当视觉反馈被遮挡时,用用户可以使用用触觉:比比如将一一个对象拖到屏幕上的某个位 置,被用用户的手手指遮住了了。这时候生生成反馈,让用用户知道何时到达特定的位 置。 在开始反馈之前,确认系统已准备就绪:因为在提供触觉反馈时可能会有一一 些 延迟,所以最好在请求反馈之前确认系统已提前加载。否则,触觉反馈可能有 很⻓长的延时,导致用用户感觉他们的操作与屏幕上看到的东⻄西没有联系。 同步触觉和音音效:触觉不不会自自动与声音音同步。如果你想使用用音音效的话,要让它和 触觉同步。 了了解更更多开发者指南,请参阅 Animation and Haptics 。 3.7 文文件处理理(File Handling) 用用户在创建、查看和操作文文件时不不用用考虑文文件系统。如果你的App需要运行行行文文 件时,尽可能地减少文文件处理理的时间。 让用用户相信文文件即时保存,除非非主动取消或删除: 一一般来说,不不要让用用户去即 52
53. 3MiD 三米米设计工工作室翻译 时保存文文件。相反,在用用户打开和关闭文文件,以及切换到另一一个 App 程 序时, 会定期自自动地保存更更改。在某些情况下,例例如在编辑现有文文件时,保存和取消 选项可能仍然是有意义的,因为它们可以帮助确认何时编辑的内容已经被保存。 不不要提供创建本地文文件的选项: 用用户通常希望所有的文文件都可以在他们的所有 设备上使用用。只要有可能,你的 App 就应该通过 iCloud 等服务来支支持云 文文件 存储。 设计一一个直观的图形文文件浏览界面面: 理理想情况下,使用用用用户熟悉的系统文文档应 用用来浏览。如果你设计了了一一个自自定义的文文件浏览器器,请确保它是直观且高高效的。 文文件浏览器器在高高度图形化的情况下运行行行得最好,也提供了了文文件的可视化展示。 为了了高高效引导用用户,可以考虑提供一一个新的文文档按键,这样用用户就不不必去其他 地方方创建新文文档了了。 让用用户在不不离开 App 程序的情况下预览文文件: 你可以使用用 Quick Look 功能让 用用户查看来自自 Keynote、Numbers 和 Pages 的内容,以及 PDF 文文档、图片片 或某些其它格式的文文件,即使你的 App 并没有真正打开它们。 请参阅 Quick Look 。 与其他App共享文文件: 如果可以的话,你的 App 可以通过文文档的扩展功能 ( document provider extension )与其他 App 共享文文件。也可以让用用户浏览和 打开其他 App 的文文件。 了了解更更多开发者指南,请参阅 Document Picker Programming Guide 。 3.8 手手势(Gestures) 用用户通过在触摸屏上使用用手手势来与 iOS 设备交互。操作手手势与内容产生生了了紧密 的个人人联系,增强了了对屏幕的直接操纵感。 53
54. 3MiD 三米米设计工工作室翻译 一一般使用用标准操作手手势: 用用户熟悉了了标准的手手势,就不不喜欢被迫学习不不同的方方 法来做相同的事。在游戏和某些沉浸式App中,自自定义手手势是这种体验的 乐趣 之一一。在一一般 App 中,最好使用用标准的手手势(standard gestures), 这样用用户 就不不用用费力力力去发现或记住它们了了。 避免使用用标准手手势执行行行非非标准操作: 除非非你的 App 是一一个极具可玩性的游戏, 否则重新定义标准手手势会变得混乱和复杂。 不不要禁用用系统的屏幕边缘手手势: 除了了标准的手手势之外,一一些额外的手手势还可以 调用用全局操作,比比如在屏幕的边缘通过滑动屏幕来显示主屏幕(在支支持的 iphone 上)、控制中心心、通知中心心和 Dock (在 iPad 上)。用用户依靠这些手手势来 操作每一一个 App 程序。在极少情况下,像游戏这样的沉浸式 App 可能需要自自 定义的屏幕边缘手手势,这些手手势优先于系统的手手势操作——第一一次滑动调用用此 App 的自自定义手手势功能,而而第二二次则调用用系统手手势。这种行行行为(被称 为边缘保 护)应该要尽量量避免,因为这会使得用用户难以访问系统操作。了了解更更多开发者指 南,请参阅UIViewController的 preferredScreenEdgesDeferringSystemGestures()方方法。 基于界面面的导航和操作提供补充性的快捷手手势,而而不不是替换: 只要有可能, 提 供一一种简单、直观的方方法来引导或执行行行操作,即使这意味着需要额外的点击。 许多的系统 App 提供了了清晰可点的返回上一一⻚页的按钮的导航栏。但用用 户也可 以通过从屏幕的一一侧滑动来返回。在 iPad 上,用用户可以按下 Home 键退出到 主屏幕,或是使用用四指捏合的手手势。 使用用多点手手势来增强 App 的体验: 虽然涉及多个手手指同时操作的手手势不不适用用于 每一一个 App,但是他们能够丰富一一些 App 的体验,譬如游戏和绘图 App。例例 如,一一个游戏可能包含多个屏幕控制,比比如操纵杆和发射按钮,就可以同时进 54
55. 3MiD 三米米设计工工作室翻译 行行行操作。 了了解更更多开发者指南,请参阅 UIGestureRecognizer 。 标准手手势(Standard Gestures) 用用户通常期望以下的标准手手势在整个系统和每个 App 程序中都是相同的。 点击:激活一一个控件或者选择一一个对象。 拖拽:让一一个元素从一一边移动到另一一边,或者在屏幕内拖动元素。 滑动:快速滚动或平移。 横扫:单指返回上一一⻚页,显示分屏视图中的隐藏视图,滑出列列表行行行中的删除按钮, 55
56. 3MiD 三米米设计工工作室翻译 或在轻按显示操作列列表。在 iPad 中四指操作用用来切换 App。 双击:放大大并居中内容或图片片,或者缩小小已放大大过的。 捏合:向外张开时放大大,向内捏合时缩小小。 ⻓长按:当在可编辑或可选文文本中执行行行时,显示用用于光标定位的放大大视图。在某些 与集合视图类似的视图中操作,进入入对象可编辑的状态。 摇晃:撤销或重做 56
57. 3MiD 三米米设计工工作室翻译 3.9 近场通信技术(NFC——Near Field Communication) NFC 使设备能够在几几厘米米的范围内进行行行无无线信息交换。在支支持此项功能的设 备上运行行行 iOS App,可以使用用 NFC 扫描来读取现实世界相关的电子子标签上的 数据。例例如,用用户可以扫描一一个玩具来连接视频游戏,购物者可以扫描店内的 标志来拿到优惠券,或者零售员工工可以扫描产品来跟踪库存。 有关开发人人员指导,请参阅Core NFC。 应用用内标签阅读(In-App Tag Reading) 一一个 App 可以支支持单个或多个对象的扫描,当用用户需要扫描某件东⻄西时,系统 会弹出一一个扫描表。 不不鼓鼓励用用户接触物理理对象:要扫描标签,iOS 设备只需简单地靠近标签,而而不不需 要触碰。当要求用用户扫描对象时,使用用“扫描”和“靠近”等术语,而而不不是“点 击” 和“触碰”。 使用用通俗易易懂的术语:一一些人人可能不不熟悉 NFC 这个概念。为了了让它变得通俗易易 懂,应避免提及技术上的、面面向开发者的术语,比比如核心心 NFC 、近场通信、 NFC和标签。相反,要使用用大大多数人人都能明白白的友好会话式的术语。 57
58. 3MiD 三米米设计工工作室翻译 应该这样 不应该这样 请扫码【对象名称】 请扫码NFC标签 请把你的 iPhone 靠近【对象名称】以 请使 NFC 扫描,点击 机上的【对 了解更多。 象】 为扫描提供简洁的指导说明:提供完整的带有结束标点符号的句句子子。确定要扫描 的对象,并适当地修改文文本以便便进行行行后续扫描。保持文文本简短,避免截断。 应该这样 不应该这样 把你的 iPhone 靠近【对象名称】以 解 多。 现在,把你的iPhone 靠近另 个【对象 名 称】 背景标签阅读(Background Tag Reading) 通过背景标记阅读,用用户随时快速扫描标签,无无需先打开应用用程序并启动扫描。 在支支持背景标签读取的设备上,只要屏幕亮起,系统就会自自动查找附近的兼容 标签。在检测到标签与应用用程序并将其匹配后,系统会显示一一条通知,用用户可 以通过该通知将标签数据发送到应用用程序进行行行处理理。请注意,当NFC扫描⻚页可 ⻅见,正在使用用电子子钱包或Apple Pay,正在使用用相机,设备处于⻜飞行行行模式以及 重启后设备已锁定时,将禁用用背景读取。 支支持后台和应用用内标签阅读。对于使用用不不支支持背景标记读取的设备的用用户, 58
59. 3MiD 三米米设计工工作室翻译 您的应用用仍必须提供应用用内扫描标记的方方式。 3.10 撤销和重做(Undo and Redo) 许多 App 允许用用户通过摇晃设备来撤销和重做某些操作,比比如打字或删除。 当以这种方方式启动时,会出现一一个警告框提示用用户确认或取消撤销(重做)。 简要描述一一下将要撤消或重做的操作:撤销和重做的警告提示框标题会自自动 地 包含“撤销”或是“重做”这样的前缀(以及后面面的空格)。你需要在前缀后 面面提供 额外的一一两个词语用用来描述什什么会被撤销或是重做。例例如,你可以创建警告提 示,例例如“撤销名称”或“重做地址更更改”。 如果你已经使用用摇晃手手势进行行行撤销和重做,则不不要将其用用于其他操作:尽管你可 59
60. 3MiD 三米米设计工工作室翻译 以通过编程方方式给摇晃手手势赋予多种功能,但却冒着让用用户困惑的⻛风险,这样 就会让你的 App 更更难用用。 节制地使用用撤销和重做按钮:当 App 提供多种方方法来执行行行相同的任务时, 会让 用用户感到困惑。如果你的 App 真的需要专有的撤销和重做按钮,请使用用标准系 统提供的图标,并将它们放在一一个预期的位置,比比如导航栏中。 只在当前情境中执行行行撤销和重做操作:撤销和重做必须对当前的(而而非非之前 的)情 境有明确直接的影响。 了了解更更多开发者指南,请参阅 Undo Architecture 。 4.系统能力力力 4.1增强现实(Augmented Reality) ARKit是苹果公司的增强现实(AR)技术,提供身临其境,引人人入入胜的体验,将 虚拟物体与真实世界无无缝融合。AR应用用通过设备的相机在屏幕上呈现了了生生动的 物理理世界视图。三维虚拟物体叠加在这个视图上,营造它们实际存在的感觉。 用用户可以重新调整设备的方方向,以便便从不不同的⻆角度探索对象,尽可能符合现实 经验,可以使用用手手势和移动与对象进行行行交互。 计引人人入入胜的体验 使用用整个显示器器:投入入尽可能多的屏幕来查看和探索物理理世界和应用用中的虚拟 对象。 避免让控件和信息扰乱屏幕,增加沉浸式体验。 在放置逼真的物体时创造令人人信服的错觉:并非非所有AR体验都需要真实的虚拟 对象。那些确实应该存在于物理理环境中的物体,为获得最佳效果,需要设计具 有逼真纹理理的细腻的3D素材。然后使用用ARKit提供的信息将物体定位在检测到 60
61. 3MiD 三米米设计工工作室翻译 的真实世界表面面上,并适当缩放对象,在虚拟物体上提供环境光照条件,在真 实世界表面面上投射虚拟物体阴影,并在相机位置改变时更更新视觉效果。 预料料到人人们会在不不适合AR的环境中使用用你的应用用:人人们可能会在没有足足够空间 移动或没有大大的平坦表面面区域的位置打开你的应用用。所以要预先向用用户明确传 达我们的要求和期望,并且预料料到这些具有挑战性的场景,可以考虑提供可用用 于不不同环境的各种功能。 注意用用户的舒适度:⻓长时间地将设备保持一一定的距离或⻆角度可能会导致用用户疲 劳。所以要考虑人人们在使用用你的应用用时需要怎样手手持设备,并找到一一种让用用户 拥有愉快体验的解决方方法。例例如,默认情况下,你可以将对象放置在距离较近 的位置,这样就没必要再移动设备使它更更靠近对象。当一一个游戏面面临短暂的停 机时间时,它可以短暂地保持一一定的优先级。 如果你的应用用鼓鼓励用用户发生生动作,请逐步介绍:当用用户一一进入入游戏中时,没必 要直接给用用户来一一发虚拟炮弹。先要给他们时间先适应,然后再逐步鼓鼓励动作 的发生生。 注意用用户的安全:如果其他人人或物体在附近,大大幅度的移动可能会产生生危险。 你需要考虑让你的应用用安全运行行行的方方法。一一个游戏不不鼓鼓励大大幅度和突然的动 作。 使用用音音频和触觉反馈来增强沉浸式体验:声音音效果或碰撞感是确认虚拟物体与 物理理表面面或其他虚拟物体接触的好方方法。在虚拟现实游戏中,背景音音乐可以帮 助用用户沉浸在虚拟世界中。更更多相关指南,请参阅 Audio 和 Haptic Feedback。 61
62. 3MiD 三米米设计工工作室翻译 尽可能在上下文文中提供提示:例例如,在物体周围放置3D旋转指示器器比比叠加在图 层上的文文本指令更更直观。但在表面面检测之前,或者用用户没有响应上下文文提示, 文文本覆盖提示需要被授权。 考虑引导用用户找到屏外虚拟物体:有时可能很难找到位于屏幕外的物体。 如果 用用户看起来无无法找到屏外对象,请考虑提供视觉或听觉提示。例例如,如果某个 物体偏向屏幕外的左侧,则可以在屏幕左侧显示一一个指示器器,以便便用用户将摄像 头对准该方方向。 如果你一一定要显示引导文文字,请使用用简单易易懂的术语:AR是一一种先进的概 念,可能会对某些用用户造成困扰。为了了使其便便于理理解,请避免提及像ARKit、 世界检测技术、和跟踪技术这样的开发者导向的技术性术语。而而使用用大大多数 人人 都会理理解的常用用术语。 常用用术语 专业术语 无无法找到表面面,尝试移动到侧面 面或重新定位 手手机。 无无法找到平面面,调整追踪。 点击一一个位置以放置(要放置的对象 点击平面面来锚定一一个物体。 的名 称)。 尝试调亮灯光并四处走走动。 特征不不足足。 62
63. 3MiD 三米米设计工工作室翻译 缓慢移动你的手手机。 检测到过度动作。 进入入增强现实 表明设备初始化和表面面检测的进程并使用用户参与:每次你的应用用进入入AR时, 都会发生生初始化过程,在此过程中,你的应用用将评估环境并检测表面面。表面面检 测时间可能因许多因素而而异。为了了减少可能的混淆,请表明你的应用用正在尝试 检测表面面,并通过缓慢扫描周围环境来鼓鼓励人人们加速此过程。 放置虚拟物体 表面面检测指示器器 物体位置指示器器 App 特定指示器器 帮助人人们了了解何时找到表面面并放置物体:视觉指示器器能很好地展示表面面定位模 式已激活。例例如,屏幕中心心的梯形标线可以帮助用用户推断出他们应该找到一一个 水水平或垂直的平面面。一一旦定位了了一一个表面面,指示器器就应该在外观上发生生变化, 以表示现在可以放置物体。如果指示器器的方方向与被检测表面面对⻬齐,它可以帮助 63
64. 3MiD 三米米设计工工作室翻译 用用户预测被放置的物体将如何对⻬齐。要把视觉指示器器设计成像是你的App体验 的一一部分。 当用用户放置物体时适当地作出响应:在表面面检测过程中精度逐渐提高高(在很短的 时间内)。如果用用户点击屏幕放置物体,请立立即使用用当前可用用的信息进行行行放置。 然后等到表面面检测完成,再对物体的位置进行行行细微调整。如果物体放置在被检 测表面面的边界之外,请将物体轻轻推回到表面面上。 不不要尝试将物体与检测到的表面面边缘精确对⻬齐:在AR中,表面面边界是近似值, 它可能随着用用户周围环境被进一一步分析而而发生生改变。 偏向直接对物体进行行行操作而而非非使用用单独的控件:当用用户可以触摸屏幕上的物体 并直接与其进行行行交互时,这种方方式代入入感更更强并且更更加直观,所以不不会让用用户 与屏幕不不同部分的单独控件进行行行交互。但请记住,当用用户在移动时,直接操作 会比比较困难。 允许用用户使用用标准、熟悉的手手势直接与虚拟物体进行行行交互:例例如,考虑支支持用用 于移动对象的单指拖动手手势,以及用用于旋转对象的双指旋转手手势。旋转通常应 该发生生在物体所在的表面面。例例如,放置在水水平表面面上的物体通常围绕物 体的纵 轴旋转。有关相关指导,请参阅 Gestures。 64
65. 3MiD 三米米设计工工作室翻译 通常需要保持简洁的交互:触摸手手势本质上是二二维的,但是AR体验涉及真实 世界的三个维度。考虑以下方方法来简化与虚拟物体的用用户交互。 在合理理范围内接近可交互虚拟物体时响应手手势:用用户难以精确地触摸小小、薄或 放置在一一定距离的物体上的特定区域。当你的应用用在可交互物体附近检测到手手 势时,最好假设用用户想要影响该物体。 考虑被用用户驱动的物体缩放是否必要:当物体(如玩具或游戏⻆角色色)不不具有固有 尺寸寸并且用用户希望看到它更更大大或更更小小时,缩放通常是合适的。对于类似于一一件 家具这样相对于真实世界而而言言尺寸寸有限的物体,如果物品设置为精确的尺寸寸, 则缩放无无关紧要。缩放不不是调整物体距离的补救措施。例例如,放大大物体使它看 起来更更加接近,但实际上物体仍然很远。 警惕潜在的手手势冲突:例例如,双指捏合手手势与两指旋转手手势非非常相似。如果你 实现了了这样两个类似的手手势,一一定要测试你的应用用,并确保它们被正确解读。 确保虚拟物体移动平稳:当用用户调整物体大大小小,旋转它们或将它们移动到新位 置时,不不应该出现跳动。 探索更更多有魅力力力的互动方方式:手手势不不是人人们与AR中的虚拟物体交互的唯一一方方 65
66. 3MiD 三米米设计工工作室翻译 式。 你的应用用可以使用用其他因素(如动作和接近度)将内容带入入生生活。例例 如,一一 个游戏⻆角色色会在用用户走走向它时转头看着用用户。 对用用户环境中的图像做出反应:你可以使用用用用户环境中的已知图像来触发虚拟 内容,从而而增强AR体验。你的应用用提供一一组2D参考图像,ARKit指示何时何地 在用用户环境中可以检测到这些图像。例例如,应用用可能会识别一一张科幻电影海海报, 然后从海海报中出现虚拟⻜飞船并在四周⻜飞行行行;一一家零售店的应用用可以通过识别放置 在⻔门两侧的海海报,让商店的前⻔门出现虚拟⻆角色色。 设计并显示参考图像以优化检测:当你提供参考图像时,可以指定你希望在用用 户环境中这些图像的物理理尺寸寸。提供更更精确的尺寸寸测量量有助于ARKit更更快速地 检测图像,并提高高对其真实世界位置估算精度。具有高高对比比度和显著细节的平 面面矩形图像的检测性能和精度是最好的。避免尝试检测出现在反射或曲面面的真 实世界表面面上的图像。 仅将检测到的图像用用作显示虚拟内容的参考框架:ARKit不不会跟踪被检测图像 位置或方方向的改。因此,如果您尝试精确地放置虚拟内容,就像在画中将胡须 放在脸上一一样,内容可能不不会保留留在原位。 限制一一次使用用的参考图像的数量量:当ARKit在用用户环境中查找25个或更更少的不不 同图像时,图像检测性能效果最佳。如果你的应用用需要超过25个参考图像,则 可以根据上下文文更更改一一组活动参考图像。例例如,博物馆指南应用用可以使用用核心心 位置来确定用用户当前所在地是博物馆的哪一一部分,然后仅查看该区域中显示的 图像。 有关更更多开发人人员指南,参⻅见在AR体验中的图像识别 。 处理理中断 避免不不必要地中断AR体验:当AR未激活时,ARKit无无法跟踪设备的位置和方方向。 66
67. 3MiD 三米米设计工工作室翻译 避免中断的一一种方方法是让人人们在体验中调整物体和设置。例例如,如果用用 户将他们正在考虑购买的椅子子放入入起居室,并且该椅子子可以采用用不不同的面面料料, 则允许他们在不不退出AR的情况下更更换面面料料。 使用用重定位从其他中断恢复:在中断期间,ARKit无无法跟踪设备的位置和方方向, 例例如用用户暂时切换到其他应用用或接听电话。中断之后,先前放置的虚拟物体可 能出现在错误的真实世界位置。当你启用用重定位时,ARKit会尝试恢 复将这些 虚拟物体回到其原始真实世界位置所需的信息。这个过程要求用用户将他们的设 备放置在与中断前一一致的位置和方方向。有关开发人人员指南,请参阅 ARSessionObserver 。 考虑隐藏先前放置的虚拟物体,直到重新定位完成:在重新定位期间,ARKit 试图将其以前的状态与用用户环境的新观察结果进行行行协调。在此过程完成之前, 虚拟物体的位置可能有误差。 允许用用户取消重定位:如果用用户无无法确定设备的位置和方方向并定位在中断前的 位置附近,则重新定位会无无限期地继续下去,但不不会成功。你需要引导用用户成 功恢复进程,或提供重置按钮和其它方方式,以便便用用户在重定位不不成功时重新启 动AR体验。 处理理问题 如果没有达到用用户预期,允许用用户重新设置体验:不不要强迫用用户等待条件的改 善或者陷入入物体如何放置的困境。给他们一一种重新开始的方方式,看看是否有更更 好的结果。 67
68. 3MiD 三米米设计工工作室翻译 如果发生生问题,建议进行行行修复:对用用户环境和表面面检测的分析可能由于各种原 因而而失败或花费太⻓长时间,例例如光线不不足足,表面面过度反射,表面面没有足足够的细 节,或者摄像头过度运动。如果你的应用用收到这些问题的通知,请提供解决这 些问题的建议。 问题 可行行行的建议 检测到的特征不不足足 尝试增加光线和四处走走动 检测到过度运动 尝试缓慢移动你的手手机 表面面检测花费时间太⻓长 尝试四处走走动,增加光线,确保你 的手手机指 向一一个有足足够纹理理的表面面 仅在有能力力力的设备上提供AR功能:如果你的应用用的主要用用途是增强现实,请仅 将你的应用用提供给支支持ARKit的设备。 如果你的应用用提供AR作为辅助功能(如 包含产品照片片并允许在AR中查看某些产品的家具目目录);如果用用户尝试在不不支支持 的设备上进入入AR,避免显示错误。如果设备不不支支持ARKit,首首先不不要提供可选 的AR功能。有关开发人人员指南,请参阅信息属性列列表项关键参考的UI必需的设 备功能中的 arkit key 以及 ARConfiguration 的 isSupported 。 AR字形 应用用可以在启动基于 ARKit 的体验的控件中显示 AR 字形。你可以在参考资料料 中下载该字形。 68
69. 3MiD 三米米设计工工作室翻译 按预期使用用 AR 字形:该字形应严格用用于启动基于 ARKit 的体验。切勿改变字 形(除调整其大大小小和颜色色外),或将其用用于其他目目的,或将其与不不使用用 ARKit 创 建的AR体验结合使用用。 保持最小小的净空间:AR字形周围需要的最小小净空间数值为字形高高度的10%。 不不要让其他元素以任何方方式占用用此空间或遮挡字形。 AR 徽章 包含产品集合或其他对象的应用用可以使用用徽章来标识特定项目目,并使用用 ARKit 在 AR 中查看。例例如,百货商店的应用用可能会使用用徽章来标记家具,以便便用用户 在购买前在家中预览家具。 69
70. 3MiD 三米米设计工工作室翻译 按预期使用用 AR 徽章,不不要改变它们:你可以在 Resources 中下载 AR 徽章, 可用用折叠和展开形式。这些图像专⻔门用用于识别可以在AR中查看的产品或其他对 象。切勿改变徽章及其颜色色,或将它们用用于其他目目的,或将其与不不使用用 ARKit 创建的AR体验结合使用用。 AR标志 只有象形AR标志 AR徽章比比字形徽章更更可取。一一般情况下,如果空间有限且不不能容纳AR徽章, 请使用用带字形徽章。两个徽章都能以默认尺寸寸正常工工作。 只有当你的应用用同时包含可以在AR中查看的对象和不不能查看的对象时,才使用用 徽章:如果你的应用用中的所有对象都可以在AR中查看,则徽章是多余且不不必要 的。 70
71. 3MiD 三米米设计工工作室翻译 保持徽章位置一一致和清晰:显示在对象照片片的一一个⻆角落时,徽章看起来最好。 始终将其放置在同一一个⻆角落,并确保它足足够大大以便便清晰可⻅见(但不不会太大大以至至于 遮挡照片片中的重要细节)。 保持最小小的清晰空间:AR徽章周围所需的最小小空间为徽章高高度的10%。其他元素 不不应侵占此空间或以任何方方式遮挡徽章。 了了解更更多 有关开发人人员指南,参⻅见 ARKit 。 4.2 多任务处理理(Multitasking) 多任务处理理功能可以让你通过iOS设备上的多任务界面面,或者在 iPad 上使用用多 点触控手手势,随时从一一个 App 快速切换到另一一个App。 在 iPad 上,多任务处 理理功能还可以让你在“幻灯片片”、“分割视图”或“画中画”模式下同时使用用两个 App。在屏幕右侧向左滑动可以进入入“幻灯片片”模式,它能让你在不不离开当前 App 的情况下暂时性地使用用第二二个 App,例例如在使用用 Safari 时快速查看 你的 邮件收件箱。“分割视图”模式可以让你同时使用用两个并排的 App,而而 “画 中 画” 模式可让你在使用用另一一个 App 时观看视频。 设计出一一个能够在多任务环境中良好运行行行的 App 取决于你的 App 可以与设备 上的其他 App 和谐共存。这意味着你的 App 不不应该占用用太多 CPU、内存、显 示屏幕或者其他系统资源。它应该很好地应对来自自其他 App 的突发干干扰和声 音音,能快速流畅地在显示界面面和后台来回切换,并且在后台运行行行时表现得可靠 稳定。 71
72. 3MiD 三米米设计工工作室翻译 做好随时中断的准备,并时刻准备着恢复:你的 App 能在任何时候被中断。 当中断发生生时,你的 App 应该快速精准地保存当前状态,这样当用用户返回时, 就可以无无缝地从他们离开的地方方继续使用用。 更更多开发细则,请参阅 App Programming Guide for iOS 中的 Preserving Your App’s Visual Appearance Across Launches 部分。 确保你的界面面能够适应双倍行行行高高的状态栏:一一些进程中的电话、录音音、共享功 能在屏幕顶部会显示额外的一一个状态栏。在一一些没有考虑该情况的App中,这 个增加的高高度会遮挡其他界面面元素或者把它们挤下去。你需要在这些情况下测 试你的 App,确保你的界面面能够应对自自如,并且仍然保持美观。 需要格外注意和应对暂停操作:如果你的 App 是一一个游戏或者媒体播放应 用用, 请确保你的用用户在切换到其他App时也不不会错过任何内容。当他们切换 回来时, 72
73. 3MiD 三米米设计工工作室翻译 让他们从上次离开的地方方继续使用用。 合理理处理理来自自应用用外的声音音:有时你的 App 的音音频可能会被来自自其他 App 或 是系统的声音音打断。比比如,来电铃声或是被 Siri 打开的音音乐播放列列表。当这些 情况发生生时,你的 App 应该以用用户预期的方方式处理理。对于重要的音音频干干扰,比比 如音音乐播放、广广播或有声读物,你的 App 应该立立刻暂停其音音频。 对于短暂的 干干扰,比比如 GPS 导航通知,你的 App 应该暂时降低音音量量或是先暂停音音频等待 干干扰结束,再继续播放。 了了解更更多指导,请参阅 Audio 。 在后台完成用用户发起的任务:当用用户开启了了一一个任务,即使离开了了 App 他们也 希望任务能够继续完成。如果你的 App 正在执行行行一一个不不需要用用户额外输入入的任 务,请在 App 回到前台前,在后台完成它。 有效控制通知次数:无无论你的 App 在前台、后台或是完全没有在运行行行,它 都 能在特定的时间给用用户推送通知。你可以使用用通知来传达重要讯息,但是 要避 免用用户被过多通知烦扰。比比如,当你的 App 在后台时,不不要每完成一一 个任务 就给用用户发送一一个通知。相反的,可以让用用户通过返回你的 App 来 查看任务 的完成情况。了了解更更多指导,请参阅 Notifications 。 了了解关于iPad特定的开发细则,请参阅 Adopting Multitasking Enhancements on iPad 。 4.3 通知(Notifications) 无无论设备是锁屏状态还是正在使用用中,App 都能随时利利用用通知功能来提供及时 和重要的信息。比比如,通知可能会在以下几几种情况发生生时出现:新消息到来时、 一一个事件将要发生生时、有新数据可获取时或是某些状态发生生改变时。 用用户可以 在锁屏上、屏幕顶部(使用用设备时),以及通知中心心(通过从屏幕 顶部边缘下滑呼 73
74. 3MiD 三米米设计工工作室翻译 出)看到通知栏。每个通知都包含 App 的名称、一一个 App 图标以及一一条消息。 通知也可能伴随着声音音提示,以及 App 图标上小小红点⻆角标的出现和更更新。 提示:通知可以是本地或是远程的。本地通知由同一一个设备发出和接收。一一 个 待办事项 App 可以使用用本地通知来提醒用用户一一个将要到来的会议或是到 期日日。 远程通知,也叫做推送通知,来自自一一个服务器器。一一个多玩家游戏就可 以使用用远 程通知让每个玩家知道什什么时候轮到他们。 通知表现 每个 App 的通知行行行为都可以在设置里里里单独管理理。只要是支支持通知功能的 App, 你可以完全地启用用或禁用用这个功能。你也可以设置通知是否在通知中心心和锁屏 上可⻅见,是否在 App 图标上出现⻆角标,以及选择以下一一种通知样式: 横幅:当设备在使用用时在屏幕顶部出现几几秒,然后消失。 提醒框:当设备在使用用时在屏幕顶部出现,直到被手手动关闭。 在未锁屏时点击通知,或是在锁屏时滑动这项通知,都可以实现以下几几种行行行 为: 结束通知、把它从通知中心心移除,打开发送通知的应用用并展示相关的内 容。比比 如,在未锁屏的设备上点击一一条新的邮件通知,就会打开邮箱并且显 示新的信 74
75. 3MiD 三米米设计工工作室翻译 息。 在未锁屏时,上滑通知或让它消失,或让它关闭通知,也可将它从通知中心心 移 除。 使用用 3D Touch 在一一个通知上按压,或是在未锁屏时下滑通知面面板,就能打 开 扩展的详情视图。这个视图支支持自自定义并且包含最多四个操作按钮。比比如, 一一 个待办事项 App 可以推送一一个含有详情视图的任务通知,上面面有可以推 迟任 务和标记为已完成的按钮;一一个日日历事件的通知提供了了“小小睡”功能来短 暂推迟 事件的闹铃。 注意:用用户在第一一次使用用 App 的时候,会被要求明确地选择是否接收来 自自该 App 的通知。如果有人人选择不不接收通知,他们同样也能通过访问“设置” 来选择 接收。 设计一一个很棒的通知体验 提供有用用的通知:用用户打开通知是为了了快速获得最新消息,所以你的重点是提 供有价值的信息。通知显示需要使用用完整的句句子子,句句首首英文文字⺟母大大写,合适的 标点符号,并且不不要删减你的信息——必要时系统会自自动处理理。当通知被关闭 时用用户很难再记住它们,所以要避免在通知中引导用用户打开你的App, 进入入指 定⻚页面面然后点击指定按钮来完成一一些任务。 75
76. 3MiD 三米米设计工工作室翻译 即使用用户没有作出回应,也不不要为同一一件事情发送多个通知:用用户只有在方方便便 时才会处理理通知。如果你为同一一件事发送了了多个通知,并且填满了了通知中心心, 那么用用户就很可能关闭所有来自自你的 App 的通知。 不不要在通知里里里包含你的 App 的名字和图标:系统会自自动在每条通知的顶部显示 这些信息。 提供描述性文文字,以便便在通知预览被隐藏时显示:根据用用户的设置,出于隐 私 考虑通知预览可能会被隐藏。在这种情况下,仅显示你的 App 图标和通用用描述 (通知是默认描述)。为了了向用用户提供足足够的内容,你的 App 应该提供能简洁描 述通知内容的自自定义文文本,如朋友请求,新评论,提醒或发货 开发者指南,请参阅 hiddenPreviewsBodyPlaceholder 。 提供声音音以辅助你的通知提醒:当用用户没有盯着屏幕时,声音音是一一个引起他们 注意的绝佳方方式。当一一个待办事项 App 开始执行行行重要任务时可能就会发出一一个 提示音音。你的 App 可以使用用自自定义声音音或是系统的提示音音来达到效果。如果你 使用用自自定义的声音音,请确保它是简短、与众不不同并且制作精良的。详情请参阅 Local and Remote Notification Programming Guide 中 的 Preparing Custom Alert Sounds 部分。需要注意的是用用户可以随时地关闭 通知提示音音。他们也可以开启伴随着声音音的振动——这只能被手手动开启,而而不不 是通过你的 App 程序自自动启用用。 考虑提供一一个详情视图:一一个通知的详情视图提供了了关于该通知的更更多信息, 并且允许他们在不不离开当前环境的情况下去执行行行快捷的操作。这个视图应该包 含有用用、易易识别的信息,让人人感觉就是一一个你的 App 的自自然延伸。它可以包含 图片片、视频以及其它内容,它还能在显示时动态更更新。比比如,一一个拼⻋车 App 就 能够在该窗口口显示一一张地图,并标出一一辆⻋车正在朝着你当前的位置驶来。 76
77. 3MiD 三米米设计工工作室翻译 提供直观、有用用的操作:一一个通知的详情视图能最多包含四个操作按钮。这些 按钮用用来执行行行常用用、省时的任务,而而不不用用打开你的 App。使用用简短、英文文首首字 ⺟母大大写的名称明确地描述该操作的含义。一一个通知的详情视图还能在屏 幕上呼 出一一个键盘用用来收集执行行行操作需要的信息。比比如,一一个通讯 App 可以允许用用户 直接在新消息通知的详情视图上回复。 避免展示破坏性的操作:要在通知详情视图里里里展示破坏性操作之前请仔细考量量。 如果你必须展示它们,确保用用户拥有足足够的上下文文信息,以避免出现意外后果。 破坏性的操作应该以红字呈现。 ⻆角标 ⻆角标是用用来补充说明通知,而而不不能用用来表示重要的信息:需要注意 App 的⻆角标 可以被关闭。如果你的 App 依赖于通过⻆角标来传达重要信息,就等于你在冒着 用用户会错过这些信息的⻛风险。 ⻆角标仅用用于通知: ⻆角标不不应该用用于显示其他类型的数字信息,例例如空气气质量量, 日日期,股票价格或天气气。 保持⻆角标实时更更新:当收到对应的消息时要立立即更更新你的 App 的⻆角标数字。 用用户只有在看到确切提示之后才会进入入你的App查看。请注意,将⻆角标上的数 字清零意味着同时在通知中心心移除所有相关的通知栏。 开发者指南,请参阅 Local and Remote Notification Programming Guide 。 4.4 打印(Printing) 你的 App 可以利利用用系统自自带的 AirPrint 技术来使用用兼容的打印机实现图片片、 PDF 以及其它内容的无无线打印。当用用户在有 AirPrint 功能的应用用内浏览可打 77
78. 3MiD 三米米设计工工作室翻译 印的内容时,他们可以通过点击导航栏或是工工具栏上的操作按钮打开选项面面 板, 然后再点击打印按钮来打开打印视图。 这个视图提供了了一一个可用用打印机的列列表 以及一一些自自定义选项,比比如打印的份数、⻚页面面范围,并且提供了了一一 个开始打印 的的按钮。 让打印选项易易于发现:如果你的 App 有一一个工工具栏或是导航栏,请使用用系统提 供的操作按钮来打印。用用户对这个按钮更更加熟悉,并且在其它应用用中也 是用用它 来打印。如果你的 App 没有工工具栏或是导航栏,那么设计一一个自自定 义的打印 按钮来代替。 只在可以打印的情况下才允许打印:如果在你的屏幕上没有任何内容或是没有 可用用的打印机,那么在用用户点击操作按钮后禁用用打印按钮。如果你 的 App 使 78
79. 3MiD 三米米设计工工作室翻译 用用自自定义的打印按钮,在无无法打印时让其不不可点击或是隐藏它。 提供有用用的打印选项:思考用用户在打印你的内容时会想要指定哪些选项。 可以 考虑选择⻚页面面范围和打印份数的选项。也可以启用用附加的选项,比比如双面面打印, 如果这样有意义并且打印机也支支持的话。 开发者指南,请参阅Drawing and Printing Guide for iOS 和 UIPrintInteractionController 4.5 快速查看(Quick Look) 在你的app中,快速查看功能可以让用用户预览 Keynote、Numbers、Pages、 PDF文文档、图片片以及其它类型的文文件,即使你的应用用并不不支支持这些文文件格式。 也可以使用用该功能来查看邮件的附件。在下载附件之后,邮件信息中会显示 附 件的图标和文文件名。点击图标就能预览附件。 79
80. 3MiD 三米米设计工工作室翻译 在当前环境下合理理地展现预览窗口口:在 iPhone 上,如果你的 App 有导航栏, 让预览视图下移留留出位置给导航栏,就和你的 App 其它层级的视图一一样。 在 iPad或是没有导航栏的 App 内,用用全屏有导航栏的模态视图中打开预览 视图。 通过以上两种方方法,导航栏就能提供退出快速查看状态的按钮,以及预览特定 的一一些按钮,比比如分享和标记这样的操作。如果你的 App 包含一一 个工工具栏, 那么预览特定的按钮就会在工工具栏出现而而不不是导航栏。 开发者指南,请参阅 Document Interaction Programming Topics for iOS 和 Quick Look 。 4.6 评级和评价(Ratings and Reviews) 评级和评价可以帮助用用户在考虑是否尝试 App 时做出合理理的决定。良好的评级 80
81. 3MiD 三米米设计工工作室翻译 和积极的评论意味着你的 App 能获得更更多下载,用用户反馈可以让你深入入了了解你 的 App 在现实世界的使用用情况,从而而更更好地帮助你实现未来的开发工工作。 提供良好的整体体验是提升评级和鼓鼓励积极评价的最佳方方法,但在适当的时候 要求提供反馈也很重要。在请求用用户对你的 App 进行行行评级时,请牢记这些注意 事项: 在用用户与你的 App 有一一定程度互动后再请求用用户对其进行行行评级:例例如,在达到 某个游戏等级或完成某个生生产任务时提示用用户。绝对不不要在用用户第一一次使用用或 者进行行行新手手引导时请求评级。给用用户充足足的时间,让他们对你的 App 有自自己己的 意⻅见。 不不要中断用用户:特别是当他们在执行行行紧急或压力力力很大大的任务时。寻找合适的时 机发送评级请求。 不不要变得让用用户讨厌:重复的评级提示可能会刺刺激,甚至至可能会让用用户对你的 App 产生生负面面情绪。评级请求至至少间隔一一周或两周,并在用用户与你的 App 有 进一一步互动后可以再次提示。 系统评级和审查提示 系统为 App 提供了了一一致且不不干干扰的方方式来请求用用户进行行行评级和评论。要使用用此 功能,你只要识别你的用用户在体验中反馈意⻅见的位置。如果用用户尚未提 供反馈, 并且你的 App 最近也没有提出请求,那么系统将显示一一个应用用内提示,请求用用 户进行行行评级和评论。用用户可以点击提供反馈或关闭提示。(在 “设置”中,用用户 还可以选择不不接收所有已安装应用用的评级请求提示。)在365 天的周期内,系统 自自动限制每个App的提示显示次数为三次。 81
82. 3MiD 三米米设计工工作室翻译 最好使用用系统提供的提示:系统的评级提示提供了了一一个熟悉,有效的体验, 旨 在使用用户的影响最小小。 不不要使用用其他控件来请求反馈: 由于系统限制了了评级提示出现的频率,所以尝 试用用控件请求反馈可能会导致不不显示评级提示。 开发者指南,请参阅 StoreKit 中的 SKStoreReviewController 。 提示:回复用用户评论是一一个与用用户沟通,解决问题,并可能提高高App评级的 好方方 法。更更多操作指南,请参阅 Responding to Reviews on the App Store 。 82
83. 3MiD 三米米设计工工作室翻译 4.7 截图 (Screenshots) 用用户可以通过截取屏幕截图来捕获屏幕上显示的内容。从 iOS 11 开始,屏幕截 图在被截取后会在屏幕底部以预览形式简要显示。用用户可以将预览图滑动 到屏 幕边缘来关闭它(如果用用户没有任何操作,预览窗口口会在几几秒钟后自自动关闭), 点击预览窗口口即可快速访问即时标记和共享工工具。屏幕截图被保存 到“照片片”中 的“截图”专辑中。 截取本地屏幕时,请勿更更改 App 的界面面:系统提供的屏幕截图功能在截取截图 时提供了了足足够的界面面和功能。自自定义截图启动界面面的更更改和功能是重复的,不不 必要的,可能会令人人困惑。如果你的 App 适用用该功能,当其他用用户使用用该设备 截取截图时,可以提醒用用户。 83
84. 3MiD 三米米设计工工作室翻译 4.8 电视提供商(TV Providers) 你的 App 可以与 TV App 和 single sign-on 进行行行交互,为用用户提供高高度方方便便 和一一致的娱乐体验。 TV App 交互 TV App 可以全面面访问系统的收藏,最近播放的,以及推荐的电影和电视节 目目。 观看 Westworld 在 HBO NOW 的订阅。HBONOW® 只能通过美国和某些美 84
85. 3MiD 三米米设计工工作室翻译 国地区的合作伙伴进行行行访问。某些限制申请,©2016 Home Box Office , Inc. 保 留留所有权。HBO®,HBONOW® 以及相关渠道和服务商标均为 Home Box Office,Inc.的财产。通过订阅或认证可以观看 STARZ 上的 Power。 Power 为 ©2016 Starz Entertainment , LLC 版权所有。 开始并恢复播放 当用用户请求在 App 中重放内容时,TV App 会自自动打开你移动端的 App, 并 向你的移动设备发送通知。 确保平滑过渡到你的App:转换到移动设备上的 App 时,TV App 会变成黑黑色色, 且不不会显示启动屏幕。移动端的App应该在开始播放或恢复内容之前立立即呈现 黑黑屏,保持视觉连续性。 立立即显示预期内容:用用户期望在你的 App 转换完成后,所选内容就开始播 放 (从 App 的黑黑屏直接跳到播放内容)。避免提供闪屏,详细屏幕,介绍 动画或任 何其他花费时间的障碍。这在恢复播放时尤为重要。 不不要询问用用户是否要恢复播放:如果可以恢复播放,则应自自动执行行行此操作而而 无无 需提示确认。 确保为正确的用用户播放内容:如果你的 App 支支持多个用用户配置文文件,TV App 可以在发出播放请求时指定配置文文件。开始播放之前,你的 App 应自自 动切换 至至这个设定。如果播放请求没有指定配置文文件,则请求用用户在播放开 始之前选 择一一个,以便便将来可以直接提取此信息。 载入入内容 如果加载需要两秒以上,请考虑显示一一个带有动态加载图标的黑黑色色屏幕,且不不 85
86. 3MiD 三米米设计工工作室翻译 没有其他内容。 尽可能避免使用用加载屏幕:如果您的内容快速加载,则不不需要加载屏幕。 尽快开始播放:如果需要加载屏幕,加载足足够的内容之后再开始播放,并继续 在后台加载剩余的内容。 设计黑黑色色加载屏幕:在内容播放的过渡期间,可能会显示加载屏幕。为了了与 TV App 的淡入入淡出功能相融合,所以应该显示黑黑色色屏幕。 加载屏幕上的内容最小小化:如果你一一定要让加载屏幕上包含品牌或图像,请尽 量量保持黑黑色色背景并无无缝衔接播放。 退出播放 退出播放后,用用户仍然在你的 App 中,而而不不是返回到 TV App。不不要让用用户迷 失方方向。 显示一一个有相关内容的屏幕:退出播放时,保留留用用户正在观看内容的屏幕视 图, 并包含一一个恢复播放的选项。如果详细信息屏幕不不可用用,请显示一一个包含用用户 正在观看的内容或你的 App 主菜单的菜单。 准备即时退出: 在收到回放通知后尽快准备退出屏幕,以便便用用户即使在播放开 始后立立即退出,也可以看到退出画面面。 单点登录 许多流行行行的电视提供商允许用用户在系统级别登录他们的帐户,消除了了逐个应 用用 验证身份的需要。如果你的App 需要电视提供商进行行行身份验证,请使用用 此功能 提供最有效的入入⻔门体验。 86
87. 3MiD 三米米设计工工作室翻译 当用用户在系统级别登录时,避免显示退出选项:如果你的 App 必须包含退出选 项,则调用用该选 项,将用用户指向“设置”>“电视提供商”以退出其帐户。 不不要通过调整隐私控制来指示用用户退出: “设置”>“隐私”中的电视提供商控制不不 是退出机制。这些设置可以让用用户管理理可访问其电视提供商帐户的 App。 5.视觉设计(Visual Design) 5.1适应性和布局(Adaptivity and Layout) 人人们总是希望他们的所有设备,随时随地都能使用用他们喜欢的App 。在iOS中, 87
88. 3MiD 三米米设计工工作室翻译 界面面元素和布局能够自自动改变形状和大大小小以匹配不不同的设备,比比如在iPad中多 任务操作时、分屏模式时以及屏幕旋转时的显示。因此,你必须设计一一个适应 性强的界面面,在任何环境中都能提供良好的(用用户)体验。 设备屏幕尺寸寸 iOS设备有各种不不同的屏幕尺寸寸,可以横屏或者竖屏使用用。 想要更更多了了解屏幕分辨率如何影响App中的显示效果,请参阅 Image Size and Resolution. 88
89. 3MiD 三米米设计工工作室翻译 自自动布局 自自动布局是构建自自适应界面面的开发工工具。你可以定义App的内容规则。例例如, 您可以约束一一个按钮,使其总是水水平居中,并且位于图像下方方8点,而而不不管可 用用的屏幕空间如何。 当检测到某些场景变化(称为特征)时,自自动布局将根据特定约束自自动调整布局。 你可以将 APP 设置为动态适应特征,包括: 当检测到App使用用环境变化(称为特征)时,自自适应会根据指定的约束自自动重 新调整布局。您可以将应用用设置为动态适应各种特征,包括: ● 不不同的设备屏幕尺寸寸、分辨率和颜色色(显示)模式(sRGB/P3)(screen sizes, resolutions, and color gamuts (sRGB/P3)) ● 不不同的设备方方向(横屏 / 竖屏) ● 拆分视图(Split view) ● 在iPad上的多任务处理理模式(Multitasking) ● 动态文文本的大大小小变化(Dynamic Type) ● 场景定制的国际化特征(布局方方向的从左到右或者从右到左,日日期/时 间/数 字格式,字体变化,文文本⻓长度) 89
90. 3MiD 三米米设计工工作室翻译 ● 系统特性可用用性(3D Touch) 开发者指南,请参阅,Auto Layout Guide 和 UITraitCollection 。 布局引导和安全区域 布局引导定义了了在屏幕上实际上并没有显示的矩形区域,但对内容的定位、 对 ⻬齐和间距提供了了帮助。该系统包含预定义的布局引导,可以方方便便地在内容 周围 应用用标准的边缘,并限制文文本的宽度以达到最佳的可读性。你还可以自自定义布 局引导。 遵守 UI Kit 定义的安全区域和布局边界:这些布局引导可以根据设备和(显示)内 容进行行行适当的嵌入入,安全区域还可以防止止内容对状态栏、导航条、工工具栏和标 签栏的影响。标准系统提供的视图自自动采用用安全区域布局引导。 了了解更更多开发 者的指南,请参 阅 UILayoutGuide, layoutMarginsGuide, readableContentGuide, 和 safeAreaLayoutGuide。 尺寸寸类型 尺寸寸类型是根据它们的大大小小自自动的分配内容区域。该系统定义了了两个尺寸寸种类, 常规的(表示可拉伸的空间)和固定的(表示固定⻓长度的空间),描述视图的高高度和 宽度。 视图可以拥有任何尺寸寸类型的组合: 90
91. 3MiD 三米米设计工工作室翻译 ● 常规的宽度,常规的高高度 ● 紧凑的宽度,紧凑的高高度 ● 常规的宽度,紧凑的高高度 ● 紧凑的宽度,常规的高高度 与其他环境变化一一样,iOS基于内容区域的尺寸寸是动态地进行行行布局调整的。 例例 如,当垂直尺寸寸种类从固定高高度变为常规高高度时,可能是因为用用户将设备从横 屏旋转到竖屏,标签栏可能会更更高高。 设备尺寸寸类型 基于屏幕尺寸寸,不不同尺寸寸类型的组合应用用于不不同设备的全屏体验。 设备 竖屏方方向 横屏方方向 12.9" iPad Pro 常规的宽度, 常规的高度 常规的宽度, 常规的高度 10.5" iPad Pro 常规的宽度, 常规的高度 常规的宽度, 常规的高度 9.7" iPad 常规的宽度, 常规的高度 常规的宽度, 常规的高度 7.9" iPad mini 4 常规的宽度, 常规的高度 常规的宽度, 常规的高度 iPhone XS Max 紧凑的宽度,常规的高 度 常规的宽度,紧凑的高 度 iPhone XS 紧凑的宽度,常规的高 度 紧凑的宽度, 紧凑的高度 Phone XR 紧凑的宽度,常规的高 度 常规的宽度,紧凑的高 度 91
92. 3MiD 三米米设计工工作室翻译 iPhone X 紧凑的宽度, 常规的高度 紧凑的宽度, 紧凑的高度 iPhone 8 Plus 紧凑的宽度, 常规的高度 常规的宽度, 紧凑的高度 iPhone 8 紧凑的宽度, 常规的高度 紧凑的宽度, 紧凑的高度 iPhone 7 Plus 紧凑的宽度, 常规的高度 常规的宽度, 紧凑的高度 iPhone 7 紧凑的宽度, 常规的高度 紧凑的宽度, 紧凑的高度 iPhone 6s Plus 紧凑的宽度, 常规的高度 常规的宽度, 紧凑的高度 iPhone 6s 紧凑的宽度, 常规的高度 紧凑的宽度, 紧凑的高度 iPhone SE 紧凑的宽度, 常规的高度 紧凑的宽度, 紧凑的高度 多任务的尺寸寸类型 在iPad上,当你的App在进行行行多任务处理理时,尺寸寸类型也同样适用用。 设备 模式 竖屏方方向 12.9" iPad Pro 2/3 拆分视 图 紧凑的宽度, 常规的高高 常规的宽度, 常规的高高 度 度 1/2 拆分视 图 紧凑的宽度, 常规的高高 常规的宽度, 常规的高高 度 度 1/3 拆分视 图 紧凑的宽度, 常规的高高 紧凑的宽度, 常规的高高 度 度 2/3 拆分视 图 紧凑的宽度, 常规的高高 常规的宽度, 常规的高高 度 度 10.5" iPad Pro 92 横屏方方向
93. 3MiD 三米米设计工工作室翻译 9.7" iPad 7.9" iPad mini 4 1/2 拆分视 图 紧凑的宽度, 常规的高高 紧凑的宽度, 常规的高高 度 度 1/3 拆分视 图 紧凑的宽度, 常规的高高 紧凑的宽度, 常规的高高 度 度 2/3 拆分视 图 紧凑的宽度, 常规的高高 常规的宽度, 常规的高高 度 度 1/2 拆分视 图 紧凑的宽度, 常规的高高 紧凑的宽度, 常规的高高 度 度 1/3 拆分视 图 紧凑的宽度, 常规的高高 紧凑的宽度, 常规的高高 度 度 2/3 拆分视 图 紧凑的宽度, 常规的高高 常规的宽度, 常规的高高 度 度 1/2 拆分视 图 紧凑的宽度, 常规的高高 紧凑的宽度, 常规的高高 度 度 1/3 拆分视 图 紧凑的宽度, 常规的高高 紧凑的宽度, 常规的高高 度 度 布局注意事项 确保重要内容在默认大大小小下清晰可读:除非非用用户选择调整大大小小,否则不不应该让用用 户横向滑动才能阅读重要的文文字信息,或者放大大才能看清重要的图片片。 在整个App中保持一一致的视觉外观:一一般来说,具有相似功能的元素应该看起来 类似。 利利用用视觉权重和平衡来表示重要性:大大的对象比比小小的对象更更能抓住人人的眼球,显 得更更重要。大大的对象也更更容易易点击,这在容易易分散注意力力力的使用用环境中(如厨房 或健身房)使用用时这点尤为重要。一一般来说,处于从左往右的阅读环境时把首首要 的对象放在屏幕的上半部分并且偏左的位置。 利利用用对⻬齐来方方便便浏览,并且表达结构和层级:对⻬齐会让App看起来整⻬齐有次序, 当⻚页面面滑动时有助用用户聚焦,更更容易易找到信息。缩进和对⻬齐还可以表明多组内 93
94. 3MiD 三米米设计工工作室翻译 容之间的关系。 如果可能,同时支支持竖屏和横屏模式:用用户更更喜欢在两种模式下都能使用用 App, 所以最好能够满足足他们的期望。 准备好应对文文本大大小小的改变:当用用户在设置里里里选择了了不不同的文文本大大小小,他们总是 希望大大部分的 App 都能适配。为了了适应某些文文本大大小小的改变,你可能需要调整 布局。了了解更更多关于应用用内文文本使用用的信息,请参阅 Typography 。 为可交互元素提供足足够的空间:尽量量让所有控件都有不不小小于 44pt x 44pt 的点击 区域。 94
95. 3MiD 三米米设计工工作室翻译 在多个设备上预览您的应用用。您可以使用用模拟器器(Xcode附带)来快速预览您 的应用用程序并检查剪切和其他排版问题。如果您的应用用支支持横向模式,请确保 您的布局看起来很棒,无无论设备是向左还是向右旋转。全屏iPhone不不支支持倒置 肖像模式。某些功能(如宽彩色色图像)最适合在实际设备上预览。 在较大大的设备上显示文文本时,使用用可读性边距:这些边距保持文文本每行行行都足足够 短,可以确保舒适的阅读体验。 适应语境的变化 环境变化时保持当前内容的焦点不不变:内容是你的最高高优先级。让焦点随着环境 变化而而发生生改变是会让用用户困惑的,感觉当前的 App 失控了了。 95
96. 3MiD 三米米设计工工作室翻译 避免无无缘由的布局变动:即使用用户旋转了了设备,也不不代表整体的布局需要变 换: 比比如,如果你的App 在竖屏模式展示了了一一网网格的图片片,那么在横屏模式你没必 要展示同样的图片片。相反地,你只需要简单地调整网网格的尺寸寸就行行行了了。尽量量在 任何环境下都能维持一一样的体验。 如果你的 App 只支支持一一种模式,那么请提供两种屏幕模式的变量量:如果你的 App 只能在一一种模式下运行行行,那么确保它能够支支持该模式的两种方方向变化是十十 分重要的。比比如,如果你的 App 只在横屏模式运行行行,那么无无论Home 键在左边 还是右边,应用用都该能正常使用用。如果设备被旋转180度,那么你的 App 内容 也该同时旋转180度。反之,当用用户拿错设备方方向时,你的 App 没有自自动旋转, 那么他们就会很自自然地知道应该旋转设备。你无无需告诉他们该如何纠正。 根据当前使用用内容来规定相应的旋转方方向:比比如,一一个需要用用户旋转设备来控制 ⻆角色色移动的游戏,就不不会在游戏中改变横竖屏的方方向。但是,它可以根据当前 设备的旋转方方向来展示菜单和引导步骤。 确保你的应用用在iPad上也能运行行行:用用户很高高兴能够灵活地在任一一类型的 iOS 设 备上运行行行你的应用用。即使你希望大大多数人人在iPhone上使用用你的应用用,但其界面面 元素在iPad上仍需保持可⻅见并且实用用。如果应用用的某些功能需要特定于iPhone 的硬件(如 3D Touch),请考虑在iPad上隐藏或禁用用这些功能,并让用用户使用用应 用用的其他功能。 96
97. 3MiD 三米米设计工工作室翻译 在重用用现有艺术作品时,请注意宽高高比比差异。不不同的屏幕尺寸寸可能具有不不同的 宽高高比比,导致艺术品出现裁剪,信箱或邮筒。确保所有显示尺寸寸都能保留留重要 的可视内容。 设计全屏体验 扩展可视元素以填充屏幕。确保背景延伸到显示器器的边缘,并且垂直可滚动的 布局(如表和集合)一一直延伸到底部。 避免将交互式控件明确放置在屏幕的最底部和⻆角落中。人人们使用用显示屏底部的 滑动手手势来访问主屏幕和应用用切换器器等功能,这些手手势可能会取消您在此区域 中实现的自自定义手手势。屏幕的远⻆角可能是人人们舒适地到达的困难区域。 97
98. 3MiD 三米米设计工工作室翻译 插入入必要内容以防止止剪裁。通常,内容应该居中且对称插入入,因此它在任何方方 向上看起来都很好,没有被圆⻆角修剪,没有被传感器器外壳隐藏,并且不不会被用用 于访问主屏幕的指示器器遮挡。为获得最佳效果,请使用用标准的,系统提供的界 面面元素和自自动布局来构建界面面并遵循布局指南和安全区域由UIKit定义。当设备 处于横向时,某些类似应用用的游戏可能适合在屏幕的下半部分(延伸到安全区 域下方方)放置可点击控件,以便便为内容留留出更更多空间。在屏幕顶部和底部放置 控件时使用用匹配的插入入,并在Home指示器器周围留留出足足够的空间,以便便人人们在 尝试与控件交互时不不会意外地将其作为目目标。 插入入全宽按钮。延伸到屏幕边缘的按钮可能看起来不不像按钮。尊重全宽按钮两 侧的标准UIKit边距。当屏幕底部出现圆⻆角并与安全区域的底部对⻬齐时,屏幕底 部出现的全宽按钮效果最佳 - 这也确保它不不会与Home指示灯冲突。 请勿掩盖或特别注意按键显示功能。不不要试图通过在屏幕的顶部和底部放置黑黑 条来隐藏设备的圆⻆角,传感器器外壳或用用于访问主屏幕的指示器器。不不要使用用括号, 边框,形状或教学文文本等视觉装饰来特别注意这些区域。 98
99. 3MiD 三米米设计工工作室翻译 请注意状态栏高高度。全屏iPhone上的状态栏比比旧款iPhone更更高高。如果您的应用用 假设状态栏高高度为状态栏下方方的定位内容,则必须更更新您的应用用以根据用用户的 设备动态定位内容。请注意,当语音音录制和位置跟踪等后台任务处于活动状态 时,全屏iPhone上的状态栏不不会更更改高高度。 如果您的应用用当前隐藏了了状态栏,请重新考虑全屏iPhone的决定。与旧款 iPhone相比比,全屏iPhone的内容垂直空间更更大大,状态栏占据了了您的应用用可能无无 法充分利利用用的屏幕区域。状态栏还显示人人们认为有用用的信息。它只应隐藏以换 取附加值。 允许自自动隐藏指示器器以便便谨慎访问主屏幕。启用用自自动隐藏后,如果用用户未触摸 屏幕几几秒钟,指示灯会淡出。当用用户再次触摸屏幕时,它会重新出现。应仅针 对播放视频或照片片幻灯片片等被动查看体验启用用此行行行为。 其他布局注意事项 确保您的网网站在边缘到边缘的显示上看起来很棒。请参阅webkit.org上的为 iPhone X设计网网站。 99
100. 3MiD 三米米设计工工作室翻译 5.2 动效(Animation) 贯穿于 iOS 系统的优美、精细的动画在用用户和屏幕屏幕内容之间建立立了了一一种视 觉上的联系。当动画被合理理利利用用时,它能够表达状态、提供反馈、加强直接操 纵感,并且视觉化呈现用用户的操作结果。 明智且审慎地使用用动画和动效:不不要为了了使用用动画而而动画。过度或是无无理理由的动 画会让用用户有不不连贯和错乱的感觉,尤其是在那些不不能提供沉浸式体验 的 App 中。iOS 经常使用用动效,比比如在主屏和其它地方方使用用了了视差效果,来建立立用用户 的沉浸感受。这些效果有助于增强理理解和提升愉悦感,但是滥用用它们就会让一一 个 App 变得难以控制。如果你想使用用动效,一一定要提前进行行行 用用户测试以保证 它们真的能不不辱使命。 100
101. 3MiD 三米米设计工工作室翻译 力力力求真实性和可信性:用用户可以接受艺术创造,但是当动效没有意义或是违背了了 物理理定律律时,用用户就会感到混乱。打个比比方方,如果用用户通过在屏幕顶部下滑出 一一个视图,那么他们应该也能通过上滑将该视图关闭。 使用用连贯的动画:一一个熟悉并流畅的体验能一一直让用用户参与其中。用用户已经习惯 了了贯穿于 iOS 系统的精细动画,比比如平稳的过渡、横竖屏之间的流畅转换和基 于物理理现实的滚动。 除非非你在创造一一个沉浸式体验,比比如游戏,不不然自自定义动 画都应该和系统动画相符。 让动效可选:当在辅助功能偏好设置中启用用减少动作的选项时,App 应尽可能减 少或消除应用用程序动画。 5.3 品牌化 (Branding) 成功的品牌化不不仅是单纯地在应用用中添加品牌元素。优秀的 App 通过优雅别致 的文文字、颜色色和图片片来营造独特的品牌辨识度。提供足足够多的品牌元素让用用户 感觉是处在你的 App 中,但不不要因为过度使用用而而造成干干扰。 融入入精妙的、不不唐突的品牌元素: 用用户使用用你的 App 是获得娱乐、得到信息或 101
102. 3MiD 三米米设计工工作室翻译 是做某些事情的,而而不不是为了了观看一一个广广告。要想达到最好的体验,请巧妙地 将品牌融于 App 设计中。让 App 图标的颜色色贯穿整个 App 设计, 不不失为一一 种很好的专属使用用界面面。 不不要让品牌化阻碍了了优秀的 App 设计: 首首先,让你的 App 像是一一个 iOS App。 保证它是直观的、易易于导航的、易易用用的并且以内容为中心心的。当你的 App 在其 它平台也适用用,不不要为了了保持品牌的一一致性而而牺牲了了设计的质量量。 内容比比品牌化更更重要: 在屏幕顶部放置一一个除了了展示品牌元素以外没有任何用用 途的头部栏,就意味着牺牲了了用用来浏览内容的空间。取而而代之的,考虑采用用低 侵入入性的方方式来实现品牌化,比比如使用用自自定义的配色色方方案和字体,或是巧妙地 自自定义背景。 克制住想要在应用用中到处展示 logo 的诱惑: 避免在 App 中到处展示 logo, 除 非非它是品牌化中必不不可少的一一部分。这点在导航栏中尤其重要,因为提供一一个 标题比比 logo 更更加有用用。 遵循 Apple 的商标准则: Apple 的商标不不能在你的 App 名字或是图像中出现。 请参阅 Apple Trademark List 和 Guidelines for Using Apple Trademarks 。 注意: App Store 为突出你的品牌提供了了更更多的机会。了了解相关指导,请参阅 App Store Marketing Guidelines 。 5.4 颜色色 (Color) 颜色色是增加活力力力,提供视觉连续性,沟通状态信息,响应用用户操作的反馈并帮 助人人们可视化数据的好方方法。在挑选 App 色色调的颜色色时,请参考系统的色色彩方方 案,以保证这些颜色色无无论是单独还是组合、在浅色色背景还是深色色背景上都看起 102
103. 3MiD 三米米设计工工作室翻译 来很棒。 明智地使用用颜色色进行行行沟通: 谨慎地使用用颜色色来强调重要信息。例例如,当 App 中 其他不不重要的信息也使用用了了红色色时,警告人人们严重问题的红色色三⻆角形就显得没 有那么明显。 在App内使用用互补的颜色色: 你的 App 内的颜色色应该协调,不不会互相冲突和干干扰。 如果你的 App ⻛风格的基础色色调是柔和的,那么使用用一一系列列与之协调的柔和色色 调。 一一般来说,选择与你的 App Logo 相符的颜色色地色色板: 巧妙地使用用颜色色是一一个 传达品牌的好办法。 在 App 中统一一使用用一一种关键色色来显示可交互性: 在 Note 中,可交互的元素是 ⻩黄色色的。在 Calendar 中,可交互的元素是红色色的。如果你定义了了一一种 关键色色 用用于传递可交互性,那么你要保证其它颜色色不不会与之冲突。 避免给可交互和不不可交互的元素使用用相同的颜色色:如果可交互和不不可交互的元素 是同一一种颜色色, 用用户就很难知道到底哪里里里是可点击的。 103
104. 3MiD 三米米设计工工作室翻译 考虑图像和半透明度如何影响周边元素的颜色色: 图像的变化有时可以改变附近 颜色色,以保持视觉连续性,并防止止界面面元素变得太强烈烈或者不不能引起用用户的注 意。例例如,地图在使用用地图模式时显示浅色色方方案,但在激活卫星模式时切换到 深色色方方案。当放置在半透明元素后面面时,或当应用用于半透明元素(例例 如工工具栏) 时,颜色色也可能会不不同。 104
105. 3MiD 三米米设计工工作室翻译 在多种光线条件下测试你的 App 颜色色: 光线在室内和室外、房间氛围、不不同的 时间、气气候等条件下会发生生明显地变化。你的 App 在现实世界中使用用 时看到 的颜色色不不会一一直和你在电脑上看到的颜色色相同。你应该在不不同的光线条件下预 览,来观察颜色色的真实表现,比比如在晴朗的户外。必要时,应当调整颜色色以求 在大大多数的使用用场景下提供最好的视觉体验。 考虑 True Tone 显示屏对颜色色的影响: True Tone 显示屏利利用用了了环境光传感器器 来自自动调整显示屏的白白点,以适应当前环境下的光线情况。专注于阅读、照片片、 视频和游戏的App可以通过确定一一种白白点纠正模式来强化或弱化 True Tone 的 105
106. 3MiD 三米米设计工工作室翻译 效果了了解更更多实现细节,请参阅 Information Property List Key Reference 。 关注色色盲用用户: 不不同的用用户看⻅见的颜色色是不不一一样的。比比如,很多色色盲用用户很难 分辨红色色和绿色色(以及任何灰色色),或是蓝色色和橘色色。避免把这些颜色色组合作为 区分两种状态或值的唯一一方方式。比比如,用用红色色方方块和绿色色圆形来表示下线和上 线状态,而而不不是用用红色色和绿色色的圆形。有些图形编辑软件含有能够 帮助你证明 你是否是色色盲的工工具。 考虑一一下在其他国家和文文化中如何使用用颜色色: 例例如,在某些文文化中,红色色代表 着危险。在其他文文化中,红色色有积极的含义。确保你的App中的颜色色表达出恰 106
107. 3MiD 三米米设计工工作室翻译 当的信息。 使用用足足够的颜色色对比比度: 在 App 中,过低的对比比度会让内容难以阅读。比比如图 标和文文本可能会和背景融合。网网上有颜色色对比比度计算器器能够帮助你精确的分析 App中的颜色色对比比度,以确保它符合最佳标准。请确保你的 App 对比比度至至少达 到 4:5:1 ,但是 7:1 更更好,因为它更更符合严格的功能标准。 颜色色管理理 在你的图像中应用用颜色色配置文文件: iOS 的默认颜色色空间是标准 RGB (sRGB)。 为了了确保颜色色与这个颜色色空间的匹配,确保你的图像包含了了嵌入入的颜色色配置文文 件。 107
108. 3MiD 三米米设计工工作室翻译 使用用广广色色域来增强在兼容显示器器上的视觉体验: 广广色色域显示支支持P3色色空间,它 能让 sRGB 更更丰富、更更饱和。因此,使用用广广色色域的照片片和视频更更逼真,使用用广广 色色域的视觉数据和状态指示器器更更具影响力力力。在适当的时候,使用用显示P3颜色色配 置文文件的16位/像素(每个通道)并导出图像 png 格式。请注意,需要广广色色域显示 器器来设计广广色色域图像并选择P3颜色色。 在需要的时候提供空间特定的图像和颜色色变化: 一一般来说,P3的颜色色和图像会 在 sRGB 设备上显示出来。然而而,有时在 sRGB 设备上出现两种非非常相似的P3 颜色色可能很难区分。在P3光谱中使用用颜色色的渐变有时也会出现在 sRGB 设备上。 为了了避免这些问题,您可以在 Xcode 项目目的资产目目录中提供不不同 的图像和颜 色色,以确保在宽颜色色和 sRGB 设备上的视觉保真度。 在实际的sRGB和大大屏幕上预览你的应用用的颜色色: 根据需要进行行行调整,以确保在 这两种类型的显示器器上都有同样出色色的视觉体验。 注意: 在 mac 设备中的光色色域显示器器中,你可以使用用系统颜色色选配置功能来选 择和预览P3颜色色,并将它们与 sRGB 颜色色进行行行比比较。 5.5 术语 (Terminology) App 中的每一一字都是与你的用用户对话的一一部分。用用此对话来帮助他们在你的 App 中感到舒适。 108
109. 3MiD 三米米设计工工作室翻译 使用用熟悉的、可以理理解的单词和短语: 技术性词语可能会令人人生生畏。避免人人们 可能不不理理解的缩写和技术术语。利利用用你对用用户的了了解来确定某些词或短语是否 合适。一一般来说,对每个人人都有吸引力力力的 App 应该避开高高技术性的语言言。这类 语言言可能适用用于面面向更更高高级的用用户或技术人人群。 保持界面面文文本清晰简洁: 人人们快速而而容易易地吸收简短的、直接的文文本,不不喜欢 被强迫阅读冗⻓长的文文章来完成一一项任务。找出最重要的信息,简明扼要地表达 出来,并把它呈现在显眼的位置,这样人人们就不不必为了了找到他们想要的东⻄西而而 阅读太多,或者不不知道下一一步该做什什么。 适当的表明交互元素: 人人们应该能够一一眼看出元素的作用用。当标记按钮和其他 交互元素时,使用用动作动词(action verbs),例例如连接、发送和添加。 109
110. 3MiD 三米米设计工工作室翻译 避免那些听起来可能会显得屈尊俯就的语言言: 避免使用用“我们”,“我们的”, “我”和“我的”(例例如“我们的教程”和“我的训练”)。他们有时会被理理解为侮侮辱或 傲慢。 尽量量用用一一种非非正式的、友好的语气气: 一一种非非正式的、平易易近人人的⻛风格,与你在 午餐时与人人交谈的方方式相似。偶尔使用用缩写,直接用用“你”和“你的”来对用用户说 话。 要小小心心的使用用幽默感: 记住,人人们很可能多次在你的界面面中阅读文文本,而而一一开 始看起来很聪明的东⻄西可能会随着时间的推移而而变得令人人厌烦。同时要记住, 一一种文文化中的幽默不不一一定能很好地转化为其他文文化的幽默。 使用用相关的、一一致的语言言和图像: 一一定要确保样式对当前的上下文文而而言言是合适 的。例例如,如果有人人使用用 iPad,就不不要显示 iPhone 的提示或图形。使用用与平 台一一致的语言言。你可以在触摸屏上点击、快速滑动、滑动、缩放和拖拽。 你按 下物理理按键和对 3D Touch 做出反应的按钮。你还可以旋转并摇动设备。 要准确表达日日期: 使用用像 “今天” 和 “明天” 这样的友好术语是合适的,但是, 如果您不不考虑当前的语言言环境,这些术语可能会令人人困惑或不不准确。考虑一一个 在午夜前开始的活动。在一一个时区,活动可能会在今天开始。在另一一个时区, 同样的事件可能在昨天开始。一一般来说,日日期应该反映出观看事件的人人的时区。 然而而,在某些情况下,例例如在⻜飞行行行跟踪 App 中,可以更更清楚地显示航班的起始 日日期和时区。 5.6 排版 (Typography) San Francisco (SF) 是 iOS 系统的默认英文文字体:这种字型的字体经过了了优化, 使你的文文本具有无无与伦比比的可读性、清晰性和一一致性。点击这里里里下载 San 110
111. 3MiD 三米米设计工工作室翻译 Francisco 系列列字体。 iOS使用用 San Francisco 字体作为拉丁、希腊和⻄西里里里尔字⺟母的系统字体,以及 其他的各种字体。 强调重要信息: 使用用字重、字体大大小小和颜色色来突出 App 中最重要的信息。 如果 可以的话,只使用用一一种字体,混合几几种不不同的字体可能会让你的 App 显得支支离 破碎和草率。考虑使用用一一种字体,只使用用少量量的字体的变体和大大小小。 尽可能使用用内置的文文本样式: 内置的文文本样式允许您以视觉上不不同的方方式来表 达内容,同时保持最优的易易读性。这些样式是基于系统字体的,允许你利利用用关 键的排版特性,比比如动态类型,它自自动调整跟踪,并为每种字体大大小小提供引 导。 iOS 包含以下文文本样式 大标题 三级标题 插图编号 一级说明 一级标题 内容提要 小标题 二级说明 二级标题 正文 脚注(补充说明) 开发者指南,请参阅 UIFontTextStyle。 111
112. 3MiD 三米米设计工工作室翻译 确保字体是清晰的: 在 iOS 上支支持自自定义字体,但通常不不利利于阅读。除非非你的 应用用对定制字体有迫切需求,比比如为品牌设计或创造一一种沉浸式游戏体验,否 则最好还是坚持使用用系统字体。如果你使用用自自定义字体,请确保它易易于阅读, 即使是很小小的字体。 实现自自定义字体的辅助功能:系统字体会自自动对辅助功能做出反应,比比如加粗字 体和放大大文文本。 使用用自自定义字体的App应检查是否启用用辅助功能并实现 相同的 行行行为。 请参阅 Accessibility。 动态类型大大小小 San Francisco 字体的设计的大大号字体和小小号字体都很清晰。动态类型通过让 读者选择他们喜欢的文文本大大小小来提供额外的灵活性。 在响应文文本大大小小的变化时,优先考虑内容: 并不不是所有的内容都同样重要。当 用用户选择更更大大的尺寸寸时,他们想要让他们所关心心的内容更更容易易阅读;他们并不不总 是希望屏幕上的每一一个字都变大大。 XXSmall 类型 字重 磅值 行距 字距 大标题 常规 31pt 38pt 12pt 一级标题 常规 25pt 31pt 14pt 二级标题 常规 19pt 24pt -26pt 三级标题 常规 17pt 22pt -24pt 内容提要 半粗体 14pt 19pt -11pt 正文文 常规 14pt 19pt -11pt 112
113. 3MiD 三米米设计工工作室翻译 插图编号 常规 13pt 18pt -6pt 副标题 常规 12pt 16pt 0pt 脚注 常规 12pt 16pt 0pt 一级说明文字 常规 11pt 13pt 6pt 二级说明文字 常规 11pt 13pt 6pt 类型 字重 磅值 行距 字距 大标题 常规 32pt 49pt 12pt 一级标题 常规 26pt 32pt 14pt 二级标题 常规 20pt 25pt 19pt 三级标题 常规 18pt 23pt -25pt 内容提要 半粗体 15pt 20pt -16pt 正文文 常规 15pt 20pt -16pt 插图编号 常规 14pt 19pt -11pt 副标题 常规 13pt 18pt -6pt 脚注 常规 12pt 16pt 0pt 一级说明文字 常规 11pt 13pt 6pt 二级说明文字 常规 11pt 13pt 6pt 类型 字重 磅值 行距 字距 大标题 常规 33pt 40pt 11pt Small Medium 113
114. 3MiD 三米米设计工工作室翻译 一级标题 常规 27pt 33pt 13pt 二级标题 常规 21pt 26pt 17pt 三级标题 常规 19pt 24pt -26pt 内容提要 半粗体 16pt 21pt -20pt 正文文 常规 16pt 21pt -20pt 插图编号 常规 15pt 20pt -16pt 副标题 常规 14pt 19pt -11pt 脚注 常规 12pt 16pt 0pt 一级说明文字 常规 11pt 13pt 6pt 二级说明文字 常规 11pt 13pt 6pt 类型 字重 磅值 行距 字距 大标题 常规 34pt 41pt 11pt 一级标题 常规 28pt 34pt 13pt 二级标题 常规 22pt 28pt 16pt 三级标题 常规 20pt 25pt 19pt 内容提要 半粗体 17pt 22pt -24pt 正文文 常规 17pt 22pt -24pt 插图编号 常规 16pt 21pt -20pt 副标题 常规 15pt 20pt -16pt 脚注 常规 13pt 18pt -6pt 一级说明文字 常规 12pt 16pt 0pt 二级说明文字 常规 11pt 13pt 6pt XLarge(Default) 114
115. 3MiD 三米米设计工工作室翻译 XLarge 类型 字重 磅值 行距 字距 大标题 常规 36pt 43pt 11pt 一级标题 常规 30pt 37pt 12pt 二级标题 常规 24pt 30pt 15pt 三级标题 常规 22pt 28pt 16pt 内容提要 半粗体 19pt 24pt -26pt 正文文 常规 19pt 24pt -26pt 插图编号 常规 18pt 23pt -25pt 副标题 常规 17pt 22pt -24pt 脚注 常规 15pt 20pt -16pt 一级说明文字 常规 14pt 19pt -11pt 二级说明文字 常规 13pt 18pt -6pt 类型 字重 磅值 行距 字距 大标题 常规 38pt 46pt 11pt 一级标题 常规 32pt 39pt 12pt 二级标题 常规 26pt 32pt 14pt 三级标题 常规 24pt 30pt 15pt 内容提要 半粗体 21pt 26pt 17pt 正文文 常规 21pt 26pt 17pt 插图编号 常规 20pt 25pt 19pt 副标题 常规 19pt 24pt -26pt XXLarge 115
116. 3MiD 三米米设计工工作室翻译 脚注 常规 17pt 22pt -24pt 一级说明文字 常规 16pt 21pt -20pt 二级说明文字 常规 15pt 20pt -16pt 类型 字重 磅值 行距 字距 大标题 常规 40pt 48pt 10pt 一级标题 常规 34pt 41pt 11pt 二级标题 常规 28pt 34pt 13pt 三级标题 常规 26pt 32pt 14pt 内容提要 半粗体 23pt 28pt 16pt 正文文 常规 23pt 28pt 16pt 插图编号 常规 22pt 27pt 16pt 副标题 常规 21pt 26pt 17pt 脚注 常规 19pt 24pt -26pt 一级说明文字 常规 18pt 23pt -25pt 二级说明文字 常规 17pt 22pt -24pt XXXLarge 更更大大的可访问类型尺寸寸 除了了标准的动态类型大大小小之外,系统还为具有应用用需求的用用户提供了了一一些更更大大 的类型。 116
117. 3MiD 三米米设计工工作室翻译 AX1 类型 字重 磅值 行距 字距 大标题 常规 44pt 52pt 9pt 一级标题 常规 38pt 46pt 11pt 二级标题 常规 34pt 41pt 11pt 三级标题 常规 31pt 38pt 12pt 内容提要 半粗体 28pt 34pt 13pt 正文 常规 28pt 34pt 13pt 插图编号 常规 26pt 32pt 14pt 副标题 常规 25pt 31pt 14pt 脚注 常规 23pt 29pt 16pt 一级说明文字 常规 22pt 28pt 16pt 二级说明文字 常规 20pt 25pt 19pt 类型 字重 磅值 行距 字距 大标题 常规 48pt 57pt 8pt 一级标题 常规 43pt 51pt 10pt 二级标题 常规 39pt 47pt 10pt 三级标题 常规 37pt 44pt 11pt 内容提要 半粗体 33pt 40pt 12pt 正文 常规 33pt 40pt 11pt 插图编号 常规 32pt 39pt 12pt 副标题 常规 30pt 37pt 12pt 脚注 常规 27pt 33pt 13pt 一级说明文字 常规 26pt 32pt 14pt AX2 117
118. 3MiD 三米米设计工工作室翻译 二级说明文字 常规 24pt 30pt 15pt 类型 字重 磅值 行距 字距 大标题 常规 52pt 61pt 7pt 一级标题 常规 48pt 57pt 8pt 二级标题 常规 44pt 52pt 9pt 三级标题 常规 43pt 51pt 10pt 内容提要 半粗体 40pt 48pt 10pt 正文 常规 40pt 48pt 10pt 插图编号 常规 38pt 46pt 11pt 副标题 常规 36pt 43pt 11pt 脚注 常规 33pt 40pt 11pt 一级说明文字 常规 32pt 39pt 12pt 二级说明文字 常规 29pt 35pt 13pt 类型 字重 磅值 行距 字距 大标题 常规 56pt 66pt 5pt 一级标题 常规 53pt 62pt 6pt 二级标题 常规 50pt 59pt 7pt 三级标题 常规 49pt 58pt 8pt 内容提要 半粗体 47pt 56pt 9pt 正文 常规 47pt 56pt 9pt AX3 AX4 118
119. 3MiD 三米米设计工工作室翻译 插图编号 常规 44pt 52pt 9pt 副标题 常规 42pt 50pt 10pt 脚注 常规 38pt 46pt 11pt 一级说明文字 常规 37pt 44pt 11pt 二级说明文字 常规 34pt 41pt 11pt AX5 类型 字重 磅值 行距 字距 大标 题 常规 60pt 70pt 4pt 一级 标题 常规 58pt 68pt 5pt 二级 标题 常规 56pt 66pt 5pt 三级 标题 常规 55pt 65pt 6pt 内容 提要 半粗体 53pt 62pt 6pt 正文 常规 53pt 62pt 6pt 插图 编号 常规 51pt 60pt 7pt 副标 题 常规 49pt 58pt 8pt 脚注 常规 44pt 52pt 9pt 一级 说明 文字 常规 43pt 51pt 10pt 119
120. 3MiD 三米米设计工工作室翻译 二级 说明 文字 常规 40pt 48pt 10pt 不不是所有 App 都用用 1/1000em 来表示字间距。磅值大大小小基于 @2x 的图像分辨 率为144 ppi,@3x的图像分辨率为216 ppi。 字体用用法和字距 在界面面原型中使用用正确的字体和字形变体: 使用用 SF Pro 文文本来显示文文本19 磅 或更更小小的文文本,以及在文文本20磅或更更大大的文文本中显示文文本。当你在标准控 件中 使用用 San Francisco 的文文本,比比如按钮和标注,iOS 会自自动根据磅值和 用用户的 可访问性设置应用用最合适的变体,并适当地调整字距。 在 iOS 10 中 San Francisco 字体的变体是 SF UI Tex 和 SF UI Display。 SF Pro Text 144ppi下两倍率 字体磅值 字距 6pt 41pt 8pt 26pt 9pt 19pt 10pt 12pt 11pt 6pt 12pt 0pt 13pt -6pt 14pt -11pt 15pt -16pt 16pt -20pt 120
121. 3MiD 三米米设计工工作室翻译 17pt -24pt 18pt -25pt 19pt -26pt SF Pro Display 144ppi下两倍率 字体磅值 字距 20pt 19pt 21pt 17pt 22pt 16pt 24pt 15pt 25pt 14pt 27pt 13pt 30pt 12pt 33pt 11pt 40pt 10pt 44pt 9pt 48pt 8pt 50pt 7pt 53pt 6pt 56pt 5pt 60pt 4pt 65pt 3pt 69pt 2pt 79pt + up 0pt 不不是所有 App 都用用 1/1000em 来表示字间距。磅值大大小小基于 @2x 的图像分辨 率为 144ppi,@3x的图像分辨率为 216ppi。 121
122. 3MiD 三米米设计工工作室翻译 6.图标和图像(Icons and Images) 6.1图像尺寸寸和分辨率(Image Size and Resoulution) iOS 用用于在屏幕上放置内容的坐标系统是以点(pt)为基础的。该坐标系以点为 基本测量量单位,这些点映射到显示器器中则以像素显示。在标准分辨率屏幕上, 一一个点等于一一个像素(1pt = 1px)。因为高高分辨率屏幕的像素密度更更高高,所以在 真实世界里里里同等面面积的屏幕中就包含更更多的像素,即一一点中包含更更多像素(1pt = 2px、1pt=3px)。因此,高高分辨率屏幕需要具备更更高高像素的图像。 为了了支支持所有的 iOS 设备,你需要为设计的内容提供高高分辨率的图像: 基于不不 同的设备,将每个图像中的像素数量量乘以特定比比例例系数来进行行行适配。标准分辨 率图像的比比例例系数为1.0,这种图像被称为 @1x 图像。高高分辨率图像的比比例例系 数为2.0或3.0,被称为 @2x 或 @3x 图像。假设你有一一个标准的分辨率 @1x 图像,例例如 100px x 100px,那么,该图像的@ 2x版本将是 200px × 200px, @3x 版本将是 300px × 300px。 122
123. 3MiD 三米米设计工工作室翻译 设计高高分辨率设计图 使用用8px × 8px的网网格系统: 网网格系统可以让线条和图像内容在所有尺寸寸上保持 清晰,无无需太多的修饰和锐化。将图形边界对⻬齐到网网格上,以减少按比比例例缩小小 图像时出现的半像素和内容模糊的情况。 以适当的格式进行行行创作: 通常,位图/光栅的切图使用用去交错的 PNG 格式文文件 (PNG 导出的设置)。选择 PNG 格式,是因为它支支持透明度,并且因为是无无损 格式,不不会在压缩过程中丢失图形的细节和色色彩。对于需要阴影、纹理理和高高光 效果的复杂切图来说,PNG格式是一一个很好的选择。而而照片片内容(如广广告图、照 片片)请使用用 JPEG 格式,因为它的压缩算法可以比比无无损格式节省更更多的存储空间, 且较难识别到压缩的痕迹。所以,写实的 App 图标最适合使用用 PNG 格式。其 它需要进行行行高高分辨率缩放的扁平、矢矢量量切图则使用用 PDF 格式。 123
124. 3MiD 三米米设计工工作室翻译 对于不不需要使用用 PNG-24 的切图,只需要使用用 PNG-8 格式即可: 因为 8 位色色 彩可以减少文文件大大小小,并且不不会降低图像质量量。注意:PNG-8 不不适用用于照片片类 型。 优化 JPEG 文文件,以找到存储容量量和质量量之间的平衡: 大大多数 JPEG 文文件可以 被压缩,而而不不会造成明显的图像失真,即使是少量量的压缩也可以为磁盘节省大大 量量空间。在每个 JEPG 图像上进行行行压缩设置,找出可接受失真范围内的最佳参 数。 提供图像和图标的替代文文本标签: 替代文文本标签在屏幕上看不不到,但是它们帮 助 “VoiceOver”(APPLE 公司推出的一一种语音音辅助程序)描述屏幕上的内容,便便 于视觉障碍的人人“看到”屏幕上的内容。 6.2应用用图标(App Icon) 每个 App 都需要一一个美观的,令人人印象深刻的图标,能在苹果商店和主屏 幕 夺人人眼球。用用户轻撇图标的瞬间,是你的第一一个机会,用用来传达你的 App 的用用 途。图标也贯穿于整个系统中,例例如在设置和搜索结果中。 拥抱简约: 寻找个单一一的元素能够表现你的 App 的精髓,然后通过一一个简单并 且独特的形状表达该元素。谨慎地添加细节部分。如果图标的内容或形状过于 复杂,则细节难以辨别,特别是在较小小的尺寸寸中。 设计一一个可识别的图标: 用用户不不应该只有通过分析图标才能弄弄清楚它代表什什么。 例例如,邮件 App 的图标使用用了了一一个信封,因为它普遍与邮件联系在一一 起。花 124
125. 3MiD 三米米设计工工作室翻译 时间来设计一一个美观迷人人且精炼的抽象图标,从而而艺术化地传达你的 App 的目目 的。 保持背景简单,避免透明度: 确保你的图标是不不透明的,不不要杂乱的背景。 使 用用一一个简单的背景,这样它就不不会过度影响周围的其它图标。你没有必要将整 个图标填满内容。 只有当 logo 全部或部分由文文字组成时,才在图标使用用文文字: 在主屏幕时,一一个 App 的名称会在图标之下显示。不不要包含没有意义的文文字重复说明名称或是告 诉用用户该如何使用用你的 App,比比如“Watch”或“Play”。如果你的设计包含了了一一 些文文字,那么请强调文文字与你的 App 提供的实际内容相关。 图标中不不要包括照片片,屏幕截图或界面面元素: 摄影细节在小小尺寸寸上很难看出。 屏幕截图对于 App 图标来说太复杂了了,通常不不利利于传达 App 的目目的。图标中 的界面面元素会令人人误解和困惑。 不不要使用用苹果硬件产品的副本: 苹果产品受版权保护,无无法在你的图标或图像 中被二二次创作。一一般来说,避免复用用设备的图形,因为硬件设计往往会频繁更更 新迭代,而而且会使你的图标看起来过时。 不不要在界面面到处放置 App 图标: 在 App 里里里发现一一个图标被用用于多种目目的会让 人人困惑。反之,考虑使用用图标的色色彩方方案。请参阅 Color 。 在不不同的壁纸环境下测试你的图标: 你不不能预期用用户会为他们的主屏幕选择什什 么样的壁纸,所以不不要只是在一一种深色色和一一种浅色色的背景上测试你的图标。而而 是观察它在不不同的背景上如何表现。在有动态背景的真实设备上试用用它, 因为 背景会随着设备移动而而改变视⻆角。 保持图标的四⻆角是方方形的: 系统会自自动覆盖一一个遮罩层让图标变成圆⻆角。 125
126. 3MiD 三米米设计工工作室翻译 App 图标属性 所有App图标应符合以下规格标准: 属性 值 格式 PNG 颜色空间 sRGB 或者 P3(参阅颜色管理) 图层 扁平无透明度 分辨率 不同的分辨率,参阅图像大小和分辨 率 形状 正方形且无圆角 App 图标大大小小 每个 App 必须提供一一大大一一小小两个图标,小小图标会出现在主屏幕,并且当你 的 App 被安装后会被系统使用用,大大图标会被用用在苹果商店中。 设备或环境 图标大小 iPhone 180px x 180px(60pt x 60pt @3x) 120px x 120px(60pt x 60pt @2x) iPad Pro 167px x 167px(83.5pt x 83.5pt @2x) 126
127. 3MiD 三米米设计工工作室翻译 iPad,iPad mini 152px x 152px(76pt x 76pt @2x) App Store 1024px x 1024px(1024pt x 1024pt @1x) 为不不同的设备提供不不同大大小小的图标: 确保你的 App 图标在你支支持的所有设备上, 看起来都很棒。 使用用 App Store 图标模拟您的小小图标: 虽然 App Store 图标的使用用方方式与小小型 图标不不同,但它仍然是你的 App 图标。大大图标一一般都和小小图标外观相匹配,但 是可以稍微丰富一一些,更更有细节,因为不不会有任何视觉效果叠加在它上面面。 Spotlight、设置和通知图标 每个 App 都应提供一一个小小图标,在 Spotlight(快速索引的功能)搜索,如果关 键词与 App 名称相符,iOS 会展示该图标。同时,需要设置的 App 同样应该 提供一一个小小图标用用于在系统内置的设置 App 中展示。两个图标都应该清晰标识 你的 App——理理想情况下,它们应该与 App 图标相符。如果你不不能提供这些 图标,iOS 可能会缩小小你的主图标,以便便在这些场景中显示。 设备 Spotlight图标大小 iPhone 120px x 120px (40pt x 40pt @3x) 80px x 80px (40pt x 40pt @2x) 127
128. 3MiD 三米米设计工工作室翻译 iPad Pro,iPad,iPad mini 80px x 80px (40pt x 40pt @2x) 设备 设置图标大小 iPhone 87px x 87px (29pt x 29pt @3x) 58px x 58px (29pt x 29pt @2x) iPad Pro,iPad,iPad mini 58px x 58px (29pt x 29pt @2x) 设备 通知图标大小 iPhone 60px x 60px (20pt x 20pt @3x) 40px x 40px (20pt x 20pt @2x) iPad Pro,iPad,iPad mini 40px x 40px (20pt x 20pt @2x) 不不要在“设置”图标上添加叠加层或边框: iOS 会自自动为所有图标添加1像素描 边,以确保它们很好地呈现在白白色色的背景上。 提示: 如果你的 App 能创建自自定义文文档,则不不需要设计文文档图标,因为 iOS 会 使用用你的 App 图标自自动创建文文档图标。 用用户可选的 App 图标 对于某些 App,定制功能可以产生生用用户黏性并增强用用户体验: 如果定制功能可 以为你的 App 提供价值,你可以在 App 中嵌入入的一一组预设的图标,用用户可以 从中选择一一个备用用 App 图标。例例如,运动 App 可能会为不不同的球队提供图标, 或者具有明暗模式的 App 可能会提供相应的明暗图标。请注意, 你的 App 图 标只能根据用用户的要求进行行行更更改,系统始终向用用户提供此类更更改的确认信息。 128
129. 3MiD 三米米设计工工作室翻译 为所有需要的尺寸寸,提供视觉一一致的替代图标: 就像你的 App 主图标一一样,每 个备用用图标均要提供不不同尺寸寸的图像集合。当用用户选择备用用图标时,相应尺寸寸 的图标将替代原先主图标,Spotlight 和系统其他位置的主图标。比比如说,为了了 确保系统中的备用用图标始终保持一一致 ,用用户不不应该在主屏幕上看到图标的一一个 版本,而而在“设置”中则看到完全不不同的版本。请按照 App 主图标的尺寸寸大大小小, 为备用用 App 图标提供相同的尺寸寸(App Store图标除外)。 请参阅 App Icon Sizes 。 开发者指南,请参阅 UIApplication 中的 setAlternateIconName 方方法 。 注意: 替代应用用图标需要通过 App Review 进行行行审核,并且必须遵守 App Store评估 指南 。 6.3 自自定义图标(Custom Icons) 如果你的 App 含有不不能用用系统图标表示的任务或模式,又又或是系统图标与你的 App ⻛风格不不符,你可以设计你自自己己的图标。 创作简单、辨识度高高的设计: 太多的细节会让图标看起来难以理理解且不不具可读 性。努力力力实现一一种简单的通用用设计,大大多数人人都会快速识别,不不会反感。最好 的图标设计,使用用与 App 内容和作用用直接相关的、广广为人人们知悉的视觉比比喻。 设计象形符号的图标: 象形符号,也称为模板图像,是具有透明度,抗锯⻮齿功 能的单色色图像,并且图像边缘没有投影。符号外观根据 App 内容和用用户交互来 设计,包括着色色,亮度和活力力力。各种标准界面面元素支支持符号,包括导航栏,标 签栏,工工具栏和主屏幕快捷操作。 129
130. 3MiD 三米米设计工工作室翻译 准备比比例例系数为 @2x 的符号切图,并保存为 PDF 格式: 因为 PDF 是一一种支支持 高高分辨率缩放的矢矢量量格式,所以通常而而言言,在你的 App 中提供一一个 @2x 版本 就足足够了了,并且这个版本支支持扩展其他分辨率。 保持图标之间一一致连贯:无无论你只使用用自自定义图标或是混合使用用自自定义图标和系 统图标,在 App 中的所有图标都应该在大大小小、细节程度、透视和描边 粗细上 保持一一致。 确保图标清晰可辨: 一一般来说,纯色色图标往往比比轮廓图标更更清晰。如果图标 必 须包含线条,请与其他图标和 App 的版式协调好比比重。 使用用颜色色来表示选中和取消的状态: 避免在两个不不同的图标设计之间切换,如 纯色色版本和轮廓版本。 避免在图标中加入入文文字: 如果你需要展示文文本,请在标签下面面直接加上标题, 并且适当调节位置。 不不要复用用 Apple 硬件产品的图形: Apple 产品受版权保护,不不能在你的图标或 是图片片中被二二次创作。一一般来说,避免复用用设备的图形,因为硬件设计 频繁地 更更新换代,这会导致你的图标看起来过时。 提供图标的替代文文本标签: 替代文文本标签在屏幕上看不不到,但是它们帮助 VoiceOver(APPLE公司推出的一一种语音音辅助程序)描述屏幕上的内容,便便于视 130
131. 3MiD 三米米设计工工作室翻译 觉障碍的人人“看到”屏幕上的内容。 自自定义图标尺寸寸 首首先,你的 App 的图标系列列应该在视觉上保持大大小小一一致。如果个别图标设计的 比比重不不同,则某些图标可能需要略略大大于其他图标才能看保持视觉一一致。 导航栏和工工具栏图标尺寸寸 设计自自定义导航栏和工工具栏图标时,请参考以下尺寸寸指导,如果为了了保持平衡, 可以进行行行适当调整。 目标尺寸 最大尺寸 75px x 75px (25pt x 25pt @3x) 83px x 83px (27.67pt x 27.67pt @3x) 50px x 50px (25pt x 25pt @2x) 56px x 56px (28pt x 28pt @2x) 标签栏图标尺寸寸 在纵向上,底部栏图标显示在其标题上方方。在横向上,图标和标题并排出现。 根据设备和方方向,系统会显示常规或紧凑的底部栏。你的 App 应该包含两 种 尺寸寸的自自定义底部栏图标。 131
132. 3MiD 三米米设计工工作室翻译 属性 常规标签栏 紧凑型标签栏 目标宽度和高度(圆形 符号) 75px x 75px (25pt x 25pt @3x) 54px x 54px (18pt x 18pt @3x) 50px x 50px (25pt x 25pt @2x) 36px x 36px (18pt x 18pt @2x) 69px x 69px (23pt x 23pt @3x) 51px x 51px (25pt x 25pt @3x) 46px x 46px (23pt x 23pt @2x) 34px x 34px (17pt x 17pt @2x) 93px (31pt @3x) 69px (23pt @3x) 62px (31pt @2x) 46px (23pt @2x) 84px (28pt @3x) 60px (20pt @3x) 56px (28pt @2x) 40px (20pt @2x) 目标宽度和高度(正方 形符号) 目标宽度(宽符号) 目标高度(高符号) 6.4 启动画面面(Launch Screen) 启动画面面出现在 App 刚启动的时候。随后,启动画面面会很快被 App 的首首屏取 代,让人人感觉你的 App 是快速响应的。启动画面面不不是一一个炫技的时机,它只是 为了了增强用用户体验,让用用户觉得你的 App 能够快速启动并且立立即被使用用。每个 App 都应该提供一一个启动画面面。 132
133. 3MiD 三米米设计工工作室翻译 因为设备屏幕大大小小不不同,启动画面面的大大小小也有所差异。为了了适应这个需要, 你 可以通过 Xcode 故事板或是一一组静态图片片的形式,为你的 App 所支支持的设备 提供启动画面面。因为 Xcode 故事板灵活性高高且易易于适配,所以推荐采用用该形式。 你可以使用用一一个单独的故事板来管理理你的所有启动画面面。了了解关于可适配界面面 的开发细节,请参阅 Auto Layout Guide 。 设计一一个与你的 App 首首屏几几乎相似的启动画面面: 如果你的启动画面面包含了了与首首 屏看起来不不同的元素,那么在启动画面面过渡至至 App 首首屏时,用用户会经历一一次不不 愉快的跳转体验。 避免在启动画面面中包含文文本: 因为启动画面面是静态的,任何展示的本文文都不不能 被点击。 133
134. 3MiD 三米米设计工工作室翻译 淡化启动: 用用户通常会在不不同的 App 之间频繁切换,所以请设计一一个启动 画面面, 能够让 App 的启动不不易易被人人察觉。 不不要打广广告: 启动画面面不不是一一个宣传品牌的时机。不不要设计一一个类似开屏广广 告 或是介绍窗口口的登录体验。不不要在启动画面面包涵 logo 或是其它品牌元素, 除 非非它们是你的 App 首首屏的静态元素。 静态启动画面面图片片 最好使用用 Xcode 故事板制作启动画面面,但必要时你也可以提供一一组静态图 片片。 根据设备创建不不同尺寸寸的静态图片片,并确保包涵状态栏区域。 设备 竖屏尺寸 横屏尺寸 12.9" iPad Pro 2048px × 2732px 2732px × 2048px 10.5" iPad Pro 1668px × 2224px 2224px × 1668px 9.7" iPad 1536px × 2048px 2048px × 1536px 7.9" iPad mini 4 1536px × 2048px 2048px × 1536px iPhone XS Max 1242px × 2688px 2688px × 1242px iPhone XS 1125px × 2436px 2436px × 1125px iPhone XR 828px × 1792px 1792px × 828px iPhone X 1125px × 2436px 2436px × 1125px iPhone 8 Plus 1242px × 2208px 2208px × 1242px iPhone 8 750px × 1334px 1334px × 750px iPhone 7 Plus 1242px × 2208px 2208px × 1242px iPhone 7 750px × 1334px 1334px × 750px iPhone 6s Plus 1242px × 2208px 2208px × 1242px iPhone 6s 750px × 1334px 1334px × 750px iPhone SE 640px × 1136px 1136px × 640px 134
135. 3MiD 三米米设计工工作室翻译 6.5 系统图标 (System Icons) 该系统提供内置的图标,代表各种用用例例中常⻅见任务和内容类型。 ● 导航栏和工工具栏图标 ● 标签栏图标 ● 主屏幕快速操作图标 尽可能使用用这些内置的图标, 因为用用户对这些图标是熟悉的。 按照预期使用用系统图标: 每个系统提供的图像具有特定的、众所周知的意 义。 为了了避免混淆用用户,必须根据其含义和推荐用用法使用用每张图像。 提供图标的替代文文字标签: 替代文文字标签在屏幕上看不不到,但是他们 让 VoiceOver 可以描述屏幕上的内容,使视觉障碍的人人更更方方便便导航。 如果找不不到符合需求的系统提供的设计,请设计自自定义图标: 设计自自己己的 图标 比比错误使用用系统提供的图像更更好。 查看 Custom Icons 。 导航栏和工工具栏图标 在 导航栏 和 工工具栏 中使用用以下图标 。 了了解更更多开发者指南,请参阅 UIBarButtonSystemItem。 提示:你可以使用用文文本而而不不是图标来表示导航栏或工工具栏中的项目目。 例例如, 日日 历在工工具栏中使用用“今天”,“日日历”和“收件箱”。 您还可以使用用固定的空格 元 素来提供导航和工工具栏图标之间的填充。 图标 名称 含义 135 API
136. 3MiD 三米米设计工工作室翻译 活动(分享) 显示包含在当前 上下文中有用的 共享扩展,操作 扩展和任务 (如“复制”,“收藏 夹”或“查找”)的模 态 视图。 action 添加 创建一个新项 目。 书签 显示特定应用的 书签。 bookmarks 相机 拍摄照片或视 频,或者显示照 片库。 camera 取消 关闭当前视图或 结束编辑模式而 不保存更改。 Cancel 撰写 在编辑模式下打 开新视图。 compose Done 完成 完成保存状态并 关闭当前视图, 或退出编辑模 式。 done Edit 编辑 在当前⻚面进入 edit Cancel add 编辑模式。 快进 媒体播放或幻灯 片片快 进。 fastforward 整理 将项目移动到新 的目的地,如文 件夹。 organize 136
137. 3MiD 三米米设计工工作室翻译 Redo Save Undo 暂停 暂停媒体播放或 幻灯片。暂停时 始终存储当前位 置,以便播放在 以后恢复。 pause 播放 开始或恢复媒体 播放或幻灯片。 play 重做 重做上次撤消的 操作。 redo 刷新内容 刷新内容。请谨 慎使用此图标, 因为你的应用程 式v自动刷新内 容。 refresh 回复 将项目发送或路 由到 另一个人或位 置。 reply 后退 通过媒体播放或 幻灯 片向后移动。 rewind 保存 保存当前状态。 save 搜索 显示搜索字段。 search 停止 停止媒体播放或 幻灯片。 stop 垃圾桶 删除当前或所选 项目。 trash 撤消上一个操 作。 undo 撤销 标签栏图标 在标签栏中使用用以下图标tab bars。有关开发者的指南,请参阅 137
138. 3MiD 三米米设计工工作室翻译 UITabBarSystemItem 。 图标 名称 含义 API 书签 显示App专用书 签。 bookmarks 通讯录 显示用户的联系 人人。 contacts 下载 显示活跃或最近 的下载。 downloads 收藏 显示用户最喜欢 的项目目。 favorites 精选 展示应用程序特 色的内容。 featured 历史 显示最近的操作 或活动。 history 更多 显示其他标签栏 项目。 more 最新 最近在特定时段 内访问的内容或 项目。 mostRecent 最受欢迎的项 目。 mostViewed 浏览最多 搜索 进入搜索模式。 search 最高评分 显示最高评分的 项目。 topRated 主屏幕快速操作图标 在主屏幕快速操作菜单中 home screen quick action 使用用以下图标。 有关开 发者指南,请参阅 UIApplicationShortcutIconType 。 138
139. 3MiD 三米米设计工工作室翻译 图标 名称 含义 API 添加 创建一个新项目 目。 add 闹钟 设置或播放一个 闹 钟。 alarm 音频 表示或调节音 频。 audio 书签 创建书签或显示 书签。 bookmark 拍照 拍照片。 capturePhoto 摄像 拍视频。 captureVideo 云 表示,显示或打 开一个云的服 务。 cloud 撰写 撰写新的可编辑 内容。 compose 确认 表示一个操作完 成。 confirmation 通讯录 选择或显示一条 通讯录。 contact 日期 显示日历或事 件,或执行一个 相关操作。 date 收藏 表示或标记一个 收藏的项目。 favorite 家 指示或显示主屏 幕。 指示,显示或按 路线 前往家庭住址 home 表示或显示邀 请。 invitation 邀请 139
140. 3MiD 三米米设计工工作室翻译 位置 表示位置的概念 或访 问当前的地理位 置。 location 喜爱 表示或标记一个 喜爱 的项目目。 love 邮件 创建邮件消息。 mail 标记位置 表示,显示或保 存地 理理位置。 markLocation 信息 新建一条信息或 者表 示使用信息工 具。 message 暂停 暂停播放媒体, 总是 存储当前进度, 这样 就可以继续播 放。 pause 播放 开始或继续播放 媒 体。 play 禁止 表示某对象被禁 止止。 prohibit 搜索 进入搜索模式。 search 分享 与他人分享内容 或者 分享至社交媒 体。 share 随机播放 表示或打开随机 播放 模式。 shuffle 140
141. 3MiD 三米米设计工工作室翻译 任务 表示一个未完成 任务 或者是完成任务 时标 记。 task 任务完成 表示一个完成任 务或 者是未完成任务 标 记。 taskCompleted 时间 表示或显示一个 时钟 或计时器 。 time 更新 更更新项目。 update 7.UI栏(Bars) 7.1导航栏(Navigation Bars) 导航栏出现在屏幕顶部的状态栏下方方,并可以通过一一系列列分层屏幕进行行行导航。 当显示新屏幕时,通常标有前一一屏幕的后退按钮出现在栏的左侧。有时,导航 栏的右侧包含一一个控件,如编辑或完成按钮,用用于管理理活动视图中的内容。 在 拆分视图中,导航栏可能会出现在拆分视图的单个窗格中。导航栏是半透 明的, 可能具有背景色色调,并且可以 为在屏幕上键入入屏幕时隐藏,发生生手手势或视图调 整大大小小。 141
142. 3MiD 三米米设计工工作室翻译 考虑在显示全屏内容时暂时隐藏导航栏: 当您想关注内容时,导航栏可能会分 散注意力力力。暂时隐藏栏目目,提供更更身临其境的体验。查看全屏照片片时,照 片片会 隐藏导航栏和其他界面面元素。如果App要隐藏导航栏,让用用户使用用简单 的手手势(如 轻按)来还原它。 开发者指南,请参阅 UINavigationBar。 建议:当不不需要导航或使用用多个控件来 管理理内容时,请使用用工工具栏。请参阅 Toolbars 。 导航栏标题 考虑在导航栏中显示当前视图的标题: 在大大多数情况下,标题可帮助人人们了了解 他们正在查看的内容。但是,如果导航栏标题是多余的,可以将标题留留空。 例例 如,Notes 不不会为当前注释标题,因为第一一行行行内容提供了了所需的所有上下文文。 142
143. 3MiD 三米米设计工工作室翻译 当需要特别强调上下文文时,请使用用较大大的标题: 在一一些 App 中,放大大加粗的大大 标题可以帮助人人们浏览和搜索。例例如,在标签中,大大标题可以分辨活动选项, 并在用用户滚动到顶部时通知用用户。音音乐使用用大大标题来区分专辑,艺术家,播放 列列表和收音音机等内容区域。当用用户开始滚动内容时,大大标题转换为 标准标题。 大大标题在所有 App 中都没有实际意义,不不应与内容竞争。虽然 Clock 应用用程 序具有标签式布局,但是不不需要大大标题,因为每个标签都有一一个不不同的,可识 别的区域。 开发者指南,请参阅 prefersLargeTitles 。 导航栏控件 避免使导航栏的控件太多: 通常,导航栏不不应包含⻚页面面的当前标题、后退按钮 和管理理视图的控件。如果您在导航栏中使用用分段控件,则该栏不不应包含标题或 除分段控件之外的任何控件。 使用用标准后退按钮: 人人们知道标准的后退按钮可以让他们通过信息层次来回溯 步骤。但是,如果使用用自自定义后退按钮,请确保它仍然像后退按钮,反应敏敏捷, 与界面面的其余部分相匹配,并始终贯穿你的 App。如果用用自自定义图像替换系统 提供的返回按钮,也可以提供自自定义遮罩图像。iOS 在使用用此遮罩时,可以在 143
144. 3MiD 三米米设计工工作室翻译 转换期间为按钮标题设置动画。 不不要使用用面面包屑式的多段路路径: 后退按钮总是执行行行单个操作 - 返回到上一一个屏 幕。如果你认为在没有当前屏幕的完整路路径的情况下,人人们可能会迷失方方向, 请考虑对 App 的层次结构进行行行梳理理。 给文文本按钮足足够的空间: 如果您的导航栏包含多个文文本按钮,那些按钮的文文本 可能会一一起出现,使按钮无无法分隔。通过在按钮之间插入入固定空间项来添加分 隔。 开发者指南,请参阅 UIBarButtonItem 中的 UIBarButtonSystemItemFixedSpace 常量量值。 考虑在导航栏中使用用分段控件来简化应用用程序的信息层次结构: 如果您在导航 栏中使用用分段控件,请仅在层次结构的顶层执行行行此操作,并确保在较低级别选 择准确的后退按钮。 有关其他指导,请参阅 Segmented Controls 。 144
145. 3MiD 三米米设计工工作室翻译 7.2搜索栏(Search Bars) 人人们使用用搜索栏来搜索大大量量的数据。有两种样式的搜索栏 - 突出(默认)和最小小。 联系人人采用用突出的⻛风格,其中包括明显的有色色背景。照片片使用用最小小的⻛风格,这 有利利于与周围的界面面更更协调。搜索栏默认是半透明的,但可以使其不不透明。适 用用时,可以将搜索栏配置为自自动隐藏导航栏。 搜索栏包含单个搜索字段,可以包含占位符文文本和清除按钮: 除了了搜索字段之 外,搜索栏还可以包含用用于退出搜索的“取消”按钮。 让用用户通过搜索栏而而不不是文文本框去搜索: 文文本框不不具备搜索栏所拥有的外观 特 征。 根据搜索的重要性,选择搜索栏样式: 如果搜索是应用用程序中的主要功能,请 使用用默认的突出显示样式的搜索栏。 如果搜索不不频繁,请使用用最小小样式 。 如有必要,请在搜索栏中提供提示和搜索范例例: 搜索字段可以包含占位符文文本, 例例如“搜索服装,鞋子子和配件”或简称“搜索”,提醒您正在搜索。 也可以在搜索 栏的正上方方显示一一个简洁的,含有适当标点符号的一一行行行句句子子,以提供指导。 例例 如,股票在搜索字段上方方使用用文文字,让人人们知道他们可以输入入公 司名称或股票 145
146. 3MiD 三米米设计工工作室翻译 代码。 考虑在搜索栏下方方提供有用用的快捷方方式和其他内容:使用用搜索栏下的区域来 帮 助人人们更更快地获得内容。 例例如,Safari可以在您点击搜索后立立即显示您的 书 签。 选择一一个可以直接进入入,而而不不用用输入入任何搜索字词。 股票在您输入入搜索 字段时显示结果列列表。 随时点击一一个,而而不不再输入入任何字符。开发者指南,请 参阅 UISearchController 和 UISearchBar 。 范围栏 范围栏可以添加到搜索栏中,让人人们更更完善搜索的范围。范围栏采用用搜索栏的 外观。 146
147. 3MiD 三米米设计工工作室翻译 倾向于改进包含范围栏的搜索结果:专注于优化搜索结果而而不不是一一味添加范 围 栏。当用用户想在定义明确的类别中搜索时,范围栏会有很大大的帮助。但是,更更 好的做法是优化搜索结果,这样用用户就无无需通过范围栏进行行行筛选了了。 请参阅 UISearchBar 。 7.3状态栏(Status Bars) 状态栏出现在屏幕的上边缘,并显示有关设备当前状态的有用用信息,如时间, 蜂窝数据,网网络状态和电池电量量。状态栏中显示的实际信息因设备和系统配置 而而异。 使用用系统提供的状态栏: 人人们期望状态栏在系统上保持一一致。不不要用用自自定义状 态栏替换它。 147
148. 3MiD 三米米设计工工作室翻译 使用用你的设计来协调状态栏样式: 状态栏的文文本和指示器器的视觉样式是白白色色的, 可以设置到 App 的所有⻚页面面,或是单独为不不同的⻚页面面设置。黑黑色色的状态栏在浅 色色内容之上运行行行良好,而而白白色色状态栏可以在深色色内容之上运行行行。 隐藏状态栏下的内容: 默认情况下,状态栏的背景是透明的,允许下方方的内容 显示。保持状态栏的可读性,并不不意味着它背后的内容是互动的。 148
149. 3MiD 三米米设计工工作室翻译 有几几种常用用的技巧: ● 在你的 App 中使用用导航栏,它会自自动显示状态栏背景,并确保内容不不会显 示在状态栏下。 ● 在状态栏后面面显示自自定义图像,如渐变或纯色色。 ● 对状态栏后面面的内容应用用背景模糊效果( UIBlurEffect)。 考虑在全屏显示时暂时隐藏状态栏: 当用用户试图关注某个媒体时,状态栏可能 会分散注意力力力。暂时隐藏这些元素,提供更更身临其境的体验。例例如,照片片 App 在用用户浏览全屏照片片时隐藏状态栏和其他界面面元素。 149
150. 3MiD 三米米设计工工作室翻译 避免永久隐藏状态栏: 没有状态栏,人人们必须离开你的应用用程序来检查时间, 或者看看他们是否有 Wi-Fi 连接。让人人们通过简单,可发现的手手势重新显示隐 藏的状态栏。在照片片中浏览全屏照片片时,只需点击一一次即可显示状态栏。 使用用状态栏来表示显示网网络状态: 当 App 使用用网网络时,特别是⻓长时间的操作, 显示网网络状态栏,以便便人人们知道活动正在进行行行中。 请参阅 Network Activity Indicators 。 开发者指南,请参阅 UIApplication 中的 UIStatusBarStyle 常量量和 150
151. 3MiD 三米米设计工工作室翻译 UIViewController 中的 preferredStatusBarStyle. 7.4标签栏 (Tab Bars) 屏幕底部会显示一一个标签栏,并提供在应用用的不不同部分之间快速切换的功能。 标签栏是半透明的,可能具有背景色色调,在所有屏幕方方向上保持相同的高高度, 并在显示键盘时隐藏。标签栏可以包含任意数量量的选项,但可⻅见选项的数量量根 据设备大大小小和方方向而而有所不不同。如果某些选项由于水水平空间有限而而无无法显示, 那么最后一一个可⻅见选项将成为“更更多”选项,显示列列表中的其他选项卡。 一一般来说,使用用标签栏来梳理理各 App 级别的信息: 标签栏是简化信息层次结构 的一一种很好的方方法,可以一一次访问多个对等信息类别或模式。 标签栏只用用于导航,标签栏按钮不不应用用于执行行行操作: 如果您需要提供对当前视 图中元素的操作,请改用用工工具栏。请参阅 Toolbars 。 避免太多的标签: 每个附加标签都会减少可点击区域,并增加应用用程序的复杂 性,从而而更更难查找信息。虽然 “更更多” 选项卡可以显示额外的选项卡,但这本 身就需要额外的选项,而而且空间不不足足。仅包含基本选项卡,并使用用信息 层次结 151
152. 3MiD 三米米设计工工作室翻译 构所需的最小小选项数。太少的标签也可能是一一个问题,因为它会使界 面面断开连 接。一一般来说,在 iPhone 上使用用三到五个标签。 iPad 上可以再多 几几个。 当其功能不不可用用时,不不要删除或禁用用选项卡: 如果选项卡在某些情况下可用用, 但在其他情况下不不可用用,App 界面面就会变得不不稳定和不不可预测。确保始终启用用 所有选项,并解释选项的内容不不可用用的原因。例例如,如果 iOS 设备上没有歌曲, “音音乐” 应用用中的 “我的音音乐” 选项卡会解释如何下载歌曲。 始终在附件视图中切换上下文文: 为了了保持界面面可预测,选项卡应直接附加到选 项栏中,而而不不影响屏幕上其他位置的视图。例例如,选择分割视图左侧的选项卡 不不应导致分割视图的右侧突然更更改。在 popover 中选择一一个选项卡不不应该导致 弹出窗口口后面面的视图更更改。 确保标签栏图标在视觉上保持一一致和平衡: 该系统为常⻅见用用例例提供了了一一系列列预 定义的图标。请参阅 System Icons > Tab Bar Icons 。您也可以创建自自己己的图 标。查看 Custom Icons 。 使用用⻆角标这种不不引人人注目目的提醒方方式:您可以在选项卡上显示徽章 - 包含白白色色文文 本和数字或感叹号的红色色椭圆,以指示新信息与该视图或模式相关联。 开发者指南,请参阅 UITabBar 。 提示:了了解标签栏和工工具栏之间的区别很重要,因为这两种类型都显示在App 屏 幕的底部。标签栏可让用用户在应用用程序的不不同部分之间快速切换,例例如, Clock 应用用程序中的“闹钟”,“秒表”和“计时器器”选项卡。工工具栏包含用用于执行行行 与当前上下文文相关的操作按钮,例例如创建项目目,删除项目目,添加注释或拍摄 照 片片。 请参阅 Toolbars 。标签栏和工工具栏从不不会出现在同一一个视图中。 152
153. 3MiD 三米米设计工工作室翻译 7.5工工具栏(Toolbars) 工工具栏出现在 App 屏幕底部,包含了了执行行行当前视图或包含内容相关操作的按钮。 工工具栏是半透明的,也可能会有背景色色,并且通常在用用户不不太需要它们时被隐 藏。比比如,在 Safari 中,当你滚动⻚页面面表明你再阅读时,工工具栏就藏起来了了。 当你在屏幕底部点击时,工工具栏又又会再次出现。当前屏幕有键盘时,工工具栏也 会被隐藏 。 提供相关的工工具栏按钮: 工工具栏必须包含在当前环境下有意义的常用用操作命 令。 考虑图标或文文字按钮是否适合你的 App: 当你需要多于三个工工具栏按钮时, 使 用用图标会比比较合适。当你只有三个或是更更少的按钮时,文文字按钮有时候看起来 更更加清楚。比比如,在日日历 App 中,文文本就被当作按钮使用用,因为图标可能会令 人人迷惑。因为使用用了了文文本,“Inbox”按钮还能显示所有的日日程表和受邀活动数 量量。 避免在工工具栏中使用用分段控件: 分段控件让用用户切换内容,而而工工具栏更更针对于 153
154. 3MiD 三米米设计工工作室翻译 当前屏幕。如果你需要提供切换内容的方方法,请考虑使用用标签栏。⻅见 Tab Bars 。 给文文本标题按钮足足够的空间: 如果你的工工具栏包含多个按钮,那些按钮的文文 本 可能会挤在一一起,使按钮无无法区分。通过在按钮之间插入入固定间距使其分离。 更更多开发者指南,请参阅UIBarButtonItem中 的 UIBarButtonSystemItemFixedSpace 的恒定值。 开发者指南,请参阅 UIToolbar 。 提示:理理解标签栏和工工具栏之间的不不同十十分重要,因为这两种栏都是出现在 App 屏幕的底部。工工具栏包含了了执行行行当前视图相关操作的按钮,比比如创建项、 删除 项、添加注释或是拍照。标签栏让用用户在 App 的不不同部分间快速切换, 比比如, 时钟 App 中的“闹钟”、“秒表”、“计时器器”。请参阅 Tab Bars 。标签栏和工工 具栏决不不会在同一一个视图内同时出现。 154
155. 3MiD 三米米设计工工作室翻译 8.内容视图(view) 8.1动作菜单(Action Sheets) 动作菜单是一一种特定的警告样式,它出现在对控件或操作的响应中,并呈现 一一 组与当前窗口口相关的两个或多个选择。用用户启动任务或者执行行行潜在的破坏性操 作之前弹出动作菜单请求确认。在较小小的屏幕上,动作菜单从屏幕的底 部向上 滑出, 在较大大的屏幕上, 动作菜单会以弹出窗口口的形式呈现出来。 提供一一个取消按钮可以增加操作的明确性:取消按钮能够让用用户在放弃一一项任 155
156. 3MiD 三米米设计工工作室翻译 务时对自自己己的操作更更加肯定,并且动作菜单中的取消按钮应该总是位于屏幕的 最底部。 突出破坏性的选择项:使用用红色色突出用用来执行行行破坏性或危险动作的按钮,并在 动作菜单的顶部显示这些按钮。 避免在动作菜单中出现滚动情况:如果一一个动作菜单中存在太多选项,用用户就 必须滚动查看所有选项,而而滚动需要更更多的时间来做出选择,且滚动过程中也 容易易误触到其他按钮。 8.2活动视图(Activity Views) 一一个活动就是一一个任务,例例如“复制”、“收藏”或“查找”,在当前下背景十十分有 用用。点击启动之后可以立立即执行行行一一个服务操作,也可以先请求更更多的信息,然 后再执行行行该操作。活动在活动窗口口中启动,活动窗口口可以以表单或着弹出窗口口 的形式出现,这取决于设备的种类和屏幕的方方向。使用用活动可以让用用户访问 App 中可执行行行的自自定义服务或者任务。 156
157. 3MiD 三米米设计工工作室翻译 系统内置了了许多事件,包括 “打印”,“信息” 和 “Airplay”。这些任务总是出现 在事件窗口口的顶部,而而且位置固定,所以你不不需要为这些默认操作创建新的自自 定义事件。事件窗口口还显示其他 App 的共享和操作扩展程序,详情请参 阅 Sharing and Actions。 设计简单的图像模板来展示你的自自定义视图:一一个图像模板使用用一一个蒙版去创 建一一个icon。使用用带有适合透明度与抗锯⻮齿的黑黑色色与白白色色,还有不不要包含投影。 图像模板应该在一一个70px X 70px的区域内居中显示。 创建活动标题应该简单明了了描述你的任务:标题显示在事件窗口口中事件图标的 157
158. 3MiD 三米米设计工工作室翻译 下方方,通常来说简短的标题效果最好,如果标题过⻓长,iOS 会先缩小小字号,仍 然太⻓长的话就会截断它。通常来说,尽量量避免将你的公司或产品名称包含在 标 题中。 确保活动是可以对当前窗口口中的内容进行行行操作的:虽然事件窗口口中系统内置事 件的位置是固定的,但如果它们不不适用用于你的 App,则可以将其移除。例例如, 为了了防止止用用户打印图像,你可以移除 “打印” 活动。另外,你还可以控制自自定 义服务出现的时间。 使用用操作按钮来显示事件窗口口:用用户已经习惯了了点击操作按钮来使用用系统内置 的服务,所以为了了避免用用户产生生混淆不不要提供其它操作方方式。 8.3警告框(Alerts) 警告框用用来传达与你的 App 或设备状态相关的重要信息,并且通常需要得到用用 户的反馈。警告框的内容包括标题,描述消息(可选)、一一个或多个按钮以及输 入入框(可选)。除了了这些元素之外,警告框的外观样式是不不可更更改的。 158
159. 3MiD 三米米设计工工作室翻译 尽量量避免使用用警告框:警告框十十分影响用用户的操作体验,所以只应该在重要的 场景下使用用,比比如确认购买和破坏性操作 (例例如“删除”),或者通知用用户有 关 App和设备的问题(警告、预警之类的问题)。警告框的不不常出现有助于提高高 用用户的重视程度,请确保每个警告都提供关键的信息和有效的选择。 测试两个方方向下警告框的显示情况:在横屏模式和竖屏模式下,警告框的显 示 可能会不不同,需要优化警告框内的文文本信息,使其不不需要滚动就可以在任 何方方 向上被轻松阅读。 159
160. 3MiD 三米米设计工工作室翻译 标题和描述消息 使用用一一些简短的描述性标题:让用用户看到的文文字越少越好,能够用用标题表达清 楚的就不不要增加额外的描述信息。可以使用用疑问句句或简短的陈述句句来让标题传 递更更准确的信息。尽量量将标题控制在一一行行行以内,如果标题是完整的句句子子, 使用用 句句子子模式的大大小小写和适当的标点符号来完成标题。(译者注)如果标题是句句子子 片片段,请不不要使用用表示结束的标点符号。 如果一一定要增加描述信息,请使用用完整的短句句:尽量量将句句子子控制在一一、两行行行 以内,使用用句句子子模式的大大小小写和适当的标点符号。 避免出现指责、判断、侮侮辱的语气气:用用户知道警告框弹出是出现了了问题和危 险的情况。只要语气气友好,直截了了当的传达消极的消息会比比表意模糊的积极 消 息更更好。避免出现“你”,“你的”,“我”,“我的”这类词语,因为有时候会被 认为是具有生生疏和趾高高气气昂的态度。 避免对警告按钮做出解释:如果警告框的文文本和按钮标题内容传达的信息足足够 明确, 就不不需要解释按钮的作用用。 如果一一定要对用用户提供指引, 请使用用 “tap” (点击)这个词,在引用用按钮时保持大大写,并且不不要在引中包含按钮的标题。 警告按钮 通常使用用包含两个按钮的警告弹窗:两个按钮的警告弹窗,可以使用用户更更容 易易 地在两个选择中做出决定。一一个按钮通常用用于通知,它无无法做出更更多的选 择。 三个或以上的按钮会使选择变得复杂,并且需要滚动,会造成很不不好的用用户体 验,这种情况下可以考虑使用用动作菜单,请查阅 Action Sheets。 创建简洁的、逻辑清晰的按钮标题:按钮标题最好由一一、两个描述操作结果 的词语组成。与所有按钮标题一一样,使用用标题模式的大大小小写(英文文环境下, 每 160
161. 3MiD 三米米设计工工作室翻译 个单词的首首字⺟母大大写),不不要出现表示结束的标点符号。尽量量使用用与警告 标题 和描述信息直接相关的动词或动词短语,例例如“查看全部”、“回复”或者“忽 略略”。 使用用“确认”进行行行明确的表达,避免使用用“是”和“否”。 把按钮放在用用户预期的地方方:通常来说,右边的按钮是用用户最有可能点击的 按 钮,取消按钮应该总是放在左边(译者注)。 创建合适的按钮标签:表达取消操作的按钮都应该叫做 “取消”(原文文中是 Cancel, 在中文文环境里里里可以更更灵活的运用用来匹配操作类型, 如退出、关闭 等)。 强调会产生生破坏性操作的按钮:如果警告弹窗的按钮点击后会导致破坏性的 操作,例例如 “删除” 操作,那么应该将其设计为具有破坏性的样式以适配系 统。 开发者指南,请参阅UIAlertAction里里里的 UIAlertActionStyleDestructive 。 除此 之外,需要设置一一个取消按钮,并让其处于默认选择的状态,这样用用户 可以选 择安全的退出破坏性的操作。 用用户可以通过回到主屏幕来取消警告窗口口:通过返回屏幕主⻚页并退出 App 的操 作(如按 HOME 键)也可以关闭弹出弹窗,和点击警告窗口口中的 “取 消” 按 钮功能相同。当用用户再次返回该 App 时,警告弹窗就消失了了。如果你 的警告 框里里里没有取消按钮,当用用户需要退出 App 时,必须在 App 的代码中 执行行行取消 操作。 8.4 精选(Collections) 精选⻚页面面可以有序地管理理一一系列列内容,例例如一一组照片片,是可定制且在高高度视 觉 化的布局中进行行行呈现。由于精选⻚页面面并不不是一一个严格的线性布局,因此它特别 适合显示那些尺寸寸不不一一的图像。通常,精选⻚页面面更更适合展示照片片内容。 为了了能 161
162. 3MiD 三米米设计工工作室翻译 够直观的区分类目目,可以选择性地实现背景和其他装饰性视图。 精选支支持丰富的交互和动画。默认情况下,你可以通过点击来进行行行选择,通 过 ⻓长按进行行行编辑,还可以使用用滑动操作来滚动视图。如果你的 App 有其它 需求, 你可以添加更更多的手手势来自自定义这些操作。在精选⻚页面面内,“插入入”、“删 除”、 “重新排序” 等操作都支支持动画效果,同样,你也可以自自定义照片片演示 的幻灯 片片效果(批量量选择照片片后在事件弹窗中可以启用用幻灯片片)。 在标准行行行或网网格布局够用用时避免使用用全新的设计方方式:精选⻚页面面应该提高高用用户 体验,而而不不是让⻚页面面本身成为用用户关注的焦点,让用用户更更容易易地找到所需内容, 因为过于复杂的操作会让用用户丧失兴趣。应该在内容周围保持适当的留留白白,使 布局更更整洁防止止相互叠加。 162
163. 3MiD 三米米设计工工作室翻译 考虑使用用表格排列列的方方式而而不不是文文本集合:在可滚动列列表中查看和消化内容 会更更简单有效。 请谨慎使用用动态化布局:精选⻚页面面的布局可以随时更更改。如果你决定要动态 地 调整精选⻚页面面的布局,请确保其中的变化是有意义而而且容易易被用用户理理解的, 缺 乏动机的布局变化会给用用户带来不不符合预期且难以使用用的印象。如果由于 布局 的变化而而导致用用户丢失当前的关注点或所处的场境, 用用户会觉得你的 App 已 经失控了了。 8.5 图像视图(Image Views) 图像视图可以在透明或不不透明的背景中显示单图或动画序列列图。在图像窗口口中, 图像可以被拉伸、缩放来调整到合适的大大小小或者固定在一一个特定的位置上。默 认情况下,图像窗口口不不支支持用用户的交互行行行为。 163
164. 3MiD 三米米设计工工作室翻译 尽可能确保动画序列列中的所有图像都是相同尺寸寸:理理想情况下,图像应该预 设 为当前窗口口大大小小,这样系统就不不需要对其进行行行任何缩放。如果系统必须对 图像 进行行行缩放操作,那么当所有图像的大大小小和形状都相同时,最容易易实现所 需的结 果。 8.6 地图(Maps) 你可以在 App 中使用用地图窗口口来呈现地理理数据,并支支持系统内置应用用 “地图” 中提供的大大部分功能。使用用地图窗口口可以显示标准地图、卫星图像,或 者两者 兼而而有之。它可以显示备注(图钉)和叠加图层,支支持缩放和平移。 如果你的 App 支支持路路线功能,比比如在一一个记录运动路路线的 App 中,你可以 使用用地图窗 164
165. 3MiD 三米米设计工工作室翻译 口口来显示该路路线。 通常, 允许用用户和地图进行行行交互:用用户习惯于使用用手手势与系统内置的地图 App 进行行行交互,因此他们也希望使用用同样的方方式与你 App 中的地图进行行行交互。 使用用用用户心心里里里预期的图钉颜色色:地图图钉用用来显示用用户在地图上感兴趣的地 点。 因为用用户已经熟悉了了“地图” App 里里里图钉的颜色色,所以最好避免在你的 App 里里里 重新定义这些颜色色的含义:红色色表示目目的地,绿色色表示起始点,紫色色用用来标识 用用户指定的地点。 165
166. 3MiD 三米米设计工工作室翻译 8.7 翻⻚页(Pages) ⻚页面面视图控制器器可以实现翻⻚页时的线性导航,用用于文文档、书籍、记事本或日日历 中。⻚页面面视图控制器器有两种实现⻚页面面间切换的方方式:滚动过渡:没有特定的样 式, ⻚页面面流畅地从一一个⻚页面面滚动到下一一个⻚页面面。翻⻚页过渡:当你在屏幕上滑动 的时候, ⻚页面面就会弯曲, 和阅读纸质书 时的翻⻚页效果一一样。 依序切换⻚页面面的方方式:⻚页面面视图控制器器只能实现相邻⻚页面面之间的跳转切换, 如 果用用户需要在你的 App 中切换到任意的⻚页面面,那么就需要自自定义一一个控 件来 实现这个功能。 166
167. 3MiD 三米米设计工工作室翻译 8.8 弹出框(Popovers) 弹出框是在用用户点击一一个控件或者屏幕上的一一个区域后,出现在屏幕其他内 容 之上的临时窗口口。通常来说,弹出窗口口包含一一个指向它出现位置的箭头。 弹窗 可以是非非原生生的也可以是系统原生生样式的:对于非非原生生的弹出窗框,通 过点击 屏幕上的其他部分或弹出框上的按钮关闭它;对于系统原生生样式的弹出框,使 用用其中的 “取消” 按钮或其他按钮来关闭。 弹出框适合出现在较大大的屏幕上, 它可以包含各种各样的元素,如导航栏、 工工具栏、标签栏、表格、精选窗口口、 图像、地图和自自定义窗口口。在弹出框出 现且没有被取消时,通常不不能操作其它 视图的内容。使用用弹出框显示与当前 屏幕内容相关的选项或信息,例例如,当你 点击 “事件” 按钮时,许多 iPad 上 的 App 会显示一一个共享选项的弹出窗口口。 尽量量不不要在 iphone 上显示弹出窗口口:通常,弹出窗口口应该在 iPad 上的 App 中使用用。在 iPhone 的 App 中,由于屏幕大大小小有限,请在全屏视图中 显示信 息。有关指南,请参阅 Modality。 167
168. 3MiD 三米米设计工工作室翻译 请使用用 “关闭” 按钮进行行行确认和引导:弹出框中的关闭按钮应该传达出明 确的 定义,比比如 “取消” 表示不不保存且退出,“完成” 表示保存并退出。通常, 弹出 框不不再需要显示时就应该自自动关闭。在大大多数情况下,当用用户在弹出框 区域外 点击或在弹出框中选择一一个项目目时,弹出窗口口就应该关闭。如果存在 多个选择 项,弹出框应该保持打开状态,直到有人人点击取消按钮或者在弹出 窗口口区域外 点击将其关闭。 请在非非原生生弹框关闭时自自动保存用用户已操作的内容:用用户会不不小小心心点击到弹 出框外的区域而而取消非非原生生弹出框,所以只有当用用户明确点击取消按钮时才 不不 保存操作内容直接退出。 弹出框应该在屏幕的合适位置出现:弹出框的箭头应该直接指向使其浮现的 控件位置。弹出框无无法在屏幕上进行行行拖拽,所以弹出框不不应该遮挡屏幕上需 要 被用用户看到的信息。弹出框也不不应该遮挡住点击后会浮现弹出框的控件。 确保同一一时间内屏幕上只有一一个弹出框:显示多个弹出框会使界面面显得混乱, 给用用户造成困扰。不不要让弹出框有级联或层级关系,这样会使一一个弹出框从 另 一一个弹出。如果你需要显示一一个新的弹出窗口口,请关闭打开的第一一个弹出窗口口。 不不要在弹出框出现时显示另一一个窗口口:只有警告窗口口能够出现在弹出框的上方方。 如果允许,请让用用户仅通过一一次点击就可以关闭一一个弹出框接着打开另一一个弹 出框:当几几个不不同的栏目目按钮都能打开弹出窗口口时,这个操作会减少用用户 的额 外点击。 避免将弹出框显示的太大大:弹出框不不应该占据整个屏幕,它的大大小小应该恰好 足足 168
169. 3MiD 三米米设计工工作室翻译 够显示其中的内容,并指向其出现的位置。请注意,系统可能会调整弹出 框的 尺寸寸来确保其良好适应屏幕。 请确保自自定义的弹出框让用用户理理解这就是弹出框:虽然你可以自自定义弹出框 的许多视觉效果,但尽量量避免设计出一一个用用户难以理理解的弹出框。使用用标准 控 件和视图的弹出框看上去最容易易被用用户所接受。 确保弹出框的大大小小改变过程有一一个平滑的过渡:部分弹出框提供了了相同内容 的精简和扩展视图两种样式,如果要调整弹出框的大大小小,请避免让用用户感觉 是 一一个新的弹出框取代了了原先的弹出框。 8.9 滚动视图(Scroll Views) 滚动视图能让用用户浏览比比屏幕上可⻅见区域里里里更更多的内容,比比如文文档中的文文本 或 者收集的图像。当用用户滑动、快速滑动、拖拽、点击和缩放时,滚动视图 会跟 随这个手手势以一一种自自然流畅的方方式显示或缩放内容。滚动视图本身没有 什什么样 式,但是当用用户与之交互时,会有一一个滚动条出现。滚动视图还可以 在分⻚页模 式下进行行行操作(iPad 的分⻚页模式),此时会滚动显示出一一个全新的 内容⻚页面面, 而而不不是在当前的⻚页面面中进行行行移动。 169
170. 3MiD 三米米设计工工作室翻译 支支持适当的缩放操作:如果缩放操作对你的 App 有用用,就可以让用用户通过 双 指开合或者双击来进行行行放大大和缩小小,如果你的 App 支支持了了缩放,你需要 设定 一一个最大大和最小小的缩放范围,例例如:允许用用户放大大文文字直到一一个字符填 满屏幕, 虽然这对大大多数 App 来说是没有什什么意义的。 可以考虑在分⻚页模式的滚动视图中使用用⻚页码控件:⻚页码控件可以让用用户知道 当前浏览到什什么位置了了,还可以显示有多少可用用的⻚页面面或内容块。如果滚动视 图上显示了了一一个⻚页码控件,最好禁用用和⻚页码控件同一一方方向的滚动条,以避 免误 操作。关于⻚页码控件使用用的更更多信息,请查阅 Page Controls。 170
171. 3MiD 三米米设计工工作室翻译 不不要在一一个滚动视图里里里置入入另一一个滚动视图:这样做会出现失控和意料料之外的 情况。 通常,一一次只显示一一个滚动视图:用用户经常在滚动时做出大大幅度的滑动手手势, 而而且很容易易误触到同一一屏幕上相邻的另一一个滚动视图。如果你需要在一一个屏 幕 上放置两个滚动视图,可以考虑让它们朝不不同的方方向滚动,这样一一个手手势 就不不 能同时影响两个视图,例例如,当 iPhone 在竖屏状态时,“股票” App 中 显示 的股价是横向滚动的,而而公司的特定信息是竖向滚动的。 8.10 分屏视图(Split View) 分屏视图可以管理理两个并列列面面板的显示,包括主面面板中作为主要信息的展示 而而 在副面面板中展示其关联信息。每个面面板中都可以包含导航栏、工工具栏、标 签栏、 表格、精选、图像、地图和自自定义窗口口等多种元素。分屏视图通常应 用用于筛选 信息的操作: 在主面面板中显示一一个筛选类别列列表,将筛选后的结果 显示在副面面 板中。如果你的 App 有需要,主窗口口可以覆盖在副面面板之上, 主面面板在不不使 用用时也可以在屏幕上隐藏,当设备处于竖屏状态时,这一一点非非 常有用用,因为能 够在副面面板中显示更更多的内容。 171
172. 3MiD 三米米设计工工作室翻译 请根据内容来选择一一个合适的分屏视图布局:默认情况下,分屏视图将屏幕 的 三分之一一用用于主面面板,三分之二二用用于副面面板。屏幕也可以分成两半,根据 你的 内容选择合适的分割,但是请确保窗口口看起来是平衡的。避免创建比比主 面面板更更 窄的副面面板。 突出显示主面面板中当前选择的选项:虽然副面面板中的内容可以更更改,但它应 该 始终对应于主面面板里里里选中的选项,这有助于用用户理理解两个面面板之间的关系。 通常,只在分屏视图的一一侧显示导航:在分屏视图的两个中都放置导航会让 用用户失去方方面面板向感,难以辨别两个面面板之间的关系。 提供多种方方式来唤醒隐藏的主面面板:默认情况下只会显示一一个副面面板,因此 需 要提供一一个按 (通常位于导航栏)用用来呼出主面面板。除非非你的 App 使 用用滑动手手势来执行行行其 172
173. 3MiD 三米米设计工工作室翻译 他功能,否则应该支支持用用户从屏幕的边缘向屏幕内滑动 来唤出主面面板。 8.11 表元素(Tables) 表元素以一一个可滚动的单列列列列表进行行行展示,其中的行行行可以对其进行行行相应的分 组。 表元素能够以列列表的形式明确有效地显示大大量量或简略略的信息。通常,表元素是 基于文文本格式的最佳形式,表元素常常作为一一种导航工工具出现在分屏 视图的一一 侧,而而与之相关的内容显示在另一一侧,关于分屏窗口口请查阅 Split Views。 iOS 定义了了两种表格样式:平铺式和分组式。 平铺式(左):行行行可以被分为若干干带标签的段落,而而表格的右侧可以出现垂 直 排列列的索引符号(译者注:即从字⺟母 A 到 Z 的字⺟母索引条,如通讯录的 联系 人人列列表⻚页)。⻚页眉会在这一一节的首首个条目目前显示,⻚页脚会在最后一一个条 目目后显 示。 分组式(右):行行行会被分成多个分组显示,每组都能够以⻚页眉开始,⻚页脚结 束。这种类型的表格至至少包含一一个分组,每个分组中至至少包含一一行行行列列表,分 组 型列列表中没有索引条。 173
174. 3MiD 三米米设计工工作室翻译 考虑表元素的宽度:过窄的表元素会导致文文本被截断或者挤到一一起,用用户很难 快速扫浏览这些内容。过宽的表格也很难让用用户快速浏览,需要用用内容来 填充 部分空间。 尽快呈现表元素中的内容:不不要等表格相关的所有数据都加载完成才一一次性 显示出来,可以先在屏幕中显示文文本内容,如图像等较为复杂的数据则加载 完 成后再显示出来。这种技术可以让用用户尽快看到有用用的信息,同时也增加 了了 App 交互响应效率。有时,在新数据加载出来前,显示旧数据也是有用用的。 请在内容加载时给予用用户反馈:如果表元素中的数据需要一一定时间来加载, 请 显示一一个进度条或动态旋转指示器器,让用用户知道 App 还在运行行行,且在执 行行行数 据加载中。 保持最新的表元素内容:定时更更新(后台读取)并准备表元素中的最新数据, 但不不要改变屏幕当前的显示情况。用用户在滚动内容时才能提前做好准备,并 将 新的内容添加到表的开头或结尾。有些 App 在加载完新数据时会出现一一 个提 示,并提供了了某操作可以跳转到新数据的位置。在 App 中包含一一个刷 新控件 也是不不错的主意,这样用用户可以在任何时候手手动刷新,关于刷新控件 的更更多信 息请查阅 Refresh Content Controls。 避免在包含右对⻬齐方方式的表元素中使用用索引:索引是通过大大幅度的滑动手手势 来控制的,当使用用手手势操作时,如果其他交互元素(例例如详情指示器器)停留留 在 附近,可能系统会发生生对操作的误判而而导致启动了了其他元素。 表行行行 在表元素中使用用标准的单元格样式定义显示的内容。 174
175. 3MiD 三米米设计工工作室翻译 基本型(默认)(左):包含一一个在行行行左端的图片片(可选)和一一个与图片片右边 左 对⻬齐的文文字标题,适用用于显示不不需要补充信息的项目目。 开发者指南,请参阅 UITableViewCell 里里里的 UITableViewCellStyleDefault 副标题型(右):包含一一个左对⻬齐的文文字标题(一一行行行)和在下方方同样左对⻬齐 的副标题,这些相似的行行行在一一个表中可以得到很好的展示,因为副标题可以 用用 来区分不不同的行行行。 右提示(Value1)。左对⻬齐的标题与右对⻬齐的副标题在同一一行行行中显示。 请参阅 UITableViewCell 里里里的 UITableViewCellStyleValue1。 175
176. 3MiD 三米米设计工工作室翻译 左提示(Value2。右对⻬齐的标题后面面跟着一一个左对⻬齐的副标题,并在同一一行行行 中 显示。 所有表元素的标准单元格样式都允许使用用图形控件,例例如复选标记或详情指 示 器器,当然,增加这些元素后会减少标题和副标题的使用用空间。 请使用用简洁的文文本,以避免被截断:被截断的单词和短语让用用户难以阅读和理理 解。所有类型的表元素单元格都会自自动截断文文本,但不不同的单元格样式和 截断 发生生的位置会产生生问题。 你可以为“删除”按钮自自定义一一个标题:如果你自自定义的标题可以让用用户更更 清 晰地理理解该操作的含义,你可以替换系统默认的 “删除” 文文本。前提是这 一一行行行 支支持“删除”操作。 在用用户的选中操作中给予反馈:当用用户在点击某个可选中的项目目时,他们会 希 望这个行行行应该有短暂的高高亮,点击过后,用用户期望出现一一个新的视图或者 有什什 么其它改变,例例如出现一一个勾选标记,以表明这个项目目已经被选中或激活。 为非非标准的表元素行行行设计一一个自自定义单元格样式:标准样式适用用于各种常⻅见 场景,但有些内容或整个 App 设计可能需要一一个高高度自自定义的表元素外观, 想了了解如何创建自自己己的单元格,请参阅 Table View Programming Guide for iOS 里里里的 Customizing Cells。 8.12 文文本视图(Text View) 文文本视图可以容纳并显示文文本内容。文文本视图的高高度不不限,当内容超出视图 时 176
177. 3MiD 三米米设计工工作室翻译 可以滚动查看。默认情况下,文文本视图中的内容是以左对⻬齐的黑黑色色系统字 体显 示。文文本视图支支持编辑,当用用户在视图中点击时,会唤出键盘。 保持文文本的可读性:虽然在你在文文本中可以使用用各种字体、颜色色和对⻬齐方方法, 但是保持文文本内容的可读性是非非常重要的。最好在文文本视图中支支持动态文文本, 这样文文本视图在用用户改变字体大大小小后依然会易易于阅读。你还应该通过启用用可 访 问性选项,如粗体文文字来测试内容。 唤起合适的键盘类型:根据不不同类型内容的输入入,iOS 提供了了几几种不不同的键 盘 类型。为了了简化内容输入入,在文文本视图的编辑过程中,唤起的键盘应该匹 配相 应字段的类型 (例例如输入入手手机号只唤起数字键盘)。关于键盘类型的完整列列表, 177
178. 3MiD 三米米设计工工作室翻译 请参阅 UITextInputTraits 里里里的 UIKeyboardType。 8.13 网网⻚页视图(Web View) 网网⻚页视图可以加载并显示丰富的网网⻚页内容,可以直接在你的 App 中嵌入入 HTML 和网网⻚页。“邮箱” App 在邮件中就使用用了了 web 视图来展示。 需要时可以使用用向前和返回的导航按钮:web 视图支支持向前和返回操作,但 默 认情况下这个操作是被禁止止的。如果用用户需要使用用你的 web 视图访问较 多⻚页 面面,请提供相应的控件来启用用向前和返回的操作。 178
179. 3MiD 三米米设计工工作室翻译 避免使用用 web 视图来构建 web 浏览器器:使用用 web 窗口口可以让用用户不不用用离 开 当前 App 中的内容就能简单地访问一一个网网⻚页,但 Safari 才是用用户在 iOS上浏 览网网⻚页的主要方方式。在你的 App 中复制 Safari 的功能是没有必要也不不 被鼓鼓励 的。 9.控件(Controls) 9.1按钮(Buttons) 按钮用用于启动App特定的操作,可以自自定义按钮背景,并且包含标题或者图标。 系统提供了了许多预定义的按钮样式,可用用于大大多数使用用场景。你也可以设计自自 定义按钮。 开发者指南,请参阅 UIButton。 系统按钮(Buttons) 系统按钮通常出现在导航栏和工工具栏中,但可以在任何地方方使用用。 179
180. 3MiD 三米米设计工工作室翻译 在标题中使用用动词:表明动作的标题说明按钮是可交互式的,会让用用户知道点 击后会发生生什什么。 使用用标题首首字⺟母大大写:除了了冠词、并列列连词以及,四个或四个以下字⺟母 的介词 之外的每个词都要大大写首首字⺟母。 保持标题简短:过⻓长的文文本会使您的界面面很拥挤,并可能在较小小的屏幕上被截 断。 仅在必要时添加边框或背景:默认情况下,系统按钮没有边框或背景。然而而, 在一一些内容区域中,边框或背景是表示交互性。在App中,带边框的数字键加 强了了传统的拨打电话模式,而而“呼叫”按钮的背景容易易引人人注目目,便便于点击。 对于开发人人员指南,请参阅UIButtonTypeSystem的按钮类型的UIButton。 详情按钮(Detail Disclosure Buttons) “详情”按钮可打开窗口口(通常是模态视图),其中包含与屏幕上特定项目目相关 的其他信息或功能。虽然您可以在任何类型的窗口口中使用用它们,但详情按钮通 常用用于表行行行中以访问有关特定行行行的信息。 180
181. 3MiD 三米米设计工工作室翻译 在表行行行中适当使用用详情按钮:当表行行行中存在“详情”按钮时,点击该按钮会显示 其他信息。点击其他位置选择行行行或结果为App定义的行行行为。如果您想让人人们点 击整行行行以查看其他详细信息,请不不要使用用“详情”按钮。相反,使用用细节时使用用 “详情”按钮。 请参阅UITableViewCell中的UITableViewCellAccessoryType。 有关开发人人员指导,请参阅UIButtonTypeDetailDisclosure按钮类型的 UIButton。 信息按钮(Info Buttons) 在打开窗口口后,“信息”按钮会显示有关App的配置详细信息,有时位于当前窗 口口的背面面。信息按钮有两种⻛风格 - 浅色色和深色色。选择最适合您应用用程序设计的 样式,不不会让用用户迷失方方向。 181
182. 3MiD 三米米设计工工作室翻译 对于开发人人员指南,请参阅UIButtonTypeInfoLight和UIButtonTypeInfoDark 按钮类型的UIButton。 添加联系人人按钮(Add Contact Buttons) 用用户可以点击“添加联系人人”按钮来浏览现有联系人人列列表,并选择一一个用用于插入入 文文本字段或其他窗口口。例例如,在“邮件”中,您可以点击邮件“收件人人”字段中的 “添加联系人人”按钮,从联系人人列列表中选择收件人人。 除“添加联系人人”按钮外,还允许键盘输入入:“添加联系人人”按钮提供了了新建联系 人人信息的方方法。可以将它作为添加现有联系人人的快捷方方式提供,也可以通过键 盘输入入联系信息。 对于开发人人员指南,请参阅UIButtonTypeContactAdd的按钮类型的UIButton。 182
183. 3MiD 三米米设计工工作室翻译 9.2编辑菜单(Edit Menus) 用用户可以触摸并按住或双击文文本字段,文文本窗口口,网网⻚页窗口口或图像窗口口中的元 素以选择内容并显示编辑选项,例例如复制和粘贴。 显示当前情景的相应命令:默认情况下,选项包括剪切,复制,粘贴,选择, 全选和删除命令,其中任何一一个都可以选择禁用用。如果未选择任何内容,则菜 单不不应显示选项,例例如“复制”或“剪切”。同样,如果已选择某些内容,则菜单 不不应具有“选择”选项。 如有必要,调整编辑选项的位置:默认情况下,菜单位于插入入点或选择的上方方 或下方方,具体取决于可用用空间,并包含插入入点相关内容的指针。虽然您无无法更更 改菜单的形状,但其位置是可调整的 - 您可以防止止它覆盖重要内容或界面面的某 些部分。 不不要使用用与编辑菜单相同的功能实现其他控件:提供多种方方式来启动操作会导 致用用户体验不不一一致并导致混淆。例例如,如果您的App允许用用户使用用菜单复制内 容,请不不要使用用复制按钮。 允许选择和复制可能有用用的不不可编辑文文本:人人们通常希望将静态内容(例例如图 像标签或社交媒体状态)添加到电子子邮件,便便笺或网网络搜索中。 不不要将按钮添加编辑选项:如果您这样做,用用户会使用用按钮,而而不不去打开编辑 183
184. 3MiD 三米米设计工工作室翻译 选项。 使编辑操作可撤消:菜单在执行行行操作之前不不需要确认。因为有人人可能在执行行行操 作后改变主意,所以始终要确保撤消和重复。 使用用自自定义命令扩展编辑选项:您可以通过提供其他特定于App的命令来增加 价值与标准命令一一样,任何自自定义命令都应对选定的文文本或对象进行行行操作。 在系统提供的命令之后显示自自定义命令:不不要让系统提供的命令中和自自定义命 令混乱,系统命令是用用户更更实用用且经常使用用。 自自定义命令的数量量:太多选择会让用用户感到困难。 保持自自定义命令名称简短:命令名称应该是动词或简短的动词短语,它们简洁 地描述了了要执行行行的动作。除了了冠词、并列列连词、以及四个字⺟母以下的介词外, 都要首首字⺟母大大 写。 对于开发人人员指南,请参阅复制,剪切和粘贴操作的文文本编程指南适用用于iOS 和UIMenuController。 9.3标注(Labels) 标签描述屏幕界面面元素或提供短消息。虽然人人们无无法编辑标签,但他们有时可 能复制标签的内容。标签可以显示任意数量量的静态文文本,但最好保持简短。 保持标签清晰:标签可以包括简单或样式文文本。如果您调整标签的样式或使用用 自自定义字体,请务必保证易易读性。最好采用用动态类型,这样当用用户在其设备上 184
185. 3MiD 三米米设计工工作室翻译 更更改文文本大大小小时,标签看起来仍然易易阅读。请参⻅见动态类型。您还应该在启用用 了了辅助功能选项的情况下测试标签,例例如粗体文文本。请参阅辅助功能。 要了了解文文本,请“参阅字符串串编程指南”。要了了解有关创建样式文文本的信息,请 参阅“ 归因字符串串编程指南”。有关标签开发人人员的指导,请参阅UILabel。 9.4⻚页面面控件(Page Controls) ⻚页面面控件显示当前⻚页面面在平面面⻚页面面列列表中的位置。它显示为一一系列列小小指示点, 表示打开顺序中的可用用⻚页面面。实心心点表示当前⻚页面面。在视觉上,这些点总是等 距的,并且如果屏幕上出现太多则会被剪裁。用用户可以点击⻚页面面控件的前沿或 后端来访问下一一⻚页或上一一⻚页,但是他们无无法点击特定点来转到特定⻚页面面。导航 总是按顺序发生生,通常是通过将⻚页面面滑动到一一侧。 不不要使用用具有分层⻚页面面的⻚页面面控件:⻚页面面控件不不显示⻚页面面的相关性或指示哪个 ⻚页面面对应于每个点。此类控件设计用用于彼此对等的⻚页面面。 不不要显示太多⻚页面面:超过大大约10个点一一目目了了然很难计算,并且按顺序访问超过 大大约20个打开⻚页面面非非常耗时。如果您的应用用需要显示超过20个⻚页面面作为对等方方, 请考虑使用用不不同的排列列 - 例例如表格- 启用用非非顺序导航。 屏幕底部的中心心⻚页面面控件:⻚页面面控件应始终居中并位于内容底部和屏幕底部之 间。这使其保持可⻅见,而而不不会阻止止内容。 185
186. 3MiD 三米米设计工工作室翻译 有关开发人人员指导,请参阅UIPageControl。 9.5选择器器(Pickers) 选择器器包括一一个或多个不不同值的滚动列列表,每个都可以被单独选址中 - 在窗口口 中心心的黑黑色色文文本中出现。当用用户编辑字段或点击菜单时,选择器器通常显示在屏 幕底部或弹出窗口口中。选择器器也可以显示为内联,例例如“在日日历事件中编辑日日期 时”。选择器器的高高度大大致是五行行行列列表值的高高度。选择器器的宽度可以是屏幕的宽度 或其封闭视图,具体取决于设备和使用用情景。 使用用可预测和逻辑顺序的值:当可滚动列列表静止止时,可以隐藏选择器器中的许多 值。最好人人们可以预测这些值是什什么,例例如使用用按字⺟母顺序排列列的国家/地区列列 表,这样他们就可以快速浏览列列表。 避免切换屏幕以显示选择器器:当显示在当前使用用情境中且低于或者紧挨正在编 186
187. 3MiD 三米米设计工工作室翻译 辑的字段时,选择器器能更更好地发挥作用用。 对于多数值列列表,请使用用表格而而不不是选择器器:⻓长⻓长的列列表在选择器器中导航可能 很繁琐。表格高高度可调,可以包含一一个索引,滚动速度更更快。 有关开发人人员指导,请参阅UIPickerView。 日日期选择器器(Date Pickers) 日日期选择器器是用用于选择特定日日期,时间或两者的有效界面面。它还提供了了一一个显 示倒数计时器器的界面面。 日日期选择器器有四种模式,每种模式都有一一组不不同的可选值。 日日期:显示年年份,月月份和日日份。 时间:显示小小时,分钟和(可选)AM / PM指定。 日日期和时间:显示日日期,小小时,分钟和(可选)AM / PM指定。 187
188. 3MiD 三米米设计工工作室翻译 倒计时器器:显示小小时和分钟,最⻓长23小小时59分钟。 日日期选择器器中显示的确切值及其顺序取决于用用户的区域设置。 在指定分钟时考虑提供不不同的间隔。默认情况下,分钟列列表包含60个值(0到 59)。您可以选择增加分钟间隔,只要它均匀分为60即可。例例如,您可能需要 每隔一一小小时的间隔(0,15,30和45)。 有关开发人人员指导,请参阅UIDatePicker。 9.6进度指示器器(Progress Indicators) 不不要让用用户盯着静态屏幕等待你的App加载内容或执行行行冗⻓长的数据处理理操作。 使用用活动指示器器和进度条让人人们知道您的App没有停滞,并让他们知道他们将 等待多⻓长时间。 另⻅见加载。 活动指示器器(Activity Indicators) 活动指示符旋转,同时执行行行无无法量量化的任务,例例如加载或同步复杂数据。任务 完成后它会消失。活动指标是不不可交互的。 支支持进度条超过活动指标:如果等待是可量量化的,请使用用进度条而而不不是活动指 示器器,以便便用用户们可以更更好地衡量量正在发生生的事情以及需要多⻓长时间。 保持活动指标的移动:人人们将固定活动指标与停滞过程联系起来。让它旋转, 188
189. 3MiD 三米米设计工工作室翻译 让用用户知道正在发生生的事情。 如果它有用用,请在等待任务完成时提供有用用的信息:在活动指标上方方添加标签 以提供额外的背景信息。避免使用用模糊的术语,如加载或验证,因为它们通常 不不会添加任何意义。 有关开发人人员指导,请参阅UIActivityIndicatorView。 进度条(Progress Bars) 进度条包括从左到右填充的轨道,以显示具有已知持续时间的任务的进展。进 度条是非非交互式的,尽管它们通常伴有用用于取消相应操作的按钮。 始终准确报告进度:不不要为了了使App看上去在运行行行显示不不准确的进度信息。可 量量化的任务使用用进度条。否则,请使用用活动指示器器。 对具有明确定义的持续时间的任务使用用进度条:进度条非非常适合显示任务的状 态,特别是当它有助于传达任务需要完成的时间。 隐藏导航栏和工工具栏中未填充的轨道部分:默认情况下,进度条的轨道包括已 填充和未填充的部分。在导航栏或工工具栏中使用用时,例例如表示⻚页面面加载,应配 置进度条以隐藏轨道的未填充部分。 考虑自自定义进度条的外观以匹配App:可以调整进度条的外观以匹配您的应用用 程序的设计。例例如,您可以填充指定自自定义色色调或图像。 有关开发人人员指导,请参阅UIProgressView。 189
190. 3MiD 三米米设计工工作室翻译 网网络活动指标 (Network Activity Indicators) 在没有边缘显示的设备上,网网络活动指示器器在网网络发生生时,会在屏幕顶部的状 态栏中旋转。网网络完成后它会消失。该指标看起来就像一一个活动指示器器,并且 是非非交互式的。 仅针对持续时间超过几几秒的网网络操作显示此指示器器:快速网网络操作时不不需要显 示该指示器器,因为它可能会在任何人人注意到它的存在之前消失或者意识到它的 用用途是什什么前消失。 另请参⻅见状态栏,有关开发人人员指导。 请参阅UIApplication的networkActivityIndicatorVisible方方法。 9.7刷新内容控件(Refresh Content Controls) 通常在表格窗口口中 ,刷新控件用用来手手动即时加载内容,而而不不用用等待下一一次自自动 更更新内容。刷新控件是一一种特殊类型的活动指示器器,默认情况下是隐藏的,并 且在向下拖动要重新加载的视图时变为可⻅见。例例如,在邮件中,您可以向下拖 动收件箱邮件列列表以检查新邮件。 190
191. 3MiD 三米米设计工工作室翻译 执行行行自自动内容更更新:尽管人人们都希望能够立立即触发内容刷新,但他们还希望定 期进行行行自自动刷新。不不要让用用户负责启动每个更更新。定期更更新数据,保持数据新 鲜。 只有在增加价值时才提供简短标题:刷新控件可以包括标题。在大大多数情况下, 这是不不必要的,因为控件的动画表明内容正在加载。如果您确实包含标题,请 不不要使用用它来解释如何执行行行刷新。而而是提供有关正在刷新的内容的有价值信息。 例例如,播客中的刷新控件使用用标题告诉人人们上次播客更更新的时间。 有关开发人人员指导,请参阅UIRefreshControl。 9.8分段控件(Segmented Controls) 分段控件是两个或更更多个段的线性集合,每个段当作互斥按钮。在控件内,所 有段的宽度相等。与按钮一一样,段可以包含文文本或图像。分段控件通常用用于显 示不不同的窗口口。例例如,在地图中,分段控件可让您在地图,传送和卫星视图之 间切换。 191
192. 3MiD 三米米设计工工作室翻译 限制段数以提高高可用用性:更更宽的分段更更容易易点击。在iPhone上,分段控件应有 五个或小小于五个。 尽量量保持段内容大大小小一一致:因为所有段都具有相同的宽度,如果内容填充,某 些段有内容而而其他的没有,则它看起来不不太好。 避免在分段控件中混合文文本和图像:虽然单个段可以包含文文本或图像,但将两 者混合在一一个控件中可能会导致界面面断开连接和混乱。 在自自定义分段控件中适当地定位内容:如果更更改分段控件的背景外观,请确保 内容仍然看起来协调并且不不会显示未对⻬齐。 有关开发人人员指导,请参阅UISegmentedControl。 9.9滑块(Sliders) 滑块是一一个水水平轨道,带有一一个名为拇指的控件,您可以用用手手指滑动在最小小值 192
193. 3MiD 三米米设计工工作室翻译 和最大大值之间移动,例例如屏幕亮度级别或媒体播放期间的位置。当滑块的值发 生生变化时,最小小值和拇指之间的轨道部分会填充颜色色。滑块可以选择显示左右 图标,用用于说明最小小值和最大大值的含义。 如果添加了了值,则自自定义滑块的外观:可以调整滑块的外观,包括轨道颜色色, 拇指图像以及左右图标,以与App的设计⻛风格并传达意图。例例如,调整图像大大 小小的滑块可以在左侧显示图像图标,在右侧显示一一个大大图像图标。 请勿使用用滑块调节音音量量:如果您需要在应用用中提供音音量量控制,请使用用可自自定义 的音音量量视图,其中包括音音量量级滑块和用用于更更改活动音音频输出设备的控件。要了了 解如何做出音音量量窗口口,请参阅MPVolumeView。 有关开发人人员指导,请参阅UISlider。 9.10分档器器(Steppers) 分档器器分两部分控制,用用于增加或减少量量值。默认情况下,分档器器的一一边显示 加号,另一一端显示减号。如果需要,符号可以用用自自定义图像替换。 193
194. 3MiD 三米米设计工工作室翻译 让分档器器控制的值有明显改变:分档器器本身不不显示任何值,因此请确保人人们知 道在使用用分档器器时它们正在改变哪个值。 当可能发生生大大的值变化时,请勿使用用分档器器:分档器器可以很好地进行行行需要点击 几几下的小小改动。例例如,在打印屏幕上,使用用分档器器设置份数是有意义的,因为 人人们很少更更改此设置。另一一方方面面,使用用分档器器来选择⻚页面面范围是没有意义的, 因为即使合理理的⻚页面面范围也需要大大量量的点击。 有关开发人人员指导,请参阅UIStepper。 9.11开关(Switches) 开关是两个互斥状态 - 开和关之间的视觉切换。 194
195. 3MiD 三米米设计工工作室翻译 考虑调整开关的外观以匹配您的App的样式:如果它在您的应用用中运行行行良好, 请在开关状态下更更改开关的颜色色,或使用用自自定义图像来表示开关。 仅在表行行行中使用用开关:开关用用于表行行行,例例如可以打开和关闭的设置列列表。如果 您需要在工工具栏或导航栏中使用用类似功能,请改用用按钮,并提供两个不不同的图 标来传达状态。 避免添加标签来描述交换机的值:开关打开或者关闭。提供描述这些状态的标 签是多余的并且使界面面混乱。 考虑使用用开关来管理理相关界面面元素的可用用性:开关经常影响屏幕上的其他内容。 例例如,在“设置”中启用用“⻜飞行行行模式”开关可禁用用某些其他设置,例例如“蜂窝”和“个 人人热点”。在“设置”>“Wi-Fi”中禁用用Wi-Fi开关会导致可用用网网络和其他选项消 失。 有关开发人人员指导,请参阅UISwitch。 9.12文文本字段(Text Fields) 文文本字段是单行行行、固定高高度字段,通常带有圆⻆角,当用用户点击它时会自自动调出 键盘。使用用文文本字段来获取少量量信息,例例如电子子邮件地址。 195
196. 3MiD 三米米设计工工作室翻译 在文文本字段中显示提示以帮助沟通目目的:文文本字段可以包含占位符文文本 - 例例如 “电子子邮件”或“密码” - 当字段中没有其他文文本时。当占位符文文本足足够时,请勿 使用用单独的标签来描述文文本字段。 适当时在文文本字段的右端显示“清除”按钮: 当此元素存在时,点击它会清除文文本字段的内容,从而而无无需继续点击Delete 键。 适当时使用用安全文文本字段:当您的应用用要求提供敏敏感数据(如密码)时,请始 终使用用安全文文本字段。 使用用图像和按钮在文文本字段中提供清晰度和功能:您可以在文文本字段的左侧或 右侧显示自自定义图像,也可以添加系统提供的按钮,例例如“书签”按钮。通常, 使用用文文本字段的左端来指示字段的用用途,使用用右端来指示是否存在其他功能, 例例如书签。 有关开发人人员指导,请参阅UITextField。 196
197. 3MiD 三米米设计工工作室翻译 键盘(Keyboards) 显示适当的键盘类型:iOS提供了了几几种不不同的键盘类型,每种类型都设计用用于 方方便便不不同类型的输入入。要简化数据输入入,编辑文文本字段时显示的键盘应适合字 段中的内容类型。例例如,如果您的应用用要求提供电子子邮件地址,则应显示电子子 邮件地址键盘。有关可用用键盘类型的完整列列表,请参阅UIKeyboardType不不断 UITextInputTraits。 有关相关指导,请参阅自自定义键盘。 197
198. 3MiD 三米米设计工工作室翻译 10.扩展(Extensions) 10.1自自定义键盘(Custom Keyboards) 键盘扩展是指,用用定制键盘代替标准键盘。定制的键盘在设置 App 中启用用,在 “通用用”下的>键盘。一一旦启用用,除了了编辑安全文文本字段和号码字段外,在任何 App的文文本输入入中都可以使用用该键盘。人人们可以启用用多个定制键盘,并随时在 它们之间切换。 确保你真的需要一一个定制的键盘:当你想要看到独特的键盘功能时,可以使用用 自自定义键盘,例例如输入入文文本的一一种新颖方方式,或者使用用 iOS 不不支支持的语言言类型。 如果你只想在你的 App 中使用用自自定义键盘,那么可以考虑创建自自定义输入入视图。 提供一一个简单明了了的方方法在键盘之间切换:人人们知道标准 iOS 键盘上的全球键, 当你打开多个键盘时,它取代了了表情符号,可以快速切换到其他键盘。用用户会 期望在你的键盘上有类似的跳转按钮。请注意,当你安装多个键盘时,用用“地球 键”取代表情键。 不不要复制系统提供的键盘功能:在 iPone X 上,表情符号/地球键和听写键会 198
199. 3MiD 三米米设计工工作室翻译 自自动出现在键盘下方方—甚至至在使用用键盘的时候。你的 App 不不能影响这些按键, 所以避免在你的键盘上重复这些内容,造成混乱。 考虑在你的 App 中提供一一个键盘教程: 用用户习惯了了标准键盘,学习新键盘 就会 需要时间。通过 App 的使用用说明让键盘上手手的更更快,而而不不是只在键盘上操作。 告诉用用户如何启用用你的键盘,在文文本输入入时激活它,使用用它,然后切换回标准 键盘。 自自定义输入入视图 自自定义输入入视图用用自自定义键盘代替标准键盘,但只在 App 中使用用,而而不不是在整 个系统中使用用。使用用自自定义输入入视图提供一一种独特而而有效的数据输入入方方法。例例 如,在编辑电子子表格时实现了了数字的自自定义输入入视图。 使功能更更明显:自自定义输入入视图应该和整个 App 融为一一体。数据条目目应该清晰 直观,不不需要额外的指令。 在打字时播放标准键盘敲击的声音音: 用用户在敲击键盘上的键位时,可以提供声 音音反馈。在你的输入入⻚页面面中点击键盘也应该产生生这种声音音。注意,这个声音音只 能在可⻅见的自自定义输入入视图中使用用,而而且人人们可以在设置>声音音中可以 禁用用声 音音。 199
200. 3MiD 三米米设计工工作室翻译 有需要的画可以提供一一个输入入附件视图: 一一些 App 实现了了额外的自自定义输入入的 附件视图,它出现在键盘上方方。在数字中,附件视图帮助人人们可以标准化输入入 或自自定义计算。 10.2文文件应用用(Document Providers) 文文件应用用实现了了一一个自自定义的入入口口,用用于导入入、导出、打开或将文文档在 App 中 移动。当文文件加载时,它的入入口口显示在导航栏的模态视图中。 200
201. 3MiD 三米米设计工工作室翻译 当用用户打开或导入入文文件时,只显示与上下文文相关的文文档和信息: 当有人人使用用你 的扩展文文件来打开或导入入文文档时,只显示适合当前上下文文的文文档。例例如, 如果 一一个 PDF App 加载你的扩展文文件时,则只列列出可打开或导入入的 PDF 文文 件。 一一定要列列出其他可能有用用的信息,比比如修改日日期、大大小小,以及文文档是本地的还 是远程的。 当导出和移动文文档时,让用用户选好一一个目目的地: 除非非 App 将文文档存储在单个目目 录中,否则让用用户导航到目目录层中的特定目目标。考虑提供一一种方方法来添加新的 子子目目录。 不不要提供自自定义导航栏: 你的扩展文文件在一一个已经包含导航条的模态视图中。 提供第二二个导航栏是令人人困惑的,并占用用了了你的内容空间。 10.3主屏幕快捷操作(Home Screen Actions) 主屏幕快捷操作是一一种便便捷的行行行为,可以通过在主屏幕使用用 3D Touch 来执 行行行 有用用的、特定于 App 操作。用用你的手手指在 App 图标上施加一一点压力力力—— 比比你 在普通点击和⻓长按上使用用的要多——然后看到可用用的快捷行行行动列列表。点击一一条 列列表激活它。例例如,邮件的快捷操作就包括:你可以直接进入入收件箱或VIP邮箱、 发起搜索、创建一一条新的信息。主屏幕快速操作都有一一个标题, 左边或右边的 图标 (取决于你的 App 在主屏幕上的位置),以及一一个可选的副标题。标题和副 标题总是左对⻬齐。你的 App 甚至至可以在新信息可用用时动态更更新它。例例如,消息 的快捷操作就有打开最近的消息。 201
202. 3MiD 三米米设计工工作室翻译 提示: 一一些App在他们的快捷操作列列表上显示一一个小小部件。例例如,股票快捷操 作列列表显示在当前股票值的小小部件之下。考虑实现一一个小小部件,以提供更更有吸 引力力力的体验。 为用用户最关注的、重要 的任务创建快捷操作: 例例如,地图允许人人们在他们当前 的位置进行行行附近搜索,或者在不不打开地图 App 的情况下就可以回家。 每个 App 都应该至至少能提供一一个有用用的快捷操作;快捷操作总共可以有4 个。 避免把快捷操作当成导航: 如果在你的 App 中访问重要的区域是困难的或耗时 的,首首先要优化你的导航,让用用户可以更更快访问。接下来,使用用快捷操作,让 你能够完成有用用的创造性任务。 避免对快捷操作做未知的改变: 动态快捷操作是保持操作相关性的好方方法。例例 如,根据 App 中的位置、最近的活动或者设置的更更改,实时更更新和修改快捷操 作。然而而,快捷操作不不应以不不可预测或无无序的方方式改变。 202
203. 3MiD 三米米设计工工作室翻译 为每一一个快捷操作提供一一个简洁的标题: 操作的标题要可以传达行行行动的结果; 例例 如,“回家”,“创建新的联系人人”和“新消息”。如果你需要提供更更多的上下文文信 息,也可以提供一一个副标题。邮件使用用副标题显示收件箱和 VIP 文文件夹中是否 有未读邮件。不不要在标题或副标题中包含你的 App 名称或任何外部信 息,保 持文文本短以避免被缩略略,并在编写时考虑文文本本地化。 不不要使用用快捷操作来通知用用户: 人人们希望通过其他方方式收到 App 的通知。 参 阅 Notifications。 为每一一个快捷操作提供一一个可识别的图标: 尽量量使用用熟悉的系统图标。跳转 Quick Action Icons 。如果你想设计自自己己的图标, 下载快捷操作图标模板 (Quick Action Icon Template ),并遵循定制图标的 指导方方针(Custom Icons )。 不不要用用表情符号代替图标: Emojis 不不能正确地与右对⻬齐的文文本对⻬齐。另外, emojis 是彩色色的,而而快速的动作图标是单色色的。 10.4消息(Messaging) iMessage apps 和贴纸包( Sticker packs)是一一种信息扩展,可以让人人们与朋 友分享内容,交流表达方方式,分享协作体验。 iMessage App iMessage App在消息会话的过程中提供交互式体验。iMessage App 可以让人人 们分享数据和多媒体文文件,在共享任务上进行行行协作,并互相玩游戏。 203
204. 3MiD 三米米设计工工作室翻译 设计一一个直观的界面面: 如果你的 iMessage App 提供静态内容,比比如文文本、 照 片片或视频,那么人人们就可以很容易易地浏览和在对话中选择要加入入的信息。 如果 你的App是交互式的,比比如多人人游戏或多人人点餐,确保它的功能是有用用 的和可 以理理解的。 提供集中的内容: 为了了便便于使用用,每个消息传递得应该只有一一个焦点。例例如, 不不要试图设计一一个结合了了贴纸和拼⻋车的 App。 提供一一个有趣的,合作的体验: iMessage App通常在两个或更更多的人人之间快 速、非非正式的对话中使用用。好好利利用用这个环境,通过分享、编辑或增加内容来 鼓鼓励用用户参与。如果他们都在使用用这个 App,那么消息就会不不断地被更更新 。 突出有趣的 iOS App 的内容: 通过在消息中显示它的内容来扩展 iOS 应用用 的 功能。想想人人们可能想要分享什什么样的信息,以及他们如何在有趣的对话 中与 你的应用用互动。 要注意内容的放置,以避免被隐藏: 你的 App 的内容是在带有圆⻆角的信息气气泡 中显示的,所以不不要在⻆角落里里里放置重要的信息。 204
205. 3MiD 三米米设计工工作室翻译 区分压缩和扩展视图: 你的 App 出现在一一个紧凑的视图下面面。这一一视图应该能 直观地将你的 App 与其他 App 区分开来,并提供对经常使用用的功能的跳转访 问。人人们也可以在扩展的视图中打开你的 App,以访问高高级功能,或者同时看 到更更多的选项。注意,在紧凑视图中不不允许水水平滚动。 只允许在扩展视图中进行行行文文本编辑: 紧凑的视图与键盘的高高度大大致相同。为了了 确保用用户能够看到他们编辑的内容,只允许在扩展视图中输入入文文本。 贴纸 贴纸提供了了一一种有趣的、吸引人人的方方式,让人人们在没有打字或使用用表情符号 的 对话中表达自自己己。贴纸是一一种图像或动画,可以发送或放置在信息、照片片 和其 他贴纸上,以增加重点和交流情感。 设计表现力力力: 人人们使用用贴纸来直观地传达情绪和反应。努力力力传达与人人在情感层 面面上的联系。考虑 将图像、词汇和短语添加到对话中添加新的维度。 205
206. 3MiD 三米米设计工工作室翻译 让全球的用用户都能用用: 消息传递是一一种通用用的通信形式。要瞄准具有国际吸引 力力力的贴纸。 使用用描述性的图像名称或提供替代的文文本标签: 虽然它们在屏幕上看不不到, 但 图像名称和替代文文本标签让配音音人人员可以通过声音音来描述贴纸,让视觉障碍的 人人更更容易易导航。 通过动画添加活力力力: 虽然贴纸可以是静态图像,但动画贴纸是在对话中传递 能 量量的好方方法。一一定要使用用足足够高高的帧率来保持动画流畅性。 测试位置的可能性: 用用户可以在对话的部分内容上缩放、旋转和放置贴纸。确 保你的贴纸在不不同的颜色色和图像上是清晰的,不不管它们的位置或大大小小。 考虑使用用充满活力力力的颜色色和透明度:鲜艳的色色彩为谈话增添了了丰富的体验。 允 许在信息、照片片和其他贴纸上放置贴纸。 贴纸的大大小小 消息支支持三种标签大大小小,基于网网格的浏览器器中显示。选择适合你的内容的尺 寸寸, 并将你所有的贴纸统一一规格。 206
207. 3MiD 三米米设计工工作室翻译 适当大大小小的贴纸: 尽管在必要的时候,消息会缩小小过大大的贴纸,但还是要提供 高高质量量的贴纸。 注意文文件大大小小的限制: 为了了提高高效率,每个单独的贴纸不不得超过 500KB。请注 意,Xcode 使用用一一个 24 位调色色板保存 PNG 动画,这可能会导致比比预期更更 大大。 贴纸格式 消息支支持以下文文件格式的贴纸: 207
208. 3MiD 三米米设计工工作室翻译 App 和贴纸包图标 就像 iOS App 一一样,iMessage App 和贴纸包都需要可识别的应用用图标。 保持背景简单并提供一一个重点: 设计一一个以单一一的、具有中心心点的图标,以吸 引眼球。包括一一个简单的背景,它不不会盖住其他图标。 保持图标是圆⻆角的: 系统应用用了了自自动圆⻆角的模板。 提供不不同大大小小的图标: 你的图标出现在 App Store、消息、通知和设置中。 为 了了确保你的图标在任何环境下,任何设备上都看起来都很棒,你可以在以下尺 寸寸上找到匹配的尺寸寸: 208
209. 3MiD 三米米设计工工作室翻译 对于设计优秀的 App 图标的额外指导,其中大大部分可以应用用于 iMessage App 和贴纸包图标,参⻅见 App Icon。 下载 iMessageApp 和贴纸包图标 Photoshop 模板,⻅见 Resources。 开发者 指南,请参阅 The Messages Framework。 10.5照片片编辑(Photo Editing) 照片片编辑允许人人们通过过滤器器等工工具来修改照片片和视频。照片片编辑会在照片片 App 中保存为新的文文件,并保留留原始版本。 209
210. 3MiD 三米米设计工工作室翻译 要访问照片片编辑,照片片必须处于编辑模式下: 在编辑模式下,点击工工具栏上的 扩展图标显示可用用的操作菜单。选择一一个在导航栏的模态视图中显示扩展的接 口口。删除此视图确认并保存编辑,或取消它并返回到照片片 App。 确认取消编辑: 编辑照片片或视频可能很耗时。如果有人人点击取消按钮,不不要立立 即放弃他们的更更改。请他们确认他们真的想取消,并通知他们任何编辑将在取 消后丢失。如果没有编辑,则没有必要显示此确认。 不不要提供自自定义导航栏: 你的照片片编辑会在一一个已经包含导航条的模态视图中。 提供第二二个导航栏是令人人困惑的,并占用用了了正在编辑的内容空间。 210
211. 3MiD 三米米设计工工作室翻译 让人人们预览编辑: 如果用用户看不不到照片片编辑后的样子子,就不不知道对它是否满 意。 让人人们看到他们努力力力的结果,然后关闭照片片编辑,并返回到照片片 App。 使用用你的 App 图标为你的照片片编辑: 这让人人们相信,编辑实际上是由你的App 提供的。 开发者指南,请参阅 Photo Editing 和 App Extension Programming Guide。 10.6共享和协作(Sharing and Actions) “共享”提供了了一一种便便捷的方方式,可以通过 App、社交媒体帐户和其他服务共 享 当前上下文文中的信息。“动作”允许人人们发起专属于内容的任务,比比如 “添加书 签”、“复制链接”或“保存图像”。人人们通过点击 App 中的动作按钮来访问 共享 和动作的扩展视图。动作视图只显示与当前上下文文相关的扩展。例例如, 在编辑 视频时,你不不会看到文文本操作按钮。在活动视图中,共享功能被列列与 其中。 211
212. 3MiD 三米米设计工工作室翻译 启用用一一个单一一的、集中的任务: 扩展功能并不不是一一个迷你应用用。它执行行行与当前 上下文文相关的小小项任务。 设计熟悉的界面面: 对于共享功能,系统提供的组合视图是用用户熟悉的,并在 整 个系统中提供了了一一致的共享体验。尽可能的使用用它。对于动作扩展,包含你的 App 名称或设计的界面面,让它在你 App 中看上去更更自自然。 简化并限制交互: 最好的扩展允许人人们在几几个步骤中执行行行任务。例例如,共享扩 展可能会立立即将图像发布到一一个社交媒体帐户。请只在必要时提供共享操作。 避免在你的扩展之上放置模态视图: 默认情况下,在模态视图中显示扩展。 虽 然警告是必要的,但要避免额外的模态视图。 使用用你的主App来表示冗⻓长操作的进展: 活动视图应该在启动共享或操作之后 212
213. 3MiD 三米米设计工工作室翻译 立立即消失。要在后台继续进行行行耗时的任务,你的主 App 应该提供一一些方方法来检 查这些任务的状态。不不要使用用通知。当任务完成时,人人们不不希望看到通知,如 果有特殊问题再通知他们。 使用用动作扩展图标的模板图像: 板图像使用用蒙版来创建图标。使用用黑黑色色和白白色色 具有适当的透明度和反锯⻮齿,并且不不包括投影。模板图像应该集中在一一 个区域 测量量约70 px×70 px。 有关额外的指导,请参⻅见 Activity Views。开发者指南,请参阅 Share 和 Action App Extension Programming Guide。 提示: 分享扩展会自自动地使用用你的 App 图标,逐步开启你的 App 所提供的 扩 展功能。 10.7小小部件(Widgets) 小小部件是显示少量量及时、有用用信息或 App 特定功能的扩展。例例如,新闻小小部件 显示了了头条新闻。日日历提供了了两个小小工工具,一一个显示了了今天的事件,另一一个显 示了了接下来的内容。Notes 允许你预览最近的笔记,并快速创建新的 笔记、提 醒、照片片和绘图。小小部件是可定制的,可以包含按钮、文文本、自自定义布局和图 像等。 当你在主屏幕上使用用 3D Touch 对 App 图标施加压力力力时,小小部件出现在快捷 操作列列表之上。人人们还将他们关心心的小小部件添加到搜索屏幕上,通过在主屏幕 和锁屏的右滑来进行行行访问。你的目目标应该是设计一一个用用户想要添加到搜 索屏幕 的小小部件。 213
214. 3MiD 三米米设计工工作室翻译 设计很棒的授权体验: 人人们使用用小小部件来获得简洁的更更新和执行行行非非常简单的任 务,所以提供适当数量量的信息和交互性是很重要的。只要有可能,就提供可以 单击就完成的任务。在小小部件中不不支支持平移和滚动。 快速显示内容: 人人们花很少的时间查看小小部件,不不需要等待内容加载。在本地 缓存信息,以便便在获取更更新时始终显示最近的信息。 提供足足够的边距: 避免将内容扩展到小小部件的边缘。一一般来说,在每个边缘和 内容之间至至少提供几几个像素的空白白。使用用小小部件顶部的 App 图标进行行行对⻬齐指导。 当内容与图标的中心心对⻬齐时会给用用户提供舒适的体验。如果你的 App 提供了了一一 个网网格样式的布局,确保你在网网格项目目之间提供足足够和相等的填充。如果可能 的话,将图标和按钮的网网格限制为每行行行4个。 214
215. 3MiD 三米米设计工工作室翻译 适应性强: 小小部件的宽度因设备和方方向而而异。小小部件显示的高高度和信息取决于 它是否紧缩或扩展(不不是所有的小小部件都支支持扩展)。紧缩的小小部件是大大约两个 半表行行行的高高度。扩展的小小部件最好不不要超过屏幕的高高度。快捷操作列列表只显示 处于紧缩状态的小小部件。紧缩小小部件可以显示基本的信息。扩展小小部件可以显 示额外的信息,以增强主信息。例例如,天气气小小部件在紧缩时显示了了当前的天气气 状况,但在扩展时增加了了每小小时的预测。 避免定制小小部件的背景: 系统提供的毛毛玻璃是为一一致性和易易读性而而设计的。 尽 可能的使用用它。不不要使用用照片片作为背景,因为它可能与锁屏和主屏墙纸相冲突。 一一般来说,使用用黑黑色色或深灰色色的系统字体为文文本: 系统字体是为易易读性而而设计 的,黑黑色色的颜色色与标准的小小部件背景就很好。 让人人们跳转到你的 App 去做复杂的操作: 你的小小部件应该独立立于你的 App运 行行行,但是,如果人人们偶尔需要做的事情,比比你的小小部件提供的多,那么就要让 用用户轻易易的跳转到 App 中。不不要设计一一个“打开 App ”的按钮,但是根本没有 打开你的 App。例例如,在日日历小小部件中,你可以点击一一个事件,在日日历 App 中打开它,但不不要使用用你的小小部件打开其他 App。 给小小部件起个好名字: 一一个 App 图标和标题出现在每个小小部件的内容之上。一一 般来说,小小部件的名称应该与App的名称相匹配。如果你的 App 提 供了了多个 小小工工具,可以考虑使用用你的 名称为主要的小小部件命名,其他的小小部件就用用清晰的、简洁的名字。如果你使 用用自自定义标题,可以考虑用用你的 App 的名称命名它。例例如,用用于显示映射附近 位置的小小部件的标题为“附近的地图”,让用用户相信这个小小部件实际上是由附近 位置的 App 提供的。 215
216. 3MiD 三米米设计工工作室翻译 让人人们知道进行行行身份验证可以获得额外的功能: 如果你的小小部件在用用户登录后 提供了了额外的功能,请确保人人们知道这一一点。例例如,预订 App 可能会包 含一一 条信息,当人人们没有登录的时候,上面面写着“登录 App 查看你的预订”。 为快捷操作界面面选择一一个小小部件: 如果你的 App 有多个小小部件,你可以选择一一 个在快捷操作中出现,当有人人用用 3D Touch 对你的 App 图标施加压力力力的时候 打开。(例例如支支付宝快捷操作界面面下方方的付款等内容) 开发者指南,请参阅 App Extension Programming Guide。
 216

首页 - Wiki
Copyright © 2011-2024 iteam. Current version is 2.125.1. UTC+08:00, 2024-05-17 10:12
浙ICP备14020137号-1 $访客地图$