1、目錄, 產品視覺現狀評析 視覺發(fā)展趨勢及規(guī)范化道路 知道產品視覺細分思路草案 一期提案說明,1,百度知道產品視覺現狀評析,A.色彩體系, web各元素色彩使用，色彩情感上，不統(tǒng)一：冷暖混搭，產品取向不明確。 色彩在信息分層顯示上有優(yōu)化的空間。 品牌色彩沒有過于隱晦。,B.圖標體系, 未統(tǒng)一色彩范圍。 制作方法不一致，無法延展，升級。 圖標的使用不規(guī)范，造成頁面點元素過多，頁面繁星點綴。（例如知識掌門人）,C.樣式體系, 對已經形成的統(tǒng)一的樣式庫進行規(guī)范整理。 從產品角度，規(guī)范和升級樣式體系。,D.排版體系, 對各種信息總結歸納排版規(guī)范，對應到頁面的樣式中去，方便修正與升級。 從產品角度，規(guī)范和

2、升級排版樣式。,E.專題體系, 沒有很好的體現用戶瀏覽心理。 沒有形成品牌化的視覺風格 欄目模板有待統(tǒng)一規(guī)范（可擴展易更新）。,2,百度知道視覺發(fā)展趨勢 規(guī)范化升級道路,A. Web產品視覺趨勢, 規(guī)范化迭代的視覺升級 增強品牌對用戶的影響, 視覺為品牌服務 視覺為引導信息服務 視覺為功能服務,B.知道產品的操作方式,第一步,色彩 體系,圖標 體系,樣式 體系,排版 體系,專題 體系,產品現狀,B.知道產品的操作方式,第一步,色彩 體系,圖標 體系,樣式 體系,排版 體系,專題 體系,分步進行個體系的視覺優(yōu)化（基于現有的設計）,統(tǒng)一 可操作 可延展 可升級,輸出優(yōu)化設計稿 和 細分規(guī)范 （不是

3、改版）,B.知道產品的操作方式,第一步,第二步,色彩 體系,圖標 體系,樣式 體系,排版 體系,專題 體系,第三步,第四步,分版本 階段升級視覺系統(tǒng) 為產品創(chuàng)新提供可能,3,百度知道 視覺細分思路草案,色彩 體系,圖標 體系,樣式 體系,排版 體系,專題 體系,一、圖標體系,圖標體系的第一步，是基于先在的圖標，進行微調，使之統(tǒng)一規(guī)范。 最終效果，將是無形中的一種設計升級，不會帶來突變效果。,A.知道圖標分類, 欄目符號 點綴提示 榮譽等級 系統(tǒng)功能,B.設計嘗試,嘗試圖標來自： 知道首頁 問題頁面,B.知道圖標,嘗試圖標來自： 1.保留舊版的符號和基本的色彩體系。 2.統(tǒng)一圖標尺寸、色彩體系、

4、符號體系、設計制作方法。,C. 設計說明,1.規(guī)范取色范圍：圖標色彩的統(tǒng)一，為設計成套的圖標提供視覺前提。 2.色彩選擇取向暖色 包括藍色和綠色在內的冷色系色彩，在應用的時候都會適當增加暖色傾向，創(chuàng)造愉悅的氛圍。,C. 設計說明,2.細化設計方案，明確圖標的UI取向,1）45度高光，呈現柔和的凸起 2）統(tǒng)一內發(fā)光 3）反白符號 4）統(tǒng)一圖標的大小（針對不同類別的圖標進行大小規(guī)范統(tǒng)一） 5）增加陰影效果，創(chuàng)造頁面層次。,舊,新,C. 設計說明,2.細化設計方案，明確圖標的UI取向,1）柔和造型處理，升級圖標親和力，更有利于圖標融入界面設計,創(chuàng)造親和的表現力。,舊,新,按照上面的思路和方法， 在項目確定后，可以更完整的實施， 設計方案可以繼續(xù)優(yōu)化和篩選。,二、知道掌門人,頁面特點：繁星點綴。,通過優(yōu)化 解決信息傳遞混亂的局面。 創(chuàng)造愉悅寬松的瀏覽空間。,舊,1.淡化了右側的交互興趣，讓該模塊失去了頭條的功能。,1.綠色取色與圖標改版的取色趨勢一致取暖。 2.交互更明確，激活用戶對信息的切換瀏覽。,新,1.突出欄目， 而非單個標注。 2.突出知識信息，淡化框框線線。,1.色彩取向偏暖，讓閱讀更加輕松愉悅。 2.信息更清晰突顯，讓信息有層次的進入視線。,知道掌門人模板;,知道掌門人模板舊,新,知道掌門人模板舊,新,知道掌門人模板舊,新,1.基于原有的設計，