編輯導(dǎo)語(yǔ)：用戶的體驗(yàn)感對(duì)于網(wǎng)站來(lái)說(shuō)是極其重要的，成功的網(wǎng)站都擁有良好的頁(yè)面用戶體驗(yàn)。網(wǎng)頁(yè)的用戶體驗(yàn)表現(xiàn)在多個(gè)方面，即使是最小的細(xì)節(jié)也會(huì)對(duì)客戶產(chǎn)生很大的影響。所以在網(wǎng)站建設(shè)的過(guò)程中，要把用戶體驗(yàn)始終貫穿其中，關(guān)于提升網(wǎng)頁(yè)的用戶體驗(yàn)，這里有一些方法和技巧分享。

一、提升網(wǎng)站交互體驗(yàn)

1. 注冊(cè)

現(xiàn)在越來(lái)越多的網(wǎng)站用戶注冊(cè)流程更加的簡(jiǎn)單，這樣做可以降低用戶的使用門(mén)檻，可以促進(jìn)更多的用戶去注冊(cè)。

“讓用戶感覺(jué)不到注冊(cè)的存在，那么這個(gè)注冊(cè)才是成功的”，在提升用戶注冊(cè)體驗(yàn)的時(shí)候，主要從以下幾個(gè)方面去著手：

1）區(qū)分登錄和注冊(cè)

讓用戶可以明顯的區(qū)分登錄和注冊(cè)，不會(huì)混淆。

2）讓用戶在注冊(cè)的時(shí)候使用郵箱或者手機(jī)號(hào)注冊(cè)

讓用戶在注冊(cè)和登錄的時(shí)候使用唯一的登錄憑證，早期的時(shí)候有的網(wǎng)站會(huì)讓用戶設(shè)置用戶名，有的時(shí)間一長(zhǎng)就容易忘記，從而登錄不上給用戶不好的用戶體驗(yàn)。

3）注冊(cè)顯示進(jìn)度條

網(wǎng)站會(huì)員的注冊(cè)流程一定要清晰簡(jiǎn)潔，最好有流程圖來(lái)配合，讓用戶指導(dǎo)自己進(jìn)行到哪一步來(lái)，還剩幾步需要完成。

4）第三方登錄/注冊(cè)

預(yù)留第三方賬號(hào)登錄/注冊(cè)，雖然不是每個(gè)用戶都會(huì)使用，但是通過(guò)這種方式登錄會(huì)更加便捷。

5）顯示密碼

在密碼輸入框后面預(yù)留一個(gè)小眼睛，可以自己選擇顯示或者隱藏密碼。

6）提醒大寫(xiě)鎖寫(xiě)

通過(guò) 提醒大寫(xiě)鎖定有助于避免多次輸入錯(cuò)誤，降低用戶的多次輸錯(cuò)的概率。

2. 登錄

1）允許使用郵箱、用戶名或已經(jīng)驗(yàn)證的手機(jī)登錄，并且給出相應(yīng)提示

2）給出明確錯(cuò)誤提示

給出明確的錯(cuò)誤提示，用戶能準(zhǔn)確的判斷是哪一項(xiàng)錯(cuò)誤，可以有效提升用戶登錄操作體驗(yàn)。

3）添加“忘記密碼”的鏈接

不需要放在很顯眼的位置，緊靠著用戶登錄表單，如果用戶真的忘記了密碼可以很快找到解決的辦法。

4）按鈕上的提示信息

在登錄頁(yè)面中，按鈕上寫(xiě)上“登錄”字樣，不要用“提交”或“完成”字樣，這樣會(huì)讓用戶覺(jué)得操作和預(yù)期是一樣的，增強(qiáng)用戶體驗(yàn)。

3. 按鈕

按鈕是界面中最小的元素之一，同時(shí)也是最關(guān)鍵的控件。我們?cè)谠O(shè)計(jì)的時(shí)候需要注意，用戶一般在什么情況下會(huì)使用按鈕；按鈕在與用戶交互操作過(guò)程中如何為用戶提供反饋的信息。

出色的交互按鈕需要注意以下幾點(diǎn)：

1）按鈕需要看起來(lái)可點(diǎn)擊

為按鈕添加微妙的陰影效果，是按鈕看起來(lái)“浮”出頁(yè)面更接近用戶。為按鈕添加鼠標(biāo)懸浮或點(diǎn)擊操作的交互效果，提示用戶。

2）按鈕的色彩很重要

按鈕作為用戶交互操作的核心，在頁(yè)面中使用色彩進(jìn)行突出，網(wǎng)頁(yè)中的按鈕色彩應(yīng)該是明亮而吸引人的，通常喜歡采用明亮的黃色、綠色和藍(lán)色進(jìn)行按鈕色彩，想突出按鈕的顏色，用與背景色相對(duì)的顏色也是不錯(cuò)的選擇。

同時(shí)按鈕的顏色還需要注意品牌色，選擇一個(gè)與頁(yè)面品牌配色方案相匹配的，不僅要識(shí)別度高，而且與品牌有關(guān)聯(lián)性。

3）按鈕的位置

按鈕放哪里可以為網(wǎng)站帶來(lái)更多的點(diǎn)擊量？大多數(shù)情況下，應(yīng)該將按鈕放置在特定的位置。

比如：表單的底部、出發(fā)行為操作的信息附近、在頁(yè)面或者 屏幕的底部、信息的正下方。不管是在pc端還是移動(dòng)端，這些位置都遵循了用戶的習(xí)慣和自然的交互路徑，使用戶操作更加方便。

4）良好的對(duì)比效果

在設(shè)計(jì)按鈕的時(shí)候，不僅要讓按鈕的內(nèi)容與按鈕本身形成良好的對(duì)比，而且和背景以及周?chē)匾惨纬蓪?duì)比效果。

5）使用標(biāo)準(zhǔn)形狀

當(dāng)我們?cè)谠O(shè)計(jì)按鈕的時(shí)候盡量選擇標(biāo)準(zhǔn)形狀來(lái)設(shè)計(jì)，比如方形或者圓角矩形，符合用戶的認(rèn)知習(xí)慣。

6）明確告訴用戶按鈕的功能

每個(gè)按鈕都會(huì)包含按鈕文本，它會(huì)告訴用戶的功能。按鈕上的文本要簡(jiǎn)潔、直觀、符合整個(gè)網(wǎng)站的風(fēng)格。當(dāng)用戶點(diǎn)擊按鈕之后，出現(xiàn)的內(nèi)容和指示的是相符的，迅速地呈現(xiàn)在用戶眼前，獲得用戶期望的結(jié)果。

7）給按鈕更高的視覺(jué)優(yōu)先級(jí)

讓按鈕的形狀、顏色和視覺(jué)重量上，都是頁(yè)面中最顯眼的那一個(gè)元素。

4. 面包屑

他起源于 Hansel and Gretel 的傳說(shuō)，孩子們?yōu)榱四軌蛘业交丶业穆?，將面包屑撒在路上，并順著找到了家。和傳說(shuō)中一致，面包屑路徑在現(xiàn)實(shí)中也幫助我們找到自己的起始頁(yè)。

一般內(nèi)容比較多的網(wǎng)站包含的子頁(yè)面也比較多，而面包屑路徑支持一鍵訪問(wèn)上一級(jí)目錄，避免搜索和深度鏈接，使用戶更好操作理解。

使用戶不管在那個(gè)層級(jí)，哪個(gè)頁(yè)面都可以清楚的看到頁(yè)面的路徑，方便用戶快速跳轉(zhuǎn)到其他頁(yè)面；而且可以很好的展示整個(gè)網(wǎng)站的信息結(jié)構(gòu)。

常見(jiàn)的面包屑路徑表現(xiàn)形式有三種：定位面包屑路徑、屬性面包屑路徑、路線面包屑路徑。

1）定位面包屑路徑

這是是最常見(jiàn)的一種形式，一般在多于兩級(jí)以上頁(yè)面就會(huì)使用到，在定位面包屑路徑中，左側(cè)頁(yè)面都會(huì)比右邊的頁(yè)面鏈接高一個(gè)層級(jí)。

2）屬性面包屑路徑

這種在電商類網(wǎng)站中用的比較多，一般是通過(guò)各種不同的屬性對(duì)搜索結(jié)果進(jìn)行篩選。

3）路線面包屑路徑

路線面包屑是動(dòng)態(tài)的，一般是用來(lái)指導(dǎo)用戶進(jìn)行某種操作，動(dòng)態(tài)的現(xiàn)實(shí)用戶需要完成的過(guò)程。

二、提升網(wǎng)站瀏覽體驗(yàn)

1. 提高網(wǎng)站頁(yè)面打開(kāi)速度

1）優(yōu)化圖片

在使用ps進(jìn)行儲(chǔ)存圖片的時(shí)候一般操作三個(gè)熱鍵+S，“存儲(chǔ)為Web格式”，設(shè)置圖片質(zhì)量，來(lái)控制大小，或者使用壓縮圖片大小的軟件，在不影響圖片顯示效果的情況下壓縮大小。

2）選擇合適的圖片格式

選擇合適的圖片格式可以縮小圖片容量。JPG格式通常用于照片或真彩色圖片，GIF格式用于平面色彩的圖片，一般用于按鈕或Logo圖片，PNG格式和GIF很相似，比JPG多支持一些色彩。

3）圖片寬度和高度設(shè)置

在制作網(wǎng)頁(yè)的時(shí)候設(shè)置好圖片的寬度和高度，瀏覽器在加載網(wǎng)頁(yè)的時(shí)候就會(huì)保留相應(yīng)的圖片區(qū)域，加快網(wǎng)頁(yè)的顯示速度。

4）延遲顯示可見(jiàn)區(qū)域外的內(nèi)容

用戶停留在第一屏的時(shí)候，不加載第一屏以下的圖片信息，只有當(dāng)用戶把鼠標(biāo)往下滾動(dòng)的時(shí)候，這些圖片才開(kāi)始加載，這樣可以提升可見(jiàn)于去的加載速度，提升用戶體驗(yàn)。

5）減少網(wǎng)頁(yè)的響應(yīng)次數(shù)

通過(guò) Ajax 無(wú)需重新加載整個(gè)網(wǎng)頁(yè)的情況下，能夠更新部分網(wǎng)頁(yè)的技術(shù)。

6）合并優(yōu)化

CSS樣式的出現(xiàn)，使網(wǎng)頁(yè)實(shí)現(xiàn)了內(nèi)容和元素表現(xiàn)方法的分離，用戶打開(kāi)CSS樣式設(shè)計(jì)的網(wǎng)頁(yè)，CSS樣式一般是被下載到用戶本地的計(jì)算機(jī)中，而不像HTML標(biāo)簽每次打開(kāi)網(wǎng)頁(yè)都需要解析一次。

另外，CSS樣式載某些地方可以替代圖片，這就是為什么提倡 使用Div+CSS的原因。

將JavaScript代碼和CSS樣式代碼分別合并到一個(gè)共享文件中，這樣不僅能簡(jiǎn)化代碼，而且在執(zhí)行avaScript文件的時(shí)候，如果JavaScript文件較多，就需要進(jìn)行多次的Get請(qǐng)求 ，延長(zhǎng)加載速度，將JavaScript文件合并在一起后，自然就減少了Get請(qǐng)求次數(shù)，提高了網(wǎng)頁(yè)的加載速度。

7）精簡(jiǎn)代碼

在同等網(wǎng)絡(luò)下，頁(yè)面越小下載時(shí)間越快，所以在合理范圍內(nèi)減少頁(yè)面大小是可以優(yōu)化下載速度的，而頁(yè)面大小主要是 有HTML的代碼量來(lái)決定的（也包括一些CSS樣式和JavaScript代碼）。

想減小頁(yè)面大小，就得根據(jù)W3C的標(biāo)準(zhǔn)來(lái)優(yōu)化HTML代碼結(jié)構(gòu)，去除一些無(wú)意義的代碼。

本文由 @忻蕓 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自 unsplash，基于 CC0 協(xié)議