2020-5-19 資深UI設(shè)計者
以下是百度網(wǎng)盤UE團隊近期對會員中心體驗進行優(yōu)化，希望對大家做商業(yè)化產(chǎn)品有所幫助。
會員中心是承載著產(chǎn)品增值權(quán)益展示、購買、管理的「集合地」。自2016年起推出會員和超級會員兩項增值服務(wù)至今已有4年時間，隨著時間推移，用戶對網(wǎng)盤會員的訴求越來越多樣，會員中心也不僅僅承載著支付能力，更多地是獲取福利信息和情感上的尊享感知，同時在產(chǎn)品框架上的拓展性和效率也有待提升，因此有了本次會員中心改版項目。
對于設(shè)計師而言，我們發(fā)起這個項目所面臨的挑戰(zhàn)，不僅停留在用戶體驗的優(yōu)化還需要兼顧商業(yè)轉(zhuǎn)化。接下來將從確定目標、會員中心框架重構(gòu)、視覺語言升級、沉淀通用組件等方面，跟大家分享下改版背后的設(shè)計思考。
在著手推進項目設(shè)計前，我們通過定性和定量的分析，并組織多角色對本次升級的目標進行確認，本次升級的目標是：提升用戶決策效率；提升用戶尊享感；沉淀設(shè)計組件庫。
1. 為什么要提升用戶決策效率？
會員中心是價值與信息的洼地，用戶需要在眾多特權(quán)、優(yōu)惠信息中做出決策。整個框架清晰、直觀、易懂，是提升用戶決策效率及滿意度的關(guān)鍵所在。
我們通過支付轉(zhuǎn)化漏斗分析并結(jié)合用戶反饋發(fā)現(xiàn)，改版前，會員中心信息架構(gòu)比較扁平和單一，缺乏關(guān)鍵性信息的直觀展示，比如：優(yōu)惠信息、會員服務(wù)信息，導致部分用戶無法在付費過程中更好地做決策。
此外，在支付流程上，操作鏈條較長，容易引起用戶厭倦，導致用戶流失?；谶@些考慮，我們將對現(xiàn)有框架進行升級，以提升用戶的決策效率。
2. 為什么要提升用戶尊享感？
會員中心也是用戶感知身份變化、感知會員尊享的第一步。改版前，不同身份用戶（未開通/會員/超級會員）看到的會員頁面卻是相同的，無法直觀感受到不同身份的差異。
通過UER的用戶訪談我們也發(fā)現(xiàn)，很多用戶出現(xiàn)以下場景：
購買會員后用戶，產(chǎn)生疑惑「是否購買成功了嗎？」；身為超級會員用戶，「感受不到任何尊享感受」；快過期的會員用戶，「對會員/超級會員快過期的也感知不到，導致特權(quán)中斷，影響使用體驗」…
因此，我們需要對整體身份的感知進行升級，讓用戶更清晰地感知到自己身份的層級。
3. 為什么要沉淀設(shè)計組件庫？
對于產(chǎn)品而言，會員中心也是會員類活動的主要運營渠道。
在日常「小步快跑」迭代需求中，為了提升項目組的開發(fā)效率以及更好地實現(xiàn)產(chǎn)品側(cè)多場景模塊靈活調(diào)用的訴求，需要對復用率較高且靈活多變的模塊（尤其是支付模塊、特權(quán)模塊）進行組件化。因此我們也對多個模塊進行組件沉淀，提升產(chǎn)品迭代效率。不僅于此，組件化也能給用戶提供更加統(tǒng)一的認知，做到產(chǎn)品體驗上的統(tǒng)一和規(guī)范化。
明確了目標后，我們從以下維度進行設(shè)計升級，解決現(xiàn)存問題：懂你所想，會員中心框架重構(gòu)；凸顯尊享感知，視覺語言升級；提升迭代效率，通用組件沉淀。
我們本次框架重構(gòu)的關(guān)鍵詞就是「懂你所想」，只有更了解用戶，才能提供更符合用戶的選擇，從而提升用戶決策效率。因此，我們在交互框架層面上，做了以下幾件事：打造分層布局；強化關(guān)鍵信息；縮短支付步長；智能化推薦。
打造分層布局
進入會員中心的用戶，根據(jù)會員成長周期可被劃分為：歷史未付費用戶、會員開通中用戶、會員即將過期用戶、會員已過期用戶。
因此，在這次框架設(shè)計中，我們根據(jù)身份、動機、行為的差異進行分層布局。改變以往的「多人一面」的布局架構(gòu)，打造出新的「多人多面」的靈活分層頁面布局。
當用戶是歷史未付費用戶時，我們更加突出用戶的特權(quán)介紹和商品支付，便于用戶了解會員服務(wù)和商品信息；當用戶是開通中的用戶，我們更加突出用戶可尊享的福利信息，突出尊享感；當用戶為即將過期用戶或已過期用戶時，我們展示用戶常用特權(quán)信息，喚醒用戶付費意愿，并為用戶提供便捷的續(xù)費能力。
下面是改版前后效果對比，從單一身份感知到多元分層處理。
強化關(guān)鍵信息
關(guān)鍵信息也是用戶更為「關(guān)心」的信息，通過調(diào)研發(fā)現(xiàn)，網(wǎng)盤用戶更加關(guān)注會員優(yōu)惠活動信息、服務(wù)到期提醒以及會員之間的差異性，因此在本次升級中，我們對用戶所關(guān)心的決策信息進行強化，恰如其分地展示便于用戶決策，同時提升用戶的付費意愿。
新增運營渠道
通過用戶訪談，了解到很多用戶總是錯過網(wǎng)盤的福利活動，不知道在哪里能接受到一手信息。
因此，本次升級我們在會員中心中新增了運營位，增加用戶關(guān)注的優(yōu)惠活動的曝光。
服務(wù)到期提醒
針對即將過期或已過期的用戶，我們會展示用戶常用特權(quán)功能的即將到期的信息，避免用戶特權(quán)功能到期后，給用戶日常使用帶來困擾，比如使用視頻原畫備份等功能，我們也會提前告知給用戶：「3天后即將到期，將不再享有視頻原畫備份和在線解壓等11項特權(quán)」，讓用戶提前做決策。
強化特權(quán)的差異對比
此外，我們還強化了特權(quán)對比的差異，分別展示了普通用戶、會員用戶、超級會員用戶擁有特權(quán)功能的差異性，便于用戶根據(jù)自身需求選擇對應(yīng)更為合適的會員服務(wù)，避免買錯等一系列不便或者多花冤枉錢的行為。
縮短支付步長
為了更方便用戶進行支付，讓用戶付費行為更加順暢絲滑，我們摒棄以往全頁面跳轉(zhuǎn)形式，采用了浮層收銀臺的方式，減少用戶在頁面間的跳轉(zhuǎn)而帶來的迷失感，達到簡化支付路徑的目的。
也在用戶即將過期等狀態(tài)，保留了原有前置展示商品和支付操作的方式，讓用戶一鍵完成續(xù)費，方便又快捷。同時，也會在用戶選擇商品支付時，展示用戶帳號信息，避免用戶買錯的問題。
智能化推薦
與以往不同，我們不局限于通過理性的信息展示，讓用戶自己搜尋信息、被動匹配，同時我們也在不斷嘗試采用更加擬人化、對話感的方式觸達用戶，推送給用戶更為關(guān)注的信息，更加精細化地探索多樣的運營場景。
比如：針對已付費用戶，結(jié)合用戶的使用場景，更多展示特權(quán)信息，如：「周末看視頻，2倍速、2K、極速加載缺一不可」；
當我們上了會員新特權(quán)的時候，也會及時告知用戶，讓他們享受更加豐富的權(quán)益。
本次對會員中心的視覺呈現(xiàn)也做了全新升級，不僅凸顯會員的尊享感、情感化，同時兼顧用戶的識別效率及后續(xù)拓展性，針對這一目標，我們做了以下優(yōu)化：卡面升級，提升身份感；品牌色優(yōu)化，確保拓展性；icon重塑，強化識別性；驚喜彩蛋，提升情感化。
卡片升級，提升身份感
會員身份卡片是用戶直觀感受身份變化的第一步。本次卡片設(shè)計中，在卡片比例上，盡可能接近于實物卡片，并在卡面肌理表達上，采用磨砂質(zhì)地，更貼合用戶自然認知，卡片顏色結(jié)合會員品牌色進行設(shè)計。同時結(jié)合網(wǎng)盤品牌基因中的logo的「云」，提升品牌差異化。
當用戶進入會員中心時，采用光影動效，同時描繪「云」型，提升視覺層次感，同時加深用戶認知。
品牌色優(yōu)化，確保拓展性
我們還重新定義了會員體系的品牌色，超級會員選用黑金配色來突顯最高級別身份。
主題色延續(xù)了網(wǎng)盤會員色系，超級會員為金色，會員為紅色，在此基礎(chǔ)上調(diào)整色彩明度。新配色在產(chǎn)品界面和運營活動上，能給用戶帶來更加直觀的身份感知。
輔助色為黑白，因為它是色彩世界中的 「 經(jīng)典 」 ，給人以簡潔、純粹的審美感受和視覺享受。以黑白色作為會員體系的輔助色，可以襯托出黑金配色的尊享感。
icon重塑，強化識別性
在特權(quán)icon設(shè)計中，強化識別性是本次優(yōu)化的重點，因為圖標的目的是用來輔助用戶識別，幫助用戶做決策的。
我們在icon表現(xiàn)手法上，從「線性」改成「面性」，增強視覺比重；去除底部圓形襯底，采用異型圖標，強化icon之前的差異化，同時異型的icon在占比較小的區(qū)域里使用更加節(jié)省空間，提升拓展性。
比如，當用戶是未付費時，特權(quán)icon僅作為輔助圖形，因為在這種場景下，icon遠沒有文案更能幫助用戶清晰理解，避免用戶買錯。
因此異型、面性、無襯底的icon處理手法，也是在拓展方面較優(yōu)選擇。
以下是icon優(yōu)化后的整體效果。
驚喜彩蛋，提升情感化
尊享感，不僅體現(xiàn)在功能、視覺層面，還體現(xiàn)在情感化關(guān)懷，因此我們通過彩蛋式翻卡的觸發(fā)形式，采用對話的方式，展示互動文案。
當用戶首次進行翻卡時，它會貼心問候：「很高興你與你相遇，愿美好時光與你相伴?！?；當用戶日?；訒r，它風趣幽默：「據(jù)說超級會員，法力無邊！」「你喜歡的樣子超級會員都有~」；當有用戶關(guān)注的重要消息時，它會及時預告式通知：「4.11日即將有一大波優(yōu)惠福利襲來，超級會員最高5折哦」，從而營造一個風趣又貼心的小管家，也讓我們的網(wǎng)盤會員服務(wù)變得更加貼心。
會員中心包括個人信息展示、身份卡片、商品和支付、尊享特權(quán)、尊享福利、成長體系、專屬內(nèi)容、積分兌換等模塊。
其中有多種模塊會在多場景中進行復用，為了節(jié)省開發(fā)及設(shè)計成本，同時保證體驗一致性，我們本次也沉淀出能夠靈活調(diào)整各個模塊的位置的組件，來提升產(chǎn)品及運營效率。
比如：支付模塊；特權(quán)展示模塊。
支付模塊
支付模塊承載了會員類商品信息的展示，會在多個場景出現(xiàn)，比如：浮層收銀臺、會員中心頁面、全端收銀臺，以及會員類運營活動。為了保證支付體驗的一致性，我們優(yōu)先對支付模塊進行統(tǒng)一和規(guī)范，包括其中的商品展示、優(yōu)惠展示、以及支付按鈕的規(guī)范化。
為了便于用戶感知到會員與超級會員之間的差異，避免錯誤購買帶來的困擾，我們通過品牌色（超級會員的金色，會員的紅色）進行區(qū)分。
支付模塊的統(tǒng)一和差異，既能保持支付體驗的一致性，也能避免用戶對會員權(quán)益產(chǎn)生誤解，為用戶帶來了更規(guī)范的支付體驗。
特權(quán)展示模塊
對于特權(quán)展示模塊進行特權(quán)展示的優(yōu)化，針對以往特權(quán)數(shù)量多占用空間大，以及特權(quán)展示信息過少用戶看不懂的問題，不再采用平鋪的方式，而是采用利用橫向空間的側(cè)滑方式展示，節(jié)省更多空間；不再采用原有的特權(quán)圖標+特權(quán)名稱的方式，而是同時展示輔助特權(quán)信息，便于用戶更加了解特權(quán)內(nèi)容。
并將特權(quán)展示方式進行組件化，當有新特權(quán)上線時，可直接通過后臺配置進行上線，無需進行開發(fā)，提升效率。
同時，我們還完成了運營位、專享內(nèi)容、專屬推薦等多個模塊的組件化，也根據(jù)會員商業(yè)化的設(shè)計規(guī)范，形成會員中心的組件庫，提升合作效率及用戶統(tǒng)一的認知體驗。
以上就是本次會員中心改版項目的全過程，從前期用戶調(diào)研、目標確定（1.提升用戶決策效率；2.提升用戶尊享感；3.提升迭代效率），到通過多維度地將目標落地（1.懂你所想，會員中心框架重構(gòu)；2.凸顯尊享感知，視覺語言升級；3.提升迭代效率，通用組件沉淀），不僅優(yōu)化了體驗、提高了效率，也對付費轉(zhuǎn)化率有所提升。
本次會員中心改版，是網(wǎng)盤所有同學的共同努力，同時也是會員中心提供給用戶更多選擇、更率、更多服務(wù)的第一步，它不再是機械的信息展示和冰冷的支付平臺，而是更懂用戶、提供給用戶更多元服務(wù)的聚集地。
目前還有很多不足和待完善的地方，我們也在盡最大努力為用戶提供更好更有價值的服務(wù)，感謝大家一致以來的支持與陪伴 。
文章來源：優(yōu)設(shè) 作者：百度UE團隊
藍藍設(shè)計的小編 http://www.miumiuwan.com