在網頁中如何踐行游戲化設計?研習下這7個案例

1 評論 5112 瀏覽 32 收藏 9 分鐘

本文將使用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 協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!