為什么要改版
舊版充值頁(yè)面設(shè)計(jì)以及體驗(yàn)比較老舊，隨著業(yè)務(wù)擴(kuò)大升級(jí)，現(xiàn)有的架構(gòu)以及功能體驗(yàn)不足的問題也日趨明顯。
主要存在以下問題：
a.樣式老舊
原界面UI老舊
信息閱讀成本大，主次不明
b.支付過程繁瑣
支付路徑過長(zhǎng)，頁(yè)面跳轉(zhuǎn)過多
用戶體驗(yàn)不佳
c.體驗(yàn)不統(tǒng)一
活動(dòng)展示以及入口多種多樣
頁(yè)面操作不統(tǒng)一，存在不需要操作交互
d.業(yè)務(wù)需求
減少充值路徑跳出率
提升訂單轉(zhuǎn)戶率
產(chǎn)品目標(biāo)
做設(shè)計(jì)一般是以目標(biāo)導(dǎo)向設(shè)計(jì)法進(jìn)行設(shè)計(jì)的，本次改版從架構(gòu)層，交互層與視覺層出發(fā)進(jìn)行改版。南寧網(wǎng)站建設(shè)
架構(gòu)層：改動(dòng)部分產(chǎn)品結(jié)構(gòu)，提高主需求的層級(jí)，同時(shí)弱化了非主要需求的層級(jí)，并基于不同使用場(chǎng)景優(yōu)化了產(chǎn)品結(jié)構(gòu)。
交互層：體驗(yàn)上更人性化，突出重點(diǎn)并簡(jiǎn)化部分交互流程。
視覺層：更輕量化，極簡(jiǎn)化，理念上遵頊內(nèi)容為主的設(shè)計(jì)。
改版過程
對(duì)于充值功能是一個(gè)沖動(dòng)消費(fèi)的過程，對(duì)用戶來說最簡(jiǎn)單的操作就是【選中充值金額】-【支付】。在這個(gè)過程中任何一步多出來的操作都會(huì)減少用戶充值的欲望。
1. 高效——用戶
作為一個(gè)用戶打開一個(gè)頁(yè)面，最迫切的想法是立刻看到自己最需要的信息。
改版前
空間浪費(fèi)。左側(cè)tab區(qū)只有3個(gè)選項(xiàng)，最多情況下也只有5個(gè)，并且其中部分充值選項(xiàng)的操作并不會(huì)在該頁(yè)面完成；
信息冗雜，主次不明。每個(gè)信息模塊幾乎是均等的；
點(diǎn)擊【充值】會(huì)跳轉(zhuǎn)到新的窗口，脫離場(chǎng)景。
改版后（原型圖）
突出整個(gè)充值項(xiàng)目模塊。在直播平臺(tái)，用戶關(guān)心的是需要多少虛擬幣，需與支付金額一起提高層級(jí)關(guān)系；
tab整體移到頂部，提高空間利用率，使用戶焦點(diǎn)更聚焦功能；
點(diǎn)擊【充值】在該頁(yè)面出現(xiàn)支付二維碼，降低用戶脫離場(chǎng)景的不良體驗(yàn)。
2. 適配——方式對(duì)應(yīng)場(chǎng)景
降低對(duì)用戶沉浸式體驗(yàn)的打擾，提升用戶體驗(yàn)是每個(gè)產(chǎn)品都需要考慮的。
場(chǎng)景舉例：用戶正在觀看直播，在送禮物的時(shí)候金額數(shù)量不足，點(diǎn)擊充值，跳轉(zhuǎn)到新打開的頁(yè)面。直接脫離用戶當(dāng)前觀看的場(chǎng)景。所以對(duì)用戶來將顯得并不是那么友好。
改版前的充值頁(yè)面，從使用場(chǎng)景上講是打擾用戶觀看體驗(yàn)。
經(jīng)過一系列思考后，從體驗(yàn)上講不應(yīng)該讓用戶脫離當(dāng)前的觀看場(chǎng)景。決定在直播間的充值以彈框的形式展示。同時(shí)保留現(xiàn)有的以網(wǎng)頁(yè)展示的充值頁(yè)面。
直播間彈框展示（原型圖）
在直播間充值方式以彈框展示，減少對(duì)用戶的干擾，提升轉(zhuǎn)化率；
直播間將支付二維碼直接展示出來，即時(shí)刷新，同時(shí)將高頻支付方式展露出來。
3. 兼顧——視覺
彈框?qū)儆谛碌墓δ艹尸F(xiàn)，視覺配色上依舊選用品牌色。網(wǎng)頁(yè)支付頁(yè)面為了更好的區(qū)分主次于功能，調(diào)整了頁(yè)面整體的字體顏色。
4. 最終方案呈現(xiàn)
直播間彈框展示
網(wǎng)頁(yè)支付頁(yè)面
總結(jié)
做設(shè)計(jì)的工作就是在有限的時(shí)間和格局里進(jìn)行突破。在彈框的實(shí)現(xiàn)過程會(huì)遇到不同的問題，譬如活動(dòng)banner，在網(wǎng)頁(yè)中是以橫幅展示，在彈框由于要考慮直播間最小尺寸涉及到的高度問題，需要用豎屏的banner。
這個(gè)項(xiàng)目的導(dǎo)向就是要提升用戶的付費(fèi)率。項(xiàng)目上線后，從結(jié)果數(shù)據(jù)來看有較大的提升。并且后期會(huì)根據(jù)具體的數(shù)據(jù)情況考慮是否將網(wǎng)頁(yè)支付方式去掉，只保留直播間內(nèi)彈框支付。
