干货 | 图标（ICON） 的 9 种设计原则

Posted 2022-04-20 摹客Mockplus

图标（ICON）是任何设计系统中都不可或缺的一部分。使用图标的主要原因就在于它可以帮助用户快速解释想法、快速导肮、解决语言障碍等问题，以此让用户旅程变得可用且愉快。

ICON作为一种设计工具，在UI/UX设计师之间最受欢迎。它对每个人来说都是简单易懂的，同时图标所具有的这些特性也赋予了它们通用数字语言的地位。

今天，我们就给大家来分享几个ICON设计的最佳原则，来帮助大家在UI/UX中设计出完美的图标。

01

Size

最小的图标大小通常为12×12px。根据行业标准，在以此为基础产生的大小值中，大部分的数值都是通过将先前的数字加倍而创建的。通常我们可以看到小、中、大这三个尺寸的图标大小。

• 小图标：12×12, 16×16, 24 x 24, 32 x 32, 48 x 48px
• 中等图标：64 x 64, 96 x 96, 128 x 128, 256 x 256px
• 大图标：512 x 512, 1024 x 1024px

值得我们注意的是，在我们创建ICON时，应该以100%的比例设计，这样才会使得图标像素看起来比较完美。同时通过进一步放大也可以确保准确性。 

02

Pixel-Perfect

具有完美像素的图标会呈现出清晰明快的线条和形状。如今，高分辨率显示器和Retina显示器越来越流行，因此在不久的将来可能会减少对像素完美图标的要求。但就目前而言，我们所设计的图标也应该是可扩展、响应迅速并能适用于许多设备的。我们在创建具有完美像素的图标时，可以参考以下三种建议：

• 对齐像素网格：这种设计方法可以使直线变得非常清晰，并增加曲线和拐角的清晰度

• 使图标保持完美角度：有角度的线条更有模糊感。在创建图标时，完美的角度是45°

• 边缘：直线必须占据其边缘最暗的4个像素，这样线条边缘看起来才会更清晰

03

Line Width

为了使图标看起来整洁一致，非常重要的一点就是要记住线宽和间隙的大小。这是一条我们必须遵循的规则，即：所有线条的宽度相同。

在理想情况下，线宽和间隙的大小应该相等。然而，在某些时候，我们又不得不打破这个规则，当我们需要说明日常生活中的不对称物体时，就会发生这种情况。以条形码为例，如果我们故意使图标内部的线宽和间隙大小不均匀，这样就会在一定程度上表明该对象的身份。

04

Corner Radius

在UI设计中，包括图标在内的对象圆角半径会定义项目的外观和感觉。当我们对一组中的多个对象进行阐述时，就需要遵循这一简单的规则，即：在方角和圆角之间选择其一，并对整组图标应用相同的属性。

那么这一原则为什么如此重要呢？我们需要知道，一致性是UI/UX设计的关键原则。可用且对用户友好的设计需要始终提供一致的体验。在下图示例中，我们可以看到打破这一原则是如何影响视觉体验的。

05

Optical Balance

计算机与我们人眼所感知到的体验是不同的。对计算机来说，那些似乎对其完全平衡的东西，对我们的眼睛来说可能并不相同。

例如，当我们把一个大小相等的正方形和一个圆形放在一起时，就会产生一种奇怪的感觉：圆形似乎比正方形小。为了使我们的形状在视觉上看上去大小相同，我们就应该把圆圈变大，或减小正方形的大小。

这个原则也适用于图标的设计和适用。有些图标可能更侧重于一侧。那我们就可以尝试将它们调整至整体对齐。如下图所示，我们可以看到，尽管它与其他部分都具有相同的大小，但突出显示的图标似乎更大。为了平衡这组图标，大家就需要通过减小其大小来调整突出显示的图标。

06

Optical Alignment

我们经常在设计程序中使用中心对齐。虽然这种方法并没有错，但在细节方面，比如图标设计中，我们就需要相信自己的眼睛，打破数学规律，以增强元素的平衡。以播放按钮为例，它的形状越不对称，需要改进的地方就会越明显。

07

Keep Simple & Starightforward

在这里，想和大家分享的是这条KISS原则。这个原则背后的想法是，如果大多数系统保持简单操作，那么它们就会运作得很好。用户也就会越容易理解并与之交互，而它就越有可能被放到项目设计中。那么，KISS原则是如何运用于图标设计的呢？

• 不使用文本：文字和图标的结合会减少图标的使用方式。此外，小尺寸的文本具有不可读性。如果我们仍然需要将文本作为支持元素，就需要使用ICON旁边的提示工具和标签
• 不要过度设计：不必要的复杂性会妨碍设计目的。重复的设计也会严重影响用户体验
• 尽可能避免不必要的元素：但我们不能忘记确保每个图标在整体上下文中都是可以理解且清晰的

值得大家关注的是，在ICON设计中需要明智使用KISS原则，但也要注意不能让设计变得过于简单而损害了本应该呈现出的效果。如果想要提供积极的用户体验，那我们所设计的图标应该是清晰易懂的。

08

Frame & Keyshapes

关键形状（keyshape）通常是指组合在一起的圆形、正方形、纵向及横向矩形，它们通过了一个模式来创建ICON。但是，这一规则需要我们的灵活运用，并让位于上面所提到的“Optical Balance (光感平衡)”这一原则。

因此，如果我们在设计过程中觉得图标并不完全适合形状，那么这时候我们并不能马上怀疑自己的设计是否有误，通过换位思考也许它并没有错。

对于框架（frame）而言，它是我们设计的“容器”。框架可以帮助我们通过选择画布的一个区域来创建设计。大家在创建设计时经常会将ICON放置在框架中，这么做的原因在于以下几点：

• Size (大小)：由于图标的几何形状，它们都具有不同的高度和宽度。为了在设计中正确使用ICON，我们就应该将它们放置在大小始终相同的框架之中

• Export (导出)：框架内的图标需要与视觉中心对齐，这对于导出带有框架的图标至关重要
• Time (时间)：如果我们使用Figma，那就需要通过创建组件来节省时间。大家可以使用“实例功能”来快速替换图标

09

Format: SVG & PNG icons

SVG or PNG？当我们处于导出图标阶段时，这就会成为关键问题。那我们就先来比较一下两种格式：

• SVG具有非常小的文件大小，这就意味着在导出时，可以快速加载最终设计成果；而PNG的文件大小有时会过大
• SVG格式是无限可扩展的；而PNG的分辨率仅限于我们创建文件的大小
• SVG文件可以进行编辑和创建动画；而PNG则是静态文件
• 对于PNG格式来说，我们必须提供所有尺寸和颜色的资源；而使用SVG时则不需要
• PNG与大多数浏览器都兼容；而某些旧浏览器可能不支持SVG格式

在这里建议大家可以选择SVG格式的图标，因为它可以节省大量时间。但最重要的是，在导出过程中需要注意缩小复杂的形状，并牢记某些旧版本的浏览器可能不支持SVG格式。

以上，就是我们想跟大家分享的9种ICON设计原则，希望可以帮助大家在今后的图标创建设计中更加方便、灵活。

原文链接: https://medium.com/design-bootcamp/create-icons-like-a-pro-c66a50064f8b