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

預(yù)覽地址：https://85dtn5.axshare.com

一、簡單實現(xiàn)左滑刪除

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

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

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

選中組合后，鼠標(biāo)右擊，選中右鍵菜單列表的最后一個選項【轉(zhuǎn)換為動態(tài)面板】，使該組合變成一個動態(tài)面板；

做了8年产品经理后，我是这么看产品经理的

我个人是从非常初级的产品经理做起，再到负责一个大产品的项目管理，现在有幸跳出了日常基础的工作更多的去看产品的PMF，product strategy...

查看详情 >

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

準(zhǔn)備工作已經(jīng)完成了，那么接下來進(jìn)行交互制作。

二、簡單左滑的交互制作

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

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

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

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

三、“一步之差”

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

看明白了這個細(xì)節(jié)，那我們繼續(xù)升級效果。

四、左滑刪除的進(jìn)階

要實現(xiàn)抽屜式的效果，那必然就要將之前的排列樣式以及交互進(jìn)行調(diào)整：

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

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

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

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

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

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