页面设计规范
![页面设计规范](https://img.360docs.net/imga6/04zj95e5v3r3c5er264e-61.webp)
![页面设计规范](https://img.360docs.net/imga6/04zj95e5v3r3c5er264e-32.webp)
Web页面设计规范
编号:
版本号:
受控状态:
作者:
分发号:
文档修改历史记录文档修改记录
文档审核记录
目录
1引言 (5)
1.1目的 (5)
1.2范围 (5)
1.3缩略术语 (5)
1.4参考资料 (5)
2WE B页面框架内容 (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.7F RAME (10)
2.8其他页面元素 (11)
3页面风格 (11)
3.1风格分类 (11)
3.2页面风格应用 (12)
4WE B页面交互 (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)
5WE B页面通用规范 (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在线帮助功能 (20)
5.2.7菜单功能要求 (20)
5.2.8快捷键功能 (21)
5.2.9快捷键的限制 (21)
5.2.10页面的规范性 (21)
5.2.11系统易用性 (22)
5.2.12输入安全性要求 (23)
5.2.13独特性要求 (23)
5.2.14多窗口的应用与系统资源 (24)
6页面编程技术使用规范 (24)
6.1页面元素命名 (24)
6.2DHTML X控件 (26)
6.3F LEX控件 (26)
7页面资源规格说明 (26)
7.1图标 (26)
7.2图片 (27)
7.3多媒体 (27)
8附录 (28)
8.1基于DHX的CSS规格示例 (28)
8.1.1表格CSS示例 (28)
8.2典型应用的页面示例 (28)
1引言
1.1 目的
本文用于规范我公司所开发的商业软件中对于web页面的设计工作,明确在设计中所要遵循的准则和方法,web页面中各个元素的规格要求,确保所实现的web页面在风格、结构和功能上的统一,提升商业软件的外在品质。
1.2 范围
本规范适用于公司所有的商业软件产品。
1.3 缩略术语
DHMLX:web页面的UI控件
1.4 参考资料
2WEB页面框架内容
2.1 页面框架
WEB的页面框架是指构成完整页面的组织结构。通常是由以下三部分构成:Head,Main,Foot,有些时候出于布局的需要,在“Head”下面还会加上用于页面功能导航的“Menu”。如图:
图 1
2.2 页面布局
2.2.1 布局原则
对于WEB应用来说,页面布局是和web应用的功能区相对应的,并且对于页面中各个部分之间的切分比例也需要遵守一定的规则。
页面布局的设计,首先需要考虑用户在浏览web页面时视觉流向上的要求:
图 2
从视觉流向上看,用户首先看到的是页面“Head”部分的左面,通常那里是标识这个WEB应用的Logo;然后是陈列WEB应用主要功能的“Menu”来用于页面导航;接下来用户将看的是处于页面左侧的“sidebar”,通常这里也是用于页面功能导航的,和“Menu”出的选择相呼应,这里的内容可以通过类似树状结构的方式展示更为详细的功能;接下来是处于页面中心位置的内容部分,最后用户的视线落在WEB页面的底部。
2.2.2 布局要求
2.2.2.1 页面分割
以上面图示的布局方式为例,按照通常web页面设计时所遵循的方法,并结合黄金分割比例的方法:
首先,将页面按照3*3的方式进行分割,如下图:
●在高度方向上,对上部1/3区域按照黄金分割的方法分出head和menu的区域;
●在宽度方向上,对中部左边1/3区域按照黄金分割的方法分出sidebar的区域,剩
下的空间留给content区域;
●在高度方向上,对下部1/3区域按照黄金分割的方法分出foot的区域;
2.2.2.2 页面结构
页面的布局中,各个区域大小的定义方式是不同的,请见下图:
图 3
在页面布局中,对各个功能区域的切分是按照“像素”和“比例”方式来进行的,以1024*768的分辨率做为基准,其中:
●Head区域,宽度是按照比例方式设置的,宽度按照100%设置,高度采用所占的固
定像素值来确定的,一般占?px,如果有menu区,则调整为?px;
●Menu区域,和“head”的配置要求是一样的,宽度按照100%设置,高度结合“head”
的高度设置来确定,一般占?px;
●Sidebar区域,宽度是结合与“content”之间的黄金切分比例,按照固定像素的方
式确定的,一般占?px;高度是按照比例方式来设置的;
●Content区域,高度和宽度方向布局都是按照比例方式来设置的;
●Foot区域,宽度按照100%设置,高度采用所占的固定像素值来确定的,一般占?
px;
2.2.2.3 页面展现
对于页面布局来说,除了上述要求外,还需要考虑如下要求:
●能自适应1024*768、800*600两种分辨率;
●界面层次不超过3层;
●默认窗口设置下,不应出现水平、垂直滚动条;
●当界面内容超出显示区域时,以浮动层的形式显示;
还有,对于用户的感官而言,屏幕对角线相交的位置是用户直视的地方,而页面正上方四分之一处为易吸引用户注意力的位置,所以在放置页面时要注意利用这两个位置。
要求:
●父页面或主页面的中心位置应该设计在对角线焦点附近;
●子页面的位置应该靠近主窗体的左上角或正中;
●需要多个子页面弹出时,应该依次向右下方偏移,以显示窗体出标题为宜;
●在页面上方四分之一处放置用户的logo、主要功能导航和一些系统操作功能;
2.2.2.4 页面美化
界面应该大小适合美学观点,感觉协调舒适,能在有效的范围内吸引用户的注意力。
建议和要求:
●长宽接近黄金点比例,切忌长宽比例失调、或宽度超过长度;
●布局要合理,不宜过于密集,也不能过于空旷,合理的利用空间;
●同一页面上的按钮大小应该一致,不同页面的按钮大小尽量相近,按钮上忌用太长
的名称;
●按钮的大小要与界面的大小和空间要协调;
●避免空旷的界面上放置很大的按钮;
●放置完控件后界面不应有很大的空缺位置;
●字体的大小要与界面的大小比例协调,通常使用的字体12px;
●前景与背景色搭配合理协调,反差不宜太大,主色要柔和,最好少用深色,如大红、
大绿等,可以借用Windows界面色调;
●大型系统常用的主色有"#E1E1E1"、"#EFEFEF"、"#C0C0C0"等;
●界面风格要保持一致,字的大小、颜色、字体要相同,需要艺术处理或有特殊要求
的地方建议使用图片表现;
●如果窗体支持最大化或放大时,窗体上的控件也要随着窗体而缩放;切忌只放大窗
体而忽略控件的缩放;
●系统对话框页面不应该支持缩放,即右上角只有关闭功能;
●通常父窗体支持缩放时,子窗体没有必要缩放;
●如果能给用户提供自定义界面风格,则由用户自己选择颜色、字体等;
2.3 页面字体
页面字体属性的设置在相应的CSS中进行定义,页面文字编码要求是UTF-8,在规定字体属性时,需要设置:中文采用“宋体”,英文采用“Arial”或“verdana”,CSS文件中的font-family里面必须保证有“宋体”。
对于页面属性中字体大小的设置,需要内容的不同级别来设置,通常:
?“Head”中标题文字,20px;
?“Menu”中的导航文字,14px;
?“Sidebar”中的文字,12px;
?“Content”中的正文,12px或14px,标题;
?“foot”中的文字,12px或10px;
有关页面字体属性的具体设置参见附录中的CSS示例。
2.4 边距
WEB页面和其中的表格都应该设定边距,避免页面元素紧贴边沿的情况发生,最小边距值为“3px”,默认边距值应在CSS中设定。
例如:
图 4
2.5 表格
对于表格,其属性的设置同样在CSS中进行定义。
表格使用最多的情况是显示装在的数据,由于有很多表项需要在页面中完整显示,因此原则上对于表格各个单元格宽度的设置应采用百分比方式来进行,这样表格不仅能够将数据完整地显示,而且还能够适应不同分辨率的情况。但由于表格中存在不定长的内容,所以为了保证表格的宽度不被挤变形,对于不定长的内容,可固定显示宽度,当超出此显示宽度后,以……显示,光标停留后,详细内容再在浮动层显示。
其他要求:
●表头中的数据应水平/垂直居中对齐。
●表单中内容如为定长,则为居中显示;如为不固定的中英文内容,则为居左显示;
如为数值形式,则为居右显示。
●表格的表头应采用不同于表格内容的背景颜色,并要求对比明显;
●表格表头的文字应采用加粗,或不同于表格内容的字体;
●表格中相邻行需要通过两种有一定对比差异的浅色作为背景色;
●各个页面的表格边框风格需要统一,建议设置细边框;
●表格中存在的链接文字需要采用不同于其他内容的颜色或字体显示;
●对于表格的嵌套尽量控制在三层以内,并且禁止使用表格来进行页面布局。
有关表格属性的具体设置请参见附录中的CSS示例。
2.6 段落排版
在WEB页面中,“content”部分是展示页面正文的区域,当段落是由纯文字构成时:
●正文一行字数最好不超过50,首页的标题文字以8-20字为佳。
●行距建议用百分比来定义,常用的两个行距的值是line-height:120%或150%;
●对于一段文字,尤其是正文部分,保证左右至少有15px的留白,便于用户换行时
不受到干扰。
●文字和背景对比要足够明显,保证最弱文字的可读性。
在使用
标签,需要对应有
,并且要求设置margin,使得段落文字的前后左右能够有合适的空白区。可在CSS中设置:p{ margin: 18px 6px 6px 18px;},分别定义了上、右、下、左的空白区大小。首行缩进时,禁止使用“ ”,而是在CSS中设置text-indent,例如:p { text-indent: 2em; }。
在一段完整的文字中请尽量不要使用
来人工干预分段;
对于margin,为了防止由于采用默认的margin值而导致的页面排版问题,推荐所有标签定义为:margin: 0;
当采用竖排文字时,推荐使用writing-mode。通过设置两个属性值:lr-tb和tb-rl,并结合direction完成文字竖排,lr-tb指的是文字方向为:左-右、上-下,tb-rl是指上-下、右-左。
2.7 Frame
Frame是能够将一个WEB页面切分成几个窗口来显示WEB内容的一种页面设计方法,切分后的每个窗口内容是通过指向URL来实现的。
Frame的标记是