roblox-ui-design

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Roblox UI Visual Design

Roblox UI视觉设计

When to Load

加载时机

Load for UI design or review. Existing style and art direction take priority. Otherwise derive a restrained system from the game fantasy and screen job. Load

roblox-gui

for mechanics.

在进行UI设计或评审时加载。现有样式和艺术方向优先。否则根据游戏设定和界面任务构建一套简洁克制的系统。如需实现交互机制，请加载

roblox-gui

。

Quick Reference

快速参考

Establish the visual system

建立视觉系统

Inspect existing surfaces, type roles, borders, depth, icons, spacing, and action colors. Reuse consistent tokens.
If no style exists, name the screen job and game fantasy before choosing colors, fonts, or decoration.
Define a small token set: background, surface, raised surface, text, muted text, accent, danger, border, radius, spacing, and type roles.
Choose density from the task and device. A HUD, inventory grid, settings list, and purchase prompt should not share one topology.
Use simulator styling only when the game or art direction calls for it. The full reference keeps an optional recipe.

检查现有界面元素、文本角色、边框、层次感、图标、间距和操作颜色。复用一致的设计令牌。
若没有现有样式，先明确界面任务和游戏设定，再选择颜色、字体或装饰元素。
定义一套小型设计令牌集：背景、表层、凸起表层、文本、弱化文本、强调色、危险色、边框、圆角、间距和文本角色。
根据任务和设备选择布局密度。HUD、物品栏网格、设置列表和购买提示不应采用相同的布局结构。
仅当游戏或艺术方向要求时，才使用模拟器样式。完整参考文档中包含可选的实现方案。

Core principles

核心原则

Topology: choose single-focus, collection, compare, HUD, list, or another justified shape. Do not force every task into a centered modal.
Hierarchy: one object, state, or action gets the strongest contrast and scale. Quiet secondary content.
Flow: each repeated flow has one owner:
```
UIListLayout
```
,
```
UIGridLayout
```
, or shared-column math.
Density: size the complete panel around useful content. Do not stretch shells or add metadata to occupy space.
Bounds: sum widths, gaps, padding, borders, and minimums. Keep strokes and backings inside parents.
Alignment: use shared layouts, fixed icon slots, and matching anchors.
State: active, available, locked, completed, selected, and disabled states need more than color.
Input: design hover only where it exists. Touch, gamepad focus, keyboard, and reduced motion need equivalent feedback.
Verification: inspect representative target viewports for clipping, overflow, dead space, type, hierarchy, and focus order.

布局结构（Topology）：选择单焦点式、集合式、对比式、HUD、列表式或其他合理的布局形态。不要将所有任务都强行塞进居中模态框。
层级结构：单个对象、状态或操作应拥有最强的对比度和尺寸占比。弱化次要内容。
流程一致性：每个重复的布局流由单一组件控制：
```
UIListLayout
```
、
```
UIGridLayout
```
或共享列计算公式。
布局密度：根据有效内容调整整个面板的尺寸。不要拉伸空框架或添加元数据来填充空间。
边界约束：计算宽度、间隙、内边距、边框和最小值的总和。确保描边和背景在父容器内部。
对齐方式：使用统一布局、固定图标槽位和匹配的锚点。
状态设计：激活、可用、锁定、完成、选中和禁用状态不能仅通过颜色区分。
输入适配：仅在支持的场景设计悬停效果。触摸、游戏手柄焦点、键盘和简化动效都需要对应的反馈。
验证检查：在代表性目标视口中检查是否存在裁剪、溢出、空白区域、文本问题、层级混乱和焦点顺序错误。

Neutral fallback

中性 fallback 方案

Use one restrained surface and border language, one display role, one body role, and one accent. Let game content, artwork, and action importance create identity. Prefer readable contrast and clear grouping over thick outlines, ornamental depth, or genre assumptions.

采用一套简洁克制的表层和边框风格、一种标题文本样式、一种正文文本样式和一种强调色。让游戏内容、美术作品和操作的重要性来构建视觉辨识度。优先保证可读性对比度和清晰的分组，而非厚重轮廓、装饰性层次感或类型化预设。

Anti-patterns

反模式

Oversized shells, guessed offsets in managed layouts, drifting actions, blank item boxes, color-only state, mouse-only feedback, decoration before hierarchy, and a familiar simulator skin pasted over unrelated art direction.

Style inference, optional simulator recipe, composition, interaction states, and QA: references/full.md

过大的空框架、在受控布局中手动设置偏移、操作元素位置混乱、空白的物品框、仅用颜色区分状态、仅支持鼠标的反馈、先做装饰再考虑层级，以及将熟悉的模拟器皮肤粘贴到无关的艺术方向上。

样式推导、可选模拟器方案、布局组合、交互状态和质量检查：references/full.md