編者按：來看看為了讓你的付費體驗更流暢，給錢更爽快，騰訊這個設計團隊做了哪些改進。

1. 項目背景

米大師Web是什么？

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

為什么要改版？

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

△ 看看舊版的界面，以QQ會員開通為例

2. 設計目標

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

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

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

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

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

歸納法＆窮舉法

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

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

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

2. 窮舉法——結合限制，制定最優支付方案

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

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

3. 簡潔舒適的視覺設計

更好的處理信息集合 — 卡片式展示

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

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

步驟一：拆解

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

步驟二：羅列

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

步驟三：重組

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

步驟四：判斷

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

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

最終方案呈現:

簡單謙虛的色彩

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

統一全平臺的規范

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

規范的網格系統

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

4. 項目歷程

「干貨超足的5個改版實戰經驗總結」

1. LOGO 改版：《揭秘LOGO設計流程！超詳細的騰訊云LOGO 改版記錄全過程》
2. 官網改版：《QQ官網全新蛻變！IM QQ 改版（第一期）設計總結》
3. Pinterest 改版：《改版實戰！聊聊PINTEREST官網再設計過程的經驗思考》
4. QQ 新版表情：《騰訊ISUX丨揭秘QQ 新版表情背后的設計故事》
5. 提升數據：《騰訊ISUX丨通過優化，我們將QQ會員付費用戶數提高了5倍！》

【優設網 原創文章 投稿郵箱：yuan@uisdc.com】

================明星欄目推薦================

優優教程網： UiiiUiii.com 是優設旗下優質中文教程網站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎設計愛好者也準備了貼心的知識樹專欄。開啟免費自學新篇章，按照我們的專欄一步步學習，一定可以迅速上手并制作出酷炫的視覺效果。

設計導航：國內人氣最高的設計網址導航，設計師必備：http://hao.uisdc.com