移动端控件整理——输出/反馈

作者: dddt01 | 来源:发表于2021-07-15 09:50 被阅读0次

徽标/标签/Badge

图标右上角的红点、数字或者文字。用于告知用户，该区域的状态变化或者待处理任务的数量。

原则

当用户只需知道大致有内容更新时，应该使用红点型，如：社交中的群消息通知。

当用户有必要知晓每条更新时，应该使用数字型。如：社交中的一对一的消息通知。

02 轻提示/非模态

提示重要程度：模态【模态弹框/对话框=活动视图/底部面板=动作视图】 > 非模态【横幅/banners > 通告栏/通知/NoticeBar > snackbar=toast】

轻提示/Toast

一种轻量级反馈/提示，可以用来显示不会打断用户操作的内容，适合用于页面转场、数据交互的等场景中。与Snackbar相比，优先级都是最低的，一般没有操作按钮。

原则

一次只显示一个 toast。

有 Icon 的 Toast，字数为 4-6 个；没有 Icon 的 Toast，字数不宜超过 14 个。

Snackbars

Snackbars与Noticebar类似，区别是Snackbar时出现在屏幕底部，提供关于APP进程的简短消息。

原则

临时出现，一次只出现一条，不应该中断用户的体验，不需要用户执行输入操作才消失。

可以包含一个动作，如“关闭”“取消”。

文本标签最多两行。不要使用图标。

背景完全不透明，使文本清晰易读。

按钮使用文本按钮类型，通过颜色与提示文本进行区分。

优先级

snackbar与toast类似，具有最小的干扰性，不需要用户采取任何措施。

通告栏/通知/NoticeBar

在导航栏下方，一般用作系统提醒、活动提醒等通知。

原则

需要引起用户关注时使用，重要级别低于 Modal ，高于 Toast。

横幅/banners

banners显示突出的消息和相关的可选操作。

banner提供重要的、持续显示的信息，为用户提供解决的操作（或关闭提醒的操作）。需要用户执行操作才能消失。

在屏幕顶部出现，在APP的顶部栏/导航栏之下。持续但是非模态的，允许用户或者忽视他们，或者与之交互。与sanckbar类似，一次出现一个banner。

原则

按钮与banner的信息直接相关，清晰的标明按钮的动作。为了表述清晰，使用文本按钮而非图标。最多包含两个文本按钮，按钮层级保持一致（不区分优先级）。取消按钮在左边，确认按钮放在右边。

可以增加图标来作为补充说明。

滑动浏览内容时，banner会在屏幕上持续显示。

03 模态

对话框/Modal/Modality/Dialogs

iOS叫模态弹窗（Modality），安卓叫对话框（Dialogs）。主要用于阻止应用正常操作的错误；需要用户操作、决策、确认的关键信息。

模态弹窗是在一个与当前上下文分离的临时模式中显示内容设计技巧，需要一个明确的操作才能退出。以模态弹窗展示内容可以：

· 帮助人们聚焦于独立的任务或者一组密切相关的选项。

· 确保人们收到信息并在必要时对关键信息采取行动。

iOS提供了警告（Alerts）、活动视图（Activity Views）（或者分享面板Share sheets）和动作面板（Action Sheets ），供你在APP的特定情况下使用。为了在APP中展示自定义的模态内容，iOS 13及更高的版本支持以下几种展示风格。

面板（Sheet）

面板展示风格看起来像是一个卡片，部分覆盖在下层内容之上，未被覆盖的部分变得暗淡以阻止与之交互。父视图的上边缘或者前一个卡片在当前卡片的的下方可见，帮助人们记得他们打开这个卡片时被暂停的任务。人们通过以下方式来取消卡片：

· 从屏幕顶部向下轻扫。

· 当卡片内容滑动到顶部的时候，从任意位置向下轻扫。

· 轻触按钮。

对不支持复杂任务的非沉浸模态内容使用面板。

全屏（Fullscreen）

全屏展示风格覆盖整个屏幕。前一个视图完全被覆盖，最小化视觉干扰。人们通过点击按钮来取消一个全屏的模态视图。

为沉浸内容（例如视频、照片或相机视图）或者受益于全屏展示方式的复杂任务（如标记文档或者编辑照片）使用全屏模态视图。

全屏对话框是唯一可以显示其他对话框的对话框。

注释

如果在带有拆分视图窗格、弹窗、或者其他非全屏视图的情况下显示模态内容，在一个紧凑的环境中你应该转而使用面板来展示模态内容。

即触发前的内容形式不是全屏的，触发后的模态弹窗，也应该不用全屏形式，而是用sheet面板形式。

在有意义的情况下使用模态。只有当聚焦人们的注意力对做出选择至关重要或者执行一个不同与当前任务的任务时，才创建一个模态体验。模态体验将人们带离当前的上下文，并且需要一个动作才能取消，所以只有当它能提供明确的好处时才使用它是极其重要的。

保留警告框用于传递重要的（最好是可操作的）信息。通常，出现警告框是因为出现了错误。因为警告框打断用户体验而且需要轻触才能消失，让人们感觉这种干扰是有必要的是重要的。For guidance, see Alerts。

保持模态任务简单、简短、而且高度集中。避免在APP中再创建一个APP。如果模态任务太复杂，当他们进入模态情景（modal context）中时，就会看不到他们本来想执行的任务。创造包含层级视图的模态任务要特别小心，因为人们可能会在多个路径中迷失并且不知道该如何返回。如果模态任务必须包含次级视图，提供单级的跳转路径和清晰的完成路径。除了完成任务之外，不要使用“完成”按钮。

总是包含取消模态视图的按钮。例如，你可能使用“完成”或“取消”。确保模态视图可以通过辅助技术操作，同时提供一个按钮作为取消手势的替代品。

必要情况下，在人们退出模态视图之前请求确认来帮助人们避免数据丢失。无论人们是通过取消手势还是按钮来关闭视图，如果该动作有可能导致用户创造的内容丢失，呈现一个动作面板，说明这种状况并且提供解决方式。

不要在气泡式弹窗上再显示一个卡片。尽管你可以在弹窗中显示卡片，弹窗上层不应该显示任何东西（除非可能是一个警告框）。偶尔，当人们在弹窗中执行一个动作后你需要显示一个卡片，在显示卡片前先关闭这个弹窗。

一般情况下，用标题来表明模态任务。当人们进入一个模态任务，他们就从之前的情境中切换过来，所以这时候制造一个新的、清晰的情境是一个好主意。你可以在视图的其他部分同时提供对于任务进行详细的描述或指导的文本。

让模态视图与APP的视觉风格相协调。例如，当模态视图包含导航栏，你应该使用你APP中使用的导航栏样式。

为模态视图选择一个合适的过渡方式。选择与你的APP相协调的过渡方式，加强人们对于临时内容转变的意识。默认的过渡方式是模态视图垂直从底部向上滑动，在关闭的时候向下滑动。在你的APP中，贯穿始终的使用一致的模态过渡方式。

对话框

对话框分为警告对话框、简单对话框、确认对话框、全屏对话框。

警告对话框在紧急情况下打断用户，包含信息、细节和操作。

简单对话框展示条目列表，这些条目被选择后立即产生效果。

确认对话框要求用户在关闭对话框之前确认选择。

全屏对话框充满整个屏幕，包含一系列需要完成的操作。

对话框的目的应该通过它的标题和按钮文本来传达。对话框的标题是可选的，如果能帮助理解，可以增加标题。

对话框的标题应该：1、包含简短、清晰的陈述或问题，避免被截断。2、避免道歉（“抱歉到扰到您”），警报（“警告！”）或模棱两可（“您确定吗”）

对话框按钮：推荐并排放置( 确认按钮在右边)，当按钮过长时，可以上下堆叠、右对齐。

警告/Alerts

警告框是对话框的一种。传达关于你的APP或设备状态的重要信息，并且经常要求反馈。警告框由标题、可选的消息、一个或多个按钮、用于收集输入的可选文本框而组成。除了这些可配置的元素，警告框的视觉表现是固化的、不能被自定义的。

尽量少的使用警告框。警告框打断用户体验，应该仅仅在诸如确认购买和破话行为（如删除），或者向人们报告问题等重要情况下使用。这种很少出现的警告框让人们认真对待。确保每个警告框提供了正确的信息和有用的选项。

在横竖屏的情况下都测试下警告框的视觉表现。警告框可能在水平模式或者垂直模式下看起来有所区别。优化警告文本让它在横竖屏的情况下都不用滑动就可以完整阅读。

警告标题和信息（Alert Titles and Messages）

撰写简短、描述性的、多词语的警告标题。人们在屏幕上需要阅读的文字越少越好。尽量构思一个避免像信息那样需要增加额外文本的标题。因为单字的标题很少能提供有用的信息，考虑询问一个问题或使用简短的句子。尽可能，控制标题在一行显示。如果标题是一个完整的句子，使用句子风格的大写以及合适的标点符号作为结尾。如果标题是一个断句，使用标题风格的大写，并且不要在结尾加上标点符号。

如果你必须要提供一段信息，使用简短、完整的句子。让句子尽量在一行或两行内显示来避免滑动。使用句子风格的大写并且使用合适的标点作为结尾。

避免使用指责、批判或侮辱的语气。人们知道警告框告知他们问题和危险的情况。只要你使用友好的语调，那么负面、直接的信息比正面、隐晦的信息更好。避免使用你、你的、我、我的等代词，因为他们有时会被理解为无礼和傲慢的。

避免解释警告按钮。如果你的警告按钮和文本是语义清晰的，那么不需要解释按钮是做什么的。在极少数必须提供指导的情况下，请使用词语“轻击（tap）”，在提到按钮名称时使用大写，并且不要用引号括住按钮标题。

警告按钮（Alert Buttons）

一般情况下，使用两个按钮的警告框。两个按钮的警告框提供了两个备选方案之间的简单选择。单一按钮的警告框通知信息，但是没有给予用户当前情况下的控制权。三个或更多按钮的警告框增加了复杂性而且可能需要滑动操作，这是一种不好的用户体验。如果你发现你需要超过两个选项，考虑使用动作面板（Action Sheets）

给按钮取一个简洁、符合逻辑的标题。最好的按钮标题描述了选择这个按钮后的结果，由一到两个单词组成。对于所有的按钮标题，使用标题风格的大写方式并且不要使用结束标点符号。尽可能的，使用与警告框标题和消息直接相关的动词和动词短语，例如，查看全部、回复或忽视，使用好的（OK）来表示简单的接受，避免使用“是（YES）”或“否（NO）”。

把按钮放在人们期望的地方。一般而言，人们最可能点击的按钮应该放在右边。取消按钮应该总是放在左边。

为取消按钮合理命名。一个取消警告动作的按钮应该只能被命名为“取消（cancel）”。

标明产生破坏性结果的按钮。如果一个按钮的结果是一个具有破坏性的动作，例如删除内容，将这个按钮的类型设置为具有破坏性（Destructive），那么系统会给它一个合适的风格（ UIAlertActionStyleDestructive）。另外，提供取消按钮，这样人们就可以选择安全地退出破坏性的动作。通过将“取消”按钮标记为默认按钮来使其文本加粗。

允许人们通过退回主屏来取消警告框。当警告框出现时，按“Home”键回到主屏将会退出APP。也会产生和点击取消按钮时同样的效果——就是警告框没有执行任何动作就消失了。如果你的警告框没有取消按钮，当人们退出你的APP时，考虑在代码中执行一个取消动作。

活动视图（Activity Views）/底部面板（Sheets: bottom）

iOS叫活动视图（Activity Views）。安卓叫底部面板（Sheets: bottom）。主要用于app与其它应用发生交互（如分享、发送邮件、打开文件等）

活动视图是例如复制、收藏、查找的一项任务，在当前的上下文中很有用。一旦激活，活动视图可以立即执行任务，或在执行前要求更多信息。活动视图管理各种动作，取决于设备和屏幕方向（横竖屏），活动视图会表现为一个面板或者弹窗。使用活动视图给人们提供你的APP可以实现的自定义服务或任务。

系统提供了一系列内置的活动，包括打印、信息和AirPlay。这些任务总是在活动视图中首先出现而且不能被重新排序。你不需要创建自定义的活动来执行这些内置的任务。活动视图也会显示来自其他应用程序的共享和操作扩展。Sharing and Actions.

设计简单的模板图像来代表你自定义的活动。模板图像使用遮罩来创建图标。使用带有合适透明度和抗锯齿的黑色和白色，不要使用阴影。模板图像应该处于 70px × 70px区域大小的中心。

创建简洁描述你任务的活动标题。标题在活动视图中的图标下面展示。短标题效果良好。当一个标题过长的时候，iOS首先会缩小字号，然后要是仍然太长，就会截断它。一般情况下，避免在标题中包含你的公司或产品名字。

确保活动适合当前上下文。尽管系统提供的任务不能在活动视图中被重新排序，但是但他对你的APP不适用时，你可以删除它。例如。为了阻止人们印刷图片，你可以去除“打印”活动。你也可以定义在特定的时间显示哪些自定义任务

使用“操作”按钮来显示活动视图。当人们点击“操作”按钮时，他们习惯于进入系统提供的活动视图。避免提供另一种方式来做同样的事情而让用户感到困惑。

底部面板/Sheets: bottom

安卓的底部面板分为三类：标准底部面板、模态底部面板、展开的底部面板

标准底部面板

屏幕主要内容的补充，当用户与主要内容交互时，其仍然可见。可以展开与折叠。

模态底部面板

类似于action sheet，底部边缘向上滑出的一个面板，它用于向用户展示额外的内容，也可以用于显示来自其他应用的深层链接。

打开后，背景添加蒙版，只可对该部分进行操作。点击蒙版、关闭按钮、下滑可以退出模态。

拓展底部面板

小的、折叠的面板，用户可以将其展开以访问关键的特性或任务。与标准底部面板一样持续存在，与模态底部面板一样提供入口。（淘宝的详情、智联招聘）

相应用户对于主屏幕的操作，可以点击扩展，展开后可以点击折叠。

防止在屏幕的底部、尾部，以最大程度的减少屏幕上的内容。

与其它组件的配合使用

标准底部按钮一般不与底部的标签栏、工具栏同时出现。

动作面板（Action Sheets ）

动作面板是响应控件或操作时出现的特定警报样式，并且提供与当前上下文有关的两种或更多的选择。使用动作面板是为了让人们启动任务，或在执行潜在的破坏性操作前请求确认。在较小的屏幕上，动作列表从屏幕底部滑出。在大一点的屏幕上，动作面板像弹窗一样一次全部出现。

在执行潜在的破坏性操作之前，请使用动作面板请求确认。要让人们选择与没有破坏性的任务相关的项目或动作，可以使用下拉菜单。

提供“取消”按钮，使人们可以重新考虑破坏性操作。“取消”按钮应出现在操作表的底部。

突出显示破坏性选择。将红色用于执行破坏性或危险操作的按钮，并将这些按钮显示在操作表的顶部。

避免让动作列表滚动。如果操作表上有太多选项，则人们必须滚动查看所有选项。滚动需要花费额外的时间来做出选择，并且滚动操作很难做到不会无意间点击一个按钮。

侧边面板/Sheets: side

侧边面板可以承载补充的内容，这些内容固定在屏幕的左边或右边边缘。内容较多时，可以上下滚动。

与导航抽屉放置在对立的一侧。

分为标准侧板和模态侧板。

标准侧板常驻显示，一般在平板电脑等大尺寸屏幕上使用。可以折叠或者展开。

通常用于：

·主要内容区需要滚动，侧板保留固定的功能与内容。

·放置影响主要内容区域的上下文动作，如过滤器。

·辅助信息或元数据，例如位置或者照片细节。

·可以在单一页面中完成的简单任务，例如配置选项或者购买前指定商品的详细信息。

模态侧板显示时会出现黑色半透明蒙版，取消后才能与下层的内容进行交互。用户注意力更加聚焦。

点击黑色半透明蒙版、向边缘滑动、可以的话在侧边卡片的头部使用一个可以关闭的按钮。

04 进度指示

活动指示器/进度条/ActivityIndicator/loading/Progress Indicators

不要让人们坐在静态屏幕旁等待您的应用加载内容或执行冗长的数据处理操作。使用活动指示器和进度条可以使人们知道您的应用没有停止，并让他们知道要等待多长时间。

告诉人们正在进行的流程的状态，如程序加载、提交表单或者保存更新。当展示一系列流程的进度时，指示总体进度，而不是每个活动的进度。

Material Design提供了两种视觉上不同的进度指示器：线性和圆形进度指示器。二者都有确定过程和不确定过程的形式。

位置：tab下方、页面中央、新内容出现的位置、触发操作的位置（如按钮处）

位置

屏幕中央的线性指示器可以指示正在加载的所有屏幕内容。

附加到容器（如卡片）的线性指示器可以只是该过程仅适用于该特定项目（并且可以与UI的其余部分进行交互）

展开项可以在其展开边缘放置一个线性指示器，以吸引用户注意新内容的显示位置。

动态指示器（Activity Indicators）

当执行一个难以预估的任务，例如加载或者同步复杂数据时，动态指示器将旋转。当任务完成的时候它会消失。动态指示器是不可交互的。

优先使用进度条而不是动态指示器。如果活动是可量化的，使用进度条而非动态指示器，这样人们就可以更好地估计发生了什么并且将会需要多久。

保持动态指示器处于活动状态。人们会将静止的动态指示器和崩溃的进程联系起来。让它保持旋转，这样人们就知道正在进行一些活动。

如果有帮助的话，当人们等待任务完成的时候提供有用的信息。在动态指示器的上方放一个标签，以提供额外的上下文语境。避免使用诸如加载和身份验证之类笼统的措辞，因为它们通常不会增加任何价值。

进度条（Progress Bars）

进度条是一个从左至右填充的轨迹，表明一个已知持续时间的任务的进程。进度条是不可交互的，尽管它们总是伴随着一个取消相应操作的按钮。

总是准确地报告进度。不要仅仅为了让APP看起来很忙而显示不准确的进度信息。仅为可以量化的任务使用进度条。否则，使用动态指示器。

对具有明确持续时间的任务使用进度条。进度条非常适合显示任务的状态，特别是当它能传达完成任务需要多久时间的时候。

在导航栏和工具栏中隐藏没有被填充的路径部分。默认情况下，进度条包含填充了的和未被填充的路径。当在导航栏或工具栏中使用的时候，例如表示页面加载，进度条应该配置为隐藏未填充的路径。

考虑自定义进度条的外观以匹配的你的APP。可以调整进度条的外观以匹配你APP的设计。例如，你可以为路径和填充部分自定义色调和图片。

网络活动指示器（Network Activity Indicators*）

在iOS13和无边框设计显示中（ edge-to-edge displays），不推荐使用网络活动指示器。在iOS 12和更早的版本中，以及没有无边框设计显示的设备中，当连接网络时，网络活动指示器在屏幕顶部的状态栏中旋转。当网络连接完成的时候，它会消失。这个值使其看起来是一个活动指示器，并且是不可交互的。

只有当联网活动持续超过几秒的时候，才显示这个指示器。快速的网络连接操作时，不要显示这个指示器，因为它很有可能在人们注意到它的出现或者意识到它传达的含义之前就会消失。

内容刷新控件（Refresh Content Controls）

刷新控件是手动触发的，特别是在表格视图中，用于马上重新加载内容而不用等待下一次内容的自动刷新。刷新指示器是一种特殊类型的活动指示器，默认情况下是隐藏的，当在视图中向下拖拽以重新加载时变得可见。例如，在邮箱中，你可以向下拖拽收件箱列表，以检查新的邮件。

执行自动内容更新。尽管人们喜欢可以触发实时内容更新，他们也期望定期的自动刷新。不要每次都让用户负责触发更新。通过定期更新让数据保持新鲜。

只有在可以增加价值的情况下，才提供短标题。作为一个可选性，刷新控件可以包含一个标题。在大多数情况下，这是不需要的，控件的动画就表明内容正在加载。如果你增加了一个标题，不要用它来解释如何执行刷新。相反的，提供有关正在刷新的内容有价值的信息。例如，在播客中的刷新控件，用标题告诉人们上一次播客更新的时间。

加载（Loading）

当内容加载的时候，空白或静态的页面可能使你的APP看起来卡住了，让人们困惑和沮丧，也可能导致人们离开你的APP。

加载过程中确保清晰的显示。至少，像是一个旋转的活动指示器来表明正在进行某种活动。更好的是，显示明确的进程这样人们就可以估计他们要等多久。

尽快显示内容。不要让人们在他们看到期望看到的页面之前等待内容加载。立即显示页面，并使用占位符文本、图形、动画等来标明哪些内容暂时不可用。当内容加载的时候替换这些占位符元素。尽可能地，当用户播放动画或者在某个层级或者菜单导航时，在后台预加载即将出现的内容。

通过教育和娱乐用户来打发加载时间。考虑显示关于游戏的提示，娱乐性的系列视频，或者有趣的占位图形。

自定义加载页。尽管标准的进度条通常是可以的，但是它有时候会让人感觉失去了情景感（feel out of context）。考虑通过匹配你APP或者游戏风格的自定义动画或元素来设计一个更有沉浸感的体验。

For additional guidance, see Progress Indicators.

Spin/加载中

与loading类似，用于页面和区块的加载中状态。

页面局部处于等待异步数据或正在渲染过程时，合适的加载动效会有效缓解用户的焦虑。

骨架屏

在需要等待加载内容的位置提供一个占位图形组合，加载完成后用实际内容将之替换掉。

何时使用

网络较慢，需要长时间等待加载处理的情况下。

图文信息内容较多的列表/卡片中。

只在第一次加载数据的时候使用。

可以被 Spin 完全代替，但是在可用的场景下可以比 Spin 提供更好的视觉效果和用户体验。

05 信息展示

图片列表/集合/网格视图/image list/collection

集合管理一组有序的内容，例如一组照片，然后用一种可定制的、高度可视化的布局来呈现。因为集合并不会严格按照线性结构来排布，特别适合展示不同大小项目。一般而言，集合是展示图片类型内容的完美视图。可以选择性的使用背景和其他装饰性的视图，在视觉上区分不同的项目组。

集合支持交互和动画。默认情况下，你可以通过点击来选择，通过长按来编辑，通过轻扫来滑动。如果你的APP需要这些，可以增加耕读的手势来表示自定义的行为动作。在集合中，当插入、删除或给项目重新排序的时候都可以使用相应的动画，而且自定的动画也是支持的。

当标准的的行或者网格式布局是合适的时候，不要创造一种激进的、全新的设计。集合应该用来增强用户体验，而不是成为注意力的中心。让项目容易选择。如果在你的APP中醒目难以触击，人们会感到沮丧，并且在到达他们想看到的内容之前失去兴趣。在内容周围使用合理的间距（padding）让整体布局显得干净清晰，并且避免内容的重叠。

考虑使用表格而不是使用文本格式的集合。一般而言，在可以滑动的列表中查看和理解文本信息更加简单和高效。

小心地进行动态布局变更。集合的布局可以随时改变。如果在人们查看和与之交互的时候动态改变，确保这种改变是有意义的且易于追踪的。动机不明的布局改变让你的APP看起来不可预测且难以使用。如果应为布局改变而失去了上下文（context），人们就就会失去控制感。

滑动时，作为一个整体，一起滑动，而不会单个图片滑动操作。

4种类型

标准图像列表：最适合表达项目之间同等重要。有统一的尺寸、圆角和间距。

大小不一的图像列表：在集合中强调最主要的项目。使用不同的容器大小和比例创建层次结构。

编织感的图像列表：有助于浏览同等重要的内容。在不同比例的同期中显示内容，以创建有节奏的布局。

砖砌感的图像列表：有助于浏览未裁剪的同级内容。容器的高度根据图像尺寸来确定。间距保持一致。

图片视图/image view

图像视图实在半透明或不透明的背景上展示一张单一的图片或者动画图像序列（ an animated sequence of images）。在图像视图中，图片可以拉伸、缩放、尺寸调整、或者固定在一个特别的位置。图像视图默认是不能交互的。

如果可能，确保动画序列中的图像保持同样的大小。最好的是，图片应该预先缩放到适合视图，这样系统就不用做任何缩放。如果系统必须执行缩放，当所有图片都是同样尺寸和形状的时候最容易达到预期的效果。

文本视图/text view

文本视图显示多行、格式化的文本。文本视图可以是任何高度，并且当内容扩展到视图之外时启用滚动。默认情况下，文本视图中的内容是左对齐的，而且使用系统的黑色字体。如果文本视图是可编辑的，当你在视图中触击的时候会显示键盘。

保持文字清晰。尽管你可以创造性的使用多种文字、颜色、对齐方式，但保持内容的可读性是至关重要的。采用动态类型（Dynamic Type）是一个好主意，如果人们在他们的设备上改变文本尺寸，也能看起来效果很好。你也应该在辅助功能选项启用（例如粗体文字）的情况下测试你的内容。 See Accessibility.

显示合适的键盘类型。iOS提供了几种不同类型的键盘，每种都是为了让不同类型的输入更加便利而设计。为了简化数据输入，在文本视图的编辑期间，都应该显示适合于区域中内容的键盘类型。完整的可使用的键盘类型清单，see the UIKeyboardType constant of UITextInputTraits.

网页视图/web view

网页视图在你的APP内直接加载和展示丰富的网页内容，例如嵌入的HTML和网站。例如，邮件使用网页视图，在信息中显示HTML内容。

在合适的时候启用前进和后退导航。网页视图支持前进和后退导航，但是默认情况下这种行为是不可用的。如果人们将会通过你的网页视图浏览多个页面，启用前进和后退导航，并且提供相应的控件来使用这些功能。

避免使用网页视图来构建一个网页浏览器。使用网页视图让人们在不离开你APP上下文的情况下快速访问一个网站是可以的，但是Safari浏览器是iOS中人们浏览网页的主要方式。试图在你的APP中复制Safari浏览器的功能是不必要的、也是不鼓励的。

06 结果反馈

结果页

在整张页面中组织插画、图标、文字等内容，向用户反馈操作结果。

规则#

用作非常重要的操作反馈，如支付成功，无网络状态。

个性化且优美的插画，可以提升品牌形象。

对于错误类型的结果页，页面中需要提供明确的行动点，eg：重新加载。

图片来源网络

错误提示

反馈的一种，表明操作的结果出现异常。

常见的形式有：异常结果页（缺省页/空状态/断网/弱网）、弹窗（alert）、文本提示等。

原则

错误反馈的要点：让用户注意到；告知出错原因；告知出错位置；提供解决方案。按照谷歌的原则，可以归纳为：简洁、清晰、有效。

让用户注意到：一般使用红色文字提示，可考虑加上图标、输入框变红、加粗等形式变化结合来增强视觉提示。

告知出错原因：描述应当简单、易懂。出错后用户的心理一般会较为急躁，因此，错误提示需要安抚用户并尽可能让其容易理解。

告知出错位置：可以采用视觉关联或者位置邻近的方式。视觉关联：反馈文字与输入框颜色一致；输入框边框变化、字体变化。位置邻近：错误提示出现在输入框旁边。这种形式要注意表单超出一屏时，用户不能及时发现出错位置。

提供解决方案：提示出错后，用户的填表流程就会被打断。这时候需要告知用户如何方便、快捷地修改这个错误，以便顺利回到填写表单的流程。除文字提示外，也可以提供快捷解决方案供人们选择。如名字重复时提供可用的近似性名字等。

07 帮助/提示

引导（APP主动）

引导一般针对新手用户，提示用户如何进行操作，降低用户的学习成本，帮助用户快速上手。

如同Jesse James Garrett在《用户体验要素》提出最底层的架构是用户需求和网站目标一样，推动新手引导设计的原因也有两个：用户需求和产品目标。对于新手引导来说，用户需求是快速、愉悦地学习使用产品。产品目标是将新手用户快速转化为活跃度高、黏着度高的忠实用户。

——浅析产品新手引导设计 – 腾讯CDC

高级的引导是subtle（巧妙的、微妙的）而非强制、刻意。也就是在用户的使用流程中，引导的设计简单、轻量地（图文结合的趣味性而非长篇累牍地文字）与整个流程融合，让用户不知不觉地学会APP的使用。如多邻国的例子。

用户引导页/Onboarding

用户引导可以让你欢迎新用户，并且和老用户重新建立连接。一个快速、有趣、有教育意义的可选用户引导体验，可以在不妨碍人们的情况下帮助人们充分了解你的APP。

一般用于首次使用、有重大更新的场景，推荐/介绍APP的主功能或新功能。

通过用户引导让人们享受你的APP，而不仅仅是进行设置。人们会很高兴有机会来了解你的APP，但他们同时期望它工作正常。避免在你的用户引导体验中添加设置或者许可证细节。相关指导，seeLaunching.

快速开始行动。当系统用APP的初始页代替了启动页（launch screen）时候，然人们立即行动、开始享受你的APP。如果你需要提供教程或者分步指导（intro sequences），给人们一种方式来跳过它们，而且不要自动给老用户显示这些信息。

事先预估帮助需求。主动地寻找人们可能会卡住的时机。例如，游戏可以在暂停或者角色停滞不前的时候有意无意的展示有用的提示。让人们重播教程，以防止它们在一开始的时候错过了某些信息。

只在教程中展示关键的内容。为初学者提供指导是很好的，但教学培训不是一个优秀APP设计的替代品。首先也是最重要的，让你的APP直观、使用简便。如果需要太多的指南，重新审视你APP的设计。

让学习变得有趣且容易发现。在做中学比阅读一列说明清单更有趣也更高效。使用动画和可交互的元素，循序渐进的进行教学。避免展示看起来可交互的静态页面截图。

原则

文字简洁，以图示为主。

数量上控制在3-5屏内容。

有醒目的退出按钮和进度提示。

界面元素说明/蒙版引导/Coach Marks

通过蒙版，聚焦于关键功能点，提供只是说明文字，引导用户操作。

通常出现在用户初次使用产品的过程中，能够以较为轻量的方式快速指引用户了解产品的使用方法或者新功能。

组成元素：蒙版（可选）、被说明的元素、指引线、说明文字。

不使用蒙版时，一般较为简单，与整体融合，不打断当前操作。而使用蒙版时，一般需要用户点击才能取消（模态），可以同时介绍多个功能点。或者对某些隐藏功能（界面没有与之对应的元素）结合手势进行详细介绍。

原则：

文字表述简单直白、专注于功能点，让用户快速理解。

聚焦于需要引导的内容，最大化的减少干扰

引导出现的时机应该是用户一次打开相关界面时，同时只针对主要功能点进行说明，太多太频繁会让用户感到啰嗦、难以忍受。

图文结合、动图与文字结合的方式，增加引导的趣味性、情感性，减少用户的反感情绪。可以结合动效，减少用户的理解成本。

退出引导的方式可以提供按钮或者将整个蒙版作为可点击区域，让用户可以轻松退出。

可以有多个步骤连续引导（步骤数量需要限制，无休止的下一步点击会让用户厌烦）。或者一次展示所有需要说明的元素（元素太多容易记不住，也给用户造成心理负担）。

模态对话式引导/ 活动浮层介绍

通过气泡的方式出现，同时蒙版遮罩弹珠背景元素，需要用户点击操作才能取消。一般用于较为复杂的介绍。

全局引导

即异常结果页（缺省页/空状态/断网/弱网），文字提示+插图占位符+跳转button，引导用户进行下一步操作，避免流程陷入死胡同。

即时对话式引导

通过气泡的方式出现，几秒后自动消失。不打断当前的使用流程，对用户干扰较小。箭头指向相关的元素。

局部引导

局部引导即通知栏（NoticeBar）的形式，一般作为系统状态的提示。

操作引导

引导用户完成某个操作，如头像未上传时，占位符显示未上传头像。不强制用户完成，但是持续吸引用户的点击。

功能引导

针对具体的功能进行引导，在使用相关功能或者判断用户要使用某项功能时出现。人性化、智能化的帮助，如微信的发送图片提示。

其它引导

如小红点/徽标/badge提示。表示新的内容更新或者未处理的消息。

教学式引导

与具体的使用场景结合，鼓励用户参与其中，边学边用，及时反馈。这种方式很容易让用户沉浸其中，快速学习，并且因为有及时的操作反馈，所以用户很容易获得强烈的成就感。

弹窗提示

通过弹出框的形式来说明/强调重要的内容、功能升级详情、活动引流等。

没有与功能产生直接联系，较为突兀。弹出的时机和频率需要控制。避免过多、频繁的出现干扰用户的主要操作流程。

不打单

启动页/Launching

启动体验会对人们关于APP的看法产生显著影响。不管人们使用哪种设备或者距离上次打开你的APP过去了多长时间，启动体验都应该是快速、无缝衔接的。

下面的知道可以帮助你设计一个令人愉悦的启动体验。 For developer guidance, see Responding to the Launch of Your App.

提供启动页。当你的APP启动时，系统会展示你的启动页，然后快速用你APP的首屏替代。APP启动页的功能是让人们觉得你APP是快速响应的，同时（在APP启动过程中）允许加载初始内容。为了确保从启动页无缝切换，设计一个看起来像你APP的首屏且不会引起别人注意的朴素页面。有关指导，see Launch Screen。

以合适的方向启动。如果你的APP同时支持竖屏和横屏模式，就应该以设备当前的方向启动。如果你的APP仅仅以一个方向运行，那么应该总是以竖直方向启动，并且让人们在需要的时候旋转屏幕。除非有一个无法抗拒的理由不这样做，否则APP的横屏模式都应该自动正确校准方向，不管这个设备是向左还是向右旋转。相关指导，see Adaptivity and Layout。

避免事先询问设置信息。人们期望APP能正常工作。为大多数的用户设计你的APP，让少数需要不同配置的人调整设置来满足他们的需求。尽可能的，从设备设置和默认设置，或者通过一个同步服务（例如iCloud）来获取设置信息。如果你需要询问安装信息，在首次打开APP的时候提示人们提供这些信息，而且让他们可以随后在你的APP中对其进行修改。

避免显示应用内的许可协议和免责声明。让应用商店来显示许可协议和免责声明，这样人们可以在下载之前就阅读这些文件。如果必须在你的APP中包含这些项，用一种不影响用户体验的、平衡的方式加入相关内容。

当你的APP重启的时候，恢复之前的状态。不要让人们重复之前的步骤来到达APP中之前的位置。保存和恢复APP的状态，这样他们就可以从离开的地方继续。

不要鼓励重新启动。重启浪费时间而且让你的APP看起来不可靠且很难用。如果你的APP有内存或者其它问题导致只能在系统刚启动后运行，那么，你需要解决这些问题。

不要太快或者太频繁的要求人们为你的APP评分。在第一次启动之后或者当人们在使用APP的时候太频繁的要求人们评分，是烦人的，而且可能会减少你收到的有用反馈的数量。为了鼓励认真思考的反馈，在要求人们评分之前给人们时间让人们形成一个关于你APP的意见。总是提供一种方式来退出评分提示，而且不要强制人们给你的APP评分。