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
生成原型,查看效果
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任,
本站有權(quán)保留或刪除有爭(zhēng)議評(píng)論。
參與本評(píng)論即表明您已經(jīng)閱讀并接受
上述條款。