【设计】Web页面设计要求规范.docx

Web页面设计规 X |精. |品. |可. |编. |辑. |学. |习. |资. |料. * | * | * | * | |欢. |迎. |下. |载. 编 号： 版 本 号： 受控状态： 作 者： 分 发 号： 1 / 32 文档修改历史记录文档修改记录 文档修改历史记录 文档修改记录 日 期 版本号 更换人 更换内容 文档审核记录 日 期 版本号 审核人 审核看法 |品. |可. |编. |辑. |学. |习. |资. |料. * | * | * *| * | |欢. |下. |下. |载. 目 录 1 引言 5 5 5 5 5 2WEB页面框架内容 5 |精. 5|品. 5 |可. |编. |辑. 6|学. 6 |习. |资. |料. *| 6 * * *| * | 7 * | |欢. |迎. 7 |下. |载. 7 8 9 10 10 10 11 12 12 3 页面风格 13 13 13 4WEB页面交互 13 14 14 14 16 16 16 16 19 5WEB页面通用规 X19 19 19 |精. |品. |可. 19 |编. |辑. |学. |习. 20 |资. |料. * | * 20 | * | * 20 | |欢. |迎. |下. 20 |载. 20 20 21 21 21 21 21 22 22 22 22 23 23 24 24 25 26 27 27 页面编程技术使用规 X27 27 30 30 页面资源规格说明 30 |精. |品. |可. |编. |辑. |学. |习. |资. |料. * | * | * | * | |欢. |迎. |下. |载. 30 31 31 附录 31 31 31 32 引言目的 本文用于规 X 我公司所开发的商业软件中对于 web页面的设计工作，明确在设计中所 要遵循的准如此和方法， web 页面中各个元素的规格要求，确保所实现的 web页面在风格、结构和功能上的统一，提升商业软件的外在品质； X 围 本规 X 适用于公司全部的商业软件产品；缩略术语 DHML：X web 页面的 UI 控件 参考资料 WEB页面框架内容页面框架 WEB的页面框架是指构成完整页面的组织结构；通常是由以下三局部构成： Head， Main，Foot ，有些时候出于布局的需要，在“ Head〞下面仍会加上用于页面功能导航的“ Menu〞；如图： |精. |品. |可. |编. |辑. |学. |习. |资. |料. * | * | * | * | |欢. |迎. |下. |载.  图 1 页面布局 布局原如此 对于 WEB应用来说，页面布局是和 web 应用的功能区相对应的，并且对于页面中各个局部之间的切分比例也需要遵守肯定的规如此； 页面布局的设计，第一需要考虑用户在浏览 web 页面时视觉流向上的要求： 图 2 从视觉流向上看，用户第一看到的是页面“ Head〞局部的左面，通常那里是标识这个WEB应用的 Logo；然后是陈设 WEB应用主要功能的“ Menu〞来用于页面导航；接下来用户将看的是处于页面左侧的“ sidebar 〞，通常这里也是用于页面功能导航的，和“Menu〞出的挑选相呼应，这里的内容可以通过类似树状结构的方式呈现更为具体的 功能；接下来是处于页面中心位置的内容局部，最终用户的视线落在 WEB页面的底部； 布局要求页面分割 |精. |品. |可. |编. |辑. |学. |习. |资. |料. * | * | * | * | |欢. |迎. |下. |载. 以上面图示的布局方式为例，依据通常 web 页面设计时所遵循的方法，并结合黄金分割比例的方法： 第一，将页面依据 3*3 的方式进展分割，如如下图： 在高度方向上，对上部 1/3 区域依据黄金分割的方法分出 head 和 menu的区域； 在宽度方向上，对中部左边 1/3 区域依据黄金分割的方法分出 sidebar 的区域，剩下的空间留给 content 区域； 在高度方向上，对下部 1/3 区域依据黄金分割的方法分出 foot 的区域； 页面结构 页面的布局中，各个区域大小的定义方式是不同的，请见如下图： |精. |品. |可. |编. |辑. |学. |习. |资. |料. * | * | * | * | |欢. |迎. |下. |载. 图 3 在页面布局中，对各个功能区域的切分是依据“像素〞和“比例〞方式来进展的，以 1024*768 的辨论率做为基准，其中： Head 区域，宽度是依据比例方式设置的，宽度依据 100%设置，高度采纳所占的固定像素值来确定的，一般占？ px，假如有 menu区，如此调整为？ px； Menu区域，和“ head〞的配置要求是一样的，宽度依据 100%设置，高度结