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

原型效果

收藏->54Y码友部落

如何在Axure中,使用动态面板实现收藏54Y码友部落

已收藏->54Y码友部落

如何在Axure中,使用动态面板实现收藏54Y码友部落

预览原型地址:https://hi9c4s.axshare.com54Y码友部落

所需元件

一个矩形转换为动态面板并命名为“是否收藏”;54Y码友部落

两个面板并分别命名为“收藏”、“已收藏”;54Y码友部落

两个面板下放相同大小的矩形分别命名为“收藏”、“已收藏”;54Y码友部落

一个空心的五角星Icon;54Y码友部落

一个实心的五角星Icon。54Y码友部落

如何在Axure中,使用动态面板实现收藏54Y码友部落

操作步骤

(1)画布拉入一个合适大小的矩形,并转换为动态面板54Y码友部落

如何在Axure中,使用动态面板实现收藏54Y码友部落

(2)动态面板增加一个状态,并命好名54Y码友部落

如何在Axure中,使用动态面板实现收藏54Y码友部落

(3)在“收藏”面板下的矩形内填入文字“收藏”,并将空心五角星Icon放到合适的位置54Y码友部落

如何在Axure中,使用动态面板实现收藏54Y码友部落

(4)在“已收藏”面板下的矩形内填入文字“已收藏”,并将实心五角星Icon放到对应的位置54Y码友部落

如何在Axure中,使用动态面板实现收藏54Y码友部落

(5)设置动态面板的交互——鼠标单击时54Y码友部落

如何在Axure中,使用动态面板实现收藏54Y码友部落

(6)完成,按F5预览原型看看54Y码友部落

小记

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

如何在Axure中,使用动态面板实现收藏54Y码友部落

2.这个原型案例操作非常地简单,主要是学会去使用动态面板;触发面板的交互以及在设计时各个元件的对应摆放。54Y码友部落