58便當體驗升級專案是由PM發起， 設計進行優化， 解決M端頁面上一版遺留問題。 並在反覆運算中進行深度挖掘， 持續優化產品體驗。 對於頁面設計過程中， 總結了一些經驗與方法， 今天拿來與大家分享一下。
“ 58便當 ”是58同城旗下的一個便民服務平臺， 早期版本以辦證攻略為主， 功能和結構單一。 此次改版在滿足日常辦證業務的需求上， 引入豐富的資訊內容（創業服務、優學培訓、生活竅門、養車用車）， 結合58的服務， 承擔資訊輸出的角色。
設計背景使用者分析根據以往資料類比出使用者畫像：
並根據不同使用者流覽需求， 劃分為兩類：
1. 有目標：如有辦證需求的用戶， 希望快速找到辦證指南；
2. 無目標：對資訊等內容感興趣的使用者， 能夠找到滿足其需求的資訊；
首先針對有辦證需求用戶的行為：
快捷方便、資訊全面是使用者選擇上網查找的主因；使用搜尋引擎或官網查詢方式，使用者痛點：
改善使用者體驗 有目標：縮短使用者訪問路徑，
提升產品的查找效率；無目標：提供精准資訊推送，
提升列表的可讀性；行動計畫 優化首頁快捷入口圖示，
把不同種類的頁面進行歸類， 對不同的詳情、頻道等頁面進行設計風格規劃， 方便設計執行時可以夠更好的統一。
改版真實可信的顏色基於產品特性， 沒有延續主站的橙色， 而是選用藍色為主色， 藍色會帶給人們一種知性與信賴感， 並且會使得頁面更輕量。 在最終敲定主色方案的過程中， 還進行一些微調， 最終確定了當前的色值。
新鮮風格先從Banner開始， 融入亮色漸變與淺陰影效果， 跟隨潮流當前潮流。 同時在使用這種效果後，
並優化視覺風格陳舊的UI， 加大頁面間隙的留白， 去掉不必要的細線樣式。
圖示優化根據頁面功能的變化， 逐漸從第一版的彩色圖示， 到簡單的線性， 讓圖示在頁面內看起來更加的合適，
優化整體頁面配置， 加入Banner／圖示等元素。 細節上融入淺陰影， 提升頁面整體等視覺效果， 減弱了入口層級深， 加入推薦資訊優化首頁的使用效率。
資訊清單拓展在設計列表的過程中， 考慮頁面更多是資訊內容比較多， 盡可能更好的展示內容，採用了三種展現形式，有效的起到了預覽與吸引眼球的效果，並且兼顧避免流覽重複樣式的疲勞，提升頁面的可讀性。
同類資訊橫滑把同類證件，加入橫滑的操作方式。方便使用者在瀏覽清單的同時在當前螢幕中，能夠更加便捷的對內容進行流覽。
字體優化增加大主要區域文字字型大小，縮小標籤及次要內容字型大小，提高對清單及詳情等頁面的悅讀體驗。並且對超文字連結進行提亮處理，讓頁面更好的區分主次與功能，調整頁面整體的字體顏色，優化純黑為深灰色，減少閱讀過程中高對比對眼睛產生的疲勞。
增加帶入感加入情景化背景圖，讓詳情頁面具有代入感，提升流覽證件時使用者的視覺感官，起到內容聯想作用。同時漸變效果讓文字資訊與照片看起來更柔和，不會顯得過於生硬。
獲取更有效的推送由於用戶入口等因素，在考慮一部分使用者會首先進入詳情頁面，而非首頁或清單頁時，需要讓使用者進行自迴圈流覽。
為了避免使用者的跳出，我們在頁面中心位置的Tab切換效果，為當前頁面也起到了精准的資訊推送。
結語根據前期的調研分析後，定義出新的視覺語言，建立便當的規範，保證品牌的一致性，方便後期版本反覆運算。並採用極簡的排版，讓用戶沉浸在閱讀中不受干擾，提升了用戶的閱讀體驗。設計是一個不斷打磨的過程，需要深入產品之中精耕細作，持續挖掘產品的可優化點，提升產品的使用體驗。
本文來源於人人都是產品經理合作媒體@58用戶體驗設計中心（微信公眾號@58UXD），作者@ 朴正圓
題圖來自PEXELS，基於CC0協議
盡可能更好的展示內容，採用了三種展現形式，有效的起到了預覽與吸引眼球的效果，並且兼顧避免流覽重複樣式的疲勞，提升頁面的可讀性。同類資訊橫滑把同類證件，加入橫滑的操作方式。方便使用者在瀏覽清單的同時在當前螢幕中，能夠更加便捷的對內容進行流覽。
字體優化增加大主要區域文字字型大小，縮小標籤及次要內容字型大小，提高對清單及詳情等頁面的悅讀體驗。並且對超文字連結進行提亮處理，讓頁面更好的區分主次與功能，調整頁面整體的字體顏色，優化純黑為深灰色，減少閱讀過程中高對比對眼睛產生的疲勞。
增加帶入感加入情景化背景圖，讓詳情頁面具有代入感，提升流覽證件時使用者的視覺感官，起到內容聯想作用。同時漸變效果讓文字資訊與照片看起來更柔和，不會顯得過於生硬。
獲取更有效的推送由於用戶入口等因素，在考慮一部分使用者會首先進入詳情頁面，而非首頁或清單頁時，需要讓使用者進行自迴圈流覽。
為了避免使用者的跳出，我們在頁面中心位置的Tab切換效果，為當前頁面也起到了精准的資訊推送。
結語根據前期的調研分析後，定義出新的視覺語言，建立便當的規範，保證品牌的一致性，方便後期版本反覆運算。並採用極簡的排版，讓用戶沉浸在閱讀中不受干擾，提升了用戶的閱讀體驗。設計是一個不斷打磨的過程，需要深入產品之中精耕細作，持續挖掘產品的可優化點，提升產品的使用體驗。
本文來源於人人都是產品經理合作媒體@58用戶體驗設計中心（微信公眾號@58UXD），作者@ 朴正圓
題圖來自PEXELS，基於CC0協議