如何提升WEB用戶體驗

版權聲明：本文爲北京尚學堂原創文章，未經容許不得轉載。

一個精通算法經驗豐富的後端工程師，也不必定可以完成出色的前端頁面，對邏輯經驗豐富的程序員來講，html/css顯得繁瑣低效，即使是SASS、LESS這樣的框架也難以讓傳統程序員理解前端工程師，多數人眼中前端是編程與設計各佔一部分的新職業，特別是在衆人把用戶體驗掛在口中時，更讓人以爲前端應當對此有獨特的理解。其實在我看來，用戶體驗這東西無論是從哪方面來講都沒有一個確切的定義，可能前端能夠更多的用經驗來認識它，亦有可能在不一樣人眼中的web用戶體驗有所差異，只不過方向相同而已。

筆者也從本身的經驗中總結了一些WEB中用戶體驗的實際細節，固然也不可能面面俱到，限於篇幅筆者就只分享幾個包含顯著特徵容易被承認的細節：

AJAX

看到這裏確定有人忍不住笑出聲，的確這已經不算什麼新技術，但要讓我站在用戶的角度來評價網站技術上的變化中給訪問者帶來最大友好性的一項，我確定會選AJAX.

記得在我剛剛開始學會上網時候，無論是註冊頁面仍是登陸都是我最煩的，那時候網速又不快，打開一個註冊頁面就要幾秒時間，而後從上往下有幾十個選項要所有填滿，好比其中有一項讓我填寫「密碼保護問題」，這個設計簡直讓人想吃電腦，由於不少人一看這種問題應該都會和我同樣隨便寫幾個數字就提交，而後等幾秒加載完網頁提示「密碼保護問題」不容許有數字，同時以前填寫的十幾項數據所有清空須要從新再來一遍，再花幾分鐘寫完以後提交又提示不容許有字母，再來一遍，有時候還會提示字符過短太長有空格超時之類，總之若是你第一次註冊這種頁面，至少要花掉十幾分鍾，並且仍是在重複作一件事。從網站運營者角度來看這也很煩，重複十幾分鍾填寫表單很容易就失去不少潛在用戶。

在AJAX的異步請求出現以後，這種狀況明顯的改善，給用戶的體驗感最明顯。用戶並不知道什麼時候已經提交請求，就拿剛纔表單的例子來講，若是每填寫一項都會在當前表單的最後提示具體錯誤類型（在用戶未點擊時已經異步提交了請求而且用返回數據更新部分頁面），這就給用戶很直觀的提示，這種即時的互動讓訪問者可以很直觀的感覺到這是一個友好的網站。（固然用javascript也能作到部分表單驗證，這只是舉一個例子）。在不從新加載整個頁面，經過操做DOM來改寫小部分數據這點上也能給訪問者帶來極大的交互感，如今流行的微博就是最好的例子，在發送微博/評論/轉發以後用戶會發現不用刷新等待整個頁面加載，操做以後馬上會有小部分的頁面發生變化，雖然看起來微不足道，但對一個訪問者來講，這足以讓他們欣喜。更多精彩內容關注微信公衆號：北京尚學堂。

網頁字體

 

網站中全部的文字內容表達方式都是經過字體，合理的字體無疑會給用戶更好的體驗感。在業內來講豆瓣多是對字體研究最多的一個網站，拿豆瓣讀書都來他們用Helvetica和Arial這兩種差異很是小的字體，這種非襯線字體很容易讓人一目瞭然同時富有一些科技感，豆瓣自己就是以圖片加上簡短語句組成，讓人可以從字體中快速找到重心是設計的目標所在。

有人擔憂非襯線用做正文對閱讀體驗有影響，實際上不難發現國外不少網站都用非襯線字體來處理正文，固然也不排除他們可能考慮的更可能是英文。其實我仍是很是喜歡非襯線體，它們看起來更富美感，並且現在大量的文字在互聯網上比較少見，一些活潑具備現代感的非襯線字體也逐漸被更多的開發者認同並且使用。

除去這些，字體還能夠在選擇上再細分一些，記得曾經看過一篇統計，不一樣的字體會影響用戶對站點權威性的信賴程度。比方說在一個公司網站上大量使用相似於幼圓、Cursive一類字體，很容易讓訪問者不信任網站，固然若是是以娛樂爲主的網站也不能過於嚴肅和簡樸，在使用時既要考慮到大衆用戶的接受程度，也要知道本身的網站是什麼定位，固然技術性的問題也不能忽略，像是火狐比IE區分sans-serif要更模糊一些，有的字體「O」和「0」、「L」和「1」容易讓人難以區分（代碼較多的站點須要考慮）等等，這樣綜合對比選擇獲得的字體無疑能讓網站更有魅力，從而留下更多的用戶。

順便一提，在使用字體時注意版權。

加載速度

不少用戶在還未見到你出色的設計和內容以前就已經離開了頁面，這是由於網站加載時間實在是太長，已使訪問者失去耐心。其實不少的訪客不關心腳本和圖片的加載順序，他們只要看到網站的總體結構可以迅速的加載出來就能夠開始瀏覽，即使是其餘元素逐漸加載也能夠接受，基於這點，咱們可使用不少延時加載的方法來使用戶更快的見到頁面。除此以外還有不少因素可能會對加載速度形成影響，也有逐一優化的辦法，以前我已經寫了兩篇相關文章來解決此問題（提升網站加載速度的解決方案有多少），再也不細述。更多精彩內容關注微信公衆號：北京尚學堂。

結構設計

不知道你們發現沒有，近來不少網站都喜歡把菜單fixed在頂部（維特博客就是個例子），只要這個菜單選擇項不是太多，訪客對這樣的固定菜單接受程度仍是很高的，這只是設計中的一個小例子，相相似的有不少，好比在表單中以深淺顏色區分每一行，以提升可閱讀性；在激活窗口時爲當前控件添加一個邊框，使用戶可以更建議的分辨本身在操做哪一個窗口等等。不少的設計與排版方式都已經獲得了大衆承認，能夠做爲網站設計時的參考。

網站結構設計的好看很差看對訪客來講雖然有影響，但也不至於馬上離開，並且即使是很是精緻的頁面卻對用戶不怎麼友好，想必也不會有多少人願意訪問。

舉個例子，之前我用好搜（360搜索）的時候總感受怪怪的，沒有google和百度順手，研究了一段時間以後才發現好搜的的主頁搜索框比百度和google要低一些，Google到頂部固定菜單的距離是286px，百度是192px（未登陸238px），而好搜則是328px。相比之下，好搜的搜索框更趨向於屏幕中間，而百度與Google則是在屏幕中上方，對於已常常年習慣了百度和Google搜索的用戶來講，想要改變這個習慣來適應好搜多少有些困難，除此以外搜索框還有結果頁也有幾個問題不一一細述，360這樣作無外乎兩點，一個是不在意/不知道/不關心用戶體驗，一個就是故意有所不一樣，想要培養本身的用戶習慣。（在我看來也不怎麼成功）更多精彩內容關注微信公衆號：北京尚學堂。

細節決定成敗

喬布斯的父親是個木匠，曾經教給喬布斯一個理念，就是櫥櫃的背面裏層也要細緻處理甚至是打磨光滑，即使用戶看不見。在理想主義的偉大試驗品「麥金塔」出世以後，有人甚至感嘆，就連電路板上的電路圖都能看成藝術品，的確如此，喬布斯就曾經開除一個對電路圖美學設計不滿的員工。一個偉大產品的誕生並非一蹴而就的，必然通過了長期的沉澱積累與琢磨，但僅此依舊不能稱之爲偉大，只能算成功。一個產品細節上的最後潤色可能纔是決定它價值的關鍵。對於WEB開發者來講，更是如此。

不少時候用戶體驗應遵循「less is more」，堆積如山的垃圾信息不只無用還破壞了總體的用戶感覺，這也就是所謂的設計細節決定成敗。

若是把WEB用戶體驗展開來講，就算說個一天一晚上也說不完，太多的細微之處須要咱們留意，並且想要作好任何一處都並非簡單的事。對於開發者來講，對用戶體驗有更深更實際的理解就是把本身視爲用戶，在逐漸知足本身細枝末節體驗感的同時，也豐滿了站點的用戶體驗感覺。​​更多精彩內容關注微信公衆號：北京尚學堂。

若是你的目標是就業，而且是高薪就業，那麼北京尚學堂是你正確的選擇。北京尚學堂一直在爲改變中國IT教育努力着。十年以來，北京尚學堂堅守「爲莘莘學子改變命運而講課」這份情懷，不忘初心。感謝你們的閱讀!​

本文做者北京尚學堂原創。如需轉載請聯繫做者受權，未經受權，轉載必究。

更多猛料！歡迎掃描上方二維碼關注北京尚學堂官方微信公衆號 （ 資料領取驗證消息：156）