京東充值頻道改版是去年參與的項(xiàng)目，本文將以此為例，通過(guò)新舊版對(duì)比的形式來(lái)對(duì)此次改版進(jìn)行簡(jiǎn)要分析與總結(jié)。

先說(shuō)說(shuō)改版為了什么？一般改版需求的源頭來(lái)自KPI和GMV直接掛鉤的業(yè)務(wù)方，所以這類改版目的很簡(jiǎn)單粗暴，就是增加營(yíng)收。

僅主觀的來(lái)看兩個(gè)截圖，可能并不好說(shuō)清楚兩者的體驗(yàn)差異。

下面將按順序進(jìn)行理性的分析（方法借鑒于“那個(gè)老點(diǎn)評(píng)京東天貓的人 ”-龐門(mén)正道）

首先將頁(yè)面置灰并加以高光亮點(diǎn)處理，目的是規(guī)避細(xì)節(jié)視覺(jué)上的打擾，以肉眼較為敏感的明暗對(duì)比來(lái)更直觀的分析頁(yè)面在信息架構(gòu)上的強(qiáng)弱節(jié)奏。

從高光分布（如紅框所示）來(lái)看，舊版因?yàn)槭褂玫氖抢习婀岔?yè)頭，導(dǎo)航視覺(jué)過(guò)強(qiáng)；兩個(gè)廣告位包含在左側(cè)tab導(dǎo)航區(qū)下方，面積與導(dǎo)航本身相當(dāng)；以及主操作區(qū)中slogan和附屬功能的擺放。整體上的頁(yè)面節(jié)奏有所欠缺。

新版 則將 主導(dǎo)航，左側(cè)tab導(dǎo)航，主操作區(qū)，廣告位 各自成區(qū)，互不干擾，滿足不同訴求的用戶更快捷的定位到相應(yīng)的區(qū)域再進(jìn)行操作。主操作區(qū)中的節(jié)奏更利于用戶快速下單。

下來(lái)再對(duì)兩者的信息架構(gòu)觀察分析，這里以“手機(jī)充值”頁(yè)卡為例：

（1）主導(dǎo)航、搜索框

調(diào)用當(dāng)時(shí)京東舊版公共頁(yè)頭，對(duì)全品類業(yè)務(wù)很有幫助，有導(dǎo)流的作用，但不利于充值頻道的閉環(huán)體驗(yàn)，增加頁(yè)面跳出的風(fēng)險(xiǎn)；當(dāng)鼠標(biāo)懸停導(dǎo)航左側(cè)的“全部商品分類”時(shí)，下拉列表會(huì)對(duì)充值業(yè)務(wù)的側(cè)導(dǎo)航造成遮蓋，同樣不利于閉環(huán)體驗(yàn)。

（2）面包屑導(dǎo)航

面包屑導(dǎo)航意義在于防止用戶“迷路”，適用于有較多層級(jí)包含關(guān)系的頁(yè)面，而這里用戶可直接通過(guò)左側(cè)tab導(dǎo)航來(lái)確定自己的位置，功能同質(zhì)化就需要做減法了，保留tab側(cè)導(dǎo)航即可。

（3）tab側(cè)導(dǎo)航

側(cè)導(dǎo)航選項(xiàng)較多，共8個(gè)選項(xiàng)(包括父子選項(xiàng))，這樣做好處是能將更多的功能外露，但是選項(xiàng)多了也會(huì)影響用戶做選擇，8選1的用時(shí)肯定比4選1的用時(shí)多，可以參考Hick’s Law （?？硕桑?，另一方面，選項(xiàng)可點(diǎn)熱區(qū)面積較小、間距較近，影響閱讀和操作，可以參考Fitts’ Law（菲茲定律）。

廣告位置于導(dǎo)航之內(nèi)，且空間占比過(guò)高，雖廣告位對(duì)業(yè)務(wù)來(lái)說(shuō)不可忽視，但若影響了主功能的權(quán)重則得不償失。

（4）核心區(qū) ?

這里將直接影響轉(zhuǎn)化的充值信息填寫(xiě)操作區(qū)域定義為核心區(qū)。

話費(fèi)充值的主流程：

填寫(xiě)號(hào)碼 → 選擇面值 → 瀏覽價(jià)格 → 確認(rèn)充值

舊版的核心區(qū)，元素較多，考慮如下一種極端情況，可能完成一次充值需要：

瀏覽slogan? → 瀏覽進(jìn)度條? → 查看充值類型? → 填寫(xiě)號(hào)碼? → 查看“給多人充值”? → 查看到賬時(shí)間? → 選擇面值? → 瀏覽價(jià)格? → 查看充值幫助? → 確認(rèn)充值

（其中 “瀏覽”僅指看，“查看”指在看的基礎(chǔ)上有可能點(diǎn)擊，“紅字”為主流程。）

（1）主導(dǎo)航、搜索框

使用頻道頁(yè)專業(yè)頁(yè)頭，利于閉環(huán)體驗(yàn)，用戶的充值業(yè)務(wù)訴求不會(huì)被其他無(wú)關(guān)的因素干擾。

（2）tab側(cè)導(dǎo)航

根據(jù)功能的父子關(guān)系，在新增“水電煤繳費(fèi)”功能的基礎(chǔ)上縮減tab數(shù)量為4個(gè)，降低用戶選擇及思考時(shí)間。

（3）核心區(qū)

優(yōu)化下單主干操作環(huán)節(jié)：

填寫(xiě)號(hào)碼 → 選擇面值 → 瀏覽價(jià)格 → 確認(rèn)充值

弱化slogan，附屬功能整合至右上角，幫助入口置于核心區(qū)右側(cè)，加強(qiáng)視覺(jué)表達(dá)，位置遠(yuǎn)離充值按鈕，減少對(duì)下單流程的其他干擾，提升轉(zhuǎn)化效率。

最后

頁(yè)面上線后陸續(xù)切量30%、50%，同時(shí)也針對(duì)一些細(xì)節(jié)及遺留問(wèn)題及時(shí)迭代修改，直至最終切全量（100%）運(yùn)行.
最后數(shù)據(jù)較舊版，頁(yè)面跳出率最大降幅下降50%，轉(zhuǎn)化率較舊版提高了3~5倍，訪次價(jià)值、引入訂單量均有提升（鑒于數(shù)據(jù)敏感，不多做描述）

總結(jié)

不同于實(shí)體商品購(gòu)買(mǎi)場(chǎng)景，該場(chǎng)景下用戶的任務(wù)更清晰、直接，新版突出了充值下單的主操作流程。但在頁(yè)面及品牌氛圍上還稍顯單薄，細(xì)節(jié)上還需迭代優(yōu)化，穩(wěn)步提升體驗(yàn)，爭(zhēng)取為業(yè)務(wù)帶來(lái)更好的創(chuàng)收。

用戶體驗(yàn)離不開(kāi)每位參與者，不論是產(chǎn)品、開(kāi)發(fā)、設(shè)計(jì)還是用戶，不論是好脾氣慢言細(xì)語(yǔ)、還是急性子喋喋不休，體驗(yàn)的價(jià)值也往往產(chǎn)生于彼此的切身體驗(yàn)以及溝通反饋之中，也希望大家有更多的反饋，我們也會(huì)帶著同理心在體驗(yàn)上做的更好。

作者：嚴(yán)杰鐘

來(lái)源：https://jdc.jd.com/archives/2594

版權(quán)聲明：人人都是產(chǎn)品經(jīng)理尊重行業(yè)規(guī)范，所轉(zhuǎn)載的文章都注明作者和來(lái)源，若標(biāo)注有誤，請(qǐng)聯(lián)系主編QQ：419297645更改。