知道创新设计提案-用户体验部教材.pptVIP

视觉规划及一期提案 百度知道 用户体验部 石爽 2009.04.30 目录 ? 产品视觉现状评析 ? 视觉发展趋势及规范化道路 ? 知道产品视觉细分思路草案 ? 一期提案说明 1 百度知道产品视觉现状评析 A.色彩体系 ? web各元素色彩使用，色彩情感上，不统一：冷暖混搭，产品取向不明确。 ? 色彩在信息分层显示上有优化的空间。 ? 品牌色彩没有过于隐晦。 B.图标体系 ? 未统一色彩范围。 ? 制作方法不一致，无法延展，升级。 ? 图标的使用不规范，造成页面点元素过多，页面繁星点缀。（例如知识掌门人） C.样式体系 ? 对已经形成的统一的样式库进行规范整理。 ? 从产品角度，规范和升级样式体系。 D.排版体系 ? 对各种信息总结归纳排版规范，对应到页面的样式中去，方便修正与升级。 ? 从产品角度，规范和升级排版样式。 E.专题体系 ? 没有很好的体现用户浏览心理。 ? 没有形成品牌化的视觉风格 ? 栏目模板有待统一规范（可扩展易更新）。 2 百度知道视觉发展趋势 规范化升级道路 A. Web产品视觉趋势 ? 规范化——迭代的视觉升级 ? 增强品牌对用户的影响 ? 视觉为品牌服务 ? 视觉为引导信息服务 ? 视觉为功能服务 B.知道产品的操作方式 第一步 色彩 体系 图标 体系 样式 体系 排版 体系 专题 体系 … 产品现状 B.知道产品的操作方式 第一步 色彩 体系 图标 体系 样式 体系 排版 体系 专题 体系 … 分步进行个体系的视觉优化（基于现有的设计） 统一 可操作 可延展 可升级 输出优化设计稿 和 细分规范 （不是改版） B.知道产品的操作方式 第一步 第二步 色彩 体系 图标 体系 样式 体系 排版 体系 专题 体系 … 第三步 第四步 分版本 阶段升级视觉系统 为产品创新提供可能 3 百度知道 视觉细分思路草案 色彩 体系 图标 体系 样式 体系 排版 体系 专题 体系 … 一、图标体系 图标体系的第一步，是基于先在的图标，进行微调，使之统一规范。 最终效果，将是无形中的一种设计升级，不会带来突变效果。 A.知道图标分类 ? 栏目符号 ? 点缀提示 ? 荣誉等级 ? 系统功能 B.设计尝试 尝试图标来自： 知道首页 问题页面 B.知道图标 尝试图标来自： 1.保留旧版的符号和基本的色彩体系。 2.统一图标尺寸、色彩体系、符号体系、设计制作方法。 C. 设计说明 1.规范取色范围：图标色彩的统一，为设计成套的图标提供视觉前提。 2.色彩选择取向——暖色 包括蓝色和绿色在内的冷色系色彩，在应用的时候都会适当增加暖色倾向，创造愉悦的氛围。 C. 设计说明 2.细化设计方案，明确图标的UI取向 1）45度高光，呈现柔和的凸起 2）统一内发光 3）反白符号 4）统一图标的大小（针对不同类别的图标进行大小规范统一） 5）增加阴影效果，创造页面层次。 旧 新 C. 设计说明 2.细化设计方案，明确图标的UI取向 1）柔和造型处理，升级图标亲和力，更有利于图标融入界面设计,创造亲和的表现力。 旧 新 按照上面的思路和方法， 在项目确定后，可以更完整的实施， 设计方案可以继续优化和筛选。 二、知道掌门人 页面特点：繁星点缀。 通过优化 解决信息传递混乱的局面。 创造愉悦宽松的浏览空间。 旧 1.淡化了右侧的交互兴趣，让该模块失去了头条的功能。 1.绿色取色与图标改版的取色趋势一致——取暖。 2.交互更明确，激活用户对信息的切换浏览。 新 1.突出栏目， 而非单个标注。 2.突出知识信息，淡化框框线线。 1.色彩取向偏暖，让阅读更加轻松愉悦。 2.信息更清晰突显，让信息有层次的进入视线。 知道掌门人模板; 知道掌门人模板旧 新 知道掌门人模板旧