移动端设计规范：操作类

这篇文章是移动端设计规范系列中的一个分类，即操作类。整个系列的设计规范偏交互方向，主要是讲解组件控件的定义、用途和使用说明，帮助读者快速了解移动端组件的类型和使用规范。

iOS和Android官方设计指南是按照组件的属性进行讲解，但是设计师在实际设计过程中，按照组件控件的功能纬度来讲解更贴合设计师使用场景。例如在设计导航类时，只需要看看现有所有导航类的组件有哪些，找到适合产品业务的组件，即可直接使用。
本系列按照组件控件的功能用途进行划分，移动端设计规范一共含有7大类，分别为：UI栏类、导航类、加载类、缺省类、提示类、表单类和操作类。

本篇文章讲解操作类，一共包含6个，分别为：底部操作列表(action sheet）、底部动作条(bottom sheets)、日期时间选择器(date picker)、选择器(picker)、按钮(buttion)、编辑菜单(edit menu)和菜单(menu）。

底部操作列表

定义：

与用户触发的操作直接相关的一系列选项功能。

用途：

底部操作列表，是当用户激发一个操作的时候，出现的浮层面板。“使用操作列表让用户可以开始一个新任务或者对破坏性操作（例如：删除、退出登录等）进行二次确认。”

使用说明：

1. 点击遮罩，底部操作列表消失。
2. 底部操作列表可以显示说明，作为对当前操作项的说明。
3. 底部操作列表可以只展示操作选项，这样的底部操作列表更加简洁易读。
4. 对于删除，退出等需要警示性的操作，可以通过红色文字来展示。

样式：

举例：

在iOS原生邮箱，用户在读邮件时，点击底部的工具栏中的回复/转发，则出现一系列选项功能，用户通过点击选择选项功能开始一个新任务。

iOS原生相册当用户删除照片时，出现底部操作列表让用户确认，同时删除照片文字变红，凸显这是一个危险操作。

底部动作条

定义：

一个从屏幕底部边缘向上滑出的一个面板，使用这种方式向用户呈现一组功能。

用途：

底部动作条(Bottom Sheets)提供三个或三个以上的操作需要提供给用户选择，并且不需要对操作有额外解释的情景。

根据上一步的内容，向用户展示用户上一步的操作之后能够继续操作的内容，并提供模态的选择。

使用说明：

1. 如果只有两个或者更少的操作，或者需要详加描述的，可以考虑使用菜单(Menu)或者对话框替代。底部动作条可以是列表样式的也可以是宫格样式。
2. 显示底部动作条的时候，动画应该从屏幕底部边缘向上展开。点击其他区域会使得底部动作条伴随下滑的动画关闭掉。如果这个窗口包含的操作超出了默认的显示区域，这个窗口需要可以滑动。
3. 在一个标准的列表样式的底部动作条(Bottom Sheets)中，每一个操作应该有一句描述和一个左对齐的icon。如果需要的话，也可以使用分隔符对这些操作进行逻辑分组，也可以为分组添加标题或者副标题。一个可以滚动的宫格样式的底部动作条，可以用来包含标准的分享操作。

样式：

举例：

底部动作条多使用于遵循Material Design，如下图谷歌官方给出的实例说明。

日期时间选择

定义：

通过滑动来选择日期和时间。选择器的承载信息很大，可以承载很多很多的选项。

用途：

在选择器面板中可以来回选择，如果选择错误的话可以快速调整。

使用说明：

1. 选择器一般位于底部，或者位于选项列表的下面（如iOS原生日历）
2. 同一个竖直方向的选项属性相同

样式：

举例：

微信公众平台小程序选择查看时间范围时，展示出来就是日期选择组件。iOS原生提醒事项设置日期和时间时会出现日期时间选择器

选择器

定义：

通过底部面板从众多选项中选择一个选项。

用途：

在底部面板中可以来回选择，如果选择错误可以快速调整。

使用说明：

1. 各个选项通常是并列关系。
2. 对于已选择的选项，会有选中标记作为区分。

样式：

举例：

例如一些app在编辑基本信息时，进行性别选择，出现选择器。

按钮

定义：

由文字、背景色块或图标等组成，按钮告知用户按下按钮后将进行的操作，我们可以把按钮理解为一个操作的触发器。

用途：

1. 执行对象为一个流程对象
2. 操作按钮

使用说明：

1. 按照操作重要程度来分：主操作按钮 > 次要操作按钮 > 文字按钮
2. 按钮存在三态：noraml、press（click）、disable。

样式：

举例：

猫眼登陆时，获取短信验证码和密码登陆，一个是主按钮，一个是文字按钮，两个按钮通过大小和视觉对比表达，让用户知道当前主要流程操作是通过获取短信验证码进行登陆。

编辑菜单

定义：

用户通过长按能呼出一个编辑菜单来完成诸如在文本视图、网页或者图片中的剪贴、复制、以及其他一系列的选择操作。

用途：

将一系列操作隐藏，只能通过手势呼出，这样的好处是编辑菜单不占据当前展示界面的空间，适合非高频且操作选项比较多的使用场景。

使用说明：

用户通过长按呼出编辑菜单，对长按的信息进行特定的选择操作。

样式：

举例：

微信，如果用户对微信对话信息进行复制、转发、收藏等操作，可通过长按呼出编辑菜单。

菜单

定义：

菜单是临时的一张纸（paper），由按钮（button）、动作（action）、点（pointer）或者包含至少两个菜单项的其他控件触发。

每一个菜单项是一个离散（不连续）的选项或者动作。

用途：

将一系列操作隐藏，只能通过手势呼出，这样的好处是菜单不占据当前展示界面的空间，适合非高频且操作选项比较多的使用场景，类比编辑菜单。

使用说明：

1. 菜单出现在所有的应用内部的UI元素之上。通过点击菜单以外的部分或者点击触发按钮，可以让菜单消失。通常，选中一个菜单项后菜单也会消失。
2. 一个特例是当菜单允许多选时，比如使用复选标记。
3. 当有的选项不可用时，应该置灰处理，而不是移除它们，这样可以让用户知道在正确条件下它们是存在的。

样式：

举例：

例如微信，长按好友对话列表，则出现菜单，用户可对长按的对话列表进行特定的操作。