交互设计实例:浅析windows系统对话框规范

文章描述:对话对话框—浅析windows系统对话框规范 .

“对话框”是让用户执行命令、向用户提问、向用户提供信息或进度反馈的辅助窗口。对话框由标题栏(用于标识对话框所来自的命令、特性或程序)、主标题说明(以解释用户在该对话框中的目标)、一些位于内容区域的控件(用于呈现选项)及提交按钮(以指出用户如何能够提交任务)组成。典型的对话框形式如下图1所示:

(图1)

在Windows操作系统中运行的软件应该遵照Windows UX规范。但目前主流的很多客户端软件并未完全遵照Windows UX规范,并且发展出了较多新的表现形式(也就意味着不符合Windows规范),也渐渐被人们所接受。尽管Windows UX规范并非评价对话框优劣的标准,但一些违反Windows UX规范的对话框的形式也势必会给交互体验上造成一定不良影响。以下将基于Windows UX规范针对客户端软件对话框进行解析。

1、标题

标题是用来表示对话框所来自的命令、特性或程序。通常以名词形式出现。命令形式以冠以“确认”“提示”的用法最为常见,其具有明确的任务导向,如图2,图3所示。特性主要是指类似于“设置”“属性”等作为标题。以程序名称作为标题形式,表示了对话框的出处,如图4所示。在标题形式中,并不提倡简单地使用“提示”作为标题。如图5所示。

(图2)

(图3)

(图4)

(图5)

2、主标题说明

主标题说明文本应使用显著的主标题说明来简要解释对话框需要做的事情。说明应当是明确的陈述句、祈使句式的指导,或是疑问句。文本应顶格左对齐,在有图标的情况下,以图标左对齐。如图6所示。主标题说明文本是陈述句的话,在末尾使用句号。如果说明文本是问句的话,则需要在末尾添加问号。对于进度对话框,应当使用动名词短语来简要地说明正在进行的操作,并以省略号结尾。例如:“正在打印图片…”。必要时,可以使用补充说明来提供额外的有助于理解或使用对话框的信息。补充说明用于详细解释主标题说明,而不是简单地换个说法(如图7所示)。如果主标题说明只会导致重复或者在上下文中显而易见的话,则不要硬是加上主标题说明。

顺带提一下,对于主标题说明中的人称问题,使用“您”为尊称,表达了软件作为工具的谦逊。也有人从平等的角度来将人称命为“你”亦可。

(图6)

(图7)

3、图标

对话框上的图标可分为两种,一种是程序、特性、对象图标。还有一种是标准图标。程序、特性、对象图标能帮助用户从视觉上认出程序的功能,或者是帮助用户识别问题中的对象,使用图标也能使功能具备自描述性。如下图8所示。

 

(图8)

标准图标有如下四种,错误图标、警告图标、信息图标和帮助图标,其说明和使用场景见图9。只有关键错误和警告才能使用错误图标和警告图标,用户需要一目了然地辨别信息的性质以及他们响应的后果,因此我们必须区分关键和非关键错误和警告。

关键错误和警告具有下列特征:(1)丢失重要的资料,如财务或其他数据。(2)无法访问系统或系统受损。(3)泄露隐私或失去机密信息的控制。(4)用户时间(大量时间,例如30 秒或是更多等)。(5)其后果不可预料。(6)需要立即采取正确措施,因为问题无法被轻易修复,而且很可能无法恢复。

对于错误图标和警告图标的区分使用主要界定点为错误是否已经发生,对发生的错误或问题使用错误图标,对在未来可能引发问题的情形使用警告图标。

(图9)

常见的图标错误使用有如下几种情况:

1)滥用错误图标和警告图标

对已经造成的错误应该使用错误图标。不严重的提示信息,应不使用警告图标。图10左右两图分别皆为警告图标错误使用。图11为错误图标使用错误。

(图10)

(图11)

2)滥用信息图标和帮助图标

信息图标并不在对话框中使用。帮助图标往往被作为疑问图标来用。对于用户来讲在对话框中将问号作为帮助图标来用并不常见,相反用问号来表示疑问却深得人心,也广受中国软件人的喜爱,包括微软的Office软件也这么使用。已经无法划清其对错的界限。

(图12)

3)非标准图标的使用

非标准图标的使用,这种情况下不能说它错。只能说是图标发展的一种多元化。大家都认可的图标所表达的含义,并且图标能很好的传达意思。这两点的具备已经足够说明这个图标的可存在性。如图13所示。

(图13)

4、提交按钮

常见的提交按钮的使用情况如下图14所示。

(图14)

规则并不一一罗列,选取关键的几条:

1),提交按钮向右对齐排成一行,置于对话框底部。应当以下列顺序呈现提交按钮:确定/[做某事]/是 、[不做某事]/否 、取消 、应用(如果有的话)、帮助(如果有的话)

2),对于主标题文本内容为“您确定要……吗”的句式的问题对话框,可使用“确定”“取消”组合,亦可以直接使用“是”“否”组合。但不要使用“确定”和“取消”来回答是否判断问题。除了上述情况外,“确定”“取消”组合时,“确定”的含义等同于“提交”,并且可更换为“提交”、“打开”等。如图15为错误例子。

(图15)

3),不要为错误或警告信息使用“确定”按钮,应当改用“关闭”。如图16所示,出了问题一点也不 OK。应当改用“关闭”。

(图16)

同时若只是一些信息的呈现,也应该使用“关闭”,而不是“确定”。图17为Microsoft Office Word中的对话框,其使用了“确定”。然而特别是在中文语境中“确定”与“OK”的差异还是很大的,用“确定”表示“哦,我明白了”似乎也么有觉得不妥的地方。

(图17)

4),关于提交按钮焦点。由用户启动的对话框在显示时应当始终具有输入焦点。由程序启动的对话框则不应具有输入焦点,因为用户可能正在操作其他窗口,这种因对话框误导的操作可能会产生非预期的结果。同时将起始输入焦点赋予用户最有可能首先操作的控件。 这往往是(但并不总是)第一个交互控件。

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

如果用户需要将取消对话框和取消任务两个命令分开,应当提供取消按钮,将“取消对话框”的按钮标注为主标题说明的否定回答,将“取消整个任务”的按钮标注为“取消”,如图18例。在该图中,是用户点击关闭时出现的对话框,该对话框即为间接对话框,是一个与关闭没有直接联系的对话框。“不保存”的含义是关闭画图不保存。“取消”的含义是取消整个任务,即取消关闭。

如果用户只是需要取消对话框而非整个任务的话,应当使用明确针对主标题说明的否定回答按钮,并不需要“取消”。如图19例。该对话框是在安装程序时系统自动弹出的对话框,此时放置“取消”按钮的话其功能与“don’t run”重合。

这两者之间的差别关键点在于是否需要将取消对话框和取消任务两个命令分开。一个是用户自主触发的,一个是系统响应的。

(图18)

(图19)

在对话框的使用中,我们鼓励对话框窗体使用系统自带模式,其在各系统上的自适应性可减少界面UI定制所带来的复杂。

话说回来,不论遵循Windows UX规范也好,不遵循也罢,符合用户习惯并具有良好的交互体验才是判断对话框优劣的最佳标准。

更多内容参见http://www.uxguide.net/wiki/windows:Windows/dialog-boxes

上文仅为个人理解,有不妥之处,还请大家不吝指教。

感谢enno、喵喵对本文的贡献!

时间: 2024-10-28 17:06:21

交互设计实例:浅析windows系统对话框规范的相关文章

产品交互设计实例:首都机场的点烟器

文章描述:产品交互设计实例:首都机场的点烟器. 首都机场的吸烟室里并不像其他机场那样放几个固定的打火机,而是点烟器,和车载点烟器基本是一样的:先按下加热,加热好后,它会自动弹起,拔出来,里面的电阻丝已经是红红的了,就可以点烟了.上图为车载点烟器,与首都机场的点烟器一样,加热过程中只是被按下去了,未显示进度,也未能形象的表现出"正在加热"的含义. 我走到点烟器的近前,按下,让它加热,然后等待,等了一会儿还不见动静,不知是仍在加热还是出了故障.吸烟室里很多人,感觉自己被别人看着,不会用这玩

网站交互设计实例:正确的引导赢得用户的忠诚

文章描述:网站交互设计实例:正确的引导赢得用户的忠诚. 网站上,用和主色调对比很强的颜色或质感很强的按钮吸引用户进行操作,从而促成交易,或浏览相关重要信息. 正确的引导,符合了人机工程原理,优化了用户体验,给用户以易用.互动性.从而使网站给用户留下了美好印象,用户倍感温暖,加大了第二次访问的可能性. 那么反之,不正确的引导--误导,会是一种什么情况.笔者上周曾去南京一趟,便在沪宁城际高铁常州站站台遇到了误导. 笔者是高铁5号车厢,可是在其旁边不远却有一个有明显的动车13号车厢,该标志很明显很清晰

交互设计实例:网易邮箱极速3.5版本设计

网易邮箱极速3.5版本历时半年多时间终于与大家见面了. 极速3.5有哪些新特性: 整齐,简洁的首页,能够自适应屏幕的大小提供最佳的显示方式. 一体化侧栏设计,功能更加集中,查找使用更方便. 全新的图标设计,读信时信头信息可以最小化,让你获得更大的阅读空间. 我们做了些什么: 无数次的交互,视觉的讨论和用研的验证. 产出效果图,超过200张. 制定了1套"视觉设计规范",和1套"交互控件规范". 简略讲讲各阶段所做的一些事情: 用研阶段: 极速3.5用研主要做的工作有

交互设计实例:电商B2C优惠券选择需求

文章描述:B2C站购物流程中优惠券的交互设计优化方案. 我们在互联网上经常买东西,也会经常收到优惠券,最近有空做了一个小调研,在一个网站上,有30%的用户拥有超过10张的生效优惠券,但是,当我们使用优惠券的时候,我们发现一个问题,很多网站在购物结算页面只能显示10张优惠券,那么,如果多于10张优惠券后,我们怎么选择使用呢? 我模拟一个用户,当我去一家超市,我购买了很多或者单件商品后,我发现我包包里有N张优惠券,我开始纠结了,我该使用那张呢?于是,我开始翻包里的优惠券,看看哪张快过期了,哪张是我这

移动交互设计实例:触摸屏手机输入交互设计

文章描述:触摸屏输入的交互设计. 触摸屏手机输入时会在界面绘制虚拟键盘,用于输入字符,可以使用在所有应用程序中.特别是在短信和邮箱等需要频繁输入文字时,其输入速度直接影响用户操作效率. 缺点 但是同样全键盘输入,触摸屏没有物理按键效率高,原因在于: 1.输入法需要定位手指的位置,比如双手操作电脑键盘时,左手食指中指定位在F键,右手中指定位在J键,而触摸屏无法像按键的凸点或者输入感觉定位,难以形成高效的盲打. 2.触摸屏本身点击没有物理按键精准,触摸屏点击目标区域没有真正点击到目标区域,偏向目标正

交互设计实例:触摸屏手机信息连接和翻页的设计

文章描述:触屏手机网站-炫版交互设计. 触屏手机网站和非触屏手机网站区别在于,前者使用手指点击注重点击体验, 而后者是使用手机物理按键注重选取规则,触屏手机屏幕增大,可以显示更多的内容,但内容密度不宜过大否则不便点击,一般人的食指点击的区域约为7*7 mm 拇指点击区域约为8*8 mm,各大门户也分别推出适应触屏手机的高端版本,下面将会从手机网站最常使用的二个交互功能来分析3G门户炫版和其他门户的区别. 手机网站常用交互功能之一"信息连接": 竖屏状态:(图1) (图1)可见 3G门户

交互设计实例:手机界面中常用的导航方式

文章描述:手机界面常用导航设计分析. 所谓的交互设计,其实设计的就是人如何向机器发送指令,机器如何向人传达信息,一来一往是为交互.当要传达的信息量很少时,好办,就像Google的搜索框那样,往白底上一放就行了.但当等到信息是海量的.在一屏上难以全部呈现时,就需要有效地组织信息,将部分信息先隐藏起来,待到用户需要时再将用户引导到那里.在界面设计中,广义地来讲,从一组信息向另一组信息转移的的过程,就称之为导航. 明确了定义,我们就该知道,一个好的导航设计应该让用户明白: 现在在哪儿 以前去过哪儿 将

交互设计实例分析:自然用户界面大胆设计

今天ifanr上有一篇<手势操作(自然用户界面)再探讨>,观点保守,论据不足. Android的菜单确实难用,难以记住界面是否有菜单.Plam将菜单放置在状态栏的左边,保证了触摸屏也能使用菜单,但也有弊端.菜单放在界面左上角,宽28像素,难以点击.请拿出你的手机,右手去点击大屏幕的左上角.要么大拇指伸过去,要么其余四指抬起才能点到左上角,甚为别扭. 弹出的菜单通常要么是无关紧要的功能,要么重要.如果功能无关紧要,那不如将菜单放置在启动程序的第一个界面(主界面),如帮助,当用户需要的时候,完全可

交互设计实例:创造设计中的优雅与节奏

首先是跑题的部分,最近听到"交互设计师的危机"的说法.这个话题已经有了不少讨论,比如Cooper上的文章"交互设计前途渺茫"(Alan Cooper,被誉为交互设计之父,见www.cooper.com,它的"concept Projects"我认为是情景应用于设计表达的一个良好范例).DavidW同学做了翻译,并有感而发的写了一些文章如"交互设计师如何提高自己的能力"其中颇具讽刺的语言风格很让人喜欢.又如Mark Blythe