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

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

1. 注冊

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

“讓用戶感覺不到注冊的存在，那么這個注冊才是成功的”，在提升用戶注冊體驗的時候，主要從以下幾個方面去著手：

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

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

2）讓用戶在注冊的時候使用郵箱或者手機(jī)號注冊

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

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

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

4）第三方登錄/注冊

預(yù)留第三方賬號登錄/注冊，雖然不是每個用戶都會使用，但是通過這種方式登錄會更加便捷。

5）顯示密碼

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

6）提醒大寫鎖寫

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

2. 登錄

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

2）給出明確錯誤提示

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

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

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

4）按鈕上的提示信息

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

3. 按鈕

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

出色的交互按鈕需要注意以下幾點：

1）按鈕需要看起來可點擊

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

2）按鈕的色彩很重要

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

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

3）按鈕的位置

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

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

4）良好的對比效果

在設(shè)計按鈕的時候，不僅要讓按鈕的內(nèi)容與按鈕本身形成良好的對比，而且和背景以及周圍元素也要形成對比效果。

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

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

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

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

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

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

4. 面包屑

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

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

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

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

1）定位面包屑路徑

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

2）屬性面包屑路徑

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

3）路線面包屑路徑

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

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

1. 提高網(wǎng)站頁面打開速度

1）優(yōu)化圖片

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

2）選擇合適的圖片格式

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

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

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

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

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

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

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

6）合并優(yōu)化

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

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

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

7）精簡代碼

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

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

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

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