這期內(nèi)容，我們將深入探討Axure中按鈕元件設(shè)計(jì)與交互技巧，在 Axure 中，按鈕（Button）是一個(gè)非常重要的界面元素，可以用于多種使用場景：

• 觸發(fā)事件：按鈕通常用于觸發(fā)各種事件，如提交表單、打開新頁面、調(diào)用API等。
• 用戶交互：按鈕提供了一種直觀的方式來與用戶進(jìn)行交互，用戶可以通過點(diǎn)擊按鈕來執(zhí)行特定的操作。
• 表單提交：在表單中，按鈕常用于提交用戶輸入的數(shù)據(jù)。
• 導(dǎo)航控制：按鈕可以用于頁面導(dǎo)航，如返回按鈕、前進(jìn)按鈕等。
• 狀態(tài)切換：按鈕可以用于控制界面元素的狀態(tài)，如開關(guān)按鈕、選項(xiàng)卡切換等。
• 數(shù)據(jù)操作：在數(shù)據(jù)展示界面，按鈕可以用來添加、刪除、編輯或查看數(shù)據(jù)。
• 功能調(diào)用：按鈕可以觸發(fā)特定的功能，如搜索、過濾、排序等。
• 模態(tài)窗口：按鈕可以用來打開模態(tài)窗口，顯示額外的信息或進(jìn)行更復(fù)雜的交互。
• 工具欄操作：在工具欄中，按鈕可以提供快速訪問常用功能的方式。
• 視覺反饋：按鈕在被點(diǎn)擊時(shí)通常會(huì)有視覺反饋，如顏色變化、陰影等，增強(qiáng)用戶體驗(yàn)。
• 分組操作：在需要進(jìn)行批量操作的場景下，按鈕可以用于選擇多個(gè)項(xiàng)目并執(zhí)行統(tǒng)一的操作。
• 權(quán)限控制：在需要根據(jù)用戶權(quán)限顯示不同操作的場景下，按鈕可以被動(dòng)態(tài)顯示或隱藏。
• 動(dòng)畫和過渡效果：按鈕可以配合動(dòng)畫和過渡效果，提升用戶界面的動(dòng)態(tài)感和吸引力。
• 輔助功能：對(duì)于輔助技術(shù)用戶，按鈕可以提供鍵盤可訪問性和屏幕閱讀器兼容性。
• 加載狀態(tài)：在需要加載數(shù)據(jù)或執(zhí)行長時(shí)間操作時(shí)，按鈕可以顯示加載狀態(tài)，告知用戶操作正在進(jìn)行中。

Axure 按鈕的這些使用場景可以通過設(shè)置按鈕的屬性、樣式和交互動(dòng)作來實(shí)現(xiàn)，以滿足不同設(shè)計(jì)需求。

一、文字按鈕元件

1. 創(chuàng)建文字按鈕所需的元件

1）在元件庫中拖出一個(gè)文本框元件。

2）選中文本框元件，在樣式窗格中將按鈕元件的寬設(shè)置為80，高設(shè)置為35，輸入文本“文字按鈕”文本居中，線寬為0。

2. 創(chuàng)建“文字按鈕”的交互狀態(tài)

1）選中“文字按鈕”，在交互窗格點(diǎn)擊添加類似“鼠標(biāo)懸?！钡慕换邮?選擇“鼠標(biāo)懸停的樣式”將字體和線段顏色改為藍(lán)色（#0052D9），點(diǎn)擊完成。

2）選擇“鼠標(biāo)按下的樣式”將字體顏色改為藍(lán)色（#20A0FF），點(diǎn)擊完成。

預(yù)覽交互：點(diǎn)擊預(yù)覽，在預(yù)覽頁面鼠標(biāo)懸停、點(diǎn)擊會(huì)出現(xiàn)相應(yīng)的填充效果。

3. 創(chuàng)建默認(rèn)按鈕所需的元件

1）打開一個(gè)新的 RP 文件并在畫布上打開 Page 1。

2）在元件庫中拖出一個(gè)按鈕元件。

3）選中按鈕元件，在樣式窗格中將按鈕元件的寬設(shè)置為80，高設(shè)置為35，線段顏色淺灰（#D9D9D9）線寬為1，輸入文本“默認(rèn)按鈕”文本居中。

4. 創(chuàng)建“默認(rèn)按鈕”的交互狀態(tài)

1）選中“默認(rèn)按鈕”，在交互窗格點(diǎn)擊添加類似“鼠標(biāo)懸停”的交互樣式。

2）選擇“鼠標(biāo)懸停的樣式”將字體和線段顏色改為藍(lán)色（#0052D9），點(diǎn)擊完成。

3）選擇“鼠標(biāo)按下的樣式”將字體顏色改為藍(lán)色（#20A0FF），點(diǎn)擊完成。

預(yù)覽交互：點(diǎn)擊預(yù)覽，在預(yù)覽頁面鼠標(biāo)懸停、點(diǎn)擊會(huì)出現(xiàn)相應(yīng)的填充效果。

4）復(fù)制默認(rèn)按鈕，粘貼到畫布上，選中復(fù)制默認(rèn)制按，在樣式窗格中將按鈕填充色設(shè)置為灰色（#F2F2F2），其他條件不變。

預(yù)覽交互：點(diǎn)擊預(yù)覽，在預(yù)覽頁面鼠標(biāo)懸停、點(diǎn)擊會(huì)出現(xiàn)相應(yīng)的填充效果。

5）復(fù)制默認(rèn)按鈕，粘貼到畫布上，選中復(fù)制默認(rèn)制按，在樣式窗格中將按鈕線型設(shè)置為虛線，輸入文本“虛線按鈕”文本居中。其他條件不變。

預(yù)覽交互：點(diǎn)擊預(yù)覽，在預(yù)覽頁面鼠標(biāo)懸停、點(diǎn)擊會(huì)出現(xiàn)相應(yīng)的填充效果。

5. 創(chuàng)建“成功按鈕”所需的元件

1）復(fù)制“文字按鈕”粘貼到畫布上，選中復(fù)制文字按鈕，在樣式窗格中將文字顏色改成白色，填充設(shè)置成綠色（#13CE66）,圓角半徑45，輸入文本“成功按鈕”文本居中。

6. 創(chuàng)建“成功按鈕”的交互狀態(tài)

1）選中“成功按鈕”，在交互窗格點(diǎn)擊添加類似“鼠標(biāo)懸?！钡慕换邮?，選擇“鼠標(biāo)懸停的樣式”將填充色顏色改為淺綠色（#42D885），點(diǎn)擊完成。

2）選擇“鼠標(biāo)按下的樣式”將填充顏色改為綠色（#11B95C），點(diǎn)擊完成。

預(yù)覽交互：點(diǎn)擊預(yù)覽，在預(yù)覽頁面鼠標(biāo)懸停、點(diǎn)擊會(huì)出現(xiàn)相應(yīng)的填充效果。

7. 創(chuàng)建“警告按鈕”所需的元件

1）復(fù)制“默認(rèn)按鈕”粘貼到畫布上，選中復(fù)制默認(rèn)按鈕，輸入文本“警告按鈕”文本居中。

8. 創(chuàng)建“警告按鈕”的交互狀態(tài)。

1）選中“警告按鈕”，在交互窗格點(diǎn)擊新建交互，單擊時(shí)，設(shè)置選中，當(dāng)前元件為切換，點(diǎn)擊完成。

2）選擇“鼠標(biāo)懸停的樣式”將字體和線段顏色改為橙色（#F7BA2A），點(diǎn)擊完成。

3）選擇“元件選中的樣式”將字體顏色改為橙色（#F7BA2A），點(diǎn)擊完成。

預(yù)覽交互：點(diǎn)擊預(yù)覽，在預(yù)覽頁面鼠標(biāo)懸停、點(diǎn)擊會(huì)出現(xiàn)相應(yīng)的填充效果。

9. 創(chuàng)建“危險(xiǎn)按鈕”所需的元件

1）復(fù)制“默認(rèn)按鈕”粘貼到畫布上，選中復(fù)制默認(rèn)按鈕，在樣式窗格中，將字體顏色，線段顏色改為紅色（#FF354E），填充色改為（#FFEEEE）輸入文本“警告按鈕”文本居中。

10. 創(chuàng)建“危險(xiǎn)按鈕”的交互狀態(tài)

1）選中“危險(xiǎn)按鈕”，在交互窗格點(diǎn)擊新建交互，單擊時(shí)，設(shè)置選中，當(dāng)前元件為切換，點(diǎn)擊完成。

2）將“鼠標(biāo)懸停的樣式”字體改成白色（#FFFFFF），線段和填充顏色顏色改為紅色（#FF354E），點(diǎn)擊完成。

3）刪除“鼠標(biāo)懸停的樣式”添加“元件選中時(shí)”字體改成白色（#FFFFFF），線段和填充顏色顏色改為紅色（#FF354E），點(diǎn)擊完成。

預(yù)覽交互：點(diǎn)擊預(yù)覽，在預(yù)覽頁面鼠標(biāo)懸停、點(diǎn)擊會(huì)出現(xiàn)相應(yīng)的填充效果。

預(yù)覽地址：https://9v1qjl.axshare.com