1. 首頁 > 游戲 > >

干貨分享：《賽馬娘》的UI制作里，藏了多少老練的手法？

分鏡篇（上）
分鏡篇（下）
建模篇（上）
建模篇（下）
對話場景篇
【干貨分享：《賽馬娘》的UI制作里，藏了多少老練的手法？】緊接著上幾期的分享內容 ， 今天這篇文章 ， 將以《賽馬娘》的養成系統開發為例 ， 分享一下從信息整理 ， 到UI設計的制作體制 ， 具體包含幾個部分：
1 ， 《賽馬娘》UI設計的目標；
2 ， 畫面制作前的信息整理；
3 ， 建立信息顯示的規則 。
01UI設計的目標
總的來說 ， 我們希望制作一套能正確顯示必要的信息 ， 且能讓訓練師（玩家）毫不猶豫地選擇自己所需內容的UI體系 。 這個目標雖然看起來簡單直白 ， 但這款游戲屬于本就復雜的養成模擬品類 ， 所以能承載游戲內巨量信息的UI ， 就顯得極為重要 。
在制作UI的時候 ， 主要工作分為設計和視覺兩個部分 。 《賽馬娘》里 ， 這兩塊分別承擔了各自的任務 。 設計部分 ， 目的就是讓玩家毫不猶豫地進行選擇；視覺部分 ， 目的就是拉近賽馬娘和玩家的距離感 。 雖然這兩部分都十分重要 ， 但本次分享主要集中講解設計部分 。
如剛才所說 ， 《賽馬娘》的UI ， 要設計得讓玩家能毫不猶豫地進行選擇 ， 然而 ， 如果把所有的信息都顯示出來 ， 畫面就會像這張圖一樣變得十分復雜 。 玩家就容易產生迷茫 ， 不知道自己要做什么 。 為了防止這個問題 ， 我們需要將必要的信息按照優先級順序來顯示 。
干貨分享：《賽馬娘》的UI制作里，藏了多少老練的手法？
文章圖片
干貨分享：《賽馬娘》的UI制作里，藏了多少老練的手法？
文章圖片
信息整理 ， 即整理游戲內使用信息的特征、關系性 ， 并將其掌握的工作 。 建立信息顯示規則 ， 即基于掌握的內容 ， 按照不同功能版塊制定規則的工作 。
原本在一般的UI制作流程 ， 是從策劃敲定規格樣式后 ， 直接開始進行畫面排版 。 但《賽馬娘》的UI制作流程 ， 是在畫面排版之前 ， 增加了上述的兩個步驟 。 通過加入這兩個步驟 ， 制作排版時對需顯示信息的選擇 ， 以及對優先度的判斷 ， 其精度都會得到提升 。
干貨分享：《賽馬娘》的UI制作里，藏了多少老練的手法？
文章圖片
干貨分享：《賽馬娘》的UI制作里，藏了多少老練的手法？
文章圖片
02畫面制作前的信息整理
如前文提到的 ， 制作UI之前必須對信息按優先級排序 。
然而 ， 如果不掌握游戲內信息之間的關系性 ， 在每個畫面上都可能隨之產生信息調用的錯位問題 。 如下圖 ， 即便是呈現相同信息的畫面 ， 調用方式只要產生錯位 ， 玩家就會迷茫 ， 不知道該干什么 。 這就成了很難用的UI 。
干貨分享：《賽馬娘》的UI制作里，藏了多少老練的手法？
文章圖片
讓我們確認一下賽馬娘和比賽所包含的信息 。 如下圖 ， 這是賽馬娘這個要素所含的一部分信息 ， 包括名稱、數值這些顯而易見的信息 ， 還有姿態、圖標等美術相關的信息 。 如果再算上更細節的信息 ， 量還會比這張圖更大 。
干貨分享：《賽馬娘》的UI制作里，藏了多少老練的手法？
文章圖片
干貨分享：《賽馬娘》的UI制作里，藏了多少老練的手法？
文章圖片
1.查出盡可能多的信息 。 這個環節 ， 我們不考慮分類、歸屬 ， 盡可能多地把信息寫出來 。 盡管數量多到可能跟UI沒太大關系 ， 但把這些信息寫出來掌握清楚才是關鍵所在 。
干貨分享：《賽馬娘》的UI制作里，藏了多少老練的手法？
文章圖片

相關經驗推薦