资源描述：
《web app统一化视觉规范.pdf》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。
1、WebApp统一化视觉规范用户体验部版本号: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公共头部元素组成1字号2各元素尺寸及规定1.1导航栏字号2.1产品切换栏1.2单
2、元模块字号2.2搜索框内文字1.3底部栏字号3颜色的扩展应用4搜索框输入2行距5更多2.1单元模块行距2.2长文本行距二导航栏3图标1基础元素3.1添加桌面图标1.1高度3.2公共图标1.2颜色质感点击效果2使用情景2.1导航为主2.2搜索为主2.3搜索+导航三工具栏1基础元素2使用情景12年3月20日星期二公共头部1公共头部元素组成2各元素尺寸及规定2.1产品切换栏2.2搜索框内文字3颜色的扩展应用4搜索框输入5更多12年3月20日星期二公共头部1231公共头部元素组成2各元素尺寸及规定2.1产品切换栏2.2搜索框内文字3颜色的扩
3、展应用4搜索框输入5更多45基础公共元素组成各产品切换通过公共头部完成, 头部布局及交互方式不可改变.1百度logo. 切换产品后,更换成百度产品logo.2当前产品名称,高亮显示.3与当前产品同类的百度产品4搜索框5搜索按钮12年3月20日星期二公共头部121公共头部元素组成2各元素尺寸及规定2.1产品切换栏2.2搜索框内文字3颜色的扩展应用4搜索框输入5更多各元素尺寸及规定-产品切换栏1百度logo. 给予品牌符号足够的空间，能够成为该设计的品牌焦点品牌符号与背景颜色要强对比，默认方案中采用了白底2产品名称字号系统分辨率字体设计字号
4、ios320*480默认黑体15pxandroid320*480(mdpi)文泉驿米黑15px12年3月20日星期二公共头部1公共头部元素组成2各元素尺寸及规定2.1产品切换栏2.2搜索框文字3颜色的扩展应用4搜索框输入5更多12各元素尺寸及规定-搜索框文字1搜索框内文字文字四周需要适当、均匀的留白，字体高度控制在框高度的系统分辨率字体设计字号50%-60%。480*320分辨率下的设计源文件中，中文字号为18PX，ios320*480默认黑体18px框高度为36px。android320*480(mdpi)文泉驿米黑18px字体默认黑
5、体、默认粗度。不做加粗及纤细处理。 2按钮文字可根据产品特性更换文字内用(例如:百科”进入词条”系统分辨率字体设计字号ios320*480默认黑体16pxandroid320*480(mdpi)文泉驿米黑16px12年3月20日星期二1公共头部1公共头部元素组成2各元素尺寸及规定2.1产品切换栏2.2搜索框文字3颜色的扩展应用4搜索框输入325更多颜色的扩展应用保证百度产品视觉统一的同时,为了展现各产品自己的特性, 头部有部分元素可依据各产品标准色改变颜色.可扩展部分:1产品切换选中态2搜索按钮3背景渐变12年3月20日星期二默认状态公
6、共头部1公共头部元素组成2各元素尺寸及规定2.1产品切换栏2.2搜索框文字3颜色的扩展应用选中状态4搜索框输入5更多输入状态搜索框输入1 框作为交互主体元素,在过程中需要视觉状态响应2 按下状态有边缘高亮(仅限于IOS平台)3 激活状态光标需要闪烁(搜索光标色为蓝)4 框内文字不自动换行,框内文字使用系统默认的字 间距,清空文字图标，在框右侧，占有自有的空间12年3月20日星期二webapp视觉规范_顶部工具栏_基础样式公共头部1公共头部元素组成2各元素尺寸及规定2.1产品切换栏2.2搜索框文字3颜色的扩展应用4搜索框输入5更多更多1
7、、更多展开从顶部搜索框背景色上裂开,露出灰色背景. 2、更多区域有明显箭头指示 3、展开后“更多”文字变色,右侧箭头图标指向上。4、更多中频道文字颜色不顶部链接文字颜色相同 5、更多展开,原网页页面随其展开癿高度向下同步移动12年3月20日星期二导航栏承担webapp的主要功能及内容切换,是webapp区别与传统wap最重要部分之一.1基础元素1.1高度1.2颜色质感点击效果2使用情景2.1导航为主2.2搜索为主2.3搜索+导航12年3月20日星期二导航栏1基础元素1.1高度1.2颜色质感点击效果2使用情景2.1导航为主12.2
8、搜索为主2.3搜索+导航导航栏高度为了保证web app和混合app体验上保持一致,导航栏采用通栏形式, 高度参考ios顶部bar高度1高度44px12年3月20日星期二百度新闻导航栏1基础元素1.1高度1
