劍與遠征高階UI設計師AG：如何設計能讓玩家共情的故事化UI

本文出自“莉莉絲遊戲”公眾號

AG，亢奮型遊戲UI設計師（上面配圖是為數不多的靜態）。曾主導《咔嘰探險隊》的UI概念設計與落地。於2020年入職莉莉絲遊戲，參與《劍與遠征》的UI設計工作。

“凡是透過設計讓玩家與記憶中的故事產生記憶關聯的，就是故事化設計。”

一、UI為什麼要做故事化設計？

故事，是生活的比喻。

我們用比喻的方式，將我們對世界，對人生的洞見以故事的形式向他人述說。我們在故事中成長，也將人生日常演繹成故事。

透過設計的敘事手段與玩家的故事經歷相結合，不僅能將現有故事豐滿和補充，還能增強互動體驗的趣味與質量，讓玩家更容易對遊戲的故事產生共情，從而提升資訊的轉換效率。

提供想象空間，以少喻多

在我們對不同故事的認知過程中，也建立了一套資訊與形象的關聯方式。



這種時候不需要講述整個故事的全貌，我們也能感受到這些形象背後所代表的涵義和引發各種情節的聯想。

在UI設計時，同樣也能使用這種透過引發聯想的形式，去引發玩家對於資訊和操作的理解。



在遊戲spiritfarer中，砍樹的工具被設計成一根相連於貓與主角之間的鋸子，在沒有其它提示UI的情況下，我仍然會下意識透過左右移動來嘗試著操作鋸子。

增加趣味性的同時，對現有故事豐滿和補充

背景故事的豐滿：



夢魘大陸（團本玩法）的背景設定中，描述的是玩家作為被選中的勇士，穿越時間來到信仰喪失的年代，解救城邦、開拓疆土、迎戰惡魔的故事。

在AFK的設計語言中，荊棘是惡魔的象徵。而在該玩法的設定中，星辰是指引玩家方向的正向概念，設計介紹介面時，設計的思路是把這二者進行結合，將故事的戲劇性衝突進行視覺暗示。

在該玩法的聖物系統設計中，我們可以對比一下有故事化要素和沒有該要素的時候，在感受上會有哪些差異。



相比於左側由星空和山體構成的場景，右側的內容安排會更具敘事感。

延續至山頂的火光，山頂的柱子和背後祭祀柱以及背後張開雙臂的虛影，既增強了整體感受的想象空間，也對夢魘大陸的故事背景進行了視覺資訊上的豐滿。

聖物星空上的虛影在最初設計時，是希望根據不同的職業顯示不同的星辰系天神的形象，但是由於目前的設定中，該系列天神還沒全部設計完成，最終選擇繪製了一個與當前天神無關的形象。但該設計方式仍為以後擴充預留了空間。

行為目標的補充

對於使用者的目標，APP應用和遊戲很不一樣的一點是：APP是滿足人現有的需求，如叫車、購物、存錢理財等現實需求，而遊戲內的目標卻是我們幫助玩家構建的。就像讓玩家去屠龍、去冒險、去生存，我們需要一個故事來幫助玩家構建目標。


由於接到該三消需求時，並沒有明確的故事包裝，與其臨時想一個有具體目標的故事包裝，我更願意做一個有開放結局式的故事化設計。這樣也利於後續的維護和擴充。

由於該活動主推的英雄是松鼠皮帕，我從皮帕的角色行走動畫中提取了他緊張的情緒，做了一個緊張的四處張望的小頭像在最新關卡的位置。這樣既能與內部的動畫呼應，也呈現一種迫切希望向前推進的情緒。這也為該功能往前推關這一任務的目的提供了一個補充和解釋的空間。

這是一次UI先行的設計，在開發中期，文案的內容開始接入，在現有表現的基礎上，結合迷糊小女巫皮帕的性格，做了一個這樣的開場設定：

救救救救救命啊！糊塗小女巫皮帕又闖禍啦！


皮帕有一個大大的次元魔法口袋，裡面裝滿了星界學院老師給的魔法種子。這些種子原本是老師們為了改善沙漠環境而準備的，只要接觸到一滴水就會快速生長。而糊塗鬼皮帕不小心把魔法口袋給捅破了一個洞，魔法種子就這麼從口袋裡漏了出來，伴隨著皮帕上竄下跳地腳步撒得整個薄暮叢林到處都是。這些魔法種子落入了叢林肥沃的土壤中，開始瘋狂瘋狂瘋狂瘋狂生長！不趕緊採取措施的話，大家的帳篷都要被底下竄出來的植物捅破啦！


幸運的是，冬季的薄暮叢林剛剛降下了一場大雪，大多數種子都被封在了冰中延緩了生長速度。只要敲碎冰塊，將種子放回到魔法口袋中，就能避免災害的擴大！


而不幸的是，我們的糊塗鬼皮帕到現在都沒有發現，自己的口袋破了一個洞……


“嗚哇嗚哇！為什麼種子越撿越多啊！”

我們不是每一次都能拿到一份故事化的系統包裝，但我們仍可以提前在設計中預留故事化的空間。

二、UI什麼時候可以做故事化設計？

當遊戲本身有講故事的需求且玩家注意力仍有剩餘時，剩餘的空間就是 UI 故事化程度的空間。

遊戲的故事是否需要從 UI 層傳達，取決於整個遊戲的構架中，我們希望玩家如何分配他們的注意力。

儘管玩家的注意力會因為個體的差異，無法被徹底量化成具體的數值，但開發者在進行系統設計時，仍能將注意力的分配預期作為考量的尺度之一。

假設一個玩家能投入的“注意力”總值為：100%，我們希望玩家將多少比例分配在場景與角色演繹上？90%？80%？還是 10%或者 20%？

如果是希望將玩家 90%的注意力集中在場景與角色上，我們能確保在場景與角色的演繹上能吸引玩家 90%的注意力嗎？畫面的美術質量足夠嗎？角色的表情與動畫能生動到產生代入感嗎？

如果不能，那玩家剩餘的注意力去哪兒了？

是動聽的音樂分散了注意力嗎？是玩法機制的趣味性吸引了注意力嗎？又或者是各種糟糕的體驗吸引了玩家大部分的注意？這些吸引注意力的事情將玩家的 100%注意力瓜分完後，還有剩餘嗎？

如果還有剩餘，那個剩餘的部分，才是 UI 故事化的發揮空間。如果沒有剩餘，在 UI 確保體驗順暢的前提下，再額外增加"故事化"的資訊，很容易造成不必要的噪聲干擾。

• 在“資訊傳播”的定義中，傳播由資訊源、資訊、接收者構成。
• 媒介與噪聲：從資訊源到資訊再到接收者，在這轉換的過程中，承載資訊的媒介、資訊流動的速度、接收者的個人狀態與能力等等，都會對資訊的傳播造成影響。
  

在王者榮耀的PVP模組中，戰鬥畫面的資訊重要程度最高，在這一過程中玩家沒有精力也不應該被“包裝”類的資訊干擾。

如果遊戲開發者們都很明確知道，我們在各個模組的資訊量安排，仍然不足以引起玩家的全部注意力，那從 UI 層面對故事進行故事化設計，不僅能很好地將現有故事進行豐滿和補充，還能增強互動體驗的趣味與質量，讓玩家更容易對遊戲的故事產生共情。

三、如何做故事化設計

關於在UI上的故事化設計手法有很多，下面將從“冰山原則”和“感受質”兩個角度出發，思考如何透過這兩個要素讓玩家產生對故事的記憶關聯。

“冰山原則”的指導意義

“冰山運動之所以雄偉壯觀，是因為他只有八分之一在水面上。”

文字與形象是所謂的“八分之一”，而情感和思想是所謂的“八分之七”。

相比於強調“如無必要，勿增實體”的“奧卡姆剃刀”，冰山原則更加強調實體經驗的省略——省略的是我們憑經驗可以填充想象的部分。最大限度地調動讀者的經驗參與，使讀者感受到作家對自己理解力和經驗的信任。

在UI的故事化設計中，我們也可以從這個角度進行思考，用更少更必要的元素去強調更多的情感與思想。

在對某個事物進行設計呈現時，應該時刻思考：對於外框、輪廓、花紋與材質的刻畫等等這些“細節”的處理，是希望傳達什麼？為了實現這個傳達，必須要使用當前用的手段嗎？有哪些手段是可以捨棄的？是否有更好的方式？

如果當我們反思自身的設計時，發現在"細節"的處理上對最終的傳達目標沒有明顯幫助時，可以考慮將那些“可有可無”的要素進行捨棄，這樣既可以有效的為UI的資訊騰出空間，也更能在眾多的資訊要素中顯現出我們要傳達的內容。

示例：群星之幕

群星之幕是一個透過達成條件去解鎖更多資源產出的系統。其中包含多個星座模組，每個星座對應一條成長線。而每個成長線中又包含多個成長點（星座中的星星）。

下面是我最開始摸索方向時做的概念圖：


方案A：不過多強調背景的敘事屬性，更多強調功能資訊傳達與互動體驗的一致性。每個星座上都將顯示該星座擁有多少顆星星，每顆星星又有啟用與未啟用的狀態。

方案BC：雖然傳達的內容有所差異，但主旨都是希望透過用壁畫的方式去強調介面的敘事屬性。星座中的星星也擁有啟用與未啟用的狀態，但是顯示區域較小，背景更突出。

我們在組內討論時，都一致認為，後面的2個方案雖然敘事感更強且在繪製表現上有更大的發揮空間，但是也因為背景的強調，反而會弱化對星座本身的認知。如果在此基礎上再對星座進行加強，玩家的注意力反而會因為2個重點資訊的同時存在而產生割裂。並且強調背景的敘事屬性不僅要花費大量的精力去進行思考和繪製上的敘事安排，後期擴充所需的工作量也是一個令人頭疼的問題。

面對自己挖的坑，我開始反思：這個系統的重要程度是否能讓它佔用足夠多的開發資源？是否有必要給“星空”的設定再加一層“壁畫”的包裝？

基於開發成本和資訊優先順序的考慮，最終我們放棄了壁畫的方案。但執著於敘事化設計的我，仍然希望能保留些許敘事成分在A的設計中。

關於八分之七的思考：

• 從神話感受出發：體現神秘感、增加宗教意味。
• 從現實感受出發：體現天上群星的繁多與閃耀。
• 從資訊等級出發：星空<花紋<星座。最終呈現的效果給人的感受應符合資訊的分級。
• 從製作成本出發：背景儘可能使用可複用的紋理，減小後續擴充的成本。
• 從感受出發：基於第4條的思考，重複的背景可能會使觀眾感到審美怕疲勞和無趣，需要用其它的手段彌補這種負面感受。
• 從畫風整體性出發：作為AFK遊戲裡的第一個以星空為主題的介面，沒有可參考的繪製物件，需要注意在細節刻畫時避免與整體畫風過於脫離。
  

關於八分之一的呈現：


背景的呈現：

• 透過對稱式的構圖、下方舉著類似埃及手的人和聖體光外圈，增強與宗教意味的聯想。
• 由上往下發散的扭曲花紋和經緯線將分散的圖示個體整合成一個整體，增強星圖整體性的聯想。
• 背景的星空由兩張可以四方連續的PNG組成。在拖動操作時，花紋與後方的星空有錯層移動的效果，並且偶爾會有流星劃過。這些細節不僅增加趣味程度也減小因重複度帶來的乏味。
• 增加了AFK特有的排線和噪點式的質感，提升與現有畫風的契合度。
  

星座的呈現：

• 在星座圖示的繪製上，減少裝飾性元素的設計，儘可能只突出一個要素。明度的安排也是將更高的明度留給更符合圖示主體的部分。
• 在花紋和星座圖示上，都有流動的玻璃質感，但是在特效的質感和播放速率上做了分級，圖示更強，背景更弱。
• 在點選星座進入下一級介面時，透過模擬鏡頭的移動，進一步加強空間感。
• 星座內外星星的連線方式儘可能的接近，減小因介面跳轉產生的脫離感。
  

我想可能會有人有疑惑，明明說的是八分之一，但為什麼看起來描述的比八分之七還要多。

我的觀點是，在使用“只呈現八分之一”的概念時，並非是要刻意減少設計元素，而是應該強調每個設計手段與元素安排自身的存在意義，且要儘可能的在不增加資訊干擾的情況下有助於實現我們的最終目的。

文字與形象是所謂的“八分之一”，而情感和思想是所謂的“八分之七”。

感受質

某一現象和思維所附帶的感受就是感受質。

感受質是一種內在的、意識可識別的、非表徵的特性。

有時感受質會被定義為感官經驗，而在別的情況下，如果思想和此類認知也具備顯著的特徵，那麼他們也具有感受質。

比如：想象某種材料的觸感、溼度等等。這種想象的過程中所帶來的感受，也屬於感受質。

相比於用上述的文字去解釋什麼是感受質。我認為從下面的感覺實驗中，或許大家更能體會“感受質”一詞的含義。


在看上面這一影像時，能否喚起你自身經驗的某種感受？

它的熱量、運動軌跡甚至是柴火發出的噼啪聲，有在你的腦內進行重現嗎？如果是有常年使用柴火土灶經驗的人，甚至能感受到一種煙霧燻鼻的錯覺。

再看看下面這張：挾土秀平設計的自然木屐。


就算你從未穿過這雙青苔木屐，你也一定能想象穿上去時的那種觸感與溼度。

如《設計中的設計》一書所說的那樣：視覺並非是自足的，而是與其它的感覺知覺聯手工作的。

當眼睛捕捉到的複合視覺印象被大腦解讀的一剎那，影像便立刻成為一個生動的實體形象。多種感官組合起來的感覺刺激匯聚到一起，在腦子緊密結合，一個心理的圖景就這樣誕生了。

在任何內容的呈現中，這個內容要麼是個特定的感受質，要麼就是某種可以分析被這種感受質組成的東西。內容的呈現作為一個事件當然是唯一的，但組成他的感受質卻不是。

例如蜂蜜的甜味與糖的甜味並不相同，但都作為甜的感受質出現在我們的認知經驗中。


從一個經驗到另一個經驗時，他們是可以被辨識出來的。就如你能分辨出某糖果的甜味與蜂蜜的甜味並不一致。

上面的兩個例子是感受質在知覺經驗中比較具體的呈現，除此之外，如擁抱、胃疼、發癢、頭暈目眩等等這類經驗中，身體的上的複雜感受也屬於感受質的呈現。

某些對人而言屬於正向感受的感受質，也會被用於設計之中。例如許多懶人設計都會強調被擁抱的感覺，給人一種溫暖和安全感的體驗。


感受質也存在於對情緒的感受中。

如愉悅、恐懼、愛、悲傷、嫉妒、遺憾、無聊、緊張、痛苦等。


在我們透過顏色去傳達情緒或者某種屬性時，也正是在調動玩家對於顏色感受質的認知。

就像紅色所附帶的聯想：血、火、熱量、危險等感受，儘管每個人因為知覺經驗的差異，在感受強度上會有所不同，但大部分人對整體概念的認知並不會有太大差異。因為感受質本身也來自於材料自帶的感覺屬性（血液和火焰等例子中，紅色通常作為固有屬性出現）。


感受質在概念上沒有強弱之分，但是感受上有。

概念指的是感受質本身，如“疼痛”本身作為一種感受質，所有型別的疼痛都算是“疼痛”這一感受質，但是對疼痛等級的感受卻會有明顯的強弱之分。


喚起感受質的，不只是視覺形象。


最初在設計徽章這一功能時，既要確保該功能和其它的切頁的風格融洽，又要體現出該徽章頁面的特殊性，希望以此加強獲得徽章時的滿足感和刺激玩家的展示慾望。

在設計過程中，我一直在反覆思考，這些徽章會給玩家一種什麼樣的心理感受呢？是硬的？還是軟的？溫度是冰冷的還是溫熱的？我們是否可以讓玩家感受到這些特性？

於是我向策劃提出了“擁有感”的概念，即提升玩家對徽章各種材質屬性的認知，來獲得玩家對徽章這一存在的認同感，給玩家“這個物品就在我眼前，我手中”的想象暗示。

我們在徽章詳情頁中，加入了檢視部位細節的功能，每處部位的描寫都是對該徽章感受質的暗示。給溫度、手感、重量這些不易在視覺上傳達的資訊提供了想象空間。


從玩家的反饋來看，除了從影像的角度去呈現，文字的呈現似乎也是一種可行的方法。

在進行故事化設計時，從感受質的呈現出發，細節將不只是對事物形象的還原，還有心理感受的豐滿。

冰山原則是以少喻多的指導方向，對感受質的理解將決定事物呈現的深度。

這二者的結合能為我們在做故事化設計時提供新的觀察視角和思考方式。


來源：莉莉絲遊戲