我們是怎麼把最後生還者UI做的這麼好的

編輯筆記：本文是由玩皮狗的UI設計師Alexandria Neonakis邀稿。

如果您也是遊戲的從業人員且願意分享您的經驗請連繫 Jason@kotaku.com 

當我在2012年11月加入頑皮狗時，這個工作室從未有一位專職 UI 設計師或美術。距離最後生還者專案截止還有八個月，部分的 UI 原件已經有略有雛型，而 HUD（抬頭顯示器）的整體設計還沒開始，還有許多事情尚未決定。我必須負責決定我們 HUD 與選單系統的流程；與程式和遊戲設計師一同製作、測試並不斷修正；最後繪製每個物件確保它與現存的遊戲美術保有一致性。

有許多理由讓這個案子的挑戰相當獨特，最顯而易見的就是急迫性。八個月對兩個人來說要把一個完整的 UI 從原型（Wireframe）做到完成最終潤飾不算很足夠的時間。我們的主 UI 程式 Paul Burg 與我一同打造了一套快速設計的系統，可以製作與反覆修正全部的物件。我們認為最適合我們的流程是這樣：原型→製作→反覆測試→繪製美術並修飾。

在此我就攻略一遍這個打造出遊戲中最終UI與HUD設計的流程。

原始設計

一開始時武器選擇系統與最後生還者在E3 Demo的是一樣的。武器、彈藥、生命與消耗品位在螢幕左上角。數位方向鍵的左右可以來回選擇你全部的武器，上下則是選擇消耗品

這系統製作好時的機制是當 Joel 撿起一把新武器時，他會把目前持有的武器丟棄（同秘境探險），在測試過這套系統後，遊戲設計團隊認為讓Joel保有他發現的全部武器比較合理。這將讓玩家可以選擇他們認為最適合目前狀況的武器，讓他們對遊戲如何進行更有掌控性。這也為武器升級系統打開了一扇門。於是我們開始基於這樣的機制設計不同於目前系統的介面。

原型

我用Photoshop製作了基本的原型。當我設計原型時我不會被物件看起來怎樣困擾，我會優先專注於功能性與感受，如果妳可以讓一樣東西感覺起來不錯，那之後要裝飾成甚麼樣子都可以。

一般來說，我們聽到人們抱怨UI都不是它們看起來怎樣，而是太多UI使畫面看起來雜亂，還有／或它們感覺很遲鈍笨重。

許多早期的原型都顯示一個可以切換與升級武器的選單系統，我一開始想要讓這些系統同時顯示在畫面上。我會這麼做的理由是當像升級這樣的其他選項使用子層畫面時，我會傾向忽略它們直到不得不使用時。在許多遊戲中，我遇到困難死了幾百次後才會開始想「我是不是哪裡做錯了？」然後我會上網查才發現我忘記升級我的武器。這通常是因為我只看過一次升級畫面，後就忘了它的存在。

合併這些畫面的想法頑固的定住我的腦袋，但如同我之前說的人們不喜歡畫面上有太雜亂的UI。而你也可以從原型中看出來，在那個畫面中有很多的資訊。於是，我們將第一次嘗試的系統分離。

製作

在數週反覆來回製作Photoshop原型後，我們嘗試製作了底下的系統：

數位方向鍵的左右切換玩家裝備的武器。這會顯示在畫面右下角的生命值圓圈上。

武器選單中玩家可以選擇他們在這幾個位置上的槍械。這也是選單的部分，其他的還有合成物品，收集品與升級。

我們將這系統放置於此是因為我們想要換槍與打造物品有一樣的感受。在實際狀況中，人們需要先置槍並卸下背包才能夠拿到他們要的東西。這在戰鬥中會帶來強烈緊張感，也正是我們的想要讓遊戲更有帶入感的目標。

在這個選單中，方向鍵的左與右可選擇你要的位置，然後可以用左類比來選擇要放在這個位置的槍械。內圈顯示全部的短槍，外圈是長槍，而目前選擇的位置會高亮顯示。

升級選單在隔壁分頁

反覆修正

在測試該版本一陣子後，決定修改為選單的方式。內外圓圈的方式感覺有點遲鈍，而這正是極力避免的。在這個版本中可以看出來我們又把升級與切換武器帶回同一頁面。按三角形會打開升級武器的次選單，但最終我們也放棄這個版本。

這個系統的主要問題是當你躲藏的很好，沒有敵人注意到你且有很多美國時間切換武器下很OK，但在測試時發現要在戰鬥中切換武器很明顯地就會出現狀況，舉例來說，當你遇到一大票循聲者，剛好這時候子彈又打完，你卻必須快速地進入選單，切換武器然後再跳出。

這狀況須進入選單系統就顯得相當繁瑣。玩起來挫折感很重而且感受不順暢。經常感覺奇怪且遲鈍（又一次）。這樣其實感覺一點都不真實且失去帶入感。這系統帶來的挫折遠遠大過它可能為故事帶來的真實感受。

有時候要讓事情更貼近現實並增進帶入感，讓人們更沉浸其中，需要做些違反直覺的決定，在測試中有一兩次它會如我們希望那樣在換槍換得恰恰好，那感覺很棒，但大多數時間它感覺就是個不良設計。

當設計UI時，如果它在前幾次感覺很酷，這通常不算好的指標。整體 UI 必須在之後的幾百次都讓人覺得很酷。事實上，它應該要在熟悉後感覺越來越好，好到令人感覺相當自然並開始完全忽略UI。如果它有任何笨重、干擾或帶來挫折，那他就是錯誤的解法。當這個情況發生時，身為一名設計師，你必須重新來過一輪。在某些狀況下，你也必須放棄一些你覺得很優秀的點子。我曾經堅信升級與切換武器必須放在一起，但反覆測試後證明我錯了。

最終設計與美化

最終設計要求把升級與切換武器完全分離，我可以接受這個決定，因為如果保留他們代表與遊戲性妥協，那他們就不值得保留。因此我們抽離升級並讓它簡單的呈現為左右切換，暗住X重新放置，接下來要面對的就是怎麼處理升級選單了。

一開始，升級就是放在select選單中。他們有自己的頁面，當你有足夠的部件來升級某樣物品時，在圖示旁邊會有個小驚嘆號提醒。

這帶來的問題是雙重的。首先，他並沒有解決一開始的問題，升級頁面被隱藏在選單中，並沒有激起人們經常使用的效果。其次，人們通常會直接升級第一個可升級的物件，而非把收集到的部件留下來給之後更好的升級。測試人員通常只會升級同樣那把就手的槍，只因為升級他們很便宜。

...還有更多的反覆修正

後來遊戲設計師改變系統用升級工作檯解決了這些問題。這些工作檯決定你可以在世界中那些地方升級。玩家可以四處收集部件，並注意到他們收集到了一些東西，但到達升級點前不確定他們有多少或是這些東西有何作用。

在工作檯玩家可以慢慢檢視他們所有選項，計畫他們何時會到達下一個工作檯，並試驗各種升級。這樣帶來更豐富的遊玩方式。人們可以升級他們最喜愛的武器，而不是最廉價的升級。同時，很少人直接略過工作檯；多數人們花費一些時間並確實使用的這個系統。總之～兩個問題都解決了而且大家都很滿意。

技術問題

技術流程自身也有許多挑戰。最後生還者中所有的UI都是用腳本控制的。我們沒有使用像Scaleform、Unity或UDK之類的視覺工具，美術可以直接操作這些系統，布置好視覺物件再交給程式處理。

在我們的系統，我需要把所有物件獨立，放到內部的材質工具處理，然後把它們放到一個大一統的Maya HUD檔中。然後Paul會把東西處理好，然後接好一個腳本給我，我就可以根據使用XY軸數值在畫面上移動物件。當一切都設定好後，我可以利用材質工具來修改Maya檔中的素材，或是修改腳本中的材質路徑。

所有的動畫過場都是寫死的。先把我要的效果做成Flash原型，或是直接跟Paul或其他程式說明直到我們想法接近。因為這樣的限制，滑順的過場相當困難，尤其是在所剩時間不多的情況下。

這是相當令人厭煩且令人感到非常挫折，但這也表示我們都必須有一定的創意來面對設計好的東西。這些限制帶來的一樣結果就是我們所有的HUD物件都非常精簡。我們避免任何不必要的物件，而且竭盡心力確保每樣東西盡可能的簡單。

這樣帶來的結果是最好的。最終UI是極簡的，或許這正是我們最愛的結果，如果面對現實來說沒人喜歡UI。UI設計師喜歡它；當你訴說剛剛在一個app看到的UI表現得有多滑順多無暇你有多愛它時，其他人只會對你投以異樣的眼光。

（紀念碑谷...你的UI太完美了，你也很完美...大家請玩紀念碑谷。它很完美。）

回顧與次世代

這是對於一個UI物件從開始到完成的回顧。我們大都依照這樣的系統製作其他物件：原型，製作，測試反覆然後美術修飾。

當程式忙於製作其中一樣物件時，我會繼續進行其他物件，可能是依照測試結果繪製新的原型，或是配置一個已經做好的物件。用用看這個系統，我們可以快速並有效的檢查一輪遊戲中全部的UI物件與選單。

隨著遊戲機進入次世代，我們依然使用這個在最後生還者完成前幾個月建立的系統。我們現在應該有更多的時間來反覆測試，嘗試新東西，並實驗更好的工具，但這個快速原型的系統對我們來說很有效。我們會在整個開發週其中改進它，以幫助我們確實開發新的概念並實驗，來發現如何適當的讓玩家在遊戲時獲得需要的資訊。