你好，歡迎來到沐風(fēng)與體驗(yàn)設(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ū)域
其中，套餐選擇是采用列表的形式，用戶點(diǎn)擊列表中的某個條目，則執(zhí)行付款操作，從效率的角度來說，這個頁面還是挺高效的。
這個頁面的改版，是來自產(chǎn)品同學(xué)提的需求。起初收到這個需求，其實(shí)是個“一句話需求”：
“收銀臺希望進(jìn)行改版，突出強(qiáng)調(diào)大時長（會員年卡）和自動續(xù)費(fèi)模式”。
嗯，就是這么簡短。
雖然簡短，但分析需求的內(nèi)容，產(chǎn)品目標(biāo)還是比較明確的：
- 提升大時長套餐的購買量；
-?提升自動續(xù)費(fèi)的購買量。
那么，用戶來到這個頁面有什么目標(biāo)呢？我們來分析一下用戶購買會員的全流程：
用戶被會員的介紹信息或者打折信息所吸引→點(diǎn)擊會員購買入口→進(jìn)入會員收銀臺頁面。
此時在收銀臺頁面，用戶最想了解的是每種套餐的收費(fèi)標(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)生不清楚消費(fèi)。
明確目標(biāo)，是得到靠譜方案的第一步，也是最基本的一步。目標(biāo)找錯了，之后的努力很可能沒法得出令大家滿意的結(jié)果，實(shí)在是得不償失。所以，在開始一個需求之前，一定要先確定好設(shè)計目標(biāo)。
目標(biāo)確定了，開始尋找靈感。研究了市面上的主要競品，優(yōu)酷視頻的會員收銀臺頁面，是把可購買的所有套餐列出來，然后在底部設(shè)置了一個操作欄，可執(zhí)行購買操作，如下圖：
騰訊視頻的做法比較簡單粗暴：將所有的套餐都列出來，然后每個套餐上一個“開通”按鈕，點(diǎn)擊后就可以購買。
看來競品沒有能實(shí)現(xiàn)我們這個需求目標(biāo)的方案。Emmmm，怎么破？既然向外借不到力，只能向內(nèi)再繼續(xù)分析一下。
改版前的收銀臺，會員套餐總共只有4個，其中只有月份的套餐可以包月，即“連續(xù)包月”套餐，
季度套餐和年度套餐，是不能進(jìn)行連續(xù)包月的。
改版后的期望，是季度套餐和年度套餐也可以連續(xù)包月，并且能夠強(qiáng)調(diào)出連續(xù)包年套餐的優(yōu)惠信息，如下圖所示。
分析上面這個圖，連續(xù)包月和單獨(dú)購買其實(shí)是兩種模式，既然如此，可否將兩種模式分開？讓用戶能在兩種模式中選擇。
帶著這樣的思路，嘗試了下面兩個方案。
第一個方案，是用了分段控件，將兩種模式明顯的區(qū)隔開。
這樣做的好處是單獨(dú)購買和續(xù)費(fèi)購買區(qū)分清楚，但劣勢也很明顯：由于需要點(diǎn)擊切換，操作成本較大。之前的項(xiàng)目中，通過數(shù)據(jù)也發(fā)現(xiàn)，分段控件的點(diǎn)擊率很低，因此可能會影響放在第2個選項(xiàng)中套餐的售賣。
另一個思路，是把連續(xù)購買的模式變成一個選項(xiàng)，打開后即變成連續(xù)購買模式，關(guān)閉則是單獨(dú)購買。同時在底部設(shè)置操作欄，于是有了如下方案：
這個頁面使得連續(xù)購買變得更簡單——用戶只需要選中“到期自動續(xù)費(fèi)，可隨時取消”的按鈕就好。嗯，感覺有點(diǎn)上道了。
但對這個頁面還是不夠滿意，因?yàn)槿绻麌L試操作一下，就會發(fā)現(xiàn)：用戶的操作路徑，是先在頁面上半部分選擇套餐，然后到頁面底部進(jìn)行購買操作，操作的路徑是比較長的，如下圖所示：
有沒有操作路徑更簡便的方案？
嗯，當(dāng)然有的，畢竟辦法總會比問題多：將自動續(xù)費(fèi)按鈕移到套餐選擇的區(qū)域附近，操作路徑就短多了。同時，默認(rèn)勾選自動續(xù)費(fèi)，然后如果取消自動續(xù)費(fèi)，開通的按鈕文案變?yōu)椤伴_通單年”。
嗯，感覺好多了，是交代得明明白白的一個方案了。
這個方案對于續(xù)約來說，已經(jīng)很友好了。只是，對于如何突出連續(xù)包年的優(yōu)惠促銷信息，顯得有些捉襟見肘：由于是一整行的列表類型的排布，如果在套餐內(nèi)容后面增加促銷信息，會使排版變得擁擠，頁面顯得凌亂，如下圖所示：
因此，保持續(xù)約勾選框和套餐選擇距離接近的原則的基礎(chǔ)上，繼續(xù)想辦法讓套餐可以承載促銷信息的展示。在和產(chǎn)品同學(xué)一起討論、探索之后，最后確認(rèn)了使用卡片的形式??
卡片的好處不少：容易點(diǎn)擊、方便增加促銷等運(yùn)營信息，且信息展示清楚。
該方案完美符合了四條設(shè)計目標(biāo)的每一條：
- 突出連續(xù)包月的吸引力
-?突出大時長套餐的吸引力；
- 清晰展示套餐內(nèi)容；
-?保證用戶對自己的操作有清晰的認(rèn)知，避免用戶產(chǎn)生不清楚消費(fèi)。
嗯，終于有一個比較滿意的方案了。最終方案得到一致通過。
方案上線后，連續(xù)包月的訂購占比上升明顯，連續(xù)包年訂購量增加，套餐的總訂購數(shù)也有增加，方案效果良好。
令我有點(diǎn)意外的是，友商們也紛紛跟進(jìn)：
甚至外賣app餓了么也使用了高度相似的卡片樣式：
頓時成就感有點(diǎn)爆棚。
總結(jié)一下這個方案的經(jīng)驗(yàn)：
1. 在動手設(shè)計之前，確立設(shè)計目標(biāo)很重要，因?yàn)樗赋隽撕罄m(xù)需要努力的方向。
2. 競品沒有類似功能的時候，可以加強(qiáng)對自己的需求的特點(diǎn)進(jìn)行分析，找到解決問題的思路。
3. 對方案保持不將就的態(tài)度，是最終獲得一個滿意方案的重要保證。其實(shí)做交互設(shè)計，就是不斷提出問題，然后想辦法解決問題的過程。將一個一個小問題解決，最后的方案肯定也會比較令人滿意。
Emmm，今天的內(nèi)容就是這些。最后，祝大家新年快樂，豬年如有神助，取得更大進(jìn)步。
