來看看為了讓你的付費(fèi)體驗(yàn)更流暢,給錢更爽快,騰訊這個(gè)設(shè)計(jì)團(tuán)隊(duì)做了哪些改進(jìn)。
米大師Web是什么?
米大師Web是計(jì)費(fèi)平臺(tái)部為公司以及合作方提供的,Web 端泛娛樂業(yè)務(wù)支付解決方案。后臺(tái)以SDK包提供給業(yè)務(wù),前端以支付彈窗形式適配所有業(yè)務(wù)場(chǎng)景。
為什么要改版?
原版米大師Web的后臺(tái)和前端還停留在09年,隨著接入業(yè)務(wù)增加,用戶的體驗(yàn)問題也隨之出現(xiàn)。
△ 看看舊版的界面,以QQ會(huì)員開通為例
改版需要針對(duì)已知問題進(jìn)行解決,設(shè)計(jì)主要從三個(gè)方面進(jìn)行解決。
1. 零散信息歸類整合,減少表單閱讀負(fù)擔(dān)
原來版面信息以表單呈現(xiàn),信息分散,影響閱讀。改版把信息重新歸納整合,提高閱讀效率。
2. 按照用戶路徑進(jìn)行信息分區(qū),優(yōu)化視覺動(dòng)線
原來版面商品信息和支付信息混雜一起,影響用戶處理效率。改版后按照用戶的路徑“選商品→支付商品”,重新進(jìn)行信息分區(qū),優(yōu)化用戶視覺動(dòng)線,提高處理效率。
歸納法&窮舉法
改版的最大目標(biāo)是支付效率的提高。但是由于是場(chǎng)景內(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ù)場(chǎng)景下的體驗(yàn)尤為重要,使其適用于多種業(yè)務(wù),各種屏幕,同時(shí)減少開發(fā)的成本。
更好的處理信息集合 — 卡片式展示
在主要信息的表現(xiàn)中,合理利用空間,將單個(gè)內(nèi)容信息打包,采用卡片式展示,能給用戶帶來更好的視覺一致性,易于操作,也能有效的對(duì)同類信息進(jìn)行了區(qū)分,同時(shí)卡片式的展示方式弄夠更好的容納多種內(nèi)容,便于多種業(yè)務(wù)模式復(fù)用。
精挑細(xì)選的商品卡片區(qū)表現(xiàn)
步驟一:拆解
在商品內(nèi)容區(qū)的表現(xiàn)過程中,我們參考了許多競(jìng)品,拆解出商品卡片內(nèi)容中的模塊和重要的元素,主要從這幾個(gè)元素入手,進(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)。這里我們對(duì)方案進(jìn)行了快速用研,確定了信息的優(yōu)先級(jí):運(yùn)營信息>主要價(jià)格>商品檔位>輔助信息
最終方案呈現(xiàn):
簡(jiǎn)單謙虛的色彩
色彩方面,以顏色中最具有系統(tǒng)性,科技感的藍(lán)色為主,同時(shí)藍(lán)色也是米大師品牌色,頁面區(qū)塊背景部分用簡(jiǎn)單的“白-灰-白”進(jìn)行區(qū)分,使主體內(nèi)容突出的同時(shí)減少用戶的閱讀阻力,提供了更舒適的體驗(yàn)。
統(tǒng)一全平臺(tái)的規(guī)范
不同業(yè)務(wù)模式商品區(qū)的內(nèi)容都不一樣,我們從每個(gè)區(qū)域入手制定共用規(guī)范和可定制規(guī)范,統(tǒng)籌各個(gè)業(yè)務(wù)模式,使全平臺(tái)統(tǒng)一。
規(guī)范的網(wǎng)格系統(tǒng)
利用10×10網(wǎng)格統(tǒng)一規(guī)范頁面,使視覺效果更為舒適的同時(shí),減少設(shè)計(jì)和開發(fā)的成本,并且可以根據(jù)網(wǎng)格將頁面各個(gè)部分進(jìn)行精確拆分,為復(fù)用多種業(yè)務(wù)模式提供了很好的基礎(chǔ)。
以上就是上海網(wǎng)站建設(shè)公司——海淘科技為你整理的《騰訊的付費(fèi)和流程界面設(shè)計(jì)》全部?jī)?nèi)容。如果想要觀看網(wǎng)站建設(shè)案例:建筑裝飾設(shè)計(jì)公司網(wǎng)站案例,以及其他精彩的數(shù)學(xué)與網(wǎng)頁設(shè)計(jì)可直接點(diǎn)擊查看