品牌指南

代表 Flutter 品牌

颜色变体

浅色

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

深色

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

透明度

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

镂空

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

徽标变体

垂直组合

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

图标标识

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

基于 Flutter 构建

用于在涉及其他应用程序的环境中引用时。这包括博客文章、新闻采访以及应用程序本身。

尺寸与间距

为确保清晰易读,Flutter 组合和图标应放置在开放空间内。在组合或图标周围应始终保持至少相当于一个“F”字母高度的边距。尽可能提供更大的边距。徽标绝不应被文字或艺术作品重叠或遮挡。此外,徽标不应与其他徽标或标签链接。仅应使用经批准的品牌组合。

Sizing and Spacing 1
Sizing and Spacing 2

对齐方式

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

Good logo alignment

推荐: 使用左上角和左下角作为参考点进行视觉居中对齐

Bad logo alignment

不推荐: 进行几何居中对齐

对比度

使用徽标的镂空版本时,请始终确保前景色和背景色符合 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