最近，Flinto团队采访了我设计Flinto用户界面图标的过程。

    您如何向Flinto的Mac版贡献自己的设计？

    在发布Flinto的新Mac版本之前，我还参与了用户界面部分的设计工作，这是他数月前的事。但由于Flinto是一种特殊的工具，我们对每一部分的用户体验越深，我们就会觉得Flinto需要大量的定制icons。例如，Flinto应用程序列表(List)、工具栏(Toolbar)、动画设计面板(TransitionDesigner)、“下拉”(Gesturesdropdown)都需要一个单独的图标集。因此，如何快速设计图标成为我的首要工作。

    在为大型应用程序设计图标和菜单时，您会采取什么设计策略？

    设计永远是环境驱动的。令我惊讶的是，专业Mac应用的情景设计是最复杂的工作之一，即使只是设计图标。工具栏(工具栏)的图标大小必须一致，并且最好地了解其用途。这种方式和侧边栏的图标和下拉菜单所看到的图标的设计原则是不同的。有些图标将在不同的地方以不同的大小和不同的风格出现。并非只需调整图标大小或样式就可以应用于每个用户界面，因此在设计图标时需要考虑图标是否具有通用性，并且不会破坏用户界面的整体一致性。

    从纸上开始设计图标，我始终坚信这一原则。我会在纸上绘制出我想像的这个图标，比如这个图标包含了什么样的隐喻，以及该图标需要/产生什么变化。因此在这一阶段的概念设计中，我试着让自己在纸上写下所有的东西，甚至是一些无关的想法。接下来的步骤是分析概念设计中的内容如何能更好地与我们设计的目标、现有的局限性和与情景关联的关系。

    我觉得把构思绘图和评价这两个过程分开来做是至关重要的。前一种工作需要想象力、好奇心，更持有自己的主观判断，是一种附加过程，是一种突发性创造。评价需要批判性、实用性、以及需要考虑到图标背后的一系列隐喻，这是一个做减法的过程。假如你试着同时做这两件事，你就会考虑不过来而得不到结果。

    近来，我也在网上授课，讲述了我认为最重要的设计原理。它也包括我对自己的想法和草稿的评价。

    一般来说，设计方案中只有一部分会被保留在计算机中。用sketch来提高我的生产力，并且在生产过程中会有一些创造性的决策。但是主要目的还是要完善图标的形式，保证每个图标都是完美的象素。对于那些忽略了这一点的人，我表现出了极大的热情。

    能给我们更多的解释什么是“像素的完美”以及如何实现？

    象素完美实际上有许多意义，它更像一个概念，而非能被详细描述的特性。就像“注意细节”一样，当被忽视时，我们就能轻易感受到它。最佳像素对小图标的可辨性有很大的影响。要达到像素的完美不只是将像素网格对齐(如图)。本质上说，就是与锯齿作斗争。虽然使用抗锯齿效果不错，但是它会使图片有些地方变得模糊，特别是在对角和曲线中。

    举例来说，我们想要在图层列表中添加一些注释，以显示哪些图层被隐藏或锁定。把隐藏和锁定加在图层上是很容易的事，只需点击按钮来操作。这里考虑的是我们有一个很小的注释，它会占据一小部分的空间来注释已经隐藏并锁定图标。要达到这个目标，我们的图标必须达到像素的完美。对于自己设计的8×8大小的图标，我感到非常自豪。

    对使用retina显示的读者，我们会显示“一半尺寸”的位图，比如图1x的全像素图标。为非retina显示的读者使用“双倍尺寸”位图，如图2x的全像素图标。请在横向模式下显示上图以获得最佳显示效果。理想情况下，一个精心制作的矢量图标可以很容易地适应不同的像素密度输出，并且在所有相应的尺寸上都很好的显示。但在大多数情况下，使用双倍大小的图标并不能获得更大的图标。首先，您可能需要制作一个完美的两倍大小的图标，然后将其重新调整到双倍，以创建一个新的视觉效果。Flinto中至少一半的图标都有相应的1倍和2倍的大小，例如“概念图层”图标贯穿整个动画设计面板。

    对于这篇感兴趣的读者，下面是我如何调整Flinto图标的抗锯齿的技术细节。

    对图形进行重新调整和重新定位，以使其看起来更舒适，虽然位置或像素值在这种处理之后会有小数点，但是在这阶段视觉是关键。

    如果仅使用曲线或圆角，就可以使用至少2px来绘制一个90°角的半径圆，或者用3px渲染一个半径圆，以180°角的半径圆(如下图)。对于1pt大、线段的圆角帽状的效果很差，至少我们用的屏幕会把它放大三倍来显示。

    谁也不想要模糊的线帽！只有三倍尺寸(或更大)的显示器能在1pt大小的线条上呈现清晰的圆角帽状。

    为使线条的粗细更加一致，调整边框宽度/粗细达到稍宽或稍厚都比使用1pt的细曲线或斜线更好。

    删除了不必要的模糊像素。当你需要用图形自身进行标记时，这将非常有用。

    将图形的粗细调整为(相同方向)，复制图形或边框。

    同样也可以，如果图标上有一点模糊的锯齿，对图标的其他部分都有一定的帮助。

    另外，也有一些关于平滑抗锯齿的技巧，但我所说的是我从中受益最大的。

    怎样才能创造一个好的图标？

    那有问题！特别是当图标包含了许多设计原则时。在我的图标设计课程中，我讲述了我在Flinto工作中所遇到的一些故事，来描述我是如何打造出一个好图标的。

    这条原则之一是使用熟悉的符号，并使其显眼。在开始设计Flinto主页面的画布图标时，内森有了一个主意，我们可以设计一个让我们想起艾西勒家的图标。建筑师Eseller设计了中古时代建筑的住宅，这种风格的住宅在加州非常受欢迎。

    埃西勒这幢中世纪的现代建筑为我们提供了一种灵感，来探索设计独特的“家庭”图标。我觉得这个点子很酷，而内森也买了一套房子，这样我们就会对这个创意很有兴趣。我为home做了大量的概念设计，试图提取出艾西勒住宅的特色，放到一个16*16方块的图标里，并且在图标上没有任何颜色和透明的效果。我们发现这些看起来聪明的图标本身并不能很好地显示图标本身，而且作为一个home图标也不够明显。所以我们决定做出一个直观且能表现艾西勒住宅不对称特征，并能识别其他用户的图标。

    直观性更强，我们选择底部的中间图标作为home键。另一个评价一个好图标的原则是：他能否和周围的元素和谐相处。其中包括图标周围的用户界面、与文字大小、操作系统的习惯、cmd+s是macos下的cmd+s,win下是ctrl+s，以及其他图标的集合。

    因此，虽然home图标基本上是独立的，但工具图标、手势图标和排版图标都被收集起来。收集图标的挑战是非常大的。当设计了一组图标的一半时，你会发现你所使用的视觉隐喻并不能适应这个集合中所需要的图标，这意味着你需要重新设计它。

    这通常发生在手势图标上(上图是200%的比例显示)，现在这些图标看起来非常简单直观，然而我们在设计他的时候还有很多限制条件，并且要考虑将来的兼容性。在这里展示的一些图标还没有在Flinto中出现，但是最重要的一点是，当我们需要时，我们设计的图标可以扩展并容纳它们。