Axure案例應用
電商網(wǎng)站的搜索框，對商品、店鋪和賣家進行搜索。切換下拉框中的內容時，切換到不同的搜索輸入框，樣式也相應改變，下面通過設置下拉列表框“選中項于”邏輯條件，實現(xiàn)上述交互效果。
Axure選中項值用例條件
設置選中項值的基本邏輯表達式為：如果“選中項值”等于“值”，那么執(zhí)行動作
選中項值對應部件：下拉列表框
邏輯條件設置靈活，分別可以設為：
-值1：選中項值：可以設置部件
-運算符號：可以設置為：等于、不等于、小于、大于、小于或等于、大于或等于、包含、不包含、是、不是
-值2：可以設置為值、變量值、部件值、變量及部件值長度、動態(tài)面板狀態(tài)
Axure制作原型：步驟1
拖入一個下拉列表框，雙擊“下拉列表框”，打開編輯選項窗口，點擊“+”號，添加3個列表值：商品、店鋪、賣家，在部件交互和注釋命名名稱為：搜索條件
步驟2
拖入2個矩形到編輯頁面，設置矩形大。篽:35，一個放到最下面，做為搜索框的背景，另一個做為搜索按鈕，編輯矩形文本為：搜索。設置2個矩形邊框顏色：紅色；搜索按鈕填充顏色：紅色
步驟3
拖一個文本框（單行）到編輯頁面，設置位置與大小：w:407 h:31；將文本框放到下拉列表框的后面。在部件屬性和樣式窗口：勾選隱藏邊框。設置提示文字為：請搜索商品名稱；部件交互和注釋窗口，設置部件名稱為：商品。
步驟4
選中步驟2-3中制作的部件，右鍵快捷菜單選擇：轉換為動態(tài)面板
步驟5
雙擊動態(tài)面板，點擊“新增”按鈕，添加2個狀態(tài)，編輯3個狀態(tài)名稱為：商品、店鋪、賣家，點擊“編輯全部狀態(tài)”按鈕，打開3個狀態(tài)的編輯頁面
步驟6
復制“商品”編輯狀態(tài)中的部件，分別粘貼到“店鋪”、“賣家”編輯頁面中，修改矩形的邊線及填充顏色，文本框（單行）中的提示文本
步驟7：設置下拉選擇框“選項改變時”事件
選中“搜索條件”下拉列表框，雙擊“選項改變時”事件，打開用例編輯器，編輯用例1：
用例1：
第一步：用例說明，點擊“編輯條件”按鈕，打開條件生成器，編輯邏輯條件為：如果搜索條件選中項等于: “商品”
第二步：點擊新增動作，選擇“設置面板狀態(tài)”動作
第四步：勾選區(qū)域前復選框，設置選擇狀態(tài)為：商品
點擊“確定”，關閉用例編輯器
步驟8
繼續(xù)雙擊“選項改變時”事件，重復步驟6，添加用例2、用例3：
用例2：第一步邏輯條件設置，設置邏輯條件為：如果搜索條件選中項等于: “店鋪”；第四步，設置選擇狀態(tài)為：店鋪
用例3：第一步邏輯條件設置，設置邏輯條件為：如果搜索條件選中項等于: “賣家”；第四步，設置選擇狀態(tài)為：賣家
步驟9
生成原型，查看效果
承擔因您的行為而導致的法律責任，
本站有權保留或刪除有爭議評論。
參與本評論即表明您已經(jīng)閱讀并接受
上述條款。