上次分享了浮木云的靜態(tài)頁面搭建，教我們在短時間內(nèi)快速形成原型頁面，但好的原型設(shè)計怎么可能少的了動態(tài)交互效果呢？因此，原型頁面的交互編排是至關(guān)重要的，本次就浮木云平臺的交互編排形成簡單的記錄，分享給大家共同成長。顧名思義，交互編排就是編排原型頁面之間關(guān)聯(lián)交互，使得頁面有動態(tài)交互的效果。

如果說原型頁面是原型設(shè)計的核心，那么頁面之間的動態(tài)交互效果就是原型設(shè)計的點睛之筆，建立動態(tài)交互效果，無論是對客戶還是對研發(fā)，都能通過原型設(shè)計很好的理解業(yè)務(wù)需求邏輯。我就不放鏈接了，如果大家感興趣的話自行搜索關(guān)鍵詞哈。

在介紹靜態(tài)頁面搭建之前，我已經(jīng)完成幾個靜態(tài)頁面的搭建，確保頁面之間都有動態(tài)交互的效果。

1、打開彈窗

當(dāng)頁面設(shè)計中觸發(fā)某個按鈕，即可出現(xiàn)彈窗，這就是打開彈窗的交互效果。為實現(xiàn)這個效果，需要為這個按鈕和彈窗之間建立交互編排關(guān)系。以下圖為例，選中【添加企業(yè)】按鈕，在“交互編排”中對【添加企業(yè)】按鈕“新增事件編排”。

選擇“打開彈窗”卡片，放入畫布中，并與畫布頁面的兩個圖標(biāo)建立連接，同時選中彈窗卡片，在畫布右側(cè)選擇需要觸發(fā)的彈窗組件，保存即可完成【添加企業(yè)】按鈕與“添加企業(yè)”彈窗之間的關(guān)聯(lián)關(guān)系，這樣看來頁面之間的動態(tài)交互制作也可以如此簡單呀。

2、重置組件

當(dāng)用戶通過查詢條件搜索特定數(shù)據(jù)之后，點擊【重置】按鈕，頁面就會實現(xiàn)刷新重置的效果。為實現(xiàn)這樣的效果，我們只需要對【重置】按鈕進(jìn)行交互編排即可。選中“重置組件”卡片放置在畫布中，連接畫布中的兩個圖標(biāo)，在右側(cè)選擇對應(yīng)需要刷新的組件，保存即可完成重置按鈕的交互編排。

3、顯示組件&隱藏組件

這兩個組件會在同一場景同時觸發(fā)，例如你點擊某個按鈕，在相同頁面的相同位置需要切換不同的內(nèi)容，就要用到顯示組件，觸發(fā)需要顯示的內(nèi)容，同時用到隱藏組件，觸發(fā)需要隱藏的內(nèi)容，這樣就會實現(xiàn)在相同頁面的相同位置顯示不同內(nèi)容的效果。

4、打開新的頁面

在一些網(wǎng)站中，我們總是能看到觸發(fā)某個按鈕，就會打開新的網(wǎng)站頁面，這在浮木云平臺也可進(jìn)行對應(yīng)的交互編排實現(xiàn)相應(yīng)的交互效果。選中“打開新的頁面”卡片，連接畫布中兩個圖標(biāo)，在畫布右側(cè)選擇跳轉(zhuǎn)類型，包括內(nèi)部頁面和外部頁面，內(nèi)部頁面指的是目前創(chuàng)建的應(yīng)用系統(tǒng)頁面，外部頁面可直接鏈接外部頁面。根據(jù)跳轉(zhuǎn)類型在“跳轉(zhuǎn)地址”中選擇對應(yīng)的跳轉(zhuǎn)頁面，保存即可完成打開新的頁面的交互效果。

5、當(dāng)前頁面跳轉(zhuǎn)

用戶觸發(fā)某個按鈕，可實現(xiàn)從當(dāng)前頁面進(jìn)入下沉頁面，下沉頁面內(nèi)容依然在當(dāng)前頁面顯示，為實現(xiàn)這樣的效果，用戶選中“當(dāng)前頁面跳轉(zhuǎn)”卡片放置在畫布中，連接畫布中兩個圖標(biāo)，并對選中的卡片設(shè)置跳轉(zhuǎn)類型和跳轉(zhuǎn)地址，點擊保存，即可實現(xiàn)在當(dāng)前頁面跳轉(zhuǎn)的效果。

6、打開抽屜

該組件的交互跟打開彈窗是一樣的，用戶在頁面點擊某個按鈕，頁面?zhèn)让鏁棾龀閷蠌棿?。為實現(xiàn)這樣的效果，用戶只需要對某個需要觸發(fā)抽屜彈窗的按鈕進(jìn)行交互編排即可，編排步驟和“打開彈窗”的交互編排步驟是一樣的。

7、關(guān)閉彈窗&關(guān)閉抽屜

在頁面交互中，我們往往會對一些彈窗或抽屜進(jìn)行關(guān)閉的交互動作，這樣的效果就是對彈窗或抽屜上的某個按鈕交互編排，即可實現(xiàn)彈窗關(guān)閉或者抽屜彈窗關(guān)閉的效果。一般情況下，關(guān)閉彈窗的交互是通過點擊彈窗的【取消】按鈕或【確定】按鈕，彈窗就會關(guān)閉。下圖展示對【取消】按鈕進(jìn)行關(guān)閉彈窗的交互編排。

進(jìn)入交互編排頁面，選中“關(guān)閉彈窗”卡片放置在畫布中，并連接畫布中兩個圖標(biāo)，在畫布右側(cè)選中需要關(guān)閉的彈窗組件，保存即可完成關(guān)閉彈窗的交互編排。

關(guān)閉抽屜的交互編排也是一樣的編排步驟，對抽屜彈窗上的按鈕進(jìn)行關(guān)閉彈窗的交互編排，放置“關(guān)閉抽屜”卡片，連接畫布中兩個圖標(biāo)，在畫布右側(cè)選擇需要關(guān)閉的抽屜組件，保存即可完成關(guān)閉抽屜的交互編排。

以上就是我分享的一些基本常用的交互編排了，希望對大家對浮木云的了解有所幫助。由于其他的組件較為復(fù)雜，目前正在研究中~，待我學(xué)有所成，后續(xù)我會對每個復(fù)雜的交互編排一一介紹，望大家敬請期待~