UI/UX 設計與介面佈局
老虎機的介面設計是一門獨特的專業。與一般應用程式追求簡潔留白的趨勢不同，
它需要在有限空間內同時承載遊戲資訊、操作控件與娛樂氛圍，
既要像工具一樣可靠，又要像舞台一樣具備戲劇性。
核心介面元素
- 點數顯示（Balance）：玩家目前可用的遊戲點數，須始終清晰可見
- 投注控制（Bet Controls）：調整單次投注額度的按鈕或選擇器
-
旋轉按鈕（Spin Button）：最重要的操作入口，需最大的視覺權重與觸控面積。
位置須落在拇指最自然的活動範圍內，並為「旋轉中」「可停止」「自動旋轉」等狀態
設計可辨的外觀變化
- 贏分顯示（Win Display）：中獎時的數值動態展示區域
- 資訊面板（Info Panel）：賠付表、規則說明、設定等輔助功能入口
資訊層級設計
老虎機介面的設計哲學是「玩家需要看到的，永遠在眼前；不需要的，隱藏但可及」：
- 第一層級：點數、投注額、旋轉按鈕，永遠常駐
- 第二層級：贏分顯示與自動旋轉控制，需要時才顯現
- 第三層級：賠付表、規則、聲音設定，收在選單中再展開
中獎金額只在特定時刻出現，出現時卻必須立刻被看見，因此需動態搶佔焦點、結束後再退場。
層級劃分的判準是使用頻率乘以急迫性，而非功能的重要性。
中獎金額只在特定時刻出現，出現時卻必須立刻被看見，因此需動態搶佔焦點、結束後再退場。
這種動態層級的思維，是它與一般靜態介面最大的差別。
跨平台響應式佈局
老虎機需要同時支援直式（Portrait）與橫式（Landscape）兩種螢幕方向，
以及從手機到桌機的不同寬高比，因此佈局不能是固定的：
- 橫式佈局：轉輪居中，控制面板位於底部或兩側，適合桌機與橫持平板
- 直式佈局：轉輪置於上半部，控制面板展開在下半部，是手機最常見的方式
- 觸控區域：手機端按鈕需保留足夠的最小觸控面積，避免快節奏操作時誤觸
實務上不建議把兩種方向當成同一套佈局的縮放結果，而應視為兩份獨立的設計稿：
共用同一套視覺元件，但各自定義錨點與安全邊界，並預留瀏海、圓角與系統手勢區的空間。
主題化介面與轉輪區域的平衡
老虎機介面通常採用深色或與主題相符的配色，目的是讓轉輪區域成為視覺焦點。
介面元素不應與符號爭搶注意力，但也不能過於樸素而失去娛樂氛圍，
常見做法是使用半透明底板、漸層邊框與克制的裝飾。
一個實用的檢查方式是把設計稿模糊處理，若第一眼被吸引的不是轉輪，就代表介面搶戲了。
另一個細節是數字的可讀性：點數與贏分最需要被準確讀取，
字體必須字寬穩定、造型不易混淆，不能為了風格統一而融進背景。
從設計稿到引擎：美術交付流程
一套美術素材從設計稿到整合進遊戲引擎，需要經過嚴謹的交付流程，
其標準化程度直接影響協作效率與素材品質。
素材規格文件
正式製作前，美術必須與前端工程師共同定義素材規格文件：
- 尺寸規範：每類素材的設計尺寸、安全區域與可延展區域的定義
- 檔案格式：需要透明通道的素材、背景圖、骨骼動畫匯出組合的格式約定
-
命名慣例：採用可預期的多段式命名，依序標示素材類別、語意名稱與狀態。
這看似瑣碎，卻是自動化流程能否成立的前提。一旦命名可預期，
圖集打包、批次縮放與素材檢查都能交給腳本處理
- 解析度層級：定義各層級之間的縮放倍率，避免出現無法整除的尺寸
圖集打包
為了最大化渲染效能，散裝的素材圖片需要打包成 Texture Atlas（圖集），
將多張小圖合併到一張大圖上，可大幅減少繪製呼叫次數。打包時需注意：
- 同一階段共同出現的素材應打包在一起，避免為少數素材額外載入整張圖
- 圖集尺寸以 2 的冪次方為佳，確保各類裝置的相容性與壓縮效率
- 為每張素材保留數個像素的間距，防止渲染縮放時的邊緣滲色
- 不常同時顯示的素材分開打包，減少單次載入的記憶體佔用
- 依素材特性選擇壓縮方式，平順的背景與銳利的介面元件不該用同一組參數
多解析度策略
為了覆蓋從低階手機到高階桌機的裝置範圍，素材通常需要準備多套解析度版本：
以最高解析度創作，再透過腳本批次縮放產出。
但單純的等比縮放並不總是可行：細線條與高頻紋理縮小後
容易消失或產生摩爾紋，往往需要另外調整線寬與細節密度。
交付給前端工程師
最終的美術交付物通常包含以下內容：
- 打包好的圖集：各解析度版本的圖集與對應的座標描述檔
- 骨骼動畫匯出檔案：動畫資料、圖集描述與貼圖的完整組合
- 動畫事件定義表：標注關鍵事件節點與對應的觸發行為
- 介面標註文件：各元素的位置、尺寸、對齊方式、延展區域與互動狀態
- 字體與色彩規範：字級階層、行距、主色與強調色的定義
交付不該是單向的丟包，而應包含一次共同走查：
美術與工程一起在實機上比對實作結果與設計稿，當場判斷哪些是誤差、哪些需要調整。
素材版本控管
美術素材同樣需要版本控管。團隊通常使用 Git LFS 管理圖片與動畫原始檔，
搭配明確的分支策略，確保歷史版本都可追溯。
但美術檔案有一個與程式碼不同的難處：二進位檔無法合併，
因此必須靠約定避免衝突，例如明確劃分負責範圍。
美術技術棧總覽
一個完整的老虎機美術製作流程，涉及多種專業工具的協同運用：
2D 靜態美術
- Photoshop：核心繪圖工具，符號繪製、背景合成、材質處理的主力
- Illustrator：向量圖形製作，適用於介面元素、圖標與需無損縮放的素材
- 介面原型工具：互動流程規劃，快速產出可點擊的原型供團隊審閱
動畫製作
- Spine：骨骼動畫製作的首選工具，與主流引擎的整合度極高
- After Effects：複雜特效動畫、轉場動畫與概念影片的製作
- Animate：部分專案仍用於製作向量風格的簡潔動畫
3D 輔助
- 3ds Max：專案需要 3D 渲染的符號或場景時使用，通常建模後渲染為 2D 圖片再後製
AI 輔助工具
- Midjourney：快速概念探索與情緒板生成，縮短前期發想時間
- ChatGPT：規格文件撰寫、檢查表整理等文書面的效率提升
遊戲引擎
- Unity：功能完整的跨平台引擎，適用於複雜效果或 3D 混合表現的專案
- Cocos Creator：輕量級引擎，在網頁端與手機端廣泛使用，啟動快、包體小
這套工具鏈並非固定不變，但不變的核心是以效率為導向的工作流設計。
每一個工具的引入，都是為了讓美術師把更多時間花在創意本身，而非重複性的技術操作。
老虎機美術製作是一門結合藝術創作、技術規範與工程協作的綜合學科。
若想回頭理解這些介面與素材的源頭，本系列另有篇章分別探討前期的概念發想與 AI 輔助工作流，
以及符號設計規範與骨骼動畫的製作細節。