产品设计都应该知道的ICON知识

1、产品设计都应该知道的 ICON 知识图标是 UI 设计师必会技能之一，而一个好的 icon 是怎么设计出来的呢？今天我们来给大家一个图标设计的全面知识汇总：首先，在制作图标前要考虑以下几点（拿张纸默默写下来）：你的 icon 主要适用于什么设备？需要什么风格的 icon ？有没有其他设计要求？接下来我们进入设计过程：设计从网格开始 针对不同的设计我们会运用不同大小的网格。我们这里以32*32 的网格为例。网格边缘的 2px 是我设计中不可触及的， 也就是留白边缘。 如果没有特殊情况的话， 我一定不会让我的设计图形进入这个边缘界限。 而留白的目的也是为了让设计看着不会太满给用户一定的呼吸感。图标

2、的结构分为形状和方向两部分。 如果你的图标有边框， 一般会在边界框位置画出像正方形，圆形，三角形，矩形等图形作为边框。圆形图标会在网格中成居中状。 在圆形图标设计中四个边缘会触及到内容区域的边缘， 但不会到留白区域。 一些小的图形和边边角角部位会超出圆形， 但不用担心，这是一个常见的现象。方形图标一般也会在网格中居中，但大多数情况也会触及到内容区域的边缘。我们看下下面这张图：图中分三个方形区域（蓝色、橙色和绿色），图标中的大部分图形在中间橙色区域内。每个区域内的图形占比取决于图标整体的视觉效果，而这个把控需要你不断地练习找一些感觉才能自如的运用。在 32px 的网格中，你会注意到从28px 中

3、垂直和水平的分出 20px 区域，一般在设计图标时会试图遵循这样的规矩。不规则的图标设计会用一个圆形来去对齐， 如下图。 你看一看到图形已经触及到圆形的边缘，这里你不用特别精确的卡边，只要接近就可以了。但你要记住网格规矩不是所有设计都要遵循的， 一个图标的本质远远超过了这种规矩的设定。 网格会帮助你提高图标设计的一致性， 但是如果在设计一个牛逼图标和遵循规则中选择的话，相信你也会选牛逼设计的。设计图标跟画草图一样： 从一个简单而粗糙的圆形、 长方形又或是三角形开始。在设计小图标的时候，手绘的表现方式可能会看着不那么精致，所以用 AI做设计是个更好的选择。 用一些基本的几何图形进行设计会更加准确

4、 （尤其在曲 线边缘部分），在调整的时候会更快，同时也能更精确的适应网格模式。尽可能在设计时边缘、 边角、 曲线及角度遵循一些数学规范的同时又不失有趣。 换句话说就是不要太相信自己的眼球， 在一些细节上需要遵循规范， 因为如果这些元素不一致的话会很影响图标的质量。在设计中， 大多情况我会使用 45 度角或者它的倍数。 45 度角会显得很均匀 （在像素下会表现得更强） ， 这种完美的对角线会让人眼很舒服也很清晰。 这种模式同时也可以建立一组图标的统一性。 如果我要打破这种规则我可能会使用减半角度（ 22.5 或者 11.5 度）或者 15 的倍数，当然也会根据情况进行调整。使用 45度的好处是即

5、使反角度用也是不打乱规则的。曲线是个特别考量技术的地方， 即使图片质量很差， 一看曲线就知道设计师的能力怎样。 而且人眼的测量总也一些小的误差， 大多数人眼睛和手协调能力达不到那么高层次，所以用软件的形状工具和一些数字来创造曲线从而达到效果。圆角可能用的并不多， 2px 半径的圆角就很显然是个圆形了。你要根据你的设计总特征来选择是否用圆角，并且要用多大的圆角。图标的像素效果在用户界面中是很重要的一部分， 尤其在小尺寸设计中很影响整体视觉。 如果像素网格中行间距不对齐， 会导致边缘出现锯齿在小图标上会看起来很模糊。 要是调整图标的像素网格会使直线变得单薄， 角度与曲线的精确度就没那么精确。这也是

6、为什么建议大家用 45 度角的原因，比较好掌握，更加精准容易对齐。说到线的粗细， 2 像素应该是最理想的，可3 像素是最通用的。我个人更倾向2PX和4px,理想状态下我会用2的倍数比较多。在大多情况下字和扁平的图标是要避免特别细的线条， 除非你是为了做出一些期望效果。 如果你想定义线条的形状，一般设计师会通过光线和阴影的方法。设计师会通过某一个元素让一系列设计更统一，像荷兰设计师在 2022 年图标沙龙上谈到他为荷兰政府做的项目， 在设计中他跟伙伴运用了 “缺口 “的元素，不是每一个图标都有这个元素，但是大多数的统一让这一系列有了自己的特色，也真正的把它们融合了起来。图标的目的与让用户的沟通，

7、 让他们想到并且进行选择。 太多的细节会增加图标的辨识复杂度， 尤其是小尺寸更会成为累赘。 当然， 细节的复杂程度也会影响单个或者整个系列图标的效果。 所以当你拿不准细节轻重的时候， 最好的方法是考虑最低限度的保证细节，但要保证高质量的明确图标含义。虽然我们能看到很对牛逼设计师在制作高质量的图标， 但是他们过于注重设计趋势和其他高端设计师的风格模仿。 作为一个设计师来说， 创造可能是我们应该更看重的，我们可以从结构、字体、工业、心理、自然等其他领域寻找灵感。千篇一律的图标我们都见过，可是特立独行的你才是用户真正认可的风格。卜面讲一些设计过程中你需要注意的:图标最重要的作用就是它的辨识度是否让用

8、户易理解， 人们需要在小图标中做出他们的选择是件很困难的事， 所以对于品牌来说， 大部分的图形设计是为了展现品牌 logo 或者是一个标志性的形象。当然对于一个新的或者小的品牌来说也会通过一些其他方式来展现。对于一个图标而言， 不会使用单词作为内容， 因为空间本身就不大， 而内容不多又不易用户理解。这也是一则经验：如果这个文本不是你 logo 的一部分，那么请尽量避免。如果是，也要慎重考虑一下。此外， 很多图标实际使用是在一定的环境下， 大多数包括一行描述性文本在图标下面。 设计时， 字母的颜色和图标的类型或者网站也要保持一致， 这样才能建立品牌的统一性。想让你的图标脱颖而出？那么请大胆的用色

9、。 选择一个充满活力的颜色可以帮你抓住用户注意力，让你的品牌更有特点。比如蓝色，特别是天空蓝和海军蓝，你可能会回避因为这种大众色并不吸引人。但如果蓝色是你的主要logo 色，你可以尝试一些新的偏中性的颜色， 像石灰绿， 或者选择一个季节性色调比如夏天选择亮橙色、春天选择粉红色之类的。图标不止限于手机或者电脑桌面上，所以在设计时也要顾及到它的大小和应用，所以在做大图标后缩小是个更好的方式。图标设计涉及到它的规模和大小，格式也成为了一个重要的因素，为了方面运用，矢量图是你最佳的选择。最近有很多图标运用单色背景加白色图标， 扁平化设计与阴影结合， 这种趋势虽然很流行， 但不要局限在这种设计里， 在你的图标中做一些不一样的设计。 当大多数人考虑用方形的设计， 也许你该考虑些别的方式。 在背景中加入纹理效果