该Flinto团队最近采访我背后产生的所有对 Flinto 的用户界面图标的设计过程：
您如何为 Mac 的 Flinto 做出贡献？
在发布新的功能强大的 Mac 应用程序之前的几个月中，我与 Flinto 一起工作，并为用户界面和体验的各个部分做出了贡献。但是因为 Flinto 是一种非常专业的工具，所以我们对用户体验的每个部分的思考越多，我们就越意识到该应用程序将需要大量的自定义图标。从 “层列表” 到“工具栏”再到 “过渡设计器” 再到 “手势” 下拉菜单，几乎界面的每个部分都需要使用自己的图标集。这样很快就成为我的主要工作！
当在更大的应用程序内部设计图标或菜单之类的元素时，您的策略是什么？
设计始终受上下文驱动。令人惊讶的是，我发现为专业 Mac 应用程序设计是其中最复杂的环境之一。即使只是图标！工具栏图标必须具有一定的大小，并具有一定的外观。这与侧边栏图标的外观不同，这与您在下拉菜单中找到的图标不同。有些图标会以多种尺寸和样式重新出现在多个位置。在 Flinto 界面的所有部分建立一致性，意味着每个图标都必须特别灵活。没有一种符号能很好地看待一种尺寸或某种风格，但不能适应其他尺寸。
我的图标设计过程开始于纸上。我对此深信不疑。首先从绘制该图标的所有可能可能性开始 - 主题或隐喻将是什么，以及它们可以采取什么变化。在这个概念阶段时，我会提醒自己将所有内容都记录在纸上 - 甚至是似乎无关的随机想法。下一阶段是评估; 根据其适合目标，约束和特定图标的上下文的程度来分析每个概念。
我发现将绘图和概念过程与评估过程分开是必不可少的。前者需要想象力，好奇心和判断力。这是一个加法过程。这是一时的冲动。评估虽然同样重要，但也需要批评，实用主义和考虑一连串含义的时间。这是一个减法过程。如果您尝试同时执行两个操作，那么最终将一无所有。您的笔永远不会碰到纸。
我最近在 CreativeLive 上了一堂关于图标设计的课程，并概述了我认为最重要的图标设计原则。这些就是我用来评估我的想法和草图的东西。
通常只有少数概念进入计算机。当我启动 Sketch 时，就是制作时间。在此过程中仍然会有一些创造性的决定，但是主要目标是优化图标的形式并确保它是像素完美的。我对这两种方法都非常感兴趣，但是当忽略了球拍时，我尤其会引起球拍！
您能否进一步说明像素完美度以及如何实现？
像素完美一词可能意味着很多事情 - 比单个具体特征更理想。就像 “注重细节” 一样，更容易识别何时被忽略！像素的完美度对小图标的可识别性和有效性产生巨大影响。要实现这一目标，通常不仅需要将设计元素与像素网格对齐（以下提示）。基本上，这是与抗锯齿的斗争。抗锯齿是一件很棒的事情，但是它会产生非常模糊的结果，尤其是对角线和曲线。
例如，我们希望在 “层列表” 中包含一些有关何时隐藏或锁定层的指示。我们并不担心它们是易于单击的按钮（尽管它们确实是按钮），而不是因为它们具有占用最小空间的小指示器，特别是因为如果同时隐藏和锁定了一个层，则必须看到两个图标。为了做到这一点，图标必须做到像素完美。我为这些 8x8 小图标的清晰程度感到无比自豪。
为使用视网膜显示屏的读者显示的“半尺寸”位图，以完整像素显示 1x 图标。对于使用非视网膜显示屏的阅读器，显示的是“两倍大小”，以全像素显示 2x 图标。在风景平板电脑或更大的屏幕上观看效果最佳。
在理想的世界中，制作精良的矢量图标可以简单地以各种像素密度导出，并在所有这些比例下看起来都很棒。但是在很多时候，设计 1x 资产的局限性不值得延续到更高的像素密度。您也许可以完美地以 2 倍的比例构建图标，但是需要进行调整以创建体面且清晰的 1 倍资产。Flinto 的 UI 中至少有一半的图标具有唯一的 1x 和 2x 版本，例如过渡设计器中的 “Connect Layers” 图标。
对于任何好奇的人，以下是我用来微调 Flinto 中的图标的抗锯齿功能的一些技术：
- 调整形状和位置的形状以获得更清晰的结果，即使这意味着位置或尺寸使用小数也是如此。这是关于外观，而不是价值。
- 仅当曲线半径的每个 90° 角（请参见下文）或至少 3px 代表 180° 时，才使用曲线或圆角，如直线的圆角末端（如下）所示。再见，圆形的 1pt 线帽 - 至少直到我们都使用 3 倍屏幕为止。
没有人想要模糊的线帽！只有 3x 屏幕（或更高）才能在 1pt 线上绘制可解码的圆形线帽。
- 调整边框宽度 / 厚度，使其比细弯曲或对角线上的宽度稍宽或小于 1pt，以获得更一致的感知厚度。
- 掩盖不需要的模糊像素。如果形状被自身的副本遮盖（形状不变），这甚至会产生效果。
- 复制形状或其边框（相同的位置）以使其稍大一些。
- 确定何时可以使用一点抗锯齿的模糊感，因为图标的更重要的部分会受益。没关系！
还有其他按摩抗锯齿的方法，但是这些是我从中获得最大收益的技术。
是什么使一个伟大的图标？
这是一个充满负担的问题！特别是因为图标在一个小包装中体现了许多设计原则。实际上，我在我的图标设计课程中谈到了该主题，并使用了 Flinto 上的一些故事。
其中之一是关于使用熟悉的符号并且很明显。当我们开始在 Flinto 的 Canvas 中制作主屏幕的图标时，Nathan 想到了我们可以将图标设计得让人联想到 Eichler 的家。埃希勒（Eichler）是一位建筑商，他的 “中世纪现代” 建筑可以在加利福尼亚州的整个社区看到。
艾希勒（Eichler）的世纪中叶现代住宅启发了我们探索不太传统的 “住宅” 图标。
我认为它们很棒，而且 Nathan 实际上是在市场上购买它的，所以我们热情地探索了这个主意。我公司生产吨的主页图标概念，试图提炼出什么独特的埃奇勒成非常小方十岁上下的区域（16×16 理想的），而不依赖于色彩或灰度（透明度）。我们发现，这些更聪明的图标并没有执行更明显的主页图标，而没有执行其核心任务。我们选择了一个仅具有一定表现力的版本，以消除 Eichler 体系结构中的不对称性，同时又保持明显且对用户可识别的版本。
明显胜过聪明，我们选择了底部居中的主页图标。
杰出标志的另一个特征是与周围环境的协调程度。其中包括图标周围的 UI，相邻文本的大小和粗细，操作系统约定以及该集合中的其他图标。
因此，尽管主页图标基本上是单独存在的，但工具栏图标，手势图标和编排图标却存在于一个集合中。设计图标集的难度可能会成倍增加。您将完成一系列符号的设计工作，并意识到您所使用的样式或视觉隐喻并不能容纳所有必需的图标，现在一切都需要改变！🙈
这是通过 “手势” 图标（此处以 200％比例显示）发生的。它们的简单性（现在似乎很明显）源于一长串的约束和未来考虑因素。上面显示的某些图标甚至还没有在应用程序中…… 但是重要的是要知道图标集可以根据需要扩展以容纳它们。
人们在哪里可以了解更多有关这一切的信息？
我喜欢这些图标，因此最近我通过 CreativeLive 开设了有关图标设计的在线课程。它讨论了如何设计出色的图标，在 Sketch 中构建它们，为它们提供 SVG 甚至为它们设置动画。
如果您正在从事类似的项目，请确保查看 Mac 的Apple指南和有关 Mac App 中各种图标的规格。
https://medium.com/flinto-software/designing-the-icons-for-flinto-s-ui-ddd9e5788cce
若有收获，就点个赞吧
0 人点赞
