起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識這樣設計收費功能，交易額噌噌往上漲！
本文從操作流程、定制充值入口、支付頁面、充值后在頁面的體現方式、購買記錄5方面講述如何設計一個收費功能。
在沒有互聯網的時代，買個菜要去村外的市集，買個衣服要去三里開外的市街、甚至有些市集還是每周來一次，大家都是一手給錢一手交貨。
隨著互聯網的發展，人們在網絡上可以直接訂購有需要的東西，買個柴米油鹽醬醋茶都會直接送貨上門；訂購火車票、電影票都可以在網上購買；去購物再也不用帶錢，支付寶、微信隨時移動支付
互聯網已經成為人類的生活方式，通過互聯網改變了人的出行方式、閱讀方式、生活方式和支付方式。
人們已經習慣了在線上處理生活的方式，然而在這些產品的背后都會涉及到收費。
最近因為工作原因，主要在負責收費功能模塊的產品設計，今天主要分享一下產品經理在設計收費功能的頁面中如何體現收費環節。
下面我分幾個模塊來分享：明確操作流程、定制充值入口、支付頁面、充值后在頁面的體現方式、購買記錄。
一、明確操作流程
在設計收費功能的時候，首先要梳理出在你設計收費的產品中用戶從進入頁面的操作流程。
為什么要梳理操作流程呢？
因為只有你梳理清楚了用戶的操作流程，才能確認你要在用戶操作的哪個頁面的哪一步中禁止用戶對某個功能操作的使用權限，并給出一個提示需要付費使用，還要給出付費的按鈕，讓用戶點擊可以直接跳轉到付費頁面。
如果梳理不清楚，或者沒考慮到這個層面，就會導致用戶沒有購買；但在某個環節中依然有權限使用。
打個比方：就像是一個線下店面，你擺了個收銀臺，但是沒有工作人員指引，用戶進來拿了件商品就走，你問用戶為啥不付錢呢，用戶說：“要付錢嗎？我不知道啊，要去哪付錢？”。
當然，在線下店面中我們都知道任何商品都是要購買的。
可是在線上你沒有提示用戶收費，用戶還可以繼續享受他的服務，這種情況下就是我們的失誤了。
下面我拿pc端“當當云閱讀”網站舉例列舉一下用戶的操作步驟來分析一下：
1. 用戶登錄/進入網站
用戶進入網站后展示的是一個首頁，首頁主要展示了小說的推薦及分類。如上圖，在這個環節中我們可以通過輪播圖卡片中展示特價活動，點擊特價活動可以查看特價的書籍.
2. 瀏覽電子書
這是一個小說平臺，用戶進入網站的意圖肯定是想找小說看的；而首頁展示的是電子書分類，所以用戶進入頁面后第二步就是“瀏覽電子書”。
我們分析下此步驟是否需要有充值付費的提醒，或者什么可以添加什么元素提醒用戶哪些小說需要收費呢？
此環節就像是逛店鋪，只是在瀏覽。用戶還沒有選到心儀的，所以在這個頁面上可以不做收費提醒。
如果提醒的話，可以在小說封面上去加標識“會員”、“免費”、“特價”去體現，方便用戶第一眼辨別哪些是收費的。
還可以直接按照分類來展示，如果平臺上大多數都是收費的小說，我們可以增加一個“免費”分類——就是采用圖片上的效果，在書籍中增加一個“價格”，可以讓用戶一眼就了解這本書的定價。
3. 選中電子書查看簡介
用戶瀏覽小說的下一步就是選中感興趣的小說點擊進入，查看小說的簡介。
我們再來分析下這個頁面是否需要有充值付費的提醒。
如果這個頁面和上個頁面是有一樣的，可以做也可不做。
如果不做充值提醒可以直接讓用戶進入試讀頁面，一般在這個頁面不做收費環節，因為需要吸引用戶閱讀，閱讀中的試讀功能可以讓用戶更加了解這本書籍是不是感興趣或有需要的。
如果要設置的話可以在此頁面增加一個“立即購買”按鈕，這個就根據平臺的不同來設定了。
4. 閱讀電子書
用戶點擊試讀就進入閱讀頁面了，在閱讀電子書時就像我們去商場試衣服，試完了穿著效果不錯，用戶就需要考慮買不買。
前面幾個頁面都可以不設定收費環節，最后這個頁面是一定要設置的。
在這個頁面我們就可以在閱讀章節最后提示：是否訂購本章、章節的價格。
點擊“價格”就可以跳轉到訂購頁面”如果這本小說是收費小說，我們在此頁面沒有考慮設計這樣的收費提醒。如果還讓用戶繼續閱讀的話，就可能會造成用戶試完衣服覺得好看直接穿走的情況了。
在圖的右上角還有“立即購買”按鈕，一直跟隨頁面懸浮著，在用戶想購買的時候，減少用戶的操作步驟。
點擊左上角可以進行查看目錄，在目錄中可以通過“可點擊”“不可點擊”兩種效果體現（可點擊進章節頁面就是可以閱讀的，不可點擊不做跳轉就是不可閱讀的）。
5. 退出/關閉網站
二、定制充值入口
除了在操作流程中體現付費環節，還需要有一個專門的充值付費入口——這個充值入口就相當于線下店面的收銀臺了。
前面我們已經在用戶挑選商品的過程中引導客戶繳費了，也告訴了用戶去收銀臺怎么走，所以我們也要有這樣一個收銀臺。
不然就會出現一種情況：用戶選中了一本小說，看了試讀非常喜歡，想要去購買，但是頁面只提示了用戶需要購買使用，點擊去“購買”也沒有反應。這樣用戶就會非常生氣，導致用戶流失；
我們清楚了為什么要有充值入口，下面來說一下在充值頁面都要做些什么：
一般用戶在收銀臺是購買商品付費的，有時候收銀臺也會推出很多活動：例如在超市讓你購買儲值卡，一次性充值300元儲值卡里會有350的余額，或者一次性充值多少金額后以后拿卡消費可以打折等，在這里收費模式就涉及到了兩種：
- 充值（充值相當于預付款，像上面我們舉的例子，用戶可以達到一次性充值多少金額后享受某種優惠力度。拿線上閱讀平臺舉例，平臺會引導你充值，充值后這個錢就在我的賬戶里了；）
- 購買（購買又分為“購買電子書、購買月卡（季卡/年卡），其實就是消耗我賬戶里的金幣去購買圖書）
針對這兩種模式可以有下操作：
- 不定期做充值優惠活動，引導客戶充值，一次性充值或累計充值指定金額后贈送權益。
- 在購買頁面按照月卡（季卡）去購買，購買后在這個時間內全平臺書籍都可以閱讀。
- 對于首次充值購買的用戶，可以將降低購買門檻。
在這里要注意設置充值或購買時一定要分清主次，要先清楚你的目的是什么。
比如：我設置充值入口的目的就是希望用戶提前把錢充值進來，用戶可以購買小說去消耗；如果沒有這個充值功能，用戶可能購買完一本小說看完就走了，用戶的賬戶里有余額，消耗不完就不會走，可以降低用戶的流失率；
通過鼓勵用戶充值適當給用戶一些優惠力度，對于用戶來說也是賺到了；
如果說你設計收費的平臺沒有這樣的業務考慮；而像淘寶一樣，直接購買就能滿足，那就不需要在設計一個充值入口了。
（注明：充值和購買的概念不是說一定要先充值再去購買，我們可以通過充值的方式鼓勵用戶充值；但如果用戶想要直接購買也是可以的，我們在用戶支付時可以設計為用戶在購買的時候一鍵充值）
三、支付頁面
前面我們講了如何讓用戶知道某個商品是收費的，以及如何到充值頁面。下面就到了用戶付款階段了；
在用戶付款頁面體現的內容是非常重要的，可以讓用戶核實訂單信息是否正確，如果發現有問題可以及時更正；下面我們來講一下用戶支付的頁面需要展示的重要幾個內容；
- 購買內容：具體顯示用戶購買的書籍名稱，在支付頁面體現也是便于讓用戶再次確認購買的信息；
- 購買類型：有的平臺會推出購買月卡/年卡的活動，這個類型就是標明購買的是哪個種類活動；
- 購買金額：需要展示詳細，按照每個購買的內容標明單價，在頁面的底部展示總計金額；
- 購買數量：根據不同產品展現，如購買電子書就不會有一本電子書購買2本的的情況， ??不過月卡可以體現，可以按照月購買，數量表示為月；
- 購買時間：這個就是購買電子書的時間；
- 支付方式：比較常見的支付方式就是微信支付、支付寶支付；種類多一點的就是支持各個銀行的銀聯支付（個別網站消費金額過大的話是需要看公司是否可以支持，這個可以跟公司的財務人員溝通）。
四、充值后在頁面的體現方式
充值后我們就要考慮它是如何在頁面中體現的，也就是說我付完錢了，需要知道我的付款結果。
同時我們要考慮：怎樣在頁面體現，都需要體現些什么內容？
如果我們考慮不到，就會出現這種情況：我明明已經付款了，你卻不讓我帶走商品。
下面我來分別來通過用戶充值成功的反饋頁面，和購買成功的反饋頁面來說下用戶付完款后需要顯示的內容。
充值成功的反饋頁面
充值成功的反饋頁面需要顯示的信息有：充值狀態、訂單號、付款賬戶、充值時間、充值金額。
購買成功的反饋頁面
購買成功的反饋頁面需要展示的信息有：購買狀態、賬戶余額、可用余額、購買時間、購買金額。
五、購買記錄
一般我們去任何店面辦理儲值卡或者購買商品時都會有購物小票，在線上我們也需要有購買記錄功能，記錄用戶在平臺消費的所有訂單記錄。
購買記錄的主要作用是追溯，在某些場景里，我們想看一下過去有多少次的充值行為。
追溯是一種特殊需求，也是一個嚴謹的需求；盡管使用的人不多，使用的場景不多，但一旦出現問題，又不能追溯到的情況下，就容易產生負面影響。
所以我們在設計購買記錄頁面時需要考慮以下幾個內容：搜索（可以讓用戶通過模糊搜索查詢歷史訂單）、時間搜索（通過時間搜索查詢這個時間內的訂單）、購買的商品名稱、類型、價格、購買時間。
六、總結
說了這么多我來總結一下主要的內容：
- 明確操作流程：梳理清楚用戶的操作流程，在操作流程的頁面中考慮如何把付費提醒加入到頁面中；
- 定制充值入口：相當于收銀臺，用戶購買某本小說后需要在此頁面付款，平臺可以根據用戶充值金額的多少，給用戶贈送一些權益；
- 支付頁面：主要有購買內容、購買類型、購買金額、購買數量、購買時間及支付方式；
- 充值后在頁面的體現方式：通過充值后的頁面反饋信息，了解充值狀態，及賬戶金額和實際付款金額；
- 購買記錄：記錄用戶在平臺消費的所有記錄，方便用戶隨時追溯過去有多少次充值行為；
作者：Cc，微信公眾號：悄悄拔尖Strive
本文由 @Cc 原創發布于人人都是產品經理，未經許可，禁止轉載。
題圖來自 Pixabay，基于CC0協議
寫的很棒哦