我們可以一起來看一下現(xiàn)在主流問答類網(wǎng)站的首屏截圖。雖然屬于不同公司的產(chǎn)品,但從首屏視覺上面來說基本都是:導(dǎo)航+分類+輪播圖的大布局,只有基本的排版差異。用戶很難從中提取差異性與品牌感。相比之下新版的百度知道由于布局的大變化,使其從中脫穎而出。
那么與之舊版相比,到底是什么讓新版看上去不一樣了呢?這些細(xì)節(jié)點(diǎn)就是視覺設(shè)計(jì)師在為產(chǎn)品重新定位時(shí)需要考慮。
1.合理運(yùn)用品牌色 ?加深用戶印象
經(jīng)常使用百度知道的用戶應(yīng)該知道,綠色是百度知道的品牌色。品牌色在產(chǎn)品設(shè)計(jì)中是非常重要的一個(gè)部分,用戶對(duì)顏色的記憶時(shí)間是遠(yuǎn)高于文字內(nèi)容的。
比如,一說到facebook,腦海中第一個(gè)出現(xiàn)的不是具象的形象,而是facebook標(biāo)準(zhǔn)的臉書藍(lán)。而說到y(tǒng)outube則是那經(jīng)典的黑紅搭配。
新版的界面中品牌色的應(yīng)用變得更加考究了,除了大導(dǎo)航上面的綠底色以外。在按鈕與文字等細(xì)節(jié)地方也都融入了品牌顏色。相比之下,舊版知道的品牌色主要集中在首屏的背景色,這樣大面積容易讓用戶失去聚焦點(diǎn),反而不易于記憶。視覺設(shè)計(jì)師也可以注意到這點(diǎn):在顏色的運(yùn)用上,細(xì)節(jié)的處理遠(yuǎn)比大色塊要顯得精致許多。
2.精簡(jiǎn)信息顯示 ?提示可依賴性
一個(gè)普通用戶在每天會(huì)看63個(gè)頁(yè)面,每個(gè)頁(yè)面除去廣告與相關(guān)的推送,有效信息其實(shí)少的可憐。想想用戶在搜索一個(gè)問題的時(shí)候,打開頁(yè)面卻看到的都是與之無關(guān)的無效信息。用戶會(huì)怎么想呢?讓我們來分析一下一個(gè)普通的知道用戶在頁(yè)面上的操作可能:
a.帶有明確問題進(jìn)入頁(yè)面(這類用戶帶有明確的目的,主要使用搜索功能,以及相關(guān)答案的推送)
b.無明確目的,純?yōu)g覽(這類用戶以信息獲取為主,頁(yè)面停留時(shí)間長(zhǎng),多注重?zé)衢T信息和優(yōu)質(zhì)內(nèi)容)
由此可見,實(shí)際上首頁(yè)的核心功能有主要的兩點(diǎn):搜索功能、優(yōu)質(zhì)內(nèi)容推送。
新版的知道在內(nèi)容的布局排版上更直觀的給出了用戶想要的內(nèi)容。弱化了問題和分類的比重,減少了用戶非必要的操作。更多的版面用來突出有效的信息,如:知道日?qǐng)?bào)、真相問答機(jī)、大數(shù)據(jù)等。用戶一進(jìn)來,看到得都是優(yōu)質(zhì)信息的推送。既方便了用戶,又提升了品牌專業(yè)度,簡(jiǎn)直皆大歡喜。
卡片化大趨勢(shì) ?細(xì)節(jié)增加亮點(diǎn)
移動(dòng)互聯(lián)網(wǎng)平臺(tái)的快速發(fā)展加速了pc平臺(tái)與移動(dòng)平臺(tái)的互通性??ㄆ男畔⒊尸F(xiàn)方式將是未來網(wǎng)頁(yè)設(shè)計(jì)的大趨勢(shì)。
信息卡片化,顧名思義就是將信息做分類處理。同類信息就好像放在同一片卡片上一樣,方便用戶閱讀。并且除了提高易讀性以外,卡片化的另一大好處就是方便多平臺(tái)的適應(yīng)??梢宰尞a(chǎn)品在多端保持高度一致的視覺效果,增強(qiáng)品牌沿用性,幫助用戶在多平臺(tái)無縫過度。
其中新版很明顯的將統(tǒng)一分類聚合到了一起,最為顯著的是用戶信息部分與知道專家部分。
在新版本中與用戶相關(guān)的信息比重更多了,其中還融入了用戶品牌的概念:芝麻、芝麻團(tuán)、芝麻將。還有用戶排行榜。首頁(yè)就可以清晰的呈現(xiàn)用戶的組成結(jié)構(gòu),并且很容易就讓用戶與知道產(chǎn)生聯(lián)系。增加用戶粘性。
同時(shí),在這次改版中,細(xì)節(jié)的設(shè)計(jì)也是一大亮點(diǎn)。以往,知道作為一個(gè)功能為主的互聯(lián)網(wǎng)產(chǎn)品,免不了以內(nèi)容為主,頁(yè)面整體偏向嚴(yán)謹(jǐn)?shù)娘L(fēng)格。而這次改版在細(xì)節(jié)上面則變的更為人性化。
比如,在頭圖上的知道問答卡片上有樹苗的配圖作為點(diǎn)綴,知道日?qǐng)?bào)的推送內(nèi)容也采取了圖文混排的方式讓信息看上去不那么生硬,還有大家在答的動(dòng)態(tài)時(shí)間軸,以及一些推廣位樣式上的細(xì)節(jié)處理,都讓頁(yè)面變得更為有趣。既然想讓用戶長(zhǎng)時(shí)間的停留,那么何不為用戶營(yíng)造一個(gè)愉悅的環(huán)境呢?
除了視覺效果上注重細(xì)節(jié)之外,在頁(yè)面的動(dòng)態(tài)效果上也融入了一些有意思的細(xì)節(jié)。比如在用戶模塊中,“芝麻”“芝麻團(tuán)”“芝麻將”三個(gè)分類卡片在鼠標(biāo)hover時(shí),會(huì)激活一個(gè)翻轉(zhuǎn)的效果,用來顯示更多的相關(guān)內(nèi)容。這樣做的好處是節(jié)省了內(nèi)容所占的版面,讓設(shè)計(jì)師有更大的發(fā)揮空間。并且,讓頁(yè)面融入了有趣的動(dòng)畫效果。值得一提的是,隨著HTML5的不斷發(fā)展,動(dòng)效設(shè)計(jì)也被廣泛的應(yīng)用在網(wǎng)頁(yè)上,這將是未來網(wǎng)頁(yè)設(shè)計(jì)的一大趨勢(shì),網(wǎng)頁(yè)設(shè)計(jì)師們可以對(duì)此多進(jìn)行探索和嘗試。
通過這次改版可以看出,新版除了著力于樹立自身品牌形象之外,也把更多精力放在了推廣用戶品牌上。為用戶擁有自己的知道圈子,讓用戶在使用知道產(chǎn)品的時(shí)候又強(qiáng)烈的歸屬感與參與度。相信在優(yōu)化用戶體驗(yàn)的這條道路上,百度知道會(huì)越做越好,真正的做到以內(nèi)容為基礎(chǔ),從用戶體驗(yàn)出發(fā),打造更好的知識(shí)交流平臺(tái)。
來源:互聯(lián)網(wǎng)