?為了設(shè)計(jì)正確的交互，我們需要回顧一下物理按鈕的歷史和起源，物理按鈕是UI組件的直接前身，如今在所有數(shù)字產(chǎn)品中都被大量使用。按鈕是一款非常不錯的設(shè)計(jì)，即使用戶不了解基本的機(jī)制或算法，手指的觸摸也會使電器、汽車或系統(tǒng)處于運(yùn)動狀態(tài)。在《電源按鈕》(Power Button)一書中，雷切爾·普洛特尼克（Rachel Plotnick）追溯了當(dāng)今按鈕文化的起源，并描述了按鈕推動成為數(shù)字命令手段的方式，這種方法保證了輕松、謹(jǐn)慎和安全的控制。

“你按一下按鈕，剩下的由我們來做?！?—柯達(dá)相機(jī)通過一句朗朗上口、直接的廣告語，吸引著潛在的消費(fèi)者。

即使在今天，這也是吸引用戶的原因。通過簡單地觸摸讓事情發(fā)生的即時(shí)滿足感。盡管有大量的新家用電器和其他設(shè)備遷移到觸摸屏控件，但物理按鈕并沒有很快消失，而由它們形成的行為習(xí)慣會影響按鈕設(shè)計(jì)的直觀性和易用性。

按鈕與鏈接

按鈕傳達(dá)用戶可以執(zhí)行的操作。它們通常被放置在整個UI中，比如：對話框、窗體、工具欄等。按鈕和鏈接之間的區(qū)別很重要：

• 導(dǎo)航到另一個位置時(shí)使用鏈接，例如：“查看全部”頁面，“ Roger Wright”個人資料等。
• 在執(zhí)行動作時(shí)使用按鈕，例如：“提交”、“合并”、“新建”、“上傳”等。

按鈕狀態(tài)將其狀態(tài)傳達(dá)給用戶

為按鈕創(chuàng)建正確的交互和樣式是過程中最重要的部分之一。每個州都必須有清晰的可視性，以使其與其他州和周圍的布局區(qū)分開來，但不得徹底改變組件或產(chǎn)生大量視覺噪聲。

• 正?！硎驹摻M件是交互式的且已啟用。
• 焦點(diǎn)—使用鍵盤或其他輸入法傳達(dá)用戶突出顯示一個元素的信息。
• 懸?！?dāng)用戶將光標(biāo)置于交互式元素上方時(shí)進(jìn)行通信。
• 激活或按下狀態(tài)表示用戶已輕按按鈕。
• 進(jìn)度/加載—在不立即執(zhí)行操作并通知組件正在完成操作的過程中使用。
• 已禁用—表示該組件當(dāng)前處于非交互狀態(tài)，但將來可以啟用。

按鈕有各種顏色、形狀和大小。

最常見的是帶有圓角的矩形按鈕，這些按鈕易于識別并且在輸入字段旁邊看起來不錯。為按鈕選擇正確的樣式將取決于目的、平臺和指南。以下是一些最受歡迎的樣式變體：

風(fēng)格傳達(dá)了行動的重要性

樣式主要用于區(qū)分較重要的動作和不重要的動作。創(chuàng)建一個動作層次結(jié)構(gòu)，該層次結(jié)構(gòu)將指導(dǎo)用戶進(jìn)行多種選擇。通常，你可以有一個突出的按鈕（該樣式通常稱為“主要”按鈕），以及幾個中等的“次要”和低強(qiáng)調(diào)的“第三”操作。

有時(shí)沒有“默認(rèn)值”

通常，你希望將最常用的按鈕設(shè)置為“默認(rèn)”（使用主要樣式）并將其置于焦點(diǎn)狀態(tài)。這可以幫助大多數(shù)用戶更快地完成任務(wù)，并為他們指明正確的方向。

唯一的例外是，當(dāng)所有選擇都相等時(shí)，或者操作特別危險(xiǎn)時(shí)，在這種情況下，你希望用戶明確地選擇按鈕，而不是意外地選擇按鈕。

不要讓我想

“不要讓我思考”是可用性工程師史蒂夫·克魯格（Steve Krug）撰寫的書的標(biāo)題。它涉及的許多要點(diǎn)之一是，使界面對于用戶顯而易見而不是引起困惑或迷宮是多么重要?；诙嗄晔褂酶鞣N設(shè)備和其他產(chǎn)品的經(jīng)驗(yàn)，我們對按鈕的外觀和功能有了一定的期望。與“標(biāo)準(zhǔn)”的較大偏差會給用戶帶來延遲和困惑。

避免對交互式和非交互式元素使用相同的顏色。如果交互式和非交互式元素具有相同的顏色，則人們很難知道在哪里點(diǎn)擊。

一致性提高了速度和準(zhǔn)確性

“一致性是最強(qiáng)大的可用性原則之一：當(dāng)事物始終表現(xiàn)相同時(shí)，用戶不必?fù)?dān)心會發(fā)生什么?！?—雅各布·尼爾森（Jakob Nielsen）

一致性提高了速度和準(zhǔn)確性，有助于避免錯誤。創(chuàng)建可預(yù)測性，以幫助用戶掌控自己并能夠在產(chǎn)品中實(shí)現(xiàn)其目標(biāo)。當(dāng)你創(chuàng)建主要、次要和第三種樣式時(shí)，請嘗試查找一些常見的元素，例如顏色、形狀等。不僅要在設(shè)計(jì)系統(tǒng)內(nèi)部保持一致，還要注意你所設(shè)計(jì)的平臺。

使按鈕足夠大，以實(shí)現(xiàn)可靠的交互

按下按鈕應(yīng)該是一個簡單的任務(wù)，如果用戶無法成功地輕按按鈕或在過程中錯誤地輕按相鄰元素，將會導(dǎo)致負(fù)面的體驗(yàn)并浪費(fèi)時(shí)間。

對于大多數(shù)平臺，請考慮使觸摸目標(biāo)至少達(dá)到48 x 48 dp。無論屏幕大小如何，此尺寸的觸摸目標(biāo)的物理尺寸約為9mm。觸摸屏元件的建議目標(biāo)尺寸至少為7–10mm。

對于圖標(biāo)按鈕，請確保觸摸目標(biāo)超出了元素的可視范圍。這不僅適用于移動設(shè)備或平板電腦，而且相同大小的建議也適用于網(wǎng)絡(luò)上的指針設(shè)備（如鼠標(biāo)）。

無障礙設(shè)計(jì)

對于每個組件都應(yīng)重復(fù)此建議，目標(biāo)區(qū)域大小是影響可訪問性的因素之一。其他是字體大小、顏色和對比度。有大量工具可以幫助你輕松檢查組件設(shè)計(jì)的性能。

設(shè)計(jì)師應(yīng)與開發(fā)團(tuán)隊(duì)緊密合作，以確保按鈕與屏幕閱讀器配合使用。按鈕角色應(yīng)用于當(dāng)用戶激活時(shí)觸發(fā)響應(yīng)的可點(diǎn)擊元素。添加role =” button”將使元素作為按鈕控件出現(xiàn)在屏幕閱讀器上。

手勢被廣泛采用

手勢使用戶可以通過觸摸與應(yīng)用程序進(jìn)行交互。使用觸摸作為執(zhí)行任務(wù)的另一種方法可以節(jié)省時(shí)間并提供觸覺控制。隨著某些手勢（例如滑動以觸發(fā)上下文動作，雙擊來點(diǎn)贊或長按）每天都在廣泛使用，對于普通用戶而言，它們?nèi)匀徊皇呛苊黠@。我建議使用它們作為對高級用戶執(zhí)行操作的替代方法。

好的按鈕標(biāo)簽邀請用戶采取行動

你的按鈕所表達(dá)的內(nèi)容與其外觀一樣重要。使用錯誤的標(biāo)簽可能會導(dǎo)致用戶感到困惑，浪費(fèi)時(shí)間，并可能導(dǎo)致一些重大錯誤。

一個好的按鈕標(biāo)簽會邀請用戶采取行動。最好使用動詞，并在按鈕上標(biāo)記其實(shí)際功能。就像按鈕在問用戶—“Would you like to (Add to basket)?” 或“您要（確認(rèn)訂單）嗎？”。

避免使用Yes 、No或過于通用的標(biāo)簽，例如Submit。

確定/取消還是取消/確定？都可以

兩者都是選擇，設(shè)計(jì)師可以花幾個小時(shí)來討論自己的偏好。

• 有確定行動第一支持自然閱讀順序，如果我們知道這很可能會選擇用途，則可能會節(jié)省一些時(shí)間。Windows先放OK
• 最后列出OK可以改善流程，有些人可能會說“OK”是因?yàn)橄乱粋€按鈕將使用戶向前移動。把ok放到最后，可以幫助用戶評估所有選項(xiàng)，然后再采取行動，并幫助避免錯誤和倉促決策，蘋果推出OK最后

任何一種選擇都有其良好的論據(jù)，并且任何選擇都不會造成可用性災(zāi)難。我個人通常將“確定”放在對話列表之類的操作列表的最后（也許是因?yàn)槲抑饕荕ac用戶。）

禁用的按鈕很爛

每個人以前都遇到過這種情況。被卡在屏幕上幾秒鐘或幾分鐘，試圖弄清楚為什么你的進(jìn)程被一個禁用按鈕阻止，你需要做什么來讓這個東西起死回生)。禁用控件用于指示組件當(dāng)前是非交互的，但將來可以啟用。使用禁用按鈕是因?yàn)閷粹o從其本機(jī)位置刪除并在以后的上下文中顯示可能會迷惑用戶。

我建議盡量避免禁用按鈕，最好始終啟用它，如果用戶未提供某些必需信息，則只需突出顯示空白字段或顯示通知即可。

文中所用圖片來自網(wǎng)絡(luò)，如侵權(quán)，請聯(lián)系刪除

想要了解汽車更多內(nèi)容，就留言聯(lián)系我們吧！

來源：Taras Bakusevych：Button Design — UI component series

- 服務(wù)內(nèi)容 -