iOS平台设计规范（九）扩展

无论是UI、交互，还是产品经理，都应该熟读iOS平台设计规范。这对我们的产品设计，百利而无一弊。

扩展（Extensions）

一、自定义键盘（Custom Keyboard）

键盘的扩展，即用自定义键盘替换标准键盘。自定义键盘在“设置”APP中的“通用>键盘”下启用。启用后，除非编辑安全文本字段和电话号码字段，否则键盘在任何APP中的文本输入期间都是可用的。用户可以启用多个自定义键盘，并可以随时在它们之间切换。

1、确保自定义键盘是有意义的

自定义键盘只有当APP想要在系统层面，提供一个独一无二的键盘功能时才有意义。

例如：输入文本的新方式或输入iOS不支持的语言的能力。如果你只是需要在你自己的APP中使用自定义键盘，那么可以考虑使用一个自定义输入视图来代替。

2、为键盘之间切换提供简单明显的方法

当你启用多个键盘时，用户都知道，标准iOS键盘上的Globe键会代替表情符号键，从而可以快速切换到其他键盘。

他们也期望自定义的键盘具有类似的直观体验。请注意，安装了多个键盘后，Globe键会替换表情符号键。

3、不要重复系统提供的键盘功能

在某些设备上，即使使用自定义键盘，Emoji / Globe键和Dictation键也会自动出现在键盘下方。你的APP无法影响到这些键，因此请避免在自定义键盘中重复这些键以免造成混淆。

4、考虑在APP中提供自定义键盘的使用教程

用户已经习惯了标准键盘，而学习新键盘则需要时间。为了让用户输入过程更流畅，请在APP中提供使用说明而不是在键盘上。告诉用户如何启用键盘，如何在文本输入过程中激活它、使用它，以及如何切换回标准键盘。

自定义输入视图

自定义输入视图使用一个自定义键盘替换标准键盘，但只能在你的APP中使用而非整个系统层面。自定义输入视图可以提供独特并且高效的数据输入方法。

例如：在编辑电子表格时，使用自定义的数字输入视图输入数值体验更好。

1、让功能更明显

自定义输入视图上的控件（按键等元素）对于APP来说应该是十分重要的。让用户在进行数据输入时更加清晰直观，从而无需做额外说明。

2、在打字时播放标准键盘的咔哒声

当用户敲击键盘上的键时，键盘的咔嗒声提供了一个声音的反馈。在自定义输入视图中点击控件也应该反馈这种声音。

请注意，此声音仅适用于可见的自定义输入视图，用户可以在“设置”>“声音”中可以禁用/关掉整个系统的声音（包括按键的咔哒声）。

3、如有必要，提供输入附件视图

一些应APP会在键盘上方实现一个附加的自定义输入附件视图。在Numbers中，输入附件视图可帮助用户输入的更标准或自动计算。

二、文件库（Document Providers）

文件库扩展模块实现了一个有着自定义界面的，并且可以从系统上的其他APP中进行文档的导入、导出以及移动的扩展功能。文件库会以模态视图的模式加载，包含导航栏。

1、用户打开或导入文件时，只显示具体的文档和信息

当用户使用文件库扩展模块打开或导入文档时，只应显示适合当前应用的文档。

例如：如果一个PDF编辑APP加载了此扩展模块，就应该尽可能只展示可以被打开或导入的PDF文件。一定要列出其它可能有用的信息。例如：修改日期、大小以及文档是本地还是远程。

2、让用户在导出和移动文档时可以选择具体位置

除非你的APP将文档存储在一个单一的目录中，否则就要让用户能够导航到目录层次结构中的具体某个位置。同时，可以考虑提供添加新子目录的入口。

3、不提供自定义导航栏

文件库扩展模块所加载的模态视图已经包含了一个导航栏，所以提供第二个导航栏一方面会使用户感到困惑，另一方面也会占据内容的展示空间。

三、主屏幕快速操作（Home Screen Actions）

主屏幕快速操作是从主屏幕针对于APP执行有用操作的便捷方式。当用户触摸并按住APP图标时，可以获得可用的快捷操作菜单（在3D Touch设备上，用户可以轻压图标以查看菜单）。例如，Mail的快速操作菜单是打开收件箱或VIP邮箱、立即搜索和创建新邮件。

主屏幕快速操作包含标题、左侧或右侧的图标（具体取决于你的APP在主屏幕上的位置）和可选的副标题。标题和副标题始终按照从左到右的顺序进行左对齐。当有新信息来时，甚至可以动态更新到快速操作中。例如，“消息”APP就提供了打开最近对话的快速操作。

Tips：某些APP会在其快速操作列表上方显示其它的小控件，比如：股票类APP便会在其快速操作列表上方，显示你当前股票的价值。

1、对用户有价值或有用的任务创建快速操作

例如：地图APP的快捷菜单就可以让用户在当前位置附近搜索或获取回家的路线，而无需先打开APP。每个APP应至少启用一个有用的快速操作;，但最多不能超过4个。

2、避免使用快速操作来简化导航

如果用户在你的APP中很难找到或者需要花费很多时间来访问某些区域，那么首先要做的应该是解决导航不明确的问题、优化导航，下一步才是重点关注如何提供有用的快速操作。

3、避免对快速操作进行无法预知的更改

动态的快速操作是保持场景关联性的一个很好的方式。例如，根据当前位置或最近活动、时间或设置的更改来更新快速操作可能是有意义的。

但是，不应该毫无预兆地改变，那会让用户混淆和困扰。

4、为每个快速操作提供简洁的标题

快速操作的标题应传达操作行为将带来的结果。例如：“返回路径”“创建新联系人”和“新信息”。

如果你需要更多文本信息进行描述，可以考虑提供一个副标题。Mail APP快捷操作中的副标题，是展示收件箱和VIP文件夹中是否有未读邮件。

请勿在标题或副标题中包含APP的名称或任何无关信息，保持文本简短以避免显示不全，并在构思文本时考虑本地化语言。

5、不要使用快速操作来进行通知

用户更希望以其他方式接收来自APP的通知。

6、为每个快速操作提供可识别的图标

尽可能地使用用户熟悉的系统图标。如果你需要设计自己的图标，请使用Apple UI Design Resources for iOS附带的快速操作图标模板，并遵循自定义图标中的准则进行设计。

7、不要使用表情符号代替图标

Emojis很难与右对齐文本保持对齐。此外，表情符号是彩色的，而快速动作图标是单色的。

四、消息发送（Messaging）

iMessage APP和贴纸包是一种关于消息发送的扩展，它可以让用户与朋友分享内容、进行富有表现力的交流和共享协作体验。

iMessage APP

iMessage 在消息对话的上下文中提供交互式体验。iMessage 让用户能够共享数据和媒体、协作共享任务以及彼此玩游戏。

1、设计直观的界面

如果你的iMessage APP提供静态内容（如文本，照片或视频），请确保用户可以轻松浏览并选择要插入对话的项目。

如果你的APP是交互式的，例如多人游戏棋盘或协作外卖订单，请确保其功能有用且易于理解。

2、提供重点内容

为了清晰和易用，每个消息发送扩展都应只有一个焦点。例如：不要试图设计一个结合了贴纸和共享骑车的APP。

3、提供有趣的协作体验

iMessage APP通常用于两个或更多人之间快节奏的非正式对话。创造性地利用这种环境，通过共享、编辑和扩充内容来鼓励用户反复参与。

如果多方一起使用该APP，则应实时进行内容更新。

4、突出有趣的iOS应用内容

通过在消息空间中显示iOS APP的内容来扩展其功能，想一想用户可能想要分享哪些类型的信息，以及他们如何在活跃的对话环境中与APP进行交互。

5、插入内容时避免被裁剪

消息内容通常以带圆角的气泡呈现，因此请勿在角落放置内容信息，以免被裁剪。

6、区分紧凑和展开视图

你的应用会显示在对话下方的简洁视图中，此视图应在视觉上区分你的APP和其他APP，并提供可以访问的常用功能。

用户还可以在展开视图中打开你的APP，以访问高级功能或立即查看更多选项。请注意，在紧凑视图中不支持水平滚动。

7、仅允许在展开视图中编辑文本

由于紧凑视图与键盘的高度大致相同。为了确保用户可以看到他们正在编辑的内容，仅在展开视图中支持编辑文本。

贴纸

贴纸提供了一种有趣、引人入胜的方式，让用户无需键入或使用表情符号即可在消息对话中尽情表达。

贴纸是可以发送或放置在消息、照片或其他贴纸上的图像或动画，目的是突出重点并传达情感。

1、设计表达力

用户使用贴纸来直观地传达个人情绪和反应。尽力在情感层面上提供与人交流的贴纸。考虑合并图像、单词和短语，为对话添加新的维度。

2、从国际化的角度思考

发送消息是一种通用的通信形式。专注于具有国际吸引力的贴纸，会更有市场。

3、使用描述性图像名称或提供说明标签

虽然它们在屏幕上不可见，但是有图像名称和备用文本说明标签的话，可以让解说者可以用语言描述贴纸，使视力障碍人士更容易导航。

4、通过动画增添活力

虽然贴纸可以是静态图像，但动画贴纸更能在对话中传递能量。务必使用足够高的帧速率来保持动画的流畅。

5、测试放置的可能性 

用户可以在对话的某些部分上缩放、旋转和放置贴纸。无论位置或大小如何，请确保贴纸在不同颜色和图片上清晰可见。

6、考虑使用鲜艳的颜色和透明度

鲜艳的色彩让对话更丰富和刺激。使用透明度则可以让贴纸很好地放置在消息、照片和其他贴纸上。

贴纸尺寸

消息支持三种贴纸尺寸，这些贴纸尺寸显示在基于网格的浏览器中。选择最适合你内容的尺寸，并根据该尺寸设计好所有贴纸。

1、适当缩放贴纸

尽管必要时信息会缩小较大的贴纸，但最好按照预先定好的尺寸提供贴纸，以获得最佳的质量和体验。

2、请注意文件大小限制

为了提高效率，每个贴纸不得超过500KB。

注：因为Xcode是使用24位调色板保存PNG动画，这可能会导致文件大小超出预期。

贴纸格式

消息支持以下文件格式的贴纸：

iMessage APP和贴纸包图标

与iOS应用程序一样，iMessage APP和贴纸包都需要可识别的应用图标。

1、保持背景简单并提供单一焦点

设计一个带有单一中心点的图标，可以一目了然地捕捉用户注意力，以及一个不会妨碍其他图标的简单背景。

2、确保图标四个角都是直角

系统应用自动对图标角进行遮罩。

3、提供不同大小的图标

应用图标将显示在App Store、消息、通知和设置中。为确保图标在任何环境和任何设备上都有很好的体验，你可以按照以下尺寸提供：

五、照片编辑（Photo Editing）

照片编辑允许用户在照片APP中对照片以及视频添加滤镜或者进行其他方面的更改。编辑后的照片或视频会以一个新的文件的方式进行存储，原始版本也会被安全保留。

要访问照片编辑扩展程序，照片必须处于编辑模式。在编辑模式下，点击底部工具栏中的扩展图标会显示编辑扩展的操作菜单。

该扩展页面通常以一个包含导航栏的模态视图展示。在取消此视图前会对是否保存更改进行确认。如若照片/视频并未进行任何更改，则可以直接取消返回。

1、确认取消编辑

编辑照片或视频可能非常耗时。如果用户点击取消按钮，请不要立即放弃他们对照片的更改。让他们确认是否要取消，并告知取消后所有更改都将丢失。如果尚未进行更改，则无需进行确认。

2、不提供自定义导航栏

扩展程序显示在一个已包含导航栏的模式视图中。再提供一个导航栏会让人感到困惑，并且会占用编辑照片的空间。

3、让用户可以预览编辑后的照片/视频

如果你看不到更改后的样子，则很难决定是否要保存更改。在关闭扩展程序并返回“照片”应用之前，让用户看到他们编辑照片/视频的实时状态。

4、使用APP图标作为照片编辑扩展图标

这会让用户确信照片编辑扩展程序实际上是由你的APP提供的。

六、共享和操作（Sharing and Actions）

共享扩展为与APP、社交媒体帐户和其他服务共享当前页面中的信息提供了一种便捷的方式。操作扩展则是让用户启动针对当前内容的任务，例如添加书签、复制链接、保存图像。

用户在点击页面中的操作按钮，会显示带有共享扩展和操作扩展的活动视图。该活动视图只会显示与当前内容相关的扩展。例如：在编辑视频时，你不会看到文本类的操作按钮。在活动视图中，共享扩展显示在操作扩展的上方。

1、显示单一且重要的任务

扩展程序不是并不是简化版的应用程序。它只执行与当前内容相关的任务。

2、设计一个熟悉的界面

对于共享扩展，系统提供的组合视图是用户熟悉的，请在整个系统中提供一致的共享体验。尽可能使用系统提供的。对于操作扩展，要么包含APP的名称，要么设计一个可识别的、看起来很自然的界面。

3、简化步骤和限制交互

最好的扩展让用户只需几步就可以完成任务。例如：一个共享扩展可以通过一次点击立即将图像发布到社交媒体帐户。只在很有必要时才提供额外的界面。

4、避免将模态视图放在扩展之上

默认情况下，扩展将显示在模式视图中。虽然警示框可能在扩展之上有意义，但请避免对其他模式视图进行分层。

5、在APP内显示需要花费较长时间的任务的进度或状态

活动视图应在启动共享或操作后立即关闭。比较耗时的任务则应该在后台继续进行，你的APP应该提供一些入口/方法来检查这些任务的进度或状态。

不要用通知的形式，用户不希望每次任务完成时都看到通知，但如果出现什么问题的话，倒是可以通知他们。

6、使用标准图像作为操作扩展的图标

标准图像使用遮罩来创建图标。使用具有适当透明度和抗锯齿效果的黑白，并且不带有阴影。标准图像应位于约70px×70px的区域中心。

七、小部件（Widgets）

窗口的小部件是一种扩展程序，它可显示少量及时、有用的信息或针对APP的功能。

例如：新闻的小部件显示了头条新闻。日历则提供了两个小部件，一个显示今天的事件，另一个显示接下来的事件。Notes则可让你预览最近的笔记并快速创建新笔记、提醒、照片和绘图。窗口小部件是完全可自定义的，包括按钮、文本、布局自定、图像等。

当用户使用3D Touch对主屏幕上的应用图标施加压力时，小部件会显示在快速操作列表的上方。用户还可以将他们比较关注的小部件添加到“搜索”界面，通过在主界面和锁定屏幕上右滑来访问搜索界面。你的目标应该是设计用户想要添加到“搜索”界面的小部件。

1、设计一个伟大的可浏览体验

用户使用小部件来获取简短的更新并执行非常简单的任务，因此提供适量的信息和交互性至关重要。

尽可能提供可以在一次点击中完成的任务。窗口小部件不支持内部平移和滚动。

2、快速显示内容

用户花很少时间查看小部件，最好不要让用户等待内容加载。应该在本地缓存信息，以便在加载更新时始终显示最新信息。

3、保持足够边距和间隔

不要将内容扩展到窗口小部件的边缘。通常，在每个边缘和内容之间提供至少几个像素的边距。每个小部件的应用图标应该保持对齐。而内容与此图标的中心对齐时，体验会比较好。

如果你是网格样式布局，请确保在网格项之间提供足够且相等的间隔。尽可能将图标和按钮的网格限制在每行4个。

4、适应性强

小部件的宽度因设备和方向而异。小部件的高度和信息取决于它是折叠还是展开（并非所有小部件都支持展开）。折叠小部件是大约两个半列表行的高度。理想情况下，展开的小部件不会高于屏幕的高度。

快速操作列表仅显示处于折叠状态的小部件。折叠时，小部件显示可以独立存在的基本信息。展开后，窗口小部件会显示主要信息的其他附加信息。例如：天气APP的小部件折叠时显示的是当前天气状况，但在展开时会显示每小时的天气预报。

5、不要自定义小部件的背景

系统提供的轻量、模糊的小部件背景旨在保持一致性和易读性。尽可能使用系统提供的背景。

切勿将照片用作背景，因为它可能会与锁定屏幕和主屏幕的壁纸发生冲突。

6、通常，文本使用黑色或深灰色的系统字体

系统字体是为易读性而设计的，深色字体可以与标准控件背景很好地配合使用。

7、适当时，让用户可以跳转到APP内以执行更多操作

小部件应独立于你的APP运行。但是，如果用户偶尔需要做的事情超过了小部件所能提供的，必须要让用户感觉更方便。

当然，不要用“打开APP”这样的按钮，这样会占用内容空间。应该让用户点按内容本身，以便用户可以直接在APP内查看或修改内容。

例如，在日历APP的小部件中，你可以点击小部件上的事件以，它将在日历APP中打开。切勿使用小部件打开其他APP。

8、选择一个好的小部件名称

应用图标和标题显示在每个小部件的内容上方。通常，小部件名称应与应用名称一致。如果你的APP提供多个小部件，则应使用APP名称作为主要的小部件名称，并为其他小部件使用清晰、简洁的名称。

如果你要自定义标题的话，请考虑在其前面加上APP名称。例如：显示附近位置的地图APP的小部件标题为“附近的地图”。涵盖APP名称会让用户更确信该小部件是由你的APP提供的。

9、让用户知道登录是有用的

如果你的小部件在登录后会提供了额外的功能，请确保用户能了解到这个信息。

例如：当用户未登录时，显示即将进行的预订的应用可能会包含一条这样的消息，上面写着“登录APP以查看你的预订”。

10、为快速操作列表选择一个小部件

如果你的APP有多个小部件，请选择一个以显示在用户触摸并按住主屏幕上的应用图标时（或者使用3D Touch轻压主屏幕上的应用图标时）出现的快速操作菜单中。