很多電商、知識(shí)付費(fèi)、運(yùn)動(dòng)類產(chǎn)品的首頁位置都會(huì)通過輪播圖的方式來展示重點(diǎn)推薦的內(nèi)容，方便用戶最快觸達(dá)信息，對(duì)產(chǎn)品數(shù)據(jù)增長起到重要作用，接下來講解下如何使用Axure呈現(xiàn)該原型。

先看效果：

我們先對(duì)整個(gè)流程進(jìn)行思路梳理：

1

拖入一個(gè)動(dòng)態(tài)面板部件，并命名為“background”。

雙擊動(dòng)態(tài)面板，增加兩個(gè)狀態(tài)，并分別命名“圖1” “圖2” “圖3”。

拖入一個(gè)矩形元件，調(diào)整尺寸為W：10 H：2?，命名為“block1”，并復(fù)制兩個(gè)，分別命名為“block2” “block3”，并設(shè)置交互樣式為選中時(shí)“填充顏色”為白色。

此處要注意要將三個(gè)矩形同時(shí)選中并設(shè)置“選項(xiàng)組名稱”，選項(xiàng)組的作用是，同一個(gè)選項(xiàng)組部件，當(dāng)其中一個(gè)部件被選中時(shí)，其它部件會(huì)自動(dòng)取消選中狀態(tài)。

分別進(jìn)入動(dòng)態(tài)面板background里的三個(gè)狀態(tài)，在每個(gè)狀態(tài)中拖入一個(gè)占位符并放入指定位置，占位符中標(biāo)記好相應(yīng)的圖片1，圖片2，圖片3。

在這里我用的是“占位符”，在實(shí)際制作中可以直接拖入圖片元件就行。

以上是準(zhǔn)備工作部分，圖中的帶殼手機(jī)外框是另外準(zhǔn)備的元件庫，有需要的可以在我公眾號(hào)獲取。

2

第二部分對(duì)準(zhǔn)備好的部件添加交互用例。

為“background”動(dòng)態(tài)面板添加「狀態(tài)改變時(shí)」用例，首先需要添加一個(gè)條件判斷。

當(dāng)動(dòng)態(tài)面板的狀態(tài)為「圖1」時(shí)，設(shè)置選中狀態(tài)為「block1」。

和“圖1”狀態(tài)一樣，再添加2個(gè)條件判斷后選中的狀態(tài)，如圖：

為“background”狀態(tài)面版添加「載入時(shí)」用例，添加第一個(gè)動(dòng)作為「選中時(shí)」選擇「block1」；添加第二個(gè)動(dòng)作「設(shè)置面板狀態(tài)」，選擇狀態(tài)「Next」并勾選“向后循環(huán)”“循環(huán)間隔”，設(shè)置動(dòng)畫模式，調(diào)整秒數(shù)。（秒數(shù)可按不同情況配置）

到此，就能實(shí)現(xiàn)文章開頭第一個(gè)動(dòng)畫中的自動(dòng)輪播效果，但還不能實(shí)現(xiàn)手勢(shì)拖拽的效果。

3

接下來我們制作手勢(shì)拖動(dòng)時(shí)的交互效果。

分別進(jìn)入動(dòng)態(tài)面板“background”下的三個(gè)狀態(tài)，并把狀態(tài)內(nèi)的所有內(nèi)容全選后右鍵“轉(zhuǎn)化為動(dòng)態(tài)面板”，將新轉(zhuǎn)化到的動(dòng)態(tài)面板分別命名為“drag1”“dara2”“drag3”。

分別為三個(gè)動(dòng)態(tài)面板添加拖動(dòng)時(shí)的用例動(dòng)作，具體如下圖：

以上就是所有的步驟，最終效果就是文章開頭中所示的樣子，在這個(gè)過程中，有三個(gè)技巧點(diǎn)，一個(gè)是狀態(tài)面板的循環(huán)效果，二是對(duì)應(yīng)不同狀態(tài)，動(dòng)態(tài)面板可以與部件進(jìn)行聯(lián)動(dòng)，三是對(duì)于動(dòng)態(tài)面板內(nèi)部的狀態(tài)可以再次轉(zhuǎn)化成動(dòng)態(tài)面板，用作拖拽手勢(shì)的連接件。

希望大家能夠多次嘗試練習(xí)，理解其中的關(guān)鍵點(diǎn)，也希望大家能夠養(yǎng)成一種習(xí)慣，在進(jìn)行練習(xí)前對(duì)任務(wù)流程進(jìn)行思路梳理，這樣對(duì)理解邏輯更有幫助，有任何問題歡迎來留言。

作者：杰森，微信公眾號(hào)：十八般產(chǎn)品

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

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