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

從游戲中學習什么是 “好玩”

為什么在游戲中我們明知得不到實質的回報，卻愿意投入大量時間和金錢？

好玩的游戲不僅用華麗的外表吸引我們，更因有趣的靈魂帶給人深入探索的動力。我們試著挖掘游戲中那些“好玩”的因素，將其運用到小程序游戲中心的設計中。

構建一個好玩的世界

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

搭建外觀

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

1. 視覺語言的形成

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

1. 參考真實世界元素；
2. 提煉圖形特征；
3. 重新組合特征；
4. 延展到整個世界觀。

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

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

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

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

（1）參考真實元素

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

（2）提煉圖形特征

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

我們提煉真實世界的游戲機和游戲場景中的特征。

【形狀】常見帶弧度的方形，伴隨一個角有異化，異化往往是特大圓角或者直角切角兩個極端；按鍵等結構較為圓潤，以圓或圓角矩形居多；三角形應用范圍最小，一般在具有用戶行為導向的區域，比如游戲卡上引導插卡方向的箭頭。

【紋理】常見多條平行直線或者圓點有節奏的重復排列，帶有一定傾斜角度，在重復中伴有部分異化，比如缺口和轉折。

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

（3）重新組合

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

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

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

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

（4）延展

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

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

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

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

強化內核

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

1. 驅動力的來源

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

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

動機：成就感

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

動機：渴望稀缺

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

動機：擁有感

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

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

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

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

（1）歸納信息

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

（2）強化信息：信息 x 動機

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

2.1 倒計時 x 逃避虧損

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

2.2 按鈕 x 好奇未知

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

2.3 結果 x 成就感

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

未來可以更好玩

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

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

REFERENCE：

[1] Tim Anderson, 設計語言與世界觀的聯系. 2019

[2] Yu-kai Chou, 游戲化實戰[M].2017

來源：https://mp.weixin.qq.com/s/NFF_17ftfj-mO7CrGsD9Pw

本文由 @騰訊ISUX 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自騰訊ISUX官網