Web页面设计规范.docx
- 文档编号:15139555
- 上传时间:2023-07-01
- 格式:DOCX
- 页数:36
- 大小:356.14KB
Web页面设计规范.docx
《Web页面设计规范.docx》由会员分享,可在线阅读,更多相关《Web页面设计规范.docx(36页珍藏版)》请在冰点文库上搜索。
Web页面设计规范
Web页面设计规范
编号:
版本号:
受控状态:
作者:
分发号:
文档修改历史记录
文档修改记录
日期
版本号
更改人
更改内容
文档审核记录
日期
版本号
审核人
审核意见
目录
1引言5
1.1目的5
1.2范围5
1.3缩略术语5
1.4参考资料5
2WEB页面框架内容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.7Frame10
2.8其他页面元素11
3页面风格11
3.1风格分类11
3.2页面风格应用12
4WEB页面交互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
5WEB页面通用规范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.2DHTMLx控件25
6.3Flex控件26
7页面资源规格说明26
7.1图标26
7.2图片26
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页面布局
3布局原则
对于WEB应用来说,页面布局是和web应用的功能区相对应的,并且对于页面中各个部分之间的切分比例也需要遵守一定的规则。
页面布局的设计,首先需要考虑用户在浏览web页面时视觉流向上的要求:
图2
从视觉流向上看,用户首先看到的是页面“Head”部分的左面,通常那里是标识这个WEB应用的Logo;然后是陈列WEB应用主要功能的“Menu”来用于页面导航;接下来用户将看的是处于页面左侧的“sidebar”,通常这里也是用于页面功能导航的,和“Menu”出的选择相呼应,这里的内容可以通过类似树状结构的方式展示更为详细的功能;接下来是处于页面中心位置的内容部分,最后用户的视线落在WEB页面的底部。
4布局要求
4.1.1.1页面分割
以上面图示的布局方式为例,按照通常web页面设计时所遵循的方法,并结合黄金分割比例的方法:
●首先,将页面按照3*3的方式进行分割,如下图:
●在高度方向上,对上部1/3区域按照黄金分割的方法分出head和menu的区域;
●在宽度方向上,对中部左边1/3区域按照黄金分割的方法分出sidebar的区域,剩下的空间留给content区域;
●在高度方向上,对下部1/3区域按照黄金分割的方法分出foot的区域;
4.1.1.2页面结构
页面的布局中,各个区域大小的定义方式是不同的,请见下图:
图3
在页面布局中,对各个功能区域的切分是按照“像素”和“比例”方式来进行的,以1024*768的分辨率做为基准,其中:
●Head区域,宽度是按照比例方式设置的,宽度按照100%设置,高度采用所占的固定像素值来确定的,一般占?
px,如果有menu区,则调整为?
px;
●Menu区域,和“head”的配置要求是一样的,宽度按照100%设置,高度结合“head”的高度设置来确定,一般占?
px;
●Sidebar区域,宽度是结合与“content”之间的黄金切分比例,按照固定像素的方式确定的,一般占?
px;高度是按照比例方式来设置的;
●Content区域,高度和宽度方向布局都是按照比例方式来设置的;
●Foot区域,宽度按照100%设置,高度采用所占的固定像素值来确定的,一般占?
px;
4.1.1.3页面展现
对于页面布局来说,除了上述要求外,还需要考虑如下要求:
●能自适应1024*768、800*600两种分辨率;
●界面层次不超过3层;
●默认窗口设置下,不应出现水平、垂直滚动条;
●当界面内容超出显示区域时,以浮动层的形式显示;
还有,对于用户的感官而言,屏幕对角线相交的位置是用户直视的地方,而页面正上方四分之一处为易吸引用户注意力的位置,所以在放置页面时要注意利用这两个位置。
要求:
●父页面或主页面的中心位置应该设计在对角线焦点附近;
●子页面的位置应该靠近主窗体的左上角或正中;
●需要多个子页面弹出时,应该依次向右下方偏移,以显示窗体出标题为宜;
●在页面上方四分之一处放置用户的logo、主要功能导航和一些系统操作功能;
4.1.1.4页面美化
界面应该大小适合美学观点,感觉协调舒适,能在有效的范围内吸引用户的注意力。
建议和要求:
●长宽接近黄金点比例,切忌长宽比例失调、或宽度超过长度;
●布局要合理,不宜过于密集,也不能过于空旷,合理的利用空间;
●同一页面上的按钮大小应该一致,不同页面的按钮大小尽量相近,按钮上忌用太长的名称;
●按钮的大小要与界面的大小和空间要协调;
●避免空旷的界面上放置很大的按钮;
●放置完控件后界面不应有很大的空缺位置;
●字体的大小要与界面的大小比例协调,通常使用的字体12px;
●前景与背景色搭配合理协调,反差不宜太大,主色要柔和,最好少用深色,如大红、大绿等,可以借用Windows界面色调;
●大型系统常用的主色有"#E1E1E1"、"#EFEFEF"、"#C0C0C0"等;
●界面风格要保持一致,字的大小、颜色、字体要相同,需要艺术处理或有特殊要求的地方建议使用图片表现;
●如果窗体支持最大化或放大时,窗体上的控件也要随着窗体而缩放;切忌只放大窗体而忽略控件的缩放;
●系统对话框页面不应该支持缩放,即右上角只有关闭功能;
●通常父窗体支持缩放时,子窗体没有必要缩放;
●如果能给用户提供自定义界面风格,则由用户自己选择颜色、字体等;
4.2页面字体
页面字体属性的设置在相应的CSS中进行定义,页面文字编码要求是UTF-8,在规定字体属性时,需要设置:
中文采用“宋体”,英文采用“Arial”或“verdana”,CSS文件中的font-family里面必须保证有“宋体”。
对于页面属性中字体大小的设置,需要内容的不同级别来设置,通常:
⏹“Head”中标题文字,20px;
⏹“Menu”中的导航文字,14px;
⏹“Sidebar”中的文字,12px;
⏹“Content”中的正文,12px或14px,标题;
⏹“foot”中的文字,12px或10px;
有关页面字体属性的具体设置参见附录中的CSS示例。
4.3边距
WEB页面和其中的表格都应该设定边距,避免页面元素紧贴边沿的情况发生,最小边距值为“3px”,默认边距值应在CSS中设定。
例如:
图4
4.4表格
对于表格,其属性的设置同样在CSS中进行定义。
表格使用最多的情况是显示装在的数据,由于有很多表项需要在页面中完整显示,因此原则上对于表格各个单元格宽度的设置应采用百分比方式来进行,这样表格不仅能够将数据完整地显示,而且还能够适应不同分辨率的情况。
但由于表格中存在不定长的内容,所以为了保证表格的宽度不被挤变形,对于不定长的内容,可固定显示宽度,当超出此显示宽度后,以……显示,光标停留后,详细内容再在浮动层显示。
其他要求:
●表头中的数据应水平/垂直居中对齐。
●表单中内容如为定长,则为居中显示;如为不固定的中英文内容,则为居左显示;如为数值形式,则为居右显示。
●表格的表头应采用不同于表格内容的背景颜色,并要求对比明显;
●表格表头的文字应采用加粗,或不同于表格内容的字体;
●表格中相邻行需要通过两种有一定对比差异的浅色作为背景色;
●各个页面的表格边框风格需要统一,建议设置细边框;
●表格中存在的链接文字需要采用不同于其他内容的颜色或字体显示;
●对于表格的嵌套尽量控制在三层以内,并且禁止使用表格来进行页面布局。
有关表格属性的具体设置请参见附录中的CSS示例。
4.5段落排版
在WEB页面中,“content”部分是展示页面正文的区域,当段落是由纯文字构成时:
●正文一行字数最好不超过50,首页的标题文字以8-20字为佳。
●行距建议用百分比来定义,常用的两个行距的值是line-height:
120%或150%;
●对于一段文字,尤其是正文部分,保证左右至少有15px的留白,便于用户换行时不受到干扰。
●文字和背景对比要足够明显,保证最弱文字的可读性。
在使用
标签,需要对应有
,并且要求设置margin,使得段落文字的前后左右能够有合适的空白区。可在CSS中设置:
p{margin:
18px6px6px18px;},分别定义了上、右、下、左的空白区大小。
首行缩进时,禁止使用“ ”,而是在CSS中设置text-indent,例如:
p{text-indent:
2em;}。
在一段完整的文字中请尽量不要使用
来人工干预分段;
对于margin,为了防止由于采用默认的margin值而导致的页面排版问题,推荐所有标签定义为:
margin:
0;
当采用竖排文字时,推荐使用writing-mode。
通过设置两个属性值:
lr-tb和tb-rl,并结合direction完成文字竖排,lr-tb指的是文字方向为:
左-右、上-下,tb-rl是指上-下、右-左。
4.6Frame
Frame是能够将一个WEB页面切分成几个窗口来显示WEB内容的一种页面设计方法,切分后的每个窗口内容是通过指向URL来实现的。
Frame的标记是
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Web 页面 设计规范