登录 / 注册 Account
Jump to section

图标是对抽象文字概念的符号化呈现,可帮助我们描绘各种想法和技术。在我们的图标集中,每个图标都具有特定的含义和风格一致的设计,从而让我们在业务中持续有效地沟通。

根据比例的不同,您可能需要不同类型的图标或插图。

UI 图标

用户界面(UI)图标非常小,一般用于网站或产品的界面。

标准图标

图标表示单一概念或两个事物之间的关系。

迷你插图

迷你插图是代表一个简单概念的小插图。

插图

插图具有叙事结构或用于展示复杂的概念。

我们的图标有两种类型:标准图标和 UX 图标。标准图标用在营销材料、幻灯片、信息图和图表中,而 UX 图标则用在界面中。

标准图标

我们的图标系统简洁、素雅、开放。所有图标都使用相同的笔画粗细和角半径、从正面显示对象、采用平面透视,并且完全由几何形状组成。我们的标准图标默认有 2 种版本:填充和未填充。此外,图标有 3 种颜色可选:红色、黑色和白色,但也可以更改为我们品牌配色中的任何颜色。

在营销材料、演示文稿、网页内容、信息图和图表中,请使用标准图标。它们最适合 32 到 100 像素之间的尺寸。

创建标准图标

我们的图标库是大家日积月累、协作构建的成果。如果您创建了新图标,欢迎与我们分享。为了确保您创建的图标契合现有的图标集,请使用模板并遵循以下准则。

1. 在 36 像素画板上绘制图标。根据需要延伸到内边距,以保持每个图标的比例和大小相似,但不要碰到外边距。

2. 所有角度都应为 0°、45°、90°,或其中一个角度为这些角度 +/- 12°。之所以使用 12° 斜角,是因为它与我们字体中上行字母和下行字母的角度相一致。

3. 优先创建未填充图标。使用粗细度为 1.5 的笔画,并确保末端和角为圆角。

4. 仅使用几何形状来构建图标的基本形式。

5. 使用点和直线来添加细节部分。在笔画中使用 1.5 磅间距以彰显开放感或深度。对于虚线,使用 0 磅短划线和 2.5 磅间距。

6. 小箭头应为 90°,两端各长 2 个像素。大箭头与小箭头应采用相同的比例。

创建填充图标

1. 要创建填充图标,请以非填充图标为基础,并使填充色与笔划颜色相同,同时保持笔划的大小相同。

2. 将细节部分更改为白色。

3. 修改细节部分的尺寸,让元素之间保持 1.5 或 0.5 磅的间隙。根据图标的具体情况,还可以将线条延长。

UI 图标

屏幕界面对图标设计提出了特殊的挑战,尤其是大小和比例。屏幕界面要求图标易于理解,并且在非常小的尺寸下仍保持清晰。对于这些较小的尺寸,可对 UI 图标运用与标准图标相同的原则:12° 和直角,末端和角为圆形,使用几何形状。 

我们的 UI 图标采用扁平化设计,简单清晰,16 像素。它们通常为灰色或白色。

1. 从 16 像素画板和 1 磅笔画开始。在设计图周围设置 1 像素的边距。

2. 确保图标适合 14 像素的网格。

3. 参考标准图标并借鉴现有图标。仅使用必要的元素来识别图标。

将图标作为图案

图案是利用图标来快速创建引人入胜的图形的一种方式。图案可以用作背景或用于填充空间。

图案创建方法

创建图案时,不妨试着更改图案中的 1 或 2 个元素,使其更具动态感。图案应该灵动、有趣,避免无聊或单调。 

使用一种图标并改变其大小、颜色或填充。 

使用一组相同大小的相关图标。

为一组图标添加连接线。

尝试不同的颜色和比例。

图标使用示例

利用尽可能少的设计元素制作平面图标。

不要让图标显得过于复杂或采用三维形式。

在一组图标中,每个图标都使用同一种线宽。

不要使用多种线宽。

找到可以代表抽象想法的具体图像。

不要让图标抽象到用户无法理解其含义的地步。

一个图标每次只代表一个概念。

不要将两个图标组合起来表达更复杂的概念。

改变图案中的 1 或 2 个元素,以带来律动感和趣味性。

不要总是一成不变地使用同一个图案,这样只会让人感到重复和无聊。

使用不太复杂且不会干扰文案的图案。

图案的使用不要喧宾夺主。

标准图标是一种增加视觉吸引力并突出演示文稿要点的快捷方式。

在 redhat.com 的界面中,UI 图标可以让用户更快速、更直观地浏览我们的网站。