本文通過一個(gè)相對(duì)簡(jiǎn)單的示例，介紹了如何制作下拉選擇框的聯(lián)通效果。

產(chǎn)品經(jīng)理在制作產(chǎn)品原型的過程中，經(jīng)常會(huì)遇到部件間聯(lián)動(dòng)的效果設(shè)計(jì)。如果不能通過原型交互方式來完成，則會(huì)以“靜態(tài)頁面+文字說明+步驟指引”的方式達(dá)到目標(biāo)。后者與前者相比不夠直觀，方式也更繁瑣。所以，如何制作部件間聯(lián)動(dòng)效果，在實(shí)際工作中會(huì)起到事半功倍的作用。

接下來，小編主要介紹如何使用Axure制作下拉選擇框部件的聯(lián)動(dòng)效果，大家可以通過相應(yīng)的原理，嘗試其他部件間如何進(jìn)行聯(lián)動(dòng)效果設(shè)計(jì)。

效果說明

效果1：當(dāng)選中“droplist-任務(wù)類型”下拉選擇框中的周期任務(wù)選項(xiàng)時(shí)，展示動(dòng)態(tài)面板“panel-是否核心任務(wù)”；

效果2：當(dāng)選中“droplist-任務(wù)類型”下拉選擇框中的手動(dòng)任務(wù)選項(xiàng)時(shí)，隱藏動(dòng)態(tài)面板“panel-是否核心任務(wù)”；

第1步，拖入兩個(gè)部件：下拉選擇框（Droplist）和文字標(biāo)簽（Label）

在Axure操作界面中，拖入一個(gè)Droplist（中文名稱：下拉選擇框）部件和Label（中文名稱：文字標(biāo)簽）。具體樣式如下圖所示：

第2步，對(duì)部件進(jìn)行編輯和命名

雙擊“Label（文字標(biāo)簽）”部件，輸入內(nèi)容“任務(wù)類型”，然后選中該部件，將其命名為“l(fā)abel-任務(wù)類型”，具體如下圖所示：

雙擊“Droplist（下拉選擇框）”部件，點(diǎn)擊“Add（新增）”按鈕，添加枚舉值，分別i為“周期任務(wù)、手動(dòng)任務(wù)、實(shí)時(shí)任務(wù)”。然后選中該部件，將其命名為“droplist-任務(wù)類型”，具體如下圖所示：

第3步：制作聯(lián)動(dòng)部件

參照第二步驟，在操作界面中，分別拖入一個(gè)下拉選擇框（Droplist）部件和一個(gè)文字標(biāo)簽（Label）部件，對(duì)后者進(jìn)行編輯，輸入內(nèi)容“是否是核心任務(wù)”。然后選中這兩個(gè)部件，創(chuàng)建動(dòng)態(tài)面板，并將動(dòng)態(tài)面板命名為“panel-是否核心任務(wù)”。具體如下圖所示：

第4步：事件觸發(fā)條件設(shè)置

選擇交互動(dòng)作“Selection Changed”，然后點(diǎn)擊“Enable Cases”進(jìn)行選項(xiàng)編輯，具體如下圖所示：

點(diǎn)擊“Enable Cases”后，彈出操作界面如下圖所示。點(diǎn)擊“Add Logic”進(jìn)行設(shè)置。

點(diǎn)擊“Add Logic”，下方會(huì)自動(dòng)生成一條記錄，設(shè)置“當(dāng)選中droplist-任務(wù)類型下拉選擇框中的周期任務(wù)選項(xiàng)時(shí)“，具體如下圖所示：

點(diǎn)擊”ok“后，case1的發(fā)生條件就已經(jīng)設(shè)置完成。該條件就是”當(dāng)選中droplist-任務(wù)類型下拉選擇框中的周期任務(wù)選項(xiàng)時(shí)“。

第5步，事件結(jié)果設(shè)置

基于第4步，雙擊case1，彈出”交互編輯器（interaction Editor）“。選中”ADD ACTION（添加動(dòng)作）“中的show（展示），并選擇需要展示的內(nèi)容，本文中選擇的是動(dòng)態(tài)面板”panel-是否核心任務(wù)“，具體結(jié)果如下圖所示：

同理，為了能夠有對(duì)比效果，我們?cè)O(shè)置一個(gè)”當(dāng)選中droplist-任務(wù)類型下拉選擇框中的手動(dòng)任務(wù)選項(xiàng)時(shí)，隱藏動(dòng)態(tài)面板panel-是否核心任務(wù)“。最終完整的事件交互內(nèi)容如下圖所示：

第6步，效果預(yù)覽

任務(wù)類型選中”周期任務(wù)“，下方會(huì)出現(xiàn)是否核心任務(wù)選項(xiàng)；

任務(wù)類型選中”手動(dòng)任務(wù)“，下方隱藏是否核心任務(wù)選項(xiàng)；

在本文，小編通過一個(gè)相對(duì)簡(jiǎn)單的示例，介紹了如何制作下拉選擇框的聯(lián)通效果。大家可以根據(jù)自己的實(shí)際場(chǎng)景和想象力，充分發(fā)揮和實(shí)驗(yàn)，類似的效果也絕對(duì)不僅限于此。

作者：魚日，公眾號(hào)：issnail

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

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