最新iOS设计规范十|5大拓展程序(Extensions)

0 评论 3644 浏览 5 收藏 19 分钟

编辑导语:作为互联网应用开发者、设计者,iOS系统是其需要熟悉的操作系统,熟悉iOS系统的设计规范一定程度上有助于推动产品工作效率,并提升用户体验。上篇文章里,作者对iOS系统的系统能力做了介绍,本篇文章作者继续对拓展程序进行阐述,一起来看一下。

iOS是运行于iPhone、iPad和iPod touch设备上、最常用的移动操作系统之一。作为互联网应用的开发者、产品经理、体验设计师,都应当理解并熟悉平台的设计规范。这有利于提高我们的工作效率,保证用户良好的体验。

iOS设计规范系列共10篇。本文是第10篇,介绍拓展程序(Extensions)。

最新iOS设计规范十|5大拓展程序(Extensions)

一、键盘自定义(Custom Keyboard)

可以通过“键盘自定义”扩展程序来自定义键盘。

用户在“设置”中启用自定义键盘后,他们可以将其用于任何应用程序中的文本输入,但编辑安全文本字段和电话号码字段时除外。人们可以启用多个自定义键盘,并可以随时在它们之间进行切换。

最新iOS设计规范十|5大拓展程序(Extensions)

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

自定义键盘只有当APP想要在系统层面,提供一个独一无二的键盘功能时才有意义。例如:输入文本的新方式或输入iOS不支持的语言的能力。

如果你只是需要在你自己的APP中使用自定义键盘,那么可以考虑使用一个自定义输入视图来代替。

2)提供一种在键盘之间切换的明显而简便的方法

人们知道,标准的iOS键盘上的Globe键(在启用了多个键盘时会替换Emoji键)会迅速切换到其他键盘。他们希望您的键盘具有类似的直观体验。

请注意,当安装了多个键盘时,Globe键会替换Emoji键。

3)不要复制系统提供的键盘功能

在某些设备上,即使在使用自定义键盘时,“表情符号/地球”键和“听写”键也会自动出现在键盘下方。您的应用程序不会影响这些键,因此请在键盘上重复输入,以免引起混淆。

4)考虑在您的应用中提供键盘教程

人们已经习惯了标准键盘,学习新键盘需要花费时间。通过在您的应用中(而不是在键盘本身中)提供使用说明,使入门过程更容易。

告诉人们如何启用键盘,在输入文本时将其激活,使用它,然后切换回标准键盘。

自定义输入视图

自定义输入视图用自定义键盘替换了标准键盘,但仅在您的应用程序中,而不是在系统范围内。

使用自定义输入视图可提供独特而有效的数据输入方法。例如,数字实现了用于在编辑电子表格时输入数字值的自定义输入视图。

最新iOS设计规范十|5大拓展程序(Extensions)

1)使功能显而易见

自定义输入视图上的控件应在您的应用程序上下文中有意义。数据输入应清晰直观,因此无需其他说明。

2)在键入过程中播放标准的键盘点击声音

当用户点击键盘上的按键时,键盘点击声音会提供可听见的反馈。在输入视图中点击自定义控件也会产生这种声音。请注意,此声音仅对可见的自定义输入视图可用,并且人们可以在“设置——声音”中禁用声音。

3)如有必要,提供输入附件视图

一些应用程序实现了一个额外的自定义输入附件视图,该视图显示在键盘上方。在数字中,输入附件视图可帮助人们输入标准或自定义计算。

最新iOS设计规范十|5大拓展程序(Extensions)

二、文件提供(Document Providers)

“文件提供”扩展程序实现了一个有着自定义界面的,并且可以从系统上的其他APP中进行文档的导入、导出以及移动的扩展功能。加载文件提供程序扩展时,其界面将显示在包含导航栏的模式视图中。

最新iOS设计规范十|5大拓展程序(Extensions)

1)用户打开或导入文件时,仅显示特定于上下文的文档和信息

当用户打开或导入文档时,仅显示适合当前上下文的文档。例如,如果PDF编辑应用程序加载了扩展程序,则仅将PDF文件列出为可以打开或导入的可能文档。

确保列出其他可能也有帮助的信息,例如修改日期、大小以及文档是本地文件还是远程文件。

2)人们在导出和移动文档时选择目的地

除非您的应用将文档存储在单个目录中,否则用户应导航到目录层次结构中的特定目标。考虑提供一种添加新子目录的方法。

3)不要提供自定义导航栏

您的扩展程序将加载到已经包含导航栏的模式视图中。提供第二个导航栏会造成混乱,并占用您内容的空间。

三、信息发送(Messaging)

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

iMessage应用程序

iMessage应用程序可在Messages对话的上下文中提供交互式体验。iMessage应用程序使人们可以共享数据和媒体,在共享任务上进行协作以及彼此玩游戏。

最新iOS设计规范十|5大拓展程序(Extensions)

1)设计一个直观的界面

如果您的iMessage应用提供了静态内容,例如文本、照片或视频,请确保人们易于浏览和选择要插入对话的项目。如果您的应用程序是交互式的,例如多人游戏板或协作外卖订单,请确保其功能有用且易于理解。

2)提供重点内容

为了清楚和易于使用,每个消息传递扩展都应具有单个焦点。例如,请勿尝试设计一个将贴纸和拼车功能都结合在一起的应用程序。

3)提供有趣的协作体验

iMessage应用程序通常用于两个或多个人之间的快节奏、非正式对话环境中。通过共享、编辑或扩充内容,创造性地利用此环境来鼓励来回参与。如果所有各方都一起使用该应用程序,则将实时进行内容更新。

4)突出显示有趣的iOS应用内容

通过在消息空间显示其内容来扩展iOS应用程序的功能。考虑人们可能想要共享哪些信息,以及他们如何在活跃对话的背景下与您的应用进行交互。

5)插入内容以避免裁切

应用程序的内容以带有圆角的消息气泡形式显示,因此请不要将重要信息放在拐角处。

6)区分紧凑型视图和扩展视图

您的应用将显示在对话下方的紧凑视图中。此视图应在视觉上将您的应用与其他应用区分开来,并提供对常用功能的访问。人们还可以在展开的视图中打开您的应用,以访问高级功能或一次查看更多选项。

7)只允许在扩展视图中进行文本编辑

紧凑的视图与键盘的高度大致相同。为确保用户可以看到他们正在编辑的内容,仅允许在扩展视图中输入文本。

1. 贴纸

贴纸为人们提供了一种有趣,引人入胜的方式,使他们可以在“消息”对话中表达自己,而无需键入或使用表情符号。贴纸是可以发送或放置在消息、照片和其他贴纸上以增强重点并传达情感的图像或动画。

最新iOS设计规范十|5大拓展程序(Extensions)

1)为表达而设计

人们使用贴纸在视觉上传达情绪和反应。努力提供贴近人们情感的贴纸。考虑合并图像、单词和短语以为对话添加新的维度。

2)放眼全球

消息传递是一种通用的通信形式。力求获得具有广泛国际吸引力的贴纸。

3)使用描述性图像名称或提供替代文本标签。

尽管它们在屏幕上不可见,但是图像名称和其他文本标签使VoiceOver可以听得见地描述贴纸,从而使视力障碍者的导航更加轻松。

4)通过动画增加活力

尽管贴图可以是静态图像,但动画贴图是在对话中传递能量的好方法。确保使用足够高的帧频以保持运动流畅。

5)测试放置的可能性

用户可以缩放,旋转和在对话的各个部分上放置贴纸。确保您的贴纸清晰可见,无论其位置或大小如何,其颜色和图像均不同。

6)考虑使用鲜艳的色彩和透明度

鲜艳的色彩为对话增添了丰富感和兴奋感。透明性允许将贴纸有意义地放置在消息,照片和其他贴纸上。

2. 贴纸尺寸

消息支持三种不干胶标签大小,它们显示在基于网格的浏览器中。选择最适合您的内容的尺寸,并准备该尺寸的所有贴纸。

最新iOS设计规范十|5大拓展程序(Extensions)

1)适当缩放贴纸

尽管可以根据需要将Messages缩小较大的贴纸,但最好提供预先缩放的贴纸以实现最佳质量和性能。

2)请注意文件大小限制

为了提高效率,每个单独的标签不得超过500KB。请注意,Xcode使用24位调色板保存PNG动画,这可能会导致文件大小超出预期。

3. 贴纸格式

邮件支持以下文件格式的贴纸:

最新iOS设计规范十|5大拓展程序(Extensions)

4. iMessage应用程序和贴纸包图标

像iOS应用一样,iMessage应用和贴纸包也需要可识别的应用图标。保持背景简单,并提供单个焦点。设计一个带有单个中心点的图标,一目了然。包括一个不会压倒其他图标的简单背景。

保持图标四角方形。系统应用一个自动将图标角变圆的蒙版。提供不同大小的图标。您的图标出现在App Store、消息、通知和设置中。为确保您的图标在任何情况下和在任何设备上均显示精美,可以提供以下尺寸的图标变体:

最新iOS设计规范十|5大拓展程序(Extensions)

四、照片编辑(Photo Editing)

通过“照片编辑”扩展程序,人们可以通过应用滤镜或进行其他更改来在“照片”应用程序中修改照片和视频。修改总是以新文件的形式保存在“照片”应用中,从而安全地保留原始版本。

最新iOS设计规范十|5大拓展程序(Extensions)

要访问照片编辑扩展名,照片必须处于编辑模式。

在编辑模式下,点击工具栏中的扩展名图标将显示可用编辑扩展名的操作菜单。选择一个将在包含导航栏的模式视图中显示扩展的界面。撤消该视图将确认并保存编辑,或取消编辑并返回到“照片”应用程序。

1)确认取消编辑

编辑照片或视频可能很耗时。如果有人点击“取消”按钮,请不要立即放弃他们的更改。要求他们确认他们确实要取消,并告知他们取消后所有编辑都将丢失。如果尚未进行任何编辑,则无需显示此确认。

2)不要提供自定义导航栏

您的扩展程序将加载到已经包含导航栏的模式视图中。提供第二个导航栏会造成混乱,并占用正在编辑内容的空间。

3)让人们预览编辑

如果您看不到它的外观,则很难批准该编辑。在关闭您的扩展程序并返回到“照片”应用程序之前,让人们看到他们的工作结果。

4)使用您的应用程序图标作为照片编辑扩展程序图标

这使您确信该扩展程序实际上是由您的应用程序提供的。

五、分享和操作(Sharing and Actions)

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

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

最新iOS设计规范十|5大拓展程序(Extensions)

1)启用一个集中的任务

扩展程序不是迷你应用程序。它执行与当前上下文有关的范围狭窄的任务。

2)制作一个熟悉的界面

对于共享扩展,系统提供的合成视图很熟悉,并在整个系统中提供一致的共享体验。尽可能使用它。对于操作扩展,请包括您的应用名称,或设计一个易于识别的界面,感觉就像是应用的自然扩展。

3)简化并限制交互

最好的扩展程序使人们仅需几个步骤即可执行任务。例如,共享扩展名可以通过单击立即将图像发布到社交媒体帐户。仅在必要时提供接口。

4)避免将模式视图放在扩展中

默认情况下,扩展显示在模式视图中。尽管在扩展名上方可能会发出警报,但请避免分层附加模式视图。

5)使用您的主应用程序表示冗长的操作进度

在启动共享或操作后,应立即关闭活动视图。耗时的任务应在后台继续,您的主应用程序应提供某种方式来检查这些任务的状态。请勿为此使用通知。人们不想在每次任务完成时都看到通知,尽管如果有问题也可以通知他们。

6)将模板图像用作操作扩展图标

模板图像使用遮罩创建图标。使用具有适当透明度和抗锯齿的黑色和白色,并且不要包含阴影。模板图片应居中放置在大约70px×70px的区域中。

本文是iOS平台规范第10篇,介绍了iOS的扩展程序(Extensions),参考资料Apple Developer-Human Interface Guidelines。本文是该系列最后一篇,感谢你的阅读。后续将陆续发表其他规范类文章,敬请关注。

#专栏作家#

晓吾,微信公众号:体验主义,人人都是产品经理专栏作家。腾讯高级交互设计师,前创新工场、新浪微博交互设计师。专注社交创新与娱乐产品设计。

本文由 @晓吾 原创发布于人人都是产品经理。未经许可,禁止转载

题图来自Unsplash,基于CC0协议

更多精彩内容,请关注人人都是产品经理微信公众号或下载App
海报
评论
评论请登录
  1. 目前还没评论,等你发挥!