爱玩科技网
您的当前位置:首页UI设计规范

UI设计规范

来源:爱玩科技网
UI设计规范

UI设计规范

⽬录

1以⽤户为中⼼的设计原则 (5)1.1⽤户控制 (5)1.2直接 (5)1.3⼀致 (5)1.4容错 (5)1.5反馈 (5)1.6美学 (5)1.7响应速度 (5)1.8简单 (6)

2以⽤户为中⼼的设计原则详述 (6)2.1⽤户控制 (6)2.2直接 (6)2.3⼀致 (7)2.4容错 (7)2.5反馈 (7)2.6美学 (8)2.7响应速度 (8)2.8简单 (8)3界⾯细节约定 (9)3.1界⾯风格 (9)3.1.1布局 (9)3.1.3安装 (11)3.1.4启动界⾯ (11)

3.1.5Windows的可视提⽰ (12)

3.1.6交互 (12)3.1.7程序 (13)3.1.8默认 (14)3.1.9窗体 (15)3.1.10布局和间距 (16)3.1.11图标、图⽚ (17)3.1.12提⽰信息Hint (18)3.1.13标点符号 (19)3.1.14对话框 (19)

3.1.15对话框的主要命令按钮 (21)3.1.16属性表和属性页 (23)3.1.17向导 (24)3.1.18控件 (24)3.1.19按钮 (25)3.1.20复选框 (27)3.1.21单选按钮 (27)3.1.22组合框 (28)3.1.23编辑框 (28)3.1.24数据输⼊ (30)3.1.25滑块 (30)3.1.26静态⽂本 (30)3.1.27列表框 (31)3.1.28列表视图 (32)3.1.29滚动条 (32)3.1.30状态栏 (32)3.1.31分组框 (32)3.1.33上下⽂菜单 (34)3.1.34⼯具栏 (35)3.1.35⼯具提⽰ (35)3.1.36⽂本 (36)3.1.37消息框 (37)3.1.38错误消息 (38)3.1.39字体 (39)3.1.40颜⾊ (39)3.1.41标签 (40)

3.1.42快捷键 (40)3.1.43加速键 (41)3.1.44光标定位 (41)3.1.45系统响应时间 (41)3.1.46错误处理 (42)3.1.47帮助 (43)

3.1.48其它各种细节 (45)3.2统⼀术语 (46)3.2.1术语的重要性 (46)3.2.2命名 (46)

3.2.3⽤⽤户的语⾔说话 (47)3.2.4要避免的术语 (47)4更改和追加说明 (47)4.1更改说明 (47)4.2追加说明 (47)

1以⽤户为中⼼的设计原则1.1⽤户控制

⽤户界⾯设计的⼀个重要原则是⽤户应该总是感觉在控制软件⽽不是感觉被软件控制。1.2直接

每个⽤户界⾯都应⽀持⽤户可以直接处理软件的信息表⽰,做到所见即所得。1.3⼀致

⼀致允许⽤户将已有的知识传递到新的任务中,更快地学习新事物,并将更多的注意⼒集中在任务上。这是因为他们不必花时间来尝试记住交互中的不同。通过提供⼀种稳定的感觉,⼀致使得界⾯熟悉⽽⼜可预测。1.4容错

⼀个有效的界⾯允许交互式的发现。它只提供⼀组合适的选择,并警告⽤户可能破坏系统或数据的情况,或者如果更好,采⽤可逆转或可还原的操作。1.5反馈

总是对⽤户的操作提供反馈。1.6美学

可视设计是应⽤程序界⾯的重要部分。可视属性提供了⾮常好的印象,并传达特定对象的交互⾏为的重要线索。1.7响应速度

良好的界⾯应对⽤户的操作提供快速的⽀持。

1.8简单

界⾯应该很简单(不是过分单纯化)、易于学习,并且易于使⽤。2以⽤户为中⼼的设计原则详述2.1⽤户控制

⽤户界⾯设计的⼀个重要原则是⽤户应该总是感觉在控制软件⽽不是感觉被软件所控制。

2.1.1操作上假设是⽤户-⽽不是计算机或软件-开始动作。⽤户扮演主动⾓⾊,⽽不是扮演被动⾓⾊。系统可以⾃动执⾏任务,但要以允许⽤户进⾏选择或控制它的⽅式来实现该⾃动任务。

2.1.2提供⽤户⾃定义设置。因为⽤户的技能和喜好各不相同,因此他们必须能够个性化界⾯的某些⽅⾯。系统应该反应不同的系统属性-例如颜⾊、字体或其他选项-的⽤户设置。

2.1.3系统应该尽可能采取交互式并易感应的。尽量避免使⽤模式。\"模式\"是⼀种状态,它排除⼀般的交互,或者⽤户只能进⾏特定的交互。当最好使⽤⼀个模式或该模式只是可替换的设计时-例如,⽤于在⼀个绘图程序中选定⼀个特定⼯具-请确保该模式是显然的、可见的,是⼀个明确的⽤户选定的结果,并且容易取消。2.2直接

每个⽤户界⾯都应⽀持⽤户可以直接处理软件的信息表⽰,做到所见即所得。不管⽤户正在拖动⼀个对象以重新放置它,还是正在定位到⽂档中的⼀个位置,他们都应该在屏幕上看到他们的操作如何影响该对象。可见的信息和选择还减少了⽤户在智⼒上的⼯作量。⽤户可以⽐回忆命令的语法更容易地识别该命令。

2.2.1拥有良好的直觉特征。以⽤户所熟悉的现实世界事务的抽象来给⽤户暗⽰和隐喻,来帮助⽤户能迅速学会软件的使⽤。

2.2.2熟悉的隐喻为⽤户的任务提供了直接⽽直观的界⾯。通过允许⽤户利⽤他们的知识和经难,隐喻使得预测和学习基于软件的表⽰的⾏为更加容易。

2.2.3隐喻⽀持⽤户认知⽽不是记忆。⽤户记起与⼀个熟悉的事物相关联的意义要⽐他们记起⼀个特定命令的名称要容易得多

2.2.4在使⽤隐喻时,不需要将基于计算机的实现局限在真实世界的对应物上实现。在界⾯中使⽤隐喻的⽬的是提供⼀个认知的桥梁;隐喻并不以其⾃⾝为最终⽬的。2.3⼀致

⼀致允许⽤户将已有的知识传递到新的任务中,更快地学习新事物,并将更多的注意⼒集中在任务上。这是因为他们不必花时间来尝试记住交互中的不

同。通过提供⼀种稳定的感觉,⼀致使得界⾯熟悉⽽⼜可预测。

2.3.1⼀致在界⾯的所有⽅⾯都是很重要的,包括命令的名称、信息的可视表⽰,操作⾏为,以及元素在屏幕和窗⼝内部的放置。

2.3.2应⽤程序内的⼀致。使⽤⼀组⼀致的命令和界⾯来展⽰常见功能。⽐如,避免实现⼀个“复制”命令,它使得在⼀种情况下⽴刻执⾏⼀个操作,但在另⼀种情况下显⽰⼀个对话框要求⽤户键⼊⽬标。使⽤同样的命令来执⾏对⽤户来说相似的功能。

2.3.3操作环境内的⼀致。通过保持整个系统交互操作和界⾯约定之间的⾼度⼀致,⽤户将能在系统中应⽤他们已经学会的交互操作技能的能⼒中受益。2.3.4使⽤隐喻的⼀致性。如果⼀个特定的⾏为更多的是⼀个不同的事物的特征,⽽不是它的隐喻的含义,那么⽤户可能在学习将⾏为和该事物相关联时遇到困难。2.4容错

⽤户喜欢探索⼀个界⾯,并经常从尝试和错误中学习。⼀个有效的界⾯允许交互式的发现。它只提供⼀组合适的选择,并警告⽤户可能破坏系统或数据的情况,或者如果更好,采⽤可逆转或可还原的操作。

即使在设计得很好的界⾯中,⽤户也可能犯错误。这些错误既可以是物理上的(偶然地指向了错误的命令或数据),也可是精神上的(对选定哪⼀个命令或哪些数据做出了错误的决定)。有效的设计避免很可能导致错误的情况。它还包容潜在的⽤户错误,并且使⽤户易于还原。2.5反馈

总是对⽤户的操作提供反馈。良好的反馈有助于确认系统正在响应输⼊,并传达区分操作特征的细节。有效的反馈是及时的,并且尽可能接近⽤户交互的那个点显⽰。即使当计算机正在处理⼀个特定的任务时,也要为⽤户提供有关该进程的状态以及如何取消该进程(如果这是⼀个选项)的信息。对于⽤户来说,没有什么⽐对输⼊没有反应的“死”屏更令⼈困惑的了。

2.5.1系统提供的反馈类型应适合当前任务。系统可以通过指针更改或状态栏消息来传达简单的信息;对于更复杂的任务,系统应提供⼀个进程控件或者消息框的显⽰⽅式反馈⽤户。

2.5.2提供可视反馈。在后台运⾏需要很长时间时(时间超过1~10秒,视具体情况⽽定),必须提供进度条等信息指⽰。

2.5.3除⾮特别必要时,不要提供声⾳反馈。在有严重的问题发⽣时,可以使⽤声⾳来提⽰⽤户,但是通常应该允许⽤户取消声⾳。

2.5.4保持⽂字内容清楚。信息的表达要⾔简意赅,易于理解⽽⼜不罗嗦;避免使⽤冗长的⽂字给⽤户反馈。

2.6美学

可视设计是应⽤程序界⾯的重要部分。可视属性提供了⾮常好的印象,并传达特定对象的交互⾏为的重要线索。同时,记住出现在屏幕上的每⼀个可视元素也是很重要的,它们可能竞争⽤户的注意。提供清楚地促进⽤户对表达信息理解的连贯环境。图形或可视设计器对于设计这⼀⽅⾯是⽆价的。2.7响应速度2.7.1保持界⾯能很快对⽤户操作做出反应。

2.7.2提供快捷键。特别对于有⼤量录⼊项的界⾯,能让⽤户不使⽤⿏标即可完成快速数据录⼊。在⽤户界⾯中加⼊⼀些功能,这些功能可以让熟练⽤户在不同的区域快速的输⼊数据。这些功能包括重复功能、快捷键、带有有意义的图标的按钮等等,所有这些可以使速度快的⽤户可以控制界⾯并加快数据的输⼊。

2.7.3除⾮必要,不要重绘屏幕。2.8简单

界⾯应该很简单(不是过分单纯化)、易于学习,并且易于使⽤。

2.8.1必须提供对应⽤程序的所有功能的访问。在界⾯中,扩⼤功能和保持简单是相互⽭盾的。⼀个有效的设计应该平衡这些⽬标。

2.8.2⽀持简单性的⼀种⽅法是将信息的表⽰减少到进⾏充分交流所需的最少信息。例如,避免命令名和消息的⽂字描述。不相关或冗长的句⼦扰乱了您的设计,使得⽤户难以很容易地提取重要信息。另⼀个设计简单⽽有⽤的界⾯的⽅法是使⽤⾃然的映射和语意。界⾯元素的排列和表⽰影响它们的意义和关联。

2.8.3简单还与熟悉相互关联。熟悉的事物通常似乎更简单。尽可能尝试建⽴利⽤⽤户已有的知识和经历的联系。

2.8.4系统应使⽤渐进揭⽰来帮助⽤户管理复杂的事物。\"渐进揭⽰\"涉及到仔细的信息组织,以便只在恰当的时候才显⽰信息。通过隐藏向⽤户表达的信息,减少了⽤户必须处理的信息数量。例如,可以使⽤菜单来显⽰操作或选择的列表,还可以使⽤对话框来显⽰⼀组选项。

2.8.5渐进揭⽰并不意味着对显⽰信息使⽤⾮传统的技术,例如需要⼀个修饰键作为访问基本功能的唯⼀⽅法,或者强迫⽤户通过⼀个更长的分级交互序列。这会使⽤户界⾯更加复杂和⿇烦。3界⾯细节约定3.1界⾯风格3.1.1布局

3.1.1.1软件布局设计应该简洁明快,尽量少⽤⽆谓的装饰,应该考虑节省屏幕空间,各种分辨率的⼤⼩,缩放时的状态和原则,并且为将来设计

的按钮,菜单,标签,滚动条及状态栏预留位置。

3.1.1.2设计中将整体⾊彩组合进⾏合理搭配,将软件商标放在显著位置,主菜单应放在左边或上边,滚动条放在右边,状态栏放在下边,以符合视觉流程和⽤户使⽤⼼理。

3.1.1.3界⾯⽀持键盘⾃动浏览按钮功能。即TAB⾃动切换功能。在⼀个窗⼝中按tab键,移动聚焦的顺序不能杂乱⽆章,tab 的顺序是先从上⾄下,再从左⾄右。同屏中⾸先应输⼊的和重要信息的控件在tab顺序中应当靠前,位置也应放在窗⼝上较醒⽬的位置。

3.1.1.4应注意在⼀个窗⼝内部所有控件的布局和信息组织的艺术性,使得⽤户界⾯美观。

3.1.1.5布局⼒求简洁、有序、易于操作。3.1.2普通外观3.1.2.1使⽤⼀致性

⼀致的外观将使⽤户界⾯更易于理解和使⽤。⽤户界⾯控件看起来应该是⼀致的。

3.1.2.2使⽤安排和流程

不论在东⽅或是在西⽅⽂化中,⼈们习惯于从左到右,从上到下进⾏阅读,因此,应该将重要信息放在上⾯和左边。左上⾓最容易吸引起⼈们的注意⼒。3.1.2.3使⽤对齐

通常,使⽤左对齐来使⽤户界⾯控件更易于浏览。对于数值⽂本,应该使⽤⼩数点对齐或右对齐。对于⾮数值⽂本,应该避免使⽤右对齐或居中对齐。不必对什么都使⽤中间对齐,或者使它们保持对称形式。在右边或底部保留空⽩区域更适合习惯。3.1.2.4使⽤分组

将相关的⽤户界⾯控件分成组,以体现它们之间的关系。同时,还要显⽰相关信息。将控件放在它所作⽤的对象旁。使⽤空格、分组框、线条和标签,或者其它分隔符对⽤户界⾯控件进⾏分组。3.1.2.5使⽤强调

使⽤焦点、位置、分组、层次、启⽤/禁⽤、⼤⼩、颜⾊或者字体等,来将注意⼒集中在需要⾸先看到的⽤户界⾯控件上。尽量以可视的⽅式指明⽤户接下来应该进⾏的操作。3.1.2.6使⽤可视的提⽰

尽量使⽤近似的⼤⼩和间距来指出⽤户界⾯控件是相似的,⽽使⽤不同的⼤⼩和间距来指出⽤户界⾯控件是不同的。3.1.2.7使⽤空格

使⽤空格来创建⼀个\"透⽓室\",以使窗⼝布局更易于理解,并且查看起来更舒服。空格的多少要适当,不要显得太分散。但是,要避免过多地使⽤空格。如果可能,尽量使窗⼝⼩⼀些。3.1.2.8警惕空洞

不要到处粘贴公司或产品的名称及徽标。虽然在启动界⾯或\"关于\"框中出现公司或产品名称及徽标是完全可以接受的,但其他窗⼝中的可⽤空间应该出现其他内容。如果没有其他内容,那么应尽量使窗⼝⼩⼀些。3.1.2.9注意⼤⼩

使⽤⽤户界⾯控件的分辨率具有独⽴性。使⽤系统规格(使⽤GetGystemMetrics API 函数)或⽂本规格(使⽤GetTextMetrics或

GetTextExtentPoint32 API 函数)来确定⽤户界⾯控件的⼤⼩。任何显⽰⽂本的对象(如对话框或定义的⽂本⽂档)都应该使⽤⽂本规格。

3.1.2.10考虑使⽤资源或预定义的布局⽹格

资源模板或预定义的布局⽹格有助于在不同的窗⼝之间实现⼀致性。3.1.2.11注意对话框应该有⼀个紧凑、从左到右、从上到下的流程,并且,左对齐的标签很便于浏览;通过对齐编辑框并调整其⼤⼩,使它显得更有组织,更加平衡。3.1.3安装

安装过程设计主要是将软件安装的过程进⾏美化,包括对软件功能进⾏图⽰化。3.1.4启动界⾯3.1.

4.1应使软件启动封⾯最终为⾼清晰度的图像,如软件启动封⾯需在不同的平台、操作系统上使⽤将考虑转换不同的格式,并且对选⽤的⾊彩不宜超过256 ⾊,最好为216⾊安全⾊。3.1.

4.2软件启动封⾯⼤⼩多为主流显⽰器分辨率的1/6⼤。3.1.

4.3在上⾯应该醒⽬的标注制作或⽀持的公司标志、产品商标,软件名称,版本号,⽹址,版权声明,序列号等信息,以树⽴软件形象,⽅便使⽤者或购买者在软件启动的时候得到提⽰。3.1.

4.4插图宜使⽤具有独⽴版权的,象征性强的,识别性⾼的,视觉传达效果好的图形,若使⽤摄影也应该进⾏数位处理,以形成该软件的个性化特征。3.1.

4.5如果是系列软件将考虑整体设计的统⼀和延续性。3.1.5Windows的可视提⽰

暗⽰与⽤户只需通过查看可视提⽰来确定对象的使⽤⽅式的能⼒有关。在Windows中,请保持使⽤下⾯的可视提⽰:3.1.5.1可以单击凸起的项⽬。

3.1.5.2可以单击当⿏标从其上移过时突出显⽰的项⽬。3.1.5.3不能单击下凹的项⽬。

3.1.5.4可以编辑具有⽩⾊背景和闪烁光标的项⽬。3.1.5.5不能编辑具有灰⾊背景的项⽬。3.1.5.6灰⾊项⽬是被禁⽤的。3.1.5.7可以拖动凸起的项⽬。3.1.6交互

3.1.6.1尽量提供对所有功能的键盘访问

理想情况下,除了绘图这样的图形功能,其他所有的功能都应该只能通过键盘来访问。3.1.6.2尽量提供对所有功能的⿏标访问

理想情况下,除了⽂本输⼊外,其他所有功能都应该只能通过⿏标来访问。3.1.6.3确保具有明显后果的操作要求⽤户进⾏明确的选择⽤户需要完全明确他将要进⾏危险性操作或破坏性操作。3.1.6.4使⽤有消耗的操作都给出反馈

在进⾏长时间的操作时,要确保有等待光标、进度表或其他的可视反馈。⽤户能够取消长时间的操作。如果可以取消未完成的操作,那么将按钮标记为\"取消\",否则将按钮标记为\"停⽌\"。3.1.6.5可视的指⽰模式

向⽤户提供⼀种可视的反馈,⽤来指出⽤户进⼊⼀种模式,通常可以通过更改光标或标题栏⽂本来做到这⼀点。3.1.6.6确保单击和双击的⼀致性

单击⽤于⾮按钮选定,⽽双击⽤于选定并执⾏默认操作。换句话说,双击(在列表框、组合框,或其他接受双击的控件中)的效果应该与选定控件中的⼀个项⽬,然后按下Enter键的效果⼀样。3.1.6.7⿏标右键仅⽤于快捷菜单

确保⿏标右键仅⽤于快捷菜单,⽽不要⽤于其他⽤途。3.1.6.8不要使⽤⿏标中键

如果⽤户的⿏标有中键,那么让⽤户使⽤\"控制⾯板\"中的\"⿏标\"实⽤程序⾃⼰分配中键的⾏为。3.1.6.9⿏标为不可点击状态时显⽰箭头,可点击状态显⽰⼿型;系统忙时显⽰沙漏形状。

3.1.6.10保持分配的快捷键的⼀致性

组合功能键和Ctrl键⽤于快捷键。习惯上不将Alt键⽤于组合键,业务Alt 键常常被⽤于访问键。尽量避免使⽤Alt键和Ctrl键,因为这种组合会使快捷键⾮常⿇烦,⽽且也很不⽅便。3.1.6.11将快捷键作为补充⽅式

千万不要将快捷键作为访问命令的唯⼀⽅法。应该让⽤户有更多的明显选择。3.1.6.12避免⽔平滚动条

与垂直滚动条不同,⽔平滚动条并不受欢迎,因为它会使项⽬阅读起来⽐较困难。解决的办法有:尽量使⽤垂直滚动条、加宽窗⼝、减⼩⽂本的宽度,或者使⽂本⾃动换⾏等。当然,如果确实需要,还可以使⽤⽔平滚动条。3.1.7程序

3.1.7.1只有主程序窗⼝才有标题栏图标、菜单栏、⼯具栏和状态栏

因为单击主窗⼝的任务栏按钮也会激活⼆级窗⼝,所以⼆级窗⼝绝对不要显⽰在任务栏中。⼆级窗⼝不要因为使⽤菜单栏、⼯具栏或状态栏⽽使其变得复杂。可以使⽤标题栏图标来明显区分主窗⼝和⼆级窗⼝。另外,绝对不要使⽤默认的Windows图标(飘动的窗⼝图标)作为窗⼝图标。3.1.7.2简化默认配置

让⽤户按⾃⼰的速度来学习和使⽤程序。

3.1.7.3应⽤程序应该使⽤多⽂档(MDI)界⾯或单⽂档(SDI)界⾯这些程序界⾯应该与应⽤程序的使⽤模式匹配。

3.1.7.4默认情况下,应⽤程序应该保持为最⼤化

当应⽤程序占⽤整个屏幕时,常常能够提⾼⽤户的⼯作效率。3.1.7.5实⽤程序应该使⽤单⽂档(SDI)界⾯或对话框界⾯

这些程序界⾯应该与实⽤程序的使⽤模式匹配。对于实⽤程序,建议不要使⽤多⽂档MDI界⾯,因为管理这些窗⼝需要付出很多努⼒。

3.1.7.6实⽤程序应该在⼩屏幕范围内运⾏

实⽤程序常常与其他程序⼀起运⾏,因此它们需要在⼩屏幕范围内运⾏。实⽤程序应该有灵活的窗⼝布局,以适应多种不同的⼤⼩。实⽤程序很少以最⼤化的形式运⾏。

3.1.7.7使⽤实际⽂档的单⽂档SDI程序必须⽀持运⾏多个实例运⾏多个实例使⽤户能够同时操作多个⽂档。3.1.7.8使⽤\"退出\"命令终⽌程序

使⽤\"退出\"终⽌程序;使⽤\"关闭\"移⾛主窗⼝和⾮模式对话框;使⽤\"取消\"

移⾛模式对话框。当关闭主窗⼝并不表⽰终⽌进程时,对于主窗⼝使⽤\"关闭\"来代替使⽤\"退出\"。例如:关闭打印机状态窗⼝不会取消打印任务。3.1.8默认

3.1.8.1保存和恢复⽤户选择

程序应该能够恢复到其最后退出的状态。多⽂档MDI程序应该能够恢复⽂档窗⼝的⼤⼩和位置。对话框通常应该使⽤最后输⼊的值作为默认值。3.1.8.2提供适当的默认值

提供适当的默认值来减少⽤户不必要的操作,从⽽帮助⽤户完成⼯作。提供最可能使⽤并给出设置实际使⽤⽅式的默认值。通常,最好的默认值是⽤户最后输⼊的值。3.1.8.3考虑选择默认值时的安全性

不应该将不可恢复或破坏性的操作设置为默认值。不要使⽤令⽤户感到莫名其妙的默认值。3.1.9窗体

3.1.9.1服务端跟客户端的主窗体⼤⼩不超过970*700像数;对话框窗体⼤⼩尽量不要超过0*460像数,留20像数给任务栏。并且⾼和宽(或W宽和⾼)的⽐应该⼤致保持为3:4(或4:3)。

3.1.9.2服务端跟客户端的主窗体允许有最⼤化、最⼩化的操作;但普通对话框窗体固定⼤⼩,不允许改变⼤⼩,也不允许最⼤化、最⼩化的操作,避免窗体界⾯出现混乱;

3.1.9.3窗体属性:⼀般应该将窗体的\"Position\"属性定义为

\"poDesktopCenter\",\"WindowState\"属性为\"wsNormal\",某些主界⾯设置为\"wsMaximized\"。\"ShowHint\"属性设为\"True\"。如果是模式对话框,则将\"BorderStyle\"属性设置为\"bsDialog\"。

3.1.9.4使⽤控件的Dock(Fill、Top、Left等)属性,结合Panel、GroupBox等控件进⾏设计,使窗体在缩放的时候,控件能⾃动进⾏⼤⼩调整;3.1.9.5通过程序⾃⾏控制。在窗⼝⼤⼩改变的时候,捕捉窗体的Resize或

SizeChanged事件进⾏相应处理。

3.1.9.6标题栏:服务端跟客户端的标题栏应包括产品图标跟产品标题及标题栏按钮;普通窗体的标题栏应包括标题及标题栏按钮;

3.1.9.7标题栏图标:服务端跟客户端的标题栏图标为系统的专⽤图标;出现在标题栏的最左侧;普通窗体则⽆需标题栏图标;

3.1.9.8标题(Title):服务端的主窗体的标题栏标题,出现在标题栏的左侧,仅次于标题栏图标;客户端的主窗体的标题栏标题,出现在标题栏的左侧,仅次于标题栏图标;

3.1.9.9标题栏按钮(Title Bar Button) :服务端跟客户端的标题栏按钮包括:最⼩化、最⼤化、关闭;出现在标题栏的右侧;普通窗体的标题栏按钮只包括关闭按钮;出现在标题栏的右侧;

3.1.9.10信息框内容(Message Box) :信息框内容部分包括图标、⽂字信息、确认取消按钮;图标分注意及警告两种,具体标准参见图标(Icon);⽂字具体标准参见字体(Font);按钮具体标准参见按钮(Button);

3.1.9.11报错窗⼝的风格⼀致,最好有统⼀的报错页⾯。3.1.9.12类似功能的窗⼝打开的风格要⼀致。

3.1.9.13⼦窗体应尽量在显⽰在主窗体的左上或居中放置。3.1.9.14弹出式窗⼝尽量在不借助滚动条的情况下显⽰所有内容。3.1.10布局和间距

3.1.10.1窗体控件布局和间距尽量保持与Windows标准⼀致。控件与窗体的上、下、左、右边距为7象素。右下⾓主命令按钮之间的间距为6象素,如果主命令按钮在右上⾓,之间的间距则为4象素。主命令按钮⼀般情况为75×21象素,如果按钮的⽂本很长,应该适当加宽按钮的宽度。

3.1.10.2控件的\"TabOrder\"属性值应该与控件排列顺序⼀致,即遵循从上到下、从左到右这样⼀个流程。如果在PageControl的多个页⾯中存在类似的控件,应该尽量使得它们在各个页⾯中出现的位置/⼤⼩⽐较⼀致,以免在页⾯间切换时产⽣闪烁感。3.1.11图标、图⽚

图标按照系统的特点及系统的整体风格进⾏设计,统⼀构图布局,统⼀⾊调、对⽐度、⾊阶等各⽅⾯;图标应能很清晰的表达意思,遵循常⽤标准,或者⽤户容易联想的到事物,杜绝出现⽣僻和令⼈不解的图⽚。例如Windows中的\"剪切\"功能就是⽤⼀把剪⼑来表⽰的。3.1.11.1图标尺⼨

Windows XP图标有四种尺⼨: 48X48像素、32X32像素、24X24像素、16X16像素

3.1.11.2图标⾊彩深度⽀持

WindowsXP⽀持32位图标。32位图标为24位图像加上8位alpha通道。使图标边缘⾮常平滑,且与背景相融合。每个WindowsXP图标应包含以下三种⾊彩深度,以⽀持不同的显⽰器显⽰设置: 24位图像加上8位alpha通道(32位) 、8位图像(256⾊),加上1位透明⾊、4位图像(16⾊),加上1位透明⾊。3.1.11.3调⾊板

图标中使⽤的主要颜⾊。3.1.11.4对象的⾓度和分组

WindowsXP样式图标使⽤的透视⽹格:并⾮所有对象使⽤16X16的复杂图像都能获得较好效果。某些对象通常以直观图像显⽰:⽂档图标、符号图标(如警告或信息图标)、单⼀对象图标(如放⼤镜) 除⾮创建重叠辅助对象可以更清楚地表达图标的含义,否则就可读性和完整性⽽⾔,还是应使⽤直观图像。还应考虑如何按组查看图标,以便确定如何将对象分组。3.1.11.5投影

使⽤投影后,WindowsXP图标将更清晰且更具⽴体感。可在Photoshop中实现这种效果,本指南的后⾯部分将对此进⾏描述。若要为图像添加投影,请在 Photoshop中双击图像的图层,并选择Drop Shadow。然后将Angle更改为135,Distance更改为 2,Size更改为2。此时投影为75%不透明⿊⾊。3.1.11.6轮廓

绘制XP样式图标时,为图像添加轮廓可使之更清晰,并可保证图像在不同背景⾊上都具有较好效果。3.1.11.7概念

设计图标时,请考虑以下因素:

使⽤已有概念以确保真实表达了⽤户的想法。考虑图标在⽤户界⾯环境中以何种形式出现,以及如何作为图标集的⼀部分使⽤。3.1.11.8⽂化背景

避免在图标中使⽤字母、单词、⼿或脸。必须⽤图标表⽰⼈或⽤户时,请尽可能使其⼤众化。如果图标中的图像由多个对象组成,应考虑如何使图像尺⼨更⼩。建议在图标中使⽤的对象不超过三个。对于16X16的尺⼨⼤⼩,还可考虑删除某些对象或简化图像使之更容易辨认。3.1.11.9透明⼯具

将Gif Movie Gear(GMG)打开⼀个对话框,其中显⽰您的图标。使⽤

吸管⼯具单击图标的背景⾊。此颜⾊将更改为暗黄绿⾊(或在 GMG中选作透明背景⾊的颜⾊)。重复所有4位和8位帧。若要保存图标,请选择 File->Save Icon As...。3.1.11.10创建⼯具栏

Windows⼯具栏图标除不使⽤投影之外,使⽤的样式与其它图标相同。由于⼯具栏图标⾮常⼩,建议您使⽤简单的图像。如果以直观⽅式显

⽰图像即可清晰地表达图标的含义,则不必使⽤其它复杂⽅式。3.1.12提⽰信息Hint

⼯具栏按钮应该设置⼯具提⽰ \"Hint\" 属性。Hint能帮助⽤户更⽅便地理解和使⽤。详细资料可以参照⼯具栏、⼯具提⽰。3.1.12.1只显⽰与当前⽤户语境环境有关的信息

3.1.12.2不要⽤数据将⽤户包围,使⽤便于⽤户迅速吸取信息的⽅式表现信息;

3.1.12.3使⽤⼀致的标记、标准缩写和可预测的颜⾊,显⽰信息的含义应该⾮常明确,⽤户不必再参考其它信息源;3.1.12.4产⽣有意义的出错信息,详见错误消息;3.1.12.5使⽤缩进和⽂本来辅助理解;

3.1.12.6使⽤窗⼝分隔控件分隔不同类型的信息;3.1.13标点符号

在标识控件⽤途的标签⽂本(Label)和提⽰信息(Hint)中,应使⽤半⾓符号。如果是指导性标签⽂本(如解释按钮功能的句⼦),则使⽤全⾓符号,并且句⼦应遵循中⽂标点符号标准。其他详细资料详见⽂本。3.1.14对话框3.1.1

4.1对话框应该在所有视频模式下都能够正确显⽰

当在VGA(显卡输出的模拟信息接⼝)模式(0×480)下显⽰时,对话框应该不超过0×460(留20像素给任务栏)。这将确保对话框能够显⽰在所有的视频模式下。3.1.1

4.2确保模式对话框的模式

确保使⽤具有⽗窗⼝的模式对话框都提供正确的⽗窗⼝句柄,⽽不时提供NULL句柄。如果没有提供⽗窗⼝句柄,那么⽗窗⼝仍处于活动状态,因此该对话框实际上并不是模式对话框。3.1.1

4.3不要使⽤可滚动的对话框

也就是说,不要使⽤需要滚动条来进⾏完全查看的对话框。这种对话框使⽤起来⾮常不⽅便,并且也时完全不必要的。应该重新设计这种对话框。3.1.1

4.4不要在作为⼆级窗⼝的对话框中使⽤菜单栏

因篇幅问题不能全部显示,请点此查看更多更全内容