撰写很多人都使用 iPhone 手机，也对 iOS 系统的设计称赞不已，但大多数人并不会关注 iOS 系统各个功能的每个交互细节，只是这些细节累积起来会给我们非常好的体验。今天 Axure 实验室将要模拟一下 iOS 系统删除桌面 APP 图标的效果，当然只是大概的模仿，并不能实现每一个交互细节。
国际惯例，先上效果图。
1、原型解析
① 长按任意 APP 图标，激活删除功能（APP 图标开始抖动，左上角出现删除标志）；
② 在删除功能激活状态下，点击任意 APP 图标左上角的删除标志，可将该图标删除；
③ 在删除功能激活状态下，点击任意 APP 图标可关闭激活状态（APP 图标停止抖动，左上角的删除标志消失）。
2、设计思路
（1）APP 图标布局及删除
APP 图标的布局自然会想到使用中继器，而删除则恰好可以使用中继器的删除动作。
（2）APP 图标抖动
关于实现 APP 图标的抖动效果，本来以为 Axure 会有专门的特效，结果没有发现，于是只能自己去添加一些动作来实现。于是分析了 iOS 系统图标抖动的运动过程，发现其运动形式比较复杂，Axure 难以完全实现，但可以模拟出差不多的效果，于是决定使用“旋转”动作，使图标以中心为轴进行左右小幅度的旋转，看起来就是左右摇摆的效果。
3、制作过程
（1）准备 APP 图标图片
自行去找一些 APP 的图标图片就可以了，不过这里我可以给大家提供一个小窍门，可以很方便的找到你需要的 APP 图标图片。
（2）使用中继器进行图标布局
① 引入中继器
在本案例中，因为我使用了4×6=24个 APP 图标，所以引入中继器（命名为“APP ICON”）后，需要给中继器的数据项增加到24行；然后调整中继器的属性，设置水平布局，网格排布，每排项目数4。
② 在中继器的数据项中添加图片
为“Column0”列（我的案例中更名为了“IMG”列）添加 APP 图标图片，把24个图标图片添加在中继器中的每一个行上，选中一行，点击鼠标右键，导入图片。
③ 在中继器中引入图片部件
删除中继器中默认的矩形框，引入图片部件，设置图片部件的尺寸为40×40，圆角半径为10；然后我们再把中继器的行列间距都调整为10（样式-间距），这样可使是的 APP 的每个图标之间都能有10的间距。
（3）使用动态面板实现 APP 图标的两种状态
一种是静止时的状态（图标左上角没有 × 号），一种是可删除时的状态（图标左上角出现 × 号）。
① 将图片转为动态面板
将上一步中中继器中的图片部件转为动态面板，然后为动态面板添加新的状态 state2，将 state1 中的图片复制到 state2 中，为了区分两个图片，我分别给两个图片命名为 IMG1 和 IMG2。
②为图片 IMG2 的左上角加上 × 号图标
这里用一个圆形部件（尺寸为16×16），然后在部件上写上“×”即可，调整圆形部件的位置，并将其置于图片 IMG2 的上层。
（4）添加交互事件
① 显示 APP 图标的事件
为中继器添加“每项加载时”事件，在事件中添加“设置图片”动作，设置 IMG1 和 IMG2 的值等于中继器中 IMG 的值。
这时候你会看到如下的效果：
接下来就是重头戏了，设置 APP 图标上的交互事件。
② 在 IMG1 上添加“鼠标长按时”事件
这一事件是为了实现在 APP 图标上长按鼠标时，可以激活图标的删除功能，也就是使图标开始抖动，并且图标左上角出现 × 号。但是在设置这一事件是，我并没有把所有的动作直接加在“鼠标长按时”这个事件上，至于原因，个人理解是为了更好的管理事件和动作，不会太乱。
在这一步中，我引入了一个文本框部件（命名“num”），并且使用了一个全局变量（命名“state”），而我给“鼠标长按时”设置的动作则是：
第一个动作设置“state”的值为“on”是为了标记一个状态，表示在这个状态时，图标是抖动的并且可删除，这个状态在后面会作为其他动作的判断条件；
第二个动作设置“num”的值为“[[LVAR1+1]]”，是设置文本框上的值+1（其中“LVAR1”是局部变量，代表的是文本框“num”上的值），这一步是后面实现 APP 图标抖动效果的关键。
③ 设置文本框“num”的“文本改变时”事件
其实上面一步就好比是一个开关，而开关开启之后，真正实现动效是当前这一步。在“文本改变”时，我要实现切换 IMG1 和 IMG2 的显示以及图标的抖动。
第一个动作实现了切换图标的显示状态，由最初的只显示一个图标切换为显示左上角带有 × 号的图标；
第二组动作实现了图标的抖动，这里用到的是“旋转”动作，即先顺时针旋转到3°，再逆时针旋转到3°（因为这里用的是绝对位置，所以实际上是逆时针旋转了6°），然后再顺时针旋转到0°，这样就完成了一组完整的旋转及复位动作（连贯起来给人的视觉感受就是在抖动）。
第三个动作是为了在完成这一组动作后，给文本框的值+1，这样会循环触发“文本改变时”事件，最终使得 APP 图标可以一直抖动。
④ 设置图标 × 号的点击事件
点击图标左上角的 × 号可以删除该APP图标，这里通过中继器的“删除行”来实现，此时可以直接把删除动作加在 × 号的“鼠标单击时”事件上，但经过实践后发现这样会存在一个很小的问题（至于什么问题，小伙伴们可以自行去试验一下，这里就不说了），于是最终选择了一种间接的实现方法，类似前面“长按鼠标时”事件，在这个事件上只增加一个动作来标记状态，以作为后面执行动作的判断依据。
这一步又引入了一个新的全局变量（命名为“delete”）
设置全局变量“delete”的值为“y”，也是为了标记一个状态，当在这个状态的时候，可以执行对 APP 图标的删除动作；
标记中继器的行，则是为了在后面执行删除动作时，可以明确知道要删除带有标记的那个数据项。
⑤设置删除图标的事件
前面的步骤表明已经允许删除这个 APP 图标了，而谁来执行删除这个动作呢？这个动作同样放在了文本框“num”上来执行，也就是在“文本改变时”增加新的 Case。
这里有个判断条件是全局变量“delete”的值必须等于“y”，然后执行了删除中继器中“标记”行的动作；
一次删除动作执行完后，将“delete”的值设置为“n”，表示不再进行删除操作，除非下次又有了新的删除指令；
另外执行完删除动作后，还要继续保持剩余图标的抖动效果，所以要继续触发文本框的“文本改变时”事件。
⑥ 点击抖动的图标停止抖动
要停止抖动其实很简单，只需要在文本框的“文本改变时”事件执行“抖动”图标的动作前增加一个判断条件即可，这里我利用了前面的全局变量“state”，当“state”的值为“off”时，不执行“抖动”图标的动作，此时需要改一下之前文本框的“文本改变时”事件 Case1，为其增加一个新的判断条件。
至于什么时候设置全局变量“state”的值为“off”，则是在鼠标单击抖动的 APP 图标时。
（5）补充交互事件
截止到前面的过程，这个案例的基本雏形已经出来了，并且可以实现一次简单的交互过程；但是依然存在很多问题，这些问题可以通过添加一些交互事件、判断条件等去优化，在这里只补充一条。
中继器的“每项加载时”事件，需要进行判断显示图标的 state1 还是 state2，也就是显示默认的图标还是左上角带有 × 号的图标。
4、大鹏总结
原型的制作过程一般都不会是一步到底的，需要反复的去打磨，因此最终得到的一个部件，或者是一个部件上的所有事件、动作，可能是反反复复好几次修正结果，每个判断条件可能是针对的不同的逻辑，每个事件或者动作可能是针对的不同的交互。因此我在分享案例的时候，并没有一股脑的把一个部件上所有的事件介绍完，而是根据我实际制作的思路以及逻辑去写，但限于篇幅问题，我也并没有把我整个反复推敲的过程都写出来，主要是一些核心的内容， 而其他的需要补充的内容则需要结合各位小伙伴自己的思考去完善了。