本文通過一個相對簡單的示例，介紹了如何制作下拉選擇框的聯通效果。

産品經理在制作産品原型的過程中，經常會遇到部件間聯動的效果設計。如果不能通過原型交互方式來完成，則會以“靜态頁面 文字說明 步驟指引”的方式達到目标。後者與前者相比不夠直觀，方式也更繁瑣。所以，如何制作部件間聯動效果，在實際工作中會起到事半功倍的作用。

接下來，小編主要介紹如何使用Axure制作下拉選擇框部件的聯動效果，大家可以通過相應的原理，嘗試其他部件間如何進行聯動效果設計。

效果說明

效果1：當選中“droplist-任務類型”下拉選擇框中的周期任務選項時，展示動态面闆“panel-是否核心任務”；

效果2：當選中“droplist-任務類型”下拉選擇框中的手動任務選項時，隐藏動态面闆“panel-是否核心任務”；

第1步，拖入兩個部件：下拉選擇框（Droplist）和文字标簽（Label）

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

第2步，對部件進行編輯和命名

雙擊“Label（文字标簽）”部件，輸入内容“任務類型”，然後選中該部件，将其命名為“label-任務類型”，具體如下圖所示：

雙擊“Droplist（下拉選擇框）”部件，點擊“Add（新增）”按鈕，添加枚舉值，分别i為“周期任務、手動任務、實時任務”。然後選中該部件，将其命名為“droplist-任務類型”，具體如下圖所示：

第3步：制作聯動部件

參照第二步驟，在操作界面中，分别拖入一個下拉選擇框（Droplist）部件和一個文字标簽（Label）部件，對後者進行編輯，輸入内容“是否是核心任務”。然後選中這兩個部件，創建動态面闆，并将動态面闆命名為“panel-是否核心任務”。具體如下圖所示：

第4步：事件觸發條件設置

選擇交互動作“Selection Changed”，然後點擊“Enable Cases”進行選項編輯，具體如下圖所示：

點擊“Enable Cases”後，彈出操作界面如下圖所示。點擊“Add Logic”進行設置。

點擊“Add Logic”，下方會自動生成一條記錄，設置“當選中droplist-任務類型下拉選擇框中的周期任務選項時“，具體如下圖所示：

點擊”ok“後，case1的發生條件就已經設置完成。該條件就是”當選中droplist-任務類型下拉選擇框中的周期任務選項時“。

第5步，事件結果設置

基于第4步，雙擊case1，彈出”交互編輯器（interaction Editor）“。選中”ADD ACTION（添加動作）“中的show（展示），并選擇需要展示的内容，本文中選擇的是動态面闆”panel-是否核心任務“，具體結果如下圖所示：

同理，為了能夠有對比效果，我們設置一個”當選中droplist-任務類型下拉選擇框中的手動任務選項時，隐藏動态面闆panel-是否核心任務“。最終完整的事件交互内容如下圖所示：

第6步，效果預覽

任務類型選中”周期任務“，下方會出現是否核心任務選項；

任務類型選中”手動任務“，下方隐藏是否核心任務選項；

在本文，小編通過一個相對簡單的示例，介紹了如何制作下拉選擇框的聯通效果。大家可以根據自己的實際場景和想象力，充分發揮和實驗，類似的效果也絕對不僅限于此。

作者：魚日，公衆号：issnail

本文由 @魚日 原創發布于人人都是産品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部