iPhone界面-警示框、控件列表和模态视图

使用方法和行为

警示框、控件列表和模态视图迫使用户点击按钮之后才能继续使用程序,尽管它们时常警告用户潜在的危险或者提供额外的选择,也要避免过度使用,原因在于:

  • 所有类型的模态视图都会打断用户的工作流。
  • 需求确认或者承认视图的频繁出现更让用户厌烦。

尤其是当警示框出现太频繁时,用户会直接关闭它们,而不是阅读警示框上的文字并在考虑之后点击按钮。

  • 警示框提示程序的重要信息。警示框的出现通常很意外,因为它们一般告知用户需要当前程序上出现的问题或者改变采用行动。
  • 控件列表提供用户更多可选择的控件。当点击工具栏上的按钮即不是破坏性操作(如删除已拨电话),也不是完成多步骤操作时(如发邮件),用户期待界面上会出现控件列表。
  • 模态视图在当前任务情境中提供更多的功能,也可以直接执行和用户工作流有关系的子任务。

警示框的应用

突然在界面中间弹出并浮在界面上的警示框能明显地提示用户一些关键信息。警示框的外观强调其出现是由于程序和设备的改变而引起的,但不一定归咎于用户最新的操作,警示框上文字解释当前的状况并引导用户完成操作。

使用警示框告知用户任务被阻止是很重要的,而且要提供可选择的方法去处理警示框。警示框可以给予用户两个按钮,接受或者拒绝潜在的危险,也就是关闭警示框并执行命令或者关闭警示框并不执行命令(通常为“取消”按钮)。请谨慎使用警示框,并保证每个警示框提供关键信息和有效的选项。一般而言,避免创建以下形式的警示框:

  • 更新用户的正常进度的任务。而应该使用进度条或者活动指标来提供进度上的反馈给用户。
  • 对于用户启动的行为进行询问确认,应该使用控件列表去确认用户启动的命令,甚至是潜在的危险命令,如删除联系地址。
  • 告知让用户束手无策的错误或者问题。尽管告知用户无法处理的关键性问题是有必要的,但如可能,最好将信息合并在界面上。例如,与其告诉用户链接服务器每次都失败了,不如显示最后一次链接成功的时间。

警示框的设计

警示框的文字、按钮的数目和按钮上的内容都可以自定义,但其背景不可以改变。对于用户而言,在两者之间做出选择是最容易的,警示框上的按钮数目最好也是两个,如使用单个按钮,用户将没有选择的余地。因为用户有时并不仔细阅读警示框上文字就进行操作,所以要高亮右边的按钮作为默认选项。比如点击“取消”按钮可以避免无意操作而执行危险的命令,如果不是破坏性的操作,可以执行最普遍的操作。

设置警示框上的按钮的方法:

  • 警示框上有两个按钮时,左边的按钮通常使用深色,而右边的按钮从不使用深色。如操作有潜在危险时,“取消”按钮应该在右边并使用浅色;如操作没危险时,“取消”按钮应该在左边并使用深色。
  • 警示框上有一个按钮时,按钮使用浅色。

上文提到用户有时不会仔细越多警示框上的文字,所以文本内容和标题必须简明扼要,有时,描述状况或者事件的标题就足够了。但也不要创建无法传达有效信息的单词类标题,比如“错误”,作为标题无法告知用户为什么会出现警示框。事实上,在任何界面上都尽量避免出现“错误”字样并描述实际情况。如果使用了同样的标题,而警示框是由不同原因触发时,就需要增加句子或者信息去提示用户更为详细的信息。如果标题对于信息的传达并没有任何帮助时,可以将标题去掉。

控件列表的应用

控件列表集合了通过点击而启动任务的选择性按钮,通常应用在:

  • 提供完成任务的多个可选方式。例如在拍照功能中,控件列表提供发送照片的三个目的地。
  • 在完成具有潜在危险的任务之前获取确认。例如,根据邮件设置,点击工具栏上的垃圾箱按钮,通过控件列表删除邮件或者取消删除。

控件列表的设计

控件列表的背景须和程序界面相协调,按钮的数目可以自定义,作为用户操作(如点击删除或者发送按钮)的的结果,所以无需像警示框一样加上文字说明。

如果操作具有潜在的危险,比如删除所有的购物列表,应该使用红色的按钮提醒用户,而且要将这样的按钮放在控件列表的顶部:

  • 顶部的按钮,视觉更明显。
  • 有时用户在试图点击“Home”按钮时,意外地触发了控件列表,将有危险性的按钮放在底部会增加误操作的概率。

可以在控件列表上设置多个按钮,但要确保每个按钮都容易辨认。

模态视图的应用

模态视图默认从界面底部滑出并占据整个界面,并短暂地显示与之前不同的界面,直到用户完成某项操作。

模态视图完成和程序主功能有关系的独立任务,尤其适合于主功能界面中欠缺的多级子任务。例如撰写新邮件时的模态视图,包含了地址和消息文本、输入光标、取消和发送按钮。

模态视图的设计

标题通常定义了模态视图的类别,也可以加上和任务或者导向有关的文字描述。比如短信程序包括了导航栏、标题“新短信”、取消按钮和文本输入区域。

为了让用户意识到模态视图是过渡性的操作,可以指定以下切换方式:

  • 竖向移动。模态视图从屏幕的底部滑进滑出。
  • 翻转。当前界面切换到模态视图时从右到左翻转,视觉上看起来模态视图好像在当前界面的背面。

为了让用户易于发现和记住,最好使用风格统一的翻转方式。

http://daichuanqing.com/index.php/archives/855

posted @ 2010-09-05 17:09  周宏伟  阅读(1577)  评论(0编辑  收藏  举报