博弈游戏 UI/UX 与大厅设计,专为 iGaming 平台打造
作者 Jim Tseng, 創辦人暨美術總監更新于
PlaySmith Studio 专做博弈游戏与 iGaming 平台的介面层:老虎机游戏内 UI(Spin、押注、余额、赔付表、自动旋转、赢分演出)、大厅介面,以及网页或 App 的产品画面。团队位于台湾、超过 20 位美术,交付设计系统、元件规格与引擎可直接使用的输出档;程式、数学模型与整合由您的开发团队负责。
- 团队
- 20+ 位美术
- 产能
- 每月最多 5 款同时进行
- 老虎机完整周期
- 每款 30 个工作天
- 项目报价
- 每款 US$8,000 起(参考价)
- 输出引擎
- Spine、Unity、Cocos、HTML5
- 回复时间
- 3–5 个工作天内
老虎机 UI/UX 设计外包会交付哪些东西?
以一款老虎机来说,PlaySmith Studio 会设计玩家会碰到的每一个画面与控制项:Spin 钮与它的各种状态、押注与余额面板、赔付表与规则页、设定、自动旋转控制、赢分演出,以及载入与开场画面。每个元素都依照游戏的美术方向绘制,让介面看起来是世界观的一部分,而不是硬贴上去的一层。
这项服务只涵盖视觉与互动设计。我们定义每个控制项长什么样、怎么动、怎么反馈;接上游戏逻辑、数学模型与 RNG 的部分由您的开发团队负责。
- Spin 钮:待机、按下、停用、Turbo、停止等状态
- 押注与余额:押注选择器、币值、总押注、余额与赢分栏位
- 赔付表与规则:符号赔率、特色玩法说明、连线或 Ways 示意图
- 设定与自动旋转:音效、速度、自动旋转次数、损失上限对话框
- 赢分演出:赢分计数、Big Win、Mega Win 与特色触发面板
- 载入与开场:进度画面与特色玩法介绍
iGaming 大厅 UI 设计包含什么?
大厅设计涵盖玩家找游戏、开游戏会用到的画面:首页、游戏合辑、分类页签、搜寻、活动版位,以及大厅与游戏之间的转场。我们先排资讯层级、再做视觉层,让精选内容、新游戏与彩金彼此不打架、都找得到。
交付内容包含桌机网页、手机网页与原生 App 外框的大厅版面,加上前端团队建置与扩充时需要的整组元件。
| 大厅区块 | 我们设计什么 | 您提供什么 |
|---|---|---|
| 首页与精选 | 主视觉版位、精选游戏卡、彩金跑马灯 | 要主打哪些游戏与活动 |
| 合辑与分类 | 页签系统、筛选器、卡片网格、排序控制 | 分类架构与游戏中继资料 |
| 活动促销 | Banner 版位、红利卡、锦标赛排行榜 | 活动文案与优惠规则 |
| 转场 | 大厅进游戏的载入、返回大厅、弹窗模式 | 游戏启动器的技术限制 |
| 帐户入口 | 大厅内的钱包、历史纪录与个人资料入口 | 法遵与 KYC 要求 |
老虎机 UI 直式与横式版面怎么一起设计?
每款老虎机 UI 都设计成两套互相对应的版面,而不是一套硬拉伸。直式把滚轮区放高、控制项放在底部拇指搆得到的位置;横式则把押注与 Spin 控制移到两侧,让滚轮尽量放大。两套共用同一个元件库,改一颗 Spin 钮,所有地方同步更新。
我们提供常见手机与平板长宽比的安全区参考线,并标明每个元件如何锚定、如何缩放,引擎排版时不必靠猜。
| 元素 | 直式版面 | 横式版面 |
|---|---|---|
| 滚轮区 | 中上方、满版宽 | 置中、最大高度 |
| Spin 与控制项 | 底部列,拇指可及 | 右侧,直向堆叠 |
| 押注与余额 | 控制列上方 | 左侧或底部两角 |
| 赢分演出 | 覆盖在滚轮上方 | 覆盖在滚轮正中 |
| 赔付表与设定 | 全萤幕面板 | 侧边面板或全萤幕 |
博弈游戏 UI 怎么做到多语系不跑版?
每个文字容器都预留扩展空间,并逐元件指定超出时的处理方式(换行、缩小或截断),因为同一个标签在不同语言里长度可能差好几倍。字型依您要涵盖的文字系统挑选;数字、币别与日期的位置也预先安排好,格式换了版面不会坏。
我们自己的官网就跑九种语言(繁体中文、简体中文、英文、日文、越南文、泰文、印尼文、西班牙文、巴西葡萄牙文),所以团队亲手处理过您的游戏在亚洲、欧洲与拉美市场会遇到的字长与文字系统问题。
设计里内建了哪些无障碍基本功?
我们会把博弈产品实际做得到的基本功内建进设计:文字与控制项在繁杂背景上的对比、适合单手操作的触控目标大小、状态变化除了颜色还用形状或文字标示、手机尺寸下可读的字级,以及赢分与转场动画的减少动态版本。每条规则都写进元件规格,实作时不会漏掉。
PlaySmith 的博弈 UI/UX 设计适合谁?
这项服务适合已经有工程与数学团队、需要专门介面层的团队:
- 推出新作或换皮、需要配合每个主题的游戏内 UI 的老虎机工作室
- 要改版大厅或推出新品牌前台的营运商与平台商
- 需要白牌 UI 套件让客户自行换皮的聚合商与 B2B 平台供应商
- 游戏已经能跑、但介面还是暂代版的开发团队
老虎机 UI/UX 外包要多少钱、怎么报价?
范围由三个问题决定:要哪些介面(游戏内 UI、大厅、网页或 App 产品画面)、哪些方向与断点、输出要对应哪个引擎。收到您的书面需求后,我们回复范围与估价,不需要开会。
UI/UX 工作依需求书个别报价。供参考:完整的老虎机视觉制作(含游戏内 UI、符号、角色、背景、Spine 动画与特效)每款 US$8,000 起,约 30 个工作天完成。有多款排程的工作室可改用月产能方案,配置专属团队与优先排程;企业级与白牌合作另行报价。
| 范围 | 通常包含 | 适合 |
|---|---|---|
| 游戏内老虎机 UI | 单款的控制项、面板、赔付表、赢分演出,直式与横式 | 开发中、要补 UI 的工作室 |
| 大厅介面 | 首页、合辑、分类、活动、转场、整组元件 | 营运商与平台商 |
| 网页或 App 产品 UI | 注册、钱包、帐户、活动、大厅、响应式画面 | 新品牌与平台改版 |
| 月产能 | 专属团队,持续排入 UI 与美术工作 | 一年出好几款的工作室 |
交件内容有哪些?
您会拿到设计系统、元件规格与可直接进制作的输出档;完工并付清尾款后,原始档的智慧财产权完整移转给您。
- 设计系统:产品或单款游戏的色彩、字体、间距、图示与动态规则
- 元件规格:每个状态、尺寸、锚点与缩放规则,附标注尺寸图
- 版面:范围内约定的每个断点的直式与横式画面
- 输出档:为 Spine、Unity、Cocos 与 HTML5 切好、命名好的素材包,由我们自建的打包系统产出,含尺寸与格式检查及各引擎专属说明文件
- 原始档:分层设计档与动画原始档
制作流程怎么走?
每个项目都走同样四个阶段,里程碑全程对您透明,项目制包含一轮主要修改。
- 1. 研究与概念:研究您的游戏或平台、玩家流程,以及目标市场的同类介面,提出互动模式与版面方向。
- 2. 美术方向与风格定锚:核准一个方向并锁定,作为所有元件的视觉基准。
- 3. 制作:设计划面、元件与各种状态,需要的地方加上动态,由资深美术加自动化 QC 检查。
- 4. 素材交付:交付打包好的输出档、规格与原始档,附您引擎的说明文件。
哪些工作留给您的开发团队?
PlaySmith Studio 只负责视觉素材与介面设计。软体开发、游戏数学与 RNG、平台整合、后端服务与法遵实作,仍由您的团队或技术伙伴负责。我们依您的技术限制设计、一开始就讲好引擎格式,所以交接就是丢文件,不是重新谈一次。
常见问题
都可以。游戏内 UI 可以针对您正在制作的游戏单独承接,也可以包含在完整的老虎机视觉制作里,后者涵盖符号、角色、背景、Logo、赔付表视觉、Spine 动画、粒子特效、载入与开场动画,以及赢分演出。完整周期每款 30 个工作天,团队每月最多可同时进行五款。
可以。换皮与大厅翻新会从您现在的版面、品牌规范或线上产品出发,保留玩家已经熟悉的结构。我们的风格锁定流程会用核准的方向训练项目专属模型,让每个新元件都和您既有的素材共用同一个视觉基准。
素材包会为 Spine、Unity、Cocos 与 HTML5 准备。自建的打包系统负责切图、统一命名、尺寸与格式检查,再产出各引擎专属的素材包与说明文件。如果您的前端用的是网页框架而不是游戏引擎,我们会以分层设计档与汇出素材交付同一套元件。
版面设计成不绑语言:文字容器带有扩展规则、字型依您需要的文字系统挑选、数字栏位针对不同币别与日期格式预先规范。我们自己的官网维护九种语言,团队很清楚字长与文字系统会碰到的问题。最终语言清单在您的需求书中确定。
没有。PlaySmith Studio 只提供视觉素材与介面设计。软体开发、游戏数学与 RNG、平台整合由您的开发团队负责。我们会以工程师指定的格式交付规格与输出档,实作期间也会在线回答元件与状态的问题。
开工前、分享任何需求资料之前先签保密协议(NDA)。完工并付清尾款后,美术原始档的智慧财产权完整移转给您。官网上展示的作品除非客户明确同意具名,否则都是我们的自制展示作品,客户评语也一律匿名。
把书面需求寄到 hello@playsmith.studio 或通过联络页送出:需要哪些介面(游戏内 UI、大厅、产品画面)、目标方向与设备、引擎或框架、语言与时程。欢迎非同步沟通,不需要开会。我们会在 3–5 个工作天内回复问题或范围估价。
项目制每款 US$8,000 起是参考价,不是最终报价。以完整老虎机制作来说,包含整套美术、Spine 骨骼动画与粒子特效、透明的里程碑,以及一轮主要修改。纯 UI 与大厅项目则依您需求书描述的介面与断点报价。
送出 UI/UX 需求,不用开会
告诉我们您需要哪些介面、方向、引擎与语言。我们会在 3–5 个工作天内回复范围估价或进一步问题。分享任何机密资料前,可先签保密协议(NDA)。
开始填需求本页数字与定价页、llms.txt 使用同一份事实。
