米大師web改版之設計總結

4 評論 12055 瀏覽 80 收藏 9 分鐘

本文作者將對本次的米大師web改版設計進行了總結,主要是針對已知問題,從三個方面進行解決。

一、項目背景

1、米大師web是什么?

米大師web是計費平臺部為公司以及合作方提供的,web端泛娛樂業務支付解決方案。后臺以SDK包提供給業務,前端以支付彈窗形式適配所有業務場景。

2、為什么要改版?

原版米大師web的后臺和前端還停留在09年,隨著接入業務增加,用戶的體驗問題也隨之出現。

看看舊版的界面,以QQ會員開通為例:

二、設計目標

改版需要針對已知問題進行解決,設計主要從三個方面進行解決:

1、零散信息歸類整合,減少表單閱讀負擔

原來版面信息以表單呈現,信息分散,影響閱讀。改版把信息重新歸納整合,提高閱讀效率。

2、按照用戶路徑進行信息分區,優化視覺動線

原來版面商品信息和支付信息混雜一起,影響用戶處理效率。改版后按照用戶的路徑“選商品→支付商品”,重新進行信息分區,優化用戶視覺動線,提高處理效率。

歸納法&窮舉法

改版的最大目標是支付效率的提高。但是由于是場景內支付,有彈窗尺寸、業務情況不同的限制。因此方案需要綜合考慮所有因素,得出限制下的最優方案。

(1)歸納法——分析支付方式步驟與頁面的關系

窮舉所有支付方式步驟,得出步驟與頁面的關系的表格。

(2)窮舉法——結合限制,制定最優支付方案

根據步驟與頁面的關系表格,結合業務特點、彈窗尺寸限制,窮舉所有情況。

作為支持多種業務模式的支付方案,統一各業務場景下的體驗尤為重要,使其適用于多種業務,各種屏幕,同時減少開發的成本。

三、簡潔舒適的視覺設計

1、更好地處理信息集合 — 卡片式展示

在主要信息的表現中,合理利用空間,將單個內容信息打包,采用卡片式展示,能給用戶帶來更好的視覺一致性,易于操作,也能有效的對同類信息進行了區分,同時卡片式的展示方式弄夠更好的容納多種內容,便于多種業務模式復用。

2、精挑細選的商品卡片區表現

步驟一:拆解

在商品內容區的表現過程中,我們參考了許多競品,拆解出商品卡片內容中的模塊和重要的元素,主要從這幾個元素入手,進行組合嘗試,打造最優的商品內容區視覺表現。

步驟二:羅列

通過參考和梳理,羅列主要模塊內主要元素表現方式,并進行組合嘗試。

步驟三:重組

將區域內整理出來的主要元素進行“重組”,進行嘗試,發現多種組件形式,示例如下:

步驟四:判斷

組合嘗試,發現多種方案,通過判斷標準選擇最優。

備注:判斷要有標準。這里我們對方案進行了快速用研,確定了信息的優先級:運營信息>主要價格>商品檔位>輔助信息

最終方案呈現:

3、簡單謙虛的色彩

色彩方面,以顏色中最具有系統性,科技感的藍色為主,同時藍色也是米大師品牌色,頁面區塊背景部分用簡單的“白-灰-白”進行區分,使主體內容突出的同時減少用戶的閱讀阻力,提供了更舒適的體驗。

4、統一全平臺的規范

不同業務模式商品區的內容都不一樣,我們從每個區域入手制定共用規范和可定制規范,統籌各個業務模式,使全平臺統一。

5、規范的網格系統

利用10×10網格統一規范頁面,使視覺效果更為舒適的同時,減少設計和開發的成本,并且可以根據網格將頁面各個部分進行精確拆分,為復用多種業務模式提供了很好的基礎。

四、項目歷程

 

作者:heychen

來源:http://cdc.tencent.com/

本文來源于人人都是產品經理合作媒體@騰訊CDC,作者@zake

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 我有個問題想要請問一下。為什么標題區域的icon設置為25而不是24或者26偶數呢,一般來說設計成偶數不是更好處理嗎?是出于什么原因選擇了25呢?

    來自廣東 回復
  2. ?

    來自北京 回復
  3. 仰望吧,仰望高端玩家

    來自上海 回復
  4. ??

    來自浙江 回復