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

從遊戲中學習什麼是 「好玩」

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

構建一個好玩的世界

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

搭建外觀

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

1. 視覺語言的形成

視覺語言的形成分為 4 步：

• 參考真實世界元素
• 提煉圖形特徵
• 重新組合特徵
• 延展到整個世界觀

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

2. 小程序遊戲中心視覺語言的建立

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

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

參考真實元素

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

提煉圖形特徵

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

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

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

重新組合

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

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

由於三角形的尖銳與圓角的圓潤形成鮮明對比，容易吸引注意並具有指向性，只克制地應用在具有用戶行為導向的部分，比如「打開」按鈕。

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

延展

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

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

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

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

強化內核

在外觀滿足用戶對「好玩」的感受后，我們開始深挖進入內核，探索什麼帶給用戶強大的驅動力，讓他們願意進一步「玩」下去。

1. 驅動力的來源

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

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

動機：成就感

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

動機：渴望稀缺

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

動機：擁有感

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

2. 小程序遊戲中心的動機強化

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

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

歸納信息

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

強化信息：信息 x 動機

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

強化信息：倒計時 x 逃避虧損

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

強化信息：按鈕 x 好奇未知

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

強化信息：結果 x 成就感

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

未來可以更好玩

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

如何快速開啟好玩的遊戲體驗，只需打開 QQ 首頁輕輕下拉，即可進入小程序遊戲中心哦~

深入了解遊戲化設計模型：

閱讀文章 >>

參考資料：

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

歡迎關注「騰訊ISUX」的公眾號：

未经-摩登3注册-摩登3测速官网-允许不得转载：摩登3注册-摩登3测速官网 » 無極五登陸地址_如何用遊戲化思維做設計？來看騰訊頂尖團隊的實戰案例復盤！