2022年Web页面设计规范.docx

《2022年Web页面设计规范.docx》由会员分享，可在线阅读，更多相关《2022年Web页面设计规范.docx（44页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、名师归纳总结 精品学习资料 - - - - - - - - - - - - - - -Web页面设计规范编 号：版 本 号：受控状态：作 者：分 发 号：细心整理归纳 精选学习资料 - - - - - - - - - - - - - - - 第 1 页,共 28 页 - - - - - - - - - 名师归纳总结 精品学习资料 - - - - - - - - - - - - - - -文档修改历史记录文档修改记录日 期版本号更换人更换内容文档审核记录细心整理归纳 精选学习资料 日 期版本号审核人审核看法 第 2 页,共 28 页 - - - - - - - - - - - - - - - -

2、 - - - - - - - - 名师归纳总结 精品学习资料 - - - - - - - - - - - - - - -目 录1 引言 . 51.1 目的 . 51.2 范畴 . 51.3 缩略术语 . 51.4 参考资料 . 52 WEB 页面框架内容 . 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.7 FRAM

3、E. 102.8 其他页面元素 . 113 页面风格 . 113.1 风格分类 . 113.2 页面风格应用 . 124 WEB 页面交互 . 124.1 页面元素焦点切换 . 124.1.1 信息填写 . 124.1.2 鼠标交互响应 . 124.2 页面信息交互 . 144.2.1 操作结果确认 . 144.2.2 其他规章 . 144.3 页面信息提示 . 144.4 键盘响应支持 . 165 WEB 页面通用规范 . 175.1 一般页面功能 . 175.1.1 新增 . 175.1.2 修改 . 175.1.3 删除 . 17第 3 页 共 28 页细心整理归纳 精选学习资料 - -

4、 - - - - - - - - - - - - - 第 3 页,共 28 页 - - - - - - - - - 名师归纳总结 精品学习资料 - - - - - - - - - - - - - - -5.1.4查询 . 1765.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在线帮忙功能 . 205.2.7菜单功能要求 . 2

5、05.2.8快捷键功能. 215.2.9快捷键的限制 . 215.2.10页面的规范性 . 215.2.11系统易用性. 225.2.12输入安全性要求 . 235.2.13特殊性要求. 235.2.14多窗口的应用与系统资源 . 24页面编程技术使用规范. 2476.1页面元素命名 . 246.2DHTMLX 控件 . 266.3FLEX控件 . 26页面资源规格说明. 2687.1图标 . 267.2图片 . 277.3多媒体 . 27附录 . 288.1基于 DHX 的 CSS 规格示例 . 288.1.1表格 CSS 示例 . 288.2典型应用的页面示例 . 28第 4 页 共 28

6、 页细心整理归纳 精选学习资料 - - - - - - - - - - - - - - - 第 4 页,共 28 页 - - - - - - - - - 名师归纳总结 精品学习资料 - - - - - - - - - - - - - - -1 引言1.1 目的本文用于规范我公司所开发的商业软件中对于web 页面的设计工作,明确在设计中所要遵循的准就和方法,web 页面中各个元素的规格要求,确保所实现的web 页面在风格、结构和功能上的统一,提升商业软件的外在品质；1.2 范畴本规范适用于公司全部的商业软件产品；1.3 缩略术语DHMLX ：web 页面的 UI 控件1.4 参考资料2 WEB

7、页面框架内容2.1 页面框架WEB 的页面框架是指构成完整页面的组织结构；通常是由以下三部分构成：Head,Main ,Foot,有些时候出于布局的需要,在“Head” 下面仍会加上用于页面功能导航的“Menu” ；如图：图 1 第 5 页 共 28 页细心整理归纳 精选学习资料 - - - - - - - - - - - - - - - 第 5 页,共 28 页 - - - - - - - - - 名师归纳总结 精品学习资料 - - - - - - - - - - - - - - -2.2 页面布局2.2.1 布局原就对于 WEB 应用来说, 页面布局是和web 应用的功能区相对应的,并且对

8、于页面中各个部分之间的切分比例也需要遵守肯定的规章；页面布局的设计,第一需要考虑用户在浏览web 页面时视觉流向上的要求：图 2 从视觉流向上看,用户第一看到的是页面“Head” 部分的左面,通常那里是标识这个WEB 应用的 Logo；然后是陈设 WEB 应用主要功能的“Menu ” 来用于页面导航；接下来用户将看的是处于页面左侧的“sidebar” ,通常这里也是用于页面功能导航的,和“Menu” 出的挑选相呼应, 这里的内容可以通过类似树状结构的方式呈现更为具体的功能；接下来是处于页面中心位置的内容部分,最终用户的视线落在 WEB 页面的底部；2.2.2 布局要求2.2.2.1 页面分割以

9、上面图示的布局方式为例,依据通常 割比例的方法：web 页面设计时所遵循的方法,并结合黄金分第一,将页面依据 3*3 的方式进行分割,如下图：第 6 页 共 28 页细心整理归纳 精选学习资料 - - - - - - - - - - - - - - - 第 6 页,共 28 页 - - - - - - - - - 名师归纳总结 精品学习资料 - - - - - - - - - - - - - - -在高度方向上,对上部1/3 区域依据黄金分割的方法分出head 和 menu 的区域；在宽度方向上,对中部左边 1/3 区域依据黄金分割的方法分出 sidebar 的区域,剩下的空间留给 conte

10、nt 区域；在高度方向上,对下部 1/3 区域依据黄金分割的方法分出 foot 的区域；2.2.2.2 页面结构页面的布局中,各个区域大小的定义方式是不同的,请见下图：图 3 在页面布局中,对各个功能区域的切分是依据“ 像素” 和“ 比例” 方式来进行的,以1024*768 的辨论率做为基准,其中：Head 区域, 宽度是依据比例方式设置的,宽度依据 100%设置, 高度采纳所占的固 第 7 页 共 28 页细心整理归纳 精选学习资料 - - - - - - - - - - - - - - - 第 7 页,共 28 页 - - - - - - - - - 名师归纳总结 精品学习资料 - - -

11、 - - - - - - - - - - - -定像素值来确定的,一般占？px,假如有 menu 区,就调整为？px；Menu 区域,和“ head” 的配置要求是一样的,宽度依据100%设置,高度结合“ head”的高度设置来确定,一般占？px；Sidebar 区域,宽度是结合与“content” 之间的黄金切分比例,依据固定像素的方式确定的,一般占？px；高度是依据比例方式来设置的；Content 区域,高度和宽度方向布局都是依据比例方式来设置的；Foot 区域,宽度依据 px；2.2.2.3 页面呈现100%设置,高度采纳所占的固定像素值来确定的,一般占？对于页面布局来说,除了上述要求外

12、,仍需要考虑如下要求：能自适应 1024*768、 800*600 两种辨论率；界面层次不超过 3 层；默认窗口设置下,不应显现水平、垂直滚动条；当界面内容超出显示区域时,以浮动层的形式显示；仍有, 对于用户的感官而言,屏幕对角线相交的位置是用户直视的地方,而页面正上方四分之一处为易吸引用户留意力的位置,所以在放置页面时要留意利用这两个位置；要求：父页面或主页面的中心位置应当设计在对角线焦点邻近；子页面的位置应当靠近主窗体的左上角或正中；需要多个子页面弹出时,应当依次向右下方偏移,以显示窗体出标题为宜；在页面上方四分之一处放置用户的2.2.2.4 页面美化logo 、主要功能导航和一些系统操作

13、功能；界面应当大小适合美学观点,感觉和谐舒服,能在有效的范畴内吸引用户的留意力；建议和要求：长宽接近黄金点比例,切忌长宽比例失调、或宽度超过长度；布局要合理,不宜过于密集,也不能过于空旷,合理的利用空间；同一页面上的按钮大小应当一样,不同页面的按钮大小尽量相近,按钮上忌用太长的名称；按钮的大小要与界面的大小和空间要和谐；防止空旷的界面上放置很大的按钮；放置完控件后界面不应有很大的空缺位置；字体的大小要与界面的大小比例和谐,通常使用的字体 12px；前景与背景色搭协作理和谐,反差不宜太大, 主色要柔和, 最好少用深色, 如大红、大绿等,可以借用 Windows界面色调；大型系统常用的主色有 界面

14、风格要保持一样,#E1E1E1 、#EFEFEF、#C0C0C0等；字的大小、 颜色、 字体要相同, 需要艺术处理或有特殊要求的地方建议使用图片表现；假如窗体支持最大化或放大时,窗体上的控件也要随着窗体而缩放；切忌只放大窗体而忽视控件的缩放；系统对话框页面不应当支持缩放,即右上角只有关闭功能；第 8 页 共 28 页细心整理归纳 精选学习资料 - - - - - - - - - - - - - - - 第 8 页,共 28 页 - - - - - - - - - 名师归纳总结 精品学习资料 - - - - - - - - - - - - - - -通常父窗体支持缩放时,子窗体没有必要缩放；假如

15、能给用户供应自定义界面风格,就由用户自己挑选颜色、字体等；2.3 页面字体页面字体属性的设置在相应的 CSS 中进行定义,页面文字编码要求是 UTF-8 ,在规定字体属性时,需要设置：中文采纳“ 宋体”,英文采纳“Arial ” 或“verdana” , CSS 文件中的 font-family 里面必需保证有“ 宋体”；对于页面属性中字体大小的设置,需要内容的不同级别来设置,通常：“ Head” 中标题文字,20px；“ Menu” 中的导航文字,14px；“ Sidebar” 中的文字, 12px；“ Content” 中的正文, 12px 或 14px,标题；“ foot” 中的文字,

16、12px 或 10px；有关页面字体属性的具体设置参见附录中的 CSS 示例；2.4 边距WEB 页面和其中的表格都应当设定边距,防止页面元素紧贴边沿的情形发生,最小边距值为“3px” ,默认边距值应在CSS 中设定；例如：图 4 2.5 表格对于表格,其属性的设置同样在 CSS中进行定义；表格使用最多的情形是显示装在的数据,由于有许多表项需要在页面中完整显示,因此原就上对于表格各个单元格宽度的设置应采纳百分比方式来进行,这样表格不仅能够将数据完整地显示, 而且仍能够适应不同辨论率的情形；但由于表格中存在不定长的内容,所以为了保证表格的宽度不被挤变形,对于不定长的内容, 可固定显示宽度, 当超出此显示宽度后,以 显示,光标停留后,具体内容再在浮动层显示；其他要求：第 9 页 共 28 页细心整理归纳 精选学习资料 - - - - - - - - - - - - - - - 第 9 页,共 28 页 - - - - - - - - - 名师归纳总结 精品学习资料 - - - - - - - - -