界面规范

1.3. 细节约定 
1.3.1. 界面风格 
1.3.1.1. 普通外观 
l 使用一致性 一致的外观将使用户界面更易于理解和使用。用户界面控件看起来应该是一致的。 
l 使用安排和流程 在西方文化中（包括中国），人们习惯于从左到右，从上到下进行阅读，因此，应该将重要信息放在上面和左边。左上角最容易吸引起人们的注意力。 
l 使用对齐 通常，使用左对齐来使用户界面控件更易于浏览。对于数值文本，应该使用小数点对齐或右对齐。对于非数值文本，应该避免使用右对齐或居中对齐。不必对什么都使用中间对齐，或者使它们保持对称形式。在右边或底部保留空白区域更适合习惯。 
l 使用分组 将相关的用户界面控件分成组，以体现它们之间的关系。同时，还要显示相关信息。将控件放在它所作用的对象旁。使用空格、分组框、线条和标签，或者其它分隔符对用户界面控件进行分组。 
l 使用强调 使用焦点、位置、分组、层次、启用/禁用、大小、颜色或者字体等，来将注意力集中在需要首先看到的用户界面控件上。尽量以可视的方式指明用户接下来应该进行的操作。
l 使用可视的提示 尽量使用近似的大小和间距来指出用户界面控件是相似的，而使用不同的大小和间距来指出用户界面控件视是不同的。 
l 使用空格 使用空格来创建一个"透气室"，以使窗口布局更易于理解，并且查看起来更舒服。空格的多少要适当，不要显得太分散。但是，要避免过多地使用空格。如果可能，尽量使窗口小一些。 
l 警惕空洞 不要到处粘贴公司或产品的名称及徽标。虽然在启动屏或"关于"框中出现公司或产品名称及徽标是完全可以接受的，但其他窗口中的可用空间应该出现其他内容。如果没有其他内容，那么应尽量使窗口小一些。 
l 注意大小 使用用户界面控件的分辨率具有独立性。使用系统规格（使用GetGystemMetrics API 函数）或文本规格（使用GetTextMetrics或GetTextExtentPoint32 API 函数）来确定用户界面控件的大小。任何显示文本的对象（如对话框或定义的文本文档）都应该使用文本规格。 
l 考虑使用资源或预定义的布局网格 资源模板或预定义的布局网格有助于您在不同的窗口之间实现一致性。

注意，下页所示图的第二个对话框，与第一个不同，它有一个紧凑、从左到右、从上到下的流程，并且，左对齐的标签很便于浏览；通过对齐编辑框并调整其大小，使它显得更有组织，更加平衡。 

不合理的 
平衡的对话框 
1.3.1.2. Windows的可视提示 
暗示与用户只需通过查看可视提示来确定对象的使用方式的能力有关。在Windows中，请保持使用下面的可视提示： 
l 可以单击凸起的项目。 
l 可以单击当鼠标从其上移过时突出显示的项目。 
l 不能单击下凹的项目。 
l 可以编辑具有白色背景和闪烁垂直条（光标）的项目。 
l 不能编辑具有灰色背景的项目。 
l 灰色项目是被禁用的。 
l 可以拖动凸起的项目。

1.3.1.3. 交互 
l 尽量提供对所有功能的键盘访问 理想情况下，除了绘图这样的图形功能，其他所有的功能都应该只能通过键盘来访问。 
l 尽量提供对所有功能的鼠标访问 理想情况下，除了文本输入外，其他所有功能都应该只能通过鼠标来访问。 
l 确保具有明显后果的操作要求用户进行明确的选择* 用户需要完全明确他将要进行危险性操作或破坏性操作。 
l 对于使有耗时的操作都给出反馈* 在进行长时间的操作时，要确保有等待光标、进度表或其他的可视反馈。用户应该能够取消长时间的操作。如果可以取消未完成的操作，那么将按钮标记为"取消"，否则将按钮标记为"停止"。 
l 可视的指示模式* 向用户提供一种可视的反馈，以指出用户进入一种模式，通常可以通过更改光标或标题栏文本来做到这一点。 
l 确保单击和双击的一致性* 单击用于非按钮选定，而双击用于选定并执行默认操作。换句话说，双击（在列表框、组合框，或其他接受双击的控件中）的效果应该与选定控件中的一个项目，然后按下Enter键的效果一样。 
l 鼠标右键仅用于快捷菜单* 确保鼠标右键仅用于快捷菜单，而不要用于其他用途。 
l 不要使用鼠标中键* 如果用户的鼠标有中键，那么让用户使用"控制面板"中的"鼠标"实用程序自己分配中键的行为。 
l 保持分配的快捷键的一致性 组合功能键和Ctrl键用于快捷键。习惯上不将Alt键用于组合键，业务Alt键常常被用于访问键。尽量避免使用Alt键和Ctrl键，因为这种组合会使快捷键非常麻烦，而且也很不方便。 
l 将快捷键作为补充方式* 千万不要将快捷键作为访问命令的唯一方法。应该让用户有更多的明显选择。 
l 避免水平滚动条 与垂直滚动条不同，水平滚动条并不受欢迎，因为它会使项目阅读起来比较困难。解决的办法有：尽量使用垂直滚动条、加宽窗口、减小文本的宽度，或者使文本自动换行等。当然，如果确实需要，还可以使用水平滚动条。 
1.3.1.4. 程序 
l 只有主程序窗口才有标题栏图标、菜单栏、工具栏和状态栏* 因为单击主窗口的任务栏按钮也会激活二级窗口，所以二级窗口绝对不要显示在任务栏中。二级窗口不要因为使用菜单栏、工具栏或状态栏而使其变得复杂。可以使用标题栏图标来明显区分主窗口和二级窗口。另外，绝对不要使用默认的Windows图标(飘动的窗口图标)作为窗口图标。 
l 简化默认配置 让用户按自己的速度来学习和使用程序。 
l 应用程序应该使用多文档界面（MDI）或单文档（SDI）这些程序界面应该与应用程序的使用模式匹配。 
l 默认情况下，应用程序应该保持为最大化 当应用程序占用整个屏幕时，常常能够提高用户的工作效率。 
l 实用程序应该使用SDI或对话框界面 这些程序界面应该与实用程序的使用模式匹配。对于实用程序，建议不要使用MDI界面，因为管理这些窗口需要付出很多努力。 
l 实用程序应该在小屏幕范围内运行 实用程序常常与其他程序一起运行，因此它们需要在小屏幕范围内运行。实用程序应该有灵活的窗口布局，以适应多种不同的大小。实用程序很少以最大化的形式运行。 
l 使用实际文档的SDI程序必须支持运行多个实例* 运行多个实例使用户能够同时操作多个文档。 
l 使用"退出"命令终止程序使用"退出"终止程序；使用"关闭"移走主窗口和非模式对话框；使用"取消"移走模式对话框。当关闭主窗口并不表示终止进程时，对于主窗口使用"关闭"来代替使用"退出"。例如：关闭打印机状态窗口不会取消打印任务。 
1.3.1.5. 默认 
l 保存和恢复用户选择 程序应该能够能够恢复到其最后退出的状态。MDI程序应该能够恢复文档窗口的大小和位置。对话框通常应该使用最后输入的值作为默认值。 
l 提供适当的默认值 提供提供适当的默认值来减少用户不必要的操作，从而帮助用户完成工作。提供最可能使用并给出设置实际使用方式的默认值。通常，最好的默认值是用户最后输入的值。 
l 考虑选择默认值时的安全性* 不应该将不可恢复或破坏性的操作设置为默认值。不要使用令用户感到莫名其妙的默认值。 
1.3.1.6. 窗体 
对话框窗体大小尽量不要超过640*460，留20给任务栏。并且高和宽（或W宽和高）的比应该大致保持为3:4（或4：3）。一般应该将窗体的"Position"属性定义为 "poDesktopCenter"，"WindowState"属性为"wsNormal"，某些主界面设置为"wsMaximized"。"ShowHint"属性设为"True"。如果是模式对话框，则将"BorderStyle"属性设置为"bsDialog"。
窗体文件(*.dfm)保存为文本格式，以便在VSS中比较不同版本之间的差别。如果窗体大小超过屏幕大小，则在Delphi开发环境中打开时，大小会有改变，并且影响到运行时刻效果。由于每个人的屏幕大小设置不一样，有些是1024*768，有些是800*600，因此在设计期间请注意窗体大小，尽量不要超过800*600，以免出现上述问题。 

1.3.1.7. 布局和间距 
窗体控件布局和间距尽量保持与Windows标准一致。控件与窗体的上、下、左、右边距为7象素。右下角主命令按钮之间的间距为6象素，如果主命令按钮在右上角，之间的间距则为4象素。主命令按钮一般情况为75×21象素，如果按钮的文本很长，应该适当加宽按钮的宽度。如下图。其它详细资料请完全参照错误！书签自引用无效。和命令按钮。  

控件的"TabOrder"属性值应该与控件排列顺序一致，即遵循从上到下、从左到右这样一个流程。如果在PageControl的多个页面中存在类似的控件，应该尽量使得它们在各个页面中出现的位置/大小比较一致，以免在页面间切换时产生闪烁感。

1.3.1.8. 图标、图片 
不同界面中的同一功能应该使用同样的图标和图片。图标、图片的色调、风格尽量保持一致。图标、图片的隐喻应能确切表示功能的含义，如果不能，就直接使用文本，以免混淆用户。如果功能是一个动作时，可能比较难找到确切表示该功能的图标，这时应该尽量采用此动作相关的名词做图标。例如Windows中的"剪切"功能就是用一把剪刀来表示的。 
1.3.1.9. 提示信息（Hint） 
工具栏按钮应该设置工具提示 "Hint" 属性。Hint能帮助用户更方便地理解和使用。详细资料可以参照工具栏、工具提示。 
如果使用了"TSpeedButton"控件，并且只有图标，同样应对它设置"Hint"属性。如果不是特殊情况，应尽量避免使用"TSpeedButton"控件，而使用"TButton"控件代替。 
1.3.1.10. 标点符号 
在标识控件用途的标签文本（Label）和提示信息（Hint）中，应使用半角符号。如果是指导性标签文本（如解释按钮功能的句子），则使用全角符号，并且句子应遵循中文标点符号标准。如下图Microsoft标准对话框例子。其他详细资料可参照静态文本。 
1.3.1.11. 对话框 
l 对话框应该在所有视频模式下都能够正确显示 当在VGA模式（640×480）下显示时，对话框应该不超过640×460（留20像素给任务栏）。这将确保对话框能够显示在所有的视频模式下。
l 确保模式对话框的模式* 确保使用具有父窗口的模式对话框都提供正确的父窗口句柄，而不时提供NULL句柄。如果没有提供父窗口句柄，那么父窗口仍处于活动状态，因此该对话框实际上并不是模式对话框。 
l 不要使用可滚动的对话框* 也就是说，不要使用需要滚动条来进行完全查看的对话框。这种对话框使用起来非常不方便，并且也时完全不必要的。应该重新设计这种对话框。 
l 不要在作为二级窗口的对话框中使用菜单栏* 使用这种对话框需要付出很多努力。注意，在用作主窗口的对话框（如"查找"实用工具）中，菜单栏时可以接受的。还要注意的是，在所有对话框中，快捷菜单和菜单按钮都是可以接受的。 
二级对话框不要使用菜单栏，但可以使用菜单按钮。

l 不要在作为二级窗口的对话框中使用标题栏图标* 标题栏图标用于区别主窗口和二级窗口。 
l 不要在任务栏上显示作为二级窗口的对话框* 注意，单击主窗口的的任务栏图标也将激活二级窗口。 
l 对话框中使用下页图所示的页面布局和间距。 

l 对于相似的对话框，使用控件位置来强调其相似性。 如果意义相同的同一控件出现在一些相似的对话框中，那么它应该显示在相同的位置。另一方面，应避免将可能会产生混淆的不同控件放在同一位置。 
l 对非模式对话框最好使用可停放的对话框 可停放对话框在功能上与非模式对话框是等效的，但其位置设置更为灵活。 
l 策略地设置输入焦点 将最初的输入焦点设置在最可能首先使用的控件上。 
l 在对话框标题文本中不要出现省略号 例如，作为选择"打印选项..."命令结果而显示地对话框的标题应该为"对于选项"。但是，表示命令正在执行过程中菜单对话框（如"连接到Internet..."对话框）是一种例外情况。 
l 为所有可处理访问键的控件分配访问键* 访问键可以使用户的手保持在键盘上，从而使访问程序更加方便。您可以直接在其标题中为诸如命令按钮、单选按钮、复选框等控件分配访问键。通过提供静态文本标签或带有访问键、在Tab顺序上先于控件的组框，您可以为诸如编辑框、列表框、组合框等控件分配访问键。在其他情况下不要为组框分配访问键--这会使人产生混淆。"确定"按钮没有访问键，因为在作为默认按钮时，它通过提Enter键来选定的。"取消"按钮也没有访问键，因为Esc键预览清除模式对话框。如果可能，避免使用小写的g、j、p、q或y作访问键，也避免使用这些字母前后的字母作为访问键。下划线不能与这些字母的下行字母分开。当然，访问键必须是唯一的。 
l 避免使用粗体文本 尽量少使用粗体文本。在Windows 3.1 的对话框中，粗体文本用于在旧式的视频硬件上绘制被禁用的文本（即抖动的灰色文本）。因为现在的视频硬件可以绘制没有抖动的灰色文本，所以Windows 为了使外观更加清洁，现在Windows 在对话框中使用正常文本。粗体文本仅用于强调。对于大多数对话框不要粗体文本。 
l 提供环境敏感的帮助 对于复杂的对话框，应该为整个对话框提供环境敏感的帮助（通过帮助按钮或F1键访问），或者为个别控件提供控件特定的帮助（通过"这是什么？"按钮或Shift＋F1 键来访问），或者同时提供这两种帮助。 
1.3.1.12. 对话框的主要命令按钮 
l 将主命令按钮与对话框主体分开* 主命令按钮包括像"确定"、"取消"、"关闭"、"帮助"、"停止"、"隐藏"，以及其他相关按钮的等命令按钮。这种分开使主命令按钮更易于查找和识别。
l 认真选择对话框的方向 在西方文化中，人们习惯于从左到右、从上到下进行阅读，因此，将主命令按钮靠底部或右边放置更容易被发现。您应该选择对话框的外观比例与屏幕的外观比例（通常高与宽的比例为3：4）相似的方向。这将使对话框的外观看起来更加舒服，并且更易于在屏幕上进行定位。如果按钮具有不同的大小，那么可以将它们放在对话框菜单底部。当不能确定时，也可以将按钮放在底部，因为这种定位方式最为常见，也更易于阅读。 
l 将排列在底部的主命令按钮右对齐 右对齐主命令按钮适合从左到右的阅读习惯。当只有一个主命令按钮时，您或许希望例外地将其居中放置。

右对齐主命令按钮

l 避免使用多行或多列的主命令按钮 多行或多列的主命令按钮对用户是一个打击。如果有许多主命令按钮，那么注意，通常在右边排成一列与在底部排成一行相比可以放置更多的按钮。另外，您可以考虑使用命令菜单。如果必须使用很多按钮，那么注意使用多行别使用多列的效果好。 
l 对模式对话框，通常提供"确定"和"取消"按钮* 要使用对话框，用户需要能够方便地识别前进（使用"确定"按钮）和后退（使用"取消"按钮）的方式。您可以使用更明确的按钮代替"确定"按钮，但绝对不要在模式对话框中替换"取消"按钮，除非用"停止"来表明正在进行的操作无法取消。 
l 对于非模式对话框或或作为主窗口的对话框，提供"关闭"按钮而不提供"确定"和"取消"按钮* 将"确定"和"取消"按钮用于非模式对话框或作为主窗口的对话框可以使对话框看起来像是模式对话框。而且，当用于非模式环境中时，"确定"和"取消"时没有什么意义的。使用"关闭"按钮可以消除这种混淆。 
l 通常将"确定"按钮排第一，"取消"其次，"帮助"最后* "确定"或其等价按钮通常作为第一个主命令按钮。"取消"按钮应该位于"确定"的右边或下面。将"确定"和"取消"按钮放在一起。"帮助"按钮应该时最后一个按钮。如果没有"确定"按钮，那么应该将"取消"按钮放在"帮助"按钮的前面。这可以使主命令按钮更易于查找和识别。 
l 确保"取消"按钮真正用于取消操作* 当取消时，程序的状态栏应该与之前显示的模式对话框完全相同。如果不是这样，那么应该用"停止"按钮来代替"取消"按钮。模式对话框中的"取消"按钮应该与标题栏中的"关闭"按钮效果相同。而属性表是个例外，因为"取消"按钮不会取消已经应用的更改。 
1.3.1.13. 属性表和属性页 
l 让属性页独立工作 避免使一个属性页的行为或操作受其他属性页的限止。用户不可能发现属性页之间的这种独立关系。在属性页的使用顺序方面应该没有限止。用户应该能够随时查看任意的属性页。 
l 属性页的布局相互独立 一些属性页通常不会占用同样大小的空间。占用空间较小的属性页应该与最大的属性页的布局的格式方式不同，因为将会产生额外的空间（见下图）。

属性页的布局保持独立，避免居中。

界面测试 


我们在工作中总结了一些有关界面设计与测试的规范，与大家共享。 

界面设计与测试规则


界面是软件与用户交互的最直接的层，界面的好坏决定用户对软件的第一印象。而且设计良好的界面能够引导用户自己完成相应的操作，起到向导的作用。同时界面如同人的面孔，具有吸引用户的直接优势。设计合理的界面能给用户带来轻松愉悦的感受和成功的感觉，相反由于界面设计的失败，让用户有挫败感，再实用强大的功能都可能在用户的畏惧与放弃中付诸东流。目前界面的设计引起软件设计人员的重视的程度还远远不够，直到最近网页制作的兴起，才受到专家的青睐。而且设计良好的界面由于需要具有艺术美的天赋而遭拒绝。


目前流行的界面风格有三种方式：多窗体、单窗体以及资源管理器风格，无论那种风格，以下规则是应该被重视的。

1：易用性：
按钮名称应该易懂，用词准确，屏弃没楞两可的字眼，要与同一界面上的其他按钮易于区分，能望文知意最好。理想的情况是用户不用查阅帮助就能知道该界面的功能并进行相关的正确操作。

易用性细则：
1):完成相同或相近功能的按钮用Frame框起来，常用按钮要支持快捷方式。
2):完成同一功能或任务的元素放在集中位置，减少鼠标移动的距离。
3):按功能将界面划分局域块，用Frame框括起来,并要有功能说明或标题。
4):界面要支持键盘自动浏览按钮功能，即按Tab键的自动切换功能。
5):界面上首先应输入的和重要信息的控件在Tab顺序中应当靠前,位置也应放在窗口上较醒目的位置。 
6):同一界面上的控件数最好不要超过10个，多于10个时可以考虑使用分页界面显示。
7):分页界面要支持在页面间的快捷切换，常用组合快捷键Ctrl+Tab
8):默认按钮要支持Enter及选操作，即按Enter后自动执行默认按钮对应操作。
9):可写控件检测到非法输入后应给出说明并能自动获得焦点。
10):Tab键的顺序与控件排列顺序要一直，目前流行总体从上到下，同时行间从左到右的方式。
11):复选框和选项框按选择几率的高底而先后排列。
12):复选框和选项框要有默认选项，并支持Tab选择。
13):选项数相同时多用选项框而不用下拉列表框。
14):界面空间较小时使用下拉框而不用选项框。
15):选项数叫少时使用选项框，相反使用下拉列表框。
16):专业性强的软件要使用相关的专业术语，通用性界面则提倡使用通用性词眼。


2： 规范性：
通常界面设计都按Windows界面的规范来设计，即包含“菜单条、工具栏、工具厢、状态栏、滚动条、右键快捷菜单”的标准格式，可以说：界面遵循规范化的程度越高，则易用性相应的就越好。小型软件一般不提供工具厢。

规范性细则：
1):常用菜单要有命令快捷方式。
2):完成相同或相近功能的菜单用横线隔开放在同一位置。
3):菜单前的图标能直观的代表要完成的操作。
4):菜单深度一般要求最多控制在三层以内。
5):工具栏要求可以根据用户的要求自己选择定制。
6):相同或相近功能的工具栏放在一起。
7):工具栏中的每一个按钮要有及时提示信息。
8):一条工具栏的长度最长不能超出屏幕宽度。
9): 工具栏的图标能直观的代表要完成的操作。
10):系统常用的工具栏设置默认放置位置。
11):工具栏太多时可以考虑使用工具厢。
12):工具厢要具有可增减性，由用户自己根据需求定制。
13):工具厢的默认总宽度不要超过屏幕宽度的1/5。
14): 状态条要能显示用户切实需要的信息，常用的有：目前的操作、系统状态、用户位置、用户信息、提示信息、错误信息等，如果某一操作需要的时间较长，还应该显示进度条和进程提示。
15)：滚动条的长度要根据显示信息的长度或宽度能及时变换，以利于用户了解显示信息的位置和百分比。
16)：状态条的高度以放置五好字为宜，滚动条的宽度比状态条的略窄。
17)：菜单和工具条要有清楚的界限;菜单要求凸出显示，这样在移走工具条时仍有立体感。
18)：菜单和状态条中通常使用5号字体。工具条一般比菜单要宽，但不要宽的太多，否则看起来很不协调。
19):右键快捷菜单采用与菜单相同的准则。

本文转自kenty博客园博客，原文链接http://www.cnblogs.com/kentyshang/archive/2007/12/14/994670.html如需转载请自行联系原作者

kenty