Web 设计规范 CDC WUI 目录一、基础规范 01 网页宽度 02 搜索框设计规范?基础规范?应用场景 03 页码设计规范?普通页码翻页?小型页码翻页 04 广告设计规范 05 文字的编排与设计?文字大小?文字颜色?文字行距?英文字体规范?文字链接 06 整齐的概念和应用 07 模块化表现 08 页脚信息二、参考指南 01 页面修饰?简单的光影效果?质感的表现?透明效果的应用 02 个性皮肤的应用 03 图标的统一使用 04 图标表意一、网页宽度最新显示器分辨率比例调查: 目前主流分辨率 1024X768 ,在此状态下,默认使用 910 的网页宽度,与腾讯网首页统一尺寸。特殊情况 1 . 信息量或图片量过大的情况,可以考虑加宽承载,给出两个参考尺寸: 950 ( paipai , Qbar 等) 990 ( QQshow ,游戏产品等) 2. 搜索类信息页面,采用自适应屏幕方式(比如 soso 搜索产品) 一、网页宽度不同浏览器,不同分辨率下网页第一屏最大可视区域: 有效可视区域(单位: Px ) 屏幕一二三 800 600 1024 768 1280 1024 779 ( +21 ) 432 ( +168 ) 1003 ( +21 ) 600 ( +168 ) 1259 ( +21 ) 856 ( +168 ) 779 ( +21 ) 452 ( +148 ) 1003 ( +21 ) 620 ( +148 ) 1259 ( +21 ) 876 ( +148 ) 783(+17) 417(+183) 1007(+17) 585(+183) 1263(+17) 841(+183) 781(+19) 461(+139) 1005(+19) 629(+139) 1261(+19) 885(+139) 说明: 比如 1024 × 768 下 的可视面积是( 1024-21 )×( 768-148 ) 综合上面所有的数据,结论如下: 最保守的一屏大小是 IE6 下 800 × 600 : 779 × 432 最广泛使用的一屏大小是 IE6 下 1024 × 768 : 1003 × 600 二、搜索框设计规范 ?文本框 a. 搜索框文本框的长度应适中,至少应提供显示 10 个中文字符的宽度 b. 搜索组件中使用的文本框必须为单行文本框 c. 文本框的长度不得少于 130 个像素高度不得低于 18 个像素?帮助信息 a. 帮助信息一般包括三块内容:限定标签提示、标示性文字、热门关键词提示等, b. “限定标签提示”一般放在搜索框的上面 c. “热门关键词提示”一般放在搜索框下面 d. “标示性文字”可设置灰色(#) 显示,点击输入框后提示文字消失。提示文字应简明扼要,文字一般用于内容、用途、搜索范围等对用户有真正帮助的提示, ”请输入关键词”这样的提示不应出现. ?搜索按钮 a. 搜索按钮一般包含图标形式和文字形式两种 b. 使用图标形式时只能使用放大镜的图标,而不能采用其他元素。二、搜索框设计规范 d. 图标形式(放大镜)和文字形式可搭配使用,会出现如下三种情况: 文字形式: 搭配使用: 图形形式: c. 搜索 button 规范文字为“搜索”避免采用其他描述。比如: ?使用 SOSO 引擎的可考虑在搜索框前加 SOSO LOGO ?同一个 web 产品中搜索的位置和表现形式尽量保持一致二、搜索框设计规范 2. 应用场景强表现方式: ?加大搜索框的显示,输入框内采用大字体( 14 号) ?突出搜索 button 的表现,更直观,更有点击欲?位置放在页头的中间并明显标示二、搜索框设计规范?输入框内采用小字体( 12 号) ?长度大约以刚好放完提示文字为基准?弱化搜索 button 的表现,可考虑用 icon 代替?搜索框通常放在页头的右上角 2. 应用场景弱表现方式: 三、页码设计规范 : ?页码由三部分构成:一为页码状态区,表明页码在当前第几页位置以及共有多少页;二为页码翻页区,由上下翻页按钮与页码显示区构成;三为跳转翻页区。三部分组成页码翻页区域位于产品右下角,三部分距离不可分开过大。?链接页码的设计力求简明独立, 页码与页码之间的间距不小于鼠标手型的距离,如图所示三、页码设计规范?链接页码为简明独立,不加任何修饰的数字形式?链接颜色由当前页面设计决定?数字大小建议为 12-14px , 以易于点击为原则. 2. 小型页码翻页的表现方法: 详见《产品页码翻页普用标准》
腾讯-网页设计规范 来自淘豆网m.daumloan.com转载请标明出处.
