七個按鈕設計的基本規則

這篇文章原文來自Nick Babich的《7 Basic Rules for Button Design》

按鈕作為交互設計中最基本的元素,在系統和用戶之間的聯繫中扮演著重要的角色。在這篇文章中，我將會與你們回顧七個基本原則關於如何創建有效的按鈕

1.讓按鈕看起來像按鈕

當用戶和系統進行交互的時候，必須讓他們立刻明白什麼是「可點擊的」什麼不是。在每個項目里，設計都要盡量讓用戶更容易解讀。一般來說，需要用戶花更多時間來解讀的UI對用戶來說就更不易用。

但用戶是怎樣去識別一個設計元素是否為可交互的呢？他們一般會用之前的經驗和視覺標記去明確當前UI所要傳遞的含義。這也就是為什麼使用合適的視覺標記（例如尺寸、形狀、顏色、陰影等等）讓按鈕看起來很重要。視覺標記能夠掌控基本信息價值—有利於在界面創建*可供性（原文中用的是affordances）。

不幸的是。在很多界面中，可進行交互的標記總是設計得很微弱並且需要

與其進行交互作用，因此有效地削弱了可發現性。

如果在設計的過程中缺失了清晰的可供性，那麼用戶在使用的過程中就會很糾結什麼是「可點擊」什麼不是，這與我們的設計多炫酷無關。當他們發現你的系統很難使用的時候，他們會變得心力交瘁最後發現你的系統並不適用於他。

微弱的標記在移動用戶中有著更重要的意義。對於使用電腦的用戶來說，他們能夠通過使用游標和元素的交互來判斷每個獨立的交互是否可點擊。但是對於移動端用戶來說則沒有這個機會—他們只能通過手指去點擊每個元素來檢查其是否為可交互，沒有其他的方法了。

不要假想你設計的UI對用戶來說已經很易讀了

在很多案例中，設計師們都會故意不將按鈕的可交互性質表現出來，因為他們覺得對於用戶來說已經足夠明顯了。因此當我們在設計每一個界面的時候，都應該遵循這樣的規則：

你對於可交互的標記和你的用戶理解程度不一樣，你能夠理解只是因為這些設計都是你有意為之的。

使用用戶熟悉的設計樣式

這裡有幾個對於大多數用戶來說都比較熟悉的按鈕設計樣式：

• 方形形狀按鈕
• 圓角矩形形狀按鈕
• 帶有陰影形狀按鈕
• 幽靈按鈕

在這些舉例當中，「帶有陰影形狀的按鈕」設計樣式對於用戶來說是最好理解的，當用戶看到按鈕是凸起的，他們馬上會明白這是可以按下去的。

不要忽略留白

不僅只有視覺內容是重要的，按鈕周邊的留白也會讓其看起來更容易（或更難）理解。接下來這個舉例當中就說明了，當在一個幽靈按鈕旁邊都是信息內容時用戶會感到十分困惑。

2.把按鈕放在用戶期望的位置

按鈕應該放在用戶容易找到或者期望的位置中，不要讓你的用戶如同狩獵一樣在尋找按鈕，不然他們根本不會知道這個界面有按鈕的存在

儘可能使用經典的布局和標準的UI樣式

將按鈕放在用戶可預想的位置有助於提升可發現性。在標準布局中，用戶很快就會明確每個元素的目的—即便這個按鈕沒有很明顯的標記。結合標準的布局，清晰的視覺設計以及足夠的留白將會讓整個布局顯得更好理解。

Tips：測試你的設計是否具有可發現性。當用戶第一次用你的產品就能夠通過導航到達你所想的界面內容，那麼也就證明對於他們來說也很容易去找到按鈕。

3.按鈕要帶有明確的指示

若按鈕帶有同類意思或誤導性將會對你用戶使用起來是個災難。按鈕的文案應該具有明確的指示性。理想狀態下，按鈕應該具有明確的行為描述。

用戶應該清楚地知道當他們按下按鈕之後將會發生什麼。在這裡我可以給你們舉一個簡單的例子。想像一下你意外觸發了一個刪除的按鈕，接著你就看到了這麼一條提示消息。

在這個對話框中「確認」和「取消」表達的意思並不十分明朗，很多用戶看到之後都需要問一下自己「如果我按下取消之後會發生什麼呢？」

在設計對話框或者表單填寫時不要簡單在按鈕上寫上「確認」或者「取消」

在這個案例中只要將「確認」修改為」清除」，用戶將會更容易理解。同時，如果刪除在這裡是個危險的動作，那麼你可以使用紅色來提醒用戶這一點。

4.按鈕需要有適合的尺寸

按鈕的尺寸大小應該反應出它在這個界面的優先順序。更大的按鈕表示其更為重要。

區分按鈕的優先順序

將最重要的按鈕設計得看上去是最重要的。記得總是把最主要的按鈕做得最突出。通過增加尺寸（更大的按鈕對用戶來說更具有重要性）並且強烈的顏色對比來吸引用戶的的注意力。

對移動端用戶來說需考慮友好的觸屏操作

在很多手機App中，很多按鈕都很小。這就會導致用戶的誤操作。

MIT Touch Lab 發現了指墊需要平均10-14mm而指尖則是「8-10mm」才能保證用戶和系統交互。因此我們也能夠得出可點擊目標最適合的最小尺寸為10mm*10mm

5.注意順序

按鈕順序應該能反映用戶和系統自然的對話.問問你自己，怎樣的順序事符合用戶心智模型的並進行對應的設計。

用戶界面是你與用戶之間的對話。

比如，關於」上一個/下一個「按鈕如何在界面上進行布局呢？從邏輯上來說假如你想要下一步應該把按鈕放在右邊，而如果你要上一步按鈕應該在左邊。

6.避免使用過多的按鈕

這是一個在移動或者網頁普通存在的問題。然而當你提供給用戶過多的選擇，用戶往往會什麼都做不了。因此當你在設計界面的時候，想想在這個界面里你最想讓用戶操作的是什麼？

7.交互時提供視覺或者音效上的反饋

當用戶點擊了按鈕之後，他們期望能夠收到適當的反饋。基於操作類型，不外乎就是視覺或者音效上的反饋。當用戶沒有收到任何反饋的時候，他們就會思考系統是否接受到了請求並且會反覆重複操作。諸如此類的行為將會導致很多不必要的操作。

為什麼會發生這樣的狀況呢？事實上，每個人都希望當我們與一個實物進行交互的時候能夠得到相應的反饋，這可能是視覺上，音效上甚至觸覺上的反饋—不管是哪一種形式都能會讓用戶知道系統已經受到了他的指令。

對於下載操作來說，我們不僅要告知用戶系統已接受到指令還要告知其成功與否。

結論

儘管按鈕作為界面中基本的元素，但也需要我們設計師花費儘可能多的時間來讓其變得足夠好。記住，按鈕的設計需要足夠清晰與易辨。

謝謝！