本文作者將對本次的米大師web改版設(shè)計進(jìn)行了總結(jié)，主要是針對已知問題，從三個方面進(jìn)行解決。

一、項(xiàng)目背景

1、米大師web是什么

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

2、為什么要改版

原版米大師web的后臺和前端還停留在09年，隨著接入業(yè)務(wù)增加，用戶的體驗(yàn)問題也隨之出現(xiàn)。

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

二、設(shè)計目標(biāo)

改版需要針對已知問題進(jìn)行解決，設(shè)計主要從三個方面進(jìn)行解決：

1、零散信息歸類整合，減少表單閱讀負(fù)擔(dān)

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

2、按照用戶路徑進(jìn)行信息分區(qū)，優(yōu)化視覺動線

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

歸納法&窮舉法

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

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

窮舉所有支付方式步驟，得出步驟與頁面的關(guān)系的表格。

(2)窮舉法——結(jié)合限制，制定最優(yōu)支付方案

根據(jù)步驟與頁面的關(guān)系表格，結(jié)合業(yè)務(wù)特點(diǎn)、彈窗尺寸限制，窮舉所有情況。

作為支持多種業(yè)務(wù)模式的支付方案，統(tǒng)一各業(yè)務(wù)場景下的體驗(yàn)尤為重要，使其適用于多種業(yè)務(wù)，各種屏幕，同時減少開發(fā)的成本。

三、簡潔舒適的視覺設(shè)計

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

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

2、精挑細(xì)選的商品卡片區(qū)表現(xiàn)

步驟一：拆解

在商品內(nèi)容區(qū)的表現(xiàn)過程中，我們參考了許多競品，拆解出商品卡片內(nèi)容中的模塊和重要的元素，主要從這幾個元素入手，進(jìn)行組合嘗試，打造最優(yōu)的商品內(nèi)容區(qū)視覺表現(xiàn)。

步驟二：羅列

通過參考和梳理，羅列主要模塊內(nèi)主要元素表現(xiàn)方式，并進(jìn)行組合嘗試。

步驟三：重組

將區(qū)域內(nèi)整理出來的主要元素進(jìn)行“重組”，進(jìn)行嘗試，發(fā)現(xiàn)多種組件形式，示例如下：

步驟四：判斷

組合嘗試，發(fā)現(xiàn)多種方案，通過判斷標(biāo)準(zhǔn)選擇最優(yōu)。

備注：判斷要有標(biāo)準(zhǔn)。這里我們對方案進(jìn)行了快速用研，確定了信息的優(yōu)先級：運(yùn)營信息>主要價格>商品檔位>輔助信息

最終方案呈現(xiàn)：

3、簡單謙虛的色彩

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

4、統(tǒng)一全平臺的規(guī)范

不同業(yè)務(wù)模式商品區(qū)的內(nèi)容都不一樣，我們從每個區(qū)域入手制定共用規(guī)范和可定制規(guī)范，統(tǒng)籌各個業(yè)務(wù)模式，使全平臺統(tǒng)一。

5、規(guī)范的網(wǎng)格系統(tǒng)

利用10×10網(wǎng)格統(tǒng)一規(guī)范頁面，使視覺效果更為舒適的同時，減少設(shè)計和開發(fā)的成本，并且可以根據(jù)網(wǎng)格將頁面各個部分進(jìn)行精確拆分，為復(fù)用多種業(yè)務(wù)模式提供了很好的基礎(chǔ)。

四、項(xiàng)目歷程

以上就是上海網(wǎng)站制作公司——海淘科技為你推出《米大師web改版之設(shè)計總結(jié)》的全部內(nèi)容。想看更多的內(nèi)容，可點(diǎn)擊：幾何與網(wǎng)頁設(shè)計，于此同時，海淘科技還提供了網(wǎng)站建設(shè)案例，可點(diǎn)擊：電子商務(wù)網(wǎng)站設(shè)計與制作