web端设计规范

web 端设计规范篇一：WEB UI 设计规范内蒙古万德系统集成有限公司 WEB UI 设计(流程/界面)规范 目录 一：UI 设计基本概念与流程 . - 3 - 目的 . - 3 - 范围 .- 3 - 概述 . - 3 - 二：UI 界面用户体验设计原则与规范 . - 4 - 1：应该遵循的基本原则 .- 4 - 2：页面外观规范 . - 4 - 宽带页面 . - 5 - 自适应 . - 5 - 其他页面 . - 5 - 基本结构 . - 6 - 页面版式： . - 6 - 版块基本元素：所谓基本元素就是将其中任意几块元素拼接起来形成所需网页版块。 . - 6 - 版块组合形式 . - 7 - 3：色彩规范 . - 8 - 4：字体规范 . - 10 - 文字格式 .- 10 - 标题类 . - 12 - 功能类 . - 15 - 注释类 . - 16 - 正文类 . - 16 - 5：图片规范 . - 16 -主要图片 . - 16 - 图片规格 . - 17 - 6：表单规范： . - 17 - 按纽 . - 17 - 输入框 . - 17 - 文本框 . - 18 - 复选框 . - 18 - 菜单 . - 18 - 一：UI 设计基本概念与流程 目的 规范公司 UI 设计流程，使 UI 设计师参与到产品设计整个环节中来，对产品的易用性进行全流程负责，使 UI 设计的流程规范化，保证 UI 设计流程的可操作性。 范围 本文档用于界面设计,本文档的读者对象是项目管理人员、售前服务人员、UI 界面设计人员、界面评审人员和配置测试人员。 概述 UI 设计包括交互设计，用户研究，与界面设计三个部分。基于这三部分的 UI 设计流程是从一个产品立项开始，UI 设计师就应根据流程规范，参与需求阶段、分析设计阶段、调研验证阶段、方案改进阶段、用户验证反馈阶段等环节，履行相应的岗位职责。UI 设计师应全面负责产品以用户体验为中心的 UI 设计，并根据客户（市场）要求不断提升产品可用性。本规范明确规定了 UI 设计在各个环节的职责和要求，以保证每个环节的工作质量。 二：UI 界面用户体验设计原则与规范1：应该遵循的基本原则 无论是控件使用，提示信息措辞，还是颜色、窗口布局风格，遵循统一的标准，做到真正的一致。 2：页面外观规范 普通页面 宽带页面 自适应页面 其他页面 普通页面宽带页面自适应页面 其他页面 普通页面 基本属性：宽度 750px 背景 白色#FFFFFF 位置 居中 边距 上 5px；下 20px；左 0 px；右 0 px 适用范围：系统首页 正文页面等及其他非宽带产品线 宽带页面 基本属性：宽度 900px 背景 白色#FFFFFF 位置 居中 边距 上 5px；下 20px；左 0 px；右 0 px 适用范围：宽带频道首页和各级页面 不包括正文页，及其他宽带产品线 自适应 基本属性：宽度 100 % 背景 白色#FFFFFF 位置 居中 边距 上 5px；下 20px；左 0 px；右 0 px 适用范围：论坛 聊天 等页面 其他页面 基本属性：宽度 500px 背景 白色#FFFFFF 位置 居中 边距 上 5px；下 20px；左 0 px；右 0 px 适用范围：提示报错页面 篇二：Web 页面设计规范Web 页面设计规范 1、800*600 下，网页宽度保持在以内，就不会出现水平滚动条，高度则视版面和内容决定。2、1024*768 下，网页宽度保持在 1002 以内，如果满框显示的话，高度是 612-615 之间。就不会出现水平滚动条和垂直滚动条。 3、在 ps 里面做网页可以在 800*600 状态下显示全屏，页面的下方又不会出现滑动条，尺寸为 740*560 左右 4、在 PS 里做的图到了网上就不一样了，颜色等等方面，因为上面只用到安全色，而中的或者以及或者的色域很宽颜色范围很广，所以自然会有失色的现象。 页面标准按 800*600 分辨率制作，实际尺寸为*434px 页面长度原则上不超过 3 屏，宽度不超过 1 屏 每个标准页面为 A4 幅面大小，即英寸 全尺寸 banner 为 468*60px，半尺寸 banner 为234*60px，小 banner 为 88*31px 另外 120*90，120*60 也是小图标的标准尺寸 每个非首页静态页面含图片字节不超过 60K，全尺寸banner 不超过 14K 标准网页广告尺寸规格一、120*120，这种广告规格适用于产品或新闻照片展示。 二、120*60，这种广告规格主要用于做 LOGO 使用。 三、120*90，主要应用于产品演示或大型 LOGO。 四、125*125，这种规格适于表现照片效果的图像广告。五、234*60，这种规格适用于框架或左右形式主页的广告链接。 六、392*72，主要用于有较多图片展示的广告条，用于页眉或页脚。 七、468*60，应用最为广泛的广告条尺寸，用于页眉或页脚。 八、88*31，主要用于网页链接，或网站小型 LOGO。 广告形式 像素大小 最大尺寸 备注 BUTTON 120*60（必须用 gif） 7K 215*50（必须用 gif） 7K 通栏 760*100 25K 静态图片或减少运动效果 430*50 15K 超级通栏 760*100 to 760*200 共 40K 静态图片或减少运动效果 巨幅广告 336*280 35K 585*120 竖边广告 130*300 25K 全屏广告 800*600 40K 必须为静态图片，FLASH 格式 图文混排 各频道不同 15K 弹出窗口 400*300（尽量用 gif） 40K BANNER 468*60（尽量用 gif） 18K 悬停按钮 80*80（必须用 gif） 7K 流媒体 300*200（可做不规则形状但尺寸不能超过300*200） 30K 播放时间 小于 5 秒 60 帧（1 秒/12 帧）网页中的广告尺寸 1.首页右上，尺寸 120*60 2.首页顶部通栏，尺寸468*60 3.首页顶部通栏，尺寸 760*60 4.首页中部通栏，尺寸 580*60 5.内页顶部通栏，尺寸 468*60 6.内页顶部通栏，尺寸 760*60 7.内页左上，尺寸 150*60 或 300*300 8.下载地址页面，尺寸 560*60 或 468*60 9.内页底部通栏，尺寸 760*60 10.左漂浮，尺寸80*80 或 100*100 11.右漂浮，尺寸 80*80 或 100*100 以上几种说法可能有点小的出入，大家可以探讨一下。 IAB 和 EIAA 发布新的网络广告尺寸标准 在这 6 种格式中，除了去年 iab 发布的 4 种“通用广告包”中的格式：160x600， 300x250， 180x150 及728x90，还包括新公布的 468x60 和 120x600（擎天柱）2种。 篇三：Web 页面设计规范Web 页面设计规范 目 录 1 引言 .4 目的 .4 范围 .4 缩略术语 .4 参考资料 .4 2 WEB 页面框架内容 . 4 页面框架 .4 页面布局 .5 布局原则 .5 布局要求 .5 页面分割 .5 页面结构 .6 页面展现 .7 页面美化 .7 页面字体 .8 边距 .8 表格 .8 段落排版 .9 FRAME . 9 其他页面元素 . 10 3 页面风格 . 10 风格分类 . 10 页面风格应用 . 11 4 WEB 页面交互 .11 页面元素焦点切换 11 信息填写 . 11 鼠标交互响应 11 页面信息交互 . 13 操作结果确认 13 其他规则 . 13 页面信息提示 . 13 键盘响应支持 . 15 5 WEB 页面通用规范 .16 一般页面功能 . 16 新增 . 16 修改 . 16 删除 . 16 查询 . 16取消 . 17 保存 . 17 重置 . 17 返回 . 17 分页 . 17 全选 . 17 一般页面规则 . 17 默认值 . 17 必填值 . 18 界面传递 . 18 窗口嵌套 . 18 输入框操作 . 18 在线帮助功能 18 菜单功能要求 19 快捷键功能 . 19 快捷键的限制 20 页面的规范性 20 系统易用性 . 21 输入安全性要求 21 独特性要求 . 22 多窗口的应用与系统资源 22 6 页面编程技术使用规范 23 页面元素命名 . 23 DHTMLX 控件 .24 FLEX 控件 . 25 7 页面资源规格说明 . 25 图标 . 25 图片 . 25 多媒体 . 26 8 附录 . 27 基于 DHX 的 CSS 规格示例 27 表格 CSS 示例 27 典型应用的页面示例 27 1 引言 目的 本文用于规范我公司所开发的商业软件中对于 web 页面的设计工作，明确在设计中所要遵循的准则和方法，web页面中各个元素的规格要求，确保所实现的 web 页面在风格、结构和功能上的统一，提升商业软件的外在品质。 范围 本规范适用于公司所有的商业软件产品。 缩略术语 DHMLX：web 页面的 UI 控件 参考资料 2 WEB 页面框架内容 页面框架 WEB 的页面框架是指构成完整页面的组织结构。通常是由以下三部分构成：Head，Main，Foot，有些时候出于布局的需要，在“Head”下面还会加上用于页面功能导航的“Menu” 。如图： 图 1 页面布局 布局原则 对于 WEB 应用来说，页面布局是和 web 应用的功能区相对应的，并且对于页面中各个部分之间的切分比例也需要遵守一定的规则。 页面布局的设计，首先需要考虑用户在浏览 web 页面时视觉流向上的要求： 图 2 从视觉流向上看，用户首先看到的是页面“Head”部分的左面，通常那里是标识这个 WEB 应用的 Logo；然后是陈列 WEB 应用主要功能的“Menu”来用