網(wǎng)頁設(shè)計中12個提升用戶體驗的細(xì)節(jié)!

　　不同的網(wǎng)頁設(shè)計師有著同一個煩惱：同類型的網(wǎng)站大同小異，風(fēng)格特點不明顯，吸引不了用戶扎地生根!

　　為此，小編整理總結(jié)了12個在具體問題和細(xì)節(jié)上需要注意的問題，一起來看看吧。

　　1.多種設(shè)備提供類似的體驗

　　用戶可能會從不同的設(shè)備上訪問你的網(wǎng)站，可能在桌面端上，筆記本電腦、平板電腦和手機(jī)上，甚至有可能在智能手表上打開你的網(wǎng)站。而作為用戶體驗設(shè)計的工作目標(biāo)之一，就是盡量確保無論在哪個設(shè)備上打開，都能給用戶以類似、相對一致的體驗。

　　2.清晰而易用的導(dǎo)航設(shè)計

　　導(dǎo)航是網(wǎng)頁可用性的基石。如果用戶無法通過導(dǎo)航找到自己想要的內(nèi)容，那么無論網(wǎng)站設(shè)計多好，都是不達(dá)標(biāo)的。所以，你的網(wǎng)站導(dǎo)航應(yīng)該符合下面的特征：

　　簡單(每個網(wǎng)站都應(yīng)該具備簡單明了的結(jié)構(gòu))

　　清晰(導(dǎo)航的選項對于用戶而言應(yīng)該是不言自明的)

　　一致(導(dǎo)航在各個頁面上應(yīng)該都是一致的)

　　這樣的導(dǎo)航能夠讓用戶盡可能少的點擊用來抵達(dá)他們要去的頁面

　　大型的導(dǎo)航菜單對于包含大量不同子頁面的網(wǎng)站而言，似乎是一個很好的解決方案，然而實際情況并非如此。超大的導(dǎo)航菜單對于絕大多數(shù)的普通用戶而言，看起來更像是迷宮，尤其是當(dāng)他們要找的內(nèi)容是其中的一個并不顯眼的小分類。

　　這種看似足以滿足全部用戶的需求，實則讓全部用戶都覺得不那么爽的解決方案，其實算不得體驗優(yōu)秀。

　　避免超大的導(dǎo)航菜單

　　3.讓已訪問的鏈接顯示為別的色彩

　　如果用戶點擊之后再返回，鏈接色彩不作區(qū)分的話，用戶可能會無意中重復(fù)訪問相同的頁面。所以，讓已訪問過的鏈接顯示為其他的色彩，讓用戶更好地決定下一步點擊哪里。

　　4.讓用戶更容易掃視頁面

　　當(dāng)用戶剛剛開始打開網(wǎng)頁的時候，可能會傾向于快速掃視整個頁面，而非通讀所有內(nèi)容。作為設(shè)計師，讓頁面的層次結(jié)構(gòu)足夠清晰，才能讓用戶更清晰地快速獲取信息。如何將內(nèi)容按照重要性、有層次地呈現(xiàn)出來，還是挺考驗網(wǎng)頁設(shè)計師的權(quán)衡能力的。

　　將屏幕標(biāo)題、登錄表單、導(dǎo)航類目和其他的關(guān)鍵內(nèi)容設(shè)置為視覺焦點，便于用戶發(fā)現(xiàn)

　　5.仔細(xì)檢查所有鏈接

　　當(dāng)鏈接所指向的頁面不存在的時候，用戶所打開的頁面就會自然地變?yōu)?04了，而這種情況是一定會讓用戶產(chǎn)生沮喪的情緒的。為了避免用戶在瀏覽過程中因此對你的網(wǎng)站產(chǎn)生失望的情緒，請務(wù)必確保沒個鏈接都指向正確的頁面。

　　或者也可以這樣:

　　這個頁面由 Google 設(shè)計師 Sebastien Gabriel 設(shè)計， Chrome 瀏覽器中眾多經(jīng)典的 404 頁面 icon 都出自他手。

　　皮克斯的 404 頁面采用了《頭腦特工隊》中的「憂憂」在哭泣的畫面，并配上「噢……別哭?！笰www…Don’t Cry.的文字。

　　Bloomberg 的 404 頁面是一段無厘頭的動畫，一個西裝男拍散一部屏幕顯示 404 的電腦，然后自己原地粉碎……

　　這個 404 頁面是個地鐵站臺，每隔一段時間就有一班地鐵靠站，畫面可以隨著鼠標(biāo)移動，戴上耳機(jī)聽更有感覺。

　　6.確保元素的視覺和功能表里如一

　　許多元素的外觀特征會呈現(xiàn)出它功能性的一面，這也就是我們常說的顯而易見、不言自明的設(shè)計。比如鏈接通常會呈現(xiàn)成特定的色彩，帶有下劃線，用戶需要知道哪些內(nèi)容是可點擊的，而哪些只是強(qiáng)調(diào)，設(shè)計要表里如一。

　　7.不要讓你的用戶長時間等待加載

　　不論是面對APP還是網(wǎng)頁，用戶的耐心都非常之有限。有研究表明，7秒的等待幾乎是用戶的等待極限，而10秒的加載時間，只會讓絕大多數(shù)的用戶關(guān)閉頁面，再精美的加載動畫都安撫不了用戶的煩躁。

　　所以，不要讓你的用戶等待加載，尤其是這個加載時間很長的時候。相關(guān)的應(yīng)對策略很多，比如你可以采用占位符先顯示布局，逐步加載內(nèi)容，至少讓用戶知道，這個過程正在推進(jìn)。

　　8、不要讓促銷廣告蓋住內(nèi)容

　　現(xiàn)實生活中廣告已經(jīng)讓人難以忍受了，如果你的網(wǎng)頁中廣告居然擋住了主要內(nèi)容，這幾乎是逼著你的用戶生氣關(guān)閉頁面，這樣換來的廣告營收從某種意義上也是飲鴆止渴。

　　用戶體驗設(shè)計中，打斷進(jìn)行中的用戶體驗是一項大忌。這種設(shè)計模式從體驗上將用戶向外推。

　　相應(yīng)的替代方案有很多種，可以是在內(nèi)容閱讀完成之后再提供一個微妙的彈出框，或者以其他的方式做信息提醒，又或者是在用戶流程中，加入需要提示的內(nèi)容。

　　9、不要出現(xiàn)滾動劫持

　　滾動劫持通常指的是開發(fā)者或者設(shè)計師為了實現(xiàn)新的布局、動畫或者排版，而修改了滾動的固定點甚至滾動條和體驗本身，帶來的非常規(guī)的滾動體驗。滾動劫持是最惱人的狀況之一，所以，通常而言，除非極個別的原因，盡量不要過度調(diào)整和修改用戶滾動瀏覽的體驗設(shè)計。

　　Mac Pro 的頁面就加入了一些令人抓狂的滾動特效，這是為了適配它的視差布局。

　　10、不要讓視頻和音頻自動播放并出聲

　　視頻和音頻自動播放對于用戶而言是一種失控的體驗，對于用戶也是一種刺激。這樣的設(shè)計應(yīng)該謹(jǐn)慎使用，除非用戶對此已經(jīng)有所預(yù)期。

　　Facebook 的視頻被設(shè)置為自動播放，但是不會出聲。只有當(dāng)用戶在瀏覽視頻并且與之互動的時候，才會觸發(fā)聲音控制，外放出聲。

　　11、不要為了漂亮而犧牲可用性

　　網(wǎng)站和APP的界面設(shè)計的外觀不應(yīng)該影響它本身的可用性。避免繁瑣的設(shè)計，為了美觀而犧牲內(nèi)容的可讀性和對比性都是不能讓人接受的體驗。

　　12、不要使用晃眼的文本和廣告

　　令人晃眼的文本和廣告本身體驗不佳，它們會讓人分心，而且還會觸發(fā)體質(zhì)敏感的癲癇患者發(fā)病(這不是在一本正經(jīng)的胡說八道)

　　當(dāng)然，凡事都有雙面性，這些只是常規(guī)情況，在許多設(shè)計項目中，在特定的需求之下，它們也可i能是最佳的解決方案。另外，學(xué)會根據(jù)實際的狀況來尋求優(yōu)化的方案，才是設(shè)計師應(yīng)當(dāng)做到的事情。想要藝術(shù)留學(xué)的小伙伴更要用心的制作作品集，是否用心，作品集會說話，考官也能感受到!