本文作者將教大家如何使用axure8.0制作電子相冊原型，enjoy~

電子相冊，多用于個人空間相冊，它以循環輪播的方式對相片進行展示。它的展示方式主要是將當前的相片最大最清晰地放在最頂層，然后其他相片則逐層變小變模糊，在用戶點擊下一張時，這些相片可以循環進行輪播。目前在網絡上似乎還沒看見有人做出這種電子相冊的原型，這里就教大家如何使用axure8.0制作電子相冊原型，如下是其效果圖：

第一步：拖拉擺放好相關控件

1、5張相片：這5張相片分別命名為“圖片1”、“圖片2”、“圖片3”、“圖片4”和“圖片5”，大小分別為240X320、222X296、204X272、204X272和222X296，不透明度分別為100%、60%、20%、20%和60%，層次擺放分別為“圖片1”>“圖片2”>“圖片3”>“圖片5”>“圖片4”，從左到右5張相片的中心點等距相差100，每張相片的初始狀態均設置為禁用。

2、1個矩形：白底黑框，169X45，命名為“下一張”。

第二步：為頁面添加頁面載入時用例

為頁面載入時添加5個全局變量，并設置初始值，picture1=0，picture2=1，picture3=1，picture4=0，picture5=0。

第三步：為“下一張”添加鼠標單擊時用例

在鼠標單擊“下一張”時，觸發5張相片的鼠標單擊時用例。

第四步：為“圖片1”~“圖片5”各自添加鼠標單擊時用例

“圖片1”在鼠標單擊時有5個用例，分別如下設置：

用例1

條件：如果當前元件的寬度為204，全局變量picture1為1；

動作1：相對移動“圖片1”，x軸為-400，y軸為0，動畫為線性，時間為500毫秒；

動作2：設置全局變量picture1為0。

用例2

條件：如果當前元件的寬度為204，全局變量picture1為0；

動作1：相對移動“圖片1”，x軸為100，y軸為0，動畫為線性，時間為500毫秒；

動作2：設置“圖片1”的尺寸寬度為【當前元件寬度+18】，高度為【當前元件高度+24】，錨點為中心，動畫為線性，線性為500毫秒；

動作3：設置“圖片1”的不透明度為60%，動畫為線性，線性為500毫秒。

用例3

條件：如果當前元件的寬度為222，全局變量picture1為0；

動作1：相對移動“圖片1”，x軸為100，y軸為0，動畫為線性，時間為500毫秒；

動作2：設置“圖片1”的尺寸寬度為【當前元件寬度+18】，高度為【當前元件高度+24】，錨點為中心，動畫為線性，線性為500毫秒；

動作3：將“圖片1”置于頂端；

動作4：設置“圖片1”的不透明度為100%，動畫為線性，線性為500毫秒。

用例4

條件：如果當前元件的寬度為240，全局變量picture1為0；

動作1：相對移動“圖片1”，x軸為100，y軸為0，動畫為線性，時間為500毫秒；

動作2：設置“圖片1”的尺寸寬度為【當前元件寬度-18】，高度為【當前元件高度-24】，錨點為中心，動畫為線性，線性為500毫秒；

動作3：設置“圖片1”的不透明度為60%，動畫為線性，線性為500毫秒；

動作4：設置全局變量picture1為1。

用例5

條件：其他

動作1：相對移動“圖片1”，x軸為100，y軸為0，動畫為線性，時間為500毫秒；

動作2：設置“圖片1”的尺寸寬度為【當前元件寬度-18】，高度為【當前元件高度-24】，錨點為中心，動畫為線性，線性為500毫秒；

動作3：設置“圖片1”的不透明度為20%，動畫為線性，線性為500毫秒；

這里只教大家如何設置“圖片1”的鼠標單擊時用例，其他4張相片的交互設置類似，只是一些參數不同罷了，具體請查看原型rp文件的設置。

設置好5張相片的交互后，點擊預覽并選擇“下一張”就可以看到電子相冊的輪播效果了。

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

題圖來自 Pexels，基于 CC0 協議