快好知 kuaihz

Axure教程:使用动态面板实现收藏→已收藏

本文作者教你如何在Axure中,使用动态面板实现收藏->已收藏,一起来看看~

原型效果

收藏->

收藏->

预览原型地址:https://hi9c4s.axshare.com

所需元件

一个矩形转换为动态面板并命名为“是否收藏”;

两个面板并分别命名为“收藏”、“已收藏”;

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

一个空心的五角星Icon;

一个实心的五角星Icon。

操作步骤

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

(2)动态面板增加一个状态,并命好名

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

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

(5)设置动态面板的交互——鼠标单击时

(6)完成,按F5预览原型看看

小记

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

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

#相关阅读#

我之前的一篇文章里也有一个关于状态的转化不过使用的不是动态面板,分享给大家看看,就像是数学题的两种解法:

Axure教程:简单开关按钮的实现

本站资源来自互联网,仅供学习,如有侵权,请通知删除,敬请谅解!
搜索建议:收藏  收藏词条  面板  面板词条  实现  实现词条  使用  使用词条  教程  教程词条  
原型

 Axure RP8 动态面板之轮...

爬行蟑螂也是刚开始使用Axure,自学的,不过Axure真心很强大,会一点一点的分享一些操作功能;最简单的操作步骤,这里分享动态面板之轮播图设置。第一步:拖入动...(展开)

原型

 Axure教程——页面载入进度条

在产品的原型设计中,进度条的意义是:第一,在页面载入中,给用户的等待过程中增加少量的乐趣;在一个追求快的环境中,这是十分关键的要素,可以减少流失率。第二,也是在...(展开)

原型

 Axure 8.0小技巧:快速制...

轮盘抽奖在各种App和网页的活动页面中经常使用,如何才能方便的设计出抽奖页面呢?原型分析流程分析:点击“抽奖”按钮后,轮盘转动足够多圈数后停下必备元素分析:指针...(展开)