Axure教程:使用動(dòng)態(tài)面板實(shí)現(xiàn)收藏→已收藏

0 評(píng)論 6508 瀏覽 15 收藏 4 分鐘

本文作者教你如何在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é)議

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 目前還沒評(píng)論,等你發(fā)揮!