本文主要講的是關(guān)于手機(jī)屏幕上的滑動在原型設(shè)計中是如何實現(xiàn)的，一起來文中看看~

我們使用手機(jī)時經(jīng)常看小說，逛商城需要大量的滑屏。左右（滑過來，滑過去），上下（滑上去，滑下來），滑的不行不行的，有木有？但是在原型設(shè)計中是如何實現(xiàn)呢？

反正這個問題也困擾我一段時間了，就是不好實現(xiàn)，也得虧我沒有放棄，查看了很多資料，慢慢琢磨出了一點門道，分享給大家，先預(yù)覽一下再看下面的詳細(xì)過程。

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

一、分析

主要實現(xiàn)以下功能：

1. 上下拖動回彈效果；
2. 上下拖動沒有回彈效果；
3. 左右拖動。

我們先來看看1、2如何實現(xiàn)，后面再看3。

二、元件準(zhǔn)備（1、2需要的元件一樣）

從元件庫中拖一個動態(tài)面板命名為“fisrst”高“400”雙擊“state1”再拖一個動態(tài)面板命名為“second”，高“550”（second要高于first，要不然無法拖動）。

三、交互

（1）上下拖動有回彈

給“second”添加“拖動時”用例，垂直拖動“second”等待200毫秒顯示刷新。

這時按F5預(yù)覽，我們上下拖動圖片發(fā)現(xiàn)會一直拖出屏幕，沒有出現(xiàn)我們需要的彈彈彈~

我們返回“second”添加“拖動結(jié)束時”用例1，我們先添加條件，我們需要判斷“second”有沒有發(fā)生拖動，如果“second”y軸坐標(biāo)>0（y軸相對移動）說明發(fā)生拖動，并且是向下拖動。

如果“second”向下拖動，我們需要讓“second”回到原來的位置。這里我們添加了有個刷新的動態(tài)效果，所以先讓“second”移動到（0，40）的位置，讓動態(tài)效果出現(xiàn)，等待1000毫秒，移動“second”到（0,0），讓“second”回到原來的位置。

為“second”添加“拖動結(jié)束時”用例2，我們添加條件，我們需要判斷“second”有沒有發(fā)生拖動，如果“second”y軸坐標(biāo)<-150（y軸相對移動“150”為“fisrst”和“second”高度差）說明發(fā)生拖動，并且是向上拖動。

如果“second”向上拖動，我們需要讓“second”回到（0，-150）的位置，正好是“second”最底下。

（2）上下拖動沒有回彈效果

為“second”添加“拖動時”用例，垂直拖動。添加邊界，頂部《=0（不讓“second”向下拖動），頂部》=（“first”的高減去“second”的高），也就是，頂部向上移動不超過“-150”。

按F5預(yù)覽，功能都實現(xiàn)了，接下來我們完成，（3）左右拖動。

四、元件準(zhǔn)備

只需要從元件庫中拖一個動態(tài)面板命名“move”，雙擊“state1”添加一張圖片，再復(fù)制“state1”，添加4狀態(tài)，換4張不同的圖片。

五、添加交互

給動態(tài)面板添加“向左拖動結(jié)束時”用例1，添加條件，判斷“move”面板狀態(tài)，如果面板狀態(tài)為“state1”，設(shè)置面板“move”為“state2”向左滑動。依次循環(huán)，就能實現(xiàn)向左滑動，向右滑動只要添加“向右拖動結(jié)束時”用例。

源文件下載：鏈接：https://pan.baidu.com/s/1E5ai-YTECuPRaHU_FZ7gBg 密碼：8tci

本文由 @就這樣吧！ 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Pexels，基于 CC0 協(xié)議