Web页面设计标准规范.doc

Web页面设计规范

编 号：
版 本 号：
受控状态：
作 者：
分 发 号：

文档修改历史统计

文档修改统计
日 期
版本号
更改人
更改内容

文档审核统计
日 期
版本号
审核人
审核意见

目 录
1 引言 5
1.1 目标 5
1.2 范围 5
1.3 缩略术语 5
1.4 参考资料 5
2 WEB页面框架内容 5
2.1 页面框架 5
2.2 页面布局 6
2.2.1 布局标准 6
2.2.2 布局要求 6
2.2.2.1 页面分割 6
2.2.2.2 页面结构 7
2.2.2.3 页面展现 8
2.2.2.4 页面美化 8
2.3 页面字体 9
2.4 边距 9
2.5 表格 9
2.6 段落排版 10
2.7 Frame 10
2.8 其它页面元素 11
3 页面风格 11
3.1 风格分类 11
3.2 页面风格应用 12
4 WEB页面交互 12
4.1 页面元素焦点切换 12
4.1.1 信息填写 12
4.1.2 鼠标交互响应 12
4.2 页面信息交互 14
4.2.1 操作结果确定 14
4.2.2 其它规则 14
4.3 页面信息提醒 14
4.4 键盘响应支持 16
5 WEB页面通用规范 17
5.1 通常页面功效 17
5.1.1 新增 17
5.1.2 修改 17
5.1.3 删除 17
5.1.4 查询 17
5.1.5 取消 18
5.1.6 保留 18
5.1.7 重置 18
5.1.8 返回 18
5.1.9 分页 18
5.1.10 全选 18
5.2 通常页面规则 18
5.2.1 默认值 18
5.2.2 必填值 19
5.2.3 界面传输 19
5.2.4 窗口嵌套 19
5.2.5 输入框操作 19
5.2.6 在线帮助功效 19
5.2.7 菜单功效要求 20
5.2.8 快捷键功效 20
5.2.9 快捷键限制 21
5.2.10 页面规范性 21
5.2.11 系统易用性 22
5.2.12 输入安全性要求 22
5.2.13 独特征要求 23
5.2.14 多窗口应用和系统资源 23
6 页面编程技术使用规范 24
6.1 页面元素命名 24
6.2 DHTMLx控件 25
6.3 Flex控件 26
7 页面资源规格说明 26
7.1 图标 26
7.2 图片 26
7.3 多媒体 27
8 附录 28
8.1 基于DHXCSS规格示例 28
8.1.1 表格CSS示例 28
8.2 经典应用页面示例 28

引言
目标
本文用于规范我企业所开发商业软件中对于web页面设计工作，明确在设计中所要遵照准则和方法，web页面中各个元素规格要求，确保所实现web页面在风格、结构和功效上统一，提升商业软件外在品质。
范围
本规范适适用于企业全部商业软件产品。
缩略术语
DHMLX：web页面UI控件
参考资料

WEB页面框架内容
页面框架
WEB页面框架是指组成完整页面组织结构。通常是由以下三部分组成：Head，Main，Foot，有些时候出于布局需要，在“Head”下面还会加上用于页面功效导航“Menu”。图：

图 1

页面布局
布局标准
对于WEB应用来说，页面布局是和web应用功效区相对应，而且对于页面中各个部分之间切分百分比也需要遵守一定规则。
页面布局设计，首先需要考虑用户在浏览web页面时视觉流向上要求：

图 2
从视觉流向上看，用户首先看到是页面“Head”部分左面，通常那里是标识这个WEB应用Logo；然后是陈列WEB应用关键功效“Menu”来用于页面导航；接下来用户将看是处于页面左侧“sidebar”，通常这里也是用于页面功效导航，和“Menu”出选择相呼应，这里内容能够经过类似树状结构方法展示更为具体功效；接下来是处于页面中心位置内容部分，最终用户视线落在WEB页面底部。

布局要求
页面分割
以上面图示布局方法为例，根据通常web页面设计时所遵照方法，并结合黄金分割百分比方法：
首先，将页面根据3*3方法进行分割，以下图：
在高度方向上，对上部1/3区域根据黄金分割方法分出head和menu区域；
在宽度方向上，对中部左边1/3区域根据黄金分割方法分出sidebar区域，剩下空间留给content区域；
在高度方向上，对下部1/3区域根据黄金分割方法分出foot区域；

页面结构
页面布局中，各个区域大小定义方法是不一样，请见下图：

图 3

在页面布局中，对各个功效区域切分是根据“像素”和“百分比”方法来进行，以1024*768分辨率做为基准，其中：
Head区域，宽度是根据百分比方法设置，宽度根据100%设置，高度采取所占固定像素值来确定，通常占？px，假如有menu区，则调整为？px；
Menu区域，和“head”配置要求是一样，宽度根据100%设置，高度结合“head”高度设置来确定，通常占？px；
Sidebar区域，宽度是结合和“content”之间黄金切分百分比，根据固定像素方法确定，通常占？px；高度是根据百分比方法来设置；
Content区域，高度和宽度方向布局全部是根据百分比方法来设置；
Foot区域，宽度根据100%设置，高度采取所占固定像素值来确定，通常占？px；

页面展现
对于页面布局来说，除了上述要求外，还需要考虑以下要求：
能自适应1024*768、800*600两种分辨率；
界面层次不超出3层；
默认窗口设置下，不应出现水平、垂直滚动条；
当界面内容超出显示区域时，以浮动层形式显示；

还有，对于用户感官而言，屏幕对角线相交位置是用户直视地方，而页面正上方四分之一处为易吸引用户注意力位置，所以在放置页面时要注意利用这两个位置。
要求：
父页面或主页面中心位置应该设计在对角线焦点周围；
子页面位置应该靠近主窗体左上角或正中；
需要多个子页面弹出时，应该依次向右下方偏移，以显示窗体出标题为宜；
在页面上方四分之一处放置用户logo、关键功效导航和部分系统操作功效；

页面美化
界面应该大小适合美学见解，感觉协调舒适，能在有效范围内吸引用户注意力。
提议和要求：
长宽靠近黄金点百分比，切忌长宽百分比失调、或宽度超出长度；
布局要合理，不宜过于密集，也不能过于空旷，合理利用空间；
同一页面上按钮大小应该一致，不一样页面按钮大小尽可能相近，按钮上忌用太长名称；
按钮大小要和界面大小和空间要协调；
避免空旷界面上放置很大按钮；
放置完控件后界面不应有很大空缺位置；
字体大小要和界面大小百分比协调， 通常使用字体12px；
前景和背景色搭配合理协调，反差不宜太大，主色要柔和，最好少用深色，如大红、大绿等，能够借用Windows界面色调；
大型系统常见主色有"#E1E1E1"、"#EFEFEF"、"#C0C0C0"等；
界面风格要保持一致，字大小、颜色、字体要相同，需要艺术处理或有特殊要求地方提议使用图片表现；
假如窗体支持最大化或放大时，窗体上控件也要伴随窗体而缩放；切忌只放大窗体而忽略控件缩放；
系统对话框页面不应该支持缩放，即右上角只相关闭功效；
通常父窗体支持缩放时，子窗体没有必需缩放；
假如能给用户提供自定义界面风格，则由用户自己选择颜色、字体等；

页面字体
页面字体属性设置在对应CSS中进行定义，页面文字编码要求是UTF-8，在要求字体属性时，需要设置：汉字采取“宋体”，英文采取“Arial”或“verdana”，CSS文件中font-family里面必需确保有“宋体”。
对于页面属性中字体大小设置，需要内容不一样等级来设置，通常：
“Head”中标题文字，20px；
“Menu”中导航文字，14px；
“Sidebar”中文字，12px；
“Content”中正文，12px或14px，标题；
“foot”中文字，12px或10px；

相关页面字体属性具体设置参见附录中CSS示例。

边距
WEB页面和其中表格全部应该设定边距，避免页面元素紧贴边缘情况发生，最小边距值为“3px”，默认边距值应在CSS中设定。
比如：

图 4

表格
对于表格，其属性设置一样在CSS中进行定义。
表格使用最多情况是显示装在数据，因为有很多表项需要在页面中完整显示，所以标准上对于表格各个单元格宽度设置应采取百分比方法来进行，这么表格不仅能够将数据完整地显示，而且还能够适应不一样分辨率情况。但因为表格中存在不定长内容，所以为了确保表格宽度不被挤变形，对于不定长内容，可固定显示宽度，当超出此显示宽度后，以……显示，光标停留后，具体内容再在浮动层显示。
其它要求：
表头中数据应水平/垂直居中对齐。
表单中内容如为定长，则为居中显示；如为不固定中英文内容，则为居左显示；如为数值形式，则为居右显示。
表格表头应采取不一样于表格内容背景颜色，并要求对比显著；
表格表头文字应采取加粗，或不一样于表格内容字体；
表格中相邻行需要经过两种有一定对比差异浅色作为背景色；
各个页面表格边框风格需要统一，提议设置细边框；
表格中存在链接文字需要采取不一样于其它内容颜色或字体显示；
对于表格嵌套尽可能控制在三层以内，而且严禁使用表格来进行页面布局。

相关表格属性具体设置请参见附录中CSS示例。

段落排版
在WEB页面中，“content”部分是展示页面正文区域，当段落是由纯文字组成时：
正文一行字数最好不超出50，首页标题文字以8-20字为佳。
行距提议用百分比来定义，常见两个行距值是line-height:120%或150%；
对于一段文字，尤其是正文部分，确保左右最少有15px留白，便于用户换行时不受到干扰。
文字和背景对比要足够显著，确保最弱文字可读性。

在使用<p>标签，需要对应有</p>，而且要求设置margin，使得段落文字前后左右能够有适宜空白区。可在CSS中设置：p{ margin: 18px 6px 6px 18px;}，分别定义了上、右、下、左空白区大小。
首行缩进时，严禁使用“&nbsp;”，而是在CSS中设置text-indent，比如：p { text-indent: 2em; }。
在一段完整文字中请尽可能不要使用<br> 来人工干预分段；
对于margin，为了预防因为采取默认margin值而造成页面排版问题，推荐全部标签定义为：margin: 0;
当采取竖排文字时，推荐使用writing-mode。经过设置两个属性值：lr-tb和tb-rl，并结合direction完成文字竖排，lr-tb指是文字方向为：左-右、上-下，tb-rl是指上-下、右-左。

Frame
Frame是能够将一个WEB页面切分成多个窗口来显示WEB内容一个页面设计方法，切分后每个窗口内容是经过指向URL来实现。
Frame标识是<FRAMESET> <FRAME> ，而在使用Frame时，通常需要将其放在网页入口html文件中，而无须放入 <BODY> 标识。<FRAMESET> 是用以划分框窗，每一框窗由一个 <FRAME> 标识所标示，<FRAME>必需在<FRAMESET>范围中使用。
其中：
<FRAMESET> 称框架标识，用以宣告HTML文件为框架模式，并设定视窗怎样分割。
<FRAME> 则只是设定某一个框窗内参数属性。

使用Frame分割页面，需要根据2.1节“页面布局”中所描述要求来设置<FRAMESET> 和<FRAME>，以完成对页面各个部分合理切分。

对于<FRAMESET> 和<FRAME>中部分属性设置，要求有：
Name，表示Frame名字，必需有定义；
Framespacing，表示各个Frame之间空白距离，要求设置为非零，通常设置为5；
Noresize，表示是否许可使用者经过拖拉改变Frame大小，要求在Frame设置此参数；
Scrolling，表示是否要显示卷轴，要求设置为“AUTO”
Marginhight，表示框架高度部分边缘所保留空间，要求设置？
Marginwidth，表示框架宽度部分边缘所保留空间，要求设置？

其它页面元素
按钮，要求按钮上显示文字能够正确表示功效含义；
单选框，默认选择一个，和所关联文字间距应该在3px；
多选框，默认全不选，所关联文字应该能够正确表示选择含义，和控件间距应该在3px；
下拉框，给出默认选择，而且默认选择显示出“默认全部”或“请选择”等文字提醒；
图片，默认为显示出代表图片文件图标，或是缩略图；
多媒体，默认为显示出代表多媒体文件图标；

相关这些页面元素具体属性设置请参见附录中CSS示例。

页面风格
WEB页面风格是指WEB页面经过对页面布局、字体、配色、页面元素排列融合来传达给用户、含有主观感受。
页面风格选择除了需要考虑通常用户感受外，还需要将用户所在环境原因考虑进去，从而形成符合特定用户要求页面风格。
风格分类
Web应用页面风格内容包含：
布局，不仅仅是系统入口主页布局，而是全部页面；
颜色，根据风格专题来设置页面中包含颜色及其表现；
页面元素，根据风格专题来确定页面元素大小、形状和交互响应行为；
图标，根据风格专题来定制表示各类功效图标；
提醒窗口，是页面交互关键形式，需要根据风格专题来定制；

具体风格分类定义，待定。

页面风格应用
具体风格应用定义，待定。

WEB页面交互
页面元素焦点切换
在WEB页面中，为了提升和用户之间互动，需要在各类页面元素取得焦点和失去焦点时候，在以下场景中采取页面交互方法有：
信息填写
对输入信息验证：
假如需要校验填写内容，则需要在输入框失去焦点时进行数据有效性判定，并在输入框后给出提醒。图：

对输入信息提醒：
在一组需要被验证数据填写时，假如有必填项，需要在输入框后面给出标志，并对填入规则加以说明。图：

假如输入框内有默认文字，当输入框取得焦点时，需要将输入框内文字处于全选状态。图：

鼠标交互响应
对鼠标在页面中所产生事件进行处理，当页面元素取得焦点、被点击、失去焦点时，则需要控件本身在颜色、大小或形状上改变给和响应，亦能够添加声音响应。
下面是多种情况下鼠标交互示例：
比如：
- 按钮：按钮颜色改变、或形状，或字体改变，图：
鼠标放上取得焦点前：

鼠标放上取得焦点后：

- 链接：字体变粗、或字体变色、或背景变色，图：
鼠标放上取得焦点前：
鼠标放上取得焦点后：

- 页签：取得焦点页签颜色改变，或页签大小和里面字体变大，图：
鼠标放上取得焦点前：
鼠标放上取得焦点后：

- 输入框，输入框边框变色；
鼠标放上取得焦点前：
鼠标放上取得焦点后：

- 表格，表格中行底色改变；
鼠标放上取得焦点前：
鼠标放上取得焦点后：

- 等候响应：当因为载入大量数据等原因，使得用户需要等候一定时间，需要将鼠标指针形状变成时间漏斗形状、或其它表示鼠标不可操作样子来提醒用户等候。图：

对于我们所使用相关鼠标交互响应规范，将结合页面风格在附录中给出说明。

页面信息交互
操作结果确定
在提交数据，或是载有数据页面关闭，或其它需要和用户进行确定交互场景，需要软件能够提供一个以弹出页面形式，要求用户确定实施结果对话框，包含情况有：
提醒确定输入信息正确：弹出对话框，并将已填写内容列出，要求用户确定内容正确性，给出“确定”和“取消”选择按钮；
提醒确定数据更改是否保留：弹出对话框，提醒目前页面内容已经改变，要求用户确定是否保留更改信息，给出“是”和“否”选择按钮；
提醒确定目前页面跳转：弹出对话框，提醒用户正在跳转到另外一个页面，要求用户确定离开目前页面，给出“是”和“否”选择按钮；
确定删除数据内容：弹出对话框，提醒用户删除了目前选择内容，要求用户确定是否继续删除操作，给出“确定”和“取消”选择按钮；
其它规则
对于信息交互过程中，其它需要遵守规则有：
关键命令按钮和使用较频繁按钮要放在界面上相对固定位置上；
轻易引发操作错误或使程序退出、关闭按钮应不醒目，放在不易点位置；
和正在进行操作无关按钮应该加以屏蔽，比如：按钮背景为灰色显示；
对可能造成数据无法恢复操作必需提供确定信息，给用户放弃选择机会；
非法输入或操作应有足够提醒说明；
对运行过程中出现问题而引发错误地方要有提醒，让用户明白错误出处，避免形成无限期等候；

页面信息提醒
在web页面提供功效中，很多情况需要系统发送部分必需提醒信息到页面显示给用户，这些信息分类有：
警告信息
严禁信息
操作实施成功信息
操作实施失败信息
错误信息
帮助信息
提醒信息

这些信息在目前页面或弹出页面上显示。假如采取弹出对话框形式，对话框页面结构以下图：

图标区
按钮 1
按钮 2
标题区

提醒信息区

标题区：简明给出此次提醒信息性质，比如：警告：操作非法！
图标区：给出和此次提醒信息性质匹配图标；
提醒信息区：给出此次提醒信息具体内容；
按钮区：给出供用户进行选择按钮；
对于对话框背景颜色，要求和系统整体风格选择颜色一致，而右上角操作区只保留关闭一个可操作功效，最小化和最大化功效将不显示。

对应采取图标图例为：
警告信息：

严禁操作信息：

操作成功信息：

操作失败信息：

错误信息：

帮助信息：

提醒信息：

提醒信息内容要求：
提醒信息中如有标点符号，统一为全角符号；
提醒信息如有主语，统一为‘您’；
在关键或复杂操作成功后，给提醒信息；
有后续操作操作在成功后，也需给提醒信息，说明目前状态。
提醒信息不宜太长，宽度应不超出目前窗口宽度1/2，当超出此百分比时，请视具体情况进行换行；
当功效按钮为图片按钮时，光标停留需给浮动提醒信息；

键盘响应支持
因为用户有时候还需要结合键盘进行操作，所以页面需要提供部分简单键盘支持，比如：“Esc”、“Enter”、“Tab”“Space”，系统应对这些键值作出响应。其中：
Esc，“取消”目前操作；
Enter，“确定”或进行下一步操作或提交；
Tab、或Shift+tab能够在页面元素中根据一定次序切换焦点，遵照从左上至右下标准；
其它快捷键支持，需要依据项目标实际情况来定义。

WEB页面通用规范
通常页面功效
新增
当新增一条或多条统计，要求：
新增统计必需排在首页首行。
提交失败后必需保留用户已经输入内容，方便再次提交。
提交时需对关键标识字段进行反复值、空值（空格）判定。
新增内容提交失败后，须保留用户修改内容，方便再次修改提交；
需对主标识字段进行反复值、空值（空格）判定；
修改
当进行单条或多条统计修改时，要求：
如界面存在复选按钮，勾选多条统计进行修改时，每次只能对一条统计进行修改，默认修改内容为第一条提醒信息；
修改后加载内容应为实际内容，而不再为默认值；
修改完成后须回到原统计所在位置，且刷新显示修改后值；
修改内容提交失败后，须保留用户修改内容，方便再次修改提交；
在查询条件下修改后返回，如不满足查询条件则不显示；
需对主标识字段进行反复值、空值（空格）判定；
删除
当删除一条或多条统计，要求：
必需有确定删除提醒信息；
删除成功后刷新，不显示删除统计；
删除成功后，返回到原统计所在页面，假如原统计所在页不存在时，则返回上一页。
当被删除统计和其它统计存在关联时，请示需求界面给不许可删除、更明细提醒等信息；
查询
当根据条件查询时，要求：
每次查询后定位到原页面；
每次查询后保留目前查询条件；
当查询条件较多时，需要配置“重置”按钮提供使用；
当未查询到任何统计时，需给未查找到相关统计提醒信息；
除了用户明确要求不需要外，需提供模糊查询及组合查询功效；
取消
当进行取消目前修改并返回时，要求：
在数据量较多页面中，当进行了修改后，取消请给提醒；
取消返回到原统计所在状态；
保留
当保留内容时，要求：
当保留所费时间较长时，需给出保留进度界面提醒；
须控制不能够反复保留；
重置
重置是恢复变更前状态，要求：
必需确保重置后和初始进入此页面时一致性；
返回
当需要返回前一个页面时，要求：
当从一个页面点击按钮或链接进入子页面时，子页面必需提供返回按钮；
分页
当需要分页显示数据时，要求：
当对查询结果进行分页时，分页同时需要能够实施查询功效；
当页数较多时，许可输入具体页数进行查询；
全选
当在一个页面上存在多个同类内容复选框时，需要提供全选功效，要求：
勾选全选，则选中目前页面全部统计；
去掉目前页面某个统计勾选，则全选也去掉勾选；
刷新页面后，自动去掉已勾选统计及全选勾选；
通常页面规则
默认值
各个页面全部会存在默认值。
要求：
打开一个新界面，光标默认停留在第一个待输入文本框中；
当选择下拉框不存在默认值时，则默认为“请选择”，当存在默认值时，请显示默认值；
单选按组钮默认值

表单元素选择
表单元素选择要求关键集中在select,radio：
性别，5个以下类别列表选择用radio比较适宜
部门列表，用select比较适宜

必填值
对界面必填项要求：
界面必填项必需以红色*号标识出来。
当必填项没有填写时，可在光标准备移走时，在文本框后以“请输入”红色文字标识；
当界面排列较紧时，假如必填项没有填，能够经过弹出信息方法来提醒，或光标移走时弹出，或最终提交时弹出。但确定后必需停留在第一个待输入文本框中；
界面传输
对于程序实施过程中，会出现父窗体和子窗体参数同时传输情况，规则是：
当父窗体和子窗体全部存在一样查询条件时，父窗体已输入查询条件必需被带到子窗体中；
当子窗体任何操作影响了父窗体数据时，子窗体关闭返回，但必需刷新父窗体数据；
关闭父窗体必需连同子窗体一同关闭；
子窗体大小不能超出父窗体，且不要遮住父窗体关键信息；
窗口嵌套
针对多层页面窗口嵌套情况，要求：
假如存在多层嵌套页面窗口，每层页面窗口弹出时全部自动往右下移动一点点，以确保不遮盖上层页面窗口标题为准；
页面窗口嵌套层次最好不超出3层；
输入框操作
对于输入框操作限制，规则是：
只许可输入数字输入框需要控制其它字符输入，或在输入非法值时给提醒，或在输入框内不再捕捉非法值；
只许可输入日期、时间输入框需要经过格式化方法约束输入，而不是输入非法值后给出提醒；
当输入内容达成了字段长度限制时，不显示新输入数值，并提醒不许可再输入，而不是保留后自动截断；

在线帮助功效
系统应该提供详尽而可靠在线帮助文档，在用户使用产生迷惑时能够自己寻求处理方法。
要求：
帮助文档中性能介绍和说明要和系统性能配套一致；
更新系统版本时，对作了修改地方在帮助文档中要做对应修改；
操作时要提供立即调用帮助快捷方法，常见F1；
在界面上即时调用帮助时，应该能够立即定位到和该操作相对应帮助位置，也就是说帮助要有即时针对性；
最好提供现在流行联机帮助格式或HTML帮助格式；
用户能够用关键词在帮助索引中搜索所要帮助，当然也应该提供帮助索引；
假如没有提供软件书面帮助文档，最好能够有打印帮助功效；
在帮助中应该提供我们技术支持方法，一旦用户难以自己处理能够方便寻求新帮助方法；
菜单功效要求
菜单是界面上最关键元素，菜单位置根据按功效来组织。
要求：
菜单通常采取“常见--关键--次要--工具--帮助”位置排列，符合Windows风格要求；
常见有“文件”、“编辑”，“查看”等，需要系统有这些选项；
下拉菜单要依据菜单选项含义进行分组，并切根据一定规则进行排列，用横线隔开；
一组菜单使用有前后要求或有向导作用时，应该按前后次序排列；
没有次序要求菜单项按使用频率和关键性排列，常见放在开头， 不常见靠后放置；关键放在开头，次要放在后边；
假如菜单选项较多，应该采取加长菜单长度而降低深度标准排列；
菜单深度通常要求最多控制在三层以内；
对常见菜单要有快捷命令方法，组合标准见5.2.8；
最好能够对和正在进行操作无关菜单项能够屏蔽，也可采取动态加载方法——即只有需要菜单才显示；
菜单前图标不宜太大，和和对应字高保持一致；
主菜单宽度要靠近，字数最好不应多于四个；
主菜单数目不应太多，最好为单排部署；

快捷键功效
在菜单及按钮中使用快捷键能够让喜爱使用键盘用户操作得愈加快部分 在Windows及其应用软件中快捷键功效大多是一致，能够依据实际情况考虑实现。
要求：
面向事务组合有: 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工具；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写。这些快捷键也能够作为开发汉字应用软件标准，但亦可使用汉语拼音开头字母；

快捷键限制
因为IE本身部分原因，需要避免部分无须要错误，故对其进行拦截限制。
要求：
在用户没有提供明确需求情况下，限制F5、IE工具栏、退格键（仅限页面不限输入框）、Ctrl+N使用；
依据功效需要，限制右键菜单使用；

页面规范性
通常界面设计全部按Windows界面规范来设计，即包含“菜单条、工具栏、工具厢、状态栏、滚动条、右键快捷菜单”标准格式，能够说：界面遵照规范化程度越高，则易用性对应就越好。小型软件通常不提供工具厢。
规范要求：
常见菜单要有命令快捷方法。
完成相同或相近功效菜单用横线隔开放在同一位置。
菜单前图标能直观代表要完成操作。
菜单深度通常要求最多控制在三层以内。
工具栏要求能够依据用户要求自己选择定制。
相同或相近功效工具栏放在一起。
工具栏中每一个按钮要有立即提醒信息。
一条工具栏长度最长不能超出屏幕宽度。
工具栏图标能直观代表要完成操作。
系统常见工具栏设置默认放置位置。
工具栏太多时能够考虑使用工具厢。
工具厢要含有可增减性，由用户自己依据需求定制。
工具厢默认总宽度不要超出屏幕宽度1/5。
状态条要能显示用户切实需要信息，常见有：
现在操作、系统状态、用户位置、用户信息、提醒信息、错误信息等，假如某一操作需要时间较长，还应该显示进度条和进程提醒。
滚动条长度要依据显示信息长度或宽度能立即变换，以利于用户了解显示信息位置和百分比。
状态条高度以放置五好字为宜，滚动条宽度比状态条略窄。
菜单和工具条要有清楚界限;菜单要求凸出显示，这么在移走工具条时仍有立体感。
菜单和状态条中通常使用5号字体。工具条通常比菜单要宽，但不要宽太多，不然看起来很不协调。
右键快捷菜单采取和菜单相同准则。

系统易用性
易用性是指页面上功效遵从通例，比如：按钮名称易懂，用词正确，并和同一界面上其它按钮易于区分，能望文知意。这么，使得用户不用查阅帮助就能知道该页面上功效并进行相关正确操作。
要求：
打开一个新界面，光标默认停留在第一个待输入文本框中；
完成相同或相近功效按钮放置在一起，，降低鼠标移动距离，常见按钮要支持快捷方法；
按功效将界面划分局域块，用Frame框括起来，并要有功效说明或标题；
界面要支持键盘自动浏览按钮功效，即按Tab键自动切换功效；
界面上首先应输入和关键信息控件在Tab次序中应该靠前，位置也应放在窗口上较醒目标位置；
同一界面上控件数最好不要超出10个，多于10个时能够考虑使用分页界面显示；
分页界面要支持在页面间快捷切换，常见组合快捷键Ctrl+Tab；
默认按钮要支持Enter操作，即按Enter后自动实施默认按钮对应操作；
可写控件检测到非法输入后应给出说明并能自动取得焦点；
按钮键次序和控件排列次序要一直，现在流行总体从上到下，同时行间从左到右方法；
复选框和选项框按选择几率高底而前后排列；
复选框和选项框要有默认选项，并支持Tab选择；
选项数相同时多用选项框而不用下拉列表框；
界面空间较小时使用下拉框而不用选项框；
选项数较少时使用选项框，相反使用下拉列表框；
专业性强软件要使用相关专业术语，通用性界面则提倡使用通用性词眼；

输入安全性要求
在界面上需要建立部分规则来控制输入犯错几率，会大大降低系统因用户人为错误引发破坏，开发者应该尽可能周全地考虑到多种可能发生问题，使犯错可能降至最小，比如：当程序出现保护性错误而退出系统，会使用户对软件失去信心，因为这意味着用户要中止思绪，并费时费力地重新登录，而且已进行操作也会因没有存盘而全部丢失。所以需要在页面设计时应对输入根据规则进行校验。
要求：
排除可能会使程序非正常中止错误；
应该检验用户录入无效数据；
采取相关控件限制用户输入值种类；
当用户面临选择是两个或多个选一时，请采取单选框，而当选择可能再多部分时，能够采取复选框；
当选项尤其多时，能够采取列表框，下拉式列表框；
确保未经授权或没有意义操作不能进行；
对可能引发致命错误或系统犯错输入字符或动作要加限制或屏蔽；
对可能发生严重后果操作要有补救方法。经过补救方法用户能够回到原来正确状态；
对部分特殊符号输入，和系统使用符号相冲突字符等进行判定并阻止用户输入该字符，并提前给出输入提醒；
对错误操作最好支持可逆性处理，如取消系列操作；
在输入有效性字符之前应该阻止用户进行只有输入以后才可进行操作；
对可能造成等候时间较长操作应该提供取消功效；
特殊字符常有；;'"><，｀'："［"｛、\|｝］+=)-(_*&&^%$#@!~，.。?/还有空格；
在读入用户所输入信息时，应依据需要选择是否去掉前后空格，比如：有些读入数据库字段不支持中间有空格，但用户切实需要输入中间空格，这时要在程序中加以处理；

独特征要求
假如一味遵照业界界面标准，则会丧失自己个性.在框架符合以上规范情况下，设计含有自己独特风格界面尤为关键。尤其在商业软件流通中有着很好迁移默化广告效用
要求：
安装界面上应有单位介绍或产品介绍，并有自己图标；
主界面，最好是大多数界面上要有企业图标；
登录界面上要有本产品标志，同时包含企业图标；
帮助菜单"相关"中应有版权和产品信息；
企业系列产品要保持一致界面风格，如背景色、字体、菜单排列方法、图标、安装过程、按钮用语等应该大致一致；

多窗口应用和系统资源
设计良好软件不仅要有完备功效，而且要尽可能占用最低程度资源，所以在出现多窗口情况下需要避免下述部分情况。
要求：
在多窗口系统中，有些界面要求必需保持在最顶层，避免用户在打开多个窗口时，不停切换甚至最小化其它窗口来显示该窗口；
在主界面载入完成后自动卸出内存，让出所占用WINDOWS系统资源；
关闭全部窗体，系统退出后要释放所占全部系统资源 ，除非是需要后台运行系统；
尽可能预防对系统独占使用；

页面编程技术使用规范
页面元素命名
在使用javaScript来进行页面动态控制编程时，需要对程序中页面元素和功效操作名称引用进行约定：
页 头： header 
外 套： wrap
页 脚： foot

内 容： content
页面主体： main
容 器： container
标 题： title
目前： current

主导航： mainnav
顶导航： topnav
子导航： subnav
边导航： sidebar
左导航： leftsidebar
右导航： rightsidebar
栏目： column 
面包屑： breadcrumb (即页面所处位置导航提醒）

菜 单： menu 
子菜单： submenu 
菜单内容： menucontent
菜单容量： menucontainer
按 钮： button
表 单： form
页 签： tab 
文章列表： list 
滚 动： scroll 
提醒信息： msg 
摘 要： summary 
标 签： tag
标签文字： tagTitle
标签内容： tagContent
目前标签： tagCurrent/currentTag
搜索范围： range
图    标： icon
目前位置： currentPath
列 定 义： column1of3 (三列中第一列)
                column2of3 (三列中第二列)
                column3of3 (三列中第三列)

商 标： label
旗 志： logo
标 语： banner
注 释： note
搜 索： search
搜索关键字：keyword
登 陆： Login
注 册： regsiter 
热 点： hot 
新 闻： news 
下 载： download 
打 印： print
版 权： copyright
服 务： service 
友谊链接： friendlink 
版 权： copyright 
小技巧： tips 
栏目标题： title 
加 入： joinus 
指 南： guild 
服 务： service 
状 态： status 
投 票： vote 
合作伙伴： partner

其它相关注意事项
1.一律小写; 
2.尽可能用英文; 
3.不加中杠和下划线; 
4.尽可能不缩写，除非一看就明白单词

DHTMLx控件
控件命名
控件外观属性
控件使用规则

Flex控件
控件命名
控件外观属性
控件使用规则
页面资源规格说明
图标
图标需要根据用途分类来定义：
通用类
业务相关类
风格类

图标应采取矢量图来表示，在创建时需要考虑属性有：
色彩
大小
形状
图案
动作状态
建立在统一资源库中。
图片
这里所规范图片是在WEB应用中使用预置图片，需要定义图片属性：
图片格式