插图

概述

插图能够一目了然地传达信息,通过视觉叙事简化复杂概念,增强用户理解。插图能够弥合技术概念与用户理解之间的差距,使抽象概念更具可感知性和吸引人。

在 Cloudflare 的产品和服务中,插图能够吸引注意力、激发好奇心,并有效引导用户。插图将无形的概念转化为易于理解的视觉内容,提升了清晰度和无障碍性。

核心原则

品牌插图 - 简单明了
简单明了

专注于核心内容。减少无关细节,凸显核心要素。使用简洁线条、基础形状和极简配色,确保视觉表达清晰易懂。

品牌插图 - 展示而非说明
展示而不说明

使用隐喻和类比来表达复杂的想法。插图应帮助观众快速理解某个概念,无需大量文字说明。

品牌插图 - 一致性至关重要
一致性是关键所在

严格遵循 Cloudflare 品牌的配色方案、排版、线条粗细,并复用现有库中的标志性图像。这确保所有插图都能成为我们品牌视觉语言的有机组成部分。

品牌插图 - 确保可扩展性
确保可扩展性

无论尺寸大小,插图都应具备相同的可读性和视觉效果。

品牌插图 - 无障碍
无障碍

设计时考虑无障碍性。通过使用图案、标签等方式,确保线条、形状和颜色的鲜明区分,尤其是具有不同用途的元素。提供足够的颜色对比度,并为所有非装饰性插图添加替代文本,使屏幕阅读器用户能够理解。

品牌插图 - 注入品牌个性
注入品牌个性

我们利用插图来表现品牌的独特性格。插图不仅应当清晰易读,还应该一眼就能看出是我们的品牌风格。在每件作品中融入我们特定的视觉语言,注入我们独特的调色板、智慧和独特气质。

风格与构图

品牌插图-人物个性
人员与个性

多样性是 Cloudflare 表现人物形象时不可或缺的组成部分。应该使用不同的五官、皮肤色调、发型和服装来为插图增添个性,并体现员工和客户的多样性。

下载人物形象插图指南
品牌插图 - 二维等轴测投影
二维和等轴测

虽然整体风格以二维表现为主,但部分插图采用微妙的渐变和阴影效果来营造深度感和立体感。这样可以防止插图显得过于简陋。在某些情况下,等轴测投影插图能更好地传达设计的意图。

切勿

切勿 —— 过度复杂化

切勿使用可能会使用户困惑或分散注意力的不必要元素,使视觉效果过度复杂化。

切勿 - 介绍

切勿引入不相关的样式或配色方案,因为这可能会造成混乱并降低品牌认知度和信任度。

切勿 — 扭曲缩略图

切勿使用缺乏原创性的老套或过度使用的图像。Cloudflare 有诸多独特之处。请专注于差异化。

切勿 - 展示缩略图

切勿以同质化的方式呈现用户或环境。尽可能体现用户的多样性。请勿传播会造成文化偏见的刻板印象、偏见或误解。

调色板

我们的插图风格的色彩调色板以 Cloudflare 品牌为基础。它以橘黄、芒果黄、宝石红、树莓红和樱桃红为基调,营造出温暖且充满乐观气息的视觉效果。此外,辅以一组更冷的颜色,包括莓黑、紫色、浅灰和浅蓝,提供平衡和对比。白色用作基础中性色,赋予插图干净、现代的感觉。整体效果专业、值得信赖,并微妙地充满活力。

在我们的品牌插图中, 红色绿色 是有目的地使用的。红色代表明显的危险或威胁,有效地指示网络攻击、安全漏洞或操作失败。相反,绿色传达安全、成功和保护的意思,说明安全的连接、有效的防御或已完成的行动。在我们所有的视觉效果中使用一致的这些颜色,可以为我们的客户提供统一、直观的体验,帮助他们快速了解其安全状态。

主色

颜色-橘黄

橘黄

Hex #F6821F
RGB 246, 130, 31
CMYK 0, 60, 100, 0
PMS 1495 C

颜色 - 宝石红

宝石红

Hex #FF6633
RGB 255, 102, 51
CMYK 0, 80, 93, 0
PMS 1645 C

颜色 - 芒果黄

芒果黄

Hex #FBAD41
RGB 251, 173, 64
CMYK 0, 37, 84, 0
PMS 1365 C

辅色

颜色-柠檬黄

柠檬黄

Hex #FFD43C
RGB 255, 212, 60
CMYK 0, 17, 76, 0

颜色 - 树莓红

树莓红

Hex #CE2F55
RGB 206, 47, 85
CMYK 0, 77, 59, 19

颜色 - 樱桃红

樱桃红

Hex #960C3E
RGB 150, 12, 62
CMYK 0, 92, 59, 41

颜色 - 蓝莓蓝

蓝莓蓝

Hex #3E74FF
RGB 62, 116, 255
CMYK 76, 55, 0, 0

颜色 - 黑莓色

黑莓紫

Hex #0F006B
RGB 15, 0, 107
CMYK 86, 100, 0, 58

颜色 - 黑色

黑色 (文字)

Hex #000000
RGB 0, 0, 0
CMYK 0, 0, 0, 100

第三色

颜色 - 浅橙色

浅橙色

Hex #FFE9CB
RGB 255, 233, 203
CMYK 0, 9, 20, 0

颜色 - 极浅蓝色

特浅蓝

Hex #E0ECFF
RGB 224, 236, 255
CMYK 12, 7, 0, 0

颜色 - 浅蓝色

浅蓝色

Hex #A8CBFF
RGB 168, 203, 255
CMYK 34, 20, 0, 0

颜色 - 浅紫色

浅紫色

Hex #F2D6F4
RGB 242, 214, 244
CMYK 1, 12, 0, 4

颜色 - 紫色

紫色

Hex #941FBA
RGB 148, 31, 186
CMYK 20, 83, 0, 27

颜色 - 深紫色

深紫色

Hex #4D1470
RGB 77, 20, 112
CMYK 31, 82, 0, 56

颜色-成功浅色

成功(浅色)

Hex #BCECCB
RGB 188, 236, 203
CMYK 20, 0, 14, 7

颜色 - 成功

成功

Hex #57CF7D
RGB 87, 207, 125
CMYK 58, 0, 40, 19

颜色 - 成功深色

成功(深色)

Hex #12523D
RGB 18, 82, 61
CMYK 78, 0 26, 68

颜色 - 危险浅色

危险(浅色)

Hex #FCA39C
RGB 252, 163, 156
CMYK 0, 35, 38, 1

颜色 - 危险

危险

Hex #FC3D2E
RGB 252, 61, 46
CMYK 0, 75, 82, 1

颜色 - 危险深色

危险(深色)

Hex #B0291C
RGB 176, 41, 28
CMYK 0, 77, 84, 31

颜色 - 浅灰色

浅灰色

Hex #747474
RGB 116, 116, 116
CMYK 0, 0, 0, 55

颜色 - 深灰色

深灰色

Hex #DFDFDF
RGB 223, 223, 223
CMYK 0, 0, 0, 13