在CEDEC2017的最後一天，任天堂舉辦了一場名為「《薩爾達傳說：荒野之息》的UI追求：融入世界，同時留下深刻印象的UI表達」的演講。
演講者是該公司的前端工程師北山茂壽和UI主設計師長谷隆広，長谷先生主講UI設計的理念，而北山先生主講如何利用自動化生成工具幫助UI設計團隊方便快捷地製作。
值得一提的是，長谷先生所率領的UI團隊，除了專職繪製圖標的畫師外只有兩個人，他們使如何在北山先生的自動化技術支持下做出如此宏大開放世界的UI的呢？
>
北山茂壽
2005年畢業後加入任天堂情報開發本部負責程序開發工作，參與遊戲引擎、UI系統等開發工作，《荒野之息》前端工程師。
>
長谷隆廣
入職任天堂前曾在其他公司負責手機的GUI設計，《荒野之息》UI主設計師。
「沒有UI會更好」的UI設計理念
本場演講將從長谷隆廣先生負責的UI設計部分開始。
和「迷宮探索為核心」的系列前作風格截然不同，《薩爾達傳說：荒野之息》是以「在廣闊的世界自由探索」為主題的系列首個「開放世界」遊戲。
《薩爾達傳說》系列常見的大型迷宮，圖片為《時之笛》水之神殿
完全革新的遊戲類型，需要用完全革新的思維去創作，這也是《薩爾達傳說》系列一貫的堅持。
《薩爾達傳說》系列的製作人青沼英二曾在2013年的「Nintendo Direct」上展望了WiiU的《薩爾達傳說》（即2017年發售的《荒野之息》），表示這次的開發主題是「重新審視《薩爾達傳說》系列中那些理所當然的設定」，希望在保留系列風格的前提下對一些守舊的元素進行改革。
為此，製作團隊大膽取消了系列傳統的線性劇情、固定順序的大型迷宮、永不會損壞的大師劍等諸多設定。
而UI團隊也以「重新審視UI的理所當然」為方向進行探索，試圖打造出不同於以往作品完全煥然一新的UI風格。
他們也的確做到了。
以系列前作《薩爾達傳說：天空之劍》的UI為例，左上角代表體力的粉紅色心型標誌、系列傳統貨幣的綠色盧比，以及右上角的彈弓，都採用了非常精美細膩偏實物的設計風格。
《天空之劍》的UI
相比之下，《薩爾達傳說：荒野之息》的UI風格則極度扁平化，所占畫面的比例也被縮小，整個螢幕上只顯示最基本的UI元素，盧比等不重要的元素被暫時省略，給人一種清爽的感覺。
《荒野之息》的UI
長谷先生表示，這種UI設計有兩個目標：
一、讓玩家第一眼就看出與系列作品不同的革新感；
二、以不妨礙遊戲體驗的方式讓玩家沉浸其中，回歸UI的本質。
為了實現這兩個目標，長谷先生提出了「沒有UI會更好」的UI設計理念，也就是在不使用UI的情況下也能讓玩家快捷舒適地操作。
沒有UI會更好？說到這一點，筆者首先想到的是《死亡空間》里的UI設計。
在《死亡空間》中，角色的血量通過背上的發光管數量呈現（下圖左下角），武器的彈藥數量則是通過全息圖像的方式呈現（下圖中央處的「12」），這種UI和遊戲設定完全融合的設計受到了遊戲行業同仁的一致好評。
但《死亡空間》的UI設計，和遊戲的世界觀設定是分不開的，隨著遊戲開發的進行，長谷先生發現：UI的本質是向玩家傳達資訊，為了向玩家傳達資訊，有一些UI是無法取消的。
於是長谷先生做出了妥協，決定以抑制UI的存在感為目標，設計出不妨礙玩家、不喧賓奪主的UI。
為此他把《荒野之息》UI分為四個類型進行介紹：圖形元素、字體、規範和動效。
極簡扁平化的圖形元素
首先是圖形元素。
UI設計團隊將遊戲必須傳達的資訊進行整合，減少需要玩家查看的地方，並縮小UI的整體尺寸，確保不會干擾玩家的遊戲體驗。
對比《天空之劍》和《荒野之息》來看就很明顯：《天空之劍》中玩家需要關注左上、左下、和右側的資訊。
但《荒野之息》則是把資訊集合在左上和右下，而且所占畫面的面積也大大縮小。
長谷先生也提到，在開發早期嘗試過把相關資訊放在左下和右上等位置，面積也比現在更大，但經過多次推敲採用了現在的設計。
不僅是圖形元素的位置和大小，早期的圖標（下圖左）也因為有太多細節過於引人注目，設計團隊通過去除圖標的邊框、減少細節、純色填充使其扁平化來抑制其存在感，讓成品版圖標（下圖右）不會喧賓奪主。
不僅是圖標，按鍵也做了相應調整。
比如拾取物品時的提示按鍵，也由線性圖標改為面性圖標。
極簡的風格不僅體現在圖標和按鍵，也體現在開始菜單界面。
《天空之劍》的開始菜單中，標題LOGO和選項非常明顯，而且有細緻精美的修飾。
而《荒野之息》是利用留白設計，將LOGO選項集中於右側，左側則是大片留白，使其看起來清爽整潔。
在武器和裝備的選擇界面中，採用了遊戲中常用令人一目了然的構圖，左側是裝備，右側是穿在林克身上的樣子。
放一張遊戲中清晰的圖片。
此外，遊戲對話和日誌中顯示的文字、標題LOGO等所使用的白色實際上並不是純白，而是統一使用略帶黃色的白色，這種白色在團隊內部被稱為「薩爾達白」。
這是因為真正的純白在自然界不存在，通過將遊戲中的白色統一為更接近自然中存在白色的「薩爾達白」，不僅讓遊戲風格更加統一，也能讓玩家有更強的沉浸感。
「薩爾達白」最初只應用於遊戲UI，但隨後也被應用於官方網站、遊戲包裝、過場動畫等地，成為了代表《薩爾達傳說：荒野之息》的主色彩。
PS：對薩爾達白感興趣的朋友，顏色代碼已經幫你找到了，是「#ffffe5」。
復古扁平化的字體
接下來看一下《荒野之息》的字體。
標題LOGO的字體筆者之前分析過，是選擇與系列初代LOGO近似的硬朗厚重風格，對比來看是不是很像？
據長谷先生介紹，之所以與初代LOGO相似的字體，目的是希望給玩家營造回歸系列原點的懷舊復古風格。
本作的字體同樣採用和整體UI一致的極簡扁平化風格。
地名、任務名等字體採用單色填充、無邊框、無修飾的扁平化風格，將不必要的元素減少到最低限度。
日語版字體旨在同時表達力量和懷舊感，採用了粗體風格的字體。
片假名部分採用了視覚デザイン研究所設計的"ロゴGブラック"（LOGO G Black），漢字採用了フォントワークス（FontWorks）設計的"ラグランパンチ"（Raglan Punch），並對字體進行略微傾斜和更加緊湊的修改，旨在在不凸顯文字的同時，通過字體本身傳達出《薩爾達》的特色和復古風格。
下圖是全部採用"ラグランパンチ"早期開發版（下圖藍色劃線字體），以及片假名替換為"ロゴGブラック"的成品版（下圖紅色劃線字體），旨在強化復古和力量的感覺。
這兩類字體都是在確保可讀性和設計性的前提下，試圖挑戰粗體風格的極限，有些動畫迷對"ラグランパンチ"字體可能比較熟悉，沒錯，這也是經典動畫《斬服少女》（Kill la Kill）採用的字體。
不僅是日語版如此，英文版的字體也是保持遊戲標題LOGO和遊戲內文本統一的風格。
英文版LOGO其實是《薩爾達傳說》系列自《時之笛》開始所使用的日英通用LOGO。
這次LOGO日英版分家，英文版字體跟著《時之笛》LOGO風格，而日文版則是跟著系列初代風格。
極簡的規範
在設計規範方面，開發團隊秉持著簡單的「儘量去除不必要的設計」的理念進行開發。
舉個例子，前作《薩爾達傳說：天空之劍》中，畫面上同時顯示了心、盾的耐久值、盧比、操作指南和快捷鍵，顯得非常繁瑣。
為了重新審視「薩爾達系列的理所當然」，團隊經過反覆考慮，決定暫時隱藏武器的耐久值、操作指南、盧比等資訊，只在必要時才進行顯示。
下圖左上角是武器的耐久值，只在快損壞時通過文字提示玩家；操作指南只在玩家進行相應操作時顯示在畫面下方；盧比也只在獲取時顯示。
通過制訂規範，成功地減輕了常駐UI界面繁多資訊帶來的壓迫感。
當然，隨著遊戲的進行，心的數量也變得非常多，某些常駐顯示的關鍵物品也出現，導致遊戲後期難免會有一定的螢幕壓迫感。
這點我們拿遊戲後期的圖片對比來看，後期增加四英傑能力圖標，能力BUFF圖標，以及探測器圖標，占畫面的面積的確會增多。
但是這種UI在歐美地區特別不受歡迎，因此為了減少常駐UI顯示，使螢幕更加清爽整潔，團隊在選項中加入了「專家模式」。
如下圖所示，在這種模式下，畫面只顯示代表體力的心。
長谷先生曾經擔憂這種變化會讓遊戲變得難玩，但實際上，由於常駐UI的消失，玩家更加沉浸於遊戲中，此舉受到了歐美用戶的廣泛好評。
不過，也不是所有遊戲都使用極簡的UI風格。
對於協助林克冒險的關鍵物品「希卡石板」中的UI，則是與主遊戲完全相左的UI設計風格。
希卡石板的相關設計使用了希卡族古代文字和充滿想像空間的特效等精緻的設計元素，目的是凸顯自然風光的「海拉爾世界」與古代高科技「希卡文明」的區別。
比如下圖，可以看出希卡石板界面UI擁有寫實風格的邊框，細緻的背景紋路，凸顯和海拉爾世界的區別。
我們來對比看一下，下圖是記者現場拍攝的圖片，筆者找來清晰圖片進行對比。
首先是代表「海拉爾世界」的裝備界面。
然後是代表「希卡文明」的地圖界面，可以看出區別：地圖界面的字體比裝備界面的字體更端正一些，主色調也是代表希卡文明的藍色而不是「薩爾達白」。
此外，本作在遊戲開始時沒有遊戲教學存在，而是採用在需要玩家執行操作的瞬間才會顯示幫助資訊的形式。
比如，當玩家撿起武器時，會顯示操作指南；當接近樹木時，會顯示能夠攀爬的提示；攀爬時會顯示精力槽……
這裡請看一張大圖，只有在靠近可捕捉生物時，才會顯示捕捉要按A鍵的提示資訊，以及可捕捉生物的名稱。
這樣的設計是為了讓玩家不會有被強迫的感覺，而是在玩家積極主動地朝著目標前進後才顯示UI。為了實現這一點，UI團隊與策劃團隊進行了多次磋商和討論。
這樣的設計理念，其實和育碧後來逐漸放棄「清問號」UI是一致的。
《刺客教條》滿是待探索地區的UI設計
問號就是為玩家制訂目標，強迫玩家進行操作。育碧後來逐漸修改了這一設計，在《極地戰嚎6》中，大部分問號只有在玩家打聽了相應情報後才會開啟。
幫助傳達資訊的動效
接下來是關於UI動效。
UI動效指的是：當受到傷害時螢幕上的心會閃爍，或者在撿起物品時物品圖標從螢幕邊緣滑動出來等動畫特效。
在本作中，由於採用簡潔清爽的UI設計，一些不容易被注意到的資訊通過動效進行強調。
例如，在受到傷害時心會閃爍減少，這樣一來注意力就會集中在心上，還可以根據動效判斷傷害量。
不過，簡潔清爽的UI往往會給人廉價的感覺。對此，北山先生製作了「實時捕捉畫面並將其作為遊戲中貼圖紋理」的功能，提高了UI動效的質感。
在遊戲中表現為下圖的樣子，注意看紅色的「GAME OVER」動效。
開始的時候，長谷先生還沒有了解這個功能有多好用，但是隨著工作的進行這個功能的好用程度超乎長谷先生的想像。
例如，在獲得武器時的物品背景里引入捕捉特效。具體實現方法是，捕捉幀緩衝，調整亮度和色階調整，然後將其作為背景展示。使明亮的部分變暗，暗的地方不至於太過昏暗，這樣可以減小膠片效果中的亮度差異。
這一功能被廣泛用於顯示物品窗口、物品選擇界面以及螢幕上顯示的簡短消息等約200個地方，超乎長谷先生預想的好用。
得益於UI設計師和前段工程師的合作，本作UI實現了超乎想像的高質量效果。
自動化技術支持下的兩人UI團隊
除了專門負責圖標設計的員工，《荒野之息》的UI設計團隊只有長谷先生和另外一位成員，總共兩人。在如此少人數的情況下，他們是如何實現如此宏大的開放世界UI工程的呢？
下面，由北山先生來進行技術部分的講解。
北山先生認為，小團隊中要完成整個開放世界遊戲的UI設計，首先要提高開發環境的效率。
UI團隊使用了"LayoutEditor"進行UI開發，在LayoutEditor中，設計師不僅可以設置節點和製作動效，還可以讓程式設計師使用擴展資源庫控制UI。此外，節點之間建立了父子關係，使得父節點的移動、縮放和旋轉能夠傳遞給子節點。
這樣的好處是，即使不編輯UI數據，也可以在遊戲運行時調整繪製節點，方便程式設計師做Debug。
此外，在以往的製作環境中，創建好的UI數據無法在遊戲中展示，因此設計師設計好UI後需要程式設計師在遊戲中實裝才能看到實際效果。
當UI設計師有一個想法，比如"將體力條顯示在右上方"時，通常的製作流程是：UI設計製作好數據後發給程式設計師，然後在遊戲中進行實裝，最後通過開發機進行確認。
這樣效率太低了。
為此，北山先生改進了開發工具，使得可以在電腦上預覽遊戲畫面中的UI，省去了多餘的流程，只需要UI設計師進行嘗試和調整，從而實現更精細的UI布局，提高工作效率。
即便如此，要完全製作出龐大的UI數據仍然需要很長時間。為此，北山先生還加入了自動化生成數據的功能。
比如下圖的物品圖標不是人工手繪的，而是由物品的3D模型自動生成插畫式的圖標。
此外，作為開放世界的象徵，《荒野之息》的地形圖上繪有大約120個區域，地圖的縮放有4個級別。另外，根據玩家開啟地圖的順序，地圖的連接處也會改變，因此僅準備地形圖像就需要2344張。
比如上面展示的一塊地圖中有四個區域，根據玩家是否通過開啟了當前區域的地圖，就需要多個地圖圖片。
為了簡化這項繁重的工作，北山開發了自動生成地圖的工具，通過從3D地形圖中自動讀取等高線等地形數據，並將水域、樹木、建築物、道路等16種元素以及高度資訊合成到地圖中，從而實現地圖繪製的自動化。
其他方面也進行了自動化改進，對於之前提到的利用捕捉技術製作的UI特效，如果每次都對畫面進行捕捉會增加硬體負荷。因此，他們還加入了能夠讓一次捕捉的特效能在其他地方重複使用的功能。這不僅減輕了工作量，還使得硬體不會承受太大的負擔。
此外，北山先生還對其他UI設計流程增加了自動化改進。例如，在遊戲中使用的字體數量很多，為了簡化字體的管理和使用，開發了字體製作工具，可以根據需要生成不同風格和大小的字體。
最後，北山先生分享了一個有關UI設計的秘訣：團隊成員將自己作為玩家的視角融入到UI設計中，通過親身體驗遊戲、感受操作和反饋，以確保UI的可用性和用戶體驗，這種將玩家視角融入設計中的方法為他們帶來了寶貴的洞察和靈感。
結語
儘管UI設計團隊規模較小，但通過優化製作工具、自動化、提高工作效率等手段，小團隊也能成功製作出大開放世界中精心設計的UI布局。同時，UI團隊通過玩家的視角去體驗遊戲並進行設計，也提高了UI質量。
這些努力和創新共同促成了《荒野之息》獨特而出色的UI設計。
