腾讯网Web页面设计规范

所需积分/C币:9 2016-08-16 10:07:54 3.83MB PDF
5
收藏 收藏
举报

腾讯网Web页面设计规范 一、基础规范 1. 网页宽度 2. 搜索框设计规范 基础规范 应用场景 3. 页码设计规范  普通页码翻页 小型页码翻页 4. 广告设计规范 5. 文字的编排与设计 文字大小 文字颜色 文字行距 英文字体规范 文字链接 6. 整齐的概念和应用 7. 模块化表现 8. 页脚信息
网页宽度 最新显示器分辨率比例调查 目前主流分辨率1024×X768,在此状态下,默认使用910的网页宽度,与腾讯网首页统一尺寸。 屏菲分辨率 访问数屏蒋分耕军占总数的北例防问数 1.■102x6 b237% B56% 1058% 2.■1260800 1058% 686% 3.m1280024 856% 144m9n0 F8后% 5.■UQ 36U% B■1f8连 218% 7.■1680x050160% 8.1280x6 151% 6237% 9.120930 074% 10m1400x050 074 特殊情况 1.信息量或图片量过大的情况,可以考虑加承载,给出两个参考尺寸 950( palpal,Qbar等) 990( QQshow,游戏产品等) 2.搜索类信息页面,采用自适应屏幕方式(比如soso搜索产品) 网页宽度 不同浏览器,不同分辩率下网页第一屏最大可视区域 有效可视区域(单位:PX) 屏蓐 800 600 1024 758 1280 1024 TE6.0 779(+21 432(+168) 103(+21 60(+168 1259(+21) 856(+168) IE7,0 779(+21)452(+148)103(+21)|620(+148)1259(+21)|876(+148 Firefox.0 783(+17 417(+183) 1007(+17) 585(+183) 1263(+17) 841(+183) Operas.0 781(+19) 451(+139) 1005(+19) 629(+139) 1261(+19) 885{+139) 说明: 比如1024×768下7.0的可视面积是(102421)×(768-148) 综合上面所有的数据,结论如下 最保守的一屏大小是旧E6下800×600:779×432 最广泛使用的一屏大小是旧6下1024×768:1003×600 二、搜索框设计规范 1.基础规范 文本框 a.索框文本框的长度应适中,至少应提供显示10个中文字符的宽度 b.搜索组件中使用的文本框必须为单行文本框 C.文本相的长度不得少于130个像察高度不得低于18个像素 帮助信息 a.帮助信息一般包括三块内容:限定标签提示、标示性文字、热门关键词提示等 b.“限定标签是示一般放在搜索桎的上面 c.“热门关犍词提示一般放在搜索框下面 d.“标示性文字”可设灰色(cco)显示,点击输入桓后提示文字消失。提示文字应简明扼要,文字一般用于内、用途、搜索范围等对用户有 真正枍助的提示,“请输入关键词″这样的提示不应出现 限定标签提示 月页臣片「音乐「梨吧「问问1Q0空间|更多 目了然 标示性文字 想找什么?输入商品名称试式 所有分类 门囊:手机充值乖巧水管包雅芳连衣裙热销5减肥乘爱K660Pol衫衔嗤配件 热门关键词提示 搜索按钮 a.搜索按钮一般包含图标形式和文字形式两种 b.使用图标形式时只能使用放大镜的图标,而不能采用其他元素。 二、搜索框设计规范 G.搜索butn规范文字为“搜索"避免用其他描述。比如: o.图标形式(放大镜)和文字形式可搭配使用,会出现如下三种情况 文字形式: ■索 挡配使用:入你要宗笔关词9宗 图形形式 请输关键字需Q四 ·使用SO5O引擎的可考虑在搜索框前加 SOSO LOGO 使用s390引擎的可考虑 搜索 在搜霎框司加 sosa I000 热门:奥运暑猴达人美新梦|朋友> 50轴入天气,本地温度固播报 搜搜 同一个web产品中搜索的位置和表现形式尽量保持致 二、搜索框设计规范 2.应用场景 强表现方式 ·加大搜索框的显示,输入框内采用大字体(14号) 突出搜索 button的表现,更直观,更有点击欲 ·位置放在页头的中问并明显标示 靳闻体百「娱乐Ⅰ财经丨汽「科技丨理财丨癬戏「教丨读书丨女性儿丨星座丨冢屆|音丨论坛博霖 评坨丨奥运|乐证°丨手机丨码丨基蜜丨漫丨高考丨杂志丨时尚丨育儿丨公益丨房产视频|下载|客 25℃ 网买|图片音乐搜|问问(QQ空间|更多 人备 深圳 ⑤oso郾找奥运看点?入果运赛程查词 搜 雨扣全场单品3折起p 其他案例:Q旋涡 采用大字体【14)的输入框 YAMAP积分:19注销|论坛 旋窝讯下网站伞部水器者 X.s030 com 热门:忍密阳野兽泪光闪闪李京塔 首页 影视 动浸 音乐 游戏 钦件 书籍 手机 排行榜 二、搜索框设计规范 2.应用场景 弱表现方式 输入框内采用小字体(12号) 长度大约以刚好放完提示又字为基准 弱化搜索 button的表现,可考虑用ican代替 搜索框通常放在页头的右上角 迎光临,窥转日卖我的QQ秀(8)(0)请输入关键字接学Q两 场景配饰主题秀刊品牌免费秀友推荐红钻乐园 搜索框的 弱显示 欢迎,游客|登录|收藏工具|团队日志1意见反馈点亮图冻 国制入你找的关能词⊙东 黄的收高收新网量 三、页码设计规范 1普通页码翻页的表现方法 ·页码由三部分构成:一为页码状态区,表明页码在当前第几页位置以及共有多少页;二为页码翻页区:由上下翻页按钮与页码显示区构成;三为跳 转翻页区。三部分组成页码翻页区域位于产品右下角,三部分距离不可分开过大 跳转翻女区 态区 翻页区 1/32页上一12345678…32〖下一到第□页[确定 8/32页页 1234567日 第□页[确定 ·链接页码的设计力求简明独立,页码与页码之间的间距不小于鼠标手型的距离,如图所示 23456789 23456789 三、页码设计规范 2.小型页码翻页的表现方法 链接页码为简明独立,不加任何修饰的数字形式 链接颜色由当前页面设计决定 数字大小建议为12-14pX,以易于点击为原则 1234567 上一页1234567下一页 35上一页12345[下页 详见《产品页码翻页普用标准》

...展开详情
试读 39P 腾讯网Web页面设计规范
立即下载 低至0.43元/次 身份认证VIP会员低至7折
一个资源只可评论一次,评论内容不能少于5个字
您会向同学/朋友/同事推荐我们的CSDN下载吗?
谢谢参与!您的真实评价是我们改进的动力~
  • 分享宗师

关注 私信
上传资源赚钱or赚积分
最新推荐
腾讯网Web页面设计规范 9积分/C币 立即下载
1/39
腾讯网Web页面设计规范第1页
腾讯网Web页面设计规范第2页
腾讯网Web页面设计规范第3页
腾讯网Web页面设计规范第4页
腾讯网Web页面设计规范第5页
腾讯网Web页面设计规范第6页
腾讯网Web页面设计规范第7页
腾讯网Web页面设计规范第8页

试读结束, 可继续读4页

9积分/C币 立即下载 >