一個精通算法經(jīng)驗(yàn)豐富的后端工程師，也不一定能夠完成出色的前端頁面，對邏輯經(jīng)驗(yàn)豐富的程序員來說，html/css顯得繁瑣低效，即便是SASS、LESS這樣的框架也難以讓傳統(tǒng)程序員理解前端工程師，多數(shù)人眼中前端是編程與設(shè)計(jì)各占一部分的新職業(yè)，特別是在眾人把用戶體驗(yàn)掛在口中時，更讓人覺得前端應(yīng)當(dāng)對此有獨(dú)特的理解。其實(shí)在我看來，用戶體驗(yàn)這東西不管是從哪方面來說都沒有一個確切的定義，可能前端可以更多的用經(jīng)驗(yàn)來認(rèn)識它，亦有可能在不同人眼中的web用戶體驗(yàn)有所差別，只不過方向相同而已。
筆者也從自己的經(jīng)驗(yàn)中總結(jié)了一些WEB中用戶體驗(yàn)的實(shí)際細(xì)節(jié)，當(dāng)然也不可能面面俱到，限于篇幅筆者就只分享幾個包含顯著特征容易被認(rèn)可的細(xì)節(jié)：
AJAX
看到這里肯定有人忍不住笑出聲，的確這已經(jīng)不算什么新技術(shù)，但要讓我站在用戶的角度來評價網(wǎng)站技術(shù)上的變化中給訪問者帶來最大友好性的一項(xiàng)，我肯定會選AJAX.
記得在我剛剛開始學(xué)會上網(wǎng)時候，不管是注冊頁面還是登錄都是我最煩的，那時候網(wǎng)速又不快，打開一個注冊頁面就要幾秒時間，然后從上往下有幾十個選項(xiàng)要全部填滿，比如其中有一項(xiàng)讓我填寫“密碼保護(hù)問題”，這個設(shè)計(jì)簡直讓人想吃電腦，因?yàn)楹芏嗳艘豢催@種問題應(yīng)該都會和我一樣隨便寫幾個數(shù)字就提交，然后等幾秒加載完網(wǎng)頁提示“密碼保護(hù)問題”不允許有數(shù)字，同時之前填寫的十幾項(xiàng)數(shù)據(jù)全部清空需要重新再來一遍，再花幾分鐘寫完之后提交又提示不允許有字母，再來一遍，有時候還會提示字符太短太長有空格超時之類，總之如果你第一次注冊這種頁面，至少要花掉十幾分鐘，而且還是在重復(fù)做一件事。從網(wǎng)站運(yùn)營者角度來看這也很煩，重復(fù)十幾分鐘填寫表單很容易就失去很多潛在用戶。
在AJAX的異步請求出現(xiàn)之后，這種情況明顯的改善，給用戶的體驗(yàn)感最明顯。用戶并不知道何時已經(jīng)提交請求，就拿剛才表單的例子來說，如果每填寫一項(xiàng)都會在當(dāng)前表單的最后提示具體錯誤類型（在用戶未點(diǎn)擊時已經(jīng)異步提交了請求并且用返回?cái)?shù)據(jù)更新部分頁面），這就給用戶很直觀的提示，這種即時的互動讓訪問者能夠很直觀的感受到這是一個友好的網(wǎng)站。（當(dāng)然用javascript也能做到部分表單驗(yàn)證，這只是舉一個例子）。在不重新加載整個頁面，通過操作DOM來改寫小部分?jǐn)?shù)據(jù)這點(diǎn)上也能給訪問者帶來極大的交互感，現(xiàn)在流行的微博就是最好的例子，在發(fā)送微博/評論/轉(zhuǎn)發(fā)之后用戶會發(fā)現(xiàn)不用刷新等待整個頁面加載，操作之后立刻會有小部分的頁面發(fā)生變化，雖然看起來微不足道，但對一個訪問者來說，這足以讓他們欣喜。
網(wǎng)頁字體
網(wǎng)站中所有的文字內(nèi)容表達(dá)方式都是通過字體，合理的字體無疑會給用戶更好的體驗(yàn)感。在業(yè)內(nèi)來說豆瓣可能是對字體研究最多的一個網(wǎng)站，拿豆瓣讀書都來他們用Helvetica和Arial這兩種差別非常小的字體，這種非襯線字體很容易讓人一目了然同時富有一些科技感，豆瓣本身就是以圖片加上簡短語句組成，讓人能夠從字體中快速找到重心是設(shè)計(jì)的目標(biāo)所在。
有人擔(dān)心非襯線用作正文對閱讀體驗(yàn)有影響，實(shí)際上不難發(fā)現(xiàn)國外很多網(wǎng)站都用非襯線字體來處理正文，當(dāng)然也不排除他們可能考慮的更多是英文。其實(shí)我還是非常喜歡非襯線體，它們看起來更富美感，而且如今大量的文字在互聯(lián)網(wǎng)上比較少見，一些活潑具有現(xiàn)代感的非襯線字體也逐漸被更多的開發(fā)者認(rèn)同而且使用。
除去這些，字體還可以在選擇上再細(xì)分一些，記得曾經(jīng)看過一篇統(tǒng)計(jì)，不同的字體會影響用戶對站點(diǎn)權(quán)威性的信賴程度。比方說在一個公司網(wǎng)站上大量使用類似于幼圓、Cursive一類字體，很容易讓訪問者不信任網(wǎng)站，當(dāng)然如果是以娛樂為主的網(wǎng)站也不能過于嚴(yán)肅和簡樸，在使用時既要考慮到大眾用戶的接受程度，也要知道自己的網(wǎng)站是什么定位，當(dāng)然技術(shù)性的問題也不能忽略，像是火狐比IE區(qū)分sans-serif要更模糊一些，有的字體“O”和“0”、“L”和“1”容易讓人難以區(qū)分（代碼較多的站點(diǎn)需要考慮）等等，這樣綜合對比選擇得到的字體無疑能讓網(wǎng)站更有魅力，從而留下更多的用戶。
順便一提，在使用字體時注意版權(quán)。
加載速度
很多用戶在還未見到你出色的設(shè)計(jì)和內(nèi)容之前就已經(jīng)離開了頁面，這是因?yàn)榫W(wǎng)站加載時間實(shí)在是太長，已使訪問者失去耐心。其實(shí)很多的訪客不關(guān)心腳本和圖片的加載順序，他們只要看到網(wǎng)站的整體結(jié)構(gòu)能夠迅速的加載出來就可以開始瀏覽，即便是其他元素逐漸加載也可以接受，基于這點(diǎn)，我們可以使用很多延時加載的方法來使用戶更快的見到頁面。除此之外還有很多因素可能會對加載速度造成影響，也有逐一優(yōu)化的辦法，之前我已經(jīng)寫了兩篇相關(guān)文章來解決此問題（提高網(wǎng)站加載速度的解決方案有多少），不再細(xì)述。
結(jié)構(gòu)設(shè)計(jì)
不知道大家發(fā)現(xiàn)沒有，近來很多網(wǎng)站都喜歡把菜單fixed在頂部（維特博客就是個例子），只要這個菜單選擇項(xiàng)不是太多，訪客對這樣的固定菜單接受程度還是很高的，這只是設(shè)計(jì)中的一個小例子，相類似的有很多，比如在表單中以深淺顏色區(qū)分每一行，以提高可閱讀性；在激活窗口時為當(dāng)前控件添加一個邊框，使用戶能夠更建議的分辨自己在操作哪個窗口等等。很多的設(shè)計(jì)與排版方式都已經(jīng)得到了大眾認(rèn)可，可以作為網(wǎng)站設(shè)計(jì)時的參考。
網(wǎng)站結(jié)構(gòu)設(shè)計(jì)的好看不好看對訪客來說雖然有影響，但也不至于立刻離開，而且即便是非常精致的頁面卻對用戶不怎么友好，想必也不會有多少人愿意訪問。
舉個例子，以前我用好搜（360搜索）的時候總感覺怪怪的，沒有g(shù)oogle和百度順手，研究了一段時間之后才發(fā)現(xiàn)好搜的的主頁搜索框比百度和google要低一些，Google到頂部固定菜單的距離是286px，百度是192px（未登錄238px），而好搜則是328px。相比之下，好搜的搜索框更趨向于屏幕中間，而百度與Google則是在屏幕中上方，對于已經(jīng)常年習(xí)慣了百度和Google搜索的用戶來說，想要改變這個習(xí)慣來適應(yīng)好搜多少有些困難，除此之外搜索框還有結(jié)果頁也有幾個問題不一一細(xì)述，360這樣做無外乎兩點(diǎn)，一個是不在乎/不知道/不關(guān)心用戶體驗(yàn)，一個就是故意有所不同，想要培養(yǎng)自己的用戶習(xí)慣。（在我看來也不怎么成功）
細(xì)節(jié)決定成敗
喬布斯的父親是個木匠，曾經(jīng)教給喬布斯一個理念，就是櫥柜的背面里層也要細(xì)致處理甚至是打磨光滑，即便用戶看不見。在理想主義的偉大試驗(yàn)品“麥金塔”出世之后，有人甚至感嘆，就連電路板上的電路圖都能當(dāng)作藝術(shù)品，的確如此，喬布斯就曾經(jīng)開除一個對電路圖美學(xué)設(shè)計(jì)不滿的員工。一個偉大產(chǎn)品的誕生并不是一蹴而就的，必然經(jīng)過了長期的沉淀積累與琢磨，但僅此依舊不能稱之為偉大，只能算成功。一個產(chǎn)品細(xì)節(jié)上的最后潤色可能才是決定它價值的關(guān)鍵。對于WEB開發(fā)者來說，更是如此。
很多時候用戶體驗(yàn)應(yīng)遵循“less is more”，堆積如山的垃圾信息不僅無用還破壞了整體的用戶感受，這也就是所謂的設(shè)計(jì)細(xì)節(jié)決定成敗。
如果把WEB用戶體驗(yàn)展開來說，就算說個一天一夜也說不完，太多的細(xì)微之處需要我們留意，而且想要做好任何一處都并不是簡單的事。對于開發(fā)者來說，對用戶體驗(yàn)有更深更實(shí)際的理解就是把自己視為用戶，在逐漸滿足自己細(xì)枝末節(jié)體驗(yàn)感的同時，也豐滿了站點(diǎn)的用戶體驗(yàn)感受。
