axure商城

Axure案例:電商網站下拉搜索框的制作

Axure案例應用

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

Axure選中項值用例條件

設置選中項值的基本邏輯表達式為:如果“選中項值”等于“值”,那么執行動作
選中項值對應部件:下拉列表框
邏輯條件設置靈活,分別可以設為:
-值1:選中項值:可以設置部件
-運算符號:可以設置為:等于、不等于、小于、大于、小于或等于、大于或等于、包含、不包含、是、不是
-值2:可以設置為值、變量值、部件值、變量及部件值長度、動態面板狀態

Axure制作原型:步驟1
拖入一個下拉列表框,雙擊“下拉列表框”,打開編輯選項窗口,點擊“+”號,添加3個列表值:商品、店鋪、賣家,在部件交互和注釋命名名稱為:搜索條件

Axure?<wbr>RP?<wbr>用例條件“選中項值”交互設置在電商網站的應用

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

Axure?<wbr>RP?<wbr>用例條件“選中項值”交互設置在電商網站的應用

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

Axure?<wbr>RP?<wbr>用例條件“選中項值”交互設置在電商網站的應用

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

Axure?<wbr>RP?<wbr>用例條件“選中項值”交互設置在電商網站的應用

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

Axure?<wbr>RP?<wbr>用例條件“選中項值”交互設置在電商網站的應用

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

Axure?<wbr>RP?<wbr>用例條件“選中項值”交互設置在電商網站的應用

步驟7:設置下拉選擇框“選項改變時”事件
選中“搜索條件”下拉列表框,雙擊“選項改變時”事件,打開用例編輯器,編輯用例1:
用例1:
第一步:用例說明,點擊“編輯條件”按鈕,打開條件生成器,編輯邏輯條件為:如果搜索條件選中項等于: “商品”
第二步:點擊新增動作,選擇“設置面板狀態”動作
第四步:勾選區域前復選框,設置選擇狀態為:商品
點擊“確定”,關閉用例編輯器

Axure?<wbr>RP?<wbr>用例條件“選中項值”交互設置在電商網站的應用

步驟8
繼續雙擊“選項改變時”事件,重復步驟6,添加用例2、用例3:
用例2:第一步邏輯條件設置,設置邏輯條件為:如果搜索條件選中項等于: “店鋪”;第四步,設置選擇狀態為:店鋪
用例3:第一步邏輯條件設置,設置邏輯條件為:如果搜索條件選中項等于: “賣家”;第四步,設置選擇狀態為:賣家
Axure?<wbr>RP?<wbr>用例條件“選中項值”交互設置在電商網站的應用

步驟9

生成原型,查看效果

Axure?<wbr>RP?<wbr>用例條件“選中項值”交互設置在電商網站的應用

本文轉載自:http://blog.sina.com.cn/s/blog_13e3b11620102vlhj.html

給TA買糖
共{{data.count}}人
人已贊賞
案例教程

使用Axure制作手機頂部狀態欄上下滑動效果

2015-2-12 12:40:17

基礎教程案例教程

Axure學習筆記:手機APP微信讀書原型設計

2015-9-21 15:47:11

axure商城
0 條回復 A文章作者 M管理員
    暫無討論,說說你的看法吧
?
個人中心
購物車
優惠劵
今日簽到
有新私信 私信列表
搜索
俄罗斯videoxxxoo