STAR VEGAS / GAME UI CASE STUDY

從大廳到開獎，
拆開看每一個介面選擇。

這是我第一次負責整款彩票遊戲的全美術與 UI/UX。用保存的設計原稿，帶你看入口怎麼分、資訊怎麼排，以及同一個功能在 Web／App 裡的不同配置。

WEB 原稿: 18 畫面
APP 原稿: 20 畫面
我的分工: 全美術＋UI/UX

W00｜Star Vegas 彩票大廳，泰國、越南與寮國遊戲入口 — W00・大廳全幅｜點圖查看完整尺寸W00 完整原稿 ↗

01 / FLOW

先選遊戲，再把操作接起來。

依原稿功能整理成六個閱讀節點。國別、玩法、投注欄位、確認訊息、紀錄與結果，各自有對應畫面。手機可左右滑動這條動線。

進入大廳

泰國、越南、寮國三張國別卡，卡上標出開獎日期。

選國別與玩法

同一張國別卡內，有 LOTTERY 與 COMBO LOTTERY 兩個入口。

填寫投注

NUMBER、TOP／BOTTOM／ROLL 與金額區並列，總額和 SUBMIT 位於下方。

確認訊息

CANCEL／OK 雙選項；訊息區以 NOTE CONTENT 佔位文字呈現。

查詢紀錄

先選 GAME、DRAW 或輸入 ORDER NUMBER，再看每筆紀錄的資訊。

查看開獎

ORIGINAL RESULTS 與 BET RESULTS 分成兩個結果區。

流程地圖依 W00、W02、W08、W12、W16 整理。確認框的原稿使用通用佔位訊息；投注完成另見 W07。

02 / STATES

一個介面，也包含不同的回應。

從空資料到完成回饋，原稿留下了七種可直接辨識的狀態。點開一項，看它怎麼呈現。

同一套介面語言，
承接不同的資訊狀態。

以下展示的是原稿畫面與局部裁切。每張圖旁的圖號可開啟完整設計。

空資料W13

NO DATA 出現在結果區；上方查詢條件仍保留。

導覽展開與 hoverW17

玩家選單與語言選單展開，游標標示出目前指向的項目。

雙選項訊息框W08

深紫色訊息面板，把 CANCEL 與 OK 並排放在下緣。

投注完成回饋W07

BET COMPLETION 標題下，列出訂單資料與 UNSETTLE 狀態。

中獎紀錄W15

WIN 與金額排在紀錄列右側，和左側訂單資訊分開。

金額快選展開A18

+50、+100、+200、+500、+1000 與 OK 組成一列，指向對應的金額欄位。

欄位提示氣泡A19

帶指向箭頭的白色訊息氣泡，原稿以 message content block 表示內容。

03 / COMPONENTS

把介面拆到可以討論的細節。

從原稿裁出六組實例：入口、頁籤、號碼、金額、行動按鈕與查詢條件。

國別卡

球面國旗、日期、國別與玩法入口，都在同一張卡裡。

主頁籤

LOTTO 使用粉紅底，STOCK 與 HABIIEKI 使用藍底，呈現目前所在分類。

號碼欄位

NUMBER 標籤在號碼欄上方，星形序號位於列首；相鄰區域接金額與玩法欄位。

金額選擇

五個金額選項集中在同一個浮層，確認鍵位於右側。

按鈕層級

同一個訊息框裡，CANCEL 是灰色，OK 是亮綠色。

查詢列

GAME、DRAW、ORDER NUMBER 與 SEARCH 橫向編排，位於紀錄之前。

04 / WEB × APP

同一個功能，重新安排位置。

兩組原稿都採橫向構圖：Web 基本畫面為 1920 × 1080，App 為 1472 × 828。下面選三組同功能畫面，直接對照配置差異。

圖號 W＝Web，A＝App。W16 與 A16 的開獎結果稿另有向下延伸的內容。

同一組號碼，從一排變兩段。

19 DOOR 的 Web 原稿把 19 個號碼排成一組寬表；App 原稿拆成上下兩組，分別顯示 TOP／BOTTOM 列。

WEB W04

APP A04

數字內容保留在表格裡，金額與 OK 放在表格下方。

查詢列，依版面重排。

開獎頁的 Web 原稿包含 GAME、DRAW、ORDER NUMBER 與 SEARCH；App 原稿顯示 GAME、DRAW 與 SEARCH。

WEB W16

APP A16

這裡比較原稿顯示的欄位配置。

05 / VISUAL LANGUAGE

用色彩與文字，分出資訊層次。

深藍承接資料，金色標示區塊，粉紅與亮綠出現在玩法入口及確認動作。以下色票由保存的 JPG 原稿量測。

底板深藍#000C22W13・取樣區
650 / 600 / 750 / 700
提示框紫#1B0021W08・取樣區
680 / 305 / 740 / 345
頁首藍#144CBAW02・取樣區
670 / 15 / 720 / 55
投注列金#EECC00W02・取樣區
620 / 506 / 680 / 514
確認綠#139008W08・取樣區
1090 / 543 / 1130 / 551
玩法粉紅#C244C4W00・取樣區
320 / 687 / 370 / 695

量測方式：在原始 JPG 的指定矩形區域，分別取 R／G／B 中位數。座標依序為左、上、右、下，單位為像素；色值包含原稿的漸層與 JPG 壓縮影響。這是圖片取樣結果，不是原始設計規範。

大標辨識狀態

BET COMPLETION 置於面板頂部，以較大的大寫字作為狀態標題。

W07 完整原稿 ↗

欄位標籤對應內容

NUMBER、TOP、BOTTOM 等標籤，在數字與金額欄位上方對齊。

W02 完整原稿 ↗

訂單資料次一層

ORDER NUMBER、日期與時間以較小字級放在紀錄列，和金額、狀態分區。

W12 完整原稿 ↗

RELATED / 另案活動

幸運輪盤，另一種活動入口。

Star Vegas 幸運輪盤活動畫面也由我設計。這是獨立活動案例，與上面的 38 個彩票畫面分開展示。

看 3D 故事中的輪盤拆解 ↗

進入故事後，可移至約 1:31 的輪盤段落。

SV-WHEEL｜另案 Star Vegas 幸運輪盤活動設計 — SV-WHEEL・另案活動設計開完整圖 ↗

06 / MY ROLE

我在這個案子負責的事。

Star Vegas 彩票：全美術與 UI/UX。

交付 Web 18 個、App 20 個畫面與狀態，範圍涵蓋大廳、投注、紀錄及開獎。這一頁用保存的原稿，把整體視覺、資訊配置與跨版面差異放在一起看。

返回作品集 →看遊戲 UI 版履歷 ↗

展開 38 張原稿索引・Web 18／App 20

圖號沿用檔名前兩碼。點選以 WebP 開啟原尺寸設計，保留原稿長寬與完整構圖。

從大廳到開獎，拆開看每一個介面選擇。