《暗影之境》：深入剖析角色建立使用者介面的重新設計過程
在《暗影之境》推出後，遊戲團隊針對角色建立的過程進行了簡化和重新設計。在這次的幕後特輯文章中，資深使用者介面設計師 Jeff Liu 將為大家深入介紹重新設計作業背後的思維邏輯。
你好，艾澤拉斯的來客！我是 Jeff Liu，目前在《魔獸世界》使用者介面設計團隊擔任資深使用者介面設計師。我這次要來深入介紹的是，隨著《暗影之境》一起推出的重製版角色建立功能。最近遊戲推出了許多新的自訂選項，我們想要藉著這次的機會向大家展示設計作業的幕後秘辛，以及我們當初設計使用者介面（UI）的決策過程。
我曾經負責重新設計塑形系統和拍賣場。截至目前為止，我最樂在其中的專案就是重製舊版的使用者介面，因此我很榮幸能有這個機會操刀重新設計角色建立畫面。
這次的重製作業是新進玩家遊戲體驗企劃的一部分，內容包括新玩家的起始區域「放逐之境」。角色建立畫面是新玩家第一個需要互動的介面，因此我們希望呈現出現代化的感覺，在玩家心中留下美好的第一印象。角色美術設計團隊也有參加這次的重製作業，他們負責為《暗影之境》設計大量的新自訂選項，因此當時確實是更新使用者介面的絕佳時機。
新的排版格局
先讓大家參考一下舊版角色建立畫面看起來的模樣：
重製作業的第一步是區分職業和種族的選擇畫面。玩家會先在第一個畫面中選擇職業，然後再前往第二個畫面選擇種族：
在這個範例中，如果玩家想要扮演夜精靈，就需要先返回上一個畫面並改選另一個職業，然後在兩個畫面之間不斷來回切換，這樣才能查看所有的可用選項。
是的，我們也認為這樣的操作方式很彆扭。
在初步嘗試未果之後，我們差點就決定保持原本的排版格局，僅單純針對美術設計的部分進行更新。在最後一次集思廣益的過程中，另外兩位使用者介面設計師 Crash Reed 和 Ray Ocampo 提出一個概念，也就是將種族分成左右兩邊。
這種設計方式有一個亮點，那就是玩家很清楚就能看出部落和聯盟各執一方互相對峙的戰爭局勢。我們很喜歡這種簡單樸素而又新穎的排版方式，因此立刻便開始著手進行設計！
放膽去做
在確立新的排版格局之後，我重新審視了角色建立畫面的資訊量多寡。舊版的角色建立畫面包含許多文字敘述的資訊：
如果畫面上的資訊量太多，那麼即便這些資訊是有用的，也會導致原本簡單的選擇變得複雜。
因此，我們決定設計新的角色建立畫面，讓新玩家不用一開始玩遊戲就被資訊轟炸。我們簡化了許多文字內容，改成用視覺和聽覺的方式來表達種族和職業的內涵。看到法師施放火球術的畫面，會比用文字敘述還要來得更加生動。
大多數的新玩家應該都不會對這種類型的奇幻題材感到陌生，畢竟大家都接觸過類似的大眾文化。大部分人應該都能夠理解，戰士就是手持刀劍、身穿重型盔甲並且跟敵人近距離肉搏的角色人物。
我們針對職業的排序方式進行調整，幫助新玩家迅速掌握各個職業的特色和風格：
最前面三個職業是特色最鮮明、最廣為人知的職業。接下來的三個職業相對比較沒有名氣。舉例來說：從來沒有接觸過電玩遊戲的人可能不曉得牧師的玩法和特色。再接下來則是混合型職業，這種類型的職業又更加複雜。
這邊要特別說明一下，職業排列的先後順序無關職業的操作難度，單純只是依照職業的人氣和知名度來進行排列，這樣子方便新玩家快速且輕鬆地掌握各個職業的特色和風格。
至於種族的部分，主要只有外觀風格方面的差異。我們不希望新玩家為了選擇種族技能而產生困擾，因此預設設定將種族技能設為隱藏：
我們認為玩家第一次建立出來的角色通常不會是玩家日後主玩的角色。玩家在進行遊戲的過程中，會進一步認識各個種族和職業的特色。讓玩家透過實際經驗去感受，會比透過角色建立畫面傳達還要來得更加理想。
因此，我們的設計目標是讓新玩家選擇看起來最酷炫的種族，然後再選擇高人氣的職業，接著就可以直接展開冒險！
讓玩家用看的，不要用讀的
在移除所有的文字內容之後，下一步是設計新的動畫，藉此傳達各個職業的特色和風格。
首先，我們要決定動畫應該要製作得多精細。我們尤其注重動畫的持續時間，因為我們不希望動畫播放起來過於冗長。
以下是首席動畫設計師 Ian Lang 初步設計出來的幾個模板：
在這邊附註說明一下，影片中最後一個橋段所採用的是大型布料背景，角色則是站在石臺上面。接下來再展示另外一個模板：
在確立方向之後，動畫設計團隊便開始著手替每個職業製作動畫，並與特效團隊合作，針對職業的技能添加合適的視覺效果。完工之後，再交由音效設計師製作音效，為動畫注入活力。
我想大家都同意，動畫、特效和音效團隊的設計成果相當突出，把各大職業都塑造成神勇帥氣的英雄。最終，新版角色建立畫面最大的亮點之一就是這些動畫。
吸引玩家的目光焦點
本次重製作業的其中一項主要目標，就是讓玩家的注意力聚焦在畫面中間的角色模型身上。我們希望能夠營造出玩家正在打造一名超級英雄的氛圍。我們基於這樣的設計理念，針對這個畫面的設計方式做出許多決策。
我們拋棄《魔獸世界》過往傳統的使用者介面美術風格，改採極簡審美風格。我們移除畫面側邊的美術素材（例如：舊版的陣營旗幟），因為這些美術素材會干擾玩家的注意力。
我們在畫面的邊緣設計了許多陰影，營造出強調遊戲角色的視覺效果，讓角色有全場焦點的感覺。
此外，我們也調整了使用者介面各個元素的所在位置，藉此吸引玩家的目光。
最後是，我們調整了自訂模式的鏡頭變焦功能，讓背景看起來變得較為模糊。這個做法能夠進一步凸顯角色人物，讓玩家的注意力集中在角色本身的特色上。
新進玩家
新進玩家的角色建立畫面有別於老手玩家的畫面。我希望針對新進玩家設計更簡單、更簡潔的角色建立體驗。
舉例來說：新進玩家的角色建立畫面只會顯示出核心種族，而且頭像下方會標記種族的名稱。
除此之外還有其他幾個不同的小地方。
老手玩家進入新版的角色建立畫面時，會出現一個種族和職業都隨機生成的角色。至於新手玩家第一次看見的角色，則固定是人類戰士或獸人戰士（性別隨機）。這部分的設計理念是，我們希望簡化新玩家建立角色的流程，因此直接呈現出最簡單易懂的遊戲內容給玩家看。
此外，每位新進玩家的角色人物也都含有一些隨機性的成分。新進玩家多半是第一次認識魔獸宇宙，因此我認為有必要特別注重每個職業的視覺外觀。有鑑於這點，我在隨機生成角色的過程中剔除了會導致臉部變得模糊的自訂選項，例如：紋身、紋面和頭飾。
但是別擔心，玩家在啟動自訂模式後，還是可以自由選擇相關的自訂選項。
最後是，新進玩家會在自訂畫面上方看見提示資訊：
在進行使用者測試的過程中，我們發現有些新玩家在建立角色的時候會面臨選擇困難。不過這種現象實屬合理。如果說這是最後一次自訂角色的機會，想必玩家都會希望多花點時間用心好好選擇。因此這串提示資訊可以幫助玩家排除疑慮，協助玩家更快速地展開遊戲的冒險旅程。
角色自訂選項
說到角色自訂選項，就不得不談到角色建立畫面的初步模板。各位可以從舊版的排版格局中看出設計方式的演變過程：
我曾經嘗試過自由度更高的排版格局，跳脫原先那種方格選項的框架：
這種設計方式的畫面看起來過於擁擠，但是自由度相當不錯，因此我決定截長補短，綜合各個設計方式的優點，將過多的選項濃縮成數量較少的類別：
到了這邊，最終版本的排版格局已經逐漸成形！
選項選取器
你可能有注意到，在最終版本的模板中，選項的類型是可以拉動調整的橫軸。這個使用者介面控制按鈕在開發階段經過許多次的調整。
舊版的排版格局在右側有個大型的預覽頭像。從下方的範例當中，我們其實很難去判斷不同的臉部選項之間的差異具體是什麼：
此外，這種角色自訂方式也缺乏調整的空間，而且無法讓玩家的注意力聚焦在畫面中央的角色身上。
因此，我們決定要另外設計一種使用者介面的控制按鈕，藉此來取代原本的頭像。
我不想要設計繁雜的控制按鈕（例如：勾選欄位、按鈕和顏色選取器），因為這樣子畫面看起來會很亂，讓人壓力很大。我希望能夠設計出適用於所有選項類型的單一控制按鈕。
不過，最重要的目標還是要讓玩家能夠迅速在兩個選項之間來回切換，這樣才能方便玩家比照兩者的不同之處。
最初的幾個設計版本無法順利達成這樣的目標，而且要在間隔距離很遠的兩個選項之間來回切換頗為耗時費力。
我們後來改成滑動軸的方式，這樣子切換選項的速度加快，但卻會因為切換得太快而選錯。此外，滑動軸也主要運用於光譜兩極的選項（例如：高矮胖瘦），並沒有很適合這種類型的選項。
最終拍板定案的設計方式是多欄式的下拉式選單，這樣子就能滿足所有的需求了：
- 玩家可以快速地在任意兩個選項之間來回切換。
- 玩家可以同時看見所有可用的選項。
- 使用者介面的控制按鈕只有一個，但用途廣泛，且適用於名稱和顏色。在部分的情境中，我們甚至還會在同一個下拉式選單中混合兩種類型的選項。
- 玩家的注意力會聚焦於畫面中間的角色人物。
- 其中最厲害的部分在於，只要把滑鼠游標移動到角色人物上方，就會即時顯示出預覽選項。
在這邊順帶一提：我是《鬥陣特攻》的死忠粉絲。請猜猜看，這些選項的名稱裡面藏有多少《鬥陣特攻》的彩蛋內容？
類別圖示
所有的自訂選項都包含在這三大類別當中。以下說明這些類別和類別圖示的演變過程：
我原本計畫要設計五種類別，但是實際在遊戲內測試之後，我決定改成三種類別。
我認為頭髮選項不適合列在次要類別當中，因為玩家通常最一開始就會調整髮型。因此，我把頭髮選項移動到第一層的類別當中，跟臉部選項同時呈現。
大多數種族的身體選項和紋身選項數量有限，因此我把這兩種類別的內容也整合在了一起。就這樣，原本的五大類別濃縮成了最終版本的三大類別。
美容師
你可能還記得，原版美容師的使用者介面跟角色建立畫面看起來截然不同。在經過重新設計之後，我們認為應該要讓美容師的介面變得跟角色建立畫面一致。
原版的部分美容師介面很暗，看起來很模糊，這是因為美容師所在的背景環境就是個光線昏暗的地方。這樣的設計也導致玩家在某些情況底下會誤判顏色實際上看起來的樣子。比方說，綠色有可能會因為環境光線的不同而呈現出黃色的感覺。
美術設計團隊選擇採用完全中性的燈光來解決此一問題，遊戲角色啟動美容椅之後的背景燈光每次都一樣。這樣子燈光不只明亮，照出來的顏色也很準確。
美容師還有個新的功能，可以讓玩家改變遊戲角色的性別。以下是遊戲史上第一次轉換性別的紀錄影片，拍攝者是實裝該功能的程式設計師。
遊戲錯誤
在重製作業的進行過程中，出現許多需要解決的視覺錯誤：
在此感謝品質確認測試團隊的協助，多虧有他們，玩家才不會看到這種嚇人的場景！
下次再會
角色建立系統的重製過程涉及大量團隊合作，參與者包括角色美術設計師、動畫設計師、製作團隊、測試分析師、音效設計師、使用者研究人員和程式設計師（先前發布的相關文章請參考此處）。希望這次打造出來的使用者介面，其彈性和現代化程度有滿足玩家的期待，讓廣大玩家日後在建立角色的時候能夠有更美好的遊戲體驗。
希望大家喜歡這篇文章對於重製版角色建立系統的深入介紹。感謝撥冗閱讀！
Jeff Liu
《魔獸世界》資深使用者介面設計師