产品设计都应该知道的ICON知识精选.pdfVIP

产品设计都应该知道的ICO N知识 图标是UI设计师必会技能之一 ，而一个好的ico n是怎么设计出来的呢 ？ 天我们来给大家一个图标设计的全面知识汇总 ： 首先 ，在制作图标前要考虑以下几点 （拿张纸默默写下来 ）： 你的ico n主要适用于什么设备 ？ 需要什么风格的ico n ？ 有没有其他设计要求 ？ 接下来我们进入设计过程 ： 1. 设计从网格开始 针对不同的设计我们会运用不同大小的网格。我们这里以32*32的网格为例。 网格边缘的2px是我设计中不可触及的 ，也就是留白边缘。如果没有特殊情况的话 ，我一定不会让 我的设计图形进入这个边缘界限。而留白的目的也是为了让设计看着不会太满给用户一定的呼吸感 。 图标的结构分为形状和方向两部分。如果你的图标有边框 ，一般会在边界框位置画出像正方形 ， 圆形 ，三角形 ，矩形等图形作为边框。 圆形图标会在网格中成居中状。在圆形图标设计中四个边缘会触及到内容区域的边缘 ，但不会到留 白区域。一些小的图形和边边角角部位会超出圆形 ，但不用担心 ，这是一个常见的现象。 方形图标一般也会在网格中居中 ，但大 数情况也会触及到内容区域的边缘。我们看下下面这张图 ：图中分三个方形区域 （蓝色、橙色和绿色 ），图标中的大部分图形在中间橙色区域内。每个区域 内的图形占比取决于图标整体的视觉效果 ，而这个把控需要你不断地练习找一些感觉才能自如的 运用。 在32px的网格中 ，你会注意到从28px中垂直和水平的分出20px区域 ，一般在设计图标时会试图遵循 这样的规矩。 不规则的图标设计会用一个圆形来去对齐 ，如下图。你看一看到图形已经触及到圆形的边缘 ，这里 你不用特别精确的卡边 ，只要接近就可以了。 但你要记住网格规矩不是所有设计都要遵循的 ，一个图标的本质远远超过了这种规矩的设定。网格 会帮助你提高图标设计的一致性 ，但是如果在设计一个牛逼图标和遵循规则中选择的话 ，相信你也 会选牛逼设计的。 2. 从一个简单的几何图形下手 设计图标跟画草图一样 ：从一个简单而粗糙的圆形、长方形又或是三角形开始。在设计小图标的 时候 ，手绘的表现方式可能会看着不那么精致 ，所以用A I做设计是个更好的选择。用一些基本的几 何图形进行设计会更加准确 （尤其在曲线边缘部分 ），在调整的时候会更快 ，同时也能更精确的适 应网格模式。 3. 边缘、边角、曲线及角度规范 尽可能在设计时边缘、边角、曲线及角度遵循一些数学规范的同时又不失有趣。换句话说就是不要 太相信自己的眼球 ，在一些细节上需要遵循规范 ，因为如果这些元素不一致的话会很影响图标的 质量。 角度 在设计中 ，大多情况我会使用4 5度角或者它的倍数。4 5度角会显得很均匀 （在像素下会表现得 更强 ），这种完美的对角线会让人眼很舒服也很清晰。这种模式同时也可以建立一组图标的统一性 。如果我要打破这种规则我可能会使用减半角度 （22.5或者11.5度 ）或者15的倍数 ，当然也会根据 情况进行调整。使用4 5度的好处是即使反角度用也是不打乱规则的。 曲线 曲线是个特别考量技术的地方 ，即使图片质量很差 ，一看曲线就知道设计师的能力怎样。而且人眼 的测量总也一些小的误差 ，大多数人眼睛和手协调能力达不到那么高层次 ，所以用软件的形状工具 和一些数字来创造曲线从而达到效果。 边角 圆角可能用的并不多 ，2px半径的圆角就很显然是个圆形了。你要根据你的设计总特征来选择是否 用圆角 ，并且要用多大的圆角。 像素效果 图标的像素效果在用户界面中是很重要的一部分 ，尤其在小尺寸设计中很影响整体视觉。如果像素 网格中行间距不对齐 ，会导致边缘出现锯齿在小图标上会看起来很模糊。要是调整图标的像素网格 会使直线变得单薄 ，角度与曲线的精确度就没那么精确。这也是为什么建议大家用4 5度角的原因 ， 比较好掌握 ，更加精准容易对齐。 线的粗细 说到线的粗细 ，2像素应该是最理想的 ，可3像素是最通用的 。我个人更倾向2PX和4 px ，理想状态 下我会用2的倍数比较多。在大多情况下字和扁平的图标是要避免特别细的线条 ，除非你是为了做 出一些期望效果。如果你想定义线条的形状 ，一般设计师会通过光线和阴影的方法。 4 . 通过设计元素及图标特点来达成统一性 设计师会通过某一个元素让一系列设计更统一 ，像荷兰设计师在2015年图标沙龙上谈到他为荷兰政 府做的项目 ，在设计中他跟伙伴运用了“缺口“的元素 ，不是每一个图标都有这个元素 ，但是大多数 的统一让这一系列有了自己的特色 ，也真正的把它们融合了起来。 5. 有节制的