設計沉思錄:58便當M端頁面改版

0 評論 6170 瀏覽 43 收藏 8 分鐘

58便當體驗升級項目是由PM發起,設計進行優化,解決M端頁面上一版遺留問題。并在迭代中進行深度挖掘,持續優化產品體驗。對于頁面設計過程中,總結了一些經驗與方法,今天拿來與大家分享一下。

項目簡述

“ 58便當 ”是58同城旗下的一個便民服務平臺,早期版本以辦證攻略為主,功能和結構單一。此次改版在滿足日常辦證業務的需求上,引入豐富的資訊內容(創業服務、優學培訓、生活竅門、養車用車),結合58的服務,承擔資訊輸出的角色。

設計背景

用戶分析

根據以往數據模擬出用戶畫像:

并根據不同用戶瀏覽需求,劃分為兩類:

1. 有目標:如有辦證需求的用戶,希望快速找到辦證指南;

2.?無目標:對資訊等內容感興趣的用戶,能夠找到滿足其需求的資訊;

首先針對有辦證需求用戶的行為:

  1. 快捷方便、信息全面是用戶選擇上網查找的主因;
  2. 使用搜索引擎或官網查詢方式,獲得方便快捷/信息真實可靠信息資源;
  3. 設備使用占比,電腦64%、移動端29%、終端機7%

用戶痛點:

改善用戶體驗

  1. 有目標:縮短用戶訪問路徑,提升產品的查找效率;
  2. 無目標:提供精準資訊推送,提升列表的可讀性;

行動計劃

  1. 優化首頁快捷入口圖標,在設計上優化圖標的引導作用,方便用戶從首頁直接跳到詳情;
  2. 增強搜索過程中的體驗感受;
  3. 增加個性化推薦,豐富視覺語言;
  4. 采用統一的視覺元素提升頁面效果;

架構歸類

把不同種類的頁面進行歸類,對不同的詳情、頻道等頁面進行設計風格規劃,方便設計執行時可以夠更好的統一。

改版

真實可信的顏色

基于產品特性,沒有延續主站的橙色,而是選用藍色為主色,藍色會帶給人們一種知性與信賴感,并且會使得頁面更輕量。在最終敲定主色方案的過程中,還進行一些微調,最終確定了當前的色值。

新鮮風格

先從Banner開始,融入亮色漸變與淺陰影效果,跟隨潮流當前潮流。同時在使用這種效果后,更能方便Banner的規范輸出,只要修改漸變色就能輕松輸出比較搶眼的Banner,減少了后期運營設計成本。

并優化視覺風格陳舊的UI,加大頁面間隙的留白,去掉不必要的細線樣式。

圖標優化

根據頁面功能的變化,逐漸從第一版的彩色圖標,到簡單的線性,讓圖標在頁面內看起來更加的合適,并且直觀的進行引導。

首頁

優化整體頁面布局,加入Banner/圖標等元素。細節上融入淺陰影,提升頁面整體等視覺效果,減弱了入口層級深,加入推薦信息優化首頁的使用效率。

信息列表拓展

在設計列表的過程中,考慮頁面更多是信息內容比較多,盡可能更好的展示內容,采用了三種展現形式,有效的起到了預覽與吸引眼球的效果,并且兼顧避免瀏覽重復樣式的疲勞,提升頁面的可讀性。

同類信息橫滑

把同類證件,加入橫滑的操作方式。方便用戶在瀏覽列表的同時在當前屏幕中,能夠更加便捷的對內容進行瀏覽。

字體優化

增加大主要區域文字字號,縮小標簽及次要內容字號,提高對列表及詳情等頁面的悅讀體驗。并且對超文本鏈接進行提亮處理,讓頁面更好的區分主次與功能,調整頁面整體的字體顏色,優化純黑為深灰色,減少閱讀過程中高對比度對眼睛產生的疲勞。

增加帶入感

加入情景化背景圖,讓詳情頁面具有代入感,提升瀏覽證件時用戶的視覺感官,起到內容聯想作用。同時漸變效果讓文字信息與照片看起來更柔和,不會顯得過于生硬。

獲取更有效的推送

由于用戶入口等因素,在考慮一部分用戶會首先進入詳情頁面,而非首頁或列表頁時,需要讓用戶進行自循環瀏覽。

為了避免用戶的跳出,我們在頁面中心位置的Tab切換效果,為當前頁面也起到了精準的信息推送。

結語

根據前期的調研分析后,定義出新的視覺語言,建立便當的規范,保證品牌的一致性,方便后期版本迭代。并采用極簡的排版,讓用戶沉浸在閱讀中不受干擾,提升了用戶的閱讀體驗。設計是一個不斷打磨的過程,需要深入產品之中精耕細作,持續挖掘產品的可優化點,提升產品的使用體驗。

 

本文來源于人人都是產品經理合作媒體@58用戶體驗設計中心(微信公眾號@58UXD),作者@ 樸正圓

題圖來自PEXELS,基于CC0協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!