web app统一化视觉规范

《web app统一化视觉规范》由会员分享，可在线阅读，更多相关《web app统一化视觉规范（29页珍藏版）》请在金锄头文库上搜索。

1、Web App 统一化视觉规范 用户体验部 版本号:1.0版本 撰写人:孔敏 日期:2012年3月 12年3月20日星期二 平台背景: 以Android、iPhone平台的高端机为默认平台,制定WEB APP体验一致性内容,及具体规范。 基准线: 规范以320*480分辨率为基准 适配情况 ios320*480相同 640*9602倍 android320*480(mdpi)相同 480*800(hdpi)1.5倍 12年3月20日星期二 目录一 头部公共搜索框 1 公共头部元素组成 2 各元素尺寸及规定 2.1产品切换栏 2.2搜索框内文字 3 颜色的扩展应用 4 搜索框输入 5 更多 二

2、导航栏 1 基础元素 1.1 高度 1.2 颜色质感点击效果 2 使用情景 2.1导航为主 2.2搜索为主 2.3搜索+导航 三 工具栏 1 基础元素 2 使用情景 四 视觉基础控件 1 字号 1.1导航栏字号 1.2单元模块字号 1.3底部栏字号 2 行距 2.1单元模块行距 2.2长文本行距 3 图标 3.1添加桌面图标 3.2公共图标 12年3月20日星期二 公共头部 1 公共头部元素组成 2 各元素尺寸及规定 2.1产品切换栏 2.2搜索框内文字 3 颜色的扩展应用 4 搜索框输入 5 更多 12年3月20日星期二 公共头部2 4 5 1 各产品切换通过公共头部完成, 头部布局及交互方

3、式不可改变. 百度logo. 切换产品后,更换成百度产品logo. 当前产品名称,高亮显示. 与当前产品同类的百度产品 搜索框 搜索按钮 1 2 3 基础公共元素组成 3 4 5 1 公共头部元素组成 2 各元素尺寸及规定 2.1产品切换栏 2.2搜索框内文字 3 颜色的扩展应用 4 搜索框输入 5 更多 12年3月20日星期二 公共头部21 1 1 公共头部元素组成 2 各元素尺寸及规定 2.1产品切换栏 2.2搜索框内文字 3 颜色的扩展应用 4 搜索框输入 5 更多 百度logo. 给予品牌符号足够的空间，能够成为该设计的品牌焦点 品牌符号与背景颜色要强对比，默认方案中采用了白底 系统分

4、辨率字体设计字号 ios320*480默认黑体15px android320*480(mdpi)文泉驿米黑15px 2产品名称字号 各元素尺寸及规定-产品切换栏 12年3月20日星期二 公共头部 1 2 各元素尺寸及规定-搜索框文字 系统分辨率字体设计字号 ios320*480默认黑体18px android320*480(mdpi)文泉驿米黑18px 1搜索框内文字 文字四周需要适当、均匀的留白，字体高度控制在框高度的 50%-60%。480*320分辨率下的设计源文件中，中文字号为18PX， 框高度为36px。 字体默认黑体、默认粗度。不做加粗及纤细处理。 1 公共头部元素组成 2 各元素

5、尺寸及规定 2.1产品切换栏 2.2搜索框文字 3 颜色的扩展应用 4 搜索框输入 5 更多 2按钮文字 可根据产品特性更换文字内用(例如:百科”进入词条”系统分辨率字体设计字号 ios320*480默认黑体16px android320*480(mdpi)文泉驿米黑16px 12年3月20日星期二 保证百度产品视觉统一的同时,为了展现各产品自己的特性, 头部有部分元素可依据各产品标准色改变颜色. 公共头部 1 公共头部元素组成 2 各元素尺寸及规定 2.1产品切换栏 2.2搜索框文字 3 颜色的扩展应用 4 搜索框输入 5 更多 颜色的扩展应用 1 23 产品切换选中态 搜索按钮 背景渐变

6、1 2 3 可扩展部分: 12年3月20日星期二 公共头部 1 公共头部元素组成 2 各元素尺寸及规定 2.1产品切换栏 2.2搜索框文字 3 颜色的扩展应用 4 搜索框输入 5 更多 1 框作为交互主体元素,在过程中需要视觉状态响应 2 按下状态有边缘高亮(仅限于IOS平台) 3 激活状态光标需要闪烁(搜索光标色为蓝) 4 框内文字不自动换行,框内文字使用系统默认的字 间距,清空文字图标，在框右侧，占有自有的空间 搜索框输入 选中状态 默认状态 输入状态 12年3月20日星期二 web app 视觉规范 _顶部工具栏_基础样式 公共头部 1 公共头部元素组成 2 各元素尺寸及规定 2.1产品

7、切换栏 2.2搜索框文字 3 颜色的扩展应用 4 搜索框输入 5 更多 1、更多展开从顶部搜索框背景色上裂开,露出灰色背景. 2、更多区域有明显箭头指示 3、展开后“更多”文字变色,右侧箭头图标指向上。 4、更多中频道文字颜色不顶部链接文字颜色相同 5、更多展开,原网页页面随其展开癿高度向下同步移动 更多 12年3月20日星期二 导航栏 承担web app的主要功能及内容切换, 是web app区别与传统wap最重要部分之一. 1 基础元素 1.1 高度 1.2 颜色质感点击效果 2 使用情景 2.1导航为主 2.2搜索为主 2.3搜索+导航 12年3月20日星期二 导航栏 1 基础元素 1.

8、1 高度 1.2 颜色质感点击效果 2 使用情景 2.1导航为主 2.2搜索为主 2.3搜索+导航 1 导航栏高度 为了保证web app和混合app体验上保持一致,导航栏 采用通栏形式, 高度参考ios顶部bar高度 高度44px1 12年3月20日星期二 导航栏 百度新闻 百度百科 百度文库 导航栏颜色质感点击效果 导航栏的颜色可根据产品线颜色变化, 保持和 pc端产品颜色一致. 弱渐变, 扁平风格 点击效果采用通栏形式, 使页面布局更整体 颜色: 质感: 1 基础元素 1.1 高度 1.2 颜色质感点击效果 2 使用情景 2.1导航为主 2.2搜索为主 2.3搜索+导航 点击 : 12年

9、3月20日星期二 导航栏 1 基础元素 1.1 高度 1.2 颜色质感点击效果 2 使用情景 2.1导航为主 2.2搜索为主 2.3搜索+导航 使用情景:1 导航为主 产品特点: 1 导航栏承载产品主要功能 2 强内容推送. 3 弱搜索 设计原则 此类产品导航栏颜色体现品牌颜色, 颜色纯度较高. 12年3月20日星期二 导航栏 1 基础元素 1.1 高度 1.2 颜色质感点击效果 2 使用情景 使用情景:2 搜索为主 产品特点: 1 强搜索需求 2 下部内容作为搜索的补充 设计原则 此类产品导航栏多出现在二级页面, 页面最重要的始终是 搜索功能, 所以二级导航栏颜色始终弱于搜索按钮. 12年3

10、月20日星期二 导航栏 1 基础元素 1.1 高度 1.2 颜色质感点击效果 2 使用情景 使用情景:3 搜索+导航 产品特点: 1 搜索是产品的主功能之一 2 除搜索功能外,产品自身有较多功能需要导航来承载 设计原则 此类产品导航栏和搜索同为产品重要功能, 设计时需要平 衡两者的层级关系 12年3月20日星期二 工具栏 1 基础元素 2 使用情景 1 基础元素 工具栏 承载返回功能和辅助编辑工具 高度: 44px 颜色: 灰白色 质感: 扁平渐变 1 12年3月20日星期二 工具栏 1 基础元素 2 使用情景 使用场景 工具栏 例子:文库阅读页, 显示在顶部, 点击页面 中心可收起. 1 1

11、 12年3月20日星期二 视觉基础元素 1 字号 1.1导航栏字号 1.2单元模块字号 1.3底部栏字号 2 行距 2.1单元模块行距 2.2长文本行距 3 图标 3.1添加桌面图标 3.2公共图标 12年3月20日星期二 web app 视觉规范 _导航栏_一级导航 视觉基础元素 1 字号 1.1导航栏字号 1.2单元模块字号 1.3底部栏字号 导航栏根据不同情况选择相应字号 导航栏标题-小 导航栏标题-大 导航栏按钮 16px 18px 14px 23 1 1 2 3 1.1导航栏字号 12年3月20日星期二 web app 视觉规范 _导航栏_一级导航 1 2 根据实际情况有多种组合方式

12、 标题 简述 注释 16px 14px 12px 1 2 3 1.2单元模块字号 3 视觉基础元素 设计原则: 按照信息层级的重要程度,来划分字号等级. 标题简述注释 1 字号 1.1导航栏字号 1.2单元模块字号 1.3底部栏字号 12年3月20日星期二 web app 视觉规范 _导航栏_一级导航 视觉基础元素 1.2单元模块字号-长篇阅读 1 1 字号 1.1导航栏字号 1.2单元模块字号 1.3底部栏字号 设计原则:长篇阅读要考虑到用户长时间阅读的舒适度, 所以在字号使用上大于常规短文本 长文本间距16px1 12年3月20日星期二 web app 视觉规范 _导航栏_一级导航 视觉基

13、础元素 考虑到中国用户依赖文字而非图标的特征， 底部文字更加清晰易读。 1.3底部栏字号 1 标题12px 1 1 字号 1.1导航栏字号 1.2单元模块字号 1.3底部栏字号 12年3月20日星期二 视觉基础元素 1 行距 1.1单元模块行距 1.2长文本行距 1.单元模块行距 标题与简述间距 简述折行间距 简述与注释间距 10px 7px 10px 1 2 3 1 2 3 12年3月20日星期二 二视觉基础元素 1 行距 1.1单元模块行距 1.2长文本行距 1 1.长文本行距 长文本间距11px1 12年3月20日星期二 在左上方增加贴合倒角的图形。 web app 视觉规范 Web a

14、pp桌面icon Web app保存到桌面后的icon样式， 与native app的icon相比增加以下元素进行区分。 在图形上叠加“WEB”字样。 统一为蓝色，保证识别度和一致性。 2 3 1 二视觉基础元素 3 图标 3.1添加桌面图标 3.2公共图标 2 1 3 12年3月20日星期二 web app 视觉规范 公共图标 二视觉基础元素 3 图标 3.1添加桌面图标 3.2公共图标 设计原则: 图形简洁, 表意明确 ,没有很强的风格化特征 12年3月20日星期二 后续添加模块 情景模块 1 搜索及搜索结果 2 相关搜索及底部 3 登陆注册 5 加载更多及回到顶部 基础视觉 1公共图标 2程序启动图标 12年3月20日星期二 Thanks! 12年3月20日星期二