windows:Windows/dialog-boxes

出自UXGuide.net

跳转到:导航, 搜索

对话框
Dialog Boxes

目录


“对话框”是让用户执行命令、向用户提问、向用户提供信息或进度反馈的辅助窗口。

Aa511268_Dialogs01(en-us,MSDN_10).png


典型的对话框

对话框由标题栏(用于标识对话框所来自的命令、特性或程序)、可选的主标题说明(以解释用户在该对话框中的目标)、一些位于内容区域的控件(用于呈现选项)及提交按钮(以指出用户如何能够提交任务)组成。

对话框具有两个基本类型:

“任务对话框”是指使用任务对话框 API 实现的对话框。它由下列部分中的全部或部分组成:

Aa511268_Dialogs30(en-us,MSDN_10).png


典型的任务对话框

只要有可能,就推荐使用任务对话框,因为它易于创建且具有统一的外观。你可以使用 TDPad 工具来快速轻松地创建和评估任务对话框。任务对话框需要 Windows Vista® 或更新版本,因此它不适用于早期的 Microsoft® Windows® 版本。

“任务窗格”和对话框很像,除了它出现在窗口的窗格内而不是一个独立的窗口。因此,任务窗格所带来的直接、上下文感比对话框要强。即使在技术上它们不同,但由于任务窗格与对话框如此相近,它们的设计规范都包含在本文中

Aa511268_Dialogs02b(en-us,MSDN_10).png


典型的任务窗格

属性窗口是一类特殊的对话框,用于查看或更改一个或一组对象或程序的属性。另外,属性窗口通常支持多个任务,而对话框则通常只支持单个任务或一个任务中的单个步骤。由于其特殊用途,属性窗口会有另外的一组设计规范

对话框可能包含选项卡,此时则被称为“带选项卡的对话框”。是否为属性窗口是根据其属性的呈现方式来确定的,而不是根据选项卡的使用。

注:布局窗口管理通用对话框属性窗口向导确认信息错误信息警告信息相关的设计规范请参考各自相应的章节。


这样的用户界面是否正确?

考虑下列问题以进行判断:

如果是,则应改用合适的通用对话框。大部分通用对话框是可以扩展的。
Aa511268_Dialogs03(en-us,MSDN_10).png
Aa511268_Dialogs04(en-us,MSDN_10).png
在这些示例中,子菜单用于代替显示简单列表的对话框。


设计理念

如果使用得当,对话框则是为你的程序提供强大功能和灵活性的绝佳方式。如果使用不当,对话框则很容易打扰用户、打断他们的捷足先登、让人觉得程序不够直接而且难以使用。模式对话框需要用户注意。实现对话框比扩展用户界面往往要容易得多,因此对话框很容易被使用过度。

当对话框的设计特点符合它的用途时效率最高对话框的设计在很大程度上取决于其目的(提供选项、提问、提供信息或反馈)、类型(模式或无模式)和用户操作(必选、可选或确认)。其用途在很大程度上取决于上下文(用户或启动的程序)、用户行动的可能性以及显示的频率。

要设计高效的对话框,应当有效地使用下列元素:

最关键的一点:


确保你对话框的设计(由其作用、类型及用户操作决定)符合它的用途(由其内容、用户行动的可能性、以及显示的频率决定)。

更多信息及示例,参见对话框设计理念


使用模式

对话框具有下列使用模式:

更多信息和示例,参见对话框使用模式


设计规范

常规

错误:
Aa511268_Dialogs39(en-us,MSDN_10).png


在这个示例中,Find Certificates(查找证书)是带有菜单栏的无模式对话框。
更多设计规范与示例,参见任务栏


模式对话框


无模式对话框

Aa511268_Dialogs19(en-us,MSDN_10).png
用于 Microsoft Office 的一些无模式对话框是可以停靠的。


多个对话框


多页面对话框

输入页面是可选的,因为该任务可能由其他位置引发。
这么做能够提供稳定、简单、轻量感的最终体验。
Aa511268_Dialogs60(en-us,MSDN_10).png
Aa511268_Dialogs61(en-us,MSDN_10).png


在这个示例中,Windows 网络诊断由进度和结果页面组成。

致开发人员:你可以通过 TDM_NAVIGATE_PAGE 消息创建多页面任务对话框。


呈现

为使对话框易于查找和访问,应当将其明确关联到源,并在多显示器上正常使用:

Aa511268_Dialogs40(en-us,MSDN_10).png
将对话框初始化居中显示在父窗口的上方。
Aa511268_Dialogs41(en-us,MSDN_10).png
对象属性显示在对象的旁边。
Aa511268_Dialogs42(en-us,MSDN_10).png
在这个示例中,Windows Media Player® 在因窗口太小而标准形式不再适用时,改变了它的形式。

更多信息与示例,参见窗口管理


标题栏


交互

当指定顺序时,假设用户打开对话框是为了其本来用途的。也就是说,例如,用户打开选择对话框是为了进行选择,而不是查看和单击取消。


访问键

Aa511268_dialogs18(en-us,MSDN_10).png
在这个示例中,表示正面意义的提交按钮被分配了访问键。

关于更多规范与示例,参见键盘


进度对话框

对于长时间运行的任务来说,应假设用户会在任务进行过程中做其他的事情。将任务设计为无人参与的运行。

Aa511268_Dialogs16(en-us,MSDN_10).png
在这个示例中,即使父窗口关闭,文件也会继续复制。
Aa511268_Dialogs15(en-us,MSDN_10).png
在这个示例中,中止问题诊断程序不会带来任何副作用。
Aa511268_Dialogs62(en-us,MSDN_10).png
在这个示例中,Windows Explorer 使用户在出现可恢复错误后能够继续任务。
Aa511268_Dialogs63(en-us,MSDN_10).png
在这个示例中,文件复制的过程中,可移动磁盘被移除。
不要将通知用于完成时的反馈。使用进度对话框,或者是操作成功通知,不要将两者同时使用。


剩余时间

对于进度条:
如果相关信息是以冒号格式显示的:
Time remaining: h hours, m minutes(剩余时间:h 小时 m 分)
Time remaining: m minutes, s seconds(剩余时间:m 分 s 秒)
Time remaining: s seconds(剩余时间:s 秒)
如果屏幕空间紧张:
h hrs, m mins remaining(剩余 h 小时 m 分)
m mins, s secs remaining(剩余 m 分 s 秒)
s seconds remaining(剩余 s 秒)
否则:
h hours, m minutes remaining(剩余 h 小时 m 分)
m minutes, s seconds remaining(剩余 m 分 s 秒)
s seconds remaining(剩余 s 秒)
对于标题栏:
hh:mm remaining(hh:mm 剩余)
mm:ss remaining(mm:ss 剩余)
0:ss remaining(0:ss 剩余)
该精简格式先显示最重要的信息,以使其不会在任务栏上被截断。
错误:
hh hours, mm minutes, ss seconds(hh 小时 mm 分 ss 秒)
错误:
1 minutes, 1 seconds

更多信息与示例,参见进度条


图标与图形

图形

错误:
Aa511268_Dialogs45(en-us,MSDN_10).png
在这个示例中,大尺寸图形没有任何实际意义。


标题栏图标


主体图标(body icon)

  1. 应基于设计模式选用主体图标:
模式 主体图标
问题对话框 程序、功能、对象、警告图标(如果可能丢失数据或无法访问系统)、安全警告或无。
选择对话框 无。
进度对话框 无(但可以使用动画)。
信息对话框 无。
错误:
Aa511268_Dialogs46(en-us,MSDN_10).png
在这个示例中,警告图标错误地被用于与可能丢失数据或无法访问系统无关的问题。
Aa511268_Dialogs21(en-us,MSDN_10).png
在这个示例中,黄色的星形图标表示收藏夹。该图标很容易识别,而且在整个 Windows 中始终用于表示收藏夹。
Aa511268_Dialogs22(en-us,MSDN_10).png
在这个示例中,对象的图标能够帮助用户识别要打开或保存的文件类型。
Aa511268_Dialogs47(en-us,MSDN_10).png
在这个示例中,这些图标帮助用户将这些功能视觉化。
Aa511268_Dialogs48(en-us,MSDN_10).png
在这个示例中,关于对话框中使用了一个位图来标识和宣传应用程序的品牌。


脚注图标

Aa511268_Dialogs07(en-us,MSDN_10).png
在这个示例中,脚注图标指出该问题会对安全性产生影响。

更多信息和示例,参见图标


提交按钮

注意:


常规

模式 提交按钮
问题对话框(使用按钮) 使用下列简要命令组合之一:是/否、是/否/取消、[做某事]/取消、[做某事]/[不做某事]、[做某事]/[不做某事]/取消。
问题对话框(使用链接) 取消。
选择对话框
  • 模式对话框:确定/取消 或 [做某事]/取消
  • 无模式对话框:对话框及标题栏上的关闭按钮
  • 任务窗格:标题栏上的关闭按钮
进度对话框 如果能退回之前的状态(没有任何副作用)则用“取消”,否则用“停止”。
信息对话框 关闭
例外:
更多设计规范与示例,参见确认信息
错误:
Aa511268_Dialogs20(en-us,MSDN_10).png
在这个示例中,确定按钮错误地居中了。


回应主标题说明

正确:
Aa511268_Dialogs23(en-us,MSDN_10).png
在这个示例中,使用 Yes(是)/No(否)提交按钮以强迫用户至少阅读主标题说明。
正确:
Aa511268_Dialogs23a(en-us,MSDN_10).png
在这个示例中,提交按钮标签中加上了“anyway(仍然)”以表明用户应当仔细进行。
错误:
Aa511268_Dialogs20b(en-us,MSDN_10).png
在这个示例中,OK(确定)被映射为“继续”,Cancel(取消)被映射为“留在该页面”。


是否按钮

错误:
Aa511268_Dialogs56a(en-us,MSDN_10).png
正确:
Aa511268_Dialogs56b(en-us,MSDN_10).png
更好:
Aa511268_Dialogs56c(en-us,MSDN_10).png
在这些示例中,“是”和“否”对于是非问句来说是好的回答,但有针对性的回答则更好。
错误:
Aa511268_Dialogs49a(en-us,MSDN_10).png
正确:
Aa511268_Dialogs49(en-us,MSDN_10).png
在错误示例中,针对性的表述太长,正确的示例则使用了“是”和“否”。


确定按钮

错误:
Aa511268_Dialogs50(en-us,MSDN_10).png
在这个示例中,OK 应当被改为 Close。


取消按钮

错误:
Aa511268_Dialogs51(en-us,MSDN_10).png


在这个示例中,仅在标题栏上有一个关闭按钮看起来似乎用户没有选择的余地。
错误:
Aa511268_Dialogs52(en-us,MSDN_10).png
在这个示例中,错误地用“确定”和“取消”按钮来回答是非问题。


关闭按钮


应用按钮

错误:
Aa511268_Dialogs53(en-us,MSDN_10).png
在这个示例中,选项对话框中存在多余的“应用”按钮。


间接对话框的提交按钮

注:间接对话框是脱离上下文出现的,要么是某任务的间接结果,要么是系统或后台进程出现了问题而导致的。对于间接对话框来说,“取消”按钮存在歧义,因为它既可以表示取消该对话框,也可以表示取消整个任务。

正确:
Aa511268_Dialogs31(en-us,MSDN_10).png
在这个示例中,如果 Windows 画图中的图像未保存时执行了“新建”或“退出”命令的话,则会显示该对话框。“Don't Save(不保存)”则不进行保存并关闭对话框,而“Cancel(取消)”则取消的是“新建”或“退出”命令。
错误:
Aa511268_Dialogs31a(en-us,MSDN_10).png
在这个示例中,没有办法取消显示该对话框的任务(关闭 Office 快捷方式栏)。该对话框需要一个“取消”按钮。
Aa511268_Dialogs24(en-us,MSDN_10).png
在这个示例中,该对话框是因为访问了要安装 ActiveX 控件的网页而间接显示的。使用“取消”可能会产生歧义,因而改用“Don't run(不运行)”。

更多信息和示例,参见命令按钮


命令链接

Aa511268_Dialogs11(en-us,MSDN_10).png
在这个示例中,补充说明描述了该选项的影响。
错误:
Aa511268_Dialogs25(en-us,MSDN_10).png
在这个示例中,对话框使用命令链接来代替“取消”按钮。

更多信息和示例,参见命令链接


不要再显示此 <项>

错误:
Aa511268_Dialogs55(en-us,MSDN_10).png
在这个示例中,该消息应当仅显示一次,没有问的必要。

更多信息,参见设计理念中的使用“不要再显示该 <项>”选项


稍候询问

错误:
Aa511268_Dialogs58(en-us,MSDN_10).png


在这个示例中,该问题非常简单,加上“Ask me later(稍候询问)”选项只会让它变得更复杂。


更多/更少

Aa511268_Dialogs24(en-us,MSDN_10).png
在这个示例中,极少使用的选项在默认情况下是隐藏的。


脚注

Aa511268_Dialogs26(en-us,MSDN_10).png
在这个示例中,脚注信息是补充性质的,而非必要的。


禁用或移除控件 vs 给出错误信息


必填项

当必填项数量不多时,该方式较为适用,但如果大多数都是必填项则不太合适。
Aa511268_Dialogs26a(en-us,MSDN_10).png


在这个示例中,星号用于标识必填项。


错误处理

Aa511268_Dialogs27(en-us,MSDN_10).png
在这个示例中,气球状提示指示控件中的输入存在问题。
Aa511268_Dialogs27a(en-us,MSDN_10).png
在这个示例中,就地错误信息用于单击提交按钮所发现的错误。

更多信息和示例,参见错误信息气球状提示


帮助

Locate Help links at the bottom of the content area of the dialog box. If the dialog box has a footnote and the Help link is related to it, place the Help link within the footnote.
Aa511268_Dialogs11(en-us,MSDN_10).png
In this example, the Help link applies to the entire dialog.

For more information and examples, see Help.


Default values

Aa511268_Dialogs29(en-us,MSDN_10).png
In this example, users are most likely to choose the same printing settings as they did last time. However, the number of copies desired is likely to change, so this setting isn't reselected.


推荐尺寸与间距

Windows with dynamic content and lists benefit the most from resizable windows.


Text

General

Correct:
Do you want to enable file and printer sharing?
Incorrect:
Do you want to disable file and printer sharing?
However, phrasing must match the associated command, even if the command is negatively phrased; so, for example, use disable to confirm a Disable command.
Examples:
Choose the pictures you want to print
Choose an account
Example: Print the photos on my camera.


Dialog box titles

"66% Complete," and "3 Reminders."


Main instructions

Acceptable:
Aa511268_UIText14(en-us,MSDN_10).png
In this example, the text box label is just a restatement of the main instruction.
Better:
Aa511268_UIText13(en-us,MSDN_10).png
In this example, the redundant label is removed, so the main instruction takes the access key.


Supplemental instructions


Command links

For more information and examples, see Command Link guidelines.


Commit buttons


Documentation

When referring to dialog boxes:

Example: In Windows Security, click More Options.

导航
工具箱