Web页面设计规范
编号：
版本号：
受控状态：
作者：
分发号：
文档修改历史记录文档修改记录
目录
1引言6
1.1 目的 6
1.2 范围 6
1.3 缩略术语 6
1.4 参考资料 6
2WEB页面框架内容6 2.1 页面框架 6
2.2 页面布局 6
2.2.1 布局原则 6
2.2.2 布局要求7
2.2.2.1 页面分割7
2.2.2.2 页面结构8
2.2.2.3 页面展现9
2.2.2.4 页面美化10
2.3 页面字体10
2.4 边距11
2.5 表格11
2.6 段落排版12
2.7 Frame 12
2.8 其他页面元素13
3页面风格14
3.1 风格分类14
3.2 页面风格应用14
4WEB页面交互 14
4.1 页面元素焦点切换14 4.1.1 信息填写15
4.1.2 鼠标交互响应15
4.2 页面信息交互17
4.2.1 操作结果确认17
4.2.2 其他规则17
4.3 页面信息提示17
4.4 键盘响应支持20
5WEB页面通用规范20 5.1 一般页面功能20
5.1.1 新增20
5.1.2 修改21
5.1.3 删除21
5.1.4 查询21
5.1.5 取消21
5.1.6 保存22
5.1.7 重置22
5.1.8 返回22
5.1.9 分页22
5.1.10 全选22
5.2 一般页面规则22
5.2.1 默认值 22
5.2.2 必填值 23
5.2.3 界面传递23
5.2.4 窗口嵌套23
5.2.5 输入框操作23
5.2.6 在线帮助功能24
5.2.7 菜单功能要求24
5.2.8 快捷键功能25
5.2.9 快捷键的限制25
5.2.10 页面的规范性26
5.2.11 系统易用性27
5.2.12 输入安全性要求28
5.2.13 独特性要求28
5.2.14 多窗口的应用与系统资源29 6页面编程技术使用规范29
6.1 页面元素命名29
6.2 DHTMLx控件 32
6.3 Flex控件32
7页面资源规格说明32
7.1 图标32
7.2 图片33
7.3 多媒体 33
8附录34
8.1 基于DHX的CSS规格示例34 8.1.1 表格CSS示例34
8.2 典型应用的页面示例34
引言
目的
本文用于规范我公司所开发的商业软件中对于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、主要功能导航和一些系统操作功能；
