《Web页面设计规范方案》由会员分享，可在线阅读，更多相关《Web页面设计规范方案（31页珍藏版）》请在金锄头文库上搜索。
1、 Web页面设计规X编 号：版 本 号：受控状态：作 者：分 发 号：文档修改历史记录文档修改记录日 期版本号更改人更改内容文档审核记录日 期版本号审核人审核意见目 录1引言51.1目的51.2X围51.3缩略术语51.4参考资料52WEB页面框架内容52.1页面框架52.2页面布局62.2.1布局原那么62.2.2布局要求62.2.2.1页面分割62.2.2.2页面构造72.2.2.3页面展现82.2.2.4页面美化82.3页面字体92.4边距92.5表格92.6段落排版102.7Frame102.8其他页面元素113页面风格113.1风格分类113.2页面风格应用124WEB页面交互124
2、.1页面元素焦点切换124.1.1信息填写124.1.2鼠标交互响应124.2页面信息交互144.2.1操作结果确认144.2.2其他规那么144.3页面信息提示144.4键盘响应支持165WEB页面通用规X175.1一般页面功能175.1.1新增175.1.2修改175.1.3删除175.1.4查询175.1.5取消185.1.6保存185.1.7重置185.1.8返回185.1.9分页185.1.10全选185.2一般页面规那么185.2.1默认值185.2.2必填值195.2.3界面传递195.2.4窗口嵌套195.2.5输入框操作195.2.6在线帮助功能195.2.7菜单功能要求20
3、5.2.8快捷键功能205.2.9快捷键的限制215.2.10页面的规X性215.2.11系统易用性225.2.12输入平安性要求225.2.13独特性要求235.2.14多窗口的应用与系统资源236页面编程技术使用规X246.1页面元素命名246.2DHTMLx控件256.3Flex控件267页面资源规格说明267.1图标267.2图片267.3多媒体278附录288.1基于DHX的CSS规格例如288.1.1表格CSS例如288.2典型应用的页面例如28引言目的本文用于规X我公司所开发的商业软件中对于web页面的设计工作，明确在设计中所要遵循的准那么和方法，web页面中各个元素的规格要求，
4、确保所实现的web页面在风格、构造和功能上的统一，提升商业软件的外在品质。X围本规X适用于公司所有的商业软件产品。缩略术语DHMLX：web页面的UI控件参考资料WEB页面框架内容页面框架WEB的页面框架是指构成完整页面的组织构造。通常是由以下三局部构成：Head，Main，Foot，有些时候出于布局的需要，在“Head下面还会加上用于页面功能导航的“Menu。如图：图 1页面布局布局原那么对于WEB应用来说，页面布局是和web应用的功能区相对应的，并且对于页面中各个局部之间的切分比例也需要遵守一定的规那么。页面布局的设计，首先需要考虑用户在浏览web页面时视觉流向上的要求：图 2从视觉流向上
5、看，用户首先看到的是页面“Head局部的左面，通常那里是标识这个WEB应用的Logo；然后是陈列WEB应用主要功能的“Menu来用于页面导航；接下来用户将看的是处于页面左侧的“sidebar，通常这里也是用于页面功能导航的，和“Menu出的选择相照应，这里的内容可以通过类似树状构造的方式展示更为详细的功能；接下来是处于页面中心位置的内容局部，最后用户的视线落在WEB页面的底部。布局要求页面分割以上面图示的布局方式为例，按照通常web页面设计时所遵循的方法，并结合黄金分割比例的方法：首先，将页面按照3*3的方式进展分割，如以下图：在高度方向上，对上部1/3区域按照黄金分割的方法分出head和me
6、nu的区域；在宽度方向上，对中部左边1/3区域按照黄金分割的方法分出sidebar的区域，剩下的空间留给content区域；在高度方向上，对下部1/3区域按照黄金分割的方法分出foot的区域；页面构造页面的布局中，各个区域大小的定义方式是不同的，请见以下图：图 3在页面布局中，对各个功能区域的切分是按照“像素和“比例方式来进展的，以1024*768的分辨率做为基准，其中：Head区域，宽度是按照比例方式设置的，宽度按照100%设置，高度采用所占的固定像素值来确定的，一般占？px，如果有menu区，那么调整为？px；Menu区域，和“head的配置要求是一样的，宽度按照100%设置，高度结合“h
7、ead的高度设置来确定，一般占？px；Sidebar区域，宽度是结合与“content之间的黄金切分比例，按照固定像素的方式确定的，一般占？px；高度是按照比例方式来设置的；Content区域，高度和宽度方向布局都是按照比例方式来设置的；Foot区域，宽度按照100%设置，高度采用所占的固定像素值来确定的，一般占？px；页面展现对于页面布局来说，除了上述要求外，还需要考虑如下要求：能自适应1024*768、800*600两种分辨率；界面层次不超过3层；默认窗口设置下，不应出现水平、垂直滚动条；当界面内容超出显示区域时，以浮动层的形式显示；还有，对于用户的感官而言，屏幕对角线相交的位置是用户直视
8、的地方，而页面正上方四分之一处为易吸引用户注意力的位置，所以在放置页面时要注意利用这两个位置。要求：父页面或主页面的中心位置应该设计在对角线焦点附近；子页面的位置应该靠近主窗体的左上角或正中；需要多个子页面弹出时，应该依次向右下方偏移，以显示窗体出标题为宜；在页面上方四分之一处放置用户的logo、主要功能导航和一些系统操作功能；页面美化界面应该大小适合美学观点，感觉协调舒适，能在有效的X围内吸引用户的注意力。建议和要求：长宽接近黄金点比例，切忌长宽比例失调、或宽度超过长度；布局要合理，不宜过于密集，也不能过于空旷，合理的利用空间；同一页面上的按钮大小应该一致，不同页面的按钮大小尽量相近，按钮上
9、忌用太长的名称；按钮的大小要与界面的大小和空间要协调；防止空旷的界面上放置很大的按钮；放置完控件后界面不应有很大的空缺位置；字体的大小要与界面的大小比例协调， 通常使用的字体12px；前景与背风光搭配合理协调，反差不宜太大，主色要柔和，最好少用深色，如大红、大绿等，可以借用Windows界面色调；大型系统常用的主色有#E1E1E1、#EFEFEF、#C0C0C0等；界面风格要保持一致，字的大小、颜色、字体要一样，需要艺术处理或有特殊要求的地方建议使用图片表现；如果窗体支持最大化或放大时，窗体上的控件也要随着窗体而缩放；切忌只放大窗体而忽略控件的缩放；系统对话框页面不应该支持缩放，即右上角只有关
10、闭功能；通常父窗体支持缩放时，子窗体没有必要缩放；如果能给用户提供自定义界面风格，那么由用户自己选择颜色、字体等；页面字体页面字体属性的设置在相应的CSS中进展定义，页面文字编码要求是UTF-8，在规定字体属性时，需要设置：中文采用“宋体，英文采用“Arial或“verdana，CSS文件中的font-family里面必须保证有“宋体。对于页面属性中字体大小的设置，需要内容的不同级别来设置，通常：“Head中标题文字，20px；“Menu中的导航文字，14px；“Sidebar中的文字，12px；“Content中的正文，12px或14px，标题；“foot中的文字，12px或10px；有关页
11、面字体属性的具体设置参见附录中的CSS例如。边距WEB页面和其中的表格都应该设定边距，防止页面元素紧贴边沿的情况发生，最小边距值为“3px，默认边距值应在CSS中设定。例如：图 4表格对于表格，其属性的设置同样在CSS中进展定义。表格使用最多的情况是显示装在的数据，由于有很多表项需要在页面中完整显示，因此原那么上对于表格各个单元格宽度的设置应采用百分比方式来进展，这样表格不仅能够将数据完整地显示，而且还能够适应不同分辨率的情况。但由于表格中存在不定长的内容，所以为了保证表格的宽度不被挤变形，对于不定长的内容，可固定显示宽度，当超出此显示宽度后，以显示，光标停留后，详细内容再在浮动层显示。其他要
12、求：表头中的数据应水平/垂直居中对齐。表单中内容如为定长，那么为居中显示；如为不固定的中英文内容，那么为居左显示；如为数值形式，那么为居右显示。表格的表头应采用不同于表格内容的背景颜色，并要求比照明显；表格表头的文字应采用加粗，或不同于表格内容的字体；表格中相邻行需要通过两种有一定比照差异的浅色作为背风光；各个页面的表格边框风格需要统一，建议设置细边框；表格中存在的文字需要采用不同于其他内容的颜色或字体显示；对于表格的嵌套尽量控制在三层以内，并且制止使用表格来进展页面布局。有关表格属性的具体设置请参见附录中的CSS例如。段落排版在WEB页面中，“content局部是展示页面正文的区域，当段落是
13、由纯文字构成时：正文一行字数最好不超过50，首页的标题文字以8-20字为佳。行距建议用百分比来定义，常用的两个行距的值是line-height:120%或150%；对于一段文字，尤其是正文局部，保证左右至少有15px的留白，便于用户换行时不受到干扰。文字和背景比照要足够明显，保证最弱文字的可读性。在使用标签，需要对应有，并且要求设置margin，使得段落文字的前后左右能够有适宜的空白区。可在CSS中设置：p margin: 18px 6px 6px 18px;，分别定义了上、右、下、左的空白区大小。首行缩进时，制止使用“ ，而是在CSS中设置text-indent，例如：p text
14、-indent: 2em; 。在一段完整的文字中请尽量不要使用 来人工干预分段；对于margin，为了防止由于采用默认的margin值而导致的页面排版问题，推荐所有标签定义为：margin: 0; 当采用竖排文字时，推荐使用writing-mode。通过设置两个属性值：lr-tb和tb-rl，并结合direction完成文字竖排，lr-tb指的是文字方向为：左-右、上-下，tb-rl是指上-下、右-左。FrameFrame是能够将一个WEB页面切分成几个窗口来显示WEB内容的一种页面设计方法，切分后的每个窗口内容是通过指向URL来实现的。Frame的标记是 ，而在使用Frame时，通常需要将其放在网页入口的html文件中，而不必放入 标记。 是用以划分框窗的，每一框窗由一个 标记所标示，必须在FRAMES
