最近接手一個活，是設(shè)計徽章系統(tǒng)的。PM還沒有整理完需求，于是自己先搭了一個最基礎(chǔ)的框架，然后順著市場上現(xiàn)有產(chǎn)品的思路一步步思考下去。

徽章系統(tǒng)是游戲化設(shè)計的一個環(huán)節(jié)，一般與積分和排行榜相連進(jìn)行設(shè)計?？扇绻抻陂_發(fā)成本的原因，某個版本暫時不考慮積分和排行榜的設(shè)計（有徽章會涉及到積分和排行榜，這個另外在一篇文章進(jìn)行說明）。也就是說徽章系統(tǒng)只能有list（列表頁）、單個放大的頁面，類似于iOS系統(tǒng)中iWatch的“健身記錄”APP，如下圖。應(yīng)該如何處理這個問題呢？

咱們從源頭來想想徽章系統(tǒng)設(shè)計的目的，它是游戲化設(shè)計中的一個環(huán)節(jié)。游戲化設(shè)計咱們從這篇文章開始慢慢進(jìn)行講解。

游戲化是指運(yùn)用游戲思維和游戲機(jī)制來解決問題和鎖定用戶的過程?！w布·茲徹曼（Gabe Zichermann）

使用游戲和游戲元素背后的驅(qū)動力是相同的，都是要通過趣味性來激發(fā)和吸引用戶，增加用戶活躍性。

所以，咱們的目的是一種用趣味化的方式讓用戶持續(xù)性用APP，以及在APP內(nèi)與好友產(chǎn)生良性互動，進(jìn)行一些社交。也就是說，咱們現(xiàn)在就是針對這兩個頁面去想方設(shè)法，勾起用戶的挑戰(zhàn)欲，以及增強(qiáng)用戶之間的互動。

解決辦法有以下幾點(diǎn)：

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

思考的突破點(diǎn)是覺得iWatch的徽章列表只做展示沒有比較強(qiáng)烈的情感注入在里面。當(dāng)然iWatch的優(yōu)點(diǎn)在于徽章的個性化設(shè)計，在徽章上面刻上了用戶的名字和激活的時間，這個點(diǎn)可以拿來參考，但要做到3D的渲染效果圖在第一階段可以暫時不考慮（太費(fèi)資源，囧）。

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

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

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

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

綜合起來看，閣主的思路就是先根據(jù)一定場景，推斷出用戶的比較常見的行為，將行為表現(xiàn)在頁面上。然后，再將整個行為過程中的頁面進(jìn)行分拆開，針對每個頁面進(jìn)行信息側(cè)重點(diǎn)的區(qū)分，可以創(chuàng)新的地方先創(chuàng)新。最后再將所有頁面的行為再連貫起來進(jìn)行思考，讓行為有所聯(lián)系。

當(dāng)然，所有以上的解決方案都是基于各種限制條件下去進(jìn)行調(diào)節(jié)的。如果想擁有更廣闊的思路，就從整個APP的結(jié)構(gòu)出發(fā)重新思考，會有不一樣的大局觀，從而產(chǎn)生不一樣的思路。比方說，游戲化設(shè)計有三大要素：自主性（動機(jī)）、能力（挑戰(zhàn)度稍比自己強(qiáng)）、關(guān)聯(lián)性（與其他玩家的互動），這三大要素又會引導(dǎo)出游戲化設(shè)計的組成因素：game、得分、獎?wù)禄蛸N紙、排行榜、進(jìn)度、限制因素。

且聽下回分解~

Sophia的tips：不管處于什么樣的情況下都是會有解決辦法的，只要肯花時間！

相關(guān)閱讀

1. 《創(chuàng)業(yè)公司設(shè)計師怎樣從0到1設(shè)計一款A(yù)PP（七）——APP Logo的設(shè)計》
2. 《創(chuàng)業(yè)公司設(shè)計師怎樣從0到1設(shè)計一款A(yù)PP（六）——整理和交接工作》
3. 《創(chuàng)業(yè)公司設(shè)計師怎樣從0到1設(shè)計一款A(yù)PP（五）——UI規(guī)范整理》
4. 《創(chuàng)業(yè)公司設(shè)計師怎樣從0到1設(shè)計一款A(yù)PP（四）——Hi-fi輸出（下篇）》
5. 《創(chuàng)業(yè)公司設(shè)計師怎樣從0到1設(shè)計一款A(yù)PP（四）——Hi-fi輸出（上篇）》
6. 《創(chuàng)業(yè)公司設(shè)計師怎樣從0到1設(shè)計一款A(yù)PP（三）——Low-fi輸出》
7. 《創(chuàng)業(yè)公司設(shè)計師怎樣從0到1設(shè)計一款A(yù)PP（二）——立項》
8. 《創(chuàng)業(yè)公司設(shè)計師怎樣從0到1設(shè)計一款A(yù)PP（一）——概述》

專欄作家

Sophiallg，微信公眾號：Sophia的玲瓏閣，人人都是產(chǎn)品經(jīng)理專欄作家。一枚愛折騰，愛健身的交互設(shè)計妹紙。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。