web页面设计规范

《web页面设计规范》由会员上传分享，免费在线阅读，更多相关内容在学术论文-天天文库。

1、Web页面设计规范编号：版本号：受控状态：作者：分发号：第28页共28页文档修改历史记录文档修改记录日期版本号更改人更改内容文档审核记录日期版本号审核人审核意见第28页共28页第28页共28页目录1引言51.1目的51.2范围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

2、页面风格113.1风格分类113.2页面风格应用124WEB页面交互124.1页面元素焦点切换124.1.1信息填写124.1.2鼠标交互响应124.2页面信息交互144.2.1操作结果确认144.2.2其他规则144.3页面信息提示144.4键盘响应支持165WEB页面通用规范175.1一般页面功能175.1.1新增175.1.2修改175.1.3删除17第28页共28页5.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

3、.2必填值195.2.3界面传递195.2.4窗口嵌套195.2.5输入框操作195.2.6在线帮助功能195.2.7菜单功能要求205.2.8快捷键功能205.2.9快捷键的限制215.2.10页面的规范性215.2.11系统易用性225.2.12输入安全性要求225.2.13独特性要求235.2.14多窗口的应用与系统资源236页面编程技术使用规范246.1页面元素命名246.2DHTMLx控件256.3Flex控件267页面资源规格说明267.1图标267.2图片267.3多媒体278附录288.1基于DHX的CSS规格示例288.1.1表

4、格CSS示例288.2典型应用的页面示例28第28页共28页1引言1.1目的本文用于规范我公司所开发的商业软件中对于web页面的设计工作，明确在设计中所要遵循的准则和方法，web页面中各个元素的规格要求，确保所实现的web页面在风格、结构和功能上的统一，提升商业软件的外在品质。1.2范围本规范适用于公司所有的商业软件产品。1.3缩略术语DHMLX：web页面的UI控件1.4参考资料2WEB页面框架内容2.1页面框架WEB的页面框架是指构成完整页面的组织结构。通常是由以下三部分构成：Head，Main，Foot，有些时候出于布局的需要，在“Head

5、”下面还会加上用于页面功能导航的“Menu”。如图：图1第28页共28页1.1页面布局1.1.1布局原则对于WEB应用来说，页面布局是和web应用的功能区相对应的，并且对于页面中各个部分之间的切分比例也需要遵守一定的规则。页面布局的设计，首先需要考虑用户在浏览web页面时视觉流向上的要求：图2从视觉流向上看，用户首先看到的是页面“Head”部分的左面，通常那里是标识这个WEB应用的Logo；然后是陈列WEB应用主要功能的“Menu”来用于页面导航；接下来用户将看的是处于页面左侧的“sidebar”，通常这里也是用于页面功能导航的，和“Menu”出

6、的选择相呼应，这里的内容可以通过类似树状结构的方式展示更为详细的功能；接下来是处于页面中心位置的内容部分，最后用户的视线落在WEB页面的底部。1.1.2布局要求1.1.2.1页面分割以上面图示的布局方式为例，按照通常web页面设计时所遵循的方法，并结合黄金分割比例的方法：l首先，将页面按照3*3的方式进行分割，如下图：第28页共28页l在高度方向上，对上部1/3区域按照黄金分割的方法分出head和menu的区域；l在宽度方向上，对中部左边1/3区域按照黄金分割的方法分出sidebar的区域，剩下的空间留给content区域；l在高度方向上，对下部

7、1/3区域按照黄金分割的方法分出foot的区域；1.1.1.1页面结构页面的布局中，各个区域大小的定义方式是不同的，请见下图：图3在页面布局中，对各个功能区域的切分是按照“像素”和“比例”方式来进行的，以1024*768的分辨率做为基准，其中：lHead区域，宽度是按照比例方式设置的，宽度按照100%设置，高度采用所占的第28页共28页固定像素值来确定的，一般占？px，如果有menu区，则调整为？px；lMenu区域，和“head”的配置要求是一样的，宽度按照100%设置，高度结合“head”的高度设置来确定，一般占？px；lSidebar区域，

8、宽度是结合与“content”之间的黄金切分比例，按照固定像素的方式确定的，一般占？px；高度是按照比例方式来设置的；lContent区