Web2.0體驗(yàn)式網(wǎng)站設(shè)計的41個關(guān)鍵點(diǎn)
Web2.0時代,體驗(yàn)式營銷,體驗(yàn)式網(wǎng)站設(shè)計開始走向主流,那么體驗(yàn)式網(wǎng)站到底意味著什么?具體表現(xiàn)在那些地方?周末,根據(jù)建站的一點(diǎn)經(jīng)驗(yàn)和觀察,也參照了網(wǎng)友的一些建議,總結(jié)了體驗(yàn)式網(wǎng)站設(shè)計的四個方面,41個關(guān)鍵體驗(yàn)點(diǎn),將其梳理概況,但仍是較為粗淺,歡迎補(bǔ)充建議。
一、體驗(yàn)式網(wǎng)站設(shè)計的四個方面
1、視覺體驗(yàn):呈現(xiàn)給用戶視覺上的體驗(yàn),重在UI設(shè)計,強(qiáng)調(diào)舒適性。
2、瀏覽體驗(yàn):呈現(xiàn)給用戶欄目和內(nèi)容的體驗(yàn),重在合理規(guī)劃,強(qiáng)調(diào)協(xié)調(diào)性。
3、信任體驗(yàn):呈現(xiàn)給用戶的信任體驗(yàn),重在細(xì)節(jié)斟酌,強(qiáng)調(diào)穩(wěn)定性。
4、互動體驗(yàn):呈現(xiàn)給用戶操作上的體驗(yàn),重在路徑設(shè)計,強(qiáng)調(diào)易用性。
二、視覺體驗(yàn)的11個關(guān)鍵體驗(yàn)點(diǎn)
視覺體驗(yàn):呈現(xiàn)給用戶視覺上的體驗(yàn),重在UI設(shè)計,強(qiáng)調(diào)舒適性。
1. 整體風(fēng)格:這是網(wǎng)站給用戶呈現(xiàn)的第一印象,主要體現(xiàn)在兩方面,一是網(wǎng)站質(zhì)量的權(quán)衡,網(wǎng)民第一次看到網(wǎng)站后,首先會根據(jù)感覺對網(wǎng)站有個上、中、下額評判,二是網(wǎng)站類型的歸屬,例如是資訊型,形象型等。因而網(wǎng)站在設(shè)計之前,必須明確目標(biāo)客戶群體,并針對目標(biāo)客戶的審美喜好,進(jìn)行分析,網(wǎng)站設(shè)計要符合目標(biāo)客戶的審美預(yù)期和類型歸屬。
2. 網(wǎng)站LOGO:LOGO的設(shè)計水平直接體現(xiàn)了站長的審美水平。并且logo是網(wǎng)站整個風(fēng)格的主導(dǎo),也是網(wǎng)站對外傳播的形象標(biāo)示,務(wù)必要仔細(xì)斟酌,不僅要簡潔得體,還要符合網(wǎng)站的定位和目標(biāo)。
3. 頁面布局:重點(diǎn)突出,主次分明,圖文并茂,聲畫全面。網(wǎng)站的有效空間是有限的,網(wǎng)站的第一屏畫面至關(guān)重要,頁面布局要與網(wǎng)站的營銷目標(biāo)相結(jié)合,將最能吸引用戶的內(nèi)容,通過合適的表現(xiàn)形式,放置在最重要的位置。
4. 頁面色彩:六個務(wù)必:網(wǎng)站務(wù)必要有個主題色,務(wù)必注意冷暖色調(diào)的搭配,務(wù)必注意主色調(diào)、輔助色的使用數(shù)量,務(wù)必保持網(wǎng)站整體形象相統(tǒng)一,務(wù)必注意漸變色的使用,務(wù)必恰當(dāng)搭配色彩的明度和亮度。
5. 頁面大小:最好將網(wǎng)站設(shè)置成為自適應(yīng)的頁面,如果無法修正,最好調(diào)整為1024*768,照顧到800*600用戶,頁面主要內(nèi)容可以偏左設(shè)置。此外,還有一些異性的網(wǎng)站,務(wù)必要考慮到核心用戶群的使用習(xí)慣,可以主要從年齡上來判斷,30歲以上用戶,還是800*600居多。
6. 動畫效果:首先注意動畫的放置位置,其次是呈現(xiàn)方式,再次是加載速度,最后也是最關(guān)鍵的是內(nèi)容的表現(xiàn)形式。動畫效果會在第一時間吸引用戶的關(guān)注,但關(guān)注不是目的,要讓用戶有興趣接受動畫所傳達(dá)的內(nèi)容。在動畫表現(xiàn)形式設(shè)計時,還要注意與主畫面相協(xié)調(diào),動畫效果節(jié)奏適中,不干擾主畫面瀏覽。
8. 圖片展示:首要的還是圖片欄目的頁面位置,要與整體網(wǎng)站比例協(xié)調(diào),符合一般用戶的瀏覽習(xí)慣;其次是圖片的展示形式,現(xiàn)在有很多flash的圖片代碼,還有l(wèi)ightbox的js也是不錯的選擇,再次是圖片內(nèi)容要清晰、不變形,圖片選擇上也要符合網(wǎng)站的總體風(fēng)格,不要太突兀。
9. 圖標(biāo)使用:首要考慮與頁面整體風(fēng)格統(tǒng)一,其次是簡潔、明了、易懂、準(zhǔn)確,再次可以嘗試使用一些3D效果圖標(biāo)。
10. 廣告位的設(shè)計:廣告設(shè)計最關(guān)鍵是要符合用戶對網(wǎng)站廣告的預(yù)期,不要讓用戶對廣告產(chǎn)生反感。有很多是網(wǎng)民早已認(rèn)可的廣告位置和形式,例如頁面上方的banner條,頁面兩邊的對聯(lián)形式,頁面右下方的文字廣告等,這些位置都是網(wǎng)民們默認(rèn)的廣告位,千萬不要沖擊網(wǎng)民的瀏覽習(xí)慣,避免干擾視線,除非你的廣告創(chuàng)意絕對吸引人,否則結(jié)果往往是立刻關(guān)閉廣告和網(wǎng)站。
11. 背景音樂:除非是活動推廣或者是形象推廣類主題網(wǎng)站,搞點(diǎn)刺激性的音樂提提神,否則千萬不要設(shè)置背景音樂,一個字,煩!就算設(shè)置背景音樂,最好將開關(guān)按鈕及音量控制放在顯要位置,免的網(wǎng)民因?yàn)檎也坏娇刂瓢粹o而立刻關(guān)掉頁面。
?
三、瀏覽體驗(yàn)的八個關(guān)鍵體驗(yàn)點(diǎn)
瀏覽體驗(yàn):呈現(xiàn)給用戶瀏覽上的體驗(yàn),強(qiáng)調(diào)吸引性。
1. 頁面導(dǎo)航:網(wǎng)站導(dǎo)航如同樓房的地基,是整個網(wǎng)站基礎(chǔ)和框架,一切內(nèi)容和服務(wù)都是從導(dǎo)航中延伸出去。頁面導(dǎo)航的設(shè)計分為兩個層次,一是形式層:體現(xiàn)在導(dǎo)航位置、表現(xiàn)形式(文字、圖片、flash等)等方面,二是內(nèi)容層,頁面導(dǎo)航也是對整個網(wǎng)站內(nèi)容框架的分類和高度概括。形式層的設(shè)計,建議參照一下韓國網(wǎng)站的設(shè)計風(fēng)格,動感、簡潔、清晰。至于內(nèi)容層,就因站而異了,分類條理最關(guān)鍵。但欄目名稱盡量簡短,欄目層次也不宜過多,兩層比較合適,但也要以內(nèi)容為中心。
1.?????? 頁面速度: web2.0,網(wǎng)站中增加了越來越多的視頻、動畫元素,對網(wǎng)站速度的要求也越發(fā)苛刻?;叵胍幌拢@么多視頻分享網(wǎng)站中,為什么很多人選擇優(yōu)酷?就一個速度。此外,大一點(diǎn)的網(wǎng)站再考慮一下南北互通,或者教育網(wǎng)的對接問題,此外選擇一家穩(wěn)定的服務(wù)器托管商也至關(guān)重要。
2.?????? 頁面容量:主要指首頁的頁面容量,除非是資訊類網(wǎng)站,否則網(wǎng)站首頁內(nèi)容最好不要超過兩屏,最好不要讓用戶再滾動鼠標(biāo)就可以瀏覽到整個頁面。再就是頁面設(shè)計要考慮到文字和圖片的搭配,還有不同字號、字體、顏色的搭配,還有網(wǎng)站留白的設(shè)計,以免頁面造成視覺抵制,心理學(xué)家做過實(shí)驗(yàn),人眼每秒攝入的有效字符最多只有20個,要是頁面全是細(xì)密的文字,效果就可想而知了。
3.?????? 頁面結(jié)構(gòu) 結(jié)構(gòu)就是放置內(nèi)容的框架,網(wǎng)站的頁面結(jié)構(gòu)其實(shí)是有章可循的,尤其是現(xiàn)在大家見的網(wǎng)站越來越多,自然也形成一些列默認(rèn)的模式。簡單分網(wǎng)站主要也包括“同”字型、“司”字型、“三”字型、“F”型等頁面布局,具體隨后會撰文詳述,這里要強(qiáng)調(diào)的是頁面結(jié)構(gòu)的創(chuàng)新也要基于一定的規(guī)律,千萬不要打破用戶的瀏覽預(yù)期。
4.?????? 內(nèi)容安排 首先是突出重點(diǎn)內(nèi)容,大標(biāo)題,大圖片塑造視覺沖擊,這也是借用報紙的操作手法,其次是內(nèi)容協(xié)調(diào),每一個欄目應(yīng)確保足夠的信息量,避免欄目無內(nèi)容情況出現(xiàn);再次是內(nèi)容形式,兼顧視頻、圖片、文字的比例和頁面協(xié)調(diào)。
5.?????? 內(nèi)容更新主要包括內(nèi)容來源、更新頻率、更新數(shù)量、內(nèi)容質(zhì)量三個方面。Web2.0網(wǎng)站更多強(qiáng)調(diào)如何調(diào)動用戶的積極性,內(nèi)容更新已經(jīng)不僅僅是對編輯的考量,也是對網(wǎng)站用戶價值的衡量,對于內(nèi)容質(zhì)量,主要是從原創(chuàng)、轉(zhuǎn)載、內(nèi)容本身價值等方面權(quán)衡。
6.?????? 內(nèi)容形式 現(xiàn)在有個立體化新聞的概念,視頻、圖片、文字、評論都在一個頁面中展示,而且再加上網(wǎng)民評論的即時更新,表現(xiàn)形式更生動。此外,對于文字部分,字體大小最好設(shè)置可調(diào)選項(xiàng),對重點(diǎn)內(nèi)容進(jìn)行標(biāo)注,對關(guān)鍵詞設(shè)置鏈接(seo),如果沒有廣告的考慮,最好不要設(shè)置多頁瀏覽,很影響閱讀體驗(yàn)。
7.?????? 內(nèi)容呈現(xiàn)方式:更多的是細(xì)節(jié)的內(nèi)容,包括新文章的標(biāo)記、文章導(dǎo)讀、相關(guān)內(nèi)容的推薦、還有網(wǎng)友推薦、打印頁面、E-MAIL發(fā)送給好友、復(fù)制網(wǎng)址等,現(xiàn)在web2.0流行的DIG功能,加入些鮮活的互動元素。
8.????? 路徑記錄:記錄用戶的瀏覽路徑,方便用戶隨時返回和查找,此外對一些重點(diǎn)欄目和頁面可以設(shè)置快速鏈接或者設(shè)置頁面底部導(dǎo)航,為用戶提供明確的快速入口。
?
二、信任體驗(yàn)的十二個關(guān)鍵體驗(yàn)點(diǎn)
信任體驗(yàn):呈現(xiàn)給用戶的信任體驗(yàn),重在細(xì)節(jié)斟酌,強(qiáng)調(diào)穩(wěn)定性。
1、友情鏈接:對于新興網(wǎng)站而言,用戶對網(wǎng)站信任的判斷不僅建立在對網(wǎng)站設(shè)計的和功能體驗(yàn)的基礎(chǔ)上,而且還有一個對同類或者其他相關(guān)網(wǎng)站的評估上。友情鏈接的價值不僅在于SEO上,也是一個網(wǎng)站用戶定位的重要體現(xiàn),如果網(wǎng)站鏈接的都是不知名的小網(wǎng)站,用戶對它的評級也不會太高。首頁友情鏈接的設(shè)置不宜過多,更多的鏈接可以放置在一個單獨(dú)的友情連接頁面中,要特別注重友情連接的質(zhì)量,哪怕是做些單向鏈接,也要顯示自己的實(shí)力。
2、底部信息:網(wǎng)站底部信息內(nèi)容是網(wǎng)站中每個頁面都共同的內(nèi)容,底部信息為網(wǎng)民提供了很多建立信任體驗(yàn)的內(nèi)容,例如網(wǎng)站的建立時間、是否備案、是否經(jīng)營性網(wǎng)站、是否有網(wǎng)警標(biāo)示、隱私聲明、網(wǎng)站的歸屬關(guān)系(如:xx旗下的網(wǎng)站)這部分雖然是細(xì)節(jié)的內(nèi)容,但又是最為標(biāo)準(zhǔn)化和普遍的內(nèi)容,最好留心設(shè)計。
3、關(guān)于我們:這是一個用戶了解網(wǎng)站背景的最直接途徑,對很多有趣的web2.0網(wǎng)站,對于很多喜歡刨根問底的網(wǎng)民,關(guān)于我們還是很重要的一個欄目,因?yàn)檫@是網(wǎng)站站長必須的一個原創(chuàng)內(nèi)容,對關(guān)于我們欄目和內(nèi)容的設(shè)計和安排,往往會體現(xiàn)了站長的做事態(tài)度和風(fēng)格。
4、聯(lián)系方式:并不是有事找網(wǎng)站的時候才會關(guān)注網(wǎng)站的聯(lián)系方式,一般情況下,聯(lián)系方式在網(wǎng)站中出現(xiàn)的頻率也是網(wǎng)站自信程度的一種側(cè)面體現(xiàn)。聯(lián)系方式不一定非要是詳細(xì)的電話傳真,通訊地址,哪怕一個郵箱,或者是一個聯(lián)系人的姓名。對于初創(chuàng)網(wǎng)站而言,翔實(shí)或者高曝光率的聯(lián)系方式,比較容易給網(wǎng)民建立踏實(shí)、信任的額感覺,總之放心、負(fù)責(zé)、能找到人。如果有實(shí)力,整個400電話也成,現(xiàn)在400電話已經(jīng)是白菜價了,但公信力還不錯,而且方便易記。
5、幫助中心:對于web2.0新興網(wǎng)站,尤其是功能型網(wǎng)站而言,最好是有一個翔實(shí)的幫助中心,或者FAQ欄目,千萬別相當(dāng)然的認(rèn)為網(wǎng)民對新東西一看就會,新東西總會有出問題的時候,再加上國內(nèi)網(wǎng)民的背景和層次差距較大,幫助中心還是必須的。此外,幫助中心的功能和內(nèi)容豐富程度也是網(wǎng)站客戶服務(wù)意識的一種體現(xiàn),值得重視。
6、網(wǎng)站備案:最基本也是必須的一道程序,說啥先把網(wǎng)站備案搞定,至少要確認(rèn)一下網(wǎng)站的合法地位,如果有條件和需要,最好是申請一個B字頭的經(jīng)營性網(wǎng)站備案,此外如果涉及到視頻、新聞還要到相關(guān)部門申請一下其他備案。備案這東西,看似小事,但關(guān)鍵時刻對網(wǎng)站就會有致命的影響,別的不說,看看這兩個月56.com和vodone.com的差別就知道了。
7、內(nèi)容格式:內(nèi)容的規(guī)范程度也是網(wǎng)站建立信任體驗(yàn)的重要方面,主要體現(xiàn)在資訊類內(nèi)容標(biāo)準(zhǔn)化展現(xiàn)上。一方面每條信息是否包含了來源、作者、編輯、發(fā)布時間、還有點(diǎn)擊量和評論。全面的輔助信息是網(wǎng)站質(zhì)量的主要參照,因?yàn)楝F(xiàn)在能把這幾點(diǎn)完全列出來的網(wǎng)站越來越少了,對于點(diǎn)擊量也可以都設(shè)置一定的初始值,但最好還是帶著。另一方面就是個性化細(xì)節(jié),例如設(shè)置頁面顏色、設(shè)置字體大小、點(diǎn)擊直接發(fā)送到郵箱,復(fù)制頁面地址等。
8、內(nèi)容訂閱:無論是用feedsky、rss、還是傳統(tǒng)的郵件新聞列表,內(nèi)容訂閱的設(shè)置不僅僅是要提高用戶的黏度,推動用戶再次訪問,而且也是大型網(wǎng)站和正規(guī)網(wǎng)站的重要標(biāo)示,只有那些有實(shí)力和細(xì)心的網(wǎng)站才會提供定期的資訊服務(wù),其實(shí)這部分在功能上已經(jīng)很完善了,網(wǎng)絡(luò)中也有很多工具和服務(wù)商,只需站長每天(每周)梳理一下重要資訊即可。此外這也是盤活注冊用戶的重要一環(huán)。
9、網(wǎng)站地圖:對web2.0的新站,無論網(wǎng)站規(guī)模大小,一定要做個網(wǎng)站地圖,一方面搜索引擎容易抓取到網(wǎng)站信息,而且網(wǎng)民使用起來也會很快了解到整站架構(gòu),又是細(xì)節(jié),但很重要。
10、加入收藏:加入收藏和設(shè)為首頁是傳統(tǒng)網(wǎng)站設(shè)計中必須的環(huán)節(jié),現(xiàn)在而言設(shè)為首頁的意義幾乎沒有了,但加入收藏還相當(dāng)重要的,一般是在網(wǎng)站的右上方,最好將加入收藏的位置放在最前面,用醒目的顏色標(biāo)注。
11、用戶登錄:這也算是互動體驗(yàn)一部分,用戶導(dǎo)向是web2.0設(shè)計的一個核心理念,只有用戶登陸才能享有更多的個性化服務(wù),用戶登錄就無處不在,隨處可見,而且還要設(shè)計的方便合理,最好不要打開新的登陸頁面,具體情況各異。
12、論壇人氣:無論網(wǎng)站做的再花哨,如果有論壇這個欄目,打開論壇一看,沒幾個在線用戶,沒幾條熱點(diǎn)內(nèi)容,很容易直接就把網(wǎng)站否定掉了,因此,論壇千萬要注意,要么不做,開設(shè)了就得注意人氣的經(jīng)驗(yàn),哪怕自己每天狂灌水,也得先把網(wǎng)站人氣拖起來。
?
?
三、互動體驗(yàn)的十個關(guān)鍵體驗(yàn)點(diǎn)
互動體驗(yàn):呈現(xiàn)給用戶操作上的體驗(yàn),重在路徑設(shè)計,強(qiáng)調(diào)易用性。
1. 會員申請:會員申請務(wù)必要貫穿在網(wǎng)站的每個頁面,將隨機(jī)性用戶轉(zhuǎn)變成注冊用戶是提高網(wǎng)站流量和用戶黏度的重要一環(huán),會員申請的按鈕或者位置最好設(shè)計的醒目一些。此外,會員功能的核心是權(quán)限控制,網(wǎng)站必然要有一些只有注冊用戶或者是高級用戶才能瀏覽到的內(nèi)容,但還要保證展現(xiàn)給非注冊用戶的信息也具有一定的吸引力,否則,網(wǎng)民怎么會有動力去注冊呢?捫心自問,為什么值得注冊?用什么吸引注冊用戶?用什么穩(wěn)定注冊用戶的定期訪問?
2 會員注冊:web2.0網(wǎng)站最好設(shè)計多級注冊方式,只填寫注冊名、郵箱、密碼等就可以完成第一層次注冊,讓后再進(jìn)一步吸引用戶補(bǔ)充內(nèi)容,第一層主次,務(wù)必要流程清晰、簡潔,為用戶節(jié)省時間。其實(shí)更為關(guān)鍵的還在于后面,如何吸引用戶補(bǔ)充全面的信息?這里就有一個web2.0的理念,“你分享出去的內(nèi)容越多,得到的權(quán)利和尊重也會越多”,要讓網(wǎng)民明確他們補(bǔ)充信息的價值在哪?此外,還要注意提示用戶信息的完整程度。
3. 表單填寫:表單填寫有多種方式,但最好不要將所有項(xiàng)目分為兩個階段,必填項(xiàng)在第一頁,或者提供明顯的標(biāo)示,千萬不要將所有項(xiàng)目全部列出來,用戶一定會嚇壞的。Web2.0就要人性化一點(diǎn),考慮一下用戶的接受程度,簡單一點(diǎn)還是沒錯的。提交成功后,感謝提示頁面務(wù)必要精心設(shè)計,尤為注意應(yīng)該將注冊后的用戶引向何處?是回首頁?還是個人界面?還是前一個瀏覽頁面?感謝頁面在內(nèi)容和形式上最好設(shè)計的有個性一點(diǎn)。
4. 點(diǎn)擊提示:點(diǎn)擊瀏覽過的信息顏色需要顯示為不同的顏色,以區(qū)分于未閱讀內(nèi)容,避免重復(fù)閱讀。對于圖片,最好設(shè)置圖片標(biāo)注,鼠標(biāo)滾動到圖片時能顯示圖片標(biāo)題。
5. 錯誤提示:設(shè)置錯誤提示頁面,對錯誤頁面以合適的引導(dǎo)。無論是什么原因,網(wǎng)民只要在網(wǎng)站上遇到了錯誤頁面肯定會非常不爽,甚至?xí)苯雨P(guān)閉網(wǎng)站,要充分考慮到此時用戶的訪問心理,設(shè)置一點(diǎn)真誠的解釋說明,最好將網(wǎng)民重新引向網(wǎng)站,或者可以設(shè)置個報錯的反饋,細(xì)心處之。
6. 在線問答:在線問答有太多中形式,從用戶的使用預(yù)期出發(fā),既然是在線問答,消費(fèi)者希望得到最快的答復(fù),但現(xiàn)在的情況是,往往網(wǎng)站提供了很多方式的問答渠道,但往往沒有人回應(yīng),畢竟工作人員不能24小時守候啊,建議搞個小I機(jī)器人訓(xùn)練一下,頂個美女客服了。還有一種誤區(qū),認(rèn)為在線問答就是解答問題,其實(shí)還有一個重要作用是收集信息,還要設(shè)置在線問答流程和話術(shù)時,務(wù)必要注意到如何了解更多的客戶信息,或者使用體會以便于后期調(diào)整,還要定期對在線問答出現(xiàn)的問題進(jìn)行匯總分析。
7. 在線搜索:首先是搜索條位置,最常見的位置是在右上方,資訊類網(wǎng)站一般中上方顯要位置;其次是搜索分類,例如按作者,按標(biāo)題等設(shè)置最好設(shè)計為下拉菜單,默認(rèn)為全文檢索;再次是搜索結(jié)果的呈現(xiàn)方式。呈現(xiàn)方式有很多細(xì)節(jié)的地方,包括排列的標(biāo)準(zhǔn),方式,關(guān)鍵詞顏色區(qū)分,出現(xiàn)的數(shù)量。此外還要注意高級檢索和檢索選項(xiàng)的設(shè)計。
8. 頁面效果:web2.0在技術(shù)層的一大改進(jìn)就是提供了很多又酷又炫的新技術(shù),尤其是在頁面層的應(yīng)用最為明顯,例如ajex,lightbox js等,對建議站長多關(guān)注一下流行的java代碼,選擇一些合適的潮流型技術(shù)應(yīng)用一下,新、奇、炫,與時俱進(jìn)??!
9. 新開窗口:現(xiàn)在用maxthon、firefox等的多線程瀏覽器的網(wǎng)民越來越多,建議web2.0網(wǎng)站的設(shè)計最好多采用,新窗口打開,方便用戶返回和查找。
?
10. 路徑設(shè)計:說到體驗(yàn),最直接的就是用戶在網(wǎng)站上產(chǎn)生的有效點(diǎn)擊,每一次點(diǎn)擊也意味著一個新體驗(yàn)的開始,而在眾多點(diǎn)擊之間,路徑的設(shè)計和記錄也體現(xiàn)了web2.0個性化服務(wù)的精神。每個網(wǎng)民的訪問習(xí)慣和瀏覽習(xí)慣都有所不同,第一要設(shè)計最直接有效的瀏覽路徑;第二要記錄網(wǎng)民的瀏覽路徑,便于隨時返回;第三,要試圖尋找與網(wǎng)民瀏覽路徑的匹配,這一點(diǎn)集中可以體現(xiàn)在亞馬遜的圖書瀏覽和購買流程上,大家自己來關(guān)注吧。