這一系列的xure學(xué)習(xí)系列分為三個(gè)階段，預(yù)計(jì)這種共享將使初學(xué)者掌握Axure的交互式設(shè)計(jì)。這種共享的主要內(nèi)容包括：快速頂部切換交互;側(cè)導(dǎo)航擴(kuò)展互動(dòng);視頻播放頁面交互和視頻拍攝頁面交互。

原型基于Axure8，以下是相關(guān)交互架構(gòu)的圖表。

首先看一下完整的原型預(yù)覽：http://bdh2ot.axshare.com/

以下是共享的第一個(gè)問題。

首先，頂部分接開關(guān)

1設(shè)置動(dòng)態(tài)面板

1.1拖動(dòng)到動(dòng)態(tài)面板600 * 900。

1.2雙擊動(dòng)態(tài)面板以設(shè)置動(dòng)態(tài)面板名稱。

1.3點(diǎn)擊“+””用于設(shè)置動(dòng)態(tài)面板狀態(tài)的數(shù)字（快速應(yīng)用程序頂部共有3個(gè)點(diǎn)擊，因此這次需要再添加三個(gè)）。

1.4單擊“確定”，添加完成。

2完成Tap頁面的低保真原型（以發(fā)現(xiàn)頁面為例）

2.1雙擊“發(fā)現(xiàn)”>進(jìn)入動(dòng)態(tài)面板 - 發(fā)現(xiàn)狀態(tài)頁面。

2.2在“發(fā)現(xiàn)頁面”中，使用組件庫并參考快速應(yīng)用程序以創(chuàng)建低保真原型。

2.3每個(gè)原件都被命名，以便在交互時(shí)可以區(qū)分。

2.4根據(jù)以上三條規(guī)則，創(chuàng)建一個(gè)“關(guān)注”。頁面和&ndquo;城市”頁面低保真原型。

2.5此時(shí)，主頁點(diǎn)擊交互的工作已準(zhǔn)備就緒，交互設(shè)計(jì)就開始了。

3點(diǎn)按“交互設(shè)計(jì)”

3.1雙擊“發(fā)現(xiàn)>進(jìn)入動(dòng)態(tài)面板 - 發(fā)現(xiàn)狀態(tài)頁面。

3.2首先，點(diǎn)擊選擇“關(guān)注&Tquo;點(diǎn)擊”，然后雙擊“點(diǎn)擊時(shí)”>用例，選擇“設(shè)置面板狀態(tài)””動(dòng)作，并選擇狀態(tài)為“發(fā)現(xiàn)”。

3.3接下來，單擊以選中“關(guān)注”，然后點(diǎn)按，然后雙擊“點(diǎn)擊時(shí)”>用例，選擇“設(shè)置面板狀態(tài)””操作，并選擇狀態(tài)為“關(guān)注”。

3.4三，點(diǎn)擊選擇< ;;城市&nd;點(diǎn)擊，然后雙擊“l(fā)dquo;鼠標(biāo)點(diǎn)擊&&;用例，選擇“l(fā)dquo;設(shè)置面板狀態(tài)”動(dòng)作，并選擇狀態(tài)為“同一城市”。

3.5根據(jù)以上4點(diǎn)，您可以完成“發(fā)現(xiàn)”頁面的“點(diǎn)擊”交互設(shè)置。

3.6還要輸入“關(guān)注”字樣和&ndquo;   >

3.7設(shè)置完成后，點(diǎn)擊交互設(shè)計(jì)完成，F(xiàn)5預(yù)覽自己的成功。

其次，側(cè)面導(dǎo)航擴(kuò)展了交互

1完成“側(cè)面導(dǎo)航頁面”&quoquo;低保真原型并命名原始。

2組合側(cè)面導(dǎo)航頁面并將其命名為“側(cè)面導(dǎo)航”并將其設(shè)置為隱藏狀態(tài)。

3“關(guān)注”頁面，點(diǎn)擊“側(cè)面導(dǎo)航”。按鈕并雙擊“l(fā)dquo;鼠標(biāo)點(diǎn)擊“rdquo;用例，選擇“l(fā)dquo;顯示”行動(dòng)。

4配置右側(cè)的操作區(qū)域，選擇“側(cè)面導(dǎo)航”組合，并將動(dòng)畫設(shè)置為“向右旋轉(zhuǎn)”到500ms。

5選擇側(cè)面導(dǎo)航遮罩區(qū)域，然后雙擊“鼠標(biāo)單擊時(shí)”。用例，選擇“l(fā)dquo;隱藏“rdquo;行動(dòng)。

6配置右側(cè)的操作區(qū)域，選擇“側(cè)向?qū)Ш健苯M合，并將動(dòng)畫設(shè)置為“向左旋轉(zhuǎn)”500毫秒。

7設(shè)置完成后，側(cè)導(dǎo)航交互的設(shè)計(jì)完成，F(xiàn)5預(yù)覽其成功。

此共享在此完成，下一階段將繼續(xù)分享視頻播放頁面的動(dòng)作交互。

RP文件下載地址：鏈接:https://pan.baidu.com/s/1skKsvOp密碼: ddrg

« 網(wǎng)易云音樂在Tiger Sniffing WOW Conference上分享它如何引爆地鐵營(yíng)銷 | 不差錢也不錯(cuò)決定為什么亞馬遜離線商店“難以生產(chǎn)”？ »