提高WEB用戶(hù)體驗的幾點(diǎn)關(guān)鍵點(diǎn)發(fā)布者：本站     時(shí)間：2019-01-29 09:01:58

一個(gè)精通算法經(jīng)驗豐富的后端工程師，也不一定能夠完成出色的前端頁(yè)面，對邏輯經(jīng)驗豐富的程序員來(lái)說(shuō)，html/css顯得繁瑣低效，即便是SASS、LESS這樣的框架也難以讓傳統程序員理解前端工程師，多數人眼中前端是編程與設計各占一部分的新職業(yè)，特別是在眾人把用戶(hù)體驗掛在口中時(shí)，更讓人覺(jué)得前端應當對此有獨特的理解。其實(shí)在我看來(lái)，用戶(hù)體驗這東西不管是從哪方面來(lái)說(shuō)都沒(méi)有一個(gè)確切的定義，可能前端可以更多的用經(jīng)驗來(lái)認識它，亦有可能在不同人眼中的web用戶(hù)體驗有所差別，只不過(guò)方向相同而已。

筆者也從自己的經(jīng)驗中總結了一些WEB中用戶(hù)體驗的實(shí)際細節，當然也不可能面面俱到，限于篇幅筆者就只分享幾個(gè)包含顯著(zhù)特征容易被認可的細節：

AJAX

看到這里肯定有人忍不住笑出聲，的確這已經(jīng)不算什么新技術(shù)，但要讓我站在用戶(hù)的角度來(lái)評價(jià)網(wǎng)站技術(shù)上的變化中給訪(fǎng)問(wèn)者帶來(lái)最大友好性的一項，我肯定會(huì )選AJAX.

記得在我剛剛開(kāi)始學(xué)會(huì )上網(wǎng)時(shí)候，不管是注冊頁(yè)面還是登錄都是我最煩的，那時(shí)候網(wǎng)速又不快，打開(kāi)一個(gè)注冊頁(yè)面就要幾秒時(shí)間，然后從上往下有幾十個(gè)選項要全部填滿(mǎn)，比如其中有一項讓我填寫(xiě)“密碼保護問(wèn)題”，這個(gè)設計簡(jiǎn)直讓人想吃電腦，因為很多人一看這種問(wèn)題應該都會(huì )和我一樣隨便寫(xiě)幾個(gè)數字就提交，然后等幾秒加載完網(wǎng)頁(yè)提示“密碼保護問(wèn)題”不允許有數字，同時(shí)之前填寫(xiě)的十幾項數據全部清空需要重新再來(lái)一遍，再花幾分鐘寫(xiě)完之后提交又提示不允許有字母，再來(lái)一遍，有時(shí)候還會(huì )提示字符太短太長(cháng)有空格超時(shí)之類(lèi)，總之如果你第一次注冊這種頁(yè)面，至少要花掉十幾分鐘，而且還是在重復做一件事。從網(wǎng)站運營(yíng)者角度來(lái)看這也很煩，重復十幾分鐘填寫(xiě)表單很容易就失去很多潛在用戶(hù)。

在A(yíng)JAX的異步請求出現之后，這種情況明顯的改善，給用戶(hù)的體驗感最明顯。用戶(hù)并不知道何時(shí)已經(jīng)提交請求，就拿剛才表單的例子來(lái)說(shuō)，如果每填寫(xiě)一項都會(huì )在當前表單的最后提示具體錯誤類(lèi)型（在用戶(hù)未點(diǎn)擊時(shí)已經(jīng)異步提交了請求并且用返回數據更新部分頁(yè)面），這就給用戶(hù)很直觀(guān)的提示，這種即時(shí)的互動(dòng)讓訪(fǎng)問(wèn)者能夠很直觀(guān)的感受到這是一個(gè)友好的網(wǎng)站。（當然用javascript也能做到部分表單驗證，這只是舉一個(gè)例子）。在不重新加載整個(gè)頁(yè)面，通過(guò)操作DOM來(lái)改寫(xiě)小部分數據這點(diǎn)上也能給訪(fǎng)問(wèn)者帶來(lái)極大的交互感，現在流行的微博就是最好的例子，在發(fā)送微博/評論/轉發(fā)之后用戶(hù)會(huì )發(fā)現不用刷新等待整個(gè)頁(yè)面加載，操作之后立刻會(huì )有小部分的頁(yè)面發(fā)生變化，雖然看起來(lái)微不足道，但對一個(gè)訪(fǎng)問(wèn)者來(lái)說(shuō)，這足以讓他們欣喜。

網(wǎng)頁(yè)字體

網(wǎng)站中所有的文字內容表達方式都是通過(guò)字體，合理的字體無(wú)疑會(huì )給用戶(hù)更好的體驗感。在業(yè)內來(lái)說(shuō)豆瓣可能是對字體研究最多的一個(gè)網(wǎng)站，拿豆瓣讀書(shū)都來(lái)他們用Helvetica和Arial這兩種差別非常小的字體，這種非襯線(xiàn)字體很容易讓人一目了然同時(shí)富有一些科技感，豆瓣本身就是以圖片加上簡(jiǎn)短語(yǔ)句組成，讓人能夠從字體中快速找到重心是設計的目標所在。

有人擔心非襯線(xiàn)用作正文對閱讀體驗有影響，實(shí)際上不難發(fā)現國外很多網(wǎng)站都用非襯線(xiàn)字體來(lái)處理正文，當然也不排除他們可能考慮的更多是英文。其實(shí)我還是非常喜歡非襯線(xiàn)體，它們看起來(lái)更富美感，而且如今大量的文字在互聯(lián)網(wǎng)上比較少見(jiàn)，一些活潑具有現代感的非襯線(xiàn)字體也逐漸被更多的開(kāi)發(fā)者認同而且使用。

除去這些，字體還可以在選擇上再細分一些，記得曾經(jīng)看過(guò)一篇統計，不同的字體會(huì )影響用戶(hù)對站點(diǎn)權威性的信賴(lài)程度。比方說(shuō)在一個(gè)公司網(wǎng)站上大量使用類(lèi)似于幼圓、Cursive一類(lèi)字體，很容易讓訪(fǎng)問(wèn)者不信任網(wǎng)站，當然如果是以?shī)蕵?lè )為主的網(wǎng)站也不能過(guò)于嚴肅和簡(jiǎn)樸，在使用時(shí)既要考慮到大眾用戶(hù)的接受程度，也要知道自己的網(wǎng)站是什么定位，當然技術(shù)性的問(wèn)題也不能忽略，像是火狐比IE區分sans-serif要更模糊一些，有的字體“O”和“0”、“L”和“1”容易讓人難以區分（代碼較多的站點(diǎn)需要考慮）等等，這樣綜合對比選擇得到的字體無(wú)疑能讓網(wǎng)站更有魅力，從而留下更多的用戶(hù)。

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

加載速度

很多用戶(hù)在還未見(jiàn)到你出色的設計和內容之前就已經(jīng)離開(kāi)了頁(yè)面，這是因為網(wǎng)站加載時(shí)間實(shí)在是太長(cháng)，已使訪(fǎng)問(wèn)者失去耐心。其實(shí)很多的訪(fǎng)客不關(guān)心腳本和圖片的加載順序，他們只要看到網(wǎng)站的整體結構能夠迅速的加載出來(lái)就可以開(kāi)始瀏覽，即便是其他元素逐漸加載也可以接受，基于這點(diǎn)，我們可以使用很多延時(shí)加載的方法來(lái)使用戶(hù)更快的見(jiàn)到頁(yè)面。除此之外還有很多因素可能會(huì )對加載速度造成影響，也有逐一優(yōu)化的辦法，之前我已經(jīng)寫(xiě)了兩篇相關(guān)文章來(lái)解決此問(wèn)題（提高網(wǎng)站加載速度的解決方案有多少），不再細述。

結構設計

不知道大家發(fā)現沒(méi)有，近來(lái)很多網(wǎng)站都喜歡把菜單fixed在頂部（維特博客就是個(gè)例子），只要這個(gè)菜單選擇項不是太多，訪(fǎng)客對這樣的固定菜單接受程度還是很高的，這只是設計中的一個(gè)小例子，相類(lèi)似的有很多，比如在表單中以深淺顏色區分每一行，以提高可閱讀性；在激活窗口時(shí)為當前控件添加一個(gè)邊框，使用戶(hù)能夠更建議的分辨自己在操作哪個(gè)窗口等等。很多的設計與排版方式都已經(jīng)得到了大眾認可，可以作為網(wǎng)站設計時(shí)的參考。

網(wǎng)站結構設計的好看不好看對訪(fǎng)客來(lái)說(shuō)雖然有影響，但也不至于立刻離開(kāi)，而且即便是非常精致的頁(yè)面卻對用戶(hù)不怎么友好，想必也不會(huì )有多少人愿意訪(fǎng)問(wèn)。

舉個(gè)例子，以前我用好搜（360搜索）的時(shí)候總感覺(jué)怪怪的，沒(méi)有g(shù)oogle和百度順手，研究了一段時(shí)間之后才發(fā)現好搜的的主頁(yè)搜索框比百度和google要低一些，Google到頂部固定菜單的距離是286px，百度是192px（未登錄238px），而好搜則是328px。相比之下，好搜的搜索框更趨向于屏幕中間，而百度與Google則是在屏幕中上方，對于已經(jīng)常年習慣了百度和Google搜索的用戶(hù)來(lái)說(shuō)，想要改變這個(gè)習慣來(lái)適應好搜多少有些困難，除此之外搜索框還有結果頁(yè)也有幾個(gè)問(wèn)題不一一細述，360這樣做無(wú)外乎兩點(diǎn)，一個(gè)是不在乎/不知道/不關(guān)心用戶(hù)體驗，一個(gè)就是故意有所不同，想要培養自己的用戶(hù)習慣。（在我看來(lái)也不怎么成功）

細節決定成敗


喬布斯的父親是個(gè)木匠，曾經(jīng)教給喬布斯一個(gè)理念，就是櫥柜的背面里層也要細致處理甚至是打磨光滑，即便用戶(hù)看不見(jiàn)。在理想主義的偉大試驗品“麥金塔”出世之后，有人甚至感嘆，就連電路板上的電路圖都能當作藝術(shù)品，的確如此，喬布斯就曾經(jīng)開(kāi)除一個(gè)對電路圖美學(xué)設計不滿(mǎn)的員工。一個(gè)偉大產(chǎn)品的誕生并不是一蹴而就的，必然經(jīng)過(guò)了長(cháng)期的沉淀積累與琢磨，但僅此依舊不能稱(chēng)之為偉大，只能算成功。一個(gè)產(chǎn)品細節上的最后潤色可能才是決定它價(jià)值的關(guān)鍵。對于WEB開(kāi)發(fā)者來(lái)說(shuō)，更是如此。

很多時(shí)候用戶(hù)體驗應遵循“l(fā)ess is more”，堆積如山的垃圾信息不僅無(wú)用還破壞了整體的用戶(hù)感受，這也就是所謂的設計細節決定成敗。

如果把WEB用戶(hù)體驗展開(kāi)來(lái)說(shuō)，就算說(shuō)個(gè)一天一夜也說(shuō)不完，太多的細微之處需要我們留意，而且想要做好任何一處都并不是簡(jiǎn)單的事。對于開(kāi)發(fā)者來(lái)說(shuō)，對用戶(hù)體驗有更深更實(shí)際的理解就是把自己視為用戶(hù)，在逐漸滿(mǎn)足自己細枝末節體驗感的同時(shí)，也豐滿(mǎn)了站點(diǎn)的用戶(hù)體驗感受。