沒有排行榜的徽章系統(tǒng),是你會(huì)怎樣設(shè)計(jì)?

2 評(píng)論 15602 瀏覽 66 收藏 8 分鐘

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

且聽下回分解~

Sophia的tips:不管處于什么樣的情況下都是會(huì)有解決辦法的,只要肯花時(shí)間!

相關(guān)閱讀

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

專欄作家

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

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

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 期待下回!求解徽章設(shè)計(jì)細(xì)節(jié)要點(diǎn)

    回復(fù)
  2. 期待后文!

    來自廣東 回復(fù)