Web2.0時代，體驗式營銷，體驗式網(wǎng)站設(shè)計開始走向主流，那么體驗式網(wǎng)站到底意味著什么？具體表現(xiàn)在那些地方？周末，根據(jù)建站的一點經(jīng)驗和觀察，也參照了網(wǎng)友的一些建議，總結(jié)了體驗式網(wǎng)站設(shè)計的四各方面，41個關(guān)鍵體驗點，將其梳理概況，但仍是較為粗淺，歡迎補(bǔ)充建議。（老早的一篇文章，但還是挺實用的）

體驗式網(wǎng)站設(shè)計的四個方面

1、視覺體驗：呈現(xiàn)給用戶視覺上的體驗，重在UI設(shè)計，強(qiáng)調(diào)舒適性。

2、瀏覽體驗：呈現(xiàn)給用戶欄目和內(nèi)容的體驗，重在合理規(guī)劃，強(qiáng)調(diào)協(xié)調(diào)性。

3、信任體驗：呈現(xiàn)給用戶的信任體驗，重在細(xì)節(jié)斟酌，強(qiáng)調(diào)穩(wěn)定性。

4、互動體驗：呈現(xiàn)給用戶操作上的體驗，重在路徑設(shè)計，強(qiáng)調(diào)易用性。

一、視覺體驗的11個關(guān)鍵體驗點

視覺體驗：呈現(xià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)，好找家設(shè)計公司，或者去toidea.com 威客一下。

3. 頁面布局：重點突出，主次分明，圖文并茂，聲畫全面。網(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é)奏適中，不干擾主畫面瀏覽。

7. 內(nèi)容形式：現(xiàn)在有個立體化新聞的概念，視頻、圖片、文字、評論都在一個頁面中展示，而且再加上網(wǎng)民評論的即時更新，表現(xiàn)形式更生動。此外，對于文字部分，字體大小好設(shè)置可調(diào)選項，對重點內(nèi)容進(jìn)行標(biāo)注，對關(guān)鍵詞設(shè)置鏈接（seo），如果沒有廣告的考慮，好不要設(shè)置多頁瀏覽，很影響閱讀體驗。

8. 圖片展示：首要的還是圖片欄目的頁面位置，要與整體網(wǎng)站比例協(xié)調(diào)，符合一般用戶的瀏覽習(xí)慣；其次是圖片的展示形式，現(xiàn)在有很多flash的圖片代碼，還有 lightbox的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)站，搞點刺激性的音樂提提神，否則千萬不要設(shè)置背景音樂，一個字，煩！就算設(shè)置背景音樂，好將開關(guān)按鈕及音量控制放在顯要位置，免的網(wǎng)民因為找不到控制按鈕而立刻關(guān)掉頁面。

二、瀏覽體驗的八個關(guān)鍵體驗點

瀏覽體驗：呈現(xià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)容為中心。

2. 頁面速度： web2.0，網(wǎng)站中增加了越來越多的視頻、動畫元素，對網(wǎng)站速度的要求也越發(fā)苛刻。回想一下，這么多視頻分享網(wǎng)站中，為什么很多人選擇優(yōu)酷？就一個速度。此外，大一點的網(wǎng)站再考慮一下南北互通，或者教育網(wǎng)的對接問題，此外選擇一家穩(wěn)定的服務(wù)器托管商也至關(guān)重要。

3. 頁面容量：主要指首頁的頁面容量，除非是資訊類網(wǎng)站，否則網(wǎng)站首頁內(nèi)容好不要超過兩屏，好不要讓用戶再滾動鼠標(biāo)就可以瀏覽到整個頁面。再就是頁面設(shè)計要考慮到文字和圖片的搭配，還有不同字號、字體、顏色的搭配，還有網(wǎng)站留白的設(shè)計，以免頁面造成視覺抵制，心理學(xué)家做過實驗，人眼每秒攝入的有效字符最多只有20個，要是頁面全是細(xì)密的文字，效果就可想而知了。

4. 頁面結(jié)構(gòu)：結(jié)構(gòu)就是放置內(nèi)容的框架，網(wǎng)站的頁面結(jié)構(gòu)其實是有章可循的，尤其是現(xiàn)在大家見的網(wǎng)站越來越多，自然也形成一些列默認(rèn)的模式。簡單分網(wǎng)站主要也包括“同”字型、“司”字型、“三”字型、“F”型等頁面布局，具體隨后會撰文詳述，這里要強(qiáng)調(diào)的是頁面結(jié)構(gòu)的創(chuàng)新也要基于一定的規(guī)律，千萬不要打破用戶的瀏覽預(yù)期。

5.內(nèi)容安排：首先是突出重點內(nèi)容，大標(biāo)題，大圖片塑造視覺沖擊，這也是借用報紙的操作手法，其次是內(nèi)容協(xié)調(diào)，每一個欄目應(yīng)確保足夠的信息量，避免欄目無內(nèi)容情況出現(xiàn)；再次是內(nèi)容形式，兼顧視頻、圖片、文字的比例和頁面協(xié)調(diào)。

6. 內(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)衡。

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. 路徑記錄：記錄用戶的瀏覽路徑，方便用戶隨時返回和查找，此外對一些重點欄目和頁面可以設(shè)置快速鏈接或者設(shè)置頁面底部導(dǎo)航，為用戶提供明確的快速入口。

三、信任體驗的十二個關(guān)鍵體驗點

信任體驗：呈現(xiàn)給用戶的信任體驗，重在細(xì)節(jié)斟酌，強(qiáng)調(diào)穩(wěn)定性。

1. 友情鏈接：對于新興網(wǎng)站而言，用戶對網(wǎng)站信任的判斷不僅建立在對網(wǎng)站設(shè)計的和功能體驗的基礎(chǔ)上，而且還有一個對同類或者其他相關(guān)網(wǎng)站的評估上。友情鏈接的價值不僅在于SEO上，也是一個網(wǎng)站用戶定位的重要體現(xiàn)，如果網(wǎng)站鏈接的都是不知名的小網(wǎng)站，用戶對它的評級也不會太高。首頁友情鏈接的設(shè)置不宜過多，更多的鏈接可以放置在一個單獨的友情連接頁面中，要特別注重友情連接的質(zhì)量，哪怕是做些單向鏈接，也要顯示自己的實力。

2. 底部信息：網(wǎng)站底部信息內(nèi)容是網(wǎng)站中每個頁面都共同的內(nèi)容，底部信息為網(wǎng)民提供了很多建立信任體驗的內(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)于我們還是很重要的一個欄目，因為這是網(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)站而言，翔實或者高曝光率的聯(lián)系方式，比較容易給網(wǎng)民建立踏實、信任的額感覺，總之放心、負(fù)責(zé)、能找到人。如果有實力，整個400電話也成，現(xiàn)在400電話已經(jīng)是白菜價了，但公信力還不錯，而且方便易記。

5. 幫助中心：對于web2.0新興網(wǎng)站，尤其是功能型網(wǎng)站而言，好是有一個翔實的幫助中心，或者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)站就會有致命的影響。

7. 內(nèi)容格式：內(nèi)容的規(guī)范程度也是網(wǎng)站建立信任體驗的重要方面，主要體現(xiàn)在資訊類內(nèi)容標(biāo)準(zhǔn)化展現(xiàn)上。一方面每條信息是否包含了來源、作者、編輯、發(fā)布時間、還有點擊量和評論。全面的輔助信息是網(wǎng)站質(zhì)量的主要參照，因為現(xiàn)在能把這幾點完全列出來的網(wǎng)站越來越少了，對于點擊量也可以都設(shè)置一定的初始值，但好還是帶著。另一方面就是個性化細(xì)節(jié)，例如設(shè)置頁面顏色、設(shè)置字體大小、點擊直接發(fā)送到郵箱，復(fù)制頁面地址等。

8. 內(nèi)容訂閱：無論是用feedsky、rss、還是傳統(tǒng)的郵件新聞列表，內(nèi)容訂閱的設(shè)置不僅僅是要提高用戶的黏度，推動用戶再次訪問，而且也是大型網(wǎng)站和正規(guī)網(wǎng)站的重要標(biāo)示，只有那些有實力和細(xì)心的網(wǎng)站才會提供定期的資訊服務(wù)，其實這部分在功能上已經(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. 用戶登錄：這也算是互動體驗一部分，用戶導(dǎo)向是web2.0設(shè)計的一個核心理念，只有用戶登陸才能享有更多的個性化服務(wù)，用戶登錄就無處不在，隨處可見，而且還要設(shè)計的方便合理，好不要打開新的登陸頁面，具體情況各異。

12. 論壇人氣：無論網(wǎng)站做的再花哨，如果有論壇這個欄目，打開論壇一看，沒幾個在線用戶，沒幾條熱點內(nèi)容，很容易直接就把網(wǎng)站否定掉了，因此，論壇千萬要注意，要么不做，開設(shè)了就得注意人氣的經(jīng)驗，哪怕自己每天狂灌水，也得先把網(wǎng)站人氣拖起來。

四、互動體驗的十個關(guān)鍵體驗點

互動體驗：呈現(xià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é)省時間。其實更為關(guān)鍵的還在于后面，如何吸引用戶補(bǔ)充全面的信息？這里就有一個web2.0的理念，“你分享出去的內(nèi)容越多，得到的權(quán)利和尊重也會越多”，要讓網(wǎng)民明確他們補(bǔ)充信息的價值在哪？此外，還要注意提示用戶信息的完整程度。

3. 表單填寫：表單填寫有多種方式，但好不要將所有項目分為兩個階段，必填項在第一頁，或者提供明顯的標(biāo)示，千萬不要將所有項目全部列出來，用戶一定會嚇壞的。Web2.0就要人性化一點，考慮一下用戶的接受程度，簡單一點還是沒錯的。提交成功后，感謝提示頁面務(wù)必要精心設(shè)計，尤為注意應(yīng)該將注冊后的用戶引向何處？是回首頁？還是個人界面？還是前一個瀏覽頁面？感謝頁面在內(nèi)容和形式上好設(shè)計的有個性一點。

4. 點擊提示：點擊瀏覽過的信息顏色需要顯示為不同的顏色，以區(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è)置一點真誠的解釋說明，好將網(wǎng)民重新引向網(wǎng)站，或者可以設(shè)置個報錯的反饋，細(xì)心處之。

6. 在線問答：在線問答有太多中形式，從用戶的使用預(yù)期出發(fā)，既然是在線問答，消費者希望得到最快的答復(fù)，但現(xiàn)在的情況是，往往網(wǎng)站提供了很多方式的問答渠道，但往往沒有人回應(yīng)，畢竟工作人員不能24小時守候啊，建議搞個小I機(jī)器人訓(xùn)練一下，頂個美女客服了。還有一種誤區(qū)，認(rèn)為在線問答就是解答問題，其實還有一個重要作用是收集信息，還要設(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ù)量。此外還要注意高級檢索和檢索選項的設(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è)計：說到體驗，最直接的就是用戶在網(wǎng)站上產(chǎn)生的有效點擊，每一次點擊也意味著一個新體驗的開始，而在眾多點擊之間，路徑的設(shè)計和記錄也體現(xiàn)了 web2.0個性化服務(wù)的精神。每個網(wǎng)民的訪問習(xí)慣和瀏覽習(xí)慣都有所不同，第一要設(shè)計最直接有效的瀏覽路徑；第二要記錄網(wǎng)民的瀏覽路徑，便于隨時返回；第三，要試圖尋找與網(wǎng)民瀏覽路徑的匹配，這一點集中可以體現(xiàn)在亞馬遜的圖書瀏覽和購買流程上，大家自己來關(guān)注吧。

本文題目：Web2.0體驗式網(wǎng)站設(shè)計的41個關(guān)鍵
網(wǎng)站網(wǎng)址：http://jinyejixie.com/news/211649.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián)，是專注品牌與效果的網(wǎng)站制作，網(wǎng)絡(luò)營銷seo公司；服務(wù)項目有網(wǎng)站設(shè)計等

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)