如何用遊戲化思維構建 "好玩" 的遊戲平臺

QQ小程式遊戲中心主打豐富多樣化的小遊戲，作為設計師如何通過視覺表現構建一個更好玩的平臺，向使用者傳達“好玩”的感受。

FOREWORD

從遊戲中學習什麼是 “好玩”

為什麼在遊戲中我們明知得不到實質的回報卻願意投入大量時間和金錢？好玩的遊戲不僅用華麗的外表吸引我們，更因有趣的靈魂帶給人深入探索的動力。我們試著挖掘遊戲中那些“好玩”的因素，將其運用到小程式遊戲中心的設計中。

CONTENT

構建一個好玩的世界

一個完整的世界由【外觀】和【核心】兩部分構成。要傳達“好玩”的感受，除了抓住目標人群的喜好，打造富有吸引力的外觀，更需要具備強大的驅動力作為核心。



PART. 1 搭建外觀

外觀的搭建需要一套完整統一的視覺表現方式。如何形成一個合理，有代入感、易於擴充應用的視覺語言體系？

01 視覺語言的形成

視覺語言的形成分為4步：1. 參考真實世界元素；2. 提煉圖形特徵；3. 重新組合特徵；4. 延展到整個世界觀



我們以一個生化機器人的角色設定為例，看設計師 Tim Anderson 如何在新的世界觀中建立有效的視覺語言。



02 小程式遊戲中心視覺語言的建立

以上是我們從遊戲概念設定中總結的方法，接下來介紹如何運用這套方法建立小程式遊戲中心視覺語言體系。



為了突出遊戲中心“好玩”的氛圍，構建一個“好玩”的平臺，我們將可以喚起遊戲感的元素融入到小程式視覺語言的設計中。

1. 參考真實元素

作為參考的真實元素要合乎人們的日常認知，引起代入感。我們的使用者90、00後的童年對電子遊戲最原始的記憶來源於路邊的遊戲廳街機，後來家裡陸續開始出現卡帶機小霸王、掌機Gameboy，直到現在有了更高階的遊戲機Switch。雖然裝置一直在升級，但總有一些共同特徵貫穿了整個遊戲的進化歷程，能夠輕易喚起我們對遊戲感的共鳴。



2. 提煉圖形特徵

真實物體的特徵極其複雜，我們要在提煉後將其抽象化為具有代表性的圖形。圖形特徵的提煉分為兩個部分【形狀】和【紋理】。



我們提煉真實世界的遊戲機和遊戲場景中的特徵。【形狀】常見帶弧度的方形，伴隨一個角有異化，異化往往是特大圓角或者直角切角兩個極端；按鍵等結構較為圓潤，以圓或圓角矩形居多；三角形應用範圍最小，一般在具有使用者行為導向的區域，比如遊戲卡上引導插卡方向的箭頭。【紋理】常見多條平行直線或者圓點有節奏的重複排列，帶有一定傾斜角度，在重複中伴有部分異化，比如缺口和轉折。



迴歸到小程式UI介面中，舊版遊戲中心卡片形態為UI模組中常見的方形結構，方形較為穩定，且利於內容的整合及區隔。



3. 重新組合



我們以小程式遊戲中心卡片作為載體，將提煉出的遊戲機和場景特徵與其進行重組。首先觀察【共性】的部分，由於外觀結構都以方形為主，兩者可以很好的融合。



我們的重點在於怎麼做好【差異】的合理取捨，讓卡片在介面中結構穩定性，與其他模組整體風格保持和諧，同時又具備遊戲感。形狀上我們試著在卡片中融入從遊戲機中提取的【差異】化特徵。由於小程式其他卡片模組統一以圓角特徵為主，我們舍掉遊戲機中直角切角的方式，採用了大圓角作為異化特徵，為了不破壞外觀的統一性，大圓角僅應用在卡片內層；形式上模擬遊戲機插卡的設定，將卡片作為卡槽，遊戲人物為主體嵌入其中，這樣的設定也將資訊層、主體層、氛圍層進行了更清晰的劃分。

由於三角形的尖銳與圓角的圓潤形成鮮明對比，容易吸引注意並具有指向性，只剋制的應用在具有使用者行為導向的部分，比如“開啟”按鈕。



在整體形態確定之後用【紋理】補充細節，這裡應用了有轉折的斜線搭配圓點，通過點、線穿插豐富節奏感，細節不在於多，而在於營造情境，豐富且合理的細節可以引發人對真實世界的更多聯想，提高可信度和代入感。



4. 延展

將整個過程模組化，形成公式【遊戲圖形特徵 x 卡片載體 = 遊戲感模組】同樣的遊戲圖形特徵與不同功能卡片載體組合，擴充到小程式遊戲中心其他模組的設計中，形成統一具有識別度的視覺語言。



例如，“精品推薦”、“好友愛玩”模組，直接複用了大圓角，斜線、轉折、圓點等圖形特徵，根據內容和功能的不同進行了節奏的微調。



有了公式作為依據，我們可以根據功能特點，賦予卡片更合理的特徵。比如“挑戰”模組將現實中街機按鈕的圖形特徵，運用在了卡片按鈕中，強化與別人激烈對戰時猛砸按鍵的場景代入，從而刺激點選。最終資料驗證挑戰模組也是整個小程式遊戲中心中點選量最高的卡片模組。



我們在這個過程中也豐富了公式【遊戲圖形特徵 x 卡片載體 = 遊戲感模組】中的【遊戲圖形特徵】 資料庫，便於直接拿來與新增的功能卡片載體進行組合應用，提升了設計效率，同時也為我們未來腦暴新的方案提供了資料積累和依據。



PART. 2 強化核心

在外觀滿足使用者對“好玩”的感受後，我們開始深挖進入核心，探索什麼帶給使用者強大的驅動力，讓他們願意進一步“玩”下去。

01 驅動力的來源

人的驅動力來源於動機、能力和觸發條件三要素 (Fogg's Behavior Model)。這裡我們藉助八角動機模型，分析動機如何帶來驅動力，而視覺在動機的強化上起到怎樣的作用。



以《塞爾達：荒野之息》為例分析視覺表現手法如何輔助遊戲中的核心動機，讓我們沉浸其中無法自拔：



動機：成就感

用大量發光和爆炸的視覺表現去強化獲得物品或者裝備升級的成就感，常伴隨音效和震動反饋。



動機：渴望稀缺

用差異化，比如極端的體積大小、怪異的造型、醒目的顏色，來表現稀有。異化程度與稀有度往往成正比。玩家只需要通過視覺感受就可以判斷稀有度從而激發獲取的渴望。



動機：擁有感

塞爾達中的物品設計充滿驚喜，激發收集的慾望。集齊500個小精靈的便便，會獲得一個完整的黃金便便，設計上把黃金材質和便便的形狀相結合，暗含搞怪的趣味；裝備中一套帶有Switch品牌logo的文化衫也是別出心裁。



02 小程式遊戲中心的動機強化

我們從遊戲的視覺設計中汲取經驗，分析在小程式中如何用視覺表現強化使用者動機，為使用者帶來“玩”下去的驅動力。



以對戰邀請設計為例，僅從視覺角度探索設計如何輔助核心動機的強化。分為兩個部分，1. 拆分並歸納已有的資訊；2. 資訊模組與動機進行組合。

1. 歸納資訊

首先將已有的資訊拆分窮舉，重新梳理資訊類別與優先順序。在這裡將資訊分為靜態與動態兩種型別，由於對戰邀請的實時性很強，所以我們需要強調動態資訊，引起使用者對邀請卡片狀態變化的關注。



2. 強化資訊：資訊 x 動機

將整理後的資訊模組與動機模型中的8個核心動機進行交叉組合，思考其中可以通過設計強化的點。一個產品很難滿足八種動機，集中做好幾個點，就可以為使用者提供足夠的驅動力，同樣的視覺設計對動機的輔助也無法做到全面，但是運用這個方法，可以為產品和設計的改進提供方向。



2.1 倒數計時 x 逃避虧損



失去比從未得到更讓人感到焦慮，倒數計時意味著做選擇的機會隨著時間的流逝正在消失，引起了使用者緊迫感，利用不想失去任何潛在機會的心態，逼迫他們做出決定。在視覺表現上突出了最後3秒的倒數計時，吸引視覺焦點，強化使用者對機會流失的感知。



2.2 按鈕 x 好奇未知



人類通過對未知的探索得以生存和發展，滿足對未知的好奇是對原始本能大腦的內在激勵，比諸多外在的獎勵都要有效。正如遊戲中會用發光的寶箱去激發使用者探索的好奇心，我們為了從視覺上提醒使用者對戰卡片狀態的變化，在開始遊戲的狀態模擬遊戲機的插卡瞬間動態，按鈕上加入從無到有的變化及箭頭旋轉的引導，均勻動態會讓使用者因為習慣而失去焦點，所以動效細節也應該富有節奏變化。



2.3 結果 x 成就感



正如我們從懵懂的幼年就受到小紅花的激勵，人渴望成長，完成目標，更需要進步後被嘉獎的成就感。對戰邀請在對結果的設計中強化勝利後的儀式感，用麥穗、勳章、閃光等代表榮譽的元素，烘托第一名的獨特，除了向群友炫耀以外，更可以挑釁對手不服再戰，促進對戰動機在關係鏈中的自迴圈。



FUTURE

未來可以更好玩

從遊戲中我們學到，構建一個好玩的世界，需要具備富有吸引力的外觀和強驅動力的核心。這種構建方法不只適用於小程式遊戲中心的視覺設計，更可以擴充應用到整個小程式的產品策略中，為我們未來創造更多的“玩”法提供方向。




REFERENCE


[1] Tim Anderson, 設計語言與世界觀的聯絡。 2019
[2] Yu-kai Chou, 遊戲化實戰[M].2017  


來源： 騰訊ISUX
原地址：https://mp.weixin.qq.com/s/NFF_17ftfj-mO7CrGsD9Pw