web设计规范文档

web设计规范文档篇一：WEB 设计规范()WEB 设计规范 版本 V 版本说明 目录1.简介 . 5 目的 . 5 整理视觉规范的几个原则 .5 参考资料 . 6 2.界面尺寸 . 7 关于画布尺寸 . 7 关于布局 . 7 关于导航 . 7 3.文档规范整理保存 . 8 文档命名 . 8 文件命名 . 8 4.文字使用规范 . 10 字体 . 10 字号（这里举例大多数情况，特殊情况可以特殊处理）. 10 5.图标设计规范 . 11 图标绘制 .11 小图标类型 .13 6.按钮设计规范（WEB 手机通用） . 15 按钮的状态 .15 按钮的形状 .16 按钮的大小 .16 . 17 8.检查产品设计以及页面需要遵循的交互原则（WEB手机通用） . 18 尼尔森十大可用性原则 . 18 9.单独项目的网页设计整理规范 .22 单一网页端项目 UI规范需要的规范文档 . 22 10.结语 . 251.简介 本文定义了关于公司设计工作方面的诸多规范，以及基本设计思考原则。用于提高今后的工作效率，和工作质量。 目的 （1）解决多人协作时控件混乱问题 （2）解决开发效率、代码冗余问题 （3）解决产品迭代中品牌形象会走样问题 整理视觉规范的几个原则 （1）需要掌握好创建的时机 每一个独立的项目都需要单独创建规范文档，规范建立的时机很重要，太早或者太晚都会给后续迭代带来很多麻烦。最佳时机是在完成风格定位后做规范，可以承上启下高效完成工作。 （2）只对非重要界面进行规范设定 整理规范时，应只针对控件、色值、质感、动效、品牌元素等重要界面进行规范设定。不是所有的页面和元素都需要严格按照规范设计制作。 （3）规则需要弹性 采用 28原则，只针对产品 80%的界面进行规范。这里讲的 80%和 20%是一个相对的概念，80%代表色彩、按钮、字体、间距等重要内容，这些内容需要进行详细的规范说明。另外的 20%是指某些控件是不可复用并且不重要的，这种 20%的内容不需要花费精力做进规范里。这个 28原则需要设计师根据具体情况具体分析，作出更适合当下的设计。（4）规范要有迭代 如果设计师没有跟着产品改版的节奏去迭代视觉规范，一般会出现两种情况：一是被原规范的旧样式束缚，死板的遵循最初的规范，长久下去会出现视觉样式过时的问题。二是改版中用了新的视觉风格，没有及时总结归纳成规范，这样一来又会出现品牌形象走样的问题。 （5）规范要有执行力 有两种规范是缺乏执行力的： 第一、规范内容不具体，缺少对核心模块的细节说明。各个模块缺少必需的说明，比如色彩模块中有主色却缺少辅助色的说明，按钮模块中缺少滑过、点击、不可点状态的说明，字体模块缺少字体磅数的分布设定。这种没有核心内容的规范，没有参考价值，规范的作用几乎等于零，其他参与项目的设计师还得找制作规范的 篇二：规范-Web 页面设计和排版版 本 历 史目 录1. 引言 . 4 目的 .4 适用范围 .4 2. 规范描述 .4 基础 .4 主要技术 . 5 使用层叠样式表 . 5 使用表格控制布局. 6 Web 页面设计和排版规范1. 引言 目的 为了使各系统 Web程序具有统一的排版风格，开发过程中减少出错，避免重复性工作发生，便于项目组成员信息交流，有利于系统维护，特制定此规范，此规范需要前台组成员共同遵守，协同改进。 适用范围 本规范适用与公司所有软件类 B/S结构项目。本规范在执行过程当中，如果出现冲突或不足的地方，将及时修改并更新为新的版本；但是在新的版本出现之前，必须执行旧的版本的约定。 2. 规范描述 基础 文字 使用 css样式表指定文字的样式； 字体一般为宋体，默认大小 12px；标题为黑体； 文本左对齐，数字右对齐，长度一致的文字居中；标题居中； 若文字在表格中，居左或居右时在文字前或后增加一个空格。 图片 一般我们把有较为复杂颜色变化的小块优化为 jpeg，而把那种只有单纯色块的卡通画式的小块优化为 gif。 表格 表格嵌套层次要尽量少，应该尽量避免将所有元素嵌套在一个表格里。 原因：浏览器在读取网页 html原代码时，是读完整个 table才将它显示出来的。如果一个大表格中含有多个子表格，必须等大表格读完，才能将子表格一起显示出来。超链接 链接文本的颜色最好用约定俗成的：未访问的，蓝色；点击过的，紫色或栗色。 用户页面深度不能超过三层。 显示尺寸 一般分辨率在 800x600的情况下，页面的显示尺寸为：780x428个象素；分辨率在 640x480的情况下，页面的显示尺寸为:620X311 个象素；分辨率在 1024X768的情况下，页面的显示尺寸为：1007x600。 主要技术使用层叠样式表 CSS 的作用 1. 将格式与结构分离 HTML 只定义了网页的结构和各个标记的功能，而让浏览器自己决定网页中的各个元素对象应该以何种样式风格显示出来。 CSS 通过将定义结构的部分与定义格式的部分分离便得网页制作者能够对 Web页面的布局施加更多的控制HTML仍可以保持简单明了的原貌，CSS 代码独立出来从另一角度控制页面的外观。 2. 更容易控制页面的布局 HTML 标记虽然可以调整字号、生成表格边距、改变颜色等，但不能精确地控制行间距和字间距。然而，CSS 却使的这些成为了现实。 3. 可以制作出体积更小、下载速度现快的网页 CSS 是像 HTML那样形式的文本。它不需要图像，不需要执行程序，不需要插件。这样可以减少表格标记及其它加大 HTML体积的代码，减少图像用量，从而减小了文件尺寸。 4. 可以更快更容易地维护和更新网页 利用 CSS可以使站点上所有的网页都指向一个单一的CSS文件，只要修改 CSS文件中某一行，那么整个站点都会随之发生变动。 CSS 与 HTML文档的四种结合方式 1. 在 HTML文档头部嵌入样式表单 将 CSS与 HTML文档结合在一起的比较常用的方法就是嵌入样式表单即在头部标记的内嵌样式双标记之中来定义样式。 例如： bodycolor:black;font-size:10pt;text-indent: h1color:red;font-size:15pt;text-align:center font-size:22pt;font-height:bold;text-align:center .notefont-size:small;color:red #wwwcolor:fuchsia;font-size:22pt 2. 用 HTML标记的 style属性内联样式表单 style 属性可以应用于 HTML文档中的除了basefont、param 和 script标记之外的任何 body标记中（包括 body本身） 。因此，用 HTML标记的 style属性内联样式表单的具体做法就是：除了 basefont、param 和script标记之外，使任何一个内嵌于之间的 HTML标记（包括 body本身）的样式属性 style被赋予任意数目的CSS声明作为其属性值，且要在作为 CSS声明的相邻属性对之 篇三：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或 46