本文主要分享一種不需要設(shè)置變量做出的實(shí)用動(dòng)態(tài)交互效果。enjoy~

相比于用各種變量來做復(fù)雜的動(dòng)態(tài)交互，我在這里分享一種不需要設(shè)置變量做出的實(shí)用動(dòng)態(tài)交互效果。

首先，我們來看一下效果：

1. 動(dòng)效理解

從點(diǎn)擊效果可以看出，這里主要包括兩個(gè)變量：大小&顏色，并且是在大小改變的同時(shí)進(jìn)行顏色的切換。

我們都知道，在axure中要想控制變量，一定要把元素轉(zhuǎn)化成動(dòng)態(tài)面版，而這里一個(gè)點(diǎn)擊動(dòng)作對(duì)應(yīng)了兩個(gè)變量的同時(shí)改變，我們先用傳統(tǒng)的方法來試一次看看會(huì)出現(xiàn)什么效果：

（1）畫兩個(gè)矩形，一個(gè)小尺寸(黃色)，一個(gè)大尺寸(藍(lán)色)

（2）將黃色的矩形轉(zhuǎn)化為動(dòng)態(tài)面版(不要忘記命名，這里將其命名為面版1)，并增加一個(gè)狀態(tài)，將大尺寸的藍(lán)色矩形剪切到狀態(tài)2中：

（3）再畫一個(gè)灰色的矩形當(dāng)做按鈕，并為點(diǎn)擊(onclick)添加事例：

此時(shí)，我們看到的效果是這樣的：

之所以會(huì)出現(xiàn)這樣的問題，是因?yàn)樵赼xure中動(dòng)態(tài)面版的可視區(qū)域的錨點(diǎn)坐標(biāo)都是(0,0)，即

所以在動(dòng)態(tài)面版尺寸變大并將黃色狀態(tài)(狀態(tài)1)切換到藍(lán)色狀態(tài)(狀態(tài)2)的時(shí)候，動(dòng)態(tài)面版會(huì)將初始狀態(tài)的可視區(qū)域的錨點(diǎn)坐標(biāo)記憶到狀態(tài)2，所以便會(huì)出現(xiàn)小尺寸的黃色矩形往上下移動(dòng)并漸消漸現(xiàn)的視覺感受。

那正確的姿勢(shì)是怎樣的呢？我來給大家詮釋一下一種便捷的方式：

2. 正確的打開方式

（1）直接從庫中拖取一個(gè)動(dòng)態(tài)面版出來(不要忘記命名，這里姑且命名為面版2)，將尺寸設(shè)置為一個(gè)較小的數(shù)值，并為其添加狀態(tài)2；

（2）將狀態(tài)1的背景色設(shè)置為橘色(在樣式tab中，這里還可以插入圖片)；

（3）同樣的手法，將狀態(tài)2的背景色設(shè)置為藍(lán)色

（4）再畫一個(gè)灰色的矩形當(dāng)做按鈕，并為點(diǎn)擊(onclick)添加事例：

好了，大功告成~

這里的關(guān)鍵就是對(duì)動(dòng)態(tài)面版的不同狀態(tài)進(jìn)行顏色填充或者圖片填充，讓其在基于同一錨點(diǎn)的尺寸+內(nèi)容/顏色兩個(gè)變量進(jìn)行控制的時(shí)候不會(huì)由于axure對(duì)可視區(qū)域特有的坐標(biāo)記憶而產(chǎn)生的視覺瑕疵~

作者：johnnylhj，迅雷網(wǎng)絡(luò)高級(jí)交互設(shè)計(jì)師

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

題圖由作者提供