QQ 小程序游戲中心主打豐富多樣化的小游戲，作為設(shè)計師如何通過視覺表現(xiàn)構(gòu)建一個更好玩的平臺，向用戶傳達「好玩」的感受。

從游戲中學習什么是 「好玩」

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

構(gòu)建一個好玩的世界

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

搭建外觀

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

1. 視覺語言的形成

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

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

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

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

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

為了突出游戲中心「好玩」的氛圍，構(gòu)建一個「好玩」的平臺，我們將可以喚起游戲感的元素融入到小程序視覺語言的設(shè)計中。

參考真實元素

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

提煉圖形特征

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

我們提煉真實世界的游戲機和游戲場景中的特征?！感螤睢钩Ｒ妿Щ《鹊姆叫危殡S一個角有異化，異化往往是特大圓角或者直角切角兩個極端；按鍵等結(jié)構(gòu)較為圓潤，以圓或圓角矩形居多；三角形應(yīng)用范圍最小，一般在具有用戶行為導向的區(qū)域，比如游戲卡上引導插卡方向的箭頭。「紋理」常見多條平行直線或者圓點有節(jié)奏地重復排列，帶有一定傾斜角度，在重復中伴有部分異化，比如缺口和轉(zhuǎn)折。

回歸到小程序 UI 界面中，舊版游戲中心卡片形態(tài)為 UI 模塊中常見的方形結(jié)構(gòu)，方形較為穩(wěn)定，且利于內(nèi)容的整合及區(qū)隔。

重新組合

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

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

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

在整體形態(tài)確定之后用「紋理」補充細節(jié)，這里應(yīng)用了有轉(zhuǎn)折的斜線搭配圓點，通過點、線穿插豐富節(jié)奏感，細節(jié)不在于多，而在于營造情境，豐富且合理的細節(jié)可以引發(fā)人對真實世界的更多聯(lián)想，提高可信度和代入感。

延展

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

例如，「精品推薦」、「好友愛玩」模塊，直接復用了大圓角，斜線、轉(zhuǎn)折、圓點等圖形特征，根據(jù)內(nèi)容和功能的不同進行了節(jié)奏的微調(diào)。

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

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

強化內(nèi)核

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

1. 驅(qū)動力的來源

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

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

動機：成就感

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

動機：渴望稀缺

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

動機：擁有感

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

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

我們從游戲的視覺設(shè)計中汲取經(jīng)驗，分析在小程序中如何用視覺表現(xiàn)強化用戶動機，為用戶帶來「玩」下去的驅(qū)動力。

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

歸納信息

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

強化信息：信息 x 動機

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

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

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

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

人類通過對未知的探索得以生存和發(fā)展，滿足對未知的好奇是對原始本能大腦的內(nèi)在激勵，比諸多外在的獎勵都要有效。正如游戲中會用發(fā)光的寶箱去激發(fā)用戶探索的好奇心，我們?yōu)榱藦囊曈X上提醒用戶對戰(zhàn)卡片狀態(tài)的變化，在開始游戲的狀態(tài)模擬游戲機的插卡瞬間動態(tài)，按鈕上加入從無到有的變化及箭頭旋轉(zhuǎn)的引導，均勻動態(tài)會讓用戶因為習慣而失去焦點，所以動效細節(jié)也應(yīng)該富有節(jié)奏變化。

強化信息：結(jié)果 x 成就感

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

未來可以更好玩

從游戲中我們學到，構(gòu)建一個好玩的世界，需要具備富有吸引力的外觀和強驅(qū)動力的內(nèi)核。這種構(gòu)建方法不只適用于小程序游戲中心的視覺設(shè)計，更可以拓展應(yīng)用到整個小程序的產(chǎn)品策略中，為我們未來創(chuàng)造更多的「玩」法提供方向。

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

深入了解游戲化設(shè)計模型：

參考資料：

• [1] Tim Anderson, 設(shè)計語言與世界觀的聯(lián)系. 2019
• [2] Yu-kai Chou, 游戲化實戰(zhàn)[M].2017

歡迎關(guān)注「騰訊ISUX」的公眾號：