如何在Axure中，使用动态面板实现收藏

2019-12-1009:09:17原型设计Comments3,086 views字数 557阅读模式

原型效果

收藏->文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/17585.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/17585.html

已收藏->文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/17585.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/17585.html

预览原型地址：https://hi9c4s.axshare.com文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/17585.html

所需元件

一个矩形转换为动态面板并命名为“是否收藏”；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/17585.html

两个面板并分别命名为“收藏”、“已收藏”；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/17585.html

两个面板下放相同大小的矩形分别命名为“收藏”、“已收藏”；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/17585.html

一个空心的五角星Icon；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/17585.html

一个实心的五角星Icon。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/17585.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/17585.html

操作步骤

（1）画布拉入一个合适大小的矩形，并转换为动态面板文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/17585.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/17585.html

（2）动态面板增加一个状态，并命好名文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/17585.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/17585.html

（3）在“收藏”面板下的矩形内填入文字“收藏”，并将空心五角星Icon放到合适的位置文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/17585.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/17585.html

（4）在“已收藏”面板下的矩形内填入文字“已收藏”，并将实心五角星Icon放到对应的位置文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/17585.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/17585.html

（5）设置动态面板的交互——鼠标单击时文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/17585.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/17585.html

（6）完成，按F5预览原型看看文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/17585.html

小记

1.这里可能会有人发现我的元件列表里并没有“空心”五角星Icon以及“实心”五角星Icon，这是因为我用FontAwesome字体代替了它们，至于FontAwesome字体究竟是什么，刚入门Axure的小白可以去网上搜索一下。它的部分作用是能大大的节省文件所占内存大小以及加快原型预览加载速度。我这个原型案例较小可能看不出效果，但是等制作一个大型的原型时，那效果将非常地显著。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/17585.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/17585.html