设计

深色界面Dark UI

你可能会说

黑色背景那种科技感，像代码编辑器那样。

深色界面是一种以深色背景和浅色前景为主的界面配色方案它常见于影音、创作工具和开发者产品，但不等于科技风或赛博朋克。设计时要用分层灰度区分表面，保证文字对比度，并把高亮色留给真正重要的状态和操作。
RELIABLE AI OPERATIONS

Intelligence,
operationalized.

Deploy agents with visible reasoning, human approval and production-grade observability.

Read the docs
设计原则 · Principles
  • 先保证深色环境中的可读性：正文、边界和状态需要保持可区分的对比层级
  • 高亮色承担明确职责：运行、成功、风险和主要行动各自稳定
  • 展示真实内容或产品状态：影像、画布、步骤、日志和结果都比无意义装饰更可信
  • 光效只负责聚焦：局部渐变和发光强调关键区域，不覆盖所有边界

什么时候用

  • 影音、音乐和创作工具：深色环境能让内容本身成为视觉焦点
    AGENT STATUS 服务状态字段链接监控来源
  • 开发者工具、AI 和数据产品：代码、状态与控制台能自然进入页面
    > deploy intelligence执行状态字段
  • 需要长时间聚焦的界面：通过分层灰度减少无关视觉刺激
    > deploy intelligence执行状态字段
  • 品牌强调精确和沉浸感：深色基底能让少量颜色与内容更有力量
    AGENT STATUS 服务状态字段链接监控来源

什么时候不用

  • 高亮效果覆盖大部分内容：会弱化层级，并增加长时间阅读负担
    NEON EVERYTHINGGlow, grids and particles bury the product
  • 用无关代码充当产品展示：无法说明产品的真实能力、状态或工作流
    NEON EVERYTHINGGlow, grids and particles bury the product
  • 正文使用过细低对比灰：深色并不意味着可以牺牲可读性
    NEON EVERYTHINGGlow, grids and particles bury the product
  • 为严肃工具加入过多赛博元素：噪声和故障效果可能削弱可靠感
    NEON EVERYTHINGGlow, grids and particles bury the product
组成结构 · Anatomy
Dark baseSignalContentControl
用分层灰度而不是纯黑支撑长时间阅读
少量高亮色用于状态、行动和真正重要的数据
真实内容、步骤、日志、指标或结果构成视觉主体
关键控制保持清楚，技术氛围不能盖过操作
AI 提示词 · Prompt

为云端自动化工具做深色官网。用现有的真实运行步骤、服务状态和结果数据解释产品，正文和主要操作必须清楚可读；可以用少量高亮和光效区分状态，但不应让装饰取代任务信息。状态与数据只采用可核验来源，资料不足时先标为“待补充”并说明需要什么，不要虚构运行结果。

典型使用场景
AI 智能体平台

左右滑动查看完整示例

NOVAProductStories
AI OPERATIONS

Agents you can trust.

Visible steps, human approval and observable operations.

Discover more
影音内容平台

左右滑动查看完整示例

NocturneProductStories
CURATED CINEMA

Stories stay in focus.

A quiet home for independent films and thoughtful collections.

Discover more
创作工具官网

左右滑动查看完整示例

CanvasProductStories
CREATIVE WORKSPACE

Keep every idea in focus.

Edit, compare and publish without letting the interface compete with the work.

Discover more
开发者 API 服务

左右滑动查看完整示例

Vector APIProductStories
DEVELOPER FIRST

One endpoint. Clear behavior.

Typed responses, observable limits and examples that actually run.

Discover more
延伸阅读 · 权威出处
prefers-color-scheme：深色模式完全指南web.dev ↗