web页面设计规范

web页面设计规范内容摘要：

图： 图 3 在页面布局中，对各个功能区域的切分 是按照“像素” 和“比例”方式来 进行的， 以1024*768 的分辨率做为基准， 其中 ：  Head 区域，宽度是按照比例方式设置的， 宽度按照 100%设置，高度 采用 所占的 固 第 8 页 共 28 页 定 像素 值来确定的，一般占。 px，如果有 menu 区，则调整为。 px；  Menu 区域，和“ head”的配置要求是一样的，宽度按照 100%设置，高度 结合“ head”的 高度设置 来确定，一般 占。 px；  Sidebar 区域，宽度是结合与“ content”之间的黄金切分比例，按照固定像素的方式确定的，一般占。 px；高度是按照比例方式来设置的；  Content 区域，高度和宽度方向 布局 都是按照比例方式来设置的 ；  Foot 区域， 宽度按照 100%设置，高度采用所占的固定像素值来确定的，一般占。 px； 页面展现 对于页面布局来说，除了上述要求外，还需要 考虑如下要求 ：  能自适应 1024*76 800*600 两种分辨率；  界面层次不超过 3 层；  默认窗口设置下，不应出现水平、垂直滚动条；  当界面内容超出显示区域时，以浮动层的形式显示； 还有，对于用户的感官而言， 屏幕对角线相交的位置是用户直视的地方， 而页面 正上方四分之一处为易吸引用户注意力的位置， 所以 在放置 页面 时要注意利用这两个位置。 要求 ：  父 页面 或主 页面 的中心位置应该 设计 在对角线焦点附近 ；  子 页面的 位置应该 靠近 主窗体的左上角或正中 ；  需要 多个子 页面 弹出时 ， 应该依次向右下方偏移，以显示窗体出标题为宜 ；  在页面上方四分之一处放置用户的 logo、主要功能导航和一些系统操作功能； 页面 美化 界面应该大小适合美学观点，感觉协调舒适，能在有效的范围内吸引用户的注意力。 建议和要求 ：  长宽接近黄金点比例，切忌长宽比例失调、或宽度超过长度 ；  布局要合理 ， 不宜过于密集，也不能过于空旷，合理的利用空间 ；  同一页面上的 按钮大小 应该一致 ， 不同页面的按钮大小尽量 相近，按钮上忌用太长的名称；  按钮的大小要与界面的大小和空间要协调 ；  避免空旷的界面上放置很大的按钮 ；  放置完控件后界面不应有很大的空缺位置 ；  字体的大小要与界面的大小比例协调 ， 通常使用的字体 12px；  前景与背景色搭配合理协调，反差不宜太大， 主色要柔和， 最好少用深色，如大红、大绿等 ，可以借用 Windows界面色调 ；  大型系统常用的主色有 E1E1E EFEFEF、 C0C0C0等 ；  界面风格要保持一致，字的大小、颜色、字体要相同 ， 需要艺术处理或有特殊要求的地方 建议使用图片表现；  如果窗体 支持最大化或放大时，窗体上的控件也要随着窗体而缩放；切忌只放大窗体而忽略控件的缩放 ；  系统对话框页面 不应该支持缩放，即右上角只有关闭功能 ； 第 9 页 共 28 页  通常父窗体支持缩放时，子窗体没有必要缩放；  如果能给用户提供自定义界面风格， 则 由用户自己选择颜色、字体等 ； 页面字体 页面字体属性的设置在相应的 CSS 中进行定义， 页面文字编码 要求 是 UTF8，在规定字体 属性时 ， 需要设置： 中文采用“ 宋体 ”，英文采用 “ Arial”或“ verdana” ， CSS 文件中的 fontfamily 里面必须保证有“宋体”。 对于页面属性中 字体大小 的设 置，需要 内容的 不同 级别来设置 ，通常 ：  “ Head”中标题文字 ， 20px；  “ Menu”中的导航文字， 14px；  “ Sidebar”中的 文字， 12px；  “ Content”中的 正文， 12px或 14px，标题 ；  “ foot”中的文字， 12px或 10px； 有关 页面字体属性的 具体 设置参见附录中的 CSS 示例。 边距 WEB 页面和其中的表格都应该设定边距，避免页面元素紧贴边沿的情况发生，最小边距值为“ 3px”，默认边距值应在 CSS 中设定。 例如： 图 4 表格 对于表 格，其属性的设置同样在 CSS 中进行定义。 表格使用最多的情况是显示装在的数据，由于有很多表项需要在页面中完整显 示，因此原则上 对于表格各个单元格宽度的设置 应 采用百分比方式来进行，这样 表格 不仅能够将数据完整地显示，而且还 能够适应不同分辨率 的 情况。 但由于表格中存在不定长的内容，所以为了 保证表格的宽度不被挤变形，对于不定长的内容，可固定显示宽度，当超出此显示宽度后，以„„显示，光标停留后，详细内容再在浮动层显示。 其他要求： 第 10 页 共 28 页  表头 中的数据应 水平 /垂直居中对齐。  表单中内容如为定长，则为居中显示；如为不固定的中英文内 容，则为居左显示；如为数值形式，则为居 右 显示。  表格的表头应采用不同于表格内容的背景颜色，并要求对比明显；  表格表头的文字应采用加粗，或不同于表格内容的字体；  表格中相邻行需要通过两种有一定对比差异的浅色作为背景色；  各个页面的表格边框风格需要统一，建议设置细边框；  表格中存在的链接文字需要采用不同于其他内容的颜色或字体显示；  对于表格的嵌套尽量控制在三层以内，并且禁止使用表格来进行页面布局。 有关表格属性的具体设置请参见附录中的 CSS 示例。 段落 排版 在 WEB 页面中，“ content”部分是 展示页面正 文的区域， 当段落是由纯文字构成时：  正文一行字数最好不超过 50，首页的标题文字以 820 字为佳。  行距建议用百分比来定义，常用的两个行距的值是 lineheight:120%或 150%；  对于一段文字，尤其是正文部分，保证左右至少有 15px的留白，便于用户换行时不受到干扰。  文字和背景对比要足够明显，保证最弱文字的可读性。 在使用 p标签， 需要对应有 /p，并且要求设置 margin，使得段落文字的前后左右能够有合适的空白区。 可 在 CSS 中设置 ： p{ margin: 18px 6px 6px 18px。 }， 分别 定义了上、右、下、左的空白区大小。 首行缩进时，禁止使用“ ”，而是在 CSS中设置 textindent，例如： p { textindent: 2em。 }。 在一段完整的文字中请尽量不要使用 br 来人工干预分段 ； 对于 margin， 为了防止由于采用默认的 margin 值 而 导致 的 页面排版问题，推荐所 有标签定义 为： margin: 0。 当采用 竖排文字 时，推荐使用 writingmode。 通过设置 两个 属性 值 ： lrtb 和 tbrl，并结合 direction 完成文字竖排 ， lrtb 指的是文字 方向为： 左 右、上 下， tbrl是 指 上 下、右 左。 Frame Frame 是能够将一个 WEB页面切分成几个窗口来显示 WEB 内容的 一种页面设计方法 ，切分后的 每个窗口内容是通过指向 URL 来实现的。 Frame 的标记是 FRAMESET FRAME ，而 在使用 Frame 时，通常需要将其 放在 网页入口的 html文件中，而 不必放入 BODY 标记。 FRAMESET 是用以划分框窗 的 ，每一框窗由一个 FRAME 标记所标示， FRAME必须在 FRAMESET范围中使用。 其中：  FRAMESET 称框架标记，用以宣告 HTML 文件为框架模式，并设定视窗如何分割。 第 11 页 共 28 页  FRAME 则只是设定某一个框窗内的参数属性。 使用 Frame分割页面， 需要按照 节“页面布局”中所描述的要求来设置 FRAMESET 和 FRAME，以完成对页面各个部分合理的切分。 对于 FRAMESET 和 FRAME中的一些属性设置，要求有：  Name， 表示 Frame 的名字，必须 有 定义；  Framespacing， 表示 各个 Frame 之间空白距离， 要求 设置为非零，通常设置为 5；  Noresize， 表示 是否 允许使用者通过拖拉改变 Frame的大小， 要求在 Frame设置此参数 ；  Scrolling， 表示 是否要显示卷轴， 要求 设置为“ AUTO”  Marginhight，表示框架高度部分边缘所保留的空间，要求设置。  Marginwidth，表示框架宽度部分边缘所保留的空间，要求设置。 其他页面元素  按钮，要求按钮上显示的文字能够准确表达功能含义；  单选框， 默认选择一个 ，和所关联的文字的间距应该在 3px；  多选框，默认全 不选 ，所关联的文字应该能够准确表达选择的含义，和控件的间距应该在 3px；  下拉框， 给出 默认 选择， 并且默认选择显示出“默认全部” 或“请选择”等 文字 提示 ；  图片，默认为显示出代表图片 文件 的图标，或是缩略图；  多媒体，默认为显示出代表多媒体文件的图标； 有关这些页面元素的具体属性设置请参见附录中的 CSS 示例。 3 页面风格 WEB 页面的风格是指 WEB 页面通过对页面布局、字体、配色、页面元素排列的融合来传达给用户的、含有主观感受。 页面风格的选取除了需要考虑一般的用户感受外，还需要将用户所在环境的因素考虑进去，从而形成符合特定用户要求的页面风格。 风格分类 Web 应用的页面 风格内容包括：  布局 ，不仅仅是系统入 口主页的布局，而是所有页面；  颜色 ，按照风格主题来设置页面中包含的颜色及其表现；  页面元素 ，按照风格主题来确定页面元素的大小、形状和交互响应行为；  图标 ，按照风格主题来定制表示各类功能的图标； 第 12 页 共 28 页  提示窗口 ，是页面交互的主要形式，需要按照风格主题来定制； 具体风格分类的定义，待定。 页面 风格应用 具体风格应用的定义，待定。 4 WEB 页面 交互 页面元素焦点切换 在 WEB 页面中， 为了提高和用户之间的互动，需要在 各类页面元素 获得焦点和失去焦点 的时候， 在如下场景中 采用 页面交互 的方法有 ： 信息 填写 对输入信息验证 ： 如果需要校验填写内容 ，则需要在 输入 框失去焦点时进行数据有效性的判断，并 在输入框后给出提示。 如 图： 对输入信息 提示 ： 在一组 需要被验证的 数据填写时，如果有必填项，需要在输入框后面给出标志， 并对填入的规则加以说明。 如 图 ： 如果输入框内有默认的文字，当输入框获得焦点时，需要将输入框内的文字处于全选状态。 如图： 鼠标 交互 响应 对鼠标在页面中所产生的事件进行处理 ，当页面元素获得焦点 、被点击、失去焦点 时， 第 13 页 共 28 页 则需要控件本身在颜色、大小或形状上的变化给与响应 ， 亦 可以添加声音响应。 下面是各种情况下的鼠标交 互示例： 例如： 按钮 ：按钮颜色改变、或 形状，或字体改变 ，如图： 鼠标 放上获得焦点 前： 鼠标放上获得焦点 后： 链接 ：字体变粗、或字体变色 、或背景变色 ，如图： 鼠标放上获得焦点前： 鼠标放上获得焦点后： 页签 ： 获得焦点的 页签颜色变化，或页签的大小和里面的字体变大 ，如图： 鼠标放上获得焦点前： 鼠标放上获得焦点后： 输入框 ，输入框的边框变色； 鼠标放上获得焦点前： 鼠标放上获得焦点后： 表格 ，表格中行的底色改变； 鼠标放上获得焦点前： 鼠标放上获得焦点后： 等待 响应 ： 当由于载入大量数据等原因，使得用户需要等待一定时。