起點(diǎn)課堂會(huì)員權(quán)益
職業(yè)體系課特權(quán)
線(xiàn)下行業(yè)大會(huì)特權(quán)
個(gè)人IP打造特權(quán)
30+門(mén)專(zhuān)項(xiàng)技能課
1300+專(zhuān)題課程
12場(chǎng)職場(chǎng)軟技能直播
12場(chǎng)求職輔導(dǎo)直播
12場(chǎng)專(zhuān)業(yè)技能直播
會(huì)員專(zhuān)屬社群
榮耀標(biāo)識(shí)Axure教程：使用動(dòng)態(tài)面板實(shí)現(xiàn)收藏→已收藏
本文作者教你如何在A(yíng)xure中，使用動(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）畫(huà)布拉入一個(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)我的元件列表里并沒(méi)有“空心”五角星Icon以及“實(shí)心”五角星Icon，這是因?yàn)槲矣肍ontAwesome字體代替了它們，至于FontAwesome字體究竟是什么，剛?cè)腴T(mén)Axure的小白可以去網(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)單開(kāi)關(guān)按鈕的實(shí)現(xiàn)
本文由 @Nilz 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載
題圖來(lái)自 Unsplash ，基于 CC0 協(xié)議
- 目前還沒(méi)評(píng)論，等你發(fā)揮！
