Controls - Buttons

原文在这里 Buttons

iOS15对Button System做了不少的改动，如果你不了解这部分内容的变化的话，可以参考WWDC 2021的这个Session：
Meet the UIKit button system

掘金上这篇文章是上面视频的介绍，写的不错，可以作为看完视频后的复盘：
WWDC 2021 - Meet the UIKit button system

看出来，苹果在Button上花了不少功夫，现在系统提供的Button基本上能满足我们的所有需求了，所以，可能以前用的一些UIButton的第三方类库，Category可以考虑去掉了。

阅读的思路，大概是依据按钮的分类（ 普通系统按钮/Toggle Buttons/Pop-Up Buttons/Pull-Down Buttons/Close Button/Common Button Types），总结了系统提供的基本功能，以及在设计过程中的规范建议。下面就按这几个分类来描述。

普通系统按钮

系统提供了4中风格的按钮，每种有三种大小，可以通过UIButton.Configuration来进行设置

截屏2021-11-16 下午8.25.41.png

按钮的角色

• Normal：没有特殊含义
• Primary：默认按钮，也就是用户最有可能选择的按钮
• Cancel：取消按钮
• Destructive：按钮会执行数据删除等操作，例如删除文件，或者注销账户等不可逆操作。

规范建议

• 创建的Button必须语意清楚，让用户知道按钮具体是做什么用的。
  - 建议使用有相同语意的图标（推荐使用SF Symbols）
  - 建议使用title-style capitalization风格的动词作为标题，例如“Add to Cart” （添加到购物车）

• 添加有意义的副标题（对的，现在支持副标题了，而且可以调整图标，主/副标题的间距了），例如对于“Add to Cart”按钮，可以添加目前购物的总金额作为副标题。

• 如果点击按钮后需要等待，请显示activity indicator （对的，iOS15现在按钮也可以直接显示activity indicator了）

  
  截屏2021-11-16 下午8.20.41.png

• 为用户最有可能使用的按钮使用filled风格

• 推荐使用风格，而不是按钮的大小，来从视觉上区别更推荐用户进行选择的按钮

  
  截屏2021-11-16 下午8.23.41.png

• 为用户最有可能使用的按钮设置为Primary角色

• 执行危险性操作的按钮，绝对不要设置为Primary角色

Toggle Buttons

Toggle Buttons类似Switch Button，但他没有提示内容，并且通过颜色色调来显示。

截屏2021-11-16 下午8.36.49.png

规范建议

• 使用Toggle Buttons来帮助管理内容或视图的状态，上图就是在显示/隐藏事件之间切换。
• 必须要有明显的切换对比。例如上图除了Toggle Buttons的颜色变化之外，对应的视图背景也做了相应的变化。

（说实话，我觉得这个例子不明显，这种类型的按钮语意有点不清楚，我是不推荐使用）

Pop-Up Buttons

弹出按钮可以显示互斥选项的菜单。当用户从弹出按钮的菜单中选择一个项目后，菜单关闭，按钮可以更新其内容以指示当前选择。

截屏2021-11-16 下午8.44.52.png

• 使用弹出按钮显示互斥选项。如果您需要提供操作列表、让人们选择多个项目或提供子菜单，请改用Pull-Down Buttons

• 显示有用的默认选择。

• 当空间有限且您不需要一直显示所有选项时，请考虑使用弹出按钮。[分段控件]也提供一组互斥选项，但它通常比弹出按钮需要更多空间，因为它始终显示每个项目。

Pull-Down Buttons

下拉按钮显示与按钮用途直接相关的项目或操作菜单。当人们在下拉按钮的菜单中选择一个项目后，菜单将关闭并且您的应用程序执行所选的操作。人们还可以通过点击屏幕上的其他地方来关闭菜单而不选择项目。与弹出按钮不同，下拉按钮始终显示相同的内容，无论人们选择什么菜单项。

截屏2021-11-16 下午8.48.04.png

规范建议

• 使用下拉按钮显示与按钮操作直接相关的项目，例如：
  - 添加按钮可以显示一个菜单，让人们指定他们想要添加的项目。
  - 排序按钮可以使用菜单让人们选择要排序的属性。
  - 后退按钮可以让人们选择一个特定的位置来重新访问，而不是打开上一个。

• 避免将视图的所有操作放在一个下拉按钮中。主要的操作，用户经常使用的操作，不建议放在下拉按钮中。

• 考虑使用“更多”下拉按钮来呈现不需要在主界面显眼位置的项目。要设计一个有效的“更多”按钮，请权衡其大小的便利性与其对可发现性的影响，以找到适用于您的应用程序的平衡。

除了用于查看和排序内容的选项外，文件还使用更多下拉按钮提供操作（例如添加文件夹或扫描文档）

• 菜单使用红色文本突出显示您认为具有潜在破坏性的操作。

• 使用分隔符在下拉按钮的菜单中直观地对相关项目进行分组。

• 在提供值时包含带有菜单项的字形。

• 一般情况下，不应该再添加菜单的subTitle，因为按钮和菜单项应该可以准确的描述用户所需要知道的内容。

• 如果子菜单使主菜单更易于理解和使用，请考虑使用它。（对的，就是二级菜单）

截屏2021-11-16 下午9.04.16.png

Close Buttons

关闭按钮关闭其父视图，一般在视图的顶部尾随角显示关闭按钮。

截屏2021-11-16 下午9.08.02.png

建议使用UIButton.ButtonType.close，不要再自定义关闭按钮了。

规范建议

• 在一个视图中，提供一个关闭按钮或一个完成按钮——不要同时提供。Close 和 done 按钮都关闭视图，但因为它们不是相反的操作，所以提供这两个按钮会带来令人困惑的选择。通常，当人们可以在视图中进行更改时使用完成按钮——在这种情况下，您可能还想添加一个取消按钮，让人们在关闭视图时明确放弃他们的更改。关闭按钮并不表示它保存或放弃更改，因此它适用于人们无法编辑的视图，或者人们可以从一组视图中删除的视图。

截屏2021-11-16 下午9.10.34.png

常用按钮类型

人们会立即识别出几种特定的按钮类型，因为这些按钮在整个系统中的行为都是一致的。例如，信息按钮始终显示与当前上下文或视图相关的详细信息。

规范建议

• 如果您创建的按钮看起来像人们熟悉的普通按钮，请确保该按钮的行为符合他们的预期。
  - 例如，如果您创建一个使用 plus.circle SF 符号的按钮，人们希望它可以让他们将项目添加到当前视图。
  - 在按钮中使用 info.circle 符号将其标识为信息按钮。

• 在列表或表格行中，使用信息按钮仅显示有关该行内容的更多信息。如果您需要让人们深入到列表或表格行的子视图中，请使用显示指示器附件控件

  
  截屏2021-11-16 下午9.10.34.png