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