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

電子相冊(cè)，多用于個(gè)人空間相冊(cè)，它以循環(huán)輪播的方式對(duì)相片進(jìn)行展示。它的展示方式主要是將當(dāng)前的相片最大最清晰地放在最頂層，然后其他相片則逐層變小變模糊，在用戶(hù)點(diǎn)擊下一張時(shí)，這些相片可以循環(huán)進(jìn)行輪播。目前在網(wǎng)絡(luò)上似乎還沒(méi)看見(jiàn)有人做出這種電子相冊(cè)的原型，這里就教大家如何使用axure8.0制作電子相冊(cè)原型，如下是其效果圖：

第一步：拖拉擺放好相關(guān)控件

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

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

第二步：為頁(yè)面添加頁(yè)面載入時(shí)用例

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

第三步：為“下一張”添加鼠標(biāo)單擊時(shí)用例

在鼠標(biāo)單擊“下一張”時(shí)，觸發(fā)5張相片的鼠標(biāo)單擊時(shí)用例。

第四步：為“圖片1”~“圖片5”各自添加鼠標(biāo)單擊時(shí)用例

“圖片1”在鼠標(biāo)單擊時(shí)有5個(gè)用例，分別如下設(shè)置：

用例1

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

動(dòng)作1：相對(duì)移動(dòng)“圖片1”，x軸為-400，y軸為0，動(dòng)畫(huà)為線(xiàn)性，時(shí)間為500毫秒；

動(dòng)作2：設(shè)置全局變量picture1為0。

用例2

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

動(dòng)作1：相對(duì)移動(dòng)“圖片1”，x軸為100，y軸為0，動(dòng)畫(huà)為線(xiàn)性，時(shí)間為500毫秒；

動(dòng)作2：設(shè)置“圖片1”的尺寸寬度為【當(dāng)前元件寬度+18】，高度為【當(dāng)前元件高度+24】，錨點(diǎn)為中心，動(dòng)畫(huà)為線(xiàn)性，線(xiàn)性為500毫秒；

動(dòng)作3：設(shè)置“圖片1”的不透明度為60%，動(dòng)畫(huà)為線(xiàn)性，線(xiàn)性為500毫秒。

用例3

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

動(dòng)作1：相對(duì)移動(dòng)“圖片1”，x軸為100，y軸為0，動(dòng)畫(huà)為線(xiàn)性，時(shí)間為500毫秒；

動(dòng)作2：設(shè)置“圖片1”的尺寸寬度為【當(dāng)前元件寬度+18】，高度為【當(dāng)前元件高度+24】，錨點(diǎn)為中心，動(dòng)畫(huà)為線(xiàn)性，線(xiàn)性為500毫秒；

動(dòng)作3：將“圖片1”置于頂端；

動(dòng)作4：設(shè)置“圖片1”的不透明度為100%，動(dòng)畫(huà)為線(xiàn)性，線(xiàn)性為500毫秒。

用例4

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

動(dòng)作1：相對(duì)移動(dòng)“圖片1”，x軸為100，y軸為0，動(dòng)畫(huà)為線(xiàn)性，時(shí)間為500毫秒；

動(dòng)作2：設(shè)置“圖片1”的尺寸寬度為【當(dāng)前元件寬度-18】，高度為【當(dāng)前元件高度-24】，錨點(diǎn)為中心，動(dòng)畫(huà)為線(xiàn)性，線(xiàn)性為500毫秒；

動(dòng)作3：設(shè)置“圖片1”的不透明度為60%，動(dòng)畫(huà)為線(xiàn)性，線(xiàn)性為500毫秒；

動(dòng)作4：設(shè)置全局變量picture1為1。

用例5

條件：其他

動(dòng)作1：相對(duì)移動(dòng)“圖片1”，x軸為100，y軸為0，動(dòng)畫(huà)為線(xiàn)性，時(shí)間為500毫秒；

動(dòng)作2：設(shè)置“圖片1”的尺寸寬度為【當(dāng)前元件寬度-18】，高度為【當(dāng)前元件高度-24】，錨點(diǎn)為中心，動(dòng)畫(huà)為線(xiàn)性，線(xiàn)性為500毫秒；

動(dòng)作3：設(shè)置“圖片1”的不透明度為20%，動(dòng)畫(huà)為線(xiàn)性，線(xiàn)性為500毫秒；

這里只教大家如何設(shè)置“圖片1”的鼠標(biāo)單擊時(shí)用例，其他4張相片的交互設(shè)置類(lèi)似，只是一些參數(shù)不同罷了，具體請(qǐng)查看原型rp文件的設(shè)置。

設(shè)置好5張相片的交互后，點(diǎn)擊預(yù)覽并選擇“下一張”就可以看到電子相冊(cè)的輪播效果了。

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

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