品牌指南

代表 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