品牌指南

代表 Flutter 品牌

颜色变化

浅色

适用于具有重叠形状或各种图案的浅色背景。

深色

当透明度不可用时,适用于具有重叠形状或各种图案的深色背景。

透明度

适用于具有重叠形状或各种图案的深色背景。

挖空

适用于具有高对比度的纯深色背景

徽标变化

垂直组合

当水平空间有限时,可以使用垂直组合。

标志

当垂直和水平空间有限时,可以单独使用标志,而无需使用标识。

使用 Flutter 构建

在其他应用上下文中引用时。这包括博客文章、新闻采访以及应用本身。

大小和间距

为了确保易读性,Flutter 组合和图标应位于开放空间内。组合或图标周围应始终保持相当于单个“F”高度的最小边距空间。如果可能,应提供更大的边距空间。徽标切勿与文本或插图重叠或拥挤。此外,徽标不得链接到其他徽标或标签。只能使用已批准的品牌组合。

Sizing and Spacing 1
Sizing and Spacing 2

对齐

当居中对齐图标时,Flutter 图标看起来会失去平衡。居中对齐图标时,请使用左上角和左下角作为参考点以提供视觉平衡。

Good logo alignment

请执行以下操作:使用左上角和左下角作为参考点,以视觉方式居中对齐 Flutter 图标

Bad logo alignment

请勿执行以下操作:以几何方式居中对齐 Flutter 图标

对比度

使用徽标的挖空版本时,请始终确保前景和背景颜色通过 WCAG AA 可访问性 标准。WCAG 2.0 AA 级别要求普通文本的对比度比率至少为 4.5:1,大文本的对比度比率至少为 3:1。WCAG 2.1 要求图形和用户界面组件的对比度比率至少为 3:1。

Good accessibility

请执行以下操作:对比度比率 - 5.29:1,符合 WCAG AA 标准

Bad accessibility

请勿执行以下操作:对比度比率 - 2.23:1,不符合 WCAG AA 标准

连字

在标题格式中呈现“Flutter”名称时,请关闭标准连字。两个“t”字符应保持清晰。

Good logo alignment

请执行以下操作:关闭标准连字

Bad logo alignment

请勿执行以下操作:开启标准连字

颜色

Flutter 深蓝色

#042B59

Flutter 蓝色

#0553B1

Flutter 天空蓝

#027DFD

主要颜色

徽标由一种主要蓝色和两种强调蓝色组成。

红色

#F25D50

黄色

#FFF275

紫色

#6200EE

绿色

#1CDAC5

次要颜色

Flutter 还提供扩展调色板,用于背景颜色和其他可视化效果。

Dash

Dash 是 Dart 语言和 Flutter 框架的吉祥物。

下载 Dash
Dashatar Dash

入门

即时访问 Flutter 框架的功能

Powered by Dart