Axure案例應(yīng)用

電商網(wǎng)站的搜索框，對(duì)商品、店鋪和賣(mài)家進(jìn)行搜索。切換下拉框中的內(nèi)容時(shí)，切換到不同的搜索輸入框，樣式也相應(yīng)改變，下面通過(guò)設(shè)置下拉列表框“選中項(xiàng)于”邏輯條件，實(shí)現(xiàn)上述交互效果。

Axure選中項(xiàng)值用例條件

設(shè)置選中項(xiàng)值的基本邏輯表達(dá)式為：如果“選中項(xiàng)值”等于“值”，那么執(zhí)行動(dòng)作
選中項(xiàng)值對(duì)應(yīng)部件：下拉列表框
邏輯條件設(shè)置靈活，分別可以設(shè)為：
-值1：選中項(xiàng)值：可以設(shè)置部件
-運(yùn)算符號(hào)：可以設(shè)置為：等于、不等于、小于、大于、小于或等于、大于或等于、包含、不包含、是、不是
-值2：可以設(shè)置為值、變量值、部件值、變量及部件值長(zhǎng)度、動(dòng)態(tài)面板狀態(tài)

Axure制作原型：步驟1
拖入一個(gè)下拉列表框，雙擊“下拉列表框”，打開(kāi)編輯選項(xiàng)窗口，點(diǎn)擊“+”號(hào)，添加3個(gè)列表值：商品、店鋪、賣(mài)家，在部件交互和注釋命名名稱(chēng)為：搜索條件

步驟2
拖入2個(gè)矩形到編輯頁(yè)面，設(shè)置矩形大?。篽:35，一個(gè)放到最下面，做為搜索框的背景，另一個(gè)做為搜索按鈕，編輯矩形文本為：搜索。設(shè)置2個(gè)矩形邊框顏色：紅色；搜索按鈕填充顏色：紅色

步驟3
拖一個(gè)文本框（單行）到編輯頁(yè)面，設(shè)置位置與大?。簑:407 h:31；將文本框放到下拉列表框的后面。在部件屬性和樣式窗口：勾選隱藏邊框。設(shè)置提示文字為：請(qǐng)搜索商品名稱(chēng)；部件交互和注釋窗口，設(shè)置部件名稱(chēng)為：商品。

步驟4
選中步驟2-3中制作的部件，右鍵快捷菜單選擇：轉(zhuǎn)換為動(dòng)態(tài)面板

步驟5
雙擊動(dòng)態(tài)面板，點(diǎn)擊“新增”按鈕，添加2個(gè)狀態(tài)，編輯3個(gè)狀態(tài)名稱(chēng)為：商品、店鋪、賣(mài)家，點(diǎn)擊“編輯全部狀態(tài)”按鈕，打開(kāi)3個(gè)狀態(tài)的編輯頁(yè)面

步驟6
復(fù)制“商品”編輯狀態(tài)中的部件，分別粘貼到“店鋪”、“賣(mài)家”編輯頁(yè)面中，修改矩形的邊線及填充顏色，文本框（單行）中的提示文本

步驟7：設(shè)置下拉選擇框“選項(xiàng)改變時(shí)”事件
選中“搜索條件”下拉列表框，雙擊“選項(xiàng)改變時(shí)”事件，打開(kāi)用例編輯器，編輯用例1：
用例1：
第一步：用例說(shuō)明，點(diǎn)擊“編輯條件”按鈕，打開(kāi)條件生成器，編輯邏輯條件為：如果搜索條件選中項(xiàng)等于: “商品”
第二步：點(diǎn)擊新增動(dòng)作，選擇“設(shè)置面板狀態(tài)”動(dòng)作
第四步：勾選區(qū)域前復(fù)選框，設(shè)置選擇狀態(tài)為：商品
點(diǎn)擊“確定”，關(guān)閉用例編輯器

步驟8
繼續(xù)雙擊“選項(xiàng)改變時(shí)”事件，重復(fù)步驟6，添加用例2、用例3：
用例2：第一步邏輯條件設(shè)置，設(shè)置邏輯條件為：如果搜索條件選中項(xiàng)等于: “店鋪”；第四步，設(shè)置選擇狀態(tài)為：店鋪
用例3：第一步邏輯條件設(shè)置，設(shè)置邏輯條件為：如果搜索條件選中項(xiàng)等于: “賣(mài)家”；第四步，設(shè)置選擇狀態(tài)為：賣(mài)家

步驟9

生成原型，查看效果