沒有排行榜的徽章系統，是你會怎樣設計？

最近接手一個活，是設計徽章系統的。PM還沒有整理完需求，於是自己先搭了一個最基礎的框架，然後順著市場上現有產品的思路一步步思考下去。

徽章系統是遊戲化設計的一個環節，一般與積分和排行榜相連進行設計。可如果限於開發成本的原因，某個版本暫時不考慮積分和排行榜的設計（有徽章會涉及到積分和排行榜，這個另外在一篇文章進行說明）。也就是說徽章系統只能有list（列表頁）、單個放大的頁面，類似於iOS系統中iWatch的「健身記錄」APP，如下圖。應該如何處理這個問題呢？

咱們從源頭來想想徽章系統設計的目的，它是遊戲化設計中的一個環節。遊戲化設計咱們從這篇文章開始慢慢進行講解。遊戲化是指運用遊戲思維和遊戲機制來解決問題和鎖定用戶的過程。——蓋布·茲徹曼（Gabe Zichermann）。使用遊戲和遊戲元素背後的驅動力是相同的，都是要通過趣味性來激發和吸引用戶，增加用戶活躍性。

所以咱們的目的是一種用趣味化的方式讓用戶持續性用APP，以及在APP內與好友產生良性互動，進行一些社交。也就是說咱們現在就是針對這兩個頁面去想方設法，勾起用戶的挑戰欲，以及增強用戶之間的互動。

解決辦法有以下幾點：

1.同樣是所有徽章的list排列出來，不同的是突出最近獲得的那一個，給予用戶視覺上的重點以及一些熟悉感。最近獲得的也是用戶在看列表時，印象最深的。

思考的突破點是覺得iWatch的徽章列表只做展示沒有比較強烈的情感注入在裡面。當然iWatch的優點在於徽章的個性化設計，在徽章上面刻上了用戶的名字和激活的時間，這個點可以拿來參考，但要做到3D的渲染效果圖在第一階段可以暫時不考慮（太費資源，囧）。

2.針對每個達到的徽章，添加時間與徽章名、徽章代表的主要活動信息，並且將這些信息放在最外層，一目了然，用戶在迅速瀏覽的時候，不用再點到單個徽章詳情頁面再去看信息。如下圖。

3.單個徽章的展示頁面，分為激活和不激活兩個狀態進行描述，激活狀態的，加上發生時間、徽章名稱、代表內容詳情、分享按鈕。分享出去的H5頁面，帶有對方頭像、事件發生時間、徽章的名稱以及徽章的具體代表意義等因素，敘述的是一個完整的事件，與list頁面的信息相呼應，也與APP內的頁面內容保持一致。

同時在相應的頁面也給予action button的提示，讓用戶在激活的狀態下去分享，未激活的狀態下去行動注意那個相機按鈕，下文會用到）。 如下圖

4.個性化設置，比方說分享的時候，徽章背景可以自行上傳，用戶可以從相冊中選擇一張，或者現場拍一張進行上傳，將圖片進行裁切成固定比例。如果用戶不上傳就自動將徽章設置為背景，上傳新的照片後，徽章作為水印的作用烙在圖片上。

綜合起來看，閣主的思路就是先根據一定場景，推斷出用戶的比較常見的行為，將行為表現在頁面上。然後，再將整個行為過程中的頁面進行分拆開，針對每個頁面進行信息側重點的區分，可以創新的地方先創新。最後再將所有頁面的行為再連貫起來進行思考，讓行為有所聯繫。

當然所有以上的解決方案都是基於各種限制條件下去進行調節的，如果想擁有更廣闊的思路，就從整個APP的結構出發重新思考，會有不一樣的大局觀，從而產生不一樣的思路。比方說，遊戲化設計有三大要素：自主性（動機）、能力（挑戰度稍比自己強）、關聯性（與其他玩家的互動），這三大要素又會引導出遊戲化設計的組成因素：game、得分、獎章或貼紙、排行榜、進度、限制因素。

且聽下回分解~

Sophia的tips：

不管處於什麼樣的情況下都是會有解決辦法的，只要肯花時間！