《丁丁网界面设计规范》由会员分享,可在线阅读,更多相关《丁丁网界面设计规范(7页珍藏版)》请在金锄头文库上搜索。
1、丁丁网界面设计规范仅限内部使用 2010 DDMap 1界面设计规范丁丁网界面设计规范仅限内部使用 2010 DDMap 2目录1. 头部样式2. 尾部样式3. 版面样式4. 字体样式5. 按钮样式6. 菜单样式丁丁网界面设计规范仅限内部使用 2010 DDMap 3头部样式宽度 9801. 无搜索框的头部样式2. 有搜索框的头部样式3. 有 2 级菜单的头部尾部样式宽度 980,可在尾部上方安排 2 种尺寸的横幅广告1. 尺寸:980X902. 尺寸:730X70丁丁网界面设计规范仅限内部使用 2010 DDMap 4版面样式1.浅蓝色背景:用于工具类的页面2.浅绿色背景:用于生活类的页面3
2、.浅灰色背景:颜色太多时可用此灰色,如:在顶部大 Tab 颜色较重时,下面可放这种4.搜索条样式,可嵌入于各类页面长版短版5.左右结构的版面尺寸:左:735 右:240右侧板块上下之间可用灰色线条隔开丁丁网界面设计规范仅限内部使用 2010 DDMap 5字体样式1. 字体颜色:兰色字为可点击:深兰色:#1e50a2 浅兰色:#4d92cd 灰色字为不可点击,作为文章等大段落文字使用(如遇版面蓝色字过多时可作为链接字使用,起到调节色彩作用)深灰色:#585858 浅灰色:#a2a2a2 红色字为重点突出使用深红色:# e10101 绿色字体只可在绿色背景上使用绿色:# 52934f 2.字体大
3、小:标题文字为 14px,其他文字为 12px3.字体在鼠标经过时的样式:1关键字类:反白 2. 标题类:变红色 4.文字提示窗口样式: 色块颜色:#1e50a2, “主色+反白字体”作为一种组合,来区别“白底+蓝色字体 ”的表现丁丁网界面设计规范仅限内部使用 2010 DDMap 6按钮样式按钮按醒目程度分为 3 个级别:1 级别低:2 级别中: 3 级别高:4 反差色特殊应用: 5 手机客户端下载按钮:(Gif 动画,2 帧切换,放置于各类搜索结果页面最右侧):如:丁丁手机版,随时随地查公交丁丁手机版,随时随地查优惠丁丁手机版,随时随地查路线丁丁手机版,随时随地看点评菜单样式ABC其中文字
4、使用宋体,可根据按钮大小适当使用 12-14px 加粗或不加粗的样式“我要点评”建议更换为像素字体,宋体,清晰,干净,也与其他按钮形态统一规范丁丁网界面设计规范仅限内部使用 2010 DDMap 7A. 表格色彩规范 主色:蓝色 #3e7ec7 色值不做特定要求,在蓝色范围内即可。 表格色彩需要与主色区分,不得使用纯度过高的背景色,同一个页面表格颜色要统一 title 栏和内容区域色彩要区别,为提高文字阅读的清晰度,内容区域的背景色尽量使用白色无底色。B. 图片边框样式:1px(#cccccc)+2px(#ffffff)C. 头像页面头像规格:64px*64px 50*50px 24*24pxD. 规则 页面与浏览器内边的绝对距离应该保持一致的距离,保证页面内容与浏览器间有“呼吸空间” 严禁 logo 标准尾紧贴浏览器窗口内边 上下净边都控制在 6px logo标准头的上下空间必须留 8px 界面宽度为 980pxE. 行距:模块之间的距离 10pxF. 关于时间显示的规范2010/09/25 23:38:44 适用于大列表页 色值:#999999 字体为宋体,字号为 12pxG. 专题页面 宽度保持在 1003 以内均可,不再强制规定沿用工具网的灰色投影背景,(站内灰色投影背景一律去掉)补充