UI设计规范

UI设计 规范 编程规范下载gsp规范下载钢格栅规范下载警徽规范下载建设厅规范下载 版本 V1.0 作者 参与者 更新日期 2008年5月9日修订记录 版本号 修订 内容 财务内部控制制度的内容财务内部控制制度的内容人员招聘与配置的内容项目成本控制的内容消防安全演练内容 修订人 修订日期 目录1 以用户为中心的设计原则 51.1 用户控制 51.2 直接 51.3 一致 51.4 容错 51.5 反馈 51.6 美学 51.7 响应速度 51.8 简单 62 以用户为中心的设计原则详述 62.1 用户控制 62.2 直接 62.3 一致 72.4 容错 72.5 反馈 72.6 美学 82.7 响应速度 82.8 简单 83 界面细节约定 93.1 界面风格 93.1.1 布局 93.1.2 普通外观 93.1.3 安装 113.1.4 启动界面 113.1.5 Windows的可视提示 113.1.6 交互 123.1.7 程序 133.1.8 默认 143.1.9 窗体 153.1.10 布局和间距 163.1.11 图标、图片 173.1.12 提示信息Hint 183.1.13 标点符号 193.1.14 对话框 193.1.15 对话框的主要命令按钮 213.1.16 属性 表 关于同志近三年现实表现材料材料类招标技术评分表图表与交易pdf视力表打印pdf用图表说话 pdf 和属性页 233.1.17 向导 243.1.18 控件 243.1.19 按钮 253.1.20 复选框 273.1.21 单选按钮 273.1.22 组合框 283.1.23 编辑框 283.1.24 数据输入 303.1.25 滑块 303.1.26 静态文本 303.1.27 列表框 313.1.28 列表视图 323.1.29 滚动条 323.1.30 状态栏 323.1.31 分组框 323.1.32 菜单 333.1.33 上下文菜单 343.1.34 工具栏 353.1.35 工具提示 353.1.36 文本 363.1.37 消息框 373.1.38 错误消息 383.1.39 字体 393.1.40 颜色 393.1.41 标签 403.1.42 快捷键 403.1.43 加速键 413.1.44 光标定位 413.1.45 系统响应时间 413.1.46 错误处理 423.1.47 帮助 433.1.48 其它各种细节 453.2 统一术语 463.2.1 术语的重要性 463.2.2 命名 463.2.3 用用户的语言说话 473.2.4 要避免的术语 474 更改和追加说明 474.1 更改说明 474.2 追加说明 471以用户为中心的设计原则1.1用户控制用户界面设计的一个重要原则是用户应该总是感觉在控制软件而不是感觉被软件控制。1.2直接每个用户界面都应支持用户可以直接处理软件的信息表示，做到所见即所得。1.3一致一致允许用户将已有的知识传递到新的任务中，更快地学习新事物，并将更多的注意力集中在任务上。这是因为他们不必花时间来尝试记住交互中的不同。通过提供一种稳定的感觉，一致使得界面熟悉而又可预测。1.4容错一个有效的界面允许交互式的发现。它只提供一组合适的选择，并警告用户可能破坏系统或数据的情况，或者如果更好，采用可逆转或可还原的操作。1.5反馈总是对用户的操作提供反馈。1.6美学可视设计是应用程序界面的重要部分。可视属性提供了非常好的印象，并传达特定对象的交互行为的重要线索。1.7响应速度良好的界面应对用户的操作提供快速的支持。1.8简单界面应该很简单（不是过分单纯化）、易于学习，并且易于使用。2以用户为中心的设计原则详述122.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反馈总是对用户的操作提供反馈。良好的反馈有助于确认系统正在响应输入，并传达区分操作特征的细节。有效的反馈是及时的，并且尽可能接近用户交互的那个点显示。即使当计算机正在处理一个特定的任务时，也要为用户提供有关该进程的状态以及如何取消该进程（如果这是一个选项）的信息。对于用户来说，没有什么比对输入没有反应的“死”屏更令人困惑的了。122.12.22.32.42.52.5.1系统提供的反馈类型应适合当前任务。系统可以通过指针更改或状态栏消息来传达简单的信息；对于更复杂的任务，系统应提供一个进程控件或者消息框的显示方式反馈用户。2.5.2提供可视反馈。在后台运行需要很长时间时（时间超过1～10秒，视具体情况而定），必须提供进度条等信息指示。2.5.3除非特别必要时，不要提供声音反馈。在有严重的问题发生时，可以使用声音来提示用户，但是通常应该允许用户取消声音。2.5.4保持文字内容清楚。信息的表达要言简意赅，易于理解而又不罗嗦；避免使用冗长的文字给用户反馈。2.6美学可视设计是应用程序界面的重要部分。可视属性提供了非常好的印象，并传达特定对象的交互行为的重要线索。同时，记住出现在屏幕上的每一个可视元素也是很重要的，它们可能竞争用户的注意。提供清楚地促进用户对表达信息理解的连贯环境。图形或可视设计器对于设计这一方面是无价的。2.7响应速度2.62.72.7.1保持界面能很快对用户操作做出反应。2.7.2提供快捷键。特别对于有大量录入项的界面，能让用户不使用鼠标即可完成快速数据录入。在用户界面中加入一些功能，这些功能可以让熟练用户在不同的区域快速的输入数据。这些功能包括重复功能、快捷键、带有有意义的图标的按钮等等，所有这些可以使速度快的用户可以控制界面并加快数据的输入。2.7.3除非必要，不要重绘屏幕。2.8简单界面应该很简单（不是过分单纯化）、易于学习，并且易于使用。2.82.8.1必须提供对应用程序的所有功能的访问。在界面中，扩大功能和保持简单是相互矛盾的。一个有效的设计应该平衡这些目标。2.8.2支持简单性的一种方法是将信息的表示减少到进行充分交流所需的最少信息。例如，避免命令名和消息的文字描述。不相关或冗长的句子扰乱了您的设计，使得用户难以很容易地提取重要信息。另一个设计简单而有用的界面的方法是使用自然的映射和语意。界面元素的排列和表示影响它们的意义和关联。2.8.3简单还与熟悉相互关联。熟悉的事物通常似乎更简单。尽可能尝试建立利用用户已有的知识和经历的联系。2.8.4系统应使用渐进揭示来帮助用户管理复杂的事物。"渐进揭示"涉及到仔细的信息组织，以便只在恰当的时候才显示信息。通过隐藏向用户表达的信息，减少了用户必须处理的信息数量。例如，可以使用菜单来显示操作或选择的列表，还可以使用对话框来显示一组选项。2.8.5渐进揭示并不意味着对显示信息使用非传统的技术，例如需要一个修饰键作为访问基本功能的唯一方法，或者强迫用户通过一个更长的分级交互序列。这会使用户界面更加复杂和麻烦。3界面细节约定1233.1界面风格1233.13.1.1布局1233.13.1.13.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.23.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注意大小使用用户界面控件的分辨率具有独立性。使用系统规格(使用GetGystemMetricsAPI函数)或文本规格(使用GetTextMetrics或GetTextExtentPoint32API函数)来确定用户界面控件的大小。任何显示文本的对象（如对话框或定义的文本文档）都应该使用文本规格。3.1.2.10考虑使用资源或预定义的布局网格资源模板或预定义的布局网格有助于在不同的窗口之间实现一致性。3.1.2.11注意对话框应该有一个紧凑、从左到右、从上到下的流程，并且，左对齐的标签很便于浏览；通过对齐编辑框并调整其大小，使它显得更有组织，更加平衡。3.1.3安装安装过程设计主要是将软件安装的过程进行美化，包括对软件功能进行图示化。1233.13.1.13.1.23.1.33.1.4启动界面3.1.43.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.53.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.63.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像数；对话框窗体大小尽量不要超过640*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标题栏按钮(TitleBarButton)：服务端跟客户端的标题栏按钮包括：最小化、最大化、关闭；出现在标题栏的右侧；普通窗体的标题栏按钮只包括关闭按钮；出现在标题栏的右侧；3.1.9.10信息框内容(MessageBox)：信息框内容部分包括图标、文字信息、确认取消按钮；图标分注意及警告两种，具体标准参见图标(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图标尺寸WindowsXP图标有四种尺寸：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中双击图像的图层，并选择DropShadow。然后将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透明工具将GifMovieGear(GMG)打开一个对话框，其中显示您的图标。使用吸管工具单击图标的背景色。此颜色将更改为暗黄绿色(或在GMG中选作透明背景色的颜色)。重复所有4位和8位帧。若要保存图标，请选择File->SaveIconAs...。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.14.1对话框应该在所有视频模式下都能够正确显示当在VGA（显卡输出的模拟信息接口）模式（640×480）下显示时，对话框应该不超过640×460（留20像素给任务栏）。这将确保对话框能够显示在所有的视频模式下。3.1.14.2确保模式对话框的模式确保使用具有父窗口的模式对话框都提供正确的父窗口句柄，而不时提供NULL句柄。如果没有提供父窗口句柄，那么父窗口仍处于活动状态，因此该对话框实际上并不是模式对话框。3.1.14.3不要使用可滚动的对话框也就是说，不要使用需要滚动条来进行完全查看的对话框。这种对话框使用起来非常不方便，并且也时完全不必要的。应该重新设计这种对话框。3.1.14.4不要在作为二级窗口的对话框中使用菜单栏使用这种对话框需要付出很多努力。注意，在用做主窗口的对话框（如"查找"实用工具）中，菜单栏时可以接受的。还要注意的是，在所有对话框中，快捷菜单和菜单按钮都是可以接受的。二级对话框不要使用菜单栏，但可以使用菜单按钮。3.1.14.5不要在作为二级窗口的对话框中使用标题栏图标标题栏图标用于区别主窗口和二级窗口。3.1.14.6不要在任务栏上显示作为二级窗口的对话框注意，单击主窗口的任务栏图标也将激活二级窗口。3.1.14.7对于相似的对话框，使用控件位置来强调其相似性。如果意义相同的同一控件出现在一些相似的对话框中，那么它应该显示在相同的位置。另一方面，应避免将可能会产生混淆的不同控件放在同一位置。3.1.14.8对非模式对话框最好使用可停放的对话框可停放对话框在功能上与非模式对话框是等效的，但其位置设置更为灵活。3.1.14.9策略地设置输入焦点将最初的输入焦点设置在最可能首先使用的控件上。3.1.14.10在对话框标题文本中不要出现省略号例如，作为选择"打印选项..."命令结果而显示地对话框的标题应该为"对于选项"。但是，表示命令正在执行过程中菜单对话框（如"连接到Internet..."对话框）是一种例外情况。3.1.14.11为所有可处理访问键的控件分配访问键访问键可以使用户的手保持在键盘上，从而使访问程序更加方便。您可以直接在其标题中为诸如命令按钮、单选按钮、复选框等控件分配访问键。通过提供静态文本标签或带有访问键、在Tab顺序上先于控件的组框，您可以为诸如编辑框、列表框、组合框等控件分配访问键。在其他情况下不要为组框分配访问键--这会使人产生混淆。"确定"按钮没有访问键，因为在作为默认按钮时，它通过提Enter键来选定的。"取消"按钮也没有访问键，因为Esc键预览清除模式对话框。如果可能，避免使用小写的g、j、p、q或y作访问键，也避免使用这些字母前后的字母作为访问键。下划线不能与这些字母的下行字母分开。当然，访问键必须是唯一的。3.1.14.12避免使用粗体文本尽量少使用粗体文本。在Windows3.1的对话框中，粗体文本用于在旧式的视频硬件上绘制被禁用的文本（即抖动的灰色文本）。因为现在的视频硬件可以绘制没有抖动的灰色文本，所以Windows为了使外观更加清洁，现在Windows在对话框中使用正常文本。粗体文本仅用于强调。对于大多数对话框不要粗体文本。3.1.14.13提供环境敏感的帮助对于复杂的对话框，应该为整个对话框提供环境敏感的帮助（通过帮助按钮或F1键访问），或者为个别控件提供控件特定的帮助（通过"这是什么？"按钮或Shift＋F1键来访问），或者同时提供这两种帮助。3.1.15对话框的主要命令按钮3.1.15.1将主命令按钮与对话框主体分开主命令按钮包括像"确定"、"取消"、"关闭"、"帮助"、"停止"、"隐藏"，以及其他相关按钮的等命令按钮。这种分开使主命令按钮更易于查找和识别。3.1.15.2认真选择对话框的方向在西方文化中，人们习惯于从左到右、从上到下进行阅读，因此，将主命令按钮靠底部或右边放置更容易被发现。您应该选择对话框的外观比例与屏幕的外观比例（通常高与宽的比例为3：4）相似的方向。这将使对话框的外观看起来更加舒服，并且更易于在屏幕上进行定位。如果按钮具有不同的大小，那么可以将它们放在对话框菜单底部。当不能确定时，也可以将按钮放在底部，因为这种定位方式最为常见，也更易于阅读。3.1.15.3将排列在底部的主命令按钮右对齐右对齐主命令按钮适合从左到右的阅读习惯。当只有一个主命令按钮时，用户或许希望例外地将其居中放置。3.1.15.4避免使用多行或多列的主命令按钮多行或多列的主命令按钮对用户是一个打击。如果有许多主命令按钮，那么注意，通常在右边排成一列与在底部排成一行相比可以放置更多的按钮。另外，您可以考虑使用命令菜单。如果必须使用很多按钮，那么注意使用多行别使用多列的效果好。3.1.15.5对模式对话框，通常提供"确定"和"取消"按钮要使用对话框，用户需要能够方便地识别前进（使用"确定"按钮）和后退（使用"取消"按钮）的方式。您可以使用更明确的按钮代替"确定"按钮，但绝对不要在模式对话框中替换"取消"按钮，除非用"停止"来表明正在进行的操作无法取消。3.1.15.6对于非模式对话框或作为主窗口的对话框，提供"关闭"按钮而不提供"确定"和"取消"按钮。将"确定"和"取消"按钮用于非模式对话框或作为主窗口的对话框可以使对话框看起来像是模式对话框。而且，当用于非模式环境中时，"确定"和"取消"时没有什么意义的。使用"关闭"按钮可以消除这种混淆。3.1.15.7通常将"确定"按钮排第一，"取消"其次，"帮助"最后。"确定"或其等价按钮通常作为第一个主命令按钮。"取消"按钮应该位于"确定"的右边或下面。将"确定"和"取消"按钮放在一起。"帮助"按钮应该时最后一个按钮。如果没有"确定"按钮，那么应该将"取消"按钮放在"帮助"按钮的前面。这可以使主命令按钮更易于查找和识别。3.1.15.8确保"取消"按钮真正用于取消操作当取消时，程序的状态栏应该与之前显示的模式对话框完全相同。如果不是这样，那么应该用"停止"按钮来代替"取消"按钮。模式对话框中的"取消"按钮应该与标题栏中的"关闭"按钮效果相同。而属性表是个例外，因为"取消"按钮不会取消已经应用的更改。3.1.16属性表和属性页3.1.16.1让属性页独立工作避免使一个属性页的行为或操作受其他属性页的限止。用户不可能发现属性页之间的这种独立关系。在属性页的使用顺序方面应该没有限止。用户应该能够随时查看任意的属性页。3.1.16.2属性页的布局相互独立一些属性页通常不会占用同样大小的空间。占用空间较小的属性页应该与最大的属性页的布局的格式方式不同，因为将会产生额外的空间（见下图）。属性页的布局保持独立，避免居中。3.1.16.3用属性表代替使用带选项卡的对话框使用属性表而不使用带选项卡的对话框除了具有一致性之外，没有什么明显的实用性优势。另外，对于实际显示对象属性的对话框使用属性表，而对于其他用途，所有带选项卡的对话框。3.1.16.4对属性显示总采用属性表，即使仅有一个页采用属性表能够明确告诉用户查看的使属性而不是一般的对话框。属性表有一个"应用"按钮来帮助用户测试设置。3.1.16.5绝对不要使用两行以上的标签最好使用一行标签，但两行也是可接受的，两行以上就太多了，可用级连属性设置或多个对话框代替。3.1.16.6总为属性提供"应用"按钮再说一次，提供"应用"按钮帮助用户对设置进行测试。3.1.16.7对显示属性的属性表总是在其标题中写上"属性"一词和对象的名称请注意，不是所有的属性表都是用来显示属性的。3.1.16.8总将命令按钮放在右边适用于所有页的命令按钮必须置于标签页区域的外面，而仅适用于单个页的命令按钮必须置于该标签页的里面。3.1.17向导3.1.17.1对高级的、复杂的或不常用的任务使用向导。3.1.17.2向导对非常高级或复杂的任务十分有用，省去了用户许多麻烦的操作。当向导用于不常用的任务时，其效果最好。对常用任务使用向导则显得大而不当。3.1.17.3对于应用中某些部分的处理流程是固定的，用户必须按照指定的顺序输入操作信息，为了使用户操作得到必要的引用应该使用向导，使用户使用功能时比较轻松明了，但是向导必须用在固定处理流程中，并且处理流程应该不少于3个处理步骤。3.1.18控件3.1.18.1尽量采用标准控件尽可能采用标准控件（6个最早的控件和新的Win32常用控件）。采用非标准控件的程序与绝大多数Windows程序看起来不一致。只用完全合理时才使用自定义控件。3.1.18.2控件命名控件命名统一采用"简写_控件名称"的方式，其中"简写"由控件在系统中的默认英文名称的大写字母组成，如TextBox控件则"简写"为"tb"；"控件名称"一般根据控件的用途或者控件显示的内容进行命名，比如：LoginName，则整个控件可以命名为"tb_LoginName"。3.1.18.3控件布局控件间距·控件对窗体的覆盖率以不高于75%为宜。·控件间隔（垂直）：组与组之间间隔15，组内控件间间间隔10。·控件间隔（水平）：组与组之间间隔15，组内控件间间间隔10。注：控件间间隔应该根据窗体的覆盖率灵活进行调整，但以大于10为宜；而且在整个系统内，采用统一的控件间隔。可以通过调整窗体大小达到一致，即使在窗体大小不变的情况下，宁可留空部分区域，也不要破坏控件间的间隔。控件对齐·控件水平排列成一行时，采用水平中对齐,控件间隔按要求基本保持一致。行与行之间间隔相同，靠窗体边界距离应大于行间间隔。当窗体中有多个编辑区域时，以视觉效果和效率来分组组织这些区域。文字对齐·界面文字（包括数字和英文字母），一般情况下都应垂直右对齐，并且使用中文全角标点符号。3.1.18.4将无效控件置为不可用。将不适用于当前程序状态的控件置为不可用。3.1.18.5取消不必要滚动条。尽量使控件的尺寸足够大，避免使用滚动条。3.1.18.6各复选框和选项框按选择几率的高低而先后排列。3.1.18.7复选框和选项框要有默认选项，并支持Tab选择。3.1.18.8界面空间较小时使用下拉框而不用选择框。3.1.18.9选项数较少时使用选项框，相反使用下拉列表框。3.1.19按钮3.1.19.1软件按钮设计应该具有交互性，即应该有3到6种状态效果：点击时状态；鼠标放在上面但未点击的状态；点击前鼠标未放在上面时的状态；点击后鼠标未放在上面时的状态；不能点击时状态；独立自动变化的状态。3.1.19.2按钮应具备简洁的图示效果，应能够让使用者产生功能关联反应，群组内按钮应该风格统一，功能差异大的按钮应该有所区别。3.1.19.3无效按钮要屏蔽3.1.19.4采用最小的宽度和标准的高度带文字的命令按钮应该采用50个对话单位（75个像素点）的最小宽度、14个对话单位(21个像素点)的标准高度。尽量将不同大小的带文字命令按钮的个数控制在两个以内。对父窗口拖动（owner-draw）按钮或无文字的按钮（如"…"），其大小可以任意设置，原则是使命令按钮外观简朴一致。高度大于14个对话单位(21个像素点)的按钮看起来不够专业。尽管不限制命令按钮的最大宽度，但宽度超过200个对话单位的按钮使不妥当的。3.1.19.5尽量采用省略号来表示需要更多信息命令中的省略号表示执行命令时需要更多信息，而不是简单的确认。省略号并不表示一定会出现对话框。3.1.19.6绝对不要指定双击行为用户意料不到命令按钮会响应双击，因此不可能发现这样的行为。3.1.19.7一般情况下，"确定"和"取消"按钮的属性设置如下：btnOk:TButtonCaption='确定'Default=TrueModalResult=mrOkendobjectbtnCancel:TButtonCancel=TrueCaption='取消'ModalResult=mrCancelEnd3.1.19.8"确定"和"取消"按钮一般被映射为Enter键和Esc键，因此不应该对它们指定访问键，除此以外的命令按钮都应该指定一个访问键。3.1.20复选框3.1.20.1用复选框开关选项，用单选按钮改变模式用复选框进行选项的开关操作是很有效的，但如果用来将模式改变为另外一种状态就难免让人迷惑了。例如，可用一个复选框来表示是否显示工具栏，但若用复选框来切换打印机的横向模式和纵向模式就会使人糊涂，对横向和纵向模式应该用一组单选按钮代替。3.1.20.2避免一组复选框中选项个数超过8个应该考虑用复选框列表代替，它占用的空间更少，但复选框列表需要滚动时使用就稍稍麻烦了。尽管控件足够或保持与同一窗口中其他复选框一致时，采用复选框时可取的，但大于8个左右的复选框就未免太多了。3.1.20.3考虑将修改组的复选框置于应该分组框中这样的分组使得复选框之间的关系更为明显。3.1.20.4宁可竖向对齐虽然更合适的情况下采用横向对齐或直角对齐也是可以接受的，但竖向对齐的一组复选框更易于浏览。3.1.21单选按钮3.1.21.1避免一组单选按钮中的选项个数超过8个考虑用列表或组合框代替，它们占用的空间更少，但要记住控件使用更麻烦些。尽管控件足够或保持与同一窗口中其他单选按钮一致时，采用单选按钮是可取的，但多于8个的单选按钮未免太多了。3.1.21.2避免使用单选按钮进行开/关或是/否选择用复选框代替。3.1.21.3总将单选按钮置于一个分组框中由于单选按钮是一组相互排斥的选项，所以分组框使选择更为明确。3.1.21.4宁可竖向对齐虽然更合适的情况下采用横向对齐或直角对齐也是可以接受的，但竖向对齐的一组单选按钮更易于浏览。3.1.22组合框3.1.22.1总给组合框提供一个标签必须用标签来表明组合框的用途。3.1.22.2使组合框的下拉列表最少有5行长少于5行的列表就没有可用的滑块，不易于滚动。请注意，如果组合框没有足够的列项来填满列表，那么将自动缩短列表的长度。3.1.22.3避免组合框的列项少于4个考虑用单选按钮代替，它们虽然多占空间，但更易于操作。如果空间更为重要或为了保持与同一窗口中的其它组合框一致时，采用组合框则更为可取。3.1.23编辑框3.1.23.1尽量给编辑框提供一个标签必须用标签来标明编辑框的用途。如果标签在左边，将标签文字与编辑框文本垂直对齐。3.1.23.2避免有输入限制的编辑框将编辑框用于用户对任何文本的输入或数字编辑框用于数字的编辑。对于输入受限的情况，使用其他的控件，如组合框、列表、滑块和微调框。对于日期和时间，使用日期和时间拾取控件。3.1.23.3用微调框和浏览按钮使编辑框可视微调框和浏览按钮是简单的可视机制，它们帮助用户在编辑框中进行有效的输入。避免让用户必须输入。仅对数字编采用带微调框的编辑框，对于文本，使用组合框代替。3.1.23.4按期望输入来设置编辑框的宽度编辑框的宽度是对期望输入的可视提示。例如，如果用户是输入地址，两个字符宽的State字段明显暗示用户输入两个字符的州名缩写。如果期望的输入没有特别的大小，就选择与其他编辑框或控件一致的宽度。3.1.23.5尽量采用数字编辑框用于数字输入当用户在数字字段中输入非数字文本时，不应该有任何出错消息。3.1.23.6必输项。必输项中不可为空，不可输入空格；必输项给出必输项标识（*）。3.1.23.7字段长度。超过数据库规定长度时不允许输入。3.1.23.8格式校验。身份证号、E-MAIL、邮箱等特定字段的格式要符合需求的规定。3.1.23.9日期格式。日期显示格式一致，如：yyyy-mm-dd；使用日期控件，尽量不是手工录入。3.1.23.10特殊字符。输入区域输入特殊字符，插入数据库时不出错或提示不允许输入特殊字符。特殊字符包括：'"=~$%^%￥&#@等。3.1.23.11英文输入。英文输入不区分大小写，不可输入汉字、数字及特殊字符。3.1.23.12数值字段。只能输入+-0~9及功能键(BackSpace光标)。3.1.23.13单行文本框/多行文本框。长度合适，可以容纳相应文字，但不能超过数据库该字段长度，最好将可以输入的最大字符数标在旁边。建议单行文本框中当输入的字符超过一定长度时再输入无效；对于多行文本框给出最大字符数标识。3.1.23.14密码输入。需在需求中定义密码是否允许为空或空格；密码是否允许特殊字符；是否区分大小写，密码的可输入长度；程序中应给出文字说明密码的可输入长度。3.1.24数据输入3.1.24.1尽量减少用户输入动作的数量；3.1.24.2维护信息显示和数据输入的一致性；3.1.24.3交互应该时灵活的，对键盘和鼠标输入的灵活性提供支持；3.1.24.4在当前动作的语境中使不合适的命令不起作用；3.1.24.5让用户控制交互流，用户可以跳过不必要的动作、改变所需动作的顺序（如果允许的话）以及在不退出系统的情况下从错误状态中恢复；3.1.24.6消除冗余输入。可能的话提供缺省值、绝不要让用户提供程序中可以自动获取或计算出来的信息。3.1.24.7为所有输入的动作提供帮助；3.1.25滑块3.1.25.1总给滑块提供一个标签必须用标签来标明滑块的用途。而且，滑块还应该有标明高、低值意义和当前选择的标签--当然都不带冒号。3.1.26静态文本3.1.26.1左对齐静态文本标签左对齐使得标签外观更有条理，且易于浏览。3.1.26.2宁可将静态文本标签置于相关控件的左边，而不是上面这样对齐使标签更易于被发现，且方便了标签和控件的浏览。很明显，长控件是例外情况，如列表视图、树形视图（Tree）和多行编辑框。3.1.26.3总在用于标识控件的静态文本标签后带上冒号使用冒号明显表示为控件标签的文本。为控件提供附加信息的标签不应该有冒号，如用来解释滑块控件的标签。标签也可作为屏幕读出器的输入信息。3.1.26.4对非标签文本总用只读编辑框只读编辑框允许用户将文本复制到剪贴板上，并在文本比控件长时可进行滚动。3.1.26.5不要把静态文本置于凸起的边界上在凸起边界上的静态文看起来像按钮，因而用户会试图单击它。3.1.27列表框3.1.27.1总给列表框提供一个标签必须用标签来标明列表框的用途。3.1.27.2使列表框至少5行长少于5行的列表没有滑块，不便于滚动。如果列表框没有滚动条，那么使用一个更短的列表框也是可以接受的。3.1.27.3对多个选择考虑采用复选框复选框列表可以突出其多个选择的能力。如果不能接受复选框列表，那么可以采用多选列表，并用静态文本表示选项个数，清楚指明可进行多项选择。3.1.27.4对多选列表考虑提供"全部选中"和"全部取消选中"命令由于希望全部选中或全部取消使常见的事情，所以这两个命令方便了用户进行多项选择。3.1.28列表视图3.1.28.1总给列表视图提供一个标签必须用标签来标明列表视图的用途。3.1.28.2使列表视图至少5行长少于5行的列表视图没有滑块，不便于滚动。如果列表视图没有滚动条，那么使用一个更短的列表视图也是可以接受的。3.1.28.3仅在列表可排序时采用可单击的表头可单击的表头只应用于排序。首次单击时应按正序对列表进行排序，而第二次单击时按反序进行排列。3.1.28.4对列项大约超过30的列表视图总使其可进行排序用户能够对列表进行排序方便了对信息的查找。3.1.29滚动条3.1.29.1滚动条仅用于滚动。使用滑块或微调框来设置数值。3.1.29.2使滚动条足够长，保证有可用的滑块。没有滑块的滚动条不便于使用。3.1.30状态栏状态栏是为了对软件当前状态的显示和提示。3.1.31分组框3.1.31.1利用分组框分组相关控件尽管分组框通常是用于单选按钮的分组，但也可用于任何控件的分组。避免使用只有一个控件的分组框，除非是为了保持与同一对话框中其他分组框一致。3.1.31.2考虑采用静态线或文本标签来代替分组框分组框多时要