ProtoPie 是一款所见即所得（WYSIWYG）工具，使用图形用户界面（GUI），用户可以轻松且直观地访问所有功能。因此，设计出合适的图标并非易事。
组合图
从上图中你可以看到 Trigger 和 Response Piece 的图标。今天，我想聊聊我们创建手势图标集的过程。用 2D 形式表达手势并不容易，而且我们始终希望图标还能更好，因此这也是一个让 Pie 爱好者向我们提供宝贵反馈的机会。
为什么我们需要手势图标？
仅有文本标签的 Interaction Piece 很难被直观理解。
仅仅写出 Trigger 和 Response 的名称，不足以清晰传达发生了什么，因此需要图标。另外，由于每个 Piece 的名称都可以修改，我们也需要一种方式展示 Piece 的原始属性。此外，图标集对于传达 ProtoPie 的核心概念也很有帮助——即通过一组 Trigger 和 Response 来创建交互（Interactions）。
理解限制条件
大多数手势图标都使用手指隐喻，这类图标很容易理解。然而在 ProtoPie 中，空间有限，而且我们还计划添加更多 Trigger 和 Response。因此，我们需要保持一致性，并以更简洁的方式表达手势。除此之外，还有一些其他限制。
创建 Interaction 图标时需要牢记的一些约束。
图标必须为 14px × 14px 或更小。
相似手势在视觉上可以分组，而不同手势必须清晰区分。
一个图标不能包含三种或以上隐喻。
图标必须使用单色。
手势分类
展示我们如何思考 Trigger 分类的一张图
在创建图标之前，我们决定根据属性对 Trigger 和 Response 进行分类，并依据一定规则进行排列。我们的理由是：如果 Trigger 和 Response 在列表菜单中以统一方式排列，用户就能基于上下文更容易理解 Trigger，也能更快找到想要的 Trigger 和 Response，并更高效地创建 Interactions。
换句话说，像 Tap 或 Move 这类常见交互可能问题不大，但对于 ProtoPie 引入的新型交互（如 Chain 或 Range），或在其他地方可能以不同名称出现的交互（如 Fling，也称 Flick），仅有文本标签可能并不足够。
基于这一思路，我们创建了四类 Trigger。
Trigger 分类
图标的视觉风格需要与 ProtoPie 其他区域中的图标保持一致。ProtoPie 优先考虑图标的清晰度和可读性，而非图标美观性，因为这是一个强调生产力的软件，而不是服务型产品。图标尺寸限制也自然决定了最终外观。我们没有使用可能让图标显得可爱的圆角，而是采用了棱角设计。我们使用较细的线条，以避免图标在有限尺寸下显得拥挤。
现在，让我们从视觉角度来看看每个 Trigger 图标的特点。
在图标中展示属性
一次性 Trigger 与连续 Trigger
一次性 Trigger 和连续 Trigger 都由屏幕输入触发。因此我们可以使用共同的触摸动作隐喻。我们用箭头代替手指，其优势之一是可以用箭头表现方向和运动感。屏幕的表现被尽可能简化，图标反映的是一个人面对另一个人用手指触摸屏幕时所看到的样子。
一次性 Trigger 由从 Y 轴视角看到的手指和屏幕来表示。
Tap 是结合 Touch Up 与 Touch Down 的一种 Trigger。
Double Tap
Double Tap 是由两个连续 Tap 组成的 Trigger，因此 Double Tap 图标与 Tap Trigger 图标具有相似性。它的设计也用于传达该 Trigger 的功能。
与触摸相关的 Trigger 图标差异在于是否存在时间或压力差异。
Touch Down、Long Press 和 3D Touch 这三种 Trigger 通过压力或时间来区分。因此，通过屏幕隐喻的差异可以区分不同 Trigger。由此，尽管 3D Touch Trigger 属于 Sensor Trigger，其图标仍被设计得与其他一次性 Trigger 图标相似。
Fling
只有当滑动达到一定速度或距离时，Fling Trigger 才会触发。弧形箭头有助于表达这一前提条件。
连续 Trigger：Drag、Pinch、Rotate
与一次性 Trigger 不同，连续 Trigger 在屏幕被触摸时开始，并会持续运行，直到不再有物理接触。因此，这些图标使用“轨迹”隐喻，展示手指在屏幕上可能留下的路径。不同于一次性 Trigger，连续 Trigger 的图标表达的是一个人从顶部观察动作时看到的样子。
连续 Trigger 图标表示沿 Z 轴方向观察的视图。
条件 Trigger
条件 Trigger 图标
条件 Trigger 会根据属性变化激活次级响应。因此，图标不应表现输入动作，而应展示每个 Trigger 的属性。
Chain Trigger 总是基于属性变化激活次级响应。我们在定义 Chain Trigger 的过程中意识到我们在使用“Mapping（映射）”这一术语。于是我们自然使用了链条隐喻来表示两个属性之间的连接关系。
Range Trigger 也可以像 Chain Trigger 一样根据属性变化作出反应，但两者的一个区别是：Range Trigger 会在数值进入预定义范围时激活 Response。我们在图标中采用了垂直相交线来表示属性面板中的位置设置。因此，我们为该 Trigger 图标使用了垂直线隐喻。
传感器 Trigger
传感器 Trigger 图标
Sensor Trigger 的图标用于展示移动设备中使用了哪些传感器。ProtoPie 目前支持 4 种传感器。
Tilt Trigger 用于检测设备在 X 轴或 Y 轴上的倾斜程度。倾斜一直是特别难以表达的手势，在 Google 上搜索会发现很多图标把移动设备绘制为沿 Z 轴旋转，这很容易产生误导，让人误以为表达的是 Z 轴旋转。因此，正确的方式是用能体现透视关系的设备表现形式。
Compass Trigger 使用移动设备的罗盘传感器来确定设备相对于绝对北方的角度，因此采用罗盘图标。
Sound Trigger 用于测量设备周围声音的响度，因此使用麦克风隐喻。
Response
其他程序中的 Response 图标
在设计 Response 图标时，我们认为相比遵循统一规则，更重要的是突出每个 Response 的特性。大多数 Response 都使用绘图工具中常见的隐喻，因此我们确保其通用性。
Response 图标集
Response 的列表顺序有一套标准。排列时考虑了使用频率：Move、Scale、Rotate 和 3D Rotate 置于最前，因为它们都涉及图层坐标的变化。其后是 Opacity、Color 和 Radius，这些 Response 用于修改图层的视觉特性。
完整图标集
ProtoPie 手势图标集
通过恰当的隐喻和统一的设计语言，图标可以打磨产品。图标在屏幕上占用空间不大，却能显著影响生产效率和使用体验。这就是我们始终检查并优化 ProtoPie 所用图标的原因。
这些完成的图标目前也在 ProtoPie Studio 之外的其他场景中使用。该图标集曾被用于制作图案，并印在 ProtoPie 发布活动的邀请函上。此外，这些图标也会出现在教程中，以帮助用户理解概念。
我们分享 SVG 文件和图标字体，希望能帮助其他有兴趣表达手势交互的设计师。
