本文为译文。

作者：Andy Capstick

原文链接：https://affinityspotlight.com/article/hi-res-iconui-design-can-be-pixel-perfect/

向用户传达强有力的专业信息非常重要。实现这一目标的一个关键方法是在图标集上呈现均匀清晰的图像。

---

在本文中，Andy将介绍如何为设计完美尺寸的图标资产奠定基础，并提供一些技巧，让您保持正确的设计方向。

点不是像素！

按照Apple人机界面指南，如果您正在为基于iOS的图标/ UI设计开发资源，请考虑将度量单位设置为点，而不是像素或物理度量，例如英寸，厘米或毫米。

为什么是点？在这个单位中工作意味着你的设计独立于输出时的像素密度，只需关注自己的像素密度直到导出（通过将图形缩放到@ 2x Retina）。实际上，这避免了在不同像素尺寸上设计相同的图标。

对于大多数应用程序，将度量单位设置为“点”是在文档设置时完成的。

使用144DPI

由于您不是为打印而设计，因此无需过度担心打印分辨率> 200DPI。但是，您应该保持144 DPI，以获得@ 2x Retina屏幕可接受的输出质量水平。

与度量单位一样，您可以在文档设置中设置DPI值。

提供多个画板

不要在一个画板上布置多个图标，而是考虑为每个图标设置一个画板。您最终会得到一系列易于识别的标签图标。

以下是一些使画板成为图标设计理想选择的理由：

• 它们是独立的设计区域，因此您可以更轻松地关注特定图标。

• 您不需要花费宝贵的时间来设计复杂的网格来管理所有图标。

• 可以认为画板尺寸=图标大小！

• 轻松修改画板（图标）尺寸 - 画板只是对象。

• 将设计元素缩放并移动到画板的水平和垂直中心。

• 您可以随时重新排序或重新定位您的画板。

• 每个画板都可以独立标记，以便于识别图标。

您可以创建初始画板并在文档设置中设置其尺寸，然后将其复制所需的图标画板数量。

网格设置

很简单！当您正在处理画板尺寸与图标尺寸时，您无需考虑设置固定间距或向网格添加安全区域。只需利用默认的自动网格，该网格可以使用当前缩放级别动态显示网格分区，例如，当缩放到选定的画板时。

将设计对齐到网格

这里至关重要。除非您想要准确设计网格，否则设置网格没什么意义。为此，请打开捕捉功能并确保相关的“ 捕捉到网格”和“ 强制像素对齐”设置处于选中状态。在这样做时，绘制曲线或形状时的任何起点和终点都将被锁定为半点或整点值; 在编辑时重新定位它们时也是如此。这对于获得清晰的图标以及在调整大小时避免出现模糊的亚像素图标元素至关重要。

所以半点等于输出半像素？不对！如果你在144DPI使用0.5点= 1像素的原则，那么你将在导出的@ 2x Retina图形中始终为“整像素”。

如果你使用“点”作为度量单位，并且设置144DPI和强制像素对齐，你每次都会创建整像素的高分辨率图标！

多个画板设置

因为画板是对象，只需将画板复制出您想要设计的图标数量即可。所有其他画板都采用与您的第一个画板相同的尺寸，度量单位，DPI和网格设置。命名每个画板（以及图标）以便于识别，也是一个很酷的功能。

提示： 使用“平均分布”选项将画板均匀地分布在您的粘贴板上，确保画板本身也定位在整点上（这是一种很好的做法）。

开始设计！

好的，你已经设置好了。如果设置正确，“ 变换”面板将仅以半点或整点值显示图标设计尺寸。如果您不相信我，请在设计时检查W和H值！

在设计时，您还可以利用任何Pixel Preview功能，这样您就可以直观地了解每个图标设计的外观，而无需导出资产。如果您愿意，您可以在设计时保持Retina预览模式。

并排'vector - retina'像素预览，显示半点、位置和选定的对象宽度

设计完成后，画板就可以导出了。

将画板导出为切片

通过努力设计完成后，将图标作为切片导出为Retina（@ 2x）尺寸将非常简单。可以同时从每个画板创建Retina图像 - 全部为80像素宽度（2x40pt），每个文件都可以使用画板名称。

关于Affinity Designer的一句话......

在Serif，我们在UI设计方面考虑了很多用户体验。因此，Affinity Designer在文档创建面板提供了一个非常适合UI设计的设备类别。简单的网格和捕捉设置就是生成精确和清晰图标所需要的。

识别图中二维码关注公众号并留言
咨询更多课程信息