2017-7-24 用心設(shè)計(jì)
米大師web是計(jì)費(fèi)平臺(tái)部為公司以及合作方提供的，web端泛娛樂(lè)業(yè)務(wù)支付解決方案。后臺(tái)以SDK包提供給業(yè)務(wù)，前端以支付彈窗形式適配所有業(yè)務(wù)場(chǎng)景。
原版米大師web的后臺(tái)和前端還停留在09年，隨著接入業(yè)務(wù)增加，用戶(hù)的體驗(yàn)問(wèn)題也隨之出現(xiàn)。
（看看舊版的界面，以QQ會(huì)員開(kāi)通為例）
改版需要針對(duì)已知問(wèn)題進(jìn)行解決，設(shè)計(jì)主要從三個(gè)方面進(jìn)行解決
1.零散信息歸類(lèi)整合，減少表單閱讀負(fù)擔(dān)
原來(lái)版面信息以表單呈現(xiàn)，信息分散，影響閱讀。改版把信息重新歸納整合，提高閱讀效率。
2.按照用戶(hù)路徑進(jìn)行信息分區(qū)，優(yōu)化視覺(jué)動(dòng)線(xiàn)
原來(lái)版面商品信息和支付信息混雜一起，影響用戶(hù)處理效率。改版后按照用戶(hù)的路徑“選商品→支付商品”，重新進(jìn)行信息分區(qū)，優(yōu)化用戶(hù)視覺(jué)動(dòng)線(xiàn)，提高處理效率。
歸納法＆窮舉法
改版的最大目標(biāo)是支付效率的提高。但是由于是場(chǎng)景內(nèi)支付，有彈窗尺寸、業(yè)務(wù)情況不同的限制。因此方案需要綜合考慮所有因素，得出限制下的最優(yōu)方案。
1.歸納法——分析支付方式步驟與頁(yè)面的關(guān)系
窮舉所有支付方式步驟，得出步驟與頁(yè)面的關(guān)系的表格
2.窮舉法——結(jié)合限制，制定最優(yōu)支付方案
根據(jù)步驟與頁(yè)面的關(guān)系表格，結(jié)合業(yè)務(wù)特點(diǎn)、彈窗尺寸限制，窮舉所有情況
作為支持多種業(yè)務(wù)模式的支付方案，統(tǒng)一各業(yè)務(wù)場(chǎng)景下的體驗(yàn)尤為重要，使其適用于多種業(yè)務(wù)，各種屏幕，同時(shí)減少開(kāi)發(fā)的成本。
在主要信息的表現(xiàn)中，合理利用空間，將單個(gè)內(nèi)容信息打包，采用卡片式展示，能給用戶(hù)帶來(lái)更好的視覺(jué)一致性，易于操作，也能有效的對(duì)同類(lèi)信息進(jìn)行了區(qū)分，同時(shí)卡片式的展示方式弄夠更好的容納多種內(nèi)容，便于多種業(yè)務(wù)模式復(fù)用。
步驟一：拆解————————————————————————————-
在商品內(nèi)容區(qū)的表現(xiàn)過(guò)程中，我們參考了許多競(jìng)品，拆解出商品卡片內(nèi)容中的模塊和重要的元素，主要從這幾個(gè)元素入手，進(jìn)行組合嘗試，打造最優(yōu)的商品內(nèi)容區(qū)視覺(jué)表現(xiàn)。
步驟二：羅列————————————————————————————-
通過(guò)參考和梳理，羅列主要模塊內(nèi)主要元素表現(xiàn)方式，并進(jìn)行組合嘗試。
步驟三：重組————————————————————————————-
將區(qū)域內(nèi)整理出來(lái)的主要元素進(jìn)行“重組”，進(jìn)行嘗試，發(fā)現(xiàn)多種組件形式，示例如下：
步驟四：判斷————————————————————————————-
組合嘗試，發(fā)現(xiàn)多種方案，通過(guò)判斷標(biāo)準(zhǔn)選擇最優(yōu)。
備注：判斷要有標(biāo)準(zhǔn)。這里我們對(duì)方案進(jìn)行了快速用研，確定了信息的優(yōu)先級(jí)：運(yùn)營(yíng)信息＞主要價(jià)格＞商品檔位＞輔助信息
最終方案呈現(xiàn)
色彩方面，以顏色中最具有系統(tǒng)性，科技感的藍(lán)色為主，同時(shí)藍(lán)色也是米大師品牌色，頁(yè)面區(qū)塊背景部分用簡(jiǎn)單的“白-灰-白”進(jìn)行區(qū)分，使主體內(nèi)容突出的同時(shí)減少用戶(hù)的閱讀阻力，提供了更舒適的體驗(yàn)。
不同業(yè)務(wù)模式商品區(qū)的內(nèi)容都不一樣，我們從每個(gè)區(qū)域入手制定共用規(guī)范和可定制規(guī)范，統(tǒng)籌各個(gè)業(yè)務(wù)模式，使全平臺(tái)統(tǒng)一。
利用10×10網(wǎng)格統(tǒng)一規(guī)范頁(yè)面，使視覺(jué)效果更為舒適的同時(shí)，減少設(shè)計(jì)和開(kāi)發(fā)的成本，并且可以根據(jù)網(wǎng)格將頁(yè)面各個(gè)部分進(jìn)行拆分，為復(fù)用多種業(yè)務(wù)模式提供了很好的基礎(chǔ)。
藍(lán)藍(lán)設(shè)計(jì)( www.lzhte.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.lzhte.cn