D基于EXTJS的WEB界面设计规范正式稿.docx

1、D基于EXTJS的WEB界面设计规范正式稿目录总体原则 2原则详述 2以用户为中心 2清楚一致的设计 3拥有良好的直觉特征 3较快的响应速度 3简单且美观 4细节约定 4界面风格 4普通外观 4Windows的可视提示 5交互 5程序 6默认 7窗体 7布局和间距 7图标、图片 8提示信息（Hint） 8标点符号 8对话框 8对话框的主要命令按钮 9属性表和属性页 10向导 11控件 11命令按钮 11复选框 12单选按钮 13组合框 13编辑框 13滑块 14静态文本 14列表框 14列表视图 15滚动条 15分组框 15菜单 15上下文菜单 16工具栏 16工具提示 16文本 17消息框

2、17错误消息 18字体 18颜色 18三维效果 19各种细节 19统一术语 19术语的重要性 19命名 20用用户的语言说话 20要避免的术语 20总体原则一、 以用户为中心：设计由用户控制的界面，而不是界面控制用户。二、 清楚一致的设计：所有界面的风格保持一致，所有具有相同含义的术语保持一致，并易于理解。三、 拥有良好的直觉特征：以用户所熟悉的现实世界事务的抽象来给用户暗示和隐喻，来帮助用户能迅速学会软件的使用。 四、 较快的响应速度：能给客户比较快的响应、及简单、快捷的操作模式。五、 简单且美观：界面搭配合理、简洁，能够客户比较好的视觉效果。原则详述以用户为中心用户界面设计的一个重要原则是

3、用户应该总是感觉在控制软件而不是感觉被软件所控制。 1. 应该从客户的角度及业务流程的顺序来设计界面，而不应该是从开发人员角度、软件功能罗列的方式设计界面。2. 操作上假设是用户，而不是计算机或软件开始动作。用户扮演主动角色，而不是扮演被动角色。3. 提供用户自定义设置。因为用户的技能和喜好各不相同，因此他们必须能够个性化界面的某些方面。您的软件应该能够允许用户定制自己希望的属性例如整体界面风格、各部分区域的宽度、列表中各列是否显示及显示宽度、等等。4. 谅解。用户喜欢探索一个界面，并经常从尝试和错误中学习。一个有效的界面允许交互式的发现，它只提供一组合适的选择，并在用户可能破坏系统或数据的情

4、况时发出警告。如果可行，还应提供可逆转或可还原的操作。即使在设计得很好得界面中，用户也可能犯错误。这些错误既可以是物理上的（偶然地指向了错误的命令或数据），也可以是逻辑上的（对选定哪一个命令或哪些数据做出了错误的决定）。有效的设计应避免很可能导致错误的情况。它还包容潜在的用户错误，并且使用户易于还原。清楚一致的设计一致允许用户将已有的知识传递到新的任务中，更快地学习新事物，并将更多的注意力集中在任务上。这是因为他们不必花时间来尝试记住交互中的不同。通过提供一种稳定的感觉，一致使得界面熟悉而又可预测。一致在界面的所有方面都是很重要的，包括命令的名称、信息的可视表示，操作行为，以及元素在屏幕和窗口

5、内部的放置。1. 相同含义的词使用统一的术语。比如对于仓库中存放的物料，不可同时又称为物品、货物、备品、产品和材料等等，而统一约定一个称谓，且此称谓是用户熟悉的和易于理解的。2. 使用一组一致的命令和界面来展示常见功能。例如，避免一个”删除”操作在一种情况下直接点击行右边删除按钮进行删除，但在另一种情况却是要求先选择删除行左边的CHECKBOX后再点击按钮执行删除。应该使用同样的命令来执行对用户来说相似的功能。3. 建立项目保留字。通过建立保留字来明确和统一术语和操作命令。拥有良好的直觉特征1. 用熟悉的隐喻为用户的任务提供直接而直观的界面。通过允许用户利用他们的知识和经验，隐喻使得预测和学习

6、基于软件的表示的行为更加容易。2. 在使用隐喻时，不需要将基于计算机的实现局限在真实世界的对应物上范围之内。例如，与其基于纸张的对应物不同，Windows桌面上的文件夹可以被用来组织各种对象，例如打印机、计算器、以及其他文件夹。同样，Windows文件夹可以其真实世界对应物不可能的方式被排序。在界面中使用隐喻的目的是提供一个认知的桥梁；隐喻并不以其自身为最终目的。3. 隐喻支持用户认知而不是记忆。用户记起与一个熟悉的事物相关联的意义要比他们记起一个特定命令的名称要容易得多。4. 同常见软件保持一致性。出色的用户界面在程序中将实现同用户以前用过的其它成功软件一致的动作。5. 让用户能够比较便捷的

7、得到当前界面的帮助，方便快速的学习软件如何使用6. 提供可视反馈。在后台运行长进程时（时间超过110秒，视具体情况而定），必须提供进度条等信息指示。7. 除非特别必要时，不要提供声音反馈。在有严重的问题发生时，可以使用声音来提示用户，但是通常应该允许用户取消声音。8. 保持文字内容清楚。信息的表达要言简意赅，易于理解而又不罗嗦；避免使用冗长的文字给用户反馈。较快的响应速度1. 保持界面能很快对用户操作作出反应。2. 提供快捷键。特别对于有大量录入项的界面，能让用户不使用鼠标即可完成快速数据录入。在用户界面中加入一些功能，这些功能可以让熟练用户在不同的区域快速的输入数据。这些功能包括重复功能、快

8、捷键、带有有意义的图标的按钮等等，所有这些可以使速度快的用户可以控制界面并加快数据的输入。3. 设计功能操作时要做到步骤简洁，不繁琐，要做到让用户一步即可完成某个功能点操作，比如：可以用单选框取代下拉列表框、可以在列表界面就提供一些常用的操作（比如：删除操作），而不必要打开明细后才提供操作简单且美观1. 简单。界面应该很简单（不是过分单纯化）、易于学习、并且易于使用。它还必须提供对应用程序的所有功能的访问。在界面中，扩大功能和保持简单是相互矛盾的。一个有效的设计应该平衡这些目标。支持简单性的一种方法是将信息的表示减少到进行充分交流所需的最少信息。例如，避免命令名和消息的文字描述。不相关或冗长的

9、句子扰乱了您的设计，使得用户难以很容易地提取重要信息。另一个设计简单而有用的界面的方法是使用自然的映射和语意。界面元素的排列和表示影响它们的意义和关联。简单还与熟悉相互关联。熟悉的事物通常似乎更简单。尽可能尝试建立利用用户已有的知识和经历的联系。您可以使用渐进揭示来帮助用户管理复杂的事物。”渐进揭示”涉及到仔细的信息组织，以便只在恰当的时候才显示信息。通过隐藏向用户表达的信息，您减少了用户必须处理的信息数量。例如，您可以使用菜单来显示操作或选择的列表，还可以使用对话框来显示一组选项。渐进揭示并不意味着对显示信息使用非传统的技术，例如需要一个修饰键作为访问基本功能的唯一方法，或者强迫用户通过一个

10、更长的分级交互序列。这会使用户界面更加复杂和麻烦。2. 美观。可视设计是应用程序界面的重要部分。可视属性提供了非常好的印象，并传达特定对象的交互行为的重要线索。同时，出现在屏幕上的每一个可视元素也是很重要的，它们可能竞争用户的注意。提供清楚地促进用户对表达的信息的理解的连贯环境。 细节约定界面风格普通外观 1. 使用一致性：一致的外观将使用户界面更易于理解和使用。用户界面控件看起来应该是一致的。 2. 使用安排和流程：在西方文化中（包括中国），人们习惯于从左到右，从上到下进行阅读，因此，应该将重要信息放在上面和左边。左上角最容易吸引起人们的注意力。 3. 使用对齐：通常，使用左对齐来使用户界面

11、控件更易于浏览。对于数值文本，应该使用小数点对齐或右对齐。对于非数值文本，应该避免使用右对齐或居中对齐。不必对什么都使用中间对齐，或者使它们保持对称形式。在右边或底部保留空白区域更适合习惯。 4. 使用分组：将相关的用户界面控件分成组，以体现它们之间的关系。同时，还要显示相关信息。将控件放在它所作用的对象旁。使用空格、分组框、线条和标签，或者其它分隔符对用户界面控件进行分组。 5. 使用强调：使用焦点、位置、分组、层次、启用/禁用、大小、颜色或者字体等，来将注意力集中在需要首先看到的用户界面控件上。尽量以可视的方式指明用户接下来应该进行的操作。 6. 使用可视的提示：尽量使用近似的大小和间距来

12、指出用户界面控件是相似的，而使用不同的大小和间距来指出用户界面控件视是不同的。 7. 使用空格：使用空格来创建一个”透气室”，以使窗口布局更易于理解，并且查看起来更舒服。空格的多少要适当，不要显得太分散。但是，要避免过多地使用空格。如果可能，尽量使窗口小一些。 8. 警惕空洞：不要到处粘贴公司或产品的名称及徽标。虽然在启动屏或”关于”框中出现公司或产品名称及徽标是完全可以接受的，但其他窗口中的可用空间应该出现其他内容。如果没有其他内容，那么应尽量使窗口小一些。 9. 注意大小：使用用户界面控件的分辨率具有独立性。使用系统规格或文本规格来确定用户界面控件的大小。任何显示文本的对象（如对话框或定义

13、的文本文档）都应该使用文本规格。 10. 考虑使用资源或预定义的布局网格：资源模板或预定义的布局网格有助于您在不同的窗口之间实现一致性。 Windows的可视提示 暗示与用户只需通过查看可视提示来确定对象的使用方式的能力有关。在Windows中，请保持使用下面的可视提示： 1. 可以单击凸起的项目。 2. 可以单击当鼠标从其上移过时突出显示的项目。 3. 不能单击下凹的项目。 4. 可以编辑具有白色背景和闪烁垂直条（光标）的项目。 5. 不能编辑具有灰色背景的项目。 6. 灰色项目是被禁用的。 7. 可以拖动凸起的项目。 交互 1. 尽量提供对所有功能的键盘访问理想情况下，除了绘图这样的图形功

14、能，其他所有的功能都应该只能通过键盘来访问。 2. 尽量提供对所有功能的鼠标访问理想情况下，除了文本输入外，其他所有功能都应该只能通过鼠标来访问。 3. 确保具有明显后果的操作要求用户进行明确的选择*用户需要完全明确他将要进行危险性操作或破坏性操作。 4. 对于使有耗时的操作都给出反馈*在进行长时间的操作时，要确保有等待光标、进度表或其他的可视反馈。用户应该能够取消长时间的操作。如果可以取消未完成的操作，那么将按钮标记为”取消”，否则将按钮标记为”停止”。 5. 可视的指示模式*向用户提供一种可视的反馈，以指出用户进入一种模式，通常可以通过更改光标或标题栏文本来做到这一点。 6. 确保单击和双

15、击的一致性*单击用于非按钮选定，而双击用于选定并执行默认操作。换句话说，双击（在列表框、组合框，或其他接受双击的控件中）的效果应该与选定控件中的一个项目，然后按下Enter键的效果一样。 7. 鼠标右键仅用于快捷菜单*确保鼠标右键仅用于快捷菜单，而不要用于其他用途。 8. 不要使用鼠标中键*如果用户的鼠标有中键，那么让用户使用”控制面板”中的”鼠标”实用程序自己分配中键的行为。 9. 保持分配的快捷键的一致性组合功能键和Ctrl键用于快捷键。习惯上不将Alt键用于组合键，业务Alt键常常被用于访问键。尽量避免使用Alt键和Ctrl键，因为这种组合会使快捷键非常麻烦，而且也很不方便。 10. 将

16、快捷键作为补充方式*千万不要将快捷键作为访问命令的唯一方法。应该让用户有更多的明显选择。 11. 避免水平滚动条与垂直滚动条不同，水平滚动条并不受欢迎，因为它会使项目阅读起来比较困难。解决的办法有：尽量使用垂直滚动条、加宽窗口、减小文本的宽度，或者使文本自动换行等。当然，如果确实需要，还可以使用水平滚动条。 程序 1. 只有主程序窗口才有标题栏图标、菜单栏、工具栏和状态栏*因为单击主窗口的任务栏按钮也会激活二级窗口，所以二级窗口绝对不要显示在任务栏中。二级窗口不要因为使用菜单栏、工具栏或状态栏而使其变得复杂。可以使用标题栏图标来明显区分主窗口和二级窗口。另外，绝对不要使用默认的Windows图

17、标(飘动的窗口图标)作为窗口图标。 2. 简化默认配置让用户按自己的速度来学习和使用程序。 3. 应用程序应该使用多文档界面（MDI）或单文档（SDI）这些程序界面应该与应用程序的使用模式匹配。 4. 默认情况下，应用程序应该保持为最大化当应用程序占用整个屏幕时，常常能够提高用户的工作效率。 5. 实用程序应该使用SDI或对话框界面这些程序界面应该与实用程序的使用模式匹配。对于实用程序，建议不要使用MDI界面，因为管理这些窗口需要付出很多努力。 6. 实用程序应该在小屏幕范围内运行实用程序常常与其他程序一起运行，因此它们需要在小屏幕范围内运行。实用程序应该有灵活的窗口布局，以适应多种不同的大小

18、。实用程序很少以最大化的形式运行。 7. 使用实际文档的SDI程序必须支持运行多个实例*运行多个实例使用户能够同时操作多个文档。 8. 使用”退出”命令终止程序使用”退出”终止程序；使用”关闭”移走主窗口和非模式对话框；使用”取消”移走模式对话框。当关闭主窗口并不表示终止进程时，对于主窗口使用”关闭”来代替使用”退出”。例如：关闭打印机状态窗口不会取消打印任务。 默认1. 保存和恢复用户选择程序应该能够能够恢复到其最后退出的状态。MDI程序应该能够恢复文档窗口的大小和位置。对话框通常应该使用最后输入的值作为默认值。 2. 提供适当的默认值提供提供适当的默认值来减少用户不必要的操作，从而帮助用户

19、完成工作。提供最可能使用并给出设置实际使用方式的默认值。通常，最好的默认值是用户最后输入的值。 3. 考虑选择默认值时的安全性* 不应该将不可恢复或破坏性的操作设置为默认值。不要使用令用户感到莫名其妙的默认值。 窗体 对话框窗体大小尽量不要超过640*460，留20给任务栏。并且高和宽（或W宽和高）的比应该大致保持为3:4（或4：3）。一般应该将窗体的”Position”属性定义为 “poDesktopCenter”，”WindowState”属性为”wsNormal”，某些主界面设置为”wsMaximized”。”ShowHint”属性设为”True”。如果是模式对话框，则将”BorderS

20、tyle”属性设置为”bsDialog”。 窗体文件(*.dfm)保存为文本格式，以便在VSS中比较不同版本之间的差别。如果窗体大小超过屏幕大小，则在Delphi开发环境中打开时，大小会有改变，并且影响到运行时刻效果。由于每个人的屏幕大小设置不一样，有些是1024*768，有些是800*600，因此在设计期间请注意窗体大小，尽量不要超过800*600，以免出现上述问题。 布局和间距 窗体控件布局和间距尽量保持与Windows标准一致。控件与窗体的上、下、左、右边距为7象素。右下角主命令按钮之间的间距为6象素，如果主命令按钮在右上角，之间的间距则为4象素。主命令按钮一般情况为751象素，如果按钮

21、的文本很长，应该适当加宽按钮的宽度。如下图。其它详细资料请完全参照错误！书签自引用无效。和命令按钮。 控件的”TabOrder”属性值应该与控件排列顺序一致，即遵循从上到下、从左到右这样一个流程。如果在PageControl的多个页面中存在类似的控件，应该尽量使得它们在各个页面中出现的位置/大小比较一致，以免在页面间切换时产生闪烁感。图标、图片 不同界面中的同一功能应该使用同样的图标和图片。图标、图片的色调、风格尽量保持一致。图标、图片的隐喻应能确切表示功能的含义，如果不能，就直接使用文本，以免混淆用户。如果功能是一个动作时，可能比较难找到确切表示该功能的图标，这时应该尽量采用此动作相关的名词

22、做图标。例如Windows中的”剪切”功能就是用一把剪刀来表示的。 提示信息（Hint） 工具栏按钮应该设置工具提示 “Hint” 属性。Hint能帮助用户更方便地理解和使用。详细资料可以参照工具栏、工具提示。 如果使用了”TSpeedButton”控件，并且只有图标，同样应对它设置”Hint”属性。如果不是特殊情况，应尽量避免使用”TSpeedButton”控件，而使用”TButton”控件代替。 标点符号 在标识控件用途的标签文本（Label）和提示信息（Hint）中，应使用半角符号。如果是指导性标签文本（如解释按钮功能的句子），则使用全角符号，并且句子应遵循中文标点符号标准。如下图Mic

23、rosoft标准对话框例子。其他详细资料可参照静态文本。 对话框 1. 对话框应该在所有视频模式下都能够正确显示当在VGA模式（64080）下显示时，对话框应该不超过64060（留20像素给任务栏）。这将确保对话框能够显示在所有的视频模式下。 2. 确保模式对话框的模式*确保使用具有父窗口的模式对话框都提供正确的父窗口句柄，而不时提供NULL句柄。如果没有提供父窗口句柄，那么父窗口仍处于活动状态，因此该对话框实际上并不是模式对话框。 3. 不要使用可滚动的对话框*也就是说，不要使用需要滚动条来进行完全查看的对话框。这种对话框使用起来非常不方便，并且也时完全不必要的。应该重新设计这种对话框。 4

24、. 不要在作为二级窗口的对话框中使用菜单栏*使用这种对话框需要付出很多努力。注意，在用作主窗口的对话框（如”查找”实用工具）中，菜单栏时可以接受的。还要注意的是，在所有对话框中，快捷菜单和菜单按钮都是可以接受的。 5. 二级对话框不要使用菜单栏，但可以使用菜单按钮。 6. 不要在作为二级窗口的对话框中使用标题栏图标*标题栏图标用于区别主窗口和二级窗口。 7. 不要在任务栏上显示作为二级窗口的对话框*注意，单击主窗口的的任务栏图标也将激活二级窗口。 8. 对话框中使用下页图所示的页面布局和间距。 9. 对于相似的对话框，使用控件位置来强调其相似性。如果意义相同的同一控件出现在一些相似的对话框中，

25、那么它应该显示在相同的位置。另一方面，应避免将可能会产生混淆的不同控件放在同一位置。 10. 对非模式对话框最好使用可停放的对话框可停放对话框在功能上与非模式对话框是等效的，但其位置设置更为灵活。 11. 策略地设置输入焦点将最初的输入焦点设置在最可能首先使用的控件上。 12. 在对话框标题文本中不要出现省略号例如，作为选择”打印选项”命令结果而显示地对话框的标题应该为”对于选项”。但是，表示命令正在执行过程中菜单对话框（如”连接到Internet”对话框）是一种例外情况。 13. 为所有可处理访问键的控件分配访问键*访问键可以使用户的手保持在键盘上，从而使访问程序更加方便。您可以直接在其标题

26、中为诸如命令按钮、单选按钮、复选框等控件分配访问键。通过提供静态文本标签或带有访问键、在Tab顺序上先于控件的组框，您可以为诸如编辑框、列表框、组合框等控件分配访问键。在其他情况下不要为组框分配访问键这会使人产生混淆。”确定”按钮没有访问键，因为在作为默认按钮时，它通过提Enter键来选定的。”取消”按钮也没有访问键，因为Esc键预览清除模式对话框。如果可能，避免使用小写的g、j、p、q或y作访问键，也避免使用这些字母前后的字母作为访问键。下划线不能与这些字母的下行字母分开。当然，访问键必须是唯一的。 14. 避免使用粗体文本尽量少使用粗体文本。在Windows 3.1 的对话框中，粗体文本用

27、于在旧式的视频硬件上绘制被禁用的文本（即抖动的灰色文本）。因为现在的视频硬件可以绘制没有抖动的灰色文本，所以Windows 为了使外观更加清洁，现在Windows 在对话框中使用正常文本。粗体文本仅用于强调。对于大多数对话框不要粗体文本。 15. 提供环境敏感的帮助对于复杂的对话框，应该为整个对话框提供环境敏感的帮助（通过帮助按钮或F1键访问），或者为个别控件提供控件特定的帮助（通过”这是什么？”按钮或ShiftF1 键来访问），或者同时提供这两种帮助。 对话框的主要命令按钮 1. 将主命令按钮与对话框主体分开*主命令按钮包括像”确定”、”取消”、”关闭”、”帮助”、”停止”、”隐藏”，以及其

28、他相关按钮的等命令按钮。这种分开使主命令按钮更易于查找和识别。 2. 认真选择对话框的方向在西方文化中，人们习惯于从左到右、从上到下进行阅读，因此，将主命令按钮靠底部或右边放置更容易被发现。您应该选择对话框的外观比例与屏幕的外观比例（通常高与宽的比例为3：4）相似的方向。这将使对话框的外观看起来更加舒服，并且更易于在屏幕上进行定位。如果按钮具有不同的大小，那么可以将它们放在对话框菜单底部。当不能确定时，也可以将按钮放在底部，因为这种定位方式最为常见，也更易于阅读。 3. 将排列在底部的主命令按钮右对齐右对齐主命令按钮适合从左到右的阅读习惯。当只有一个主命令按钮时，您或许希望例外地将其居中放置。

29、 4. 右对齐主命令按钮5. 避免使用多行或多列的主命令按钮多行或多列的主命令按钮对用户是一个打击。如果有许多主命令按钮，那么注意，通常在右边排成一列与在底部排成一行相比可以放置更多的按钮。另外，您可以考虑使用命令菜单。如果必须使用很多按钮，那么注意使用多行别使用多列的效果好。 6. 对模式对话框，通常提供”确定”和”取消”按钮*要使用对话框，用户需要能够方便地识别前进（使用”确定”按钮）和后退（使用”取消”按钮）的方式。您可以使用更明确的按钮代替”确定”按钮，但绝对不要在模式对话框中替换”取消”按钮，除非用”停止”来表明正在进行的操作无法取消。 7. 对于非模式对话框或或作为主窗口的对话框，

30、提供”关闭”按钮而不提供”确定”和”取消”按钮*将”确定”和”取消”按钮用于非模式对话框或作为主窗口的对话框可以使对话框看起来像是模式对话框。而且，当用于非模式环境中时，”确定”和”取消”时没有什么意义的。使用”关闭”按钮可以消除这种混淆。 8. 通常将”确定”按钮排第一，”取消”其次，”帮助”最后*”确定”或其等价按钮通常作为第一个主命令按钮。”取消”按钮应该位于”确定”的右边或下面。将”确定”和”取消”按钮放在一起。”帮助”按钮应该时最后一个按钮。如果没有”确定”按钮，那么应该将”取消”按钮放在”帮助”按钮的前面。这可以使主命令按钮更易于查找和识别。 9. 确保”取消”按钮真正用于取消操作

31、*当取消时，程序的状态栏应该与之前显示的模式对话框完全相同。如果不是这样，那么应该用”停止”按钮来代替”取消”按钮。模式对话框中的”取消”按钮应该与标题栏中的”关闭”按钮效果相同。而属性表是个例外，因为”取消”按钮不会取消已经应用的更改。 属性表和属性页 1. 让属性页独立工作避免使一个属性页的行为或操作受其他属性页的限止。用户不可能发现属性页之间的这种独立关系。在属性页的使用顺序方面应该没有限止。用户应该能够随时查看任意的属性页。 2. 属性页的布局相互独立一些属性页通常不会占用同样大小的空间。占用空间较小的属性页应该与最大的属性页的布局的格式方式不同，因为将会产生额外的空间3. 用属性表代替使用带选项卡的对话框使用属性表而不使用带选项卡的对话框除了具有一致性之外，没有什么明显的实用性优势。另外，对于实际显示对象属性的对话框使用属性表，而对于其他用途，所有带选项卡的对话框。 4. 对属性显示总采用属性表，即使仅有一个页*采用属性表能够明确告诉用户查看的使属性而不是一般的对话框。属性表有一个”应用”按钮来帮助用户测试设置。 5. 绝对不要使用两行以上的标签*最好使用一行标签，但两行也是可接受的，两行以上就太多了，可用级连属性设置或多个对话框代替。 6. 总为属性提供”应用”按钮再说一次，提供”应用”按钮帮助用户对设置进行测试。