iOS11人机交互指南(十)- Extensions

一、自定义键盘(Custom Keyboards

键盘扩展用一个自定义键盘代替了标准键盘。 自定义键盘在“设置”的“通用”>“键盘”下启用。 启用后,除了编辑安全文本字段和电话号码字段时,键盘在任何应用程序的文本输入过程中均可用。 用户可以启用多个自定义键盘,并随时在它们之间切换。

确保你确实需要一个自定义的键盘。 如果您想在系统范围内展现独特的键盘功能,例如以新颖方式输入文本或输入iOS不支持的语言,自定义键盘就很有意义。 如果您只想在您的应用中使用自定义键盘,请考虑改为创建自定义输入视图。 参见 Custom Input Views

提供一种明显且轻松的方式在键盘之间切换。 用户知道,当启用多个键盘时,点击标准iOS键盘上的地球符号键可以快速切换到其他键盘,从而取代表情符键。 他们期望在键盘上有类似的直观体验。 请注意,当您安装了多个键盘时,用Globe键(地球符号键)替换Emoji(表情符号键)。

请勿复制系统提供的键盘功能。在iPhone X上,即使使用自定义键盘,Emoji / Globe键和Dictation键也会自动出现在键盘下方。 你的应用程序不能影响这些键,所以请避免在你的键盘上重复它们以免造成混淆。

考虑在您的应用中提供键盘教程。 用户习惯用标准键盘,学习新键盘需要时间。 通过在您的应用中提供使用说明(而不是在键盘本身中),让使用过程更轻松。 告诉用户如何启用键盘,在文本输入过程中将其激活来使用它,而后切换回标准键盘。

开发指导请参阅 中 App Extension Programming Guide 中的 Custom Keyboard

自定义输入视图

自定义输入视图会使用自定义键盘替换标准键盘,但仅仅只在您的应用中,而不能在系统范围内使用。 使用自定义输入视图来提供独特而有效的数据输入方法。 例如,在编辑电子表格时,用自定义输入视图来输入数字值。

使功能明显易见。 自定义输入视图上的控件应该在应用程序的情景中有意义。 数据输入应该清晰直观,因此不需要额外的指令。

在输入过程中播放标准键盘点击声。 当用户敲击键盘上的按键时,键盘点击声提供有效反馈。 在您的输入视图中点击自定义控件也应该产生这种声音。 请注意,此声音仅适用于可见的自定义输入视图,并且用户可以在“设置”>“声音”中系统范围禁用此声音。 有关开发人员指南,请参阅 UIDevice 中的 playInputClick

必要时提供输入附件视图。 某些应用程序实现了在键盘上方显示的额外自定义输入附件视图。 在Numbers中,输入附件视图可帮助用户输入标准的或自定义数值。

开发指导请参阅Text Programming Guide for iOS 中的 Custom Data Input Views

二、文档提供程序(Document Providers

文档提供程序扩展实现用于导入、导出、打开或移动系统上其他应用程序内的应用程序文档的自定义界面。 文档提供程序扩展加载时,其界面将显示在包含导航栏的模式视图中。

当用户打开或导入文件时,只显示特定情境的文档和信息。 当某人使用您的扩展程序打开或导入文档时,仅显示适合当前上下文的文档。 例如,如果PDF编辑应用程序加载您的扩展名,则只列出PDF文件作为可以打开或导入的可能文档。 请务必列出其他可能有用的信息,例如修改日期、大小以及文档是本地还是远程。

让用户在导出和移动文档时选择一个目的地。 除非您的应用程序将文档存储在单个目录中,否则让用户导航到目录层次结构中的特定目的地。 考虑提供一种添加新的子目录的方式。

不要提供自定义导航栏。 您的扩展在已包含导航栏的模态视图中加载。 提供第二个导航栏会令人困惑,并占用您的内容空间。

开发指导请参阅 App Extension Programming Guide 中的 Document Provider

三、主屏幕快速操作(Home Screen Quick Actions

主屏幕快速操作是使用3D Touch在主屏幕上执行有用的、app特定操作的便捷方式。 用手指对应用程序图标施加一些压力——比您点击和握住的压力更大——来查看可用快速操作的列表。 点击一个来激活它。例如,邮件包含快速操作,可直接进入收件箱或VIP邮箱、启动搜索和创建新消息。 每个主屏幕快速操作都包括一个标题、左侧或右侧的一个图标(取决于您的应用在主屏幕上的位置)和一个可选字幕。 标题和字幕在从左到右的语言中始终左对齐。 新的信息可用时,您的应用程序甚至可以动态更新其快速操作。 例如,消息提供了用于打开最近对话的快速操作。

提示:

某些应用在其快速操作列表上方显示一个窗口部件。例如,股票快速操作列表出现在显示您当前股票价值的窗口部件下方。 考虑用一个窗口部件来提供更吸引人的体验。 有关窗口部件设计指南,请参阅 Home Screen Quick Action Widgets

创建引人注目且高价值任务的快速操作。 例如,地图可让用户在他们当前的位置搜索附近,或者在没有首先打开地图应用的情况下获取路线。 每个应用程序应至少启用一个有用的快速操作,最多提供四个。

避免使用快速操作来简化导航。 如果访问应用中的重要区域比较困难或耗时,请首先修改导航。然后,重点提供有用的和创造性任务的快速操作。

避免对快速操作做出不可预测的更改。 动态快速操作是保持操作相关的好方法。例如,根据当前位置或您应用中每日时刻最近的活动,或设置更改来更新快速操作可能都是有用的。 但是,操作不应该以不可预知或混淆的方式改变。

为每个快速操作提供一个简洁的标题。 操作的标题应立即传达操作的结果;例如“Directions Home”,“创建新联系人”和“新信息”。如果您需要提供更多的上下文,请提供字幕。 例如,邮件使用字幕来指示收件箱和VIP文件夹中是否有未读邮件。 不要在标题或字幕中包含应用程序名称或任何无关信息,缩短文本以避免被截断,并在编写文本时考虑本地化。

不要对通知使用快速操作。 用户希望以其他方式接收来自应用的通知。请参阅 Notifications

为每个快速操作提供一个可识别的图标。 尽可能使用熟悉的系统图标。请参阅 Quick Action Icons。如果您设计自己的图标,请下载 Quick Action Icon Template,并遵循 Custom Icons 中的指导。

不要使用表情符号代替图标。表情符号不能与右对齐的文本正确对齐。另外,表情符号是全彩色的,而快速操作图标是纯色的。

四、消息(Messaging

iMessage apps 和 Sticker packs 是可让用户与朋友分享内容、交流表达和分享协作体验的短信扩展程序。

iMessage Apps

iMessage app 在消息对话的上下文中提供了一种交互式体验。 iMessage app 使用户能够共享数据和媒体,在共享任务上进行协作,并能和对方一起玩游戏。

左:紧凑;右:展开

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

提供重点内容。 为了清晰和易于使用,每个消息传递扩展都应该有单一焦点。 例如,不要试图设计一个结合了贴纸和乘车分享的应用程序。

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

突出有趣的iOS应用内容。 通过在消息空间中显示其内容来扩展您的iOS应用的功能。 考虑用户可能想要共享什么类型的信息,以及如何在活动对话的上下文中与应用程序交互。

插入内容以避免裁剪。 您的应用内容呈现在带圆角的消息气泡中,因此不要在角落中放置重要信息。

区分紧凑视图和展开视图。 您的应用出现在对话下方的紧凑视图中。 这个视图应该在视觉上区分你的应用和其他应用,并提供对常用功能的访问。用户也可以在展开视图中打开您的应用,以访问高级功能或一次查看更多选项。 请注意,在紧凑视图中不允许水平滚动。

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

贴纸(Stickers

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

左:紧凑;右:展开

设计得富有表现力。 用户使用贴纸来视觉传达情绪和反应。努力提供在情感层面与用户联系的贴纸。考虑合并图像、单词和短语以增加对话的新维度。

全球思考。 信息是一种通用的通信形式,瞄准具有广泛国际吸引力的贴纸。

使用描述性图像名称或提供可选文字标签。虽然图像名称和可选文本标签在屏幕上不可见,但它们可让画外音描述贴纸,让视觉障碍人士更轻松地进行导航。

通过动画增加活力。 虽然贴纸可以是静态图像,但动画贴纸是在对话中传递能量的好方法。一定要使用足够高的帧率来保持运动流体。

测试放置的可能性。用户可以缩放、旋转并在对话的部分区域放置贴纸。 无论您的贴纸位置或尺寸如何,确保它对在不同颜色和图像下清晰可见。

考虑使用鲜艳的色彩和透明度。鲜艳的色彩增添了对话的丰富性和兴奋感。透明度允许将有意义的贴纸放置到消息、照片和其他贴纸上。

贴纸大小

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

适当缩放贴纸。虽然信息会根据需要缩放较大的贴纸,但最好提供预缩放贴纸以获得最佳质量和性能。

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

贴纸格式

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

iMessage应用和贴纸包图标

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

保持简单的背景并提供单一焦点。 用一个中心点设计一个图标,一目了然地捕捉注意力,使用不会压倒其他图标的简单背景。

保持图标角为方形。 系统会自动将图标角变成圆角。

提供不同尺寸的图标。您的图标会出现在App Store、信息、通知和设置中。为确保您的图标在任何环境和任何设备上看起来都很棒,您可以提供以下尺寸的图标变体:

有关设计出色应用程序图标的其他指导(其中大部分可应用于iMessage应用程序和贴图包图标),请参阅 App Icon

要下载iMessage应用程序和贴图包图标 Photoshop 模板,请参阅 Resources

开发指导请参阅 The Messages Framework

五、照片编辑(Photo Editing

照片编辑扩展可让用户通过应用过滤器或进行其他更改来修改照片应用中的照片和视频。 编辑总是作为新文件保存在照片应用程序中,从而安全地保留原始版本。

要访问照片编辑扩展程序,照片必须处于编辑模式。在编辑模式下,点击工具栏中的扩展图标,会显示可用编辑扩展的操作菜单。 选择一个在包含导航栏的模态视图中显示扩展的界面。 关闭此视图可确认并保存编辑,或取消该视图并返回到照片应用。

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

不要提供自定义导航栏。 您的扩展在已包含导航栏的模态视图中加载。提供第二个导航栏会令人困惑,并且占用了正在编辑内容的空间。

让用户预览编辑。如果看不到编辑后的样子,用户很难确认。让用户在关闭您的扩展程序并返回到照片应用程序之前看到他们编辑的结果。

为照片编辑扩展图标使用您的应用程序图标。这增加了扩展实际是由您的应用程序提供的自信。

开发指导请参阅 App Extension Programming Guide 中的 Photo Editing

六、共享和操作(Sharing and Actions

共享扩展提供了一种方便的方式,可以通过应用程序、社交媒体帐户和其他服务共享当前上下文中的信息。操作扩展可让用户启动内容特定的任务,例如添加书签、复制链接或保存图像。用户通过点击应用中的“操作”按钮来显示活动视图,从而访问共享扩展和操作扩展。 活动视图仅显示与当前上下文相关的扩展。 例如,在编辑视频时,您不会看到文本操作动作。 在活动视图中,共享扩展罗列在操作扩展上方。

启用单一的重点任务。扩展程序不是一个小应用程序。它执行与当前上下文相关的狭义范围的任务。

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

简化并限制交互。最好的扩展让用户只需几个步骤即可完成任务。例如,共享扩展程序可能会通过单击来立即将图像发布到社交媒体帐户。仅在必要时提供界面。

避免将模态视图放在扩展程序之上。扩展名默认显示在模态视图中。虽然弹窗可能比扩展更有用,但避免分层添加其他模式视图。

使用您的主应用程序来传达冗长操作的进度。活动视图应在启动共享或操作后立即解除。耗时的任务应该在后台继续进行,您的主应用程序应该提供一些方法来检查这些任务的状态。不要为此使用通知用户,用户不希望每次任务完成时都看到通知,尽管如果出现问题通知他们是很好的。

使用模板图像作为操作扩展图标。模板图像使用蒙版来创建图标。使用具有适当透明度和抗锯齿功能的黑白色,并且不包含阴影。模板图片应该位于大约70px×70px的区域中心。

更多指南请参阅 Activity Views。有关开发人员指南,请参阅 App Extension Programming Guide 中的 ShareAction

提示:

共享扩展程序会自动使用您的应用图标,从而增加扩展实际上由您的应用提供的信心。

七、窗口小组件(Widgets

小组件是一种可显示少量及时、有用的信息或特定于应用程序功能的扩展程序。 例如,“新闻”窗口部件显示顶级标题;日历提供了两个小组件,一个显示当前的事件,另一个显示下一个事件;备忘录可让您预览最近的笔记并快速创建新笔记、提醒、照片和绘图。 小组件高度是可自定义的,可以包含按钮、文本、布局设置、图像等。

使用3D Touch将压力施加到主屏幕上的应用程序图标时,窗口组件会出现在快速操作列表的上方。用户还可将他们关注的小组件添加到搜索屏幕中,通过在主屏幕和锁定屏幕上向右滑动来访问搜索屏幕。你的目标应该是设计一个用户想要添加到搜索屏幕的小组件。

左:搜索屏幕小组件;右: 主屏幕快速操作小组件

设计一个良好的可浏览体验。用户使用小组件来进行简单的更新并执行非常简单的任务,因此提供适量的信息和交互性至关重要。尽可能提供可在一次点击中完成的任务。小组件中不支持平移和滚动。

快速显示内容。用户花极少时间来查看小组件,并且不会等待内容加载。使用本地缓存信息,以便在获取更新时始终显示最新信息。

提供足够的边距和填充。避免将内容扩展到小组件的边缘,通常,在每条边与内容之间提供至少几个像素的边距。使用小组件顶部的应用程序图标指引对齐,当与这个图标的中心对齐时,内容往往显示良好。如果您的应用程序提供网格式布局,请确保您在网格项之间提供了足够和相等的填充,尽可能将图标和按钮的网格限制为每行四个。

适应性强。小组件的宽度根据设备和方向而有所不同。 窗口小组件显示的高度和信息取决于窗口是否折叠或展开(并非所有窗口小组件都支持展开)。折叠的小组件是大约是两个半表格行的高度。理想情况下,扩展的小组件不会高于屏幕的高度。快速操作列表仅显示处于折叠状态的小组件。 折叠状态下,一个小组件显示可独立存在的重要信息。展开后,小组件会显示强化主要信息的其他信息。例如,“天气”窗口小组件折叠时会显示当前天气状况,但会在展开后添加小时天气预测。

避免自定义小组件的背景。系统提供的亮度、模糊组件背景旨在保持一致性和易读性,尽可能使用它。切勿使用照片作为背景,因为它可能与锁定和主屏幕壁纸冲突。

通常使用黑色或深灰色的系统字体作为文本。系统字体的设计易读,深色与标准小组件背景搭配良好。

适当时,让用户跳转到您的应用程序来做更多。您的小组件应该独立于您的应用运行。但是,如果用户偶尔需要完成更多你的小组件没提供的,要让他容易达到。不要包含一个“打开应用程序”按钮,这会占据您内容的空间。相反,让用户点击内容本身以在应用中查看或修改内容。例如,在日历小组件中,您可以点击事件以在日历应用程序中打开它。切勿使用您的小组件打开其他应用程序。

为小组件选择一个好名称。 每个小组件的内容上方都会显示应用图标和标题。一般来说,您的小组件名称应该与您应用的名称相匹配。如果您的应用提供多个小组件,请考虑使用您的应用名称作为主要组件名称,并为其他组件提供简洁明了的名称。如果您使用自定义标题,请考虑用应用程序名称加上前缀。例如,用于显示附近位置的地图小组件名称为“地图附近”。包含您的应用名称会增加小组件实际上由您的应用提供的信心。

让用户知道认证何时增加价值。如果您的小组件在某人登录您的应用时提供了其他功能,请确保用户知道这一点。例如,显示即将到来的预订的应用程序,在用户并未登录时可能会包含一条消息:“登录到应用程序以查看您的预订”。

为快速操作列表选择一个小组件。如果您的应用有多个小组件,请选择一个出现在使用3D Touch的主屏幕快速操作菜单上(向您的应用图标施加压力时显示)。

开发指导请参阅 App Extension Programming Guide

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 160,108评论 4 364
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,699评论 1 296
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 109,812评论 0 244
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,236评论 0 213
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,583评论 3 288
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,739评论 1 222
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,957评论 2 315
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,704评论 0 204
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,447评论 1 246
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,643评论 2 249
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,133评论 1 261
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,486评论 3 256
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,151评论 3 238
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,108评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,889评论 0 197
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,782评论 2 277
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,681评论 2 272

推荐阅读更多精彩内容