以下是百度網(wǎng)盤UE團(tuán)隊(duì)近期對會員中心體驗(yàn)進(jìn)行優(yōu)化，希望對大家做商業(yè)化產(chǎn)品有所幫助。

項(xiàng)目背景

會員中心是承載著產(chǎn)品增值權(quán)益展示、購買、管理的「集合地」。自2016年起推出會員和超級會員兩項(xiàng)增值服務(wù)至今已有4年時間，隨著時間推移，用戶對網(wǎng)盤會員的訴求越來越多樣，會員中心也不僅僅承載著支付能力，更多地是獲取福利信息和情感上的尊享感知，同時在產(chǎn)品框架上的拓展性和效率也有待提升，因此有了本次會員中心改版項(xiàng)目。

對于設(shè)計師而言，我們發(fā)起這個項(xiàng)目所面臨的挑戰(zhàn)，不僅停留在用戶體驗(yàn)的優(yōu)化還需要兼顧商業(yè)轉(zhuǎn)化。接下來將從確定目標(biāo)、會員中心框架重構(gòu)、視覺語言升級、沉淀通用組件等方面，跟大家分享下改版背后的設(shè)計思考。

確認(rèn)目標(biāo)

在著手推進(jìn)項(xiàng)目設(shè)計前，我們通過定性和定量的分析，并組織多角色對本次升級的目標(biāo)進(jìn)行確認(rèn)，本次升級的目標(biāo)是：提升用戶決策效率；提升用戶尊享感；沉淀設(shè)計組件庫。

1. 為什么要提升用戶決策效率？

會員中心是價值與信息的洼地，用戶需要在眾多特權(quán)、優(yōu)惠信息中做出決策。整個框架清晰、直觀、易懂，是提升用戶決策效率及滿意度的關(guān)鍵所在。

我們通過支付轉(zhuǎn)化漏斗分析并結(jié)合用戶反饋發(fā)現(xiàn)，改版前，會員中心信息架構(gòu)比較扁平和單一，缺乏關(guān)鍵性信息的直觀展示，比如：優(yōu)惠信息、會員服務(wù)信息，導(dǎo)致部分用戶無法在付費(fèi)過程中更好地做決策。

此外，在支付流程上，操作鏈條較長，容易引起用戶厭倦，導(dǎo)致用戶流失?；谶@些考慮，我們將對現(xiàn)有框架進(jìn)行升級，以提升用戶的決策效率。

2. 為什么要提升用戶尊享感？

會員中心也是用戶感知身份變化、感知會員尊享的第一步。改版前，不同身份用戶（未開通/會員/超級會員）看到的會員頁面卻是相同的，無法直觀感受到不同身份的差異。

通過UER的用戶訪談我們也發(fā)現(xiàn)，很多用戶出現(xiàn)以下場景：

購買會員后用戶，產(chǎn)生疑惑「是否購買成功了嗎？」；身為超級會員用戶，「感受不到任何尊享感受」；快過期的會員用戶，「對會員/超級會員快過期的也感知不到，導(dǎo)致特權(quán)中斷，影響使用體驗(yàn)」…

因此，我們需要對整體身份的感知進(jìn)行升級，讓用戶更清晰地感知到自己身份的層級。

3. 為什么要沉淀設(shè)計組件庫？

對于產(chǎn)品而言，會員中心也是會員類活動的主要運(yùn)營渠道。

在日?！感〔娇炫堋沟枨笾?，為了提升項(xiàng)目組的開發(fā)效率以及更好地實(shí)現(xiàn)產(chǎn)品側(cè)多場景模塊靈活調(diào)用的訴求，需要對復(fù)用率較高且靈活多變的模塊（尤其是支付模塊、特權(quán)模塊）進(jìn)行組件化。因此我們也對多個模塊進(jìn)行組件沉淀，提升產(chǎn)品迭代效率。不僅于此，組件化也能給用戶提供更加統(tǒng)一的認(rèn)知，做到產(chǎn)品體驗(yàn)上的統(tǒng)一和規(guī)范化。

設(shè)計落地

明確了目標(biāo)后，我們從以下維度進(jìn)行設(shè)計升級，解決現(xiàn)存問題：懂你所想，會員中心框架重構(gòu)；凸顯尊享感知，視覺語言升級；提升迭代效率，通用組件沉淀。

1. 懂你所想，會員中心框架重構(gòu)

我們本次框架重構(gòu)的關(guān)鍵詞就是「懂你所想」，只有更了解用戶，才能提供更符合用戶的選擇，從而提升用戶決策效率。因此，我們在交互框架層面上，做了以下幾件事：打造分層布局；強(qiáng)化關(guān)鍵信息；縮短支付步長；智能化推薦。

打造分層布局

進(jìn)入會員中心的用戶，根據(jù)會員成長周期可被劃分為：歷史未付費(fèi)用戶、會員開通中用戶、會員即將過期用戶、會員已過期用戶。

因此，在這次框架設(shè)計中，我們根據(jù)身份、動機(jī)、行為的差異進(jìn)行分層布局。改變以往的「多人一面」的布局架構(gòu)，打造出新的「多人多面」的靈活分層頁面布局。

當(dāng)用戶是歷史未付費(fèi)用戶時，我們更加突出用戶的特權(quán)介紹和商品支付，便于用戶了解會員服務(wù)和商品信息；當(dāng)用戶是開通中的用戶，我們更加突出用戶可尊享的福利信息，突出尊享感；當(dāng)用戶為即將過期用戶或已過期用戶時，我們展示用戶常用特權(quán)信息，喚醒用戶付費(fèi)意愿，并為用戶提供便捷的續(xù)費(fèi)能力。

下面是改版前后效果對比，從單一身份感知到多元分層處理。

強(qiáng)化關(guān)鍵信息

關(guān)鍵信息也是用戶更為「關(guān)心」的信息，通過調(diào)研發(fā)現(xiàn)，網(wǎng)盤用戶更加關(guān)注會員優(yōu)惠活動信息、服務(wù)到期提醒以及會員之間的差異性，因此在本次升級中，我們對用戶所關(guān)心的決策信息進(jìn)行強(qiáng)化，恰如其分地展示便于用戶決策，同時提升用戶的付費(fèi)意愿。

新增運(yùn)營渠道

通過用戶訪談，了解到很多用戶總是錯過網(wǎng)盤的福利活動，不知道在哪里能接受到一手信息。

因此，本次升級我們在會員中心中新增了運(yùn)營位，增加用戶關(guān)注的優(yōu)惠活動的曝光。

服務(wù)到期提醒

針對即將過期或已過期的用戶，我們會展示用戶常用特權(quán)功能的即將到期的信息，避免用戶特權(quán)功能到期后，給用戶日常使用帶來困擾，比如使用視頻原畫備份等功能，我們也會提前告知給用戶：「3天后即將到期，將不再享有視頻原畫備份和在線解壓等11項(xiàng)特權(quán)」，讓用戶提前做決策。

強(qiáng)化特權(quán)的差異對比

此外，我們還強(qiáng)化了特權(quán)對比的差異，分別展示了普通用戶、會員用戶、超級會員用戶擁有特權(quán)功能的差異性，便于用戶根據(jù)自身需求選擇對應(yīng)更為合適的會員服務(wù)，避免買錯等一系列不便或者多花冤枉錢的行為。

縮短支付步長

為了更方便用戶進(jìn)行支付，讓用戶付費(fèi)行為更加順暢絲滑，我們摒棄以往全頁面跳轉(zhuǎn)形式，采用了浮層收銀臺的方式，減少用戶在頁面間的跳轉(zhuǎn)而帶來的迷失感，達(dá)到簡化支付路徑的目的。

也在用戶即將過期等狀態(tài)，保留了原有前置展示商品和支付操作的方式，讓用戶一鍵完成續(xù)費(fèi)，方便又快捷。同時，也會在用戶選擇商品支付時，展示用戶帳號信息，避免用戶買錯的問題。

智能化推薦

與以往不同，我們不局限于通過理性的信息展示，讓用戶自己搜尋信息、被動匹配，同時我們也在不斷嘗試采用更加擬人化、對話感的方式觸達(dá)用戶，推送給用戶更為關(guān)注的信息，更加精細(xì)化地探索多樣的運(yùn)營場景。

比如：針對已付費(fèi)用戶，結(jié)合用戶的使用場景，更多展示特權(quán)信息，如：「周末看視頻，2倍速、2K、極速加載缺一不可」；

當(dāng)我們上了會員新特權(quán)的時候，也會及時告知用戶，讓他們享受更加豐富的權(quán)益。

2. 凸顯尊享感知，視覺語言升級

本次對會員中心的視覺呈現(xiàn)也做了全新升級，不僅凸顯會員的尊享感、情感化，同時兼顧用戶的識別效率及后續(xù)拓展性，針對這一目標(biāo)，我們做了以下優(yōu)化：卡面升級，提升身份感；品牌色優(yōu)化，確保拓展性；icon重塑，強(qiáng)化識別性；驚喜彩蛋，提升情感化。

卡片升級，提升身份感

會員身份卡片是用戶直觀感受身份變化的第一步。本次卡片設(shè)計中，在卡片比例上，盡可能接近于實(shí)物卡片，并在卡面肌理表達(dá)上，采用磨砂質(zhì)地，更貼合用戶自然認(rèn)知，卡片顏色結(jié)合會員品牌色進(jìn)行設(shè)計。同時結(jié)合網(wǎng)盤品牌基因中的logo的「云」，提升品牌差異化。

當(dāng)用戶進(jìn)入會員中心時，采用光影動效，同時描繪「云」型，提升視覺層次感，同時加深用戶認(rèn)知。

品牌色優(yōu)化，確保拓展性

我們還重新定義了會員體系的品牌色，超級會員選用黑金配色來突顯最高級別身份。

主題色延續(xù)了網(wǎng)盤會員色系，超級會員為金色，會員為紅色，在此基礎(chǔ)上調(diào)整色彩明度。新配色在產(chǎn)品界面和運(yùn)營活動上，能給用戶帶來更加直觀的身份感知。

輔助色為黑白，因?yàn)樗巧适澜缰械?「 經(jīng)典 」 ，給人以簡潔、純粹的審美感受和視覺享受。以黑白色作為會員體系的輔助色，可以襯托出黑金配色的尊享感。

icon重塑，強(qiáng)化識別性

在特權(quán)icon設(shè)計中，強(qiáng)化識別性是本次優(yōu)化的重點(diǎn)，因?yàn)閳D標(biāo)的目的是用來輔助用戶識別，幫助用戶做決策的。

我們在icon表現(xiàn)手法上，從「線性」改成「面性」，增強(qiáng)視覺比重；去除底部圓形襯底，采用異型圖標(biāo)，強(qiáng)化icon之前的差異化，同時異型的icon在占比較小的區(qū)域里使用更加節(jié)省空間，提升拓展性。

比如，當(dāng)用戶是未付費(fèi)時，特權(quán)icon僅作為輔助圖形，因?yàn)樵谶@種場景下，icon遠(yuǎn)沒有文案更能幫助用戶清晰理解，避免用戶買錯。

因此異型、面性、無襯底的icon處理手法，也是在拓展方面較優(yōu)選擇。

以下是icon優(yōu)化后的整體效果。

驚喜彩蛋，提升情感化

尊享感，不僅體現(xiàn)在功能、視覺層面，還體現(xiàn)在情感化關(guān)懷，因此我們通過彩蛋式翻卡的觸發(fā)形式，采用對話的方式，展示互動文案。

當(dāng)用戶首次進(jìn)行翻卡時，它會貼心問候：「很高興你與你相遇，愿美好時光與你相伴?！梗划?dāng)用戶日?；訒r，它風(fēng)趣幽默：「據(jù)說超級會員，法力無邊！」「你喜歡的樣子超級會員都有~」；當(dāng)有用戶關(guān)注的重要消息時，它會及時預(yù)告式通知：「4.11日即將有一大波優(yōu)惠福利襲來，超級會員最高5折哦」，從而營造一個風(fēng)趣又貼心的小管家，也讓我們的網(wǎng)盤會員服務(wù)變得更加貼心。

3. 提升迭代效率，通用組件沉淀

會員中心包括個人信息展示、身份卡片、商品和支付、尊享特權(quán)、尊享福利、成長體系、專屬內(nèi)容、積分兌換等模塊。

其中有多種模塊會在多場景中進(jìn)行復(fù)用，為了節(jié)省開發(fā)及設(shè)計成本，同時保證體驗(yàn)一致性，我們本次也沉淀出能夠靈活調(diào)整各個模塊的位置的組件，來提升產(chǎn)品及運(yùn)營效率。

比如：支付模塊；特權(quán)展示模塊。

支付模塊

支付模塊承載了會員類商品信息的展示，會在多個場景出現(xiàn)，比如：浮層收銀臺、會員中心頁面、全端收銀臺，以及會員類運(yùn)營活動。為了保證支付體驗(yàn)的一致性，我們優(yōu)先對支付模塊進(jìn)行統(tǒng)一和規(guī)范，包括其中的商品展示、優(yōu)惠展示、以及支付按鈕的規(guī)范化。

為了便于用戶感知到會員與超級會員之間的差異，避免錯誤購買帶來的困擾，我們通過品牌色（超級會員的金色，會員的紅色）進(jìn)行區(qū)分。

支付模塊的統(tǒng)一和差異，既能保持支付體驗(yàn)的一致性，也能避免用戶對會員權(quán)益產(chǎn)生誤解，為用戶帶來了更規(guī)范的支付體驗(yàn)。

特權(quán)展示模塊

對于特權(quán)展示模塊進(jìn)行特權(quán)展示的優(yōu)化，針對以往特權(quán)數(shù)量多占用空間大，以及特權(quán)展示信息過少用戶看不懂的問題，不再采用平鋪的方式，而是采用利用橫向空間的側(cè)滑方式展示，節(jié)省更多空間；不再采用原有的特權(quán)圖標(biāo)+特權(quán)名稱的方式，而是同時展示輔助特權(quán)信息，便于用戶更加了解特權(quán)內(nèi)容。

并將特權(quán)展示方式進(jìn)行組件化，當(dāng)有新特權(quán)上線時，可直接通過后臺配置進(jìn)行上線，無需進(jìn)行開發(fā)，提升效率。

同時，我們還完成了運(yùn)營位、專享內(nèi)容、專屬推薦等多個模塊的組件化，也根據(jù)會員商業(yè)化的設(shè)計規(guī)范，形成會員中心的組件庫，提升合作效率及用戶統(tǒng)一的認(rèn)知體驗(yàn)。

總結(jié)

以上就是本次會員中心改版項(xiàng)目的全過程，從前期用戶調(diào)研、目標(biāo)確定（1.提升用戶決策效率；2.提升用戶尊享感；3.提升迭代效率），到通過多維度地將目標(biāo)落地（1.懂你所想，會員中心框架重構(gòu)；2.凸顯尊享感知，視覺語言升級；3.提升迭代效率，通用組件沉淀），不僅優(yōu)化了體驗(yàn)、提高了效率，也對付費(fèi)轉(zhuǎn)化率有所提升。

本次會員中心改版，是網(wǎng)盤所有同學(xué)的共同努力，同時也是會員中心提供給用戶更多選擇、更率、更多服務(wù)的第一步，它不再是機(jī)械的信息展示和冰冷的支付平臺，而是更懂用戶、提供給用戶更多元服務(wù)的聚集地。

目前還有很多不足和待完善的地方，我們也在盡最大努力為用戶提供更好更有價值的服務(wù)，感謝大家一致以來的支持與陪伴 。

文章來源：優(yōu)設(shè)    作者：百度UE團(tuán)隊(duì)