加载中

Robin

关于Action Sheets & Alerts

2016/10/19 · 8 min read

最近在整理同事的交互文档时,发现对于应用的二次确认以及选择使用的交互控件不是特别到位,下面我把iOS中对这两个控件的使用指南进行了一下翻译整理:

Alerts(警告)

警告是非常重要的提醒,一般是关系到应用或设备的某个状态或者模式需要您进行确认操作时使用。

一个警告弹窗由警告的标题,可以可选的信息,一个或者多个按钮选项,以及选项的文字用于收集输入。这是一个可配置的控件,如图下控件,其视觉效果是固定的不能自定义。

Minimize alerts(最小化警告) 警告打断了用户的体验所以应该只是特别重要的情况,像「确认购买」、「毁灭性操作」(像删除)、或者提醒用户遇到问题。极少的使用警告弹窗,让用户严肃认真对待,确保每一个警告弹窗提供重要决定性信息和有帮助的选项。

测试两种警告的出现方式 一个警告可能出现在横屏模式或者竖屏模式。优化文字在一个方向阅读,不要使警告的内容无需滚动。

Alert Titles and Messages(警告的标题和消息)

**尽量简短,叙述,多字警告提示。**更少的文字人更好在一个屏幕中阅读,尽量避免额外的信息消息,因为单个文字标题极少提供有用的信息,可以考虑用提问或者短句。只要有可能,保证标题是单行,使用完整的句子句子风格的大写和相应的标点符号。不要用句末标点的句子片段。

**如果你一定要提供消息,尽量写短并完整的句子。**试图保证消息短并且最好1行或者2行且不需滚动,句式采用合适的大小写及标点符号。

**不要让用户感觉苛刻或者被指责。**人们知道警告弹窗会在出现问题和危险情况时提醒他们,只要你用友好的语气,这会比直接否定更积极并带引导性。避开使用代词,像「你,你的,我,我的」这类一般像责怪用户的口气。

无需解释警告按钮。 如果你的警告文字和按钮标题是清晰的,那么他们是不需要解释的,很少有按钮需要你去指导的,按钮文字需要注意大小写,且不要用引号包住按钮中的文字。

警告的按钮

**一般的警告弹窗用两个按钮。**警告中提供两个按钮提供了更简洁选择。单个按钮的警告弹窗,并不能给用户掌控局势的感觉。警告中包含三个或者三个以上的的按钮,甚至需要滚动,这是体验非常不好的,如果你发现你的需求包含两个或者两个以上的选择,考虑用action sheet。

**提供简洁且符合逻辑的按钮文案。**最好的按钮文案由描述操作结果的一个或者两个文字组成。正如所有的按钮文案一样,文案请使用大写,且不能以标点符号结尾。在可行的范围内,使用与警告标题及信息相关的动词或动词短语。例如,查看全部,回复,或者忽略,使用「好」是最简单的接受方式,避开使用「是」和「否」。

**按钮的位置是用户期望的。**一般来说用户更希望点击的按钮应该摆放在右侧,「取消」按钮总会摆放在左侧。

**适当的使用取消按钮,**一个取消警告提示的按钮应该总是有的,而且一般用文案是「取消」。

**辨识毁灭性的按钮,**如果一个警告中的按钮带有毁灭性的操作后果,像删除内容,将这类破坏性的按钮使用适当的样式。为了实施细节,你可以参考UIAlertAction中的UIAlertActionStyleDestructive。另外,提供「取消」按钮,所以用户可以安全地退出破坏性操作,保证「取消」按钮默认加粗的。

**允许使用home键关闭警告弹窗。**点击home键,当警告提示将会退出,它应该与点击取消按钮的效果一样,警告提示将退出没有其它操作的,如果你的警告没有「取消」按钮,考虑实施一个取消操作在你的代码实现home键取消。

出处:https://developer.apple.com/ios/human-interface-guidelines/ui-views/alerts/

Action Sheets

一个sheet是弹窗的一种样式,出现在两个或者以上的选择的实际场景。用一个sheet 让用户开始任务,或者在使用破坏性操作前请求确认。在小屏幕中,sheet从底部弹出。在大屏幕中sheet出现会像popover.

**提供一个取消按钮,提高清晰度。**一个取消按钮应该在用户放弃任务时,提供信心。取消按钮应该总是被放在sheet的底部。

**让破坏性操作更加突出。**让破坏性操作或者危险的操作的按钮文字设为红色,同时让该操作置于sheet的顶部。

**避开让sheet中使用滚动,**如果一个sheet有太多的选项,用户一定会试图滚动看所有的选项,滚动需要额外时间做一个选择,很容易不经意点击到一个按钮。为了实施细节,你可以参考UIAlertController中的UIAlertControllerStyleActionSheet。

出处:https://developer.apple.com/ios/human-interface-guidelines/ui-views/action-sheets/

相关文章