百知道視覺規(guī)劃及一期提案PPT課件

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

2、中去，方便修正與升級(jí)。 從產(chǎn)品角度，規(guī)范和升級(jí)排版樣式。第5頁/共36頁E.專題體系 沒有很好的體現(xiàn)用戶瀏覽心理。 沒有形成品牌化的視覺風(fēng)格 欄目模板有待統(tǒng)一規(guī)范（可擴(kuò)展易更新）。第6頁/共36頁2百度知道視覺發(fā)展趨勢(shì)規(guī)范化升級(jí)道路第7頁/共36頁A. Web產(chǎn)品視覺趨勢(shì) 規(guī)范化迭代的視覺升級(jí) 增強(qiáng)品牌對(duì)用戶的影響 視覺為品牌服務(wù) 視覺為引導(dǎo)信息服務(wù) 視覺為功能服務(wù)第8頁/共36頁B.知道產(chǎn)品的操作方式第一步色彩體系圖標(biāo)體系樣式體系排版體系專題體系產(chǎn)品現(xiàn)狀第9頁/共36頁B.知道產(chǎn)品的操作方式第一步色彩體系圖標(biāo)體系樣式體系排版體系專題體系分步進(jìn)行個(gè)體系的視覺優(yōu)化（基于現(xiàn)有的設(shè)計(jì)）統(tǒng)一 可操作

3、可延展 可升級(jí)輸出優(yōu)化設(shè)計(jì)稿 和 細(xì)分規(guī)范 （不是改版）第10頁/共36頁B.知道產(chǎn)品的操作方式第一步第二步色彩體系圖標(biāo)體系樣式體系排版體系專題體系第三步第四步分版本 階段升級(jí)視覺系統(tǒng) 為產(chǎn)品創(chuàng)新提供可能第11頁/共36頁3百度知道視覺細(xì)分思路草案色彩體系圖標(biāo)體系樣式體系排版體系專題體系第12頁/共36頁一、圖標(biāo)體系圖標(biāo)體系的第一步，是基于先在的圖標(biāo)，進(jìn)行微調(diào)，使之統(tǒng)一規(guī)范。最終效果，將是無形中的一種設(shè)計(jì)升級(jí)，不會(huì)帶來突變效果。第13頁/共36頁A.知道圖標(biāo)分類 欄目符號(hào) 點(diǎn)綴提示 榮譽(yù)等級(jí) 系統(tǒng)功能第14頁/共36頁B.設(shè)計(jì)嘗試嘗試圖標(biāo)來自：知道首頁問題頁面第15頁/共36頁B.知道圖標(biāo)嘗試

4、圖標(biāo)來自：1.保留舊版的符號(hào)和基本的色彩體系。2.統(tǒng)一圖標(biāo)尺寸、色彩體系、符號(hào)體系、設(shè)計(jì)制作方法。第16頁/共36頁C. 設(shè)計(jì)說明1.規(guī)范取色范圍：圖標(biāo)色彩的統(tǒng)一，為設(shè)計(jì)成套的圖標(biāo)提供視覺前提。2.色彩選擇取向暖色包括藍(lán)色和綠色在內(nèi)的冷色系色彩，在應(yīng)用的時(shí)候都會(huì)適當(dāng)增加暖色傾向，創(chuàng)造愉悅的氛圍。第17頁/共36頁C. 設(shè)計(jì)說明2.細(xì)化設(shè)計(jì)方案，明確圖標(biāo)的UI取向1）45度高光，呈現(xiàn)柔和的凸起2）統(tǒng)一內(nèi)發(fā)光3）反白符號(hào)4）統(tǒng)一圖標(biāo)的大?。ㄡ槍?duì)不同類別的圖標(biāo)進(jìn)行大小規(guī)范統(tǒng)一）5）增加陰影效果，創(chuàng)造頁面層次。舊新第18頁/共36頁C. 設(shè)計(jì)說明2.細(xì)化設(shè)計(jì)方案，明確圖標(biāo)的UI取向1）柔和造型處理，升

5、級(jí)圖標(biāo)親和力，更有利于圖標(biāo)融入界面設(shè)計(jì),創(chuàng)造親和的表現(xiàn)力。舊新第19頁/共36頁按照上面的思路和方法，在項(xiàng)目確定后，可以更完整的實(shí)施，設(shè)計(jì)方案可以繼續(xù)優(yōu)化和篩選。第20頁/共36頁二、知道掌門人頁面特點(diǎn)：繁星點(diǎn)綴。通過優(yōu)化解決信息傳遞混亂的局面。創(chuàng)造愉悅寬松的瀏覽空間。第21頁/共36頁舊1.淡化了右側(cè)的交互興趣，讓該模塊失去了頭條的功能。第22頁/共36頁1.綠色取色與圖標(biāo)改版的取色趨勢(shì)一致取暖。2.交互更明確，激活用戶對(duì)信息的切換瀏覽。新第23頁/共36頁第24頁/共36頁1.突出欄目，而非單個(gè)標(biāo)注。2.突出知識(shí)信息，淡化框框線線。第25頁/共36頁1.色彩取向偏暖，讓閱讀更加輕松愉悅。2.信息更清晰突顯，讓信息有層次的進(jìn)入視線。知道掌門人模板;第26頁/共36頁知道掌門人模板舊第27頁/共36頁新第28頁/共36頁知道掌門人模板舊第29頁/共36頁新第30頁/共36頁知道掌門人模板舊第31頁/共36頁新第32頁/共36頁1.基于原有的設(shè)計(jì)，信息元素位置不變，只對(duì)模板的背景顏色、文字