用户界面设计规范.doc

【精品文档】如有侵权，请联系网站删除，仅供学习与交流用户界面设计规范.精品文档.用户界面设计规范版本：1.1作者：伍守林日期：2003年4月15日描述：用户界面设计规范     本规范作为公司工具类软件和解决方案类软件的原型和最终产品的用户界面设计工作的指导文件，是Windows应用程序应该遵循的指导方针，没有特殊的情况，各项目组不得违反本规范。如有规范内未尽的事宜，应与LPDT及品牌中心协商后解决。用户界面设计前的准备工作确定用户界面风格    在正式进行用户界面的设计工作之前，需要先确定产品的用户界面风格，用户界面风格是用户界面设计的指导性文件，这在多人同时进行用户界面设计的时候尤其有用。在确定用户界面风格的过程中，往往需要回答诸如下面的一些问题：· 判断当前产品是解决方案类软件还是工具类软件？这是两种截然不同的软件，应该采用不同的用户界面风格。 · 确定是采用单文档还是多文档的方式 · 确定窗体的整体布局方案，尤其是主窗体的布局方案。 · 确定系统的配色方案，包括需要使用哪几种颜色，分别在什么情况下使用等？ · 确定系统所使用的字体，包括需要使用哪几种字体，分别在什么情况下使用等？ · 确定系统推荐使用的分辨率。 · 是否支持复杂的鼠标操作，比如滑轮、拖放等？ · 是否使用菜单（包括右键菜单）？ · 对话框是尽量采用模式对话框还是尽量采用非模式对话框？是否采用泊靠形式？ · 确定主要使用的控件尤其是一些关键的控件。 建立统一的术语在用户界面设计之前，为用户界面中的每一个重要的程序元件建立统一的术语是很重要的。由于选择的术语经常以菜单、对话框、状态栏文本、帮助系统、文献等形式出现在实际的界面上，统一的术语能够使得界面清晰而一致。普通外观· 一致性：一致的外观将使用户界面更易于理解和使用· 保持简洁明快，尽量少用无谓的装饰，应该考虑节省屏幕空间、以及各种分辨率的大小，缩放时的状态和原则等，并且为将来设计的按钮、菜单、标签、滚动条及状态栏等预留位置· 设计中将整体色彩组合进行合理搭配（参考颜色），将软件商标或产品LOGO放在显著位置。· 布局：人们一般习惯从左到右和从上到下进行阅读，因此，应该将重要信息放在上面和左边。如：主菜单应放在左边或上边，滚动条放在右边，状态栏放在下边，以符合视觉流程和用户使用心理。· 对齐：通常使用左对齐，数字则采用右对齐。对于非数字文本，尽量不要使用右对齐和中间对齐，因为在右边或者底部保留空白更适合习惯。 · 分组：将相关的用户界面分成组，以体现它们之间的关系。 · 强调：使用焦点、位置、分组、层次、启用/禁用、大小、颜色或者字体等，来将用户的注意力集中在首先需要看到的用户界面元件上。 · 可视的提示：尽量使用近似的大小和间距来指出用户界面元件是相似的，而使用不同的大小和间距来指出用户界面元件是不同的。····1·· 警惕空洞： 不要到处粘贴公司或产品的名称及LOGO。虽然在启动屏或“关于”对话框出现公司或产品的名称及LOGO是可以接受的，但其它窗口的可用空间应该用于其它内容，如果没有其它内容，则尽量缩小窗口。Windows的可视暗示· 可以单击突起的项目 · 可以单击当鼠标从其上移过的时候突出显示的项目 · 不能单击下凹的项目 · 可以编辑具有白色背景和闪烁垂直条（光标）的项目 · 不能编辑具有灰色背景的项目 · 灰色项目是被禁用的 · 可以拖动突起的线条 用户交互· 具有明显后果的操作应该要求用户进行明确的选择：用户需要完全明确他将要进行危险性操作或者破坏性操作。 · 对于所有耗时的操作都给出反馈：在进行长时间的操作时，要确保有等待光标、进度表或其它的可视反馈。用户应该能够取消长时间的操作。如果可以取消未完成的操作，那么将标记按钮记为“取消”，否则将按钮标记为“停止”。 · 可视的指示模式：向用户提供一种可视的反馈，以指出用户进入一种新的模式，通常可以通过更改光标的形状或者标题栏文本来作到这一点。 · 确保单击和双击的一致性：单击用于非按钮选定，而双击用于选定并执行默认操作。换句话说，双击（在列表框、组合框或其它接受双击的控件中）的效果应该与选定控件中的一个项目，然后按Enter键的效果应该一致。 · 鼠标右键仅用于快捷菜单：不要把鼠标右键用于其它用途 · 不要使用鼠标中键 · 保持分配的快捷键的一致性 · 将快捷键作为补充方式：千万不要将快捷键作为访问命令的唯一方法。 · 避免水平滚动条：与垂直滚动条相比，水平滚动条很不受欢迎，因为它会造成用户阅读困难，解决办法有：尽量使用垂直滚动条、加宽窗口、减小文本的宽度、或者使文本自动换行。当然如果需要还是可以使用水平滚动条术语· 使用相同的术语来描述同一事物· 口语化、客气、多用您、请，不要用或少用专业术语，杜绝错别字。· 注意断句、逗号、句号、顿号、分号等的用法，提示信息比较多的话，应该分段，保证用户充分理解文字的含义。· 警告、信息、错误，使用对应的表示方法。· 使用统一的语言描述，例如一个关闭功能按钮，可以描述为退出、返回、关闭，则应该统一规定，并明确定义文字表达的含义。默认· 通常应该保存和恢复用户选择，程序应该能够帮助恢复其到最后退出的状态。MDI程序应该能够恢复文档窗口的大小和位置。对话框通常应该使用最后输入的值作为默认值 · 提供适当的默认值，通过提供适当的默认值来减少用户不必要的操作，从而帮助用户完成工作 · 考虑选择默认值时的安全性，不应该将不可恢复或破坏性的操作设置为默认值。 中英文问题· 标签后面的冒号使用英文 · 夹在中文中间的标点符号采用中文，夹在英文中间的用英文 · 菜单的快捷键前后的括号使用英文 图标· 应用程序图标64×64 32bit、48×48 32bit、32×32 32bit、24×24 32bit、16×16 32bit48×48 16bit、32×32 16bit、24×24 16bit、16×16 16bit32×32 4bit、16×16 4bit注：Windows 2000及以下版本支持16bit图标而Windows xp 支持32bit的图标，全规格的图标可以在不同系统中自动匹配，4bit的图标主要用于“安全模式”中显示· 工具栏图标规格：24×24 16bit、16×16 16bit16×16 4bit· 菜单图标规格：16×16 16bit16×16 4bit· 同一功能区或工具栏的图标风格应当保持一致，很清晰的表达出意思，遵循常用标准，或者用户容易联想的到物件。当所表达的功能比较复杂时，表达出主要意思即可。· 程序图标根据不同产品所定的色系确定，工具栏及菜单的图标根据功能进行设计，尽量减少色彩的种类。对话框· 对话框一般情况下不允许使用滚动条 · 对话框不允许包含菜单栏 · 对于非模式对话框尽量使用泊靠窗口的方式 · 将最初使用的焦点放在最可能被首先使用的控件上 · 给可使用快捷键的按钮分配快捷键 · 对话框的高与宽的比例尽量保持在3:4 · 对话框的高宽像素数尽量取整数，如：350、500等    以下是对对话框中主要命令按钮的说明，所谓主要命令按钮包括像“确定”、“取消”、“关闭”等。· 将主要命令按钮与对话框的主体分开。· 认真选择命令按钮的方向，人们习惯于从左到右或者从上到下进行阅读，因此将主命令按钮靠底部或者右边放置更容易被发现。当主命令按钮的大小不一致时，应该放在底部。在两种情况都可以时应该放在底部，因为这种方式更常见，也更易于阅读。· 将排列在底部的主命令按钮向右对齐。 · 避免使用多行或者多列的主命令按钮。如果有许多主命令按钮，那么注意，通常在右边排成一列与在底部排成一行相比能放置更多的按钮，另外也可以考虑使用命令菜单。如果必须使用，则使用多行比使用多列的效果好。 · 对模式对话框，通常提供“确定”和“取消”按钮。要使用模式对话框，用户需要能够方便地识别前进（“确定”按钮）和后退（“取消”按钮），也可以使用更明确的按钮代替“确定”按钮，但一般不要替换“取消”按钮。 · 对非模式对话框，提供“关闭”按钮而不提供“确定”和“取消”按钮。 · 通常将“确定”按钮排第一，“取消”其次，“帮助”最后。 · 确保取消按钮真正用于取消操作，当取消时，程序的状态应该与之前显示的模式对话框完全相同。 下面说明对话框中各控件的位置 · 各边最靠近边缘的控件与窗体距离为10个像素· 对话框内部控件之间的垂直距离为7个像素· GroupBox1应该与GroupBox2左对齐· CheckBox1应该与CheckBox2左对齐· OK按钮应该与其它两个按钮左对齐属性表和属性页（多页控件）· 让属性页独立工作，避免使一个属性页的行为或操作受其它属性页的限制。用户不可能发现属性页之间的这种独立关系。在属性页的使用顺序方面应该没有限制，用户应该能够随时查看任意的属性页· 属性页的布局互相独立，几个属性页通常不会占用同样大小的空间。占用空间较少的属性页应该与最大的属性页的布局格式方式不同，因为将会产生额外的空间，注意避免居中· 总为属性提供“应用”按钮向导· 对高级的、复杂的或不常用的任务使用向导，向导对非常高级或者复杂的任务十分有用，省去了用户许多麻烦的操作。当向导用于不常用的任务时，其效果最好，而对于常用任务使用向导则显得大而不当 控件· 尽量采用标准控件（6个最早的Windows控件和新的Win32常用控件）。采用非标准控件的程序与绝大多数Windows程序看起来不一致，只有完全合理时才使用自定义控件。 · 定制标准控件时要小心，理由同上。 · 将无效的控件置为不可用 · 取消不必要的滚动条，如可能使控件的尺寸足够大，避免使用滚动条。 · 如可能，应该选择能够自适用操作系统的控件，这样能够与操作系统的外观保持一致。 命令按钮（Button）· 采用最小的宽度和标准的高度· 将无效按钮置为不可用，以取消报错，绝对不要使用可用的按钮仅产生一条出错信息 · 总采用省略号来表示需要更多的信息，命令中的省略号表示执行命令时需要更多的信息，而不是简单的确认，但不表示一定会出现对话框 · 绝对不要指定双击行为 · 对于使用Delphi来进行开发的时候，特别注意尽量避免使用Bitbtn，因为它的风格与标准的Windows按钮风格差别太大 · 命令按钮的高度应该为25个像素· 同一个对话框中的命令按钮的宽度应保持一致复选框（CheckBox）· 用复选框开关选项，用单选按钮改变模式。比如用复选框来表示是否显示工具栏，而用单选按钮来切换打印机的横向模式和纵向模式 · 避免一组复选框中选项个数超过8个（大约），如果超过应该考虑用复选框列表代替，它占用的空间更少，但复选框列表需要滚动时使用就稍微麻烦了 · 考虑将相关组的复选框置于一个分组框中，这样的分组使得复选框之间的关系更为明显 · 宁可竖向对齐，虽然更合适的情况下采用横向对齐或直角对齐也是可以接受的，但竖向对齐的一组复选框更易于浏览 单选按钮（RatioButton）· 避免一组单选按钮中选项个数超过8个（大约），如果超过，考虑采用列表框或者组合框代替 · 避免用单选按钮进行“开/关”或“是/否”选择，这种情况应该用复选框代替 · 总将单选按钮置于一个分组框中 · 宁可竖向对齐，虽然更合适的情况下采用横向对齐或直角对齐也是可以接受的，但竖向对齐的一组复选框更易于浏览 编辑框（Edit）· 总给编辑框提供提供一个标签，必须用标签来表明编辑框的用途，如果标签在左边，将标签文字与编辑框文本垂直对齐 · 避免有输入限制的编辑框，对于受限的情况采用其它控件，如组合框、列表、滑块和微调框。对于日期和时间采用则采用日期和时间选择控件。用微调框和浏览按钮使编辑框可视 · 按期望输入来设置编辑框的宽度 · 编辑框的高度应该为20个像素 静态文本（Label）· 左对齐静态文本标签，左对齐使得标签外观更有条理、且易于浏览 · 宁可将静态文本标签置于相关控件的左边，而不是上面。但对于长控件是例外，如列表、分级数和多行编辑框 · 总在用于标示控件的静态文本标签后带上冒号 · 对非标签文本总用只读编辑框，只读编辑框允许用户将文本复制到剪贴板上· 不要把静态文本置于突起的边界上，在突起边界上的静态文本看起来像按钮，因为用户会试图单击它 · 可以将面板（Panel）经过适当的设置实现与静态文本（Label）同样的功能，不过在一个产品中只能采用一种方式，不可二者同时使用。· 对于采用面板当作标签使用的方式需要注意：在整个系统中应该采用同样的风格、同样的高度、同样的字体劈分条（Splitter）· 劈分条的宽度（高度）设为2个像素 · 对于列表框、网格等控件，如果宽度（高度）不够，如可能则应该考虑使用使用劈分条。列表框（ListBox）· 总给列表框提供一个标签，必须用标签来表明列表框的用途 · 使列表框至少5行长，因为少于5行的列表没有滑块，不便于滚动。如果列表框无需滚动条那么使用更短的列表框也是可以接受的。 · 对多个选择考虑采用复选框，复选框列表可以突出其多个选择的能力。如果不能接受复选框列表，那么可以采用多选列表，并用静态文本表示选项个数，清楚指明可进行多项选择 · 对多选列表考虑提供“全部选中”和“全部取消选中”命令 列表视图（ListView）· 总给列表视图提供一个标签· 使列表视图至少5行长，因为少于5行的列表没有滑块，不便于滚动。如果列表框无需滚动条那么使用更短的列表框也是可以接受的。 · 仅在列表可以排序的时候采用可单击的表头，可单击的表头只用于排序。首次单击时应按正序对列表进行排序，第二次单击时应按反序进行排列 · 对列项超过30的列表视图总使其可以进行排序，用户能够对列表进行排序方便了对信息的查找 滚动条（ScrollBar）· 滚动条仅用于滚动，使用滑快或微调框来设置数值· 使滚动条有足够长，保证有可用的滑快，没有滑快的滚动条不便于使用 分组框（GroupBox）· 利用分组框分组相关控件，尽管分组框通常是用于单选按钮的分组，但也可用于任何按钮的分组，避免使用只有一个控件的分组框，除非为了保证与同一对话框中的分组框保证一致 · 考虑采用静态线或者文本标签来代替分组框，分组框多时要占去许多空间，如果空间紧张的话，一个代替分组控件的办法是使用静态文本标签和静态文本线· 没有必要在分组框标签的后面使用冒号 主菜单（Main Menu）· 不要在菜单栏上的文本间留有空隙· 避免占用多行的菜单栏，尽管将父窗口缩小到足够狭窄时，任何菜单栏都要占用几行，但要避免正常使用时占用几行的菜单栏· 保持菜单稳定，将无效菜单置为不可用，而不要删除它们· 合理安排菜单项顺序，将有关菜单项组合在一起。重要的命令应该位于菜单项的顶部而不是底部· 将无效的菜单置为不可用来代替，菜单中决不应该有仅产生出错信息的可用命令· 分配快捷键· 总采用省略号来表示需要更多的信息，命令中的省略号表示执行时需要更多信息，而不是简单确认。省略号并不表示一定有对话框出现弹出菜单（Popup Menu）· 考虑将弹出菜单作为冗余使用，弹出菜单不应该是访问命令的唯一方式。通常弹出菜单中的命令应该在菜单栏中也提供，使用弹出菜单只是为了提高效率 · 避免在弹出菜单中包含快捷键，因为使用快捷键是用鼠标而非键盘 · 对话框一般不使用弹出菜单工具栏（Tool Bar）· 保持工具栏稳定，将无效的工具栏按钮置为不可用，而不是将其删除。但是应该考虑删除用户进入一种模式时用不到的整个工具栏· 将无效的工具栏置为不可用来代替，工具栏中决不应该有仅产生出错信息的可用命令· 对解决方案类软件采用大工具栏按钮，解决方案类软件的工具栏常常与工具类软件的工具栏不相同，其按钮更简朴、更大。解决方案软件工具栏应该只包含几个带有描述性文字和图形的显眼命令 · 对工具类软件采用可移动的、可定制的工具栏· 工具类软件需要灵活的工具栏来支持其典型的使用方式· 提供显示或者隐藏工具栏选项，如果有多个工具栏，则应该分别提供· 总使用工具提示，参见下面的工具提示说明工具提示· 用工具栏的工具来提供信息，但要简短，避免提示很明显的事情 · 使工具提示文字成为高级用户的媒介，工具提示用来简短的识别和提醒，而不是用来教学· 用工具提示显示有用信息 消息框（Message Box）· 仔细选择消息框的类型，采用带“确定”按钮的信息消息框向用户提供有关命令结果的信息。采用带“是”、“否”，以及可能“取消”按钮的警告消息框在继续进行前需要用户输入的情形下告诫用户。采用危急消息框通知用户继续工作前需要修改一个错误· 避免不必要的消息框，不要用出错消息来报告正常行为，而应该用来报告不正常或不期望的结果，否则不要同时提供“否”和“取消”按钮，“否”按钮应该执行操作，而“取消”按钮应该取消操作 · 确保消息框选项按钮与文本保持一致，例如，决不要用“是”和“否”来作为非提问消息的响应· 仔细选择默认按钮，将最安全或最常用的选项作为默认按钮· 避免无用的帮助，除非提供真正有用的附加信息，否则不要提供“帮助”按钮，不要附加带无用帮助信息的没意义的消息框· 对危急错误考虑采用系统模式消息框错误消息· 避免错误号，除非这个错误号对用户真正有用，否则不要出现错误号· 避免责怪用户，避免在出错消息文字中出现“你”或“你的”，如果需要，当指用户操作时使用被动语气。采用与“错误发生了”等价的表达，比采用“你捅漏子了”等的表达要好得多· 避免敌对性语言· 避免在错误消息文字中装做有趣或者高人一等，用户并不觉得错误消息有趣，幽默并不能被广泛接受字体· 避免使用粗体和斜体，用粗体来吸引人注意，用斜体表示着重，但要尽量少使用· 避免混合字样，任何不包含文档的窗口最多包含两种不同的字样· 软件内使用大小统一的字体属性· 中文“宋体，小五号”（9磅）· 英文“Microsoft Sans Serif，9磅”· 除了特殊提示信息、加强显示等例外情况外不考虑特殊字体，如有特殊情况可以使用图片取代，保证每个用户使用起来显示都很正常。颜色· 不要使用颜色作为传递信息的唯一方式，因为有些用户是色盲。 · 一个系统不要使用太多的颜色，同一窗口的颜色建议不超过三种 · 不要使用太刺眼的颜色· 界面配色方案以工具软件通用配色为基础，以柔和色调为主，采用WINDOWS XP风格，具体方案根据软件类型（工具类、方案类等）、用户工作环境等因素选择合适的色调。三维效果· 避免不必要的三维效果 · 使用柔和的三维效果 视频模式· 一般情况下，屏幕分辨率采用800*600 · 选择小字体 · 颜色采用256色 出错消息出错消息需要包含三方面的信息：· 通知告诉用户出了问题 · 解释告诉用户出问题的原因 · 解决办法告诉用户如何解决 对于消息本身需要满足下面几个条件：· 简洁使出错消息尽可能简洁，如果出错消息内容太多，可以采用“详细”按钮进行详细错误消息的隐藏和显示 · 清楚确保用户能够理解消息，使用目标用户能够理解的平实语言和术语 · 一致确保整个程序中出错消息是一致的，且其术语与用户界面的其它部分一致 · 具体空泛的语句是出错消息的常见问题。给出错误中涉及对象的具体名称和位置