在網頁中如何踐行游戲化設計?研習下這7個案例
本文將使用7個不同的、采用了游戲化設計的網站作為范例,來探討一下它們的設計策略和實現方法。
游戲化設計的概念由來已久,設計師從游戲當中汲取經驗,將游戲策略運用在非游戲類的應用和網站當中。在一個很長的時間里,設計師對于游戲化設計有過不少探索,總結了不少的經驗和教訓。不過,對于游戲化設計,我們依然需要保持探索,在實踐中不斷總結經驗。
就目前來看,游戲化設計的總體策略,仍然是將類似游戲的功能、機制、策略和UI元素轉化注入到網站或者APP當中。
在今天的文章當中,我們將使用7個不同的、采用了游戲化設計的網站作為范例,來探討一下它們的設計策略和實現方法。其中的很多設計手法可能你以前都見過,但是并未將它們視作為游戲化設計。在尋找范例的過程中,我盡量選取網頁和Web應用,如果你在APP中尋找類似特征的案例,應該也不會太少。
1. Habitica
游戲化設計元素:經驗點,關卡,升級,裝備等。
在諸多網站當中,Habitica是我看到最貼近游戲設計的網站。設計師直接將游戲設計的原理和機制應用到 Habitica 的設計當中,以至于它整個給人的感覺就是一個游戲。這個網站是借助游戲化的策略幫你養成良好的習慣,改掉壞習慣。
當你開始使用它的時候會發現,它是通過類似角色扮演的方式來做到這一點。當你花費時間培養新習慣之后,會獲得積分。屈從于舊習慣,你會失去積分。而當你積攢了足夠的積分,就能升級了。
2. Zurb
游戲化設計元素:發現物品,成就系統。
Zurb 可能是這個列表當中距離游戲最遠的一個網站了,你甚至可能很難察覺到游戲化設計的痕跡。你需要在閱讀網頁的時候,盡可能找到牛這個元素。當你找到之后,就可以將它搜集起來,有一個頁面專門供你“放?!?。這是網站促進用戶盡可能多地閱讀網頁內容的一種方法,簡單,但是非常有效。每一個搜集癖、囤積控和強迫癥患者都無法忍受無法完整搜集這件事情。
3. LinkedIn
游戲化設計元素:競爭機制,成就系統。
也許你使用了很長時間的 LinkedIn 都不會意識到它正在使用游戲化機制。但是LinkedIn確確實實借助游戲化的機制,鼓勵你逐步完勝你的個人資料,它將你的每一個操作和任務都積分化,成就化,通過一個進度條隱性的督促你去不斷完善,以達到100%。
LinkedIn 就是在竭盡全力觸發你身上的“補完”本能。除此之外,網站通過展示那些填寫信息完整的成功人事,點燃你的斗志,結合各種建議和引導,促進你主動去競爭、完善。
相比較而言,LinkedIn 在游戲化設計上更為微妙,不過這也更加符合它們的特點。
4. Klout
游戲化設計元素:競爭機制。
幾乎所有的社交媒體都在一定程度上使用了游戲化設計的策略。不過Klout 在這方面做到了更進一步,他們將激烈的人氣競爭運用到了社交媒體當中,并且將每個用戶的受歡迎程度量化,確保了用戶和用戶之間可以直接而清晰地競爭。
Klout 允許你將所有的社交媒體帳號關聯起來,通過向你展示其他處于領先位置的帳號,并且為你提供發布內容和升級的路徑,來推動整個平臺的活躍度,強化用戶之間的互動。
5. Zoho Motivator
游戲化設計元素:競爭機制(困難模式)
Zoho Motivator 是 Zoho 的辦公套件的延伸工具,它從 Zoho 的 CRM 工具中獲得數據,來衡量每個銷售人員的能力。它能夠通過計算生成潛在用戶,創建銷售目標,并且衡量結果。銷售人員可以在“友好”的比賽中競爭、排名。
這會是友好的比賽還是殘酷的競爭,主要取決于企業的環境和狀況,但是總體來說,想要在激烈的銷售競爭中勝出,這個游戲總體上還是處于困難模式的。
6. Interland
游戲化設計元素:測試,謎題和平臺等。
Game elements:?quizzes, puzzles, platforming, and
在這7個案例當中,Interland 這個網站簡直是Bug一般的存在。作為一個針對兒童的網站,它主要是教授他們以互聯網安全和互聯網禮貌的平臺,為此網站當中幾乎全都是各式各樣的小游戲。這種策略好則好矣,可惜絕大多數的網站并不能完全借用它的策略和經驗。如何正確地通過游戲來教育,這依然是一個值得研究的問題。
7. Quizzes in general
游戲化設計元素:測試,競爭機制。
其實,網絡上存在最久的游戲化設計的形式,應該是在線測試。最著名的在線測試包括 Facebook 測試,Buzzfeed 測試,以及來自 The Oatmeal 的測試。
雖然測試本身并不會直接地推動交互,但是它們常常被視作為有效的營銷工具。
結語
游戲化設計的方式其實非常之多,你可以從各種游戲當中積攢經驗,結合你的產品進行合理的設計,充分利用設計心理學調動起用戶積極性,創造出高參與度的產品??纯?a class="external" target="_blank" rel="noopener noreferrer">Robby Leonardi’s interactive resume?這個網站吧,即使是純粹的使用游戲化的視覺,同樣能夠驅動用戶和網站進行交互。
原文作者 :?Ezequiel Bruni?
譯者 :?陳子木
譯文地址:http://www.uisdc.com/gamification-in-web-design
本文由 @陳子木 授權發布于人人都是產品經理,未經作者許可,禁止轉載。
題圖來自 Unsplash,基于 CC0 協議
- 目前還沒評論,等你發揮!