用戶(hù)體驗在網(wǎng)站建設過(guò)程中的被重視程度，在近些年得到越來(lái)越大的提升。很多從事網(wǎng)頁(yè)設計的朋友都會(huì )在設計網(wǎng)頁(yè)的時(shí)候考慮到用戶(hù)體驗這一關(guān)鍵因素，因為不重視用戶(hù)體驗的網(wǎng)站，很難在當下愈發(fā)成熟的互聯(lián)網(wǎng)環(huán)境中得到用戶(hù)的青睞與肯定。在文章中心內容開(kāi)始前，我們來(lái)看一組圖片：

（2003年的騰訊網(wǎng)首頁(yè)）

（2003年的百度首頁(yè)）

（2003年的淘寶網(wǎng)首頁(yè)）

        十二年前的網(wǎng)站都是這般的，簡(jiǎn)單的table布局，可能現在那些抱著(zhù)ipad上網(wǎng)的00后小朋友很難想象會(huì )有這么丑的網(wǎng)頁(yè)吧。但現在div+css布局方便了我們設計很多精美的網(wǎng)頁(yè)，界面上的美化從很大程度上提升了網(wǎng)站的用戶(hù)體驗。不過(guò)，除了界面呢？影響用戶(hù)體驗的因素還會(huì )有哪些？

        正文開(kāi)始，我們從用戶(hù)體驗的角度聊聊，讓訪(fǎng)客反感的12種網(wǎng)頁(yè)設計。

        總有那么些網(wǎng)頁(yè)，讓我們一打開(kāi)就迫不及待想要離開(kāi)的。留不住用戶(hù)的網(wǎng)站，花再多的心思引流也都是徒勞。想要增加網(wǎng)站的用戶(hù)粘性，提升網(wǎng)站用戶(hù)體驗，這12個(gè)因素千萬(wàn)要注意了。

        來(lái)，從最糟糕的開(kāi)始說(shuō)吧……

        影響用戶(hù)體驗的網(wǎng)頁(yè)設計因素一：漫長(cháng)的加載時(shí)間；

        這是本人認為最糟糕的一個(gè)因素，網(wǎng)頁(yè)加載時(shí)間太漫長(cháng)。要是在十二年前，打開(kāi)一個(gè)網(wǎng)頁(yè)要一兩分鐘的話(huà)可能大家愿意忍受，畢竟這是很正常一件事；但在十二年后的今天，如果還要我花費一兩分鐘去等待你的網(wǎng)頁(yè)加載，我是絕對沒(méi)這個(gè)耐心忍受這一切的，不知道你們是不是贊同。

        因此，提升網(wǎng)頁(yè)加載速度，是提升用戶(hù)體驗的一個(gè)非常重要的因素。影響網(wǎng)頁(yè)加載速度的因素也有很多，袁程旭在之前的文章中多次有提及這方面知識。你可以買(mǎi)一臺配置好點(diǎn)兒的服務(wù)器，當然不建議買(mǎi)港臺或海外的，部分地區的訪(fǎng)客瀏覽網(wǎng)頁(yè)時(shí)加載會(huì )很吃力；除了服務(wù)器以外，網(wǎng)站程序的選擇也很有講究，不過(guò)這不是一兩句話(huà)可以說(shuō)完的。另外，諸如網(wǎng)頁(yè)延遲加載（點(diǎn)擊閱讀），或圖片異步延遲加載（點(diǎn)擊閱讀）之類(lèi)的技術(shù)使用可以很好地提升網(wǎng)頁(yè)加載速度，感興趣的朋友可自行了解。

        影響用戶(hù)體驗的網(wǎng)頁(yè)設計因素二：自動(dòng)播放的聲音；

        說(shuō)實(shí)話(huà)，這樣的網(wǎng)站經(jīng)常會(huì )嚇到我，尤其是在半夜的時(shí)候。請試想一下，你打開(kāi)一個(gè)網(wǎng)頁(yè)，突然就聽(tīng)到了一些亂七八糟的聲音，沒(méi)有心理準備的話(huà)是不是會(huì )被這東西給嚇到？這樣的網(wǎng)頁(yè)設計常見(jiàn)于那些搞銷(xiāo)售類(lèi)的頁(yè)面，一進(jìn)入網(wǎng)頁(yè)就自動(dòng)播放音樂(lè )或者廣告宣傳，實(shí)在讓人抓狂。

        玩QQ空間的時(shí)候感覺(jué)設置一個(gè)自動(dòng)播放的背景音樂(lè )很酷炫，但設計網(wǎng)頁(yè)的時(shí)候如果采用自動(dòng)播放聲音的設計其實(shí)是很影響用戶(hù)體驗的。你大可以在網(wǎng)頁(yè)某處放置音頻或視頻文件，讓用戶(hù)自主選擇是否打開(kāi)播放，我想這樣更尊重用戶(hù)選擇的設計才會(huì )更受用戶(hù)歡迎吧？

        影響用戶(hù)體驗的網(wǎng)頁(yè)設計因素三：彈窗 & 廣告；

        可能現在有很多攔截廣告的插件，但這并不影響我們對廣告的厭惡。最討厭的廣告形式就是那些永無(wú)止境的彈窗了，這是對用戶(hù)非常不友好的一種廣告形式。當然，彈窗這一讓人反感的東西也不一定表現在廣告上，很多企業(yè)的官網(wǎng)經(jīng)常彈出“點(diǎn)擊咨詢(xún)”類(lèi)窗口，關(guān)閉了沒(méi)幾秒又自動(dòng)打開(kāi)，這是很讓用戶(hù)反感的一個(gè)設計。信息還沒(méi)瀏覽多少，你就不斷要我點(diǎn)擊咨詢(xún)，我只好退出你的網(wǎng)站了。

        再說(shuō)說(shuō)廣告，最?lèi)盒牡膹V告形式是那些偽裝著(zhù)騙你去點(diǎn)擊的，常見(jiàn)于那些下載站，你經(jīng)常不知道哪個(gè)才是正確的下載鏈接，是不是經(jīng)常就下載了一些莫名其妙的軟件下來(lái)？袁程旭并不是說(shuō)網(wǎng)站不能投放廣告，是希望大家在用戶(hù)體驗的考慮前提下合理設計廣告位，比如代碼君網(wǎng)站的廣告位分布。

        影響用戶(hù)體驗的網(wǎng)頁(yè)設計因素四：關(guān)鍵信息不在顯眼位置；

        設計網(wǎng)頁(yè)的時(shí)候，你必須要知道用戶(hù)第一眼看到網(wǎng)頁(yè)時(shí)，視線(xiàn)的集中點(diǎn)會(huì )落在哪里?？赡苣阏J為網(wǎng)頁(yè)設計只是往頁(yè)面上堆砌信息那般簡(jiǎn)單，但其實(shí)信息的分配布局是很有講究的。頁(yè)面的關(guān)鍵信息必須要在顯眼的位置突出展現，才能更方便地被用戶(hù)獲取，不然的話(huà)其實(shí)很影響用戶(hù)體驗。

        就這么說(shuō)吧，之前我瀏覽過(guò)一個(gè)主題酒店的網(wǎng)頁(yè)，但找了半天沒(méi)發(fā)現在哪里查看房型、價(jià)錢(qián)這些用戶(hù)比較關(guān)心的信息和資訊，反倒是其企業(yè)文化介紹、發(fā)展歷程這些并不太重要的信息，擺在了非常明顯的位置。這樣的設計是反人類(lèi)的，在顯眼位置放置用戶(hù)關(guān)心的關(guān)鍵信息，才是正確的設計。

        中企動(dòng)力是一家專(zhuān)注于網(wǎng)站建設、網(wǎng)站設計、網(wǎng)站制作、建網(wǎng)站、制作網(wǎng)站的高端網(wǎng)站制作公司。

        影響用戶(hù)體驗的網(wǎng)頁(yè)設計因素五：過(guò)早地要求注冊；

        我去一個(gè)網(wǎng)站尋找一張設計圖，你要我注冊會(huì )員才能查看，那我肯定不干了。這些過(guò)早地要求注冊的網(wǎng)站也是很讓用戶(hù)反感的，除非你是那種什么真愛(ài)、相親類(lèi)的網(wǎng)站。比如百合網(wǎng)這類(lèi)，你要我注冊了才有權限查看更多會(huì )員的信息，為了找到真愛(ài)那我也認了。但如果只是下載一張圖片或者一首歌就要求我注冊的話(huà)，哪兒有那閑工夫理會(huì )你，網(wǎng)上的免費資源多得是。

        從用戶(hù)體驗的角度出發(fā)，就應該給予用戶(hù)更多的自主選擇權。比如我一部分資源是免費對外提供給所有用戶(hù)瀏覽或下載的，但還有很多精品資源是會(huì )員才有權限瀏覽和下載，只要資源足夠優(yōu)秀還怕吸引不到用戶(hù)來(lái)注冊么？別強迫用戶(hù)去做他們不喜歡做的事情，不然很容易遭受用戶(hù)反感。

        影響用戶(hù)體驗的網(wǎng)頁(yè)設計因素六：糟糕的導航設計；

        網(wǎng)站的導航欄往往是為了更好地引導用戶(hù)，如果導航欄設計得太過(guò)糟糕的話(huà)，還怎么能起到引導用戶(hù)的作用呢？設計網(wǎng)站導航欄的時(shí)候，一般要遵循鼠標的最短路徑原則，還要盡可能的方便用戶(hù)去到他們想要去的頁(yè)面。網(wǎng)站設計的每一點(diǎn)一滴其實(shí)都有講究，要不然怎么配得上設計二字？

        還是以那個(gè)主題酒店的網(wǎng)頁(yè)為例，試想一下，如果你現在迫切需要預定一個(gè)房間，但找了半天沒(méi)找到訂房的鏈接入口，內心會(huì )不會(huì )很崩潰？一邊是即將噴涌而出的荷爾蒙，一邊是對這糟糕網(wǎng)頁(yè)體驗上的各種差評，兩者無(wú)論哪一個(gè)都夠讓你瘋狂的，內心難免會(huì )大罵道：這都TM什么網(wǎng)站??！

        影響用戶(hù)體驗的網(wǎng)頁(yè)設計因素七：Flash（特別是主頁(yè)只有Flash展現）；

        在之前的SEO類(lèi)文章中，袁程旭多次提到，Flash的應用很不利于網(wǎng)站SEO。目前為止，搜索引擎爬蟲(chóng)還不能夠很好地爬取Flash文件內容，對網(wǎng)站的收錄會(huì )有一定的影響。而網(wǎng)站主頁(yè)恰巧是SEO過(guò)程中非常值得重視的一個(gè)頁(yè)面，如果只有一個(gè)Flash文件在網(wǎng)站主頁(yè)展現的話(huà)，那就未免太搞笑了。

        撇去SEO的因素不談，如果你進(jìn)入一個(gè)網(wǎng)站主頁(yè)發(fā)現只有一個(gè)Flash文件展現，會(huì )不會(huì )有種摸不著(zhù)頭腦的感覺(jué)？一般這樣的網(wǎng)頁(yè)設計也多見(jiàn)于那些產(chǎn)品推廣、企業(yè)推廣類(lèi)站點(diǎn)，而展現的Flash文件內容多半是對產(chǎn)品或企業(yè)進(jìn)行介紹的。這是一種強硬推廣手法，很容易讓用戶(hù)產(chǎn)生反抗的逆反心理。

        影響用戶(hù)體驗的網(wǎng)頁(yè)設計因素八：色彩搭配太過(guò)耀眼；

        網(wǎng)頁(yè)色彩搭配給用戶(hù)視覺(jué)上的沖擊是非常強的，袁程旭個(gè)人還是比較喜歡采用那些簡(jiǎn)約樸素的色彩搭配方式來(lái)設計網(wǎng)站。我可不喜歡進(jìn)入一個(gè)網(wǎng)站看到五顏六色的模塊，色彩搭配太過(guò)耀眼會(huì )讓眼睛很容易感到疲倦。如果你網(wǎng)站的文字信息比較多，就更不能采用太鮮艷的色彩了，不然用戶(hù)視覺(jué)疲勞了還怎么有心思去閱讀資訊呢？多參考一下大型互聯(lián)網(wǎng)公司的網(wǎng)頁(yè)配色，或許值得你去學(xué)習模仿。

        袁程旭強烈建議各位朋友，設計網(wǎng)頁(yè)時(shí)要保證頁(yè)面的主色調搭配不超過(guò)三種，除非你有特殊的需求而不得不將網(wǎng)頁(yè)設計成萬(wàn)花筒那般。各位可以閱讀《三分鐘帶你快速入門(mén)極簡(jiǎn)色彩學(xué)》這篇文章來(lái)學(xué)習一些基本的色彩學(xué)知識，我想會(huì )非常有利于你在網(wǎng)頁(yè)設計過(guò)程中進(jìn)行合理配色。

        影響用戶(hù)體驗的網(wǎng)頁(yè)設計因素九：table布局 or 界面過(guò)丑；

        正如文章開(kāi)頭所言，現在的網(wǎng)頁(yè)之所以可以設計得比十二年前精美，是因為div+css的布局結構能夠營(yíng)造出很多table布局實(shí)現不了的效果。如果你還沉迷于table布局的網(wǎng)頁(yè)中無(wú)法自拔的話(huà)，那么請原諒我實(shí)在看不下去，只好默默退出你的網(wǎng)站了。table布局的網(wǎng)頁(yè)非常難看，總之我是忍受夠了。

        不過(guò)，就算是div+css布局，竟然也有人能夠把網(wǎng)頁(yè)設計得非常丑的。這樣的網(wǎng)頁(yè)一般多是采用類(lèi)似于dreamweaver的軟件拖動(dòng)設計出來(lái)的，沒(méi)有代碼寫(xiě)出來(lái)的網(wǎng)頁(yè)來(lái)得精致。界面過(guò)丑的網(wǎng)頁(yè)總之不會(huì )太讓人喜歡，畢竟大家還是更樂(lè )于追求美感的，沒(méi)有人會(huì )喜歡在那些丑陋的界面上多加停留。

        影響用戶(hù)體驗的網(wǎng)頁(yè)設計因素十：網(wǎng)站太過(guò)“業(yè)余”；

        這里所謂的業(yè)余，不僅體現在網(wǎng)站資訊表達上，也體現在網(wǎng)站所有者的運營(yíng)上。如果網(wǎng)站的主題不夠明確，網(wǎng)站文章對某件事物所表達的觀(guān)點(diǎn)也不是很讓大部分人贊同，那么就可以說(shuō)這樣的網(wǎng)站很是業(yè)余。網(wǎng)站所有者在日常運營(yíng)工作中，如果未及時(shí)更新網(wǎng)站資訊，或者甚至連網(wǎng)站的關(guān)于我們和聯(lián)系我們等重要信息都未及時(shí)更新，那么這樣的網(wǎng)站也可以稱(chēng)為業(yè)余網(wǎng)站。

        如果我進(jìn)入一個(gè)網(wǎng)站，發(fā)現首頁(yè)最新推薦的文章還是2002年的，那我肯定不會(huì )多看就馬上退出這個(gè)網(wǎng)站了。你如果在編碼技術(shù)上或者SEO基礎常識上略顯業(yè)余，我還是可以忍受的，畢竟那跟我沒(méi)有多大的關(guān)系。但如果我想獲取的東西找不到，或者找到了但卻很業(yè)余可笑的，那肯定也不會(huì )有好感。

        影響用戶(hù)體驗的網(wǎng)頁(yè)設計因素十一：設計上的一些瑕疵；

        這些因素可能不會(huì )導致大量用戶(hù)對你的網(wǎng)站產(chǎn)生反感情緒，但如果能注意到這些問(wèn)題并且有針對性地進(jìn)行改進(jìn)，一定能更好地提升網(wǎng)站用戶(hù)體驗。接下來(lái)我們就簡(jiǎn)單聊聊，這些設計上的瑕疵。

        這些因素可能不會(huì )導致大量用戶(hù)對你的網(wǎng)站產(chǎn)生反感情緒，但如果能注意到這些問(wèn)題并且有針對性地進(jìn)行改進(jìn)，一定能更好地提升網(wǎng)站用戶(hù)體驗。接下來(lái)我們就簡(jiǎn)單聊聊，這些設計上的瑕疵。

        1、分頁(yè)瀏覽圖片

        常見(jiàn)于一些圖片類(lèi)站點(diǎn)，瀏覽一張圖片就要轉向下一頁(yè)才能繼續瀏覽，但真的有必要嗎？明明可以在一頁(yè)瀏覽完十張圖片，我卻不得不翻十頁(yè)瀏覽完，雖然網(wǎng)站的流量得到了很好的提升，但用戶(hù)體驗真的會(huì )非常差，瀏覽起圖片來(lái)真的好累??；

        2、字體選擇和布局

        特別是對于文字信息比較多的站點(diǎn)來(lái)說(shuō)，良好的閱讀體驗很是重要。代碼君網(wǎng)站的文章頁(yè)字體是經(jīng)過(guò)嚴格試驗后，綜合用戶(hù)反饋進(jìn)行改進(jìn)的。字體類(lèi)型的選擇、大小、行高和段落之間的距離等等因素，還有字體的右對齊，只有都做精細了才能達到更好的感官效果；推薦閱讀：《中文網(wǎng)頁(yè)設計：關(guān)于字體的那些事兒》；

        3、網(wǎng)頁(yè)過(guò)窄或者偏向一側對齊

        現在大屏的設備越來(lái)越普遍，寬度為800px的網(wǎng)頁(yè)設計顯然已經(jīng)跟不上時(shí)代了。建議PC端網(wǎng)頁(yè)寬度至少要保持在1000px至1200px左右，當然可自適應布局。而網(wǎng)頁(yè)如果偏向一側對齊也是非常難看的，雖然分割屏幕的做法很新穎，但不適合整站偏向一側對齊；

        4、結構混亂

        這個(gè)想必也不用多說(shuō)了，跟糟糕的導航設計給人感覺(jué)差不多。網(wǎng)站結構混亂很容易讓人進(jìn)去就找不到出來(lái)的路，只好關(guān)閉瀏覽器直接退出了。對于一般的小站點(diǎn)來(lái)說(shuō)，沒(méi)有太多的東西拿來(lái)分配，自然不會(huì )有太復雜或者混亂的結構。一旦網(wǎng)站做大了，考慮結構的合理布局就很必要了；

        5、瀏覽器兼容問(wèn)題

        不寫(xiě)代碼的人可能就會(huì )容易忽略這個(gè)問(wèn)題，訪(fǎng)客在使用IE瀏覽器和谷歌瀏覽器分別對你網(wǎng)頁(yè)進(jìn)行瀏覽的時(shí)候，看到的效果可能是不一樣的。從用戶(hù)體驗的角度出發(fā)，這個(gè)問(wèn)題是很有必要考慮的，但你也可以忽略這個(gè)因素，祈禱用戶(hù)別用低等級的IE等瀏覽器，或者祈禱這些低等級瀏覽器升級。

        影響用戶(hù)體驗的網(wǎng)頁(yè)設計因素十二：沒(méi)有wap端入口或沒(méi)有自適應布局；

        web端網(wǎng)頁(yè)在屏幕較大的電腦設備上欣賞起來(lái)可能還不錯，但換了屏幕較小的平板電腦或者手機等移動(dòng)設備瀏覽時(shí)，難免會(huì )讓內容布局顯得過(guò)于局促。手機端網(wǎng)站開(kāi)發(fā)設計在很早前就被大家提出但卻一直沒(méi)被重視，不過(guò)隨著(zhù)近些年百度等搜索引擎對擁有wap端入口或自適應布局的網(wǎng)頁(yè)表現得更為友好，讓大家開(kāi)始重視wap端網(wǎng)站建設。而移動(dòng)設備的普及和移動(dòng)端搜索流量的提升，則促成了更多人下定決心要建設wap端網(wǎng)站或者直接采用自適應布局來(lái)設計網(wǎng)頁(yè)。

        個(gè)人還是比較建議大家采用自適應網(wǎng)頁(yè)布局的，比較適合各種不同配置的瀏覽設備，符合當下的用戶(hù)瀏覽情況。如果想了解自適應網(wǎng)頁(yè)布局的，可自行查看本欄目之前發(fā)表的系列文章。

        最后總結：

        各種各樣的原因讓人們在還沒(méi)有真正了解一個(gè)網(wǎng)站的時(shí)候就把網(wǎng)頁(yè)直接關(guān)掉了，所以用戶(hù)體驗的考慮其實(shí)是非常重要的。比如這篇文章，其實(shí)是不太尊重用戶(hù)體驗的，寫(xiě)了一大堆文字卻沒(méi)見(jiàn)幾個(gè)插圖合理布局一下，能全篇看下來(lái)的人肯定很累。但圖片多了的話(huà)，網(wǎng)頁(yè)加載又會(huì )變慢，本文開(kāi)篇拿了五張大圖來(lái)作展示已經(jīng)夠影響網(wǎng)頁(yè)加載了，為了盡可能地提升網(wǎng)頁(yè)加載速度，只好少放幾張圖片了。

        當然這十二點(diǎn)也不完全是用戶(hù)進(jìn)入網(wǎng)站后馬上又離開(kāi)你網(wǎng)站的必然因素，比如我是點(diǎn)錯鏈接才進(jìn)的你網(wǎng)站，那我肯定會(huì )馬上離開(kāi)，這也是一種可能。那么，你是為什么離開(kāi)一個(gè)網(wǎng)頁(yè)的？

        相關(guān)標簽：企業(yè)網(wǎng)絡(luò )推廣公司、網(wǎng)頁(yè)設計、企業(yè)網(wǎng)站開(kāi)發(fā)、網(wǎng)頁(yè)設計公司、公司網(wǎng)站推廣、企業(yè)網(wǎng)絡(luò )推廣、建設網(wǎng)站公司、公司網(wǎng)站、網(wǎng)站公司、企業(yè)建網(wǎng)站、保定網(wǎng)站建設、北京網(wǎng)站制作、北京企業(yè)建站、福州網(wǎng)站建設、長(cháng)春網(wǎng)站制作