中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

這個原型實現了任何你能想到的輪播交互，enjoy~

一、前期準備

APP端的輪播效果，適合于banner的展示，在實戰中有很多的用處。首先我們應該想一想，輪播樣式在界面上都應該有什么，無非是兩點，一是banner，二是輪播的dot。第一步我們就應該在Axure中搭出來banner和dot的樣式。這里我設置的是三個banner的輪播樣式。對于banner和輪播用的dot而言，牽扯到不同的狀態之間的切換，這里我們用到的是動態面板，動態面板可以有多種不同的狀態，通過添加交互用例實現面板之間的切換。

針對banner和輪播點，我們分別建立動態面板，并命名為“banner”和“dot”，方便之后的操作。Banner面板里面建立三個狀態，命名為“1”“2”“3”，每個狀態里面放一張需要展示的banner。

這里需要注意的兩點細節：

1. 三個狀態的banner尺寸必須相同；
2. 三張圖片最好都加上淺色的邊框，這樣做的原因一是美觀，二是防止你的banner底色和界面底色重合，不能很好的分清兩者之間的邊界，這里我的邊框顏色選用的是#F2F2F2。

同樣的，dot也建立三個狀態，命名為“1”“2”“3”，每個狀態對應的是不同的banner，紅點表示的是當前的狀態被選中，灰點表示的是當前狀態未選中。

這里的紅色我沒有選擇#FF0000這個最紅的顏色，而是選擇了弱一點的#DD0000，顏色上要好看一些，同樣的，灰點選的顏色依然是淺灰#F2F2F2。

具體樣式如下圖所示：

搭好了架子之后，我們這里要思考一下輪播會有哪些交互?，F網中的常見輪播交互，我進行了一個列舉：

1. 常規狀態下的循環滾動。
2. 手指往左往右滑動的樣式改變。
3. 手指點擊dot之后的樣式改變（這個交互由于dot現在做的越來越小，已經不是很常見了）。

三點之間由簡入繁，接下來，我們就依次的實現這三種交互。

二、常規狀態下的循環滾動

這個交互在現網中的原型教學中比比皆是，但對于初學者來說，只是知其然不知其所以然，很多細節沒有注意到，不能舉一反三。具體的操作步驟，我們可以先想一下APP端輪播的效果，都是載入頁面之后，banner就會開始輪播，所以我們在“頁面載入時”這塊加一個交互用例，選擇設置面板狀態，對dot和banner分別進行設置。對于banner和dot面板，都要在狀態選擇里面勾選“next”，next表示針對面板當前的狀態的下一個狀態。并且勾選下面的向后循環，向后循環的意思是：如果當前面板是最后一個狀態，next會跳到面板的第一個狀態。有些同學會誤認為向后循環勾選了，面板就會一直輪播下去，其實不然。要想讓面板輪播，還需勾選上“循環間隔”，這樣才能保證面板的循環輪播。

接下來就是細節上的優化，通常的輪播，banner會有一個從左到右的一個路徑，而dot的交互樣式是紅點逐漸的變為灰色，灰點逐漸的變為紅色。所以針對banner和dot有不同的動畫效果，banner選擇“向左滑動”，dot選擇“逐漸”。完成之后點擊保存，運行一下我們會發現，剛進入頁面的時候面板就已經開始輪播，第一個狀態我們都沒來得及看就變成第二個了，這時我們應該在“頁面載入時”加一個等待一秒鐘的交互，再運行一遍效果就好了很多。

具體的操作如上圖所示，用Axure實現APP端的輪播，就完成了。

三、手指往左往右滑動的樣式改變

這是APP端最常見的交互，這樣的交互需求，來自于這樣的一個場景。用戶還沒有看清楚之前的一個banner展示的具體細節，就因為時間的關系換到下一個banner了，用戶想翻回去看之前的一個banner，于是就出現了手指左滑右滑的交互。

對于面板的左右滑動，Axure里面給出了“向左拖動結束時”和“向右拖動結束時”的交互案例，向左相當于滑到下一個banner，向右相當于滑到上一個banner，理清了這個，我們就可以添加交互了，在“向左拖動結束時”，選中設置面板狀態，分別勾選banner和dot，因為是要展示下一個banner，選擇狀態中，選“next”，并勾選“向后循環”。這里，由于是滑動到下一個banner，所以不需要勾選“循環間隔”。向右滑動也是同理，唯一的區別是向右滑動是滑到上一個banner，所以選擇狀態，要選“previous”。具體的操作如下圖所示：

面板的動畫效果和剛才的輪播相同，banner選擇向左滑動/向右滑動，dot選擇逐漸。完成之后保存，手指左右滑動的效果就實現了。

四、手指點擊dot之后的樣式改變

這個需求出現的原因和手指滑動的類似，如果banner很多的話（超過了五個），手指左右滑動找某一個banner就顯得很低效，點擊dot會直接轉到指定的banner。

具體的做法就是對dot面板里面的不同狀態進行交互案例的添加。Dot面板里面有三個狀態，每一個的樣式對應著不同的banner，拿第一個banner對應的dot來說，我們對dot里面的三個點分別增加交互案例。我們選中第二個點（表示要跳轉到第二個banner），鼠標單擊時添加交互案例，選擇設置面板狀態，分別勾選banner和dot面板增加交互，由于是1跳到2，我們在選擇狀態時，選擇“2”，然后分別為banner和dot設置動畫效果，又由于1跳到2是下一個banner，所以banner動畫效果是向左滑動。具體的操作如下圖所示：

同理我們設置3的鼠標單擊時的交互效果，對于1的狀態下點擊1本身，我們這里給了一個等待的交互效果。狀態1的交互設置好了，我們再照葫蘆畫瓢，設置狀態2和狀態3的交互。

這里需要注意的一個細節就是，2跳到1，是上一個banner，動畫效果要選擇向右滑動，2跳到3，是下一個banner，動畫效果選擇向左滑動，狀態3的動畫效果交互以此類推。

這樣設置完成之后，我們運行一下，發現點擊dot的點之后，可以成功的完成banner的切換，但是隨后就沒有靜止下來沒有輪播了。出現這個現象的原因是，我們是在動態面板里面添加的操作，并沒有像banner面板那樣在首頁，對動態面板整體添加交互案例。這樣會導致首頁沒有變動，只是dot動態面板內部的改變，首頁的變動才會觸發我們在“頁面加載時”的交互案例設置（進行輪播），動態面板內部的變動會使進程停留在動態面板，而忽視了“頁面加載時”的交互案例設置，所以banner就不會在輪播了。

想要讓banner繼續輪播，我們的辦法也很簡單，在dot面板內部的交互中再加上一條，繼續輪播即可，如下圖中藍框所示（圖中紅框是之前的操作）。

點擊完成之后運行，點完dot的點之后，也可以實現輪播了，這樣一來，手指點擊dot的交互樣式也實現了。

資源共享：

Axshare：http://rjsu3g.axshare.com

網盤鏈接: https://pan.baidu.com/s/1qYlzebU 密碼: uf4m

作者：Mitsuizq，微信公眾號：Mitsuizq

本文由 @Mitsuizq 原創發布于人人都是產品經理。未經許可，禁止轉載。

題圖來自 Pixabay，基于 CC0 協議