起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識如何提升網頁的用戶體驗？
編輯導語：用戶的體驗感對于網站來說是極其重要的，成功的網站都擁有良好的頁面用戶體驗。網頁的用戶體驗表現在多個方面，即使是最小的細節也會對客戶產生很大的影響。所以在網站建設的過程中，要把用戶體驗始終貫穿其中，關于提升網頁的用戶體驗，這里有一些方法和技巧分享。
一、提升網站交互體驗
1. 注冊
現在越來越多的網站用戶注冊流程更加的簡單，這樣做可以降低用戶的使用門檻，可以促進更多的用戶去注冊。
“讓用戶感覺不到注冊的存在，那么這個注冊才是成功的”，在提升用戶注冊體驗的時候，主要從以下幾個方面去著手：
1）區分登錄和注冊
讓用戶可以明顯的區分登錄和注冊，不會混淆。
2）讓用戶在注冊的時候使用郵箱或者手機號注冊
讓用戶在注冊和登錄的時候使用唯一的登錄憑證，早期的時候有的網站會讓用戶設置用戶名，有的時間一長就容易忘記，從而登錄不上給用戶不好的用戶體驗。
3）注冊顯示進度條
網站會員的注冊流程一定要清晰簡潔，最好有流程圖來配合，讓用戶指導自己進行到哪一步來，還剩幾步需要完成。
4）第三方登錄/注冊
預留第三方賬號登錄/注冊，雖然不是每個用戶都會使用，但是通過這種方式登錄會更加便捷。
5）顯示密碼
在密碼輸入框后面預留一個小眼睛，可以自己選擇顯示或者隱藏密碼。
6）提醒大寫鎖寫
通過 提醒大寫鎖定有助于避免多次輸入錯誤，降低用戶的多次輸錯的概率。
2. 登錄
1）允許使用郵箱、用戶名或已經驗證的手機登錄，并且給出相應提示
2）給出明確錯誤提示
給出明確的錯誤提示，用戶能準確的判斷是哪一項錯誤，可以有效提升用戶登錄操作體驗。
3）添加“忘記密碼”的鏈接
不需要放在很顯眼的位置，緊靠著用戶登錄表單，如果用戶真的忘記了密碼可以很快找到解決的辦法。
4）按鈕上的提示信息
在登錄頁面中，按鈕上寫上“登錄”字樣，不要用“提交”或“完成”字樣，這樣會讓用戶覺得操作和預期是一樣的，增強用戶體驗。
3. 按鈕
按鈕是界面中最小的元素之一，同時也是最關鍵的控件。我們在設計的時候需要注意，用戶一般在什么情況下會使用按鈕；按鈕在與用戶交互操作過程中如何為用戶提供反饋的信息。
出色的交互按鈕需要注意以下幾點：
1）按鈕需要看起來可點擊
為按鈕添加微妙的陰影效果，是按鈕看起來“浮”出頁面更接近用戶。為按鈕添加鼠標懸浮或點擊操作的交互效果，提示用戶。
2）按鈕的色彩很重要
按鈕作為用戶交互操作的核心，在頁面中使用色彩進行突出，網頁中的按鈕色彩應該是明亮而吸引人的，通常喜歡采用明亮的黃色、綠色和藍色進行按鈕色彩，想突出按鈕的顏色，用與背景色相對的顏色也是不錯的選擇。
同時按鈕的顏色還需要注意品牌色，選擇一個與頁面品牌配色方案相匹配的，不僅要識別度高，而且與品牌有關聯性。
3）按鈕的位置
按鈕放哪里可以為網站帶來更多的點擊量？大多數情況下，應該將按鈕放置在特定的位置。
比如：表單的底部、出發行為操作的信息附近、在頁面或者 屏幕的底部、信息的正下方。不管是在pc端還是移動端，這些位置都遵循了用戶的習慣和自然的交互路徑，使用戶操作更加方便。
4）良好的對比效果
在設計按鈕的時候，不僅要讓按鈕的內容與按鈕本身形成良好的對比，而且和背景以及周圍元素也要形成對比效果。
5）使用標準形狀
當我們在設計按鈕的時候盡量選擇標準形狀來設計，比如方形或者圓角矩形，符合用戶的認知習慣。
6）明確告訴用戶按鈕的功能
每個按鈕都會包含按鈕文本，它會告訴用戶的功能。按鈕上的文本要簡潔、直觀、符合整個網站的風格。當用戶點擊按鈕之后，出現的內容和指示的是相符的，迅速地呈現在用戶眼前，獲得用戶期望的結果。
7）給按鈕更高的視覺優先級
讓按鈕的形狀、顏色和視覺重量上，都是頁面中最顯眼的那一個元素。
4. 面包屑
他起源于 Hansel and Gretel 的傳說，孩子們為了能夠找到回家的路，將面包屑撒在路上，并順著找到了家。和傳說中一致，面包屑路徑在現實中也幫助我們找到自己的起始頁。
一般內容比較多的網站包含的子頁面也比較多，而面包屑路徑支持一鍵訪問上一級目錄，避免搜索和深度鏈接，使用戶更好操作理解。
使用戶不管在那個層級，哪個頁面都可以清楚的看到頁面的路徑，方便用戶快速跳轉到其他頁面；而且可以很好的展示整個網站的信息結構。
常見的面包屑路徑表現形式有三種：定位面包屑路徑、屬性面包屑路徑、路線面包屑路徑。
1）定位面包屑路徑
這是是最常見的一種形式，一般在多于兩級以上頁面就會使用到，在定位面包屑路徑中，左側頁面都會比右邊的頁面鏈接高一個層級。
2）屬性面包屑路徑
這種在電商類網站中用的比較多，一般是通過各種不同的屬性對搜索結果進行篩選。
3）路線面包屑路徑
路線面包屑是動態的，一般是用來指導用戶進行某種操作，動態的現實用戶需要完成的過程。
二、提升網站瀏覽體驗
1. 提高網站頁面打開速度
1）優化圖片
在使用ps進行儲存圖片的時候一般操作三個熱鍵+S，“存儲為Web格式”，設置圖片質量，來控制大小，或者使用壓縮圖片大小的軟件，在不影響圖片顯示效果的情況下壓縮大小。
2）選擇合適的圖片格式
選擇合適的圖片格式可以縮小圖片容量。JPG格式通常用于照片或真彩色圖片，GIF格式用于平面色彩的圖片，一般用于按鈕或Logo圖片，PNG格式和GIF很相似，比JPG多支持一些色彩。
3）圖片寬度和高度設置
在制作網頁的時候設置好圖片的寬度和高度，瀏覽器在加載網頁的時候就會保留相應的圖片區域，加快網頁的顯示速度。
4）延遲顯示可見區域外的內容
用戶停留在第一屏的時候，不加載第一屏以下的圖片信息，只有當用戶把鼠標往下滾動的時候，這些圖片才開始加載，這樣可以提升可見于去的加載速度，提升用戶體驗。
5）減少網頁的響應次數
通過 Ajax 無需重新加載整個網頁的情況下，能夠更新部分網頁的技術。
6）合并優化
CSS樣式的出現，使網頁實現了內容和元素表現方法的分離，用戶打開CSS樣式設計的網頁，CSS樣式一般是被下載到用戶本地的計算機中，而不像HTML標簽每次打開網頁都需要解析一次。
另外，CSS樣式載某些地方可以替代圖片，這就是為什么提倡 使用Div+CSS的原因。
將JavaScript代碼和CSS樣式代碼分別合并到一個共享文件中，這樣不僅能簡化代碼，而且在執行avaScript文件的時候，如果JavaScript文件較多，就需要進行多次的Get請求 ，延長加載速度，將JavaScript文件合并在一起后，自然就減少了Get請求次數，提高了網頁的加載速度。
7）精簡代碼
在同等網絡下，頁面越小下載時間越快，所以在合理范圍內減少頁面大小是可以優化下載速度的，而頁面大小主要是 有HTML的代碼量來決定的（也包括一些CSS樣式和JavaScript代碼）。
想減小頁面大小，就得根據W3C的標準來優化HTML代碼結構，去除一些無意義的代碼。
本文由 @忻蕓 原創發布于人人都是產品經理，未經許可，禁止轉載
題圖來自 unsplash，基于 CC0 協議
- 目前還沒評論，等你發揮！
