01-基础
按钮
类型
一般按钮（填充/描边）、文字按钮、图标按钮、浮动操作按钮（FAB）。
原则
布局：
一个容器中应该只使用一种类型的按钮，只在比较特殊的情况下（比如需要强调一个重要的功能）时才可以混合使用多种类型的按钮。
根据场景使用不同类型的按钮：
所使用的按钮类型应该和它所处的上下文相符。
按钮文本
按钮或控件的标签应该简明、准确的反映出菜单中的菜单项。菜单栏通常使用一个单词作为标签，像 “文件” 、 “格式” 、 “编辑” 和 “视图” 。其他内容可能会有更长的标签。（iOS建议增加图标辅助说明菜单项的含义）
使用动词：一个特定于动作的标题表明这个按钮是可交互的，而且告诉你当你触击的时候会发生什么。
保持简洁：过长的标题文本让你的界面变得拥挤，而且在较小的屏幕上可能会被截断。
推荐的按钮位置 ——Material Design
标准对话框
按钮对齐方式：右对齐
将确定按钮放在右边，取消按钮放在左边。
表单
按钮对齐方式：左对齐
确定按钮在左边，取消按钮在右边。
卡片
按钮最好放在卡片的左侧，以增加其可见度。然而，由于卡片的布局非常灵活，按钮也可以放在适合于内容和上下文的其他位置。
非标准的对话框和模态化窗口
在非标准的对话框和模态化窗口中，按钮的位置取决于它们包含的内容的复杂性。
如果对话框中的内容相对简单，推荐把按钮放在对话框右侧，并且确定按钮在取消按钮的右侧。
对于复杂的表单，建议把按钮放在表单左侧，并且确定按钮在取消按钮的左侧。
输入框
类型
单行文本、多行文本、段落文本
布局方式
上下布局 、左右布局-文本左对齐、左右布局-文本右对齐、无标签、图标标签
组成元素
标签、必填提示、输入线、光标、占位符、字符计数器、帮助文字、错误提示、清除按钮。
状态
正常、禁用、聚焦、错误。
原则
可识别
文本框应使用可点击的触摸目标，指示用户可以输入信息。
容易找到
应该要能很容易的在其他元素中找到文本框。
可读的
文本框应该指明其状态 - 启用还是禁用、为空还是已有文本输入、通过验证还是未通过验证 - 具有清晰的标签、输入框和辅助文本。
使用合适的键盘类型
显示合适的键盘类型。iOS提供了几种不同类型的键盘，每种都是为了让不同类型的输入更加便利而设计。为了简化数据输入，在文本视图的编辑期间，都应该显示适合于区域中内容的键盘类型。例如，如果你的APP要求邮箱地址，就应该展示邮件地址键盘。完整的可使用的键盘类型清单，see the UIKeyboardType constant of UITextInputTraits。
合适的默认值
根据设备的信息（位置、网络等）、用户的信息（已经登录的）等，预先填入默认值，减少输入工作量。
使用辅助输入
结合移动设备的特性、采用语音、扫码、手势等方式来输入信息，让输入过程更加轻松便捷。
其它辅助
格式化输入、前缀、后缀
单选
单选将选项平铺，与下拉菜单相比，占用空间大，操作更加便捷、直观。
复选
复选框与单选类似，区别是可以选择多个。
开关
开关是两个互斥状态（开和关）之间的视觉切换。
开关按钮切换单个设置项的状态。开关控件中的选项，以及它的状态，应该在相应的内联标签中显示清楚。开关按钮具有和单选按钮一样的视觉属性。
原则
考虑为开关加上颜色以匹配你APP的样式。如果在你的APP中表现良好的话，你可以改变开关中开和关状态的颜色。
仅仅在表格行中使用开关。开关是为了在表格中使用的，例如在一列设置列表中可以切换开和关。如果你在工具栏或导航栏中需要类似的功能，用按钮代替，并提供两个明显的图标来表明状态。
避免增加标签来描述开关的值。开关不是开就是关。提供标签来描述这些状态是多余的，而且让界面显得拥挤混乱。
考虑使用开关来管理相关界面元素的可用性。开关经常会影响界面中的其他内容。例如，在设置中打开飞行模式，将禁用其它设置，例如蜂窝网络和个人热点设置。在设置>WiFi中关闭WiFi，会导致可用网络和其它选项消失。
02-更多选项/操作命令
Chips/薄片
薄片是表示输入（如邮件收件人、增加标签）、属性或动作的紧凑元素。允许人们输入信息、进行选择、过滤内容或触发操作。
输入的薄片可以编辑，编辑完成后显示为薄片。顺序可以拖动更换顺序，数量较多时可以滚动显示。
选择薄片类似于单选或者多选控件，尽量一行显示。
过滤薄片就是筛选中的各个条件，点击选择一个或多个。一般在搜索框下方或者侧边卡片中显示。
动作薄片类似按钮，会触发上下文操作，一直持续的显示。
气泡/Popovers
气泡弹窗出现时，背景会变暗，更加聚焦。适合内容较多的场景。
气泡式弹窗是当你触击一个控件或一个区域时，出现在屏幕其它内容之上的临时性视图。通常，气泡式弹窗包含一个箭头指向出现的位置。气泡式弹窗可以使非模态或者模态的。非模态的气泡式弹窗在点击屏幕的其他区域或者弹窗上的按钮时关闭。模态的气泡式弹窗在点击去取消或者页面上的其它按钮时关闭。
气泡式弹窗最适合在大屏幕上使用，并且可以包含多样化的元素。包括导航栏、工具栏、标签栏、表格、集合、图片、地图和自定义视图。当出现气泡式弹窗时，其它视图的交互元素不可用直到气泡式弹窗被关闭。使用气泡式弹窗来展示与当前屏幕内容相关联的选项或信息。例如在许多iPad APP中，当你触击行动按钮时通过气泡式弹窗来展示分享选项。
原则
避免在iPhone上使用气泡式弹窗。一般而言，气泡式弹窗仅供iPad APP使用。在iPhone APP中，通过全屏的模态视图而不是气泡式弹窗来展示信息，以此利用所有可用的屏幕空间。（For related guidance, see Modality.）
仅使用关闭按钮确认和指引。取消和完成这样的关闭按钮，如果能提供清晰的信息，例如退出时保存或者不保存修改内容，就值得保留。一般而言，气泡式弹窗应该在它不需要存在时自动关闭。在大多数情况下，气泡式弹窗应该在某人触击了边界外的区域或者选择了其中的一个条目时自动关闭。如果允许多选，气泡式弹窗应该持续存在直到有人明确关闭或者点击了边界外的区域时关闭。
当自动关闭非模态气泡式弹窗时，总是自动保存内容。非模态弹窗很容易因为触击了屏幕的其他部分而被关闭。只有当某人明确点击取消按钮时才抛弃所做的工作。
在屏幕合适的位置放置气泡式弹窗。气泡式弹窗的箭头应该尽可能直接地指向激活它的元素。因为气泡式弹窗不能在屏幕中随意拖动，气泡式弹窗不应该覆盖人们在使用时可能需要查看的重要内容。气泡式弹窗也不应该覆盖触击展示该弹窗的元素。
一次展示一个气泡式弹窗。同时展示多个气泡式弹窗干扰界面并且让人困惑。不要一个弹窗中出现另一个弹窗的级联或层叠方式展示气泡式弹窗。如果需要展示一个新的气泡式弹窗，首先应该关闭当前打开的弹窗。
不要在气泡式弹窗上面展示另一个新的视图。除了警告框，没有其他东西应该出现在气泡式弹窗的上面。
可能情况下，让用户通过一次触击就可以关闭一个气泡式弹窗和打开另一个新的弹窗。当几个不同的栏按钮都可以打开不同的弹窗时，避免额外的触击是特别可取的。
避免让气泡式弹窗太大。气泡式弹窗不应该占据整个屏幕。让它足够包含需要包含的内容并且指向来自的地方。要注意系统可能会调整气泡式弹窗的尺寸来确保它适合当前的屏幕。
确保自定义的气泡式弹窗看起来像气泡式弹窗。尽管你可以在自定义许多气泡式弹窗的视觉外观，避免创造一个人们不能识别为一个气泡式弹窗的设计。当包含标准的控件和视图时，气泡式弹窗会最有效。
当改变气泡式弹窗尺寸的时候，提供平滑流畅的过渡。有一些气泡式弹窗为同样的信息提供标准和拓展的视图。如果你调整一个气泡式弹窗的大小，提供改变的动效来避免给人新弹窗代替了旧弹窗的印象。
上下文菜单/context menu
对于相关条目的快捷操作。类似于隐藏的内联按钮。
要打开上下文菜单，人们可以使用系统自定义的长按手势或者3D Touch（3D Touch可以更快的显示上下文菜单）。打开之后，上下文菜单展示条目的预览以及对其执行的命令列表。人们可以选择一个命令或者拖拽条目到另一个区域、窗口、或者APP。
原则
一致性的使用上下文菜单。如果你为一些地方的条目提供上下文菜单，而另一些地方的条目不提供，人们将会不知道在哪里可以使用这些功能，而且可能认为你的APP出现了问题。
仅仅包含对于条目最常用的命令。例如，在邮件信息中的上下文菜单，包含回复和移动邮件是有意义的，但是包含格式化和邮箱命令是没有意义的。列举太多的命令会让人不知所措。
上下文菜单中的每个命令都包含一个标志符号。标志符号强化了命令的意义，帮助人们快速理解他的功能。当你使用 SF Symbols，你可以在已有的符号中选择一个代表你的命令，或者编辑相关的符号以创建一个自定义的标志符号。如果你的上下文菜单包含一个子菜单，你不需要提供一个标志符号，因为它会自动增加一个系统提供的V型符号，表明存在附加的命令。
用子菜单来管理复杂性。子菜单是上下文菜单的一个菜单项，用于展示与命令逻辑关联的二级菜单。给子菜单提供能够描述其内容的简洁易懂的标题，这样人们就可以在不展开子菜单的情况下预估它的命令。简明的、面向动作的标题可以让人们跳过他们在当前上下文中不需要的子菜单。
只有一级子菜单。尽管子菜单可以缩短上下文菜单，并明确人们可以执行的命令，超过一级的子菜单增加了体验的复杂性，而且人们很难导航。
将最常用的菜单项放在菜单的顶部。当人们打开一个上下文菜单的时候，焦点在菜单的顶部。将最常用的菜单项放在菜单的顶部可以帮助人们找到他们要找的菜单项。
使用分隔符来组织相关的菜单条目。创造视觉分组可以帮助人们更快地扫描菜单。例如，你可能使用分隔符将编辑菜单项相关的操作放一组，将分享相关的菜单项放另一组。通常，上下文菜单中不需要超过三个组。
避免为同一个菜单项同时提供上下文菜单和编辑菜单。当同一个菜单项中两种功能都可用的时候，会让用户感到困惑，并且让系统很难预测意图。有关其它的指导，see Edit Menus。
避免提供用于打开项目预览的动作按钮。人们可以触击打开正在预览的项目，所以通常不需要明显的“打开”按钮。
编辑菜单/Edit Menus
在文本视图、网页视图中，选择文本后出现。可以看作上下文菜单针对文本编辑的一种特殊形式。
为当前上下文展示合适的命令。默认情况下，命令选项包含剪切、复制、粘贴、选择、全选和删除，其中任何一个都可以选择禁用。如果没有选择任何东西，菜单不应该展示需要选择的选项，例如复制或剪切。同样的，当已经有了选择，菜单中不应该有“选择”选项。
如果有必要的话，调整编辑选项的位置。默认情况下，取决于可用空间，菜单位于插入点或者选择的上方或下方，并包含一个指向相关内容的箭头。尽管你不能改变菜单的形状，但是位置是可配置的——你可以使之避免遮盖界面中重要的内容或者部分。
不要使用相同功能的其他控件来作为编辑菜单。提供多种方式来启动同样的操作会导致不一致的用户体验并且会导致混淆。例如，如果你的APP让人们通过菜单来复制内容，那么也就不要再放置一个复制按钮。
对于可能有用但不可编辑的文本，允许选择和复制。人们通常希望将静态内容，例如图像标签或社交媒状态等添加到电子邮件、便笺或web搜索中。
不要给按钮添加编辑选项。如果你这样做，试图激活选项的人将会最终激活按钮。
让编辑选项可以撤销。在动作执行之前菜单不需要确认。因为有人可能会在执行操作之后改变主意，所以总是要让撤销和重做可用。
用有意义的自定义命令来扩展编辑选项。你可以通过额外的APP特定的命令来增加价值。与标准的命令一样，任何自定义的命令都应该是对选择的文本或对象执行操作。
在系统提供的命令后面显示自定义命令。不要将自定义命令插入在系统提供的命令中间，这些命令是被广泛认知且经常使用的。
最小化自定义命令的数量。不要用太多的选择压垮人们。
保持自定义命令的名称简短。命令名称应该是动词或者简短的动词短语，简洁的描述将要执行动作。使用标题风格的大小写形式——除了冠词、并列连词和四个或四个字母以下的介词以外，每个单词都要大写。
下拉菜单/Pull-Down Menus
与气泡弹窗类似，提供更多的信息。但是不像气泡弹窗会让背景变暗，选项信息也更为简洁。
在iOS 14及更高版本中，按钮可以显示一个下拉菜单，其中列出了人们可以选择的项目或动作。您可以使用下拉菜单（或简单地使用菜单）来提供与按钮操作直接相关的项目，或提供在当前上下文中有用的操作列表。
与动作列表（action sheets ）、上下文菜单（context menus）和气泡弹窗（and popovers）相比，下拉菜单有几个优势。
· 菜单与按钮位置上接近，因此人们可以立即了解菜单项与他们正在执行的动作之间的关系。
· 除了列出的动作之外，菜单还可以提供可供人们用来影响主要动作的选择。
· 菜单进入视图的动作迅速，并且在菜单出现时不会使屏幕变暗，从而使过渡效果和总体体验更加轻盈。
不要将所有操作都放在菜单中。菜单可让您提供一系列项目，而不会弄乱您的界面，但是将所有操作置于菜单中意味着人们必须至少点击两次才能执行任何操作。考虑将最重要的操作放在主界面中，并使用菜单提供补充项目。例如，编写新消息是人们在“消息”中执行的最常见操作，因此“撰写”按钮在主界面中突出显示。为了给人们提供方便的一组编辑选项，Messages会将菜单附加到“编辑”按钮上，而不是在主界面中显示这些选项。
使用菜单显示与操作直接相关的选项。通过菜单，您可以在无需向主界面添加按钮的情况下，为人们提供澄清动作目标或自定义动作行为的方法（细分动作目的）。例如：
当用户点击应用中的“添加”按钮时，您可以显示一个菜单，让他们指定要添加的项目。
如果您的应用支持排序，则可以使用菜单让人们选择要进行排序的属性。
在允许在多个位置之间导航的应用程序中，菜单可以使人们导航到特定位置，而不用追溯每个步骤。
使用菜单提供辅助应用操作。如果您的应用程序包含不属于主界面的基本操作，则可以将这些操作分组在菜单中。例如，“文件”除了查看和排序内容的选项外，还使用菜单提供诸如添加文件夹或扫描文档之类的操作。
考虑添加“更多”按钮以显示菜单。“更多”按钮可以与大多数界面很好地集成在一起，人们通常都知道，它可以访问其他功能。您可以通过将省略号放在圆形按钮中来创建“更多”按钮（请参阅SF符号以了解有关符号的更多信息）。或者，您可以通过在现有按钮上执行特定手势来让人们显示菜单。例如，在iOS 14和更高版本中，Safari通过显示选项卡相关操作的菜单（如“新建选项卡”和“关闭所有选项卡”）来响应选项卡按钮上的长按手势。（“更多”按钮触发或者手势触发）
使用分隔符以可视方式对相关菜单项进行分组。创建视觉分组可以帮助人们更快地扫描菜单。例如，“文件”应用中的“更多”菜单使用分隔符来帮助人们，从与查看和排序相关的项目中，区分影响内容的操作。在菜单中使用三个以上的组可能使理解变得困难。
让人们知道菜单项何时具有破坏性，并要求他们确认意图。菜单使用红色文本突出显示您标识为潜在破坏性的操作。当人们选择破坏性操作时，系统会显示一个操作面板（action sheet）（iOS）或弹出框（popover ）（iPadOS），他们可以在其中确认选择或取消该操作。由于操作面板出现在与菜单不同的位置，并且需要有意地撤消，因此它可以帮助避免错误地丢失数据。
提供值时，在菜单项中包含标志符号。如果需要澄清项目的含义，可以在其标题后显示标志符号或图像。为此，使用SF符号（SF symbol）可以帮助您提供熟悉的体验，同时确保该符号在各个比例下均与文本保持对齐。
如果有意义，显示菜单标题。在大多数情况下，人们会理解菜单项的上下文，因为当他们点击按钮执行操作时，菜单会立即显示。如有必要，您可以提供简洁的标题，显示在菜单顶部。
菜单
Material Design 中特有，类似于iOS中气泡弹窗、上下文菜单、编辑菜单、下拉菜单的结合。使用场景涵盖更广。易于打开、关闭，适合当前的用户需求，菜单项便于扫描。与平铺的选项相比，更节约空间。
用户单击按钮、操作图标或其他控件可以打开菜单。菜单上显示一系列的选项，每行显示一个选项，它可以影响应用、视图、或视图中的选定元素。
原则
关闭菜单
触摸菜单外部或触发菜单的元素可以关闭菜单。
选择了一个菜单项后也应该关闭菜单。一个例外是当菜单允许选择多个项目时，例如通过使用复选标识。
位置
菜单出现在所有其他应用内部的 UI 元素上面。
菜单显示在触发它的元素的位置，当前选中的菜单项显示在触发它的元素的顶部。（平面上与触发的区域关联，纵向上位于顶层）
菜单可以滚动
如果菜单的高度不足以显示所有的菜单项，那么菜单可以内部滚动。一个典型的例子是在手机横屏状态下查看菜单。
如果不适用于特定的页面内容，菜单项可能被禁用。与页面内容相关的菜单将根据当前应用状态动态改变可用的菜单项。
移动端一般菜单只有一级，不会出现多级菜单的情况。菜单不应该用作应用中主要的导航方法。
菜单项
按钮或控件的标签应该简明、准确的反映出菜单中的菜单项。菜单栏通常使用一个单词作为标签，像 “文件” 、 “格式” 、 “编辑” 和 “视图” 。其他内容可能会有更长的标签。（iOS建议增加图标辅助说明菜单项的含义）
菜单显示一组一致的菜单项。每个菜单项可以基于应用的当前状态来启用或禁用。（选项数量、位置不变，可以选择启用或禁用）
不要重复显示已选中的菜单项。
单行显示
每一个菜单项都只能使用单行文本（一个单词或短语）来描述被选中时执行的操作。
菜单项还可以包括：
图标和帮助文本，比如快捷键。
像复选标记之类的控件来标识多选条目或状态（详见列表控件）
菜单排序
带有静态内容的菜单应该在菜单的顶部放置最常用的菜单项。
带有动态内容的菜单可能具有其他行为，例如在菜单的顶部放置之前使用过的字体。顺序可以根据用户的操作而改变。
禁用菜单项
将菜单项禁用，而不是移除，这样可以让用户知道在正确的条件下它们是可用的。
例如，当没有东西可以恢复时，“恢复”菜单项是禁用的。在内容被选中之前， “剪切” 和 “复制” 菜单项是禁用的。
菜单的类型包括上下文菜单、下拉菜单、展开的下拉菜单（Exposed dropdown menu）。
上下文菜单
上下文菜单能够根据应用的当前状态动态的改变可用的菜单项。（上下文菜单的菜单项可以选择不同情况移除或者禁用）
1-与当前上下文无关的菜单项可以被移除.
2-相关的但需要满足特定条件才能使用的菜单项可以被禁用。例如， “复制” 选项可以在选中文本后才启用。
单个菜单项状态
一些应用状态会导致上下文菜单只含一个菜单项。例如，当选中网页上的文本时，Android 只显示 “复制” 菜单项，因为用户不能剪切或粘贴文本。
下拉菜单
下拉菜单通常位于触发它的元素的下方。根据所点击的目标而显示不同的动作。
展开的下拉菜单（Exposed dropdown menu）
下拉选择模式，单选且选项较多、展示空间受限时使用。
滑动选择/picker/Wheels
选择器包含一个或多个可滚动的不同值列表，每个都有一个唯一的已选值——以更深的文字显示在视图的中心。选择其总是在屏幕的底部显示，或者当用户编辑字段或轻触菜单时在气泡式弹窗中显示。选择器也可以内联显示，例如在日历事件中编辑一个预约日期。选择器的高度大约是五行列表值的高度，选择器的宽度不是屏幕的宽度，就是封闭视图的宽度，具体取决于设备和上下文（context）。
使用可预测且逻辑排序的值。当可滚动列表静止不动的时候，选择器中的许多值是被隐藏的。最好让人们可以预测这些值是什么，例如一列按字母顺序排列的国家，这样他们就可以快速地浏览这些列表。
避免切换屏幕来展示选择器。当显示在上下文中、被编辑字段的下方或附近时，选择器工作良好。
考虑使用选择器提供中到长的项目列表。如果需要显示相当短的选项列表，请考虑使用下拉菜单而不是选择器。尽管选择器使您可以轻松快速地滚动浏览许多项目，但它可能会给一小部分项目增加太多视觉效果。另一方面，如果需要显示大量项目，请考虑使用列表或表格。列表和表格的高度可以调整，并且表格可以包含索引，这可以更快地定位列表的一部分。有关指导，请参阅表。
底部卡片/sheet：bottom
包含补充内容的卡片，固定在屏幕底部显示。可以显示各种内容和布局。
三种类型：标准底部卡片、模态底部卡片、拓展底部卡片。
标准底部卡片
屏幕主要内容的补充，当用户与主要内容交互时，其仍然可见。可以展开与折叠。
模态底部卡片
类似于action sheet，底部边缘向上滑出的一个面板，它用于向用户展示额外的内容，也可以用于显示来自其他应用的深层链接。
打开后，背景添加蒙版，只可对该部分进行操作。点击蒙版、关闭按钮、下滑可以退出模态。
拓展底部卡片
小的、折叠的卡片，用户可以将其展开以访问关键的特性或任务。与标准底部卡片一样持续存在，与模态底部卡片一样提供入口。（淘宝的详情、智联招聘）
相应用户对于主屏幕的操作，可以点击扩展，展开后可以点击折叠。
防止在屏幕的底部、尾部，以最大程度的减少屏幕上的内容。
与其它组件的配合使用
标准底部按钮一般不与底部的标签栏、工具栏同时出现。
动作面板/action sheet
动作面板是响应控件或操作时出现的特定警报样式，并且提供与当前上下文有关的两种或更多的选择。使用动作面板是为了让人们启动任务，或在执行潜在的破坏性操作前请求确认。在较小的屏幕上，动作列表从屏幕底部滑出。在大一点的屏幕上，动作面板像弹窗一样一次全部出现。
在执行潜在的破坏性操作之前，请使用动作面板请求确认。要让人们选择与没有破坏性的任务相关的项目或动作，可以使用下拉菜单。
提供“取消”按钮，使人们可以重新考虑破坏性操作。“取消”按钮应出现在操作表的底部。
突出显示破坏性选择。将红色用于执行破坏性或危险操作的按钮，并将这些按钮显示在操作表的顶部。
避免让动作列表滚动。如果操作表上有太多选项，则人们必须滚动查看所有选项。滚动需要花费额外的时间来做出选择，并且滚动操作很难做到不会无意间点击一个按钮。
侧边卡片/Sheet：side
侧边卡片可以承载补充的内容，这些内容固定在屏幕的左边或右边边缘。内容较多时，可以上下滚动。
与导航抽屉放置在对立的一侧。
分为标准侧板和模态侧板。
标准侧板常驻显示，一般在平板电脑等大尺寸屏幕上使用。可以折叠或者展开。
通常用于：
·主要内容区需要滚动，侧板保留固定的功能与内容。
·放置影响主要内容区域的上下文动作，如过滤器。
·辅助信息或元数据，例如位置或者照片细节。
·可以在单一页面中完成的简单任务，例如配置选项或者购买前指定商品的详细信息。
模态侧板显示时会出现黑色半透明蒙版，取消后才能与下层的内容进行交互。用户注意力更加聚焦。
点击黑色半透明蒙版、向边缘滑动、可以的话在侧边卡片的头部使用一个可以关闭的按钮。
活动视图/Activity Views
类似模态底部卡片。
活动是一项任务，例如“复制”，“收藏夹”或“查找”，在当前上下文中很有用。一旦启动，活动就可以立即执行任务，或在继续之前要求更多信息。活动由活动视图管理，活动视图显示为工作表或弹出窗口，具体取决于设备和方向。使用活动可以使人们访问您的应用可以执行的自定义服务或任务。
系统提供了一系列内置的活动，包括打印、信息和AirPlay。这些任务总是在活动视图中首先出现而且不能被重新排序。你不需要创建自定义的活动来执行这些内置的任务。活动视图也会显示来自其他应用程序的共享和操作扩展。Sharing and Actions.
设计简单的模板图像来代表你自定义的活动。模板图像使用遮罩来创建图标。使用带有合适透明度和抗锯齿的黑色和白色，不要使用阴影。模板图像应该处于 70px × 70px区域大小的中心。
创建简洁且能够描述任务活动的标题。标题在活动视图中的图标下面展示。短标题效果良好。当一个标题过长的时候，iOS首先会缩小字号，然后要是仍然太长，就会截断它。一般情况下，避免在标题中包含你的公司或产品名字。
确保活动适合当前上下文。尽管系统提供的任务不能在活动视图中被重新排序，但是但他对你的APP不适用时，你可以删除它。例如。为了阻止人们印刷图片，你可以去除“打印”活动。你也可以定义在特定的时间显示哪些自定义任务
使用“操作”按钮来显示活动视图。当人们点击“操作”按钮时，他们习惯于进入系统提供的活动视图。避免提供另一种方式来做同样的事情而让用户感到困惑。
选项页面
用一个页面来展示较多、信息较复杂的选项，类似于全屏对话框，可以采用宫格布局、表单布局等形式，与tables、collection类似。
页面中可以使用排序、搜索等形式。列表和表格的高度可以调整，并且表格可以包含索引，这可以更快地定位列表的一部分。如携程的地址选择页面。
日期选择器（ios旧）
对于选择一个特定日期、时间或者两者同时选择而言，日期选择器是一个高效的交互界面。它还提供了一个显示倒计时计时器的界面。
日期选择
用于选择日期或者时间，包含单个日期选择（餐厅预订、会议日程安排）和范围选择（酒店预订、航班预订等）。分为嵌入、内联式、滚轮式、弹窗/紧凑式。还有一种特殊的为手动输入模式，即文本框（生日）。
内联-可编辑的字段，适合于较小的空间（例如列表或表格行），并展开以显示编辑视图
滚轮—传统的滚轮组。
紧凑—展开后可在模态上下文中显示编辑视图的标签。
日期选择器具有四种模式，每种模式都呈现一组不同的可选值。
日期。显示月份，月份中的几天和年份。
时间。显示小时，分钟和（可选）AM / PM名称。
日期和时间。显示日期，小时，分钟和（可选）AM / PM名称。
倒计时器。显示小时和分钟，最多23小时59分钟。此模式不适用于紧凑型样式。
当空间有限时，请使用紧凑的日期选择器。折叠后，紧凑型样式将显示一个按钮，该按钮以应用程序的主色显示当前值。当人们点击按钮时，日期选择器将扩展为模态视图，从而提供对熟悉的日历样式编辑器和时间选择器的访问。在模式视图中，人们可以对日期和时间进行多次编辑，然后在视图外部轻按以确认他们的选择。
指定分钟数时，请考虑提供更少的分类。默认情况下，分钟列表包含60个值（0到59）。您可以选择增加分钟间隔，只要将其平均分配为60即可。例如，您可能需要四分之一小时间隔（0、15、30和45）。
清晰。清楚地标明重要日，例如当前日期和选定日期。
03-页面级操作
工具栏/底部栏/Toolbars
iOS叫工具栏（Toolbars），安卓叫底部栏（App bars: bottom），主要用来放置与当前页面内容相关的按钮，在需要的时候出现，在不需要的时候隐藏。
工具栏在APP屏幕的底部出现，包含执行当前视图或内容相关操作的按钮。工具栏是半透明的，可能有一个背景色彩，总是在人们看不需要的时候被隐藏。例如在Safari浏览器中，当你开始滑动屏幕似乎开始阅读内容的时候，工具栏会被隐藏。你可以通过点击屏幕底部让它再次出现。当键盘出现在屏幕中的时候工具栏也通常被隐藏。
了解工具栏和标签栏的区别很重要，因为两种类型的栏都出现在应用程序屏幕的底部。工具栏包含用于执行与当前上下文有关的动作的按钮，例如创建项目，删除项目，添加注释或拍照。标签栏使人们可以在应用程序的不同部分之间快速切换，例如“时钟”应用程序中的“警报”，“秒表”和“计时器”选项卡。有关指导，请参见标签栏。工具栏和标签栏永远不会在同一视图中同时出现。
提供有意义的工具栏按钮。工具栏应该包含在当前语义下有意义的常用的指令。
考虑图标或者文字按钮是否适合于你的APP。但你需超过三个工具栏按钮的时候，图标很好用。当你只有三个或更少按钮的时候，文本有时候更加清晰直观。例如，在日历应用中，就是用文本按钮，因为图标可能会让人感到困惑。文本的使用也使得收件箱按钮（ Inbox button）能够展示日历和活动邀请的数量。
避免在工具栏中使用分段控件。分段控件让人们切换内容，而工具栏是特定于当前视图的。如果你需要提供一种方式来切换内容，考虑使用标签栏。See Tab Bars.
给文本按钮留有足够的空间。如果你的工具栏包含多个按钮，这些按钮的文本可能会挤到一起，让这些按钮难以识别。在按钮中间插入固定的空间来增加分隔。
底部栏
Material Design中，底部栏可以包含适用于当前页面上下文的操作。包含左侧的导航菜单控件和一个浮动操作按钮（如果有的话）。
FAB（浮动操作按钮）可以没有，也可以居中放置（主要动作）或者居右放置（返回操作）。
向上滑动过程中，隐藏底部栏（只保留FAB）。向下滑动时，显示底部栏。
当键盘出现时，隐藏底部栏。
与其它组件的配合使用
提示信息（SnackBar）出现在底部栏的Y轴上方，而不是Z轴上方。
顶部栏/导航栏/Navigation Bars
iOS叫导航栏（navigation bars），安卓叫顶部栏（App bars: top）。顶部栏是导航+页面级操作。
顶部栏导航：主要用于纵向深入的导航，如查看详情页面，顶部点击返回按钮即可返回。各页面之间保持一致性。
顶部栏操作：顶部栏提供与当前屏幕相关的内容和操作，可以包含品牌元素、屏幕标题、导航和操作按钮。可以转换为情境化的动作栏。导航可以调出抽屉导航菜单，操作可以使用下拉菜单放置更多的动作。
导航栏可以情境化显示，及根据用户的操作、页面状态的变化来显示不同的内容。
ios的导航栏出现在APP界面的顶部，在状态栏的下方，能够在一些不同层级的页面中提供导航。当加载一个新页面的时候，导航栏的左侧一般会出现一个返回按钮，与前一个页面的标题放在一起。有时候，导航栏的右边会包含一个编辑或者完成按钮的控件，用来管理当前视图的内容。在分屏视图内，导航栏可能只会出现在分屏视图的窗格中。导航栏是透明的，也许会有一个背景色调。而且可以设定在键盘出现、手势发生、视图缩放的时候隐藏。
规则#
可在导航栏中使用 SegmentedControl 对内容进行层级划分。
避免用过多的元素填满导航栏。一般情况下，一个『返回按钮』、一个『标题』、一个『当前视图的控件』就足够了；如果已经有了 SegmentedControl ，一般只搭配一个『返回按钮』或者『当前视图的控件』。
为图标和文字控件，提供更大的点击热区。
安卓规范中，顶部导航栏可以用更大的高度，增加背景图片（不干扰图标识别的前提下）。滚动时可以隐藏导航栏、导航栏高于内容区域、更大高度的导航栏变为正常高度的导航栏。
当全屏展示内容时，考虑暂时隐藏导航栏。当你试图聚焦于内容之上时，导航栏可能会形成干扰。暂时隐藏导航栏可以提供一个更加沉浸的体验。照片应用在全屏浏览照片时，会隐藏导航栏和其它交互元素。如果你采取类似的行为，让人们可以通过一个简单的手势如触击，来恢复导航栏。
tips：当你不需要导航或者需要多样化的控件来管理内容时，使用工具栏。
导航栏标题
可在导航栏中显示当前视图的标题。如果标题非常冗长且无法精简，可以空缺。标题默认左对齐（iOS默认居中对齐）。标题的文本应该简短直白，避免省略显示，必要时可以折行显示。
考虑在导航栏显示当前视图的标题。在大多数的场景下，标题帮助人们理解他们正在浏览的是什么。但是，如果给导航栏命名看起来是多余的，你可以让标题处空着。例如，备忘录不需要当前备忘的标题，因为内容的第一行就提供了所需的上下文信息（context）。
当你想要特别强调上下文信息（context）的时候，使用大标题形式。大标题不会与内容竞争，但是在一些APP中，大而粗的标题文本可以帮助人们在浏览和搜索时确定方向。例如，在选项卡式布局中，大标题可以帮助澄清当前激活的选项，并且在人们需要滚动到顶部时提示他们。电话采用这种策略（使用大标题来强调），而音乐使用大标题来区分专辑、艺术家、播放列表和收银机等不同内容区域。在iOS 13和更新的版本中，大标题不默认包含背景和阴影。同时，当人们开始滚动页面内容时，大标题会转变为标准标题样式。
在大标题导航栏中考虑隐藏边框。在iOS 13和更新的版本中，你可以通过去除导航栏的阴影来隐藏底部边框（边框会在人们滚动内容区域时自动重新出现）。无边框的导航样式在大标题的导航栏中表现良好，因为它增强了标题和内容之间的联系感。但是，在标准大小标题的导航栏中，无边框样式可能效果并不好。因为栏的标题和按钮可能会很难辨别。一个例外是在iPad的分屏视图中，你可能会通过在主视图和详情视图中都使用无边框样式来保持二者之间的连贯性。
导航栏控件
避免放太多控件导致导航栏变得拥挤。一般情况下，导航栏的内容最多包括当前视图的标题、一个返回按钮、一个管理当前视图的控件。如果你在导航栏中使用了分段控件（segmented control），导航栏中就应该除了分段控件外不再包含标题或者其他控件。
使用标准的返回按钮。人们知道在多层级的信息中间，标准的返回按钮可以使他们原路返回。然而，如果你采用了自定义的返回按钮，要确保它看起来像是一个返回按钮，有直观的表现，和你其它的界面相匹配，而且在整个APP中保持一致。如果你是用自定义图片代替了系统提供的V形返回按钮，请同时提供一个自定义遮罩图片(custom mask image)。iOS使用这个遮罩图片来实现转场时的过渡动画。
不要包含多段的面包屑路径。返回按钮总是表明一种单一的动作——回到之前的页面。如果你认为人们在没看到当前页面的完整路径情况下会迷失方向，考虑让你的APP层级更加扁平。
给文本按钮提供充足的空间。如果你的导航栏包含了多个文本按钮，这些按钮的文本可能会重叠到一起，导致按钮无法识别。通过在按钮之间插入固定空间项来增加间距。
当你希望你的APP信息层级更扁平的时候，考虑在导航栏使用分段控件（segmented control）。如果在导航栏使用分段控件，仅仅在信息层级的顶层使用，并且确保在低层级中使用准确的返回按钮标题。For additional guidance, seeSegmented Controls.
04-其它
图片选择/Image lists
一般用于上传图片前的文件选择操作，包含增、删、查的基本功能。数量限定时会有提示。
滑动输入条/Sliders
滑块是一个带有被称为“拇指”控件的水平轨道，你可以用的手指在最大和最小值之间滑动，例如在媒体播放期间屏幕亮度等级或者位置。当滑块值发生改变的时候，最小值和“拇指”控件之间的轨道是被填充的。滑块可以选择性的在左右两边显示图标来描述最大和最小值的含义。
可以选择一个值或者范围。
如果可以增加价值，自定义滑块的外观。滑块的外观，包括轨道颜色、“拇指”图像，以及左右的图标，可以调整以融入你APP的设计并传达意图。例如，调整图像大小的图标，可以在左边展示小图像图标而在右边展示大图像图标。
不要用滑块来调节音量。如果你的APP中需要提供音量控制，使用可自定义的音量视图，包含了音量等级滑块和更改活动音频输出设备的的控件。了解更多关于使用音量视图， see MPVolumeView。
原则
默认状态下，左边为最小值，右边为最大值。
一般水平放置。
提供连续或者间断的值。
色彩选择/Color Wells
轻按时，颜色就会显示系统提供的颜色选择器。人们可以使用颜色选择器为文本，形状，标记工具和其他元素选择颜色。
通过颜色选择器的选项卡式界面，人们可以从网格或光谱中选择颜色，也可以通过选择RGB值来选择颜色。人们还可以通过点击吸管按钮并使用放大镜来选择出现在屏幕上任何地方的颜色，从而选择一种颜色。
最好使用系统提供的颜色选择器来帮助人们选择颜色。使用内置的颜色选择器可以提供一致的用户体验，此外还可以使人们保存可以从任何应用程序访问的一组颜色。系统定义的颜色选择器还可以帮助Mac版iPad应用程序为macOS用户提供熟悉的体验。
步进器/Steppers
用作增加或者减少当前数值。步进器是一个两段式控件，用于增加或减少增量值。默认情况下，步进器的一个段显示一个加号，而另一段显示一个减号。如果需要，可以将这些符号替换为自定义图像。
使受步进器影响的值显而易见。步进器本身不会显示任何值，因此请确保人们知道使用步进器时正在更改的值。
如果可能会出现较大的取值变化，请不要使用步进器。步进器可以很好地进行需要几次轻击的小改动。例如，在打印屏幕上，使用步进器来设置份数是有意义的，因为人们很少对此设置进行太多更改。另一方面，使用步进器来选择页面范围是没有意义的，因为即使合理的页面范围也需要大量的点击。
文章结构
组件库
支付宝移动组件库
Ant Design Mobile | A Mobile Design Specification
Themes - iOS - Human Interface Guidelines - Apple Developer
概述 - Material Design - Material design 中文文档，指南，翻译
https://www.material.io/design/introduction#updates
Vant - Mobile UI Components built on Vue
NutUI - 移动端Vue组件库
Wot Design - 移动端Vue组件库
https://weui.io/
Ant Design Pro
飞冰 - 让前端开发简单而友好
参考资源
Calltoidea - Light up your imagination
Mobile Design Patterns - Pttrns
UI Garage - Daily UI Inspiration & Patterns for Web, Mobile & Tablet.
Unlimited iOS Templates Ready for Commercial Use - UpLabs