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

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

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

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

4、圖標(biāo)來(lái)自：1.保留舊版的符號(hào)和基本的色彩體系。2.統(tǒng)一圖標(biāo)尺寸、色彩體系、符號(hào)體系、設(shè)計(jì)制作方法。第16頁(yè)/共36頁(yè)C. 設(shè)計(jì)說(shuō)明1.規(guī)范取色范圍：圖標(biāo)色彩的統(tǒng)一，為設(shè)計(jì)成套的圖標(biāo)提供視覺(jué)前提。2.色彩選擇取向暖色包括藍(lán)色和綠色在內(nèi)的冷色系色彩，在應(yīng)用的時(shí)候都會(huì)適當(dāng)增加暖色傾向，創(chuàng)造愉悅的氛圍。第17頁(yè)/共36頁(yè)C. 設(shè)計(jì)說(shuō)明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)造頁(yè)面層次。舊新第18頁(yè)/共36頁(yè)C. 設(shè)計(jì)說(shuō)明2.細(xì)化設(shè)計(jì)方案，明確圖標(biāo)的UI取向1）柔和造型處理，升

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