百知道视觉规划及一期提案.pptx

《百知道视觉规划及一期提案.pptx》由会员分享，可在线阅读，更多相关《百知道视觉规划及一期提案.pptx（36页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、目录 产品视觉现状评析 视觉发展趋势及规范化道路 知道产品视觉细分思路草案 一期提案说明第1页/共36页1百度知道产品视觉现状评析第2页/共36页A.色彩体系 web各元素色彩使用，色彩情感上，不统一：冷暖混搭，产品取向不明确。色彩在信息分层显示上有优化的空间。品牌色彩没有过于隐晦。第3页/共36页B.图标体系 未统一色彩范围。制作方法不一致，无法延展，升级。图标的使用不规范，造成页面点元素过多，页面繁星点缀。（例如知识掌门人）第4页/共36页C.样式体系 对已经形成的统一的样式库进行规范整理。从产品角度，规范和升级样式体系。D.排版体系 对各种信息总结归纳排版规范，对应到页面的样式中去，方便

2、修正与升级。从产品角度，规范和升级排版样式。第5页/共36页E.专题体系 没有很好的体现用户浏览心理。没有形成品牌化的视觉风格 栏目模板有待统一规范（可扩展易更新）。第6页/共36页2百度知道视觉发展趋势规范化升级道路第7页/共36页A.Web产品视觉趋势 规范化迭代的视觉升级 增强品牌对用户的影响 视觉为品牌服务 视觉为引导信息服务 视觉为功能服务第8页/共36页B.知道产品的操作方式第一步色彩体系图标体系样式体系排版体系专题体系产品现状第9页/共36页B.知道产品的操作方式第一步色彩体系图标体系样式体系排版体系专题体系分步进行个体系的视觉优化（基于现有的设计）统一 可操作 可延展 可升级输

3、出优化设计稿 和 细分规范 （不是改版）第10页/共36页B.知道产品的操作方式第一步第二步色彩体系图标体系样式体系排版体系专题体系第三步第四步分版本 阶段升级视觉系统 为产品创新提供可能第11页/共36页3百度知道视觉细分思路草案色彩体系图标体系样式体系排版体系专题体系第12页/共36页一、图标体系图标体系的第一步，是基于先在的图标，进行微调，使之统一规范。最终效果，将是无形中的一种设计升级，不会带来突变效果。第13页/共36页A.知道图标分类 栏目符号 点缀提示 荣誉等级 系统功能第14页/共36页B.设计尝试尝试图标来自：知道首页问题页面第15页/共36页B.知道图标尝试图标来自：1.保

4、留旧版的符号和基本的色彩体系。2.统一图标尺寸、色彩体系、符号体系、设计制作方法。第16页/共36页C.设计说明1.规范取色范围：图标色彩的统一，为设计成套的图标提供视觉前提。2.色彩选择取向暖色包括蓝色和绿色在内的冷色系色彩，在应用的时候都会适当增加暖色倾向，创造愉悦的氛围。第17页/共36页C.设计说明2.细化设计方案，明确图标的UI取向1）45度高光，呈现柔和的凸起2）统一内发光3）反白符号4）统一图标的大小（针对不同类别的图标进行大小规范统一）5）增加阴影效果，创造页面层次。旧新第18页/共36页C.设计说明2.细化设计方案，明确图标的UI取向1）柔和造型处理，升级图标亲和力，更有利于

5、图标融入界面设计,创造亲和的表现力。旧新第19页/共36页按照上面的思路和方法，在项目确定后，可以更完整的实施，设计方案可以继续优化和筛选。第20页/共36页二、知道掌门人页面特点：繁星点缀。通过优化解决信息传递混乱的局面。创造愉悦宽松的浏览空间。第21页/共36页旧1.淡化了右侧的交互兴趣，让该模块失去了头条的功能。第22页/共36页1.绿色取色与图标改版的取色趋势一致取暖。2.交互更明确，激活用户对信息的切换浏览。新第23页/共36页第24页/共36页1.突出栏目，而非单个标注。2.突出知识信息，淡化框框线线。第25页/共36页1.色彩取向偏暖，让阅读更加轻松愉悦。2.信息更清晰突显，让信息有层次的进入视线。知道掌门人模板;第26页/共36页知道掌门人模板旧第27页/共36页新第28页/共36页知道掌门人模板旧第29页/共36页新第30页/共36页知道掌门人模板旧第31页/共36页新第32页/共36页1.基于原有的设计，信息元素位置不变，只对模板的背景颜色、文字色彩、图标和段落行间距进行优化，旨在创造透气舒适的阅读空间。第33页/共36页第34页/共36页最终去掉框线，放松视觉浏览第35页/共36页感谢您的观看。第36页/共36页