Web页面设计规范

1、WORD格式Web 页面设计标准编号：版本号：受控状态：分发号：专业资料整理WORD格式文档修改历史记录文档修改记录专业资料整理WORD格式日期版本号更改人更改内容专业资料整理WORD格式文档审核记录日期版本号审核人审核意见专业资料整理WORD格式目录1引言61.1目的61.2X围61.3缩略术语61.4参考资料62 WEB 页面框架内容62.1页面框架62.2页面布局62.2.1布局原那么62.2.2布局要求72.2.2.1页面分割72.2.2.2页面构造82.2.2.3页面展现92.2.2.4页面美化102.3页面字体112.4边距112.5表格122.6段落排版132.7Frame 13

2、2.8其他页面元素143页面风格153.1风格分类153.2页面风格应用15专业资料整理WORD格式第 3页共37页专业资料整理WORD格式4WEB 页面交互154.1页面元素焦点切换164.1.1信息填写164.1.2鼠标交互响应164.2页面信息交互184.2.1操作结果确认184.2.2其他规那么184.3页面信息提示194.4键盘响应支持215 WEB 页面通用标准225.1一般页面功能225.1.1 新增 225.1.2 修改 225.1.3删除225.1.4查询235.1.5取消235.1.6保存235.1.7重置235.1.8返回235.1.9分页235.1.10全选245.2一

3、般页面规那么 245.2.1默认值 245.2.2必填值 24专业资料整理WORD格式第 4页共37页专业资料整理WORD格式5.2.3界面传递255.2.4窗口嵌套255.2.5输入框操作255.2.6在线帮助功能255.2.7菜单功能要求265.2.8快捷键功能275.2.9快捷键的限制275.2.10页面的标准性285.2.11系统易用性295.2.12输入平安性要求305.2.13独特性要求315.2.14多窗口的应用与系统资源316页面编程技术使用标准326.1页面元素命名326.2DHTMLx 控件 356.3Flex 控件357页面资源规格说明357.1图标357.2图片367.

4、3多媒体 368附录378.1基于 DHX 的 CSS规格例如378.1.1表格 CSS例如 378.2典型应用的页面例如37专业资料整理WORD格式第 5页共37页专业资料整理WORD格式引言目的本文用于标准我公司所开发的商业软件中对于web 页面的设计工作，明确在设计中所要遵循的准那么和方法，web 页面中各个元素的规格要求，确保所实现的web 页面在风格、构造和功能上的统一，提升商业软件的外在品质。X围本标准适用于公司所有的商业软件产品。缩略术语DHMLX： web 页面的 UI 控件参考资料WEB 页面框架内容页面框架WEB 的页面框架是指构成完整页面的组织构造。通常是由以下三局部构成

5、：Head ，Main ，Foot ，有些时候出于布局的需要，在“Head 下面还会加上用于页面功能导航的“ Menu 。如图：图 1页面布局布局原那么专业资料整理WORD格式第 6页共37页专业资料整理WORD格式对于 WEB 应用来说，页面布局是和 web 应用的功能区相对应的，并且对于页面中各个局部之间的切分比例也需要遵守一定的规那么。页面布局的设计，首先需要考虑用户在浏览web 页面时视觉流向上的要求：图 2从视觉流向上看，用户首先看到的是页面“ Head 局部的左面，通常那里是标识这个 WEB 应用的 Logo ；然后是陈列 WEB 应用主要功能的“ Menu 来用于页面导航；接下来

6、用户将看的是处于页面左侧的“sidebar ，通常这里也是用于页面功能导航的，和“Menu 出的选择相照应，这里的内容可以通过类似树状构造的方式展示更为详细的功能；接下来是处于页面中心位置的内容局部，最后用户的视线落在 WEB 页面的底部。布局要求页面分割以上面图示的布局方式为例，按照通常 web 页面设计时所遵循的方法，并结合黄金分割比例的方法：专业资料整理WORD格式第 7页共37页专业资料整理WORD格式首先，将页面按照3*3 的方式进展分割，如下列图：在高度方向上，对上部1/3 区域按照黄金分割的方法分出head 和 menu 的区域；在宽度方向上，对中部左边1/3 区域按照黄金分割的

7、方法分出sidebar 的区域，剩下的空间留给 content 区域；在高度方向上，对下部1/3 区域按照黄金分割的方法分出foot 的区域；页面构造页面的布局中，各个区域大小的定义方式是不同的，请见下列图：专业资料整理WORD格式第 8页共37页专业资料整理WORD格式图 3在页面布局中，对各个功能区域的切分是按照“像素和“比例方式来进展的，以1024*768的分辨率做为基准，其中：Head 区域，宽度是按照比例方式设置的，宽度按照100% 设置，高度采用所占的固定像素值来确定的，一般占？px，如果有 menu 区，那么调整为？ px ；Menu 区域，和“ head的配置要求是一样的，宽度

8、按照100% 设置，高度结合“head 的高度设置来确定，一般占？px；Sidebar 区域，宽度是结合与“ content 之间的黄金切分比例，按照固定像素的方式确定的，一般占？ px；高度是按照比例方式来设置的；Content 区域，高度和宽度方向布局都是按照比例方式来设置的；Foot 区域，宽度按照100% 设置，高度采用所占的固定像素值来确定的，一般占？px ；页面展现专业资料整理WORD格式第 9页共37页专业资料整理WORD格式对于页面布局来说，除了上述要求外，还需要考虑如下要求：能自适应 1024*768 、 800*600 两种分辨率；界面层次不超过3 层；默认窗口设置下，不应

9、出现水平、垂直滚动条；当界面内容超出显示区域时，以浮动层的形式显示；还有，对于用户的感官而言，屏幕对角线相交的位置是用户直视的地方，而页面正上方四分之一处为易吸引用户注意力的位置，所以在放置页面时要注意利用这两个位置。要求：父页面或主页面的中心位置应该设计在对角线焦点附近；子页面的位置应该靠近主窗体的左上角或正中；需要多个子页面弹出时，应该依次向右下方偏移，以显示窗体出标题为宜；在页面上方四分之一处放置用户的logo 、主要功能导航和一些系统操作功能；页面美化界面应该大小适合美学观点，感觉协调舒适，能在有效的X围内吸引用户的注意力。建议和要求：长宽接近黄金点比例，切忌长宽比例失调、或宽度超过长

10、度；布局要合理，不宜过于密集，也不能过于空旷，合理的利用空间；同一页面上的按钮大小应该一致，不同页面的按钮大小尽量相近，按钮上忌用太长的名称；按钮的大小要与界面的大小和空间要协调；防止空旷的界面上放置很大的按钮；放置完控件后界面不应有很大的空缺位置；专业资料整理WORD格式第10页共37页专业资料整理WORD格式字体的大小要与界面的大小比例协调，通常使用的字体12px ；前景与背风光搭配合理协调，反差不宜太大，主色要柔和，最好少用深色，如大红、大绿等，可以借用 Windows 界面色调；大型系统常用的主色有"#E1E1E1" 、"#EFEFEF" 、&q

11、uot;#C0C0C0" 等；界面风格要保持一致，字的大小、颜色、字体要一样，需要艺术处理或有特殊要求的地方建议使用图片表现；如果窗体支持最大化或放大时，窗体上的控件也要随着窗体而缩放；切忌只放大窗体而忽略控件的缩放；系统对话框页面不应该支持缩放，即右上角只有关闭功能；通常父窗体支持缩放时，子窗体没有必要缩放；如果能给用户提供自定义界面风格，那么由用户自己选择颜色、字体等；页面字体页面字体属性的设置在相应的CSS 中进展定义，页面文字编码要求是UTF-8 ，在规定字体属性时，需要设置：中文采用“宋体，英文采用“ Arial 或“ verdana ， CSS 文件中的 font-fam

12、ily 里面必须保证有“宋体。对于页面属性中字体大小的设置，需要内容的不同级别来设置，通常：“Head 中标题文字， 20px ；“Menu 中的导航文字， 14px ；“Sidebar 中的文字， 12px ；“Content 中的正文， 12px 或 14px ，标题；“foot 中的文字， 12px 或 10px ；有关页面字体属性的具体设置参见附录中的CSS 例如。边距专业资料整理WORD格式第11页共37页专业资料整理WORD格式WEB 页面和其中的表格都应该设定边距，防止页面元素紧贴边沿的情况发生，最小边距值为“ 3px ，默认边距值应在CSS中设定。例如：图 4表格对于表格，其属

13、性的设置同样在CSS 中进展定义。表格使用最多的情况是显示装在的数据，由于有很多表项需要在页面中完整显示，因此原那么上对于表格各个单元格宽度的设置应采用百分比方式来进展，这样表格不仅能够将数据完整地显示，而且还能够适应不同分辨率的情况。但由于表格中存在不定长的内容，所以为了保证表格的宽度不被挤变形，对于不定长的内容，可固定显示宽度，当超出此显示宽度后，以显示，光标停留后，详细内容再在浮动层显示。其他要求：表头中的数据应水平/ 垂直居中对齐。表单中内容如为定长，那么为居中显示；如为不固定的中英文内容，那么为居左显示；如为数值形式，那么为居右显示。表格的表头应采用不同于表格内容的背景颜色，并要求比

14、照明显；表格表头的文字应采用加粗，或不同于表格内容的字体；表格中相邻行需要通过两种有一定比照差异的浅色作为背风光；各个页面的表格边框风格需要统一，建议设置细边框；表格中存在的文字需要采用不同于其他内容的颜色或字体显示；对于表格的嵌套尽量控制在三层以内，并且制止使用表格来进展页面布局。专业资料整理WORD格式第12页共37页专业资料整理WORD格式有关表格属性的具体设置请参见附录中的CSS 例如。段落排版在 WEB 页面中，“ content 局部是展示页面正文的区域，当段落是由纯文字构成时：正文一行字数最好不超过50，首页的标题文字以8-20 字为佳。行距建议用百分比来定义，常用的两个行距的值

15、是line-height:120%或150%；对于一段文字，尤其是正文局部，保证左右至少有15px 的留白，便于用户换行时不受到干扰。文字和背景比照要足够明显，保证最弱文字的可读性。在使用 <p> 标签，需要对应有</p> ，并且要求设置margin ，使得段落文字的前后左右能够有适宜的空白区。可在CSS中设置： p margin: 18px 6px 6px 18px;，分别定义了上、右、下、左的空白区大小。首行缩进时，制止使用“ &nbsp; ，而是在 CSS中设置 text-indent ，例如： p text-indent: 2em; 。在一段完整的文字中

16、请尽量不要使用<br>来人工干预分段；对于 margin ，为了防止由于采用默认的 margin 值而导致的页面排版问题，推荐所有标签定义为： margin: 0;当采用竖排文字时，推荐使用 writing-mode 。通过设置两个属性值： lr-tb 和 tb-rl ，并结合 direction 完成文字竖排， lr-tb 指的是文字方向为：左 -右、上 -下， tb-rl 是指上 - 下、右 -左。FrameFrame 是能够将一个WEB 页面切分成几个窗口来显示WEB 内容的一种页面设计方法，切分后的每个窗口内容是通过指向URL 来实现的。专业资料整理WORD格式第13页共3

17、7页专业资料整理WORD格式Frame 的标记是 <FRAMESET> <FRAME> ，而在使用 Frame 时，通常需要将其放在网页入口的 html 文件中，而不必放入 <BODY> 标记。 <FRAMESET> 是用以划分框窗的，每一框窗由一个 <FRAME> 标记所标示， <FRAME> 必须在 <FRAMESET> X围中使用。其中：<FRAMESET> 称框架标记，用以宣告HTML 文件为框架模式，并设定视窗如何分割。<FRAME> 那么只是设定某一个框窗内的参数属性。使用

18、Frame 分割页面，需要按照2.1 节“页面布局中所描述的要求来设置<FRAMESET> 和<FRAME> ，以完成对页面各个局部合理的切分。对于 <FRAMESET> 和<FRAME> 中的一些属性设置，要求有：Name ，表示 Frame 的名字，必须有定义；Framespacing ，表示各个Frame 之间空白距离，要求设置为非零，通常设置为5；Noresize ，表示是否允许使用者通过拖拉改变Frame 的大小，要求在Frame 设置此参数；Scrolling ，表示是否要显示卷轴，要求设置为“AUTOMarginhight ，表示框

19、架高度局部边缘所保存的空间，要求设置？Marginwidth ，表示框架宽度局部边缘所保存的空间，要求设置？其他页面元素按钮，要求按钮上显示的文字能够准确表达功能含义；单项选择框，默认选择一个，和所关联的文字的间距应该在3px ；多项选择框，默认全不选，所关联的文字应该能够准确表达选择的含义，和控件的间距应该在 3px ；下拉框，给出默认选择，并且默认选择显示出“默认全部或“请选择等文字提示；专业资料整理WORD格式第14页共37页专业资料整理WORD格式图片，默认为显示出代表图片文件的图标，或是缩略图；多媒体，默认为显示出代表多媒体文件的图标；有关这些页面元素的具体属性设置请参见附录中的CS

20、S例如。页面风格WEB 页面的风格是指WEB 页面通过对页面布局、字体、配色、页面元素排列的融合来传达给用户的、含有主观感受。页面风格的选取除了需要考虑一般的用户感受外，还需要将用户所在环境的因素考虑进去，从而形成符合特定用户要求的页面风格。风格分类Web 应用的页面风格内容包括：布局，不仅仅是系统入口主页的布局，而是所有页面；颜色，按照风格主题来设置页面中包含的颜色及其表现；页面元素，按照风格主题来确定页面元素的大小、形状和交互响应行为；图标，按照风格主题来定制表示各类功能的图标；提示窗口，是页面交互的主要形式，需要按照风格主题来定制；具体风格分类的定义，待定。页面风格应用具体风格应用的定义

21、，待定。WEB 页面交互专业资料整理WORD格式第15页共37页专业资料整理WORD格式页面元素焦点切换在 WEB 页面中，为了提高和用户之间的互动，需要在各类页面元素获得焦点和失去焦点的时候，在如下场景中采用页面交互的方法有：信息填写对输入信息验证：如果需要校验填写内容，那么需要在输入框失去焦点时进展数据有效性的判断，并在输入框后给出提示。如图：对输入信息提示：在一组需要被验证的数据填写时，如果有必填项，需要在输入框后面给出标志，并对填入的规那么加以说明。如图：如果输入框内有默认的文字，当输入框获得焦点时，需要将输入框内的文字处于全选状态。如图：鼠标交互响应对鼠标在页面中所产生的事件进展处理

22、，当页面元素获得焦点、被点击、失去焦点时，那么需要控件本身在颜色、大小或形状上的变化给与响应，亦可以添加声音响应。下面是各种情况下的鼠标交互例如：例如：- 按钮：按钮颜色改变、或形状，或字体改变，如图：鼠标放上获得焦点前：专业资料整理WORD格式第16页共37页专业资料整理WORD格式鼠标放上获得焦点后：- ：字体变粗、或字体变色、或背景变色，如图：鼠标放上获得焦点前：鼠标放上获得焦点后：- 页签：获得焦点的页签颜色变化，或页签的大小和里面的字体变大，如图：鼠标放上获得焦点前：鼠标放上获得焦点后：- 输入框，输入框的边框变色；鼠标放上获得焦点前：鼠标放上获得焦点后：- 表格，表格中行的底色改变

23、；鼠标放上获得焦点前：鼠标放上获得焦点后：专业资料整理WORD格式第17页共37页专业资料整理WORD格式- 等待响应：当由于载入大量数据等原因，使得用户需要等待一定时间，需要将鼠标指针的形状变成时间漏斗的形状、或其他表示鼠标不可操作的样子来提醒用户等待。如图：对于我们所使用的有关鼠标交互响应的标准，将结合页面风格在附录中给出说明。页面信息交互操作结果确认在提交数据，或是载有数据的页面关闭，或其他需要和用户进展确认交互的场景，需要软件能够提供一个以弹出页面形式，要求用户确认执行结果的对话框，包含的情况有：提示确认输入信息正确：弹出对话框，并将已填写的内容列出，要求用户确认内容的正确性，给出“确

24、定和“取消的选择按钮；提示确认数据更改是否保存：弹出对话框，提示当前页面内容已经改变，要求用户确认是否保存更改的信息，给出“是和“否的选择按钮；提示确认当前页面的跳转：弹出对话框，提示用户正在跳转到另外一个页面，要求用户确认离开当前页面，给出“是和“否的选择按钮；确认删除数据内容：弹出对话框，提示用户删除了当前选择的内容，要求用户确认是否继续删除的操作，给出“确定和“取消的选择按钮；其他规那么对于信息交互过程中，其他需要遵守的规那么有：重要的命令按钮与使用较频繁的按钮要放在界面上相对固定的位置上；容易引起操作错误或使程序退出、关闭的按钮应不醒目，放在不易点位置；与正在进展的操作无关的按钮应该加

25、以屏蔽，例如：按钮背景为灰色显示；对可能造成数据无法恢复的操作必须提供确认信息，给用户放弃选择的时机；专业资料整理WORD格式第18页共37页专业资料整理WORD格式非法的输入或操作应有足够的提示说明；对运行过程中出现问题而引起错误的地方要有提示，让用户明白错误出处，防止形成无限期的等待；页面信息提示在 web 页面提供的功能中，很多情况需要系统发送一些必要的提示信息到页面显示给用户，这些信息的分类有：警告信息制止信息操作执行成功信息操作执行失败信息错误信息帮助信息提示信息这些信息在当前页面或弹出页面上显示。如果采用弹出对话框的形式，对话框的页面构造如下列图：标题区图标区提示信息区按钮1按钮2

26、标题区：简要给出此次提示信息的性质，例如：警告：操作非法！专业资料整理WORD格式第19页共37页专业资料整理WORD格式图标区：给出和此次提示信息性质匹配的图标；提示信息区：给出此次提示信息的具体内容；按钮区：给出供用户进展选择的按钮；对于对话框的背景颜色，要求和系统的整体风格选取的颜色一致，而右上角的操作区只保存关闭一个可操作功能，最小化和最大化的功能将不显示。对应采用的图标的图例为：警告信息：制止操作信息：操作成功信息：操作失败信息：错误信息：专业资料整理WORD格式第20页共37页专业资料整理WORD格式帮助信息：提示信息：提示信息内容要求：提示信息中如有标点符号，统一为全角符号；提示

27、信息如有主语，统一为?您；在重要或复杂的操作成功后，给予提示信息；有后续操作的操作在成功后，也需给予提示信息，说明当前的状态。提示信息不宜太长，宽度应不超过当前窗口宽度的 1/2 ，当超过此比例时，请视具体情况进展换行；当功能按钮为图片按钮时，光标停留需给予浮动提示信息；键盘响应支持由于用户有时候还需要结合键盘进展操作，所以页面需要提供一些简单的键盘支持，例如：“ Esc、“ Enter 、“ Tab“ Space，系统应对这些键值作出响应。其中：Esc，“取消当前操作；Enter ，“确认或进展下一步操作或提交；Tab、或 Shift+tab能够在页面元素中按照一定次序切换焦点，遵循从左上至

28、右下的原那么；专业资料整理WORD格式第21页共37页专业资料整理WORD格式其他快捷键的支持，需要根据工程的实际情况来定义。WEB 页面通用标准一般页面功能新增当新增一条或多条记录，要求：新增的记录必须排在首页首行。提交失败后必须保存用户已经输入的内容，以便再次提交。提交时需对主要标识字段进展重复值、空值空格判断。新增内容提交失败后，须保存用户修改的内容，以便再次修改提交；需对主标识字段进展重复值、空值空格判断；修改当进展单条或多条记录的修改时，要求：如界面存在复选按钮，勾选多条记录进展修改时，每次只能对一条记录进展修改，默认修改内容为第一条的提示信息；修改后加载的内容应为的实际内容，而不再

29、为默认值；修改完成后须回到原记录所在位置，且刷新显示修改后的值；修改内容提交失败后，须保存用户修改的内容，以便再次修改提交；在查询条件下修改后返回，如不满足查询条件那么不显示；需对主标识字段进展重复值、空值空格判断；删除当删除一条或多条记录，要求：必须有确认删除的提示信息；删除成功后刷新，不显示删除的记录；删除成功后，返回到原记录所在页面，如果原记录所在页不存在时，那么返回上一页。专业资料整理WORD格式第22页共37页专业资料整理WORD格式当被删除的记录与其他记录存在关联时，请示需求界面给予不允许删除、更明细提示等信息；查询当按照条件查询时，要求：每次查询后定位到原页面；每次查询后保存当前

30、查询条件；当查询条件较多时，需要配置“重置按钮提供使用；当未查询到任何记录时，需给予未查找到相关记录的提示信息；除了用户明确要求不需要外，需提供模糊查询及组合查询功能；取消当进展取消当前修改并返回时，要求：在数据量较多的页面中，当进展了修改后，取消请给予提示；取消返回到原记录所在状态；保存当保存内容时，要求：当保存所费的时间较长时，需给出保存进度界面的提示；须控制不可以重复保存；重置重置是恢复变更前的状态，要求：必须保证重置后与初始进入此页面时一致性；返回当需要返回前一个页面时，要求：当从一个页面点击按钮或进入子页面时，子页面必须提供返回按钮；分页专业资料整理WORD格式第23页共37页专业资

31、料整理WORD格式当需要分页显示数据时，要求：当对查询结果进展分页时，分页的同时需要能够执行查询功能；当页数较多时，允许输入具体页数进展查询；全选当在一个页面上存在多个同类内容的复选框时，需要提供全选的功能，要求：勾选全选，那么选中当前页面所有记录；去掉当前页面某个记录的勾选，那么全选也去掉勾选；刷新页面后，自动去掉已勾选的记录及全选的勾选；一般页面规那么默认值各个页面都会存在默认值。要求：翻开一个新界面，光标默认停留在第一个待输入的文本框中；中选择下拉框不存在默认值时，那么默认为 请选择 ，当存在默认值时，请显示默认值；单项选择按组钮默认值表单元素选择表单元素选择要求主要集中在select,

32、radio ：性别， 5 个以下类别列表选择用radio 比拟适宜部门列表，用select 比拟适宜必填值对界面必填项的要求：界面的必填项必须以红色* 号标识出来。专业资料整理WORD格式第24页共37页专业资料整理WORD格式当必填项没有填写时，可在光标准备移走时，在文本框后以请输入 红色文字标识；当界面排列较紧时，如果必填项没有填，可以通过弹出信息的方式来提示，或者光标移走时弹出，或者最后提交时弹出。但确定后必须停留在第一个待输入的文本框中；界面传递对于程序执行过程中，会出现父窗体与子窗体参数同步传递的情况，规那么是：当父窗体与子窗体都存在同样的查询条件时，父窗体已输入的查询条件必须被带到

33、子窗体中；当子窗体的任何操作影响了父窗体的数据时，子窗体关闭返回，但必须刷新父窗体的数据；关闭父窗体必须连同子窗体一同关闭；子窗体的大小不能超过父窗体，且不要遮住父窗体的主要信息；窗口嵌套针对多层页面窗口的嵌套情况，要求：如果存在多层嵌套页面窗口，每层页面窗口弹出时都自动往右下移动一点点，以保证不遮盖上层页面窗口标题为准；页面窗口嵌套层次最好不超过3 层；输入框操作对于输入框操作的限制，规那么是：只允许输入数字的输入框需要控制其它字符的输入，或在输入非法值时给予提示，或在输入框内不再捕获非法值；只允许输入日期、时间的输入框需要通过格式化方式约束输入，而不是输入非法值后给出提示；当输入的内容到达

34、了字段的长度限制时，不显示新输入的的数值，并提示不允许再输入，而不是保存后自动截断；在线帮助功能专业资料整理WORD格式第25页共37页专业资料整理WORD格式系统应该提供详尽而可靠的在线帮助文档，在用户使用产生迷惑时可以自己寻求解决方法。要求：帮助文档中的性能介绍与说明要与系统性能配套一致；更新系统版本时，对作了修改的地方在帮助文档中要做相应的修改；操作时要提供及时调用帮助的快捷方式，常用F1；在界面上即时调用帮助时，应该能够及时定位到与该操作相对应的帮助位置，也就是说帮助要有即时的针对性；最好提供目前流行的联机帮助格式或HTML 帮助格式；用户可以用关键词在帮助索引中搜索所要的帮助，当然也

35、应该提供帮助索引；如果没有提供软件书面的帮助文档，最好能够有打印帮助的功能；在帮助中应该提供我们的技术支持方式，一旦用户难以自己解决可以方便的寻求新的帮助方式；菜单功能要求菜单是界面上最重要的元素，菜单位置按照按功能来组织。要求：菜单通常采用常用 - 主要 - 次要 - 工具 - 帮助的位置排列，符合 Windows 风格的要求；常用的有 文件 、 编辑 ，查看 等，需要系统有这些选项；下拉菜单要根据菜单项选择项的含义进展分组，并切按照一定的规那么进展排列，用横线隔开；一组菜单的使用有先后要求或有向导作用时，应该按先后次序排列；没有顺序要求的菜单项按使用频率和重要性排列，常用的放在开头，不常用

36、的靠后放置；重要的放在开头，次要的放在后边；如果菜单项选择项较多，应该采用加长菜单的长度而减少深度的原那么排列；菜单深度一般要求最多控制在三层以内；专业资料整理WORD格式第26页共37页专业资料整理WORD格式对常用的菜单要有快捷命令方式，组合原那么见5.2.8 ；最好能够对和正在进展的操作无关的菜单项能够屏蔽，也可采用动态加载方式 即只有需要的菜单才显示；菜单前的图标不宜太大，与和相应的字高保持一致；主菜单的宽度要接近，字数最好不应多于四个；主菜单数目不应太多，最好为单排布置；快捷键功能在菜单及按钮中使用快捷键可以让喜欢使用键盘的用户操作得更快一些在 Windows及其应用软件中的快捷键功

37、能大多是一致的，可以根据实际情况考虑实现。要求：面向事务的组合有 : Ctrl-D 删除、 Ctrl-F 寻找、 Ctrl H 替换、 Ctrl-I 插入、 Ctrl-N 新记录、 Ctrl-S 保存、 Ctrl-O 翻开；列表 : Ctrl-R 、 Ctrl-G 定位； Ctrl-Tab 下一分页窗口或反序浏览同一页面控件；编辑 : Ctrl-A 全选； Ctrl-C 拷贝； Ctrl-V 粘贴； Ctrl-X 剪切； Ctrl-Z 撤消操作； Ctrl-Y 恢复操作；文件操作 : Ctrl-P 打印； Ctrl-W 关闭；系统菜单 :Alt-A 文件； Alt-E 编辑； Alt-T 工具

38、； Alt W 窗口； Alt H 帮助。MS Windows 保存键 : Ctrl-Esc 任务列表； Ctrl-F4 关闭窗口； Alt-F4 完毕应用； Alt-Tab 下一应用； Enter 缺省按钮 / 确认操作； Esc 取消按钮 /取消操作；Shift-F1 上下文相关帮助；按钮中：可以根据系统需要而调节，以下只是常用的组合。Alt-Y 确定 (是 ) ； Alt-C 取消； Alt-N 否； Alt-D 删除； Alt-Q 退出； Alt-A 添加； Alt-E 编辑； Alt-B 浏览； Alt-R 读； Alt-W 写。这些快捷键也可以作为开发中文应用软件的标准，但亦可使用

39、汉语拼音的开头字母；快捷键的限制由于 IE 本身的一些原因，需要防止一些不必要的错误，故对其进展拦截限制。专业资料整理WORD格式第27页共37页专业资料整理WORD格式要求：在用户没有提供明确需求情况下，限制 F5、IE 工具栏、退格键仅限页面不限输入框、 Ctrl+N 的使用；根据功能需要，限制右键菜单的使用；页面的标准性通常界面设计都按 Windows 界面的标准来设计，即包含菜单条、工具栏、工具厢、状态栏、滚动条、右键快捷菜单 的标准格式，可以说：界面遵循标准化的程度越高，那么易用性相应的就越好。小型软件一般不提供工具厢。标准要求：常用菜单要有命令快捷方式。完成一样或相近功能的菜单用横

40、线隔开放在同一位置。菜单前的图标能直观的代表要完成的操作。菜单深度一般要求最多控制在三层以内。工具栏要求可以根据用户的要求自己选择定制。一样或相近功能的工具栏放在一起。工具栏中的每一个按钮要有及时提示信息。一条工具栏的长度最长不能超出屏幕宽度。工具栏的图标能直观的代表要完成的操作。系统常用的工具栏设置默认放置位置。工具栏太多时可以考虑使用工具厢。工具厢要具有可增减性，由用户自己根据需求定制。工具厢的默认总宽度不要超过屏幕宽度的1/5 。状态条要能显示用户切实需要的信息，常用的有：目前的操作、系统状态、用户位置、用户信息、提示信息、错误信息等，如果某一操作需要的时间较长，还应该显示进度条和进程提

41、示。专业资料整理WORD格式第28页共37页专业资料整理WORD格式滚动条的长度要根据显示信息的长度或宽度能及时变换，以利于用户了解显示信息的位置和百分比。状态条的高度以放置五好字为宜，滚动条的宽度比状态条的略窄。菜单和工具条要有清楚的界限;菜单要求凸出显示，这样在移走工具条时仍有立体感。菜单和状态条中通常使用 5 号字体。工具条一般比菜单要宽，但不要宽的太多，否那么看起来很不协调。右键快捷菜单采用与菜单一样的准那么。系统易用性易用性是指页面上的功能遵从惯例，例如：按钮名称易懂，用词准确，并与同一界面上的其他按钮易于区分，能望文知意。这样，使得用户不用查阅帮助就能知道该页面上的功能并进展相关的

42、正确操作。要求：翻开一个新界面，光标默认停留在第一个待输入的文本框中；完成一样或相近功能的按钮放置在一起，减少鼠标移动的距离，常用按钮要支持快捷方式；按功能将界面划分局域块，用Frame 框括起来，并要有功能说明或标题；界面要支持键盘自动浏览按钮功能，即按Tab 键的自动切换功能；界面上首先应输入的和重要信息的控件在Tab 顺序中应当靠前，位置也应放在窗口上较醒目的位置；同一界面上的控件数最好不要超过10 个，多于 10 个时可以考虑使用分页界面显示；分页界面要支持在页面间的快捷切换，常用组合快捷键Ctrl+Tab ；默认按钮要支持Enter 操作，即按 Enter 后自动执行默认按钮对应操作；可写控件检测到非法输入后应给出说明并能自动获得焦点；按钮键的顺序与控件排列顺序要一直，目前流行总体从上到下，同时行间从左到右的方式；复选框和选项框按选择几率的高底而先后排列；专业资料整理WORD格式第29页共37页专业资料整理WORD格式复选框和选项框要有默认选项，并支持Tab 选择；选项数一样时多用选项框而不用下拉列表框；界面空间较小时使用下拉框而不用选项框；选项数较少时使用选项框，相反使用下拉列表框；专业