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