本文作者教你如何在Axure中，使用動(dòng)態(tài)面板實(shí)現(xiàn)收藏->已收藏，一起來(lái)看看~

原型效果

收藏->

已收藏->

預(yù)覽原型地址：https://hi9c4s.axshare.com

所需元件

一個(gè)矩形轉(zhuǎn)換為動(dòng)態(tài)面板并命名為“是否收藏”；

兩個(gè)面板并分別命名為“收藏”、“已收藏”；

兩個(gè)面板下放相同大小的矩形分別命名為“收藏”、“已收藏”；

一個(gè)空心的五角星Icon；

一個(gè)實(shí)心的五角星Icon。

操作步驟

（1）畫布拉入一個(gè)合適大小的矩形，并轉(zhuǎn)換為動(dòng)態(tài)面板

（2）動(dòng)態(tài)面板增加一個(gè)狀態(tài)，并命好名

（3）在“收藏”面板下的矩形內(nèi)填入文字“收藏”，并將空心五角星Icon放到合適的位置

（4）在“已收藏”面板下的矩形內(nèi)填入文字“已收藏”，并將實(shí)心五角星Icon放到對(duì)應(yīng)的位置

（5）設(shè)置動(dòng)態(tài)面板的交互——鼠標(biāo)單擊時(shí)

（6）完成，按F5預(yù)覽原型看看

小記

1.這里可能會(huì)有人發(fā)現(xiàn)我的元件列表里并沒有“空心”五角星Icon以及“實(shí)心”五角星Icon，這是因?yàn)槲矣肍ontAwesome字體代替了它們，至于FontAwesome字體究竟是什么，剛?cè)腴TAxure的小白可以去網(wǎng)上搜索一下。它的部分作用是能大大的節(jié)省文件所占內(nèi)存大小以及加快原型預(yù)覽加載速度。我這個(gè)原型案例較小可能看不出效果，但是等制作一個(gè)大型的原型時(shí)，那效果將非常地顯著。

2.這個(gè)原型案例操作非常地簡(jiǎn)單，主要是學(xué)會(huì)去使用動(dòng)態(tài)面板；觸發(fā)面板的交互以及在設(shè)計(jì)時(shí)各個(gè)元件的對(duì)應(yīng)擺放。

#相關(guān)閱讀#

我之前的一篇文章里也有一個(gè)關(guān)于狀態(tài)的轉(zhuǎn)化不過(guò)使用的不是動(dòng)態(tài)面板，分享給大家看看，就像是數(shù)學(xué)題的兩種解法：

Axure教程：簡(jiǎn)單開關(guān)按鈕的實(shí)現(xiàn)

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

題圖來(lái)自 Unsplash ，基于 CC0 協(xié)議