iOS12界面设计指南之视图(Controls)–按钮(Buttons)

引自《iOS12界面交互设计规范(iOS 12 Human Interface Guidelines)》

 

按钮用以启动应用程序的特定操作,具有可定制化的背景,并且可以包含标题或图标。系统为大多数用例提供了预定义的按钮样式。但应用同样也可以去设计完全自定义化的按钮。

系统按钮
系统按钮通常出现在导航栏和工具栏中,但可能在任何地方使用。

在标题中使用动词(Use verbs in titles. )一个特定于动作的标题可以表明按钮是可交互的,并且会告诉用户当其点击按钮时会发生什么。

使用标题格式命名标题(Use title-case for titles. )除冠词、并列连词和四个或几个字母的介词外,大写每个词。

标题要尽可能短(Keep titles short. )过长的文本会使你的界面显得拥挤,并可能在较小的屏幕上被截断。

考虑只有在必要时添加边框或背景(Consider adding a border or a background only when necessary.)默认情况下,系统按钮没有边框或背景。然而,在某些内容区域,表示交互的边界或背景是必要的。比如在电话应用程序中,按数字键加强了传统的打电话模式,而呼叫按钮的背景提供了一个醒目的目标,很容易点击。

详情展开按钮

一个详情展开按钮用以打开一个视图,且通常是一个模式视图,包含与屏幕上的特定项目相关的附加信息或功能。虽然可以在任何类型的视图中使用它们,但在表中通常使用详细信息提取按钮来访问有关特定行的信息。

在表中适当地使用详情展开按钮(Use Detail Disclosure buttons appropriately in tables. )当表中有详情展开按钮时,单击按钮会显示附加信息。点击别处则选择应用程序自定义的行为或结果。如果你想让人们点击整行查看更多的细节,不要使用详细的显示按钮。相反,使用一个细节披露附件控件。

信息按钮

一个信息按钮显示了一个应用程序的配置细节,有时在当前视图的后面,在翻转视图周围。信息按钮有两种风格:明亮和黑暗。选择最适合你的应用程序设计的风格,使用户不要在屏幕中感到困惑。

添加联系人按钮

用户可以点击“添加联系人”按钮浏览现有联系人列表,并选择一个用于插入文本字段或其他视图的列表。例如,在邮件中,可以单击消息的“发送至”字段中的“添加联系人”按钮以从联系人列表中选择收件人。

除了添加联系人按钮,也应该同时允许用户使用键盘输入(Allow keyboard entry in addition to the Add Contact button. )“添加联系人”按钮提供了替换联系人信息的另一种形式,而不是直接的替代。可以将它作为添加现有联系人的快捷方式,但也应该可以让用户通过键盘输入联系人信息。