网页设计规范综述

《网页设计规范综述》由会员分享，可在线阅读，更多相关《网页设计规范综述（33页珍藏版）》请在金锄头文库上搜索。

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

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

3、4号） 突出搜索button的表现，更直观，更有点击欲 位置放在页头的中间并明显标示,二、搜索框设计规范,2. 应用场景 弱表现方式：,输入框内采用小字体（12号） 长度大约以刚好放完提示文字为基准 弱化搜索button的表现，可考虑用icon（图标格式 ）代替 搜索框通常放在页头的右上角,三、页码设计规范,1.普通页码翻页的表现方法： 页码由三部分构成：一为页码状态区，表明页码在当前第几页位置以及共有多少页；二为页码翻页区，由上下翻页按钮与页码显示区构成；三为跳转翻页区。三部分组成页码翻页区域位于产品右下角，三部分距离不可分开过大。,链接页码的设计力求简明独立，页码与页码之间的间距不小于鼠标

4、手型的距离，如图所示,三、页码设计规范,链接页码为简明独立，不加任何修饰的数字形式 链接颜色由当前页面设计决定 数字大小建议为12-14px ,以易于点击为原则.,2. 小型页码翻页的表现方法：,五、文字的编排与设计,文字大小：建议使用12号+14号字体的混合搭配，13号也可酌情考虑，因为13号字体的不对称性，目前非主流。 需突出的内容部分、新闻标题、栏目标题等多使用14号字体 广告内容、辅助信息或介绍性文字等多使用12号字体 避免大面积使用加粗字体,总体原则：提高文字的辨识性和页面的易读性,五、文字的编排与设计,2文字颜色： 同一网站需要定出主文字颜色，特殊情况下可以有2种左右的辅助文字颜色

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

6、与设计,深蓝色 当使用纯蓝色为文字颜色时，明度数值（B）不大于60%。当蓝色介于纯蓝往天蓝之间的时候，根据色相不同，应对明度值（B）作相应调整。 当色相越接近天蓝时，（B）值应该越低。 很多门户网站使用蓝色为文字颜色，常用的有,建议使用天蓝色的： 纯蓝色：,五、文字的编排与设计,其他颜色 当使用其他颜色作为正文主色调时，安全起见可采用明度数值（B）不大于30%的颜色。,五、文字的编排与设计,3文字行距： 视觉最佳行距是字体大小的1.3-1.6倍 12号宋体，我们一般使用的行距为8-9个像素。 14号宋体，我们一般使用的行距为10-11个像素。 正文多采用14号字，行距可适当调整为10-16个像

7、素。,4英文字体的使用： 英文建议使用Arial：Arial与Helvetica / Univers并列为目前的标准无衬线字体（Sans Serif），字型依据Unicode标准包含多国语言文字在内。 Arial比例及字重和Helvetica(mac上用的字体)极之相近,系统自带并能与汉字匹配的点阵字比较:,五、文字的编排与设计,Arial字体 优点:比例及字重（weight）和Helvetica极之相近 ; 没有下划线贴边的问题；Q字没尾巴；字高整齐 缺点:大写I与小写L无法区分 下划线:,Tahoma字体 优点:字宽较阔,字母间距较窄，恒定1px（阅读单个字母有困难）形态上符合汉字“方块字

8、”点阵字；能区分大写I与小写L 缺点:12号字有下划线贴边的问题；Q字有尾巴；字高不整齐 下划线:,五、文字的编排与设计,Verdana字体 优点:没有下划线贴边的问题,能区分大写I与小写L 缺点:字体较宽，间距大，字型圆同一宽度可显示字节比其他字体少得多 ; Q字有尾巴；字高不整齐 下划线:,应用案例,五、文字的编排与设计,隐性链接： 对于混杂在页面文字中零散出现的文字链接，为了便于识别，默认时候可以出现下划线或使用辅助链接色，光标经过的时候，样式不变。,5文字链接： 文字链接形式不得超过3种颜色（规定其中一种为主链接色）。 显性链接： 大面积链接的网站，比如门户首页、内容列表页。多采取灰黑

9、色、蓝色做全篇的链接色，默认时不显示下划线，光标经过时才显示下划线。,六、整齐的概念和应用,类似这样“豆腐块”的文字排列，在大型网站中尤为重要。 如何去分割和组织大量繁杂的信息？将文字块当作图片一样来排版优化，来平衡页面。 对齐 网页设计中的”对齐”同传统的印刷排版中的对齐概念是一样的，并且同等重要。 并不是说一切都应该在一条直线上，而是尽可能的保持一贯的整齐，不仅左对齐，也要尽量右对齐。使我们的设计更有序。更方便阅读。,六、整齐的概念和应用,首页上摘要无须空格。,内容正文应该空两格。,六、整齐的概念和应用,“豆腐块”四周应该空留均匀适当的间隔,模块化的几类参考表现： 单线 3-5个像素的圆角

10、 内边修饰 ,七、模块化表现,设计准则：同一个网站采用的模块化表现应该是全部统一的。,页脚信息按照从上到下的排列次序为: 1、内部导航 2、外部导航 3、各类许可证、授权声明 4、英文版权信息“Copyright ” 5、中文版权信息 6、各类网络安全/工商证明/技术支持 LOGO 各链接间隔统一使用”| ” 建议采用12号字， 禁止使用加粗字体,八、页脚信息,目录,一、 基础规范,二、参考指南,01 网页宽度 02 搜索框设计规范 基础规范 应用场景 03 页码设计规范 普通页码翻页 小型页码翻页 04 广告设计规范 05 文字的编排与设计 文字大小 文字颜色 文字行距 英文字体规范 文字链

11、接 06 整齐的概念和应用 07 模块化表现 08 页脚信息,01 页面修饰 简单的光影效果 质感的表现 透明效果的应用 02 个性皮肤的应用 03 图标的统一使用 04 图标表意,一、页面修饰,1。简单的光影效果,2。质感表现,基本采用简单的渐变，不需要繁杂的修饰,一、页面修饰,3. 透明效果,四、图标表意,详细参考图标设计规范,四、图标表意,详细参考图标设计规范,四、图标表意,详细参考图标设计规范,五， PS加强网页设计中像素化细节的技巧 在网页设计中细节的处理十分重要，我个人也经常观摩外国佬的网站，发现优秀的网站设计在细节方面的处理都是照顾十分周全的。今天在这里分享给大家的小技巧很简单，

12、但是却可以很好滴增强整个网站的细节。所以我自我认为这些技巧对提升你的网站设计水平也是有帮助的。并且你会留意到这些技巧都围绕一个词，就是“像素化”，简单地说就是一些1px，2px的小线。 好吧，我们开始。,1.像素分隔线,1.选取铅笔工具（不要选错为画笔）,大小调为1px 2.选取一个较背景色更深的颜色，如图中的深蓝色，按住Shift画 出一条直线 3.选取一个较浅的颜色，再画一条直线。OK,分隔线技巧的例子,2.像素边缘,首先我们看一张没有加“像素边缘”的 原图：,接下来是加上后的：,看出来区别了吗？没关系，接下来请看放大下的图片：.,可以看到在黑色块的下面画了一条1px的纯白色线。而这条线让下面的白色块的边缘不再平淡无奇，而有一种灯光反射（高亮）的效果。使得白色 块的边缘更加突出。而方法跟第1个技巧是一样的，就是用铅笔工具画1px的线。需要注意颜色的选择，一般选择比背景色更浅的颜色，才能制造 高亮的效果。,3.像素阴影,这是3个技巧里面最容易实现的，但它一样特别实用，甚至经常会用到。照例我们先看图片：,可以看出在有阴影下，文字立体感得到加强，特别在文字的背景较复杂，比较多噪点时使用该技巧会使文件比较突出。 而加上阴影方法很简单，只需双击图层名称，添加“投影”的图层样式。然后按下图设置参数：,接下来我们看看一些使用该技巧的例子：,完,Thanks,