是否經常被開發說原型設計的不夠精細、又或者經常聽到有人說自己的產品交互不好呢？本文將通過一個簡單左滑刪除交互，讓你了解與好的交互體驗的一步差距。

預覽地址：https://85dtn5.axshare.com

一、簡單實現左滑刪除

先制作一個375*72的矩形A；

在矩形A的右側，再制作3個85*72的矩形1、矩形2矩形3，分別設置為藍色、橙色、紅色（如圖）；

將這4個矩形居中對齊后，全選然后按【Ctrl+G】進行組合；

選中組合后，鼠標右擊，選中右鍵菜單列表的最后一個選項【轉換為動態面板】，使該組合變成一個動態面板；

選中動態面板，設置大小為375*72；這樣我們就可以把矩形1、矩形2、矩形3隱藏在我們的視野中了（如圖）；

準備工作已經完成了，那么接下來進行交互制作。

二、簡單左滑的交互制作

我們要模擬的是手指滑動的滑動的效果，根據這點，我們選擇動態面板，并在交互中選擇【拖動時】的交互；

• 拖動時，我們需要向左移動組合，那么我們只需要設置組合跟隨水平移動的方向即可；這樣我們便實現了拖動時，移動組合的效果。
• 你會發現經常把組合移除了可見視野內（附上一個GIF）。我們需要給組合的移動范圍進行限制，左側小于等于0，右側大于等于這樣我們就能把水平的移動范圍限制在可視的范圍內。

這樣我們就算是完成了左滑刪除的效果。

但你在拖動體驗幾次看下，這個和我們平時使用iOS手機時所感受到的左滑效果一樣嗎？

三、“一步之差”

細心的朋友，你是否發現了端倪呢？沒錯，我們可以看到在左滑時，三個左滑菜單項的色塊是同步出現的，整塊的效果是抽屜式的，一層疊著一層出現。

看明白了這個細節，那我們繼續升級效果。

四、左滑刪除的進階

要實現抽屜式的效果，那必然就要將之前的排列樣式以及交互進行調整：

選中組合1，按【Ctrl+Shift+G】取消組合，選中矩形A和矩形1（藍色）進行組合，并命名為組合2；選中動態面板，將拖動效果的目標改為組合2，將右側邊界改為205（如圖）；這樣我們就先得到了一個拖動后，可以移動組合2的動態面板，接下來就是要移動矩形2（橙色）和矩形3（紅色）。

選中藍色矩形，添加移動時的交互效果，移動矩形2（橙色）和矩形3（紅色），通過上方的gif圖，我們可以了解到矩形1、矩形2、矩形3的移動速度比為 3:2:1 ，所以整體的函數設置如下：

移動矩形2時，x的函數為 [[375-(375-This.x)/3*2]] ，y的函數為 [[This.y]] ；

移動矩形3時，x的函數為 [[375-(375-This.x)/3]] ，y的函數為[[This.y]] ；

到此，iOS左滑刪除的交互效果就算是大功告成了。

第一次編輯，如果有描述不清楚的地方，歡迎各位大佬點評。如果有想了解文中的函數和邊界如何設置，又或者想要其他的交互效果，也可以在文章下方留言。