聯成電腦設計好文分享：遊戲化產品與一般工具型產品的設計差異
文、Andy Kao
加入 Fourdesire 之前，在前公司做過的產品都是偏向一般的工具類產品，像是電腦的多媒體影音工具、編修照片的 App 軟體或是會議視訊軟體。會想要寫這篇文章，主要是因為去年一場活動中分享在 Fourdesire 做設計的經驗，有人忽然問說 「設計遊戲化產品和一般產品，最大的不同是什麼」？
遊戲化的產品並不一定會遵循 iOS 或 Android 的系統規範，為了隨著功能和概念希望帶給使用者特別的體驗，因此會依照目的打造出一個最適合使用者使用的介面。
當時因為準備得不夠完善，所以只能給予這樣模糊的回應。這次有機會想透過這篇文章再提供一些屬於個人的看法，希望能探討更多關於遊戲化產品設計的內容。
工具類產品的介面設計
以市面上的 App 產品來看，通常都會有固定的介面規範。在設計一款 App 時都會依照 iOS 和 Android 的規範進行設計（如果對 iOS 和 Android 規範不熟悉的讀者可以參考此處： iOS 的設計規範Human Interface Guideline、Android 的設計規範Material Design）。使用雙平台規範的好處，能讓使用者更無痛操作各個產品，當他們每次下載不同的 App 時，不需要重新學習如何操作。
當一個產品擁有雙平台的版本時，很多 App 通常會有些許的差異。下圖舉 Dropbox 為例，可以看到就是完全依照雙平台的規範和介面元件進行設計，讓各自的使用者可以很快速地在這個工具類產品中快速執行動作。iOS 的使用者通常都能看到 app 畫面下方有一條導覽列 (在 iOS 的規範裡面命名為 Tab Bar)，通常這條導覽列會是幾個產品中最主要且頻繁使用的功能，讓使用者可以快速進入想要的頁面；而 Android 的使用者則習慣去點左上角的選單選擇他們所需要的功能。
然而有滿多 App 也希望將雙平台的版本盡可能做到一致，目的也是希望產品的介面設計對所有使用者來說都是統一的，也能更有效率管理跨平台的使用體驗。 Airbnb 在上一版本做了極大的設計更動，跳脫了系統的規範，重新設計了一套屬於自己的設計語言。他們的設計團隊也在官方的 Medium平台 發布了許多文章，其中有一篇提到他們如何建立自己的設計系統，設計系統也確立了四個大方向分別是：「統一的、共通的、有指標性的以及可溝通的」。因此他們覺得面對全世界許多使用者，希望讓他們在跨平台使用時都能保持一致的體驗是重要的。
Airbnb 的設計系統。圖片來源： Airbnbmedium
► 推薦課程：跨平台商業網站設計、Android APP開發設計、iOS APP開發設計
讓 Airbnb 在任何平台上都具有鮮明識別特徵是至關重要的。在設計上，我們希望在跨平台使用時能有歸屬感，並盡可能在導航、系統圖標、上下文操作和互動等重要元素上遵循各個平台的慣例。 Airbnb 首席設計師 KarriSaarinen
但究竟是否要將 App 的介面統一呢？決定的因素又是什麼？這件事並不只是風格選擇的問題，有可能需要團隊在開始設計介面之前先對目標族群、市場做調查，甚至是評估開發時程後才能進一步做出決定。如果希望鼓勵使用者和你的產品產生更多互動，或許可以適當地加入遊戲化的元素，在合適的環節給予相對應的外在動機與內在動機。
遊戲化產品的設計策略
一般來說，遊戲化類型的產品會利用一些挑戰、成就和獎勵的元素來強化使用者與產品產生更密切的互動，它不像遊戲一樣往往只是提供單純的娛樂，而是能夠讓使用者更容易達成某些目標或是更容易達成一些事，遊戲化的應用也已經深入到許多不同的領域，在 App 和網頁設計中也常常見到。這類的產品會更強調使用者當下的操作情境，因此在不同產品都可能出現較不同的介面，也通常不會遵循 iOS 或 Android 的設計規範。然而我們可以發現遊戲化產品都有一些常用的設計手法或是策略，接下來想介紹一些市面上遊戲化產品舉例介紹。
1. 接受挑戰，樂於競爭
人類是具有面對挑戰、克服困難的特質，因此現在市面上很多遊戲化產品都會將「挑戰」這個策略考慮進來。有了挑戰，就會衍伸出競爭和積分的元素。因此在遊戲化的產品裡面往往都能看到積分(Points)、徽章(Badge)、排行榜(Leader board)的元素，簡稱 PBL。不僅是 App 產品，PBL 的元素也充斥在許多我們已經熟悉的網站中。以大家最知道的拍賣網站為例，現在都能看到積分和評價的元素，甚至還有些拍賣網站會讓賣家和買家的頭銜隨著使用的時間不斷升級，讓使用者之間更有差異性，使用久的人會覺得很滿意，剛開始使用的人也會為了快點進步到下一個層級繼續使用。
Yahoo 拍賣的賣家等級
《Duolingo》 這款語言學習 App 也在這方面利用了許多遊戲化的設計方式讓使用者更容易接受，並更有耐心地繼續學習。首頁的部分很貼心的詢問每個使用者的語言程度，並依照選擇會給予不同的訓練課程和步驟，更重要的是這個產品讓想要學習語言的人覺得學語言就跟玩遊戲一樣輕鬆容易，藉由解鎖一個一個關卡，加深自己的語言能力。首頁的上方資訊列也能讓使用者設定目標，只要你覺得今天時間比較充裕，就可以選擇更積極的學習模式來賺取經驗值。
圖片來源：《Duolingo》 截圖
在答題的過程也更加友善，藉由可愛的插圖讓使用者認識英文單字，答錯會發現有個初次犯錯的提示框，提醒使用者人人都會犯錯，不需要太緊張的心理安慰。而生命值的使用則是讓使用者答題時能更小心，生命值如果耗損完後，則需要藉由練習題目來獲得生命值，也是一個具有教育意義的 UX 設計。因為這代表你需要透過更多練習補強自己的英文能力，當你練習夠之後，就能突破以往的困境了！
圖片來源：《Duolingo》截圖
然而周郁凱在他的書中提到 「並不是把排行榜、徽章或積分等元素硬塞進產品來就是遊戲化」。設計團隊還是必須針對使用者的需求將產品設計得合理，提供主要的核心概念和功能，讓使用者擁有高黏著使用的動機，遊戲化元素只是增進使用體驗的其中一環。
2. 幫助使用者養成習慣
以知名的《 Forest 》來說，為了達到讓大家不要太常使用手機，因此將種樹結合培養專注力的習慣。產品的主要介面就是一棵樹苗的圖樣，沒有過多的資訊干擾使用者，因為設計者知道當使用者需要開始專心做某件事時，就會選擇打開《 Forest 》，以這樣的使用者情境進行介面的設計能讓整個使用體驗更具沈浸感。當使用者按下開始種樹，就開始做他們想做的事情吧！這棵樹會隨著你沒有碰觸手機的時間成正比的長大，一旦忍不住拿起手機打開畫面，那棵樹苗就會枯萎死亡。
圖片來源：《Forest》截圖
後來該團隊還將種樹的虛擬互動移植到現實生活，並與種樹組織合作，讓使用者們知道如果在手機裡面種了一棵樹，就也會在印度種一顆真正的樹幫助這個地球。
圖片來源： 《Forest》官方網站
透過此類的遊戲化策略，帶給使用者更多的心理成就感。無論使用者需要完成的任務是什麼，他們必須先被提醒自己正在往一個更好的狀態前進，而這個進步有可能是個人的，或是更偉大的造成整個社會進步或影響你周遭的朋友。當使用者發現自己正在進步，也會淺移默化的逐漸養成習慣，並且成為該產品的高黏著度使用者。
3. 有限與稀缺性
在遊戲化的產品中，要如何讓使用者和產品的互動不要太多又不要太少是非常重要的。以《記帳城市》為例，我們製作的是一款希望幫助使用者養成記帳習慣的產品，使用者只要記錄每天的消費都能蓋出對應消費分類的建築，並慢慢壯大自己的城市。為了防止大家一直記假帳，每天能蓋的建築預設只有五筆。這個方式均衡了主要的記帳功能與遊戲性的部分，讓使用者沒有辦法因為想得到額外建築去做假帳和作弊。也因為使用者體認到有限的數量，他們會更容易的選擇持續使用，在每天不斷使用當中慢慢增加自己城市的景觀，並達到滿足記帳成功的內在動機。
有限的建築工數量讓使用者更容易取得記帳與遊戲的平衡性。圖片來源：《記帳城市》截圖
知名的全球設計平台 Dribbble 也在會員招募的形式上利用了相似的設計手法。所有人都可以申請帳號加入這個平台，但如果你沒有邀請碼，就只能欣賞別人的作品而不能發布自己的作品。要怎麼得到邀請碼呢？就是去尋找正在發送邀請碼的人，並將自己的作品整理給他，增加自己獲得邀請碼的機會。全世界成千上萬的使用者都因為當初 Dribbble 這個嶄新的概念被吸引過來，希望將自己最棒的東西呈現，也因此才會成為廣受大家推崇的設計平台。
Dribbble 藉由限量的邀請碼提升使用者得到的動力
當然，遊戲化的設計手法不只這三項，在這裡只是提出一些常常被使用的案例。不管是製作一般的工具類產品或是含有遊戲化元素的產品，最重要的還是回到 使用者個需求 和產品想要解決的問題是什麼。如果是一項比較困難的事情，那或許就可以思考使用者的情境和使用旅程，以合理的遊戲化方式進行設計來達成更好的使用者互動。
如果某天有個產品能夠讓使用者願意為了達成某些事情就犧牲其他事物（像是金錢、寶貴的時間等），就算沒有額外的獎勵也很願意主動執行，或許可以鼓起勇氣說這個產品踏出了成功的第一步也說不定。
► 推薦課程：3ds Max遊戲設計、Animate網頁動畫應用、C#遊戲程式設計
結論
遊戲化不只可以用在數位產品上，其實我們的生活周遭或是工作環境或許也充滿許多具備遊戲化的設計。像是我們每天幾乎都會去的便利商店，一旦消費超過某個金額就能得到的點數和貼紙，再利用點數去抽獎換取獎品，就是讓購物這件事情變得更加有趣的生活遊戲化體驗。試著注意你們生活周遭吧！如果有任何吸引你的遊戲化體驗，不妨去想想他背後設計的概念和目標！
Reference：
[1] HIG
[2] Material design
[3] Dropbox
[4] Airbnb medium
[5] Yahoo 奇摩拍賣
[6] Duolingo
[7] Forest app
[8] Fortune City, 記帳城市
[9] Dribbble
[10] 周郁凱 (2017)。《遊戲化實戰全書：遊戲化大師教你把工作、教學、健身、行銷、產品設計變遊戲，愈好玩就愈有吸引力！》
文章轉載自「medium」，已取得作者授權同意，原文為：遊戲化產品與一般工具型產品的設計差異
痞客邦Blog：http://lccnetvip.pixnet.net/blog
FB粉絲團：https://www.facebook.com/lccnetzone
菜鳥救星：https://www.facebook.com/greensn0w
