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

原型效果

收藏->

已收藏->

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

所需元件

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

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

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

一個空心的五角星Icon；

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

操作步驟

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

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

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

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

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

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

小記

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

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

#相關(guān)閱讀#

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

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

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

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