《陷陣之志》開發者：ITB的UI設計曾是個夢魘，但也是令其卓越的關鍵

簡介與序曲


“我想我們在一開始就陷入了UI設計的夢魘中。”Matthew Davis（下譯作馬修·戴維斯），Into the Breach的主程式兼合作設計者如此說道。

“當我們決定要在遊戲中的每個單獨的回合都清晰，明白地展示每個單獨的敵人的行動時，我們就已經可以清楚地預見那個夢魘會是多麼可怕的了。”Justin Ma（下譯作賈斯丁·馬），Into the Breach的主美術兼合作設計者補充道。

Into the Breach是一款回合制戰術戰棋遊戲。來自於Faster Than Light的開發者Subset Games工作室。遊戲內，玩家操控一個由3種不同的機械高達組成的機甲戰隊，飛入戰場，為了守護地球上最後倖存者們的城市，與巨大的昆蟲型敵人戰鬥。這裡充滿了豐富的戰略抉擇，敵人種類，以及數不勝數的需要征服的挑戰。這款遊戲可以說是非常有深度，高度複雜，而且是“近乎於完美”的了。就像賈斯丁·馬說的那樣，他和馬修·戴維斯在過去的4年裡，幾乎花了一半的時間來雕琢的，就是這個遊戲的UI設計。實話實說，UI設計確實是那些令Into the Breach脫穎而出的重要因素之一，而且UI設計還向我們指示出了這款遊戲特有的的本質。

在Into the Breach中，最關鍵最核心的一點是你永遠精確地知道蟲子們接下來要怎麼攻擊。你知道什麼樣的攻擊形式它們會發出，會造成多少點傷害，這一切都清清楚楚。這是那種你好像會有“上帝視角”感覺的遊戲，但同時你又處於敵眾我寡的境地，因此你指揮的每一個戰術回合，就是用你獲知的資訊和遊戲知識來拼命思考如何與巨大的蟲子們戰鬥的過程。

在跳蟲型敵人落向你的城市上方之前，將它推向未被其他單位佔領的空地，然後指揮另外一個我方機甲擋住其他煩人蟲子的射擊。每個回合都是一個小巧的解謎遊戲，你將該死蟲子們的進攻計劃分崩離析，撕成碎片，從狹縫中拼殺出一線生機。

而這些精彩的絕境求生戰，都建立在一個必要的前提條件下：每個回合，你都清清楚楚地瞭解每個可能的威脅，每個敵人的攻擊模式，以及你的每個行動、每個動作能帶來的效應、結果。


清楚易懂的攻擊方式設計：

“我們對UI設計的要求是，在任何我們已考慮到的遊戲中可能出現的情況下，玩家都必須要非常清晰地理解，瞭解到現在發生了什麼”賈斯丁·馬說道。

這就是為什麼機甲們以及蟲子敵人們只有三種不同的攻擊表現方式：能夠影響鄰近單位的近戰攻擊；在一條直線上射出彈丸直至它碰到第一個障礙物才會爆破的遠端攻擊；以及能夠飛越障礙物，瞄準同一直線上任意一格的拋射攻擊。

“曾經有段時間我們採用了傳統的【三格射程】式的攻擊表現方式，那種菱形的形狀。直到後來我們意識到當我們嘗試去同時展示大數量敵人的攻擊情況時，你將根本沒有辦法去搞懂到底誰在攻擊誰”賈斯丁·馬繼續說道。那將是一個充滿了拋物線指示物，陰影指示物，被攻擊目標指示物的一片混亂的遊戲介面，根本沒法閱讀。

“我個人是不喜歡每個回合都得停下來檢查一下攻擊範圍的，尤其是你還得移動單位來檢查我是否能從這裡擊中目標，或者需要數格子的情況”馬修·戴維斯說道，“對大腦，以及眼球來說，這些到底誰能攻擊到誰的繁瑣情況是難以管理的。所以打從一開始，我就打算設計一個你一眼掃過去就能知道戰場上到底發生了什麼的介面，你也就省去了多次檢查自己到底能不能在正確射程擊中敵人的麻煩。”


將清晰的，格調分明的攻擊型別展現的明明白白，也就意味可能要捨棄一些複雜的武器攻擊效果，比如新星型攻擊，或者扇形區域攻擊。因為馬修·戴維斯不想讓遊戲轉變成一個測試玩家在腦海裡如何想象、旋轉射擊區域形狀能力來確定自己是否能射中的遊戲。

“這我必須得插一下嘴，那些攻擊型別賊酷”賈斯丁·馬突然插話道。但他也確實承認那些酷炫的攻擊型別有些華而不實。“你能看見那些傷害指示物鋪得滿地圖都是，這對於我們開發者來說還行，因為我們確切地瞭解每種型別的敵人能夠做什麼樣的攻擊行為。但當我們把測試版遊戲交給測試玩家時就是兩碼事了。我們得把‘Who was doing what’這件事展示地特別清楚明白才行。”


因此，所有拋射攻擊都會以一段迴圈的拋物線表示，所有遠端攻擊都會以一段點點點線來表示，所有近戰攻擊都以箭頭方向來表示。這些解決方案，都是從馬修·戴維斯和賈斯丁·馬觀察測試玩家在理解遊戲內容的微小失誤上出發，被一點一點改善，一點一點打磨好後才最終放入遊戲的。他們的目標就是提供給玩家一個直觀的，瞬間就能搞懂的武器工作原理。當然，這個野心也逼迫他們不得不放棄一些似乎對於玩家來說稍微有些複雜難懂的武器設計。

舉個例子，在之前的測試版，很長一段時間以來遊戲裡存在一種投石武器，在最終正式版裡它是拋射型攻擊武器，但是在早期版本其一直作為遠端型攻擊武器存在，卻又可以射擊到瞄準路線上沿途的目標。這已經是一個遊戲規則內的規則打破者了——其他的遠端武器都不是想它這樣運作的——不過它也有個額外的小規則，當它碰撞到一個敵人時，它會在那個敵人的面前留下一塊巨石。“那個其實挺有趣的，它能帶來一些有趣的抉擇，而且在攻擊一個敵人時留下個障礙物擋住另一個敵人的感覺很爽。”馬修·戴維斯說道，“你能用那個武器做不少很酷的事”。但那些情況是難以描述且不夠直觀的。


這個早期原型展示了嘗試去設計同時展示攻擊地點和移動路徑的UI表現方式。

類似的，許多武器能夠將單位推動，但所有的武器、攻擊只能推動單位僅僅一格，這裡在遊戲中沒有任何例外情況，比如說不存在在冰面上推動單位直到它們撞擊到一個障礙物（譯註：哎？遊戲裡沒這麼一說嗎？有點沒注意到）

“這有點難以表達清楚”賈斯丁·馬這樣講道，“但我們認為將推動效應簡化成簡單的一格的推動可以讓人們更容易理解，計算複雜的戰場上究竟會發生什麼”

動畫演示比文字描述事半功倍：

在Into the Breach中，系統教導你一個新的武器是怎樣運作的最主要的方式是通過滑鼠提示視窗來展現的。選中一個目標，滑鼠指標懸停於一項武器之上，就會彈出一個小視窗給你展示生動形象的動畫演示了那個武器的運作方式，而且這個動畫演示總是與你可用機甲中與這個武器型別相適配的那個機甲的形象來演示的。


這是個完美的資源庫，而且也是一種遊戲設計哲學：【在提供給新玩家所有他們所必須知道的資訊的同時，展示給那些熟手們一個高度簡化的UI】

但是，這些提示曾經一度不是完全動畫演示的。“我們當時發現我們用來描述武器是怎樣運作的語句變得難以接受的複雜化了。”馬修·戴維斯補充道。

“唉，老鐵。”賈斯丁·馬嘆到。

“那些描述武器功能的語句過於複雜了。我們當初觀看測試玩家鼓弄那些新武器時，他們看完那些三個句子長的描述語句後還是一臉懵逼的表情。”那些提示視窗裡一度只包含靜態圖片，而且還是用通用單位來展示武器原理，而不是那些實際與其配對的特定種類的機甲。所以有時玩家會難以將那些演示與他們的實際情況聯絡起來，無法瞬間領會到武器的運作模式。

所以馬修·戴維斯不得不把這個棘手的挑戰提上日程，那就是將所有的這些提示視窗動態化，使他們能夠將互相匹配的機甲與武器組合在一起，用小動畫來演示出來，使得它們足夠直觀易懂。

“我始終認為這是我們們做過的最重要的決定”賈斯丁·馬說道，“你能夠將‘對目標格子造成傷害且推動鄰近格的單位’這個句子輸入到提示欄裡一百次。但是展示一小段動畫演示能夠比這句子有效一千倍。這真雞兒逗。”

“當然，這是我在這遊戲裡最喜歡的那些小玩意之一。”馬修·戴維斯開心道。


一個展示了早期遊戲介面佈局的原型。

特殊效果帶來的設計風暴與圖示地獄：

每個武器的不同功能只是這個遊戲丟給你的資訊量風暴裡的一環。在遊戲中也存在幾種不同的環境效果或者說特殊buff，比如塵埃（單位位於其中時無法開火），燃燒（將使單位燃燒，收到每回合一點的傷害），A.C.I.D(禁用單位的護甲，而且受到所有傷害翻倍)以及其他種種不同的特效。他們一個個簡單地獨立生效時還好說，當他們相互疊加，互相作用時，就是一種剪不清理還亂的亂麻啦。譬如：如果一個被A.C.I.D感染了的格子著火了怎麼辦？你該怎麼去畫出這種格子？

“每當我們想再往遊戲裡新增更多的小島或者特效或者各種亂七八糟的東西時，類似這樣的麻煩問題就成堆地湧現出來”馬修·戴維斯說道。

“我們們真該聊聊一個單位被封凍在了冰塊中，然後你用一個帶有A.C.I.D的不帶直接傷害的攻擊推動它到了一個著火的格子上的情景。它會打破冰塊嗎？究竟會發生什麼？”賈斯丁·馬打趣道。


一個利用圖示展示單位將被如何推動的原型。

每一個這些複雜的相互作用都必須根據最符合玩家直覺的方式來反覆雕琢。製作者們最終決定快刀斬亂麻地讓一個格子在同一時間只能存在一種特效。所以你沒法在一個已經有A.C.I.D特效的格子上放置地雷，最主要的原因是將這兩種特效在同一時間展示在那麼一個小格子上是完全不切實際的。

但是在那些需要展示更多資訊的極端情況下，最接近直覺，最普遍的設計方法就是在那些地方砸上一個圖示。就像你現在在遊戲中看到的一樣，像是下回合將從地底爬出的蟲子敵人啦，那些正在遭受攻擊威脅的城市或單位啦，都有特別的圖示來標註。

但這種解決方案也有其弊端。“一年半之前，我們這個遊戲簡直是個圖示地獄”馬修·戴維斯苦笑道。在開發過程中，他們每當見到一位測試玩家錯過了一些相關的遊戲內資訊時，就會在那些地方增設一個圖示。於是乎螢幕上就慢慢被圖示們擠滿了。而對於武器來說，他們的解決方案是編輯和剪輯。

“作為一項遊戲設計原則，我們願意犧牲那些酷的點子，來使（遊戲）每時每刻都能清晰易懂。如果遊戲能夠被一種明明白白、清楚乾淨的方式來展示，那麼我們就可以這樣做。”賈斯丁·馬這樣說道。

結語：


一個展示了蟲子們的拋射攻擊的早期原型。

這是不是意味著，賈斯丁·馬先生關於這款遊戲中視覺表現方面有更多的雄心與抱負呢？比如將一個剛被攻擊過的格子上標上燃燒標記，或者是可以被機甲踐踏倒的環境物件啥的。說是這麼說，但是暫時還不需要想的那麼遠。

“我壓根就不認為我們現在有的設計方案就是最佳方案，”賈斯丁·馬的眼神亮了起來。“這些能夠變得更~加完美。但是就現在看來，我覺得現在這些是完全起作用的”

“啊，這的確是令人沮喪的部分，真的。我都不認為我們兩個中的任何一個人是一個極棒的UI設計師，”馬修·戴維斯說道，“我覺得我們只是粗暴地把這些東西推向了能夠勉強運作的方面。而不是運用我們自己的設計才華去創造出一個新的解決方案。”

“我覺得我們知道那些我們不喜歡的東西，”賈斯丁·馬接過話茬“我們不是牛逼的UI設計師，但我們清清楚楚地瞭解著那些我們不喜歡的設計，所以這就變成了一個千錘百煉的活，直到我們找到了一些我們覺得還不錯的方案。”


（Into the Breach的互動介面設計決不僅僅是還不錯那麼簡單。）


本文轉譯自Rockpapershotgun.com
原文章地址：https://www.rockpapershotgun.com ... h-interface-design/


作者：Alex Wiltshire
編譯：sPicaLance
來源：奶牛關