web页面设计规范--整理ok

《web页面设计规范--整理ok》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、Web页面设计规范第21页共21页目录1引言22WEB页面框架内容22.1页面框架22.2页面布局32.2.1布局原则32.2.2布局要求42.3如果能给用户提供自定义界面风格，则由用户自己选择颜色、字体等；62.4页面字体62.5边距62.6表格62.7段落排版72.8Frame72.9其他页面元素83页面风格83.1风格分类84WEB页面交互84.1页面元素焦点切换84.1.1信息填写84.1.2鼠标交互响应94.2页面信息交互104.2.1操作结果确认104.2.2其他规则104.3页面信息提示104.

2、4键盘响应支持125其他快捷键的支持，需要根据项目的实际情况来定义。136WEB页面通用规范136.1一般页面功能136.1.1新增136.1.2修改136.1.3删除136.1.4查询136.1.5取消136.1.6保存136.1.7重置146.1.8返回146.1.9分页146.1.10全选146.2一般页面规则146.2.1默认值14第21页共21页6.2.2单选按组钮默认值146.2.3表单元素选择146.2.4必填值146.2.5界面传递146.2.6窗口嵌套146.2.7输入框操作156.2.8在

3、线帮助功能156.2.9菜单功能要求156.2.10快捷键功能166.2.11快捷键的限制166.2.12页面的规范性166.2.13系统易用性176.2.14输入安全性要求176.2.15独特性要求186.2.16多窗口的应用与系统资源187尽量防止对系统的独占使用；188页面编程技术使用规范188.1页面元素命名189页面资源规格说明209.1图标209.2图片209.3多媒体21第21页共21页1引言本文用于规范我们所开发的商业软件中对于web页面的设计工作，明确在设计中所要遵循的准则和方法，web页面

4、中各个元素的规格要求，确保所实现的web页面在风格、结构和功能上的统一，提升商业软件的外在品质。2WEB页面框架内容2.1页面框架WEB的页面框架是指构成完整页面的组织结构。通常是由以下三部分构成：Head，Main，Foot，有些时候出于布局的需要，在“Head”下面还会加上用于页面功能导航的“Menu”。如图：2.2页面布局2.2.1布局原则对于WEB应用来说，页面布局是和web应用的功能区相对应的，并且对于页面中各个部分之间的切分比例也需要遵守一定的规则。页面布局的设计，首先需要考虑用户在浏览web页面

5、时视觉流向上的要求：第21页共21页图1从视觉流向上看，用户首先看到的是页面“Head”部分的左面，通常那里是标识这个WEB应用的Logo；然后是陈列WEB应用主要功能的“Menu”来用于页面导航；接下来用户将看的是处于页面左侧的“sidebar”，通常这里也是用于页面功能导航的，和“Menu”出的选择相呼应，这里的内容可以通过类似树状结构的方式展示更为详细的功能；接下来是处于页面中心位置的内容部分，最后用户的视线落在WEB页面的底部。1.1.1布局要求1.1.1.1页面分割以上面图示的布局方式为例，按照通常

6、web页面设计时所遵循的方法，并结合黄金分割比例的方法：l首先，将页面按照3*3的方式进行分割，如下图：第21页共21页l在高度方向上，对上部1/3区域按照黄金分割的方法分出head和menu的区域；l在宽度方向上，对中部左边1/3区域按照黄金分割的方法分出sidebar的区域，剩下的空间留给content区域；1.1.1.1在高度方向上，对下部1/3区域按照黄金分割的方法分出foot的区域；1.1.1.2页面结构页面的布局中，各个区域大小的定义方式是不同的，请见下图：图2在页面布局中，对各个功能区域的切分是

7、按照“像素”和“比例”方式来进行的，以1024*768的分辨率做为基准，其中：lHead区域，宽度是按照比例方式设置的，宽度按照100%设置，高度采用所占的固定像素值来确定的，一般占？px，如果有menu区，则调整为？px；lMenu区域，和“head”的配置要求是一样的，宽度按照100%设置，高度结合“head”的高度设置来确定，一般占？px；lSidebar区域，宽度是结合与“content”之间的黄金切分比例，按照固定像素的方式确定的，一般占？px；高度是按照比例方式来设置的；lContent区域，高度

8、和宽度方向布局都是按照比例方式来设置的；1.1.1.3Foot区域，宽度按照100%设置，高度采用所占的固定像素值来确定的，一般占？px；1.1.1.4页面展现对于页面布局来说，除了上述要求外，还需要考虑如下要求：l能自适应1024*768、800*600两种分辨率；l界面层次不超过3层；l默认窗口设置下，不应出现水平、垂直滚动条；当界面内容超出显示区域时，以浮动层的形式显示；第21页共21页还有，