网页设计规范课件

1、Web设计规范 2012-10-5目录一、 基础规范01 网页宽度02 搜索框设计规范 基础规范 应用场景03 页码设计规范 普通页码翻页 小型页码翻页04 广告设计规范 05 文字的编排与设计 文字大小 文字颜色 文字行距 英文字体规范 文字链接06 整齐的概念和应用07 模块化表现08 页脚信息二、参考指南01 页面修饰 简单的光影效果 质感的表现 透明效果的应用02 个性皮肤的应用03 图标的统一使用04 图标表意一、网页宽度最新显示器分辨率比例调查：目前主流分辨率 1024X768，在此状态下，默认使用960的网页宽度，与腾讯网首页统一尺寸。特殊情况1 . 信息量或图片量过大的情况，可

2、以考虑加宽承载，给出两个参考尺寸：950（paipai，Qbar等)990（QQshow，游戏产品等)2. 搜索类信息页面，采用自适应屏幕方式（比如soso搜索产品)二、搜索框设计规范d. 图标形式（放大镜）和文字形式可搭配使用，会出现如下三种情况：文字形式：搭配使用：图形形式：c. 搜索button规范文字为“搜索”避免采用其他描述。比如： 使用SOSO引擎的可考虑在搜索框前加SOSO LOGO同一个web产品中搜索的位置和表现形式尽量保持一致二、搜索框设计规范2. 应用场景强表现方式： 加大搜索框的显示，输入框内采用大字体（14号） 突出搜索button的表现，更直观，更有点击欲 位置放在

3、页头的中间并明显标示三、页码设计规范1.普通页码翻页的表现方法： 页码由三部分构成：一为页码状态区，表明页码在当前第几页位置以及共有多少页；二为页码翻页区，由上下翻页按钮与页码显示区构成；三为跳转翻页区。三部分组成页码翻页区域位于产品右下角，三部分距离不可分开过大。 链接页码的设计力求简明独立，页码与页码之间的间距不小于鼠标手型的距离，如图所示三、页码设计规范 链接页码为简明独立，不加任何修饰的数字形式 链接颜色由当前页面设计决定 数字大小建议为12-14px ,以易于点击为原则.2. 小型页码翻页的表现方法： 五、文字的编排与设计2文字颜色： 同一网站需要定出主文字颜色，特殊情况下可以有2种

4、左右的辅助文字颜色特别注意：菜单尽量不使用12号加粗，这样会导致复杂的文字难以辨认。多采用14号加粗 一般情况下字体变化不要超过三种，若有需要，可以尽量采用统一字体的不同字族。五、文字的编排与设计 灰黑色当使用灰色为文字颜色时，正灰色的明度数值（B）不大于30%。当使用带有色彩倾向的灰色时，根据色相不同，应对明度值（B）作相应调整。因为不同纯色亮度不同，黄色亮度最高，蓝色/紫色亮度最底，其他色相则属中间亮度。因此使用亮度越高的色彩，其明度值（B）应该越低。 正文的文字颜色多采用深蓝色或深灰色。在讨论颜色前，首先要明确一这个判断的衡量标准。我们是以Ps的颜色系统为讨论基础的。建议使用：五、文字的

5、编排与设计深蓝色当使用纯蓝色为文字颜色时，明度数值（B）不大于60%。当蓝色介于纯蓝往天蓝之间的时候，根据色相不同，应对明度值（B）作相应调整。当色相越接近天蓝时，（B）值应该越低。很多门户网站使用蓝色为文字颜色，常用的有建议使用天蓝色的： 纯蓝色：五、文字的编排与设计3文字行距：视觉最佳行距是字体大小的1.3-1.6倍12号宋体，我们一般使用的行距为8-9个像素。14号宋体，我们一般使用的行距为10-11个像素。正文多采用14号字，行距可适当调整为10-16个像素。4英文字体的使用：英文建议使用Arial：Arial与Helvetica / Univers并列为目前的标准无衬线字体（Sans

6、 Serif），字型依据Unicode标准包含多国语言文字在内。 Arial比例及字重和Helvetica(mac上用的字体)极之相近 系统自带并能与汉字匹配的点阵字比较:五、文字的编排与设计Arial字体优点:比例及字重（weight）和Helvetica极之相近 ; 没有下划线贴边的问题；Q字没尾巴；字高整齐缺点:大写I与小写L无法区分下划线:Tahoma字体优点:字宽较阔,字母间距较窄，恒定1px（阅读单个字母有困难）形态上符合汉字“方块字”点阵字；能区分大写I与小写L缺点:12号字有下划线贴边的问题；Q字有尾巴；字高不整齐下划线:五、文字的编排与设计隐性链接：对于混杂在页面文字中零散出

7、现的文字链接，为了便于识别，默认时候可以出现下划线或使用辅助链接色，光标经过的时候，样式不变。5文字链接：文字链接形式不得超过3种颜色（规定其中一种为主链接色）。显性链接：大面积链接的网站，比如门户首页、内容列表页。多采取灰黑色、蓝色做全篇的链接色，默认时不显示下划线，光标经过时才显示下划线。六、整齐的概念和应用类似这样“豆腐块”的文字排列，在大型网站中尤为重要。如何去分割和组织大量繁杂的信息？将文字块当作图片一样来排版优化，来平衡页面。 对齐网页设计中的”对齐”同传统的印刷排版中的对齐概念是一样的，并且同等重要。并不是说一切都应该在一条直线上，而是尽可能的保持一贯的整齐，不仅左对齐，也要尽量

8、右对齐。使我们的设计更有序。更方便阅读。六、整齐的概念和应用 首页上摘要无须空格。内容正文应该空两格。六、整齐的概念和应用 “豆腐块”四周应该空留均匀适当的间隔模块化的几类参考表现： 单线 3-5个像素的圆角 内边修饰.七、模块化表现设计准则：同一个网站采用的模块化表现应该是全部统一的。 页脚信息按照从上到下的排列次序为: 1、内部导航 2、外部导航 3、各类许可证、授权声明 4、英文版权信息“Copyright ” 5、中文版权信息 6、各类网络安全/工商证明/技术支持 LOGO 各链接间隔统一使用”| ” 建议采用12号字， 禁止使用加粗字体八、页脚信息一、页面修饰1。简单的光影效果2。质

9、感表现基本采用简单的渐变，不需要繁杂的修饰一、页面修饰3. 透明效果四、图标表意详细参考图标设计规范四、图标表意详细参考图标设计规范五， PS加强网页设计中像素化细节的技巧在网页设计中细节的处理十分重要，我个人也经常观摩外国佬的网站，发现优秀的网站设计在细节方面的处理都是照顾十分周全的。今天在这里分享给大家的小技巧很简单，但是却可以很好滴增强整个网站的细节。所以我自我认为这些技巧对提升你的网站设计水平也是有帮助的。并且你会留意到这些技巧都围绕一个词，就是“像素化”，简单地说就是一些1px，2px的小线。好吧，我们开始。1.像素分隔线1.选取铅笔工具（不要选错为画笔）,大小调为1px2.选取一个较背景色更深的颜色，如图中的深蓝色，按住Shift画 出一条直线3.选取一个较浅的颜色，再画一条直线。OK分隔线技巧的例子2.像素边缘首先我们看一张没有加“像素边缘”的原图：接下来是加上后的：看出来区别了吗？没关系，接下来请看放大下的图片：.可以看到在黑色块的下面画了一条1px的纯白色线。而这条线让下面的白色块的边缘不再平淡无奇，而有一种灯光反射（高亮）的效果。使得白色块的边缘更加突出。而方法跟第1个技巧是一样的，就是用铅笔工具画1px的线。需要注意颜色的选择，一般选择比背景色更浅的颜色，才能制造高亮的效果。3.像素阴影这是3个技