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