你好昧碉，歡迎來到沐風(fēng)與體驗設(shè)計宙刘。
愛奇藝會員業(yè)務(wù)是公司營收的重要來源之一轨功。收銀臺作為用戶完成會員購買的關(guān)鍵步驟，用戶在這個頁面主要進(jìn)行會員套餐的選擇操作炊苫。沐風(fēng)在2017年進(jìn)行過一個收銀臺改版的需求裁厅，改版后數(shù)據(jù)提升明顯。然鵝侨艾，這個需求當(dāng)時在設(shè)計的時候执虹，并不是一帆風(fēng)順。這里跟大家分享改版的波折卻結(jié)果完滿的歷程唠梨。
先介紹一下改版前的方案狀況袋励。
如下圖所示，改版前的收銀臺由3部分組成：
用戶賬號展示區(qū)域
黃金VIP會員套餐選擇區(qū)域
黃金VIP會員特權(quán)展示區(qū)域
其中，套餐選擇是采用列表的形式茬故，用戶點擊列表中的某個條目盖灸，則執(zhí)行付款操作，從效率的角度來說磺芭，這個頁面還是挺高效的赁炎。
這個頁面的改版，是來自產(chǎn)品同學(xué)提的需求钾腺。起初收到這個需求徙垫，其實是個“一句話需求”：
“收銀臺希望進(jìn)行改版，突出強(qiáng)調(diào)大時長（會員年卡）和自動續(xù)費模式”放棒。
嗯姻报，就是這么簡短。
雖然簡短间螟，但分析需求的內(nèi)容吴旋，產(chǎn)品目標(biāo)還是比較明確的：
- 提升大時長套餐的購買量；
-?提升自動續(xù)費的購買量寒亥。
那么邮府，用戶來到這個頁面有什么目標(biāo)呢？我們來分析一下用戶購買會員的全流程：
用戶被會員的介紹信息或者打折信息所吸引→點擊會員購買入口→進(jìn)入會員收銀臺頁面溉奕。
此時在收銀臺頁面褂傀，用戶最想了解的是每種套餐的收費標(biāo)準(zhǔn)、持續(xù)時長等規(guī)則加勤，進(jìn)而選擇適合自己的套餐仙辟。
總結(jié)一下，這個頁面里用戶的目標(biāo)是：
- 了解套餐信息鳄梅；
- 購買適合自己的套餐叠国。
總結(jié)產(chǎn)品目標(biāo)和用戶目標(biāo)，可以得到此次改版的設(shè)計目標(biāo)有如下4個：
- 突出連續(xù)包月的吸引力
-?突出大時長套餐的吸引力戴尸；
- 清晰展示套餐內(nèi)容粟焊；
-?保證用戶對自己的操作有清晰的認(rèn)知，避免用戶產(chǎn)生不清楚消費孙蒙。
明確目標(biāo)项棠，是得到靠譜方案的第一步，也是最基本的一步挎峦。目標(biāo)找錯了香追，之后的努力很可能沒法得出令大家滿意的結(jié)果，實在是得不償失坦胶。所以透典，在開始一個需求之前晴楔，一定要先確定好設(shè)計目標(biāo)。
目標(biāo)確定了峭咒，開始尋找靈感税弃。研究了市面上的主要競品，優(yōu)酷視頻的會員收銀臺頁面讹语，是把可購買的所有套餐列出來钙皮，然后在底部設(shè)置了一個操作欄，可執(zhí)行購買操作顽决，如下圖：
騰訊視頻的做法比較簡單粗暴：將所有的套餐都列出來短条，然后每個套餐上一個“開通”按鈕，點擊后就可以購買才菠。
看來競品沒有能實現(xiàn)我們這個需求目標(biāo)的方案茸时。Emmmm，怎么破赋访？既然向外借不到力可都，只能向內(nèi)再繼續(xù)分析一下。
改版前的收銀臺蚓耽，會員套餐總共只有4個渠牲，其中只有月份的套餐可以包月，即“連續(xù)包月”套餐步悠，
季度套餐和年度套餐签杈，是不能進(jìn)行連續(xù)包月的。
改版后的期望鼎兽，是季度套餐和年度套餐也可以連續(xù)包月答姥，并且能夠強(qiáng)調(diào)出連續(xù)包年套餐的優(yōu)惠信息，如下圖所示谚咬。
分析上面這個圖鹦付，連續(xù)包月和單獨購買其實是兩種模式，既然如此择卦，可否將兩種模式分開敲长？讓用戶能在兩種模式中選擇。
帶著這樣的思路秉继，嘗試了下面兩個方案潘明。
第一個方案，是用了分段控件秕噪，將兩種模式明顯的區(qū)隔開。
這樣做的好處是單獨購買和續(xù)費購買區(qū)分清楚厚宰，但劣勢也很明顯：由于需要點擊切換腌巾，操作成本較大遂填。之前的項目中，通過數(shù)據(jù)也發(fā)現(xiàn)澈蝙，分段控件的點擊率很低吓坚，因此可能會影響放在第2個選項中套餐的售賣。
另一個思路灯荧，是把連續(xù)購買的模式變成一個選項礁击，打開后即變成連續(xù)購買模式，關(guān)閉則是單獨購買逗载。同時在底部設(shè)置操作欄哆窿，于是有了如下方案：
這個頁面使得連續(xù)購買變得更簡單——用戶只需要選中“到期自動續(xù)費，可隨時取消”的按鈕就好厉斟。嗯挚躯，感覺有點上道了。
但對這個頁面還是不夠滿意擦秽，因為如果嘗試操作一下码荔，就會發(fā)現(xiàn)：用戶的操作路徑，是先在頁面上半部分選擇套餐感挥，然后到頁面底部進(jìn)行購買操作缩搅，操作的路徑是比較長的，如下圖所示：
有沒有操作路徑更簡便的方案触幼？
嗯硼瓣，當(dāng)然有的，畢竟辦法總會比問題多：將自動續(xù)費按鈕移到套餐選擇的區(qū)域附近域蜗，操作路徑就短多了巨双。同時，默認(rèn)勾選自動續(xù)費霉祸，然后如果取消自動續(xù)費筑累，開通的按鈕文案變?yōu)椤伴_通單年”。
嗯丝蹭，感覺好多了慢宗，是交代得明明白白的一個方案了。
這個方案對于續(xù)約來說奔穿，已經(jīng)很友好了镜沽。只是，對于如何突出連續(xù)包年的優(yōu)惠促銷信息贱田，顯得有些捉襟見肘：由于是一整行的列表類型的排布缅茉，如果在套餐內(nèi)容后面增加促銷信息，會使排版變得擁擠男摧，頁面顯得凌亂蔬墩，如下圖所示：
因此译打，保持續(xù)約勾選框和套餐選擇距離接近的原則的基礎(chǔ)上，繼續(xù)想辦法讓套餐可以承載促銷信息的展示拇颅。在和產(chǎn)品同學(xué)一起討論奏司、探索之后，最后確認(rèn)了使用卡片的形式??
卡片的好處不少：容易點擊樟插、方便增加促銷等運營信息韵洋，且信息展示清楚。
該方案完美符合了四條設(shè)計目標(biāo)的每一條：
- 突出連續(xù)包月的吸引力
-?突出大時長套餐的吸引力黄锤；
- 清晰展示套餐內(nèi)容搪缨；
-?保證用戶對自己的操作有清晰的認(rèn)知，避免用戶產(chǎn)生不清楚消費猜扮。
嗯勉吻，終于有一個比較滿意的方案了。最終方案得到一致通過旅赢。
方案上線后齿桃，連續(xù)包月的訂購占比上升明顯，連續(xù)包年訂購量增加煮盼，套餐的總訂購數(shù)也有增加短纵，方案效果良好。
令我有點意外的是僵控，友商們也紛紛跟進(jìn)：
甚至外賣app餓了么也使用了高度相似的卡片樣式：
頓時成就感有點爆棚香到。
總結(jié)一下這個方案的經(jīng)驗：
1. 在動手設(shè)計之前，確立設(shè)計目標(biāo)很重要报破，因為它指出了后續(xù)需要努力的方向悠就。
2. 競品沒有類似功能的時候，可以加強(qiáng)對自己的需求的特點進(jìn)行分析充易，找到解決問題的思路梗脾。
3. 對方案保持不將就的態(tài)度，是最終獲得一個滿意方案的重要保證盹靴。其實做交互設(shè)計炸茧，就是不斷提出問題，然后想辦法解決問題的過程稿静。將一個一個小問題解決梭冠，最后的方案肯定也會比較令人滿意。
Emmm改备，今天的內(nèi)容就是這些控漠。最后，祝大家新年快樂悬钳，豬年如有神助润脸，取得更大進(jìn)步柬脸。
