Axure中的照片墙

1.第一:如何去制作一个不一样的照片墙,在这里需要几个步骤以及几个元件和一些交互效果来完成,需要用到的一些元件如:中继器——图片——这两个元件。那么进入我们Axure RP8中的主视图,将元件库内的中继器移到主视图区域,如图所示:
Axure中的照片墙_第1张图片

2.首先从元件库中找到中继器,并鼠标选中,中继器移到主视图区域,移到主视图区域时我们所看到的中继器时三个竖排矩形,鼠标双击中继器,就会弹出一个小方框。小方框可移动以及放大,我这里是直接删掉,直接放入图片,调整大小,放置左上角部分,如图所示:
Axure中的照片墙_第2张图片

3.双击图片,找到需要导入的图片文件路径,点击确定即可,调整一定的大小。它的宽高为宽:350,高为:278,在写上一句名字,在回到主视图。
Axure中的照片墙_第3张图片

4.选中图片,设置图片为水平分布,网格排布,最多为三,可自行调试。图片间隔为10.

Axure中的照片墙_第4张图片

5.选中图片,右边框内有一个中继器表,第一个打上英文tu就是代表图片的意思,第二个为xm也是一致的。然后将图片导入其中,并打上对应的名字。如图所示:
Axure中的照片墙_第5张图片

6.这里选中图片,点击右边的交互区域的每项加载时,弹出一个小方框后,点击左边的设置图片,勾选右边中继器下方的小方框。Default下方的小方框设置为值,并点击右边的FX图标,弹出一个框,点击插入变量或函数,找到ltem.tu点击确定即可,
Axure中的照片墙_第6张图片

7.下方图通过设置交互效果里的设置图片的一个实现的效果,如图所示:
Axure中的照片墙_第7张图片

8.鼠标点击已经设置好的交互效果,再次点击,点击左边的设置文本勾选左上角的小方框,将右边框内的文字删除,然后点击FX图标,设置插入变量或函数。,示例:lite.xm.
Axure中的照片墙_第8张图片

9.以下是已经完成的效果图,自己可以再导入图片进行设置。
Axure中的照片墙_第9张图片

你可能感兴趣的:(pc)