Axure案例應用

電商網站的搜索框，對商品、店鋪和賣家進行搜索。切換下拉框中的內容時，切換到不同的搜索輸入框，樣式也相應改變，下面通過設置下拉列表框“選中項于”邏輯條件，實現上述交互效果。

Axure選中項值用例條件

設置選中項值的基本邏輯表達式為：如果“選中項值”等于“值”，那么執行動作

選中項值對應部件：下拉列表框

邏輯條件設置靈活，分別可以設為：

-值1：選中項值：可以設置部件

-運算符號：可以設置為：等于、不等于、小于、大于、小于或等于、大于或等于、包含、不包含、是、不是

-值2：可以設置為值、變量值、部件值、變量及部件值長度、動態面板狀態

Axure制作原型：步驟1

拖入一個下拉列表框，雙擊“下拉列表框”，打開編輯選項窗口，點擊“+”號，添加3個列表值：商品、店鋪、賣家，在部件交互和注釋命名名稱為：搜索條件。

步驟2

拖入2個矩形到編輯頁面，設置矩形大小：h:35，一個放到最下面，做為搜索框的背景，另一個做為搜索按鈕，編輯矩形文本為：搜索。設置2個矩形邊框顏色：紅色；搜索按鈕填充顏色：紅色

步驟3

拖一個文本框（單行）到編輯頁面，設置位置與大小：w:407 h:31；將文本框放到下拉列表框的后面。在部件屬性和樣式窗口：勾選隱藏邊框。設置提示文字為：請搜索商品名稱；部件交互和注釋窗口，設置部件名稱為：商品。

步驟4

選中步驟2-3中制作的部件，右鍵快捷菜單選擇：轉換為動態面板

步驟5

雙擊動態面板，點擊“新增”按鈕，添加2個狀態，編輯3個狀態名稱為：商品、店鋪、賣家，點擊“編輯全部狀態”按鈕，打開3個狀態的編輯頁面

步驟6

復制“商品”編輯狀態中的部件，分別粘貼到“店鋪”、“賣家”編輯頁面中，修改矩形的邊線及填充顏色，文本框（單行）中的提示文本

步驟7：設置下拉選擇框“選項改變時”事件

選中“搜索條件”下拉列表框，雙擊“選項改變時”事件，打開用例編輯器，編輯用例1：

用例1：

第一步：用例說明，點擊“編輯條件”按鈕，打開條件生成器，編輯邏輯條件為：如果搜索條件選中項等于: “商品”

第二步：點擊新增動作，選擇“設置面板狀態”動作

第四步：勾選區域前復選框，設置選擇狀態為：商品

點擊“確定”，關閉用例編輯器

步驟8

繼續雙擊“選項改變時”事件，重復步驟6，添加用例2、用例3：

用例2：第一步邏輯條件設置，設置邏輯條件為：如果搜索條件選中項等于: “店鋪”；第四步，設置選擇狀態為：店鋪

用例3：第一步邏輯條件設置，設置邏輯條件為：如果搜索條件選中項等于: “賣家”；第四步，設置選擇狀態為：賣家

步驟9

生成原型，查看效果

本文轉載自