中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

選擇器是在原型設(shè)計(jì)時(shí)常用的一種設(shè)計(jì)之一。平時(shí)大家都是一級(jí)，如果是多級(jí)的選擇器，如何處理？這篇文章，我們看看作者分享的經(jīng)驗(yàn)。

Axure選擇器是一種在交互設(shè)計(jì)中常用的組件，這期內(nèi)容，我們來(lái)探討Axure中選擇器設(shè)計(jì)與交互技巧。

OK，這期內(nèi)容正式開始

下拉列表選擇輸入框元件

創(chuàng)建選擇輸入框所需的元件

1.在元件庫(kù)中拖出一個(gè)矩形元件。

2.選中矩形元件，在樣式窗格中將按鈕元件的寬設(shè)置為300，高設(shè)置為35，輸入文本“請(qǐng)選擇分類”字號(hào)14，字體顏色灰色（#AAAAA）,文本左側(cè)對(duì)齊，線段填充顏色灰色（#AAAAA）線寬為1,圓角半徑5，邊距左右側(cè)10。

3.在iconfont搜索向下icon，選中向下icon，復(fù)制SVG代碼，粘貼到畫布上。

4.選中向下icon元件，在樣式窗格中將按鈕元件的寬設(shè)置為10，高設(shè)置為5，字體顏色灰色（#AAAAA）,icon參考文本居中對(duì)齊。

5.選中矩形文本框和向下icon元件組合，并創(chuàng)建為動(dòng)態(tài)面板。

創(chuàng)建下拉選擇列表所需的元件

1.復(fù)制兩個(gè)“請(qǐng)選擇分類”矩形元件在元件，在樣式窗格中將矩形元件線寬設(shè)為0,字體顏色設(shè)置為黑色（#333333）輸入“男頻，女頻”。

2.選中“男頻，女頻”元件設(shè)置為動(dòng)態(tài)面板。

3.選中“男頻，女頻”動(dòng)態(tài)面板，剪切粘貼到“請(qǐng)選擇分類”動(dòng)態(tài)面板容器中。

創(chuàng)建交互

創(chuàng)建“請(qǐng)選擇分類”的交互狀態(tài)

雙擊動(dòng)態(tài)面板，選中“請(qǐng)選擇分類”元件，在交互窗格點(diǎn)擊新建交互，添加單擊時(shí)顯示/隱藏分類“男頻、女頻”動(dòng)態(tài)面板，顯示動(dòng)態(tài)面板逐漸300毫秒。

2.點(diǎn)擊添加動(dòng)作，選擇設(shè)置選中，“請(qǐng)選擇分類”元件值為真。

3.選中“請(qǐng)選擇分類”元件，添加鼠標(biāo)懸停的樣式，線段顏色為灰色（#0052D9），獲取焦點(diǎn)的樣式，線段顏色為藍(lán)色（#0052D9）。

創(chuàng)建“下拉選擇列表”的交互狀態(tài)

1.雙擊動(dòng)態(tài)面板，選中分類“男頻女頻”元件，在交互窗格點(diǎn)擊新建交互，添加單擊時(shí)顯示/隱藏分類“男頻、女頻”動(dòng)態(tài)面板，隱藏動(dòng)態(tài)面板逐漸300毫秒。

2.添加動(dòng)作，設(shè)置文本，“請(qǐng)選擇分類”富文本。

3.編輯富文本[[This.text]]，設(shè)置字體14號(hào)，字體顏色為黑色（#333333）,點(diǎn)擊確定。

3.添加動(dòng)作，設(shè)置選中，“請(qǐng)選擇分類”為“假”。

4.選中“男頻”元件，添加鼠標(biāo)懸停的樣式，線段顏色為淺灰色（#F7F7F7）選中樣式為灰色（#F3F4F5）。

同理設(shè)置女頻選項(xiàng)。

6.隱藏“男頻、女頻”動(dòng)態(tài)面板。

預(yù)覽交互

點(diǎn)擊預(yù)覽，在預(yù)覽頁(yè)面鼠標(biāo)下拉列表選擇輸入框可以選擇對(duì)應(yīng)的選項(xiàng)。

帶清除的下拉列表選擇輸入框元件

在以上基礎(chǔ)上創(chuàng)建清除按鈕元件

1.雙擊“請(qǐng)選擇分類”動(dòng)態(tài)面板，選中向下icon,將向下icon單獨(dú)轉(zhuǎn)換為動(dòng)態(tài)面板。

2.雙擊向下icon，在iconfont搜索刪除或者關(guān)閉icon，復(fù)制SVG代碼，粘貼到向下icon State2狀態(tài)中。

創(chuàng)建交互

創(chuàng)建“清除”按鈕的交互狀態(tài)

1.雙擊向下icon動(dòng)態(tài)面板，點(diǎn)擊Stste2，選中清除按鈕，點(diǎn)擊新建交互，單擊時(shí)，設(shè)置向下icon動(dòng)態(tài)面板到 State 1。

2.添加交互動(dòng)作，設(shè)置文本“請(qǐng)選擇分類”為“請(qǐng)選擇分類”。

給“擇輸入框”添加情形判斷交互狀態(tài)

1.雙擊動(dòng)態(tài)面板，選中“請(qǐng)選擇分類”動(dòng)態(tài)面板，在交互窗格點(diǎn)擊新建交互，選擇鼠標(biāo)移入時(shí)，將鼠標(biāo)移入時(shí)交互拖到第一個(gè)。

2.選擇鼠標(biāo)移入時(shí)，啟用情形判斷，點(diǎn)擊添加條件，情形1：如果 文字于 請(qǐng)選擇分類!=”請(qǐng)選擇分類”點(diǎn)擊確定，添加動(dòng)作，設(shè)置動(dòng)態(tài)面板“向下icon”動(dòng)態(tài)面板到 State2 。

3.選擇鼠標(biāo)移入時(shí)，啟用情形判斷，點(diǎn)擊添加條件，情形2：如果 文字于 請(qǐng)選擇分類 ==“請(qǐng)選擇分類”點(diǎn)擊確定，添加動(dòng)作，設(shè)置動(dòng)態(tài)面板“向下icon”動(dòng)態(tài)面板到 State1 。

4.點(diǎn)擊新建交互，選擇鼠標(biāo)移出時(shí)，設(shè)置“向下icon”動(dòng)態(tài)面板到 State1 。

5.刪除單擊時(shí)選中“請(qǐng)選擇分類”為“真”交互。

預(yù)覽交互

點(diǎn)擊預(yù)覽，在預(yù)覽頁(yè)面鼠標(biāo)下拉列表選擇輸入框可以選擇對(duì)應(yīng)的選項(xiàng)，點(diǎn)擊清除按鈕（X），可以清除所選項(xiàng)。

單選多級(jí)下拉列表選擇輸入框元件

在以上基礎(chǔ)上創(chuàng)建多級(jí)下拉元件

1.雙擊“請(qǐng)選擇分類”動(dòng)態(tài)面板，選中“男頻、女頻”矩形框

2.將“男頻、女頻”矩形框?qū)挾戎翟O(shè)置為80，添加向右符號(hào)。

3.選中“男頻、女頻”元件，右鍵轉(zhuǎn)為動(dòng)態(tài)面板，并命名為一級(jí)分類。

4.雙擊一級(jí)分類動(dòng)態(tài)面板，從元件庫(kù)中拖入一個(gè)內(nèi)聯(lián)框架，將內(nèi)聯(lián)框架寬值設(shè)置為80，高值設(shè)置為200，選中內(nèi)聯(lián)框架右鍵轉(zhuǎn)為動(dòng)態(tài)面板，并命名為二級(jí)分類。

5.選中內(nèi)聯(lián)框架動(dòng)態(tài)面板右鍵設(shè)置滾動(dòng)條為垂直滾動(dòng)，并拖動(dòng)高值遮住水平滾動(dòng)條。

6.復(fù)制男頻矩形框，雙擊二級(jí)分類內(nèi)聯(lián)框架動(dòng)態(tài)面板粘貼到State1補(bǔ)充男頻二級(jí)分類，State2 補(bǔ)充女頻二級(jí)分類。

創(chuàng)建交互

創(chuàng)建“一級(jí)分類”下拉列表的交互狀態(tài)

1.雙擊動(dòng)態(tài)面板，選中男頻矩形框，在交互窗格點(diǎn)擊新建交互，添加單擊時(shí)顯示/隱藏分類“男頻、女頻”動(dòng)態(tài)面板，顯示動(dòng)態(tài)面板逐漸300毫秒。

2.添加動(dòng)作，設(shè)置二級(jí)級(jí)分類面板到State1。

3.添加動(dòng)作，設(shè)置“請(qǐng)選擇分類”選中為假。

4.添加動(dòng)作，設(shè)置““請(qǐng)選擇分類”文本為“男頻”

5.同理配置女頻矩形框，也可直接復(fù)制男頻交互，將添加動(dòng)作，設(shè)置二級(jí)級(jí)分類面板到State1，改為State2，添加動(dòng)作，設(shè)置““請(qǐng)選擇分類”文本為“男頻”，改為女頻。

創(chuàng)建“二級(jí)分類”下拉列表的交互狀態(tài)

1.雙擊動(dòng)態(tài)面板，選中二級(jí)分類都市矩形框，在交互窗格點(diǎn)擊新建交互，添加單擊時(shí)顯示/隱藏分類“分類”動(dòng)態(tài)面板，隱藏動(dòng)態(tài)面板逐漸300毫秒。

2.添加動(dòng)作，設(shè)置“請(qǐng)選擇分類”選中為假。

3.添加動(dòng)作，設(shè)置““請(qǐng)選擇分類”文本為“男頻 / 都市”

5.同理配置男頻、女頻所有二級(jí)分類矩形框，也可直接復(fù)制都市交互，添加動(dòng)作，設(shè)置““請(qǐng)選擇分類”文本為“男頻 / 都市”，修改“男頻 / 都市”字段。

6.選擇二級(jí)分類，分類動(dòng)態(tài)面板依次隱藏。

預(yù)覽交互

點(diǎn)擊預(yù)覽，在預(yù)覽頁(yè)面鼠標(biāo)下拉列表選擇輸入框可以選擇對(duì)應(yīng)的選項(xiàng)，點(diǎn)擊清除按鈕（X），可以清除所選項(xiàng)。

預(yù)覽地址：https://6jjy6g.axshare.com