手遊UIUX設計經驗分享②手遊的UIUX設計師都在做什麼？

嗨，我是小黑 ☕️

前陣子我分享了一篇我在某日本遊戲公司的手遊的UI UX製作的流程。（上一篇請看這裡）

這次來分享「手遊的UIUX設計師都在做什麼」。

我目前工作內容是一邊教育新人和leader候補，一邊動手製作。經歷過的組別裡，UIUX設計師大多都在做以下的內容。

①製作和遊戲相關的所有圖像

不只遊戲內的，還有推特等平台的宣傳用的

基本上以banner居多，banner裡也會包含所有活動的LOGO製作。還有一些像是周邊商品，海報，掛軸，明信片，貼紙等等，這些都包含在我們的工作內容裡。

也許你會覺得，這些商品類的東西需要的是跟banner不同的技能，畢竟要知道怎麼跟印刷廠溝通，還要用CMYK設計（可是遊戲裡的圖像全部都是RGB）留白呢？切版呢？遊戲的LOGO也是浮誇到不行，怎麼會都是UIUX設計師在做？

所以我必須說，遊戲的UIUX設計師根本是神啊！（誤） 😆

為什麼我們必須做這些？理由有以下幾點

・公司認為周邊商品也是其中一種玩家體驗（這是講得很好聽的理由）
・製作遊戲內的圖像的設計師，通常比只會製作商品類的設計師來的有設計經驗和技巧。
因此公司內部會認為由製作遊戲圖像的設計師去做周邊商品，可以做出讓玩家驚豔的美麗周邊。
（這可能只因為我遇到的環境都是如此的偶然，不一定是業界全體的趨向。）
・通常製作遊戲內圖像的設計師，非常清楚什麼角色跟什麼背景圖要如何處理才是正確的。而由這樣的人去做商品才是最保險的

最後一點詳細來說：

原作漫畫或動畫的手遊為數不少。而所有的動漫作品中，角色的膚色，衣服顏色，哪個時間軸穿哪套衣服，可能會出現的場所（涉及到這張圖內應該使用哪張背景圖），根據角色彼此之間是朋友敵人還是根本不認識去思考要如何配置角色等等，所有的眉角都牽扯到跟版權方的信賴問題。

所以製作每一張圖，設計師都必須清楚

這個角色Ａ的圖，可以跟背景Ｂ搭嗎？
角色Ａ可以跟角色Ｃ放在一起嗎？
角色Ａ跟角色Ｃ穿的衣服和髮型等等是同一個時間軸的嗎？

如果答案都是肯定，那這張圖就可以把角色Ａ＋角色Ｃ＋背景Ｂ放在一起去設計。

小黑曰：如果角色Ａ和角色Ｃ是朋友那可以放近一點，如果只是稍微有照面那要放遠一點，如果玩家不希望角色Ａ和Ｃ配對的人不少，那放太近就等著被婊……

周邊也要依照一樣的原則去做設計才不會發生世界觀崩壞（更嚴重可能會導致版權方一怒之下解約而遊戲從此以後不能繼續製作）的狀況，所以讓平常就在做這些遊戲內的圖的設計師去做周邊的選擇最為保險。

並且，只有做熟了遊戲內圖像的設計師才會馬上知道，這些圖檔變成CMYK之後跑色有沒有很嚴重，需不需要補救。

所以遊戲的UIUX設計師看動畫漫畫＝工作 😁

我們會讓新人在剛進來的一兩個月裡給他一段時間去看動畫和漫畫原作。新人整天就是去看動畫漫畫然後把內容好好記住。

小黑曰：遊戲相關的圖像類比起其他業界要浮誇很多，但又不能像博青哥那種金光閃閃的浮誇，所以很難找到有人「剛好」會做，也很難有人會做的「剛好」。這也是人才一直短缺而且流動率大的原因之一。

②設計並製作UI組件

（我們通常稱它為GUI＝Graphical User Interface）

在這裡指的是UI的外觀上需要的所有圖檔。像是按鈕的素材選擇項目的編筐和一些icon這些。也會包含一些在遊戲裡使用的文字圖片。大家在網路上搜尋的UI KIT在遊戲裡都稱為GUI。

遊戲中的GUI通常會根據世界觀去設計外觀，所以需要很強的繪圖能力。複雜的GUI類似要擺pose的角色或建築物的縮小版，簡單一點的像是製作有立體感的獎盃徽章等等道具類，所以要有一定的繪圖基礎和立體概念。並且會要求可縮放的vector檔案，所以基本上都是在illustrator和photoshop上作畫。

對……設計師們必須在illustrator上拉曲線去畫出動漫原作裡的角色，並且會被版權方審圖。（頭髮的毛數量不對被念過一次 😌）

所以我必須說，遊戲的UIUX設計師根本是神啊！（又來）

與其他行業的設計師一樣，我們也需要重複測試這些GUI是否有辦法傳遞想表達的意思，以及在小畫面上能不能看得清楚。除了複雜的圖象以外，也會被要求Material design類的平面設計。

小黑曰：有鑒於遊戲內的GUI設計都很浮誇，所以其他業界轉過來的UI設計師很容易在這個工作技能上被刷掉…關於找遊戲相關的設計工作可能要往後再另外談

③製作UI相關的動態特效

按鈕按了之後是什麼反應？（縮放？還是點擊時換顏色？）
popup是怎麼收起來怎麼打開？
必殺技的icon在可以按的時候是怎樣的特效？（變顏色？閃爍？還是周圍有光在跑？）

以上這些遊戲中跟UI相關的特效類，設計師會用Photoshop做出GIF檔或用after effect做出影像檔，用這些檔案去和特效組和開發組商量，讓他們做出跟我們想像中相近的特效。

這部分因為是遊戲中的演出，所以發光的素材大概長什麼樣子，或是要讓它燃燒的話火焰是哪種形狀哪種顏色等等，把腦中的想像做成影像也需要一些繪圖技巧。

④製作wireframe/prototype/流程圖/解說資料

這部分我想就跟其他業界一樣。

在我待過的公司裡，大家通常會把製作中的靜止的遊戲畫面稱為wireframe。

但這個稱呼並不是由簡單的方塊構成而已，可是也不到prototype那樣可以實際操作或看他動。

我們製作的wireframe介於者兩者之間：用真的要上線的素材去做靜止畫面。裡面的數據等等文字是半真半假的。文字不是實際會上線的內容，但跟真的內容相差不遠。也許只有文章的寫法稍微不一樣，也許只有數值和玩家名不一樣，等等。

這個我們稱為wireframe的製作，是要讓確認wireframe的人知道實際上上線的時候畫面會長怎樣。所以要逼真，但因為文案企劃還沒想（或有些漏掉）所以就寫上一些想像「這裏應該要寫上這些內容」的代替文案。

至於流程圖，有一些企劃會畫在企劃書上切一個大致上的流程圖出來讓設計師和工程師去做，

但我待過的公司是由設計師製作出靜止遊戲畫面的wireframe後，用這些wireframe去把流程圖切出來。流程圖就只是說明流程，哪個按鈕會到哪個畫面的說明而已。

另外，我們會準備相當多的「解說資料」。

這些解說資料裡會說明當場合Ａ的時候畫面怎麼運作，場合Ｂ又是如何，場合Ｃ要呼叫哪個popup等等所有可能發生的動作。以及，GUI素材怎麼切塊，要放進哪個atlas（簡單說就是放進Unity裡的圖檔），這些都網羅起來寫在解說資料裡。

結語

以上是一個遊戲UIUX設計師大致上的工作內容。

也許你會問「我不會全部也可以做遊戲的設計嗎？」

答案是：可以的！

但是，應徵時看繪圖能力的比重也很高，尤其因為日本的手遊整體來說還是很浮誇的氛圍。

不過這也要看自己要應徵的公司體制如何，還有主管想要把這一組人馬培育成什麼樣子，也要看當下找工作的時候職缺是如何。

我花了八九年把全部做了一輪（所以我要離開遊戲業界了！哈！這又是另一段故事了），栽培的組員當中有只專攻做圖像的，也有只專攻做wireframe和流程圖的。

只要其中一兩項是強項就有可能找到遊戲相關的UIUX設計工作。

大家看完整篇可能會覺得遊戲業界裡似乎沒有把UI UX設計師的角色分得很明確。的確是這樣沒錯。有一部分人可能數年沒有碰到一丁點的wireframe製作，有人完全沒有做過banner。

但也是因為這樣一直有一種新創的氛圍，只要你肯嘗試就什麼都可以學得到。我也是因此去找到當中自己的強項跟興趣的，是相當好玩的業界。

這個業界比較可惜的是，目前我待過的遊戲公司即使規模大，也不太會做玩家調查user research的部分，或者是說即使有調查，也不會將結果告訴設計師的公司居多。所以整體業界要根據數據去做設計是有難度的，但這也代表如果會研究的人把這風潮帶進遊戲業界就好玩了！