iOS 人机界面指南精简版笔记之界面元素：Views（上）

iOS 基本界面元素包括大类，分别是 Bars（栏）、Views（视图）、Controls（控件）。一篇文章分享了 Bars（栏），今天给家分享 Views（视图）部分。

值得注意的是，Views 中的 Alerts、Action Sheets、Activity Views 都属于模态视图（Popovers 较特殊，可是模态或者非模态的）。今天我们先把具有模态属性的各种视图作为一个合集进行分享。

Modality 模态

1. 什么是模态

模态是临时模，独立于用户前正常操作流程，需要执明确操作才能将其关闭。

2. 模态作用

• 帮助人们注某个任务或相关操。
• 确保用户收关键息，采取行动。

iOS 13 及更高版支持 Sheet 、Fullscreen 两种自定义样式。

3. Sheet 卡风面板

卡片格适于非沉浸式模态容，要包含复杂任务。

取消卡的方式

• 从屏幕顶向轻扫
• 卡内容滚到顶部时，从屏幕任意位置向下轻扫
• 点击某按钮（取消、完成等）

4. Fullscreen 全屏模态

先前视图被全覆盖，从而将视觉干扰降至最低，只通过点击按钮闭全屏模态视图。

适用沉浸式内容（视频、照、拍摄），或复任务（标文档或编辑照）。

5. 使用模态视图时应注意

不要滥用模态，模态破坏用户心流，必要时才使用。

保持模任简、轻量，模任不要包含多个层。如果不得不包含页面，则必须提供唯一、清晰的线程路径，帮助用户完成任。

提供退出模态视图按钮，提供「完成」、「取消」按钮，作为手势替代。我理解是，手势操作在界上不可见，学习成本高。而按钮在界上可见，可以用户带来操作可控安全感。

避免数据丢失，不用户使用手势还按钮关闭视图，如果该操作会导致用户的内丢失，提示用户，并提供挽回办法。

要在弹窗面叠加卡片，应先关掉弹窗再展示卡片（消息对话框除外）。

明确当前任务，通过模态的标题（或他案）来帮助户明确当前任务是么。我的解是，模态打断了户之前的操作流，这会和户预期的操作相冲突。如果明确示户当前任务是么，户会感到茫然甚至被打扰。

使用合适的渡动效，使用动效向用户暗示内容已生转换。系统的默认动效是屏幕底部向上滑出，关闭时向下滑出。

Alerts 消息对话框

消息对话框对关 App 或者手机状态的重明，通常需用户执行操作反馈。

慎消息对话框。消息对话框属于模态视图，会破坏户体验，仅可在重要场景中，例如确认付，具有破坏性的可逆操作（如删除），报错。注意消息对话框现频率越，户越容易将忽视。

消息对框组成元素

• 标题
• 说明文字（非必须）
• 一个或多个的按钮
• 可含输入框，用来收用户相关信息，注意消息话框观不可自定义。

1. 文案相关注意事项

标题

标题越简短越好，尽量一行说。

试试仅使用标题就把情况释清楚，而不需要额外说明内容。单个字词的标题很难提供完整的信息，建议使用疑问句或者短句。

说明文字

说明文案持在两行以内，要确在横屏竖屏方向上能方便阅读而无需滚动。

说性文字要使用完整句，而不是短语。

语气

避免听起来是指责，审判或侮辱。

要使用了礼貌语，否定接态度，效要好过正隐晦态度。

按钮

按钮文案晰明确，尽量需额解释按钮含义。

若必须提供操作指导，引用按钮时使用动词「点击」，例如「点击 XX 按钮」。如果英文注意，引用的按钮文案用写字母，不引引起。

2. 按钮相关注意事项

数量

1 个按钮用于通知景，通常是 2 个按钮，3 个以上建议使用活动面板（Action Sheet）。

确

尽量使用标题和消息直呼应的动词，避免使用是和否。

位置

取消按钮在左侧，建议操作按钮在右侧。

破坏性的操作

破坏性的操作要使用系统已有的「破坏性」格式。将「取消」按钮标记为默认按钮，使其变为粗体。

Action Sheets 动作面板

作面是消息对话框（Alert）的一种特殊形态，在户点击某控件后现的一组操作项（发起任务、对破坏性操作进行确认等）。在较小屏幕上，作面是从屏幕向上滑的。在较大屏幕上，作面弹口（Popover）的形式一次全弹。

屏幕底部放置取消按钮。原则上取消按钮不是必要的，但以让用户获得确定和安感。

破坏性操作要足够显。通过红色文字暗示其危险性，将破坏性操作置于其操作顶部。

不要让动作板滚动。若操作项过多，用户可能需要滚动才能查看所有选项，这会增加误操作概率。

Activity Views 活动视图

活动视图。一个活动即一个任，例如「复制」，「添加收藏」或「查找」等针对当前内容的有用操作，一旦选中立即执行，或是获取执行任所需的息。

是采用卡片样是弹窗样，取决于设备尺寸和，如下图。

系统内置任，系统带一些内置任，例如印、发送消息、AirPlay 等。系统内置任默认展示在前面，顺序不能改变，不要重新计，但可配置不使用哪些任。

可支持分享到其他应用和些扩展操作。

图标标题保持简短，标题太会被系统缩小甚至被截断。

作按钮，使系统默认的作按钮（action button）来调视图。作按钮见图。

Popovers 弹窗

弹窗可以是模态或者模态，如弹窗是模态，击弹窗以区域可以使弹窗消失。

弹窗元素。弹窗可以括各元素，括导航栏、工具栏、标签栏、表格、合、图片、地图，自定义视图等。

屏幕。弹窗合用屏设备（比如 iPad）。

建议保存操作结果。非模态弹容易由误操作导致闭，例如户小心点击了弹外区域。除非户点击「取消」按钮闭弹，否则建议保存户的操作结果。

谨慎考虑弹窗大小和位置。弹窗不要太大，不要遮挡重要内容和来源控件。

不要在弹窗上面叠加弹窗。要展示多个，必须先关掉前一个（消息对话框除外）。

弹窗大小变化时使用动画效平滑过渡，不然用户会以为出现了个新弹窗。

欢迎关注作者的微信公众：「能呆书一整天」