roblox-ui-design

Roblox UI 视觉设计

何时加载

进行 UI 设计或评审时加载。现有风格和美术方向优先。否则，根据游戏幻想和屏幕用途制定克制的设计系统。若涉及机制，请加载 roblox-gui。

快速参考

建立视觉系统

1. 检查现有界面、字体角色、边框、层次、图标、间距和操作颜色。复用一致的设计令牌。
2. 如果没有现成风格，在选择颜色、字体或装饰前，先明确屏幕用途和游戏幻想。
3. 定义一组精简的设计令牌：背景、表面、凸起表面、文本、弱化文本、强调色、危险色、边框、圆角、间距和字体角色。
4. 根据任务和设备选择信息密度。HUD、物品栏网格、设置列表和购买提示不应采用同一种布局结构。
5. 仅当游戏或美术方向需要时才使用模拟器风格。完整参考中保留了可选方案。

核心原则

• **布局结构：**选择单焦点、收藏、对比、HUD、列表或其他合理的形态。不要强迫每项任务都采用居中模态框。
• **层级：**让一个对象、状态或操作拥有最强的对比度和最大尺寸。弱化次要内容。
• **流程：**每个重复流程都应由一个布局组件负责：UIListLayout、UIGridLayout 或共享列计算。
• **信息密度：**根据有用内容确定整个面板的尺寸。不要拉伸外壳或添加元数据来填充空间。
• **边界：**累加宽度、间隙、内边距、边框和最小值。描边和底衬应保持在父级范围内。
• **对齐：**使用共享布局、固定图标槽位和匹配的锚点。
• **状态：**激活、可用、锁定、已完成、已选中和禁用状态不能只靠颜色区分。
• **输入：**仅在确实支持悬停的地方设计悬停效果。触摸、手柄焦点、键盘和减少动态效果的设置都需要相应反馈。
• **验证：**检查有代表性的目标视口，确认没有裁切、溢出、空白、字体问题、层级问题或焦点顺序问题。

中性备用方案

采用一种克制的表面和边框风格、一种展示字体角色、一种正文角色和一种强调色。通过游戏内容、美术作品和操作重要性塑造个性。优先考虑易读的对比度和清晰的分组，而非粗边框、装饰性层次或对特定类型的臆测。

反模式

外壳过大、在受管理的布局中猜测偏移量、操作元素位置漂移、物品框空白、状态仅靠颜色区分、仅提供鼠标反馈、层级未定就先做装饰，以及把常见的模拟器皮肤套用到不相关的美术方向上。

风格推断、可选的模拟器方案、构图、交互状态和 QA：references/full.md