編者按：一個(gè)合格的 UI 按鈕到底需要具備什么樣的素質(zhì)?在很多設(shè)計(jì)師眼里似乎并不是一個(gè)太大的問題的，但是在實(shí)際設(shè)計(jì)的時(shí)候，UI 按鈕的細(xì)節(jié)處理不到位的情況卻比比皆是。來自資深設(shè)計(jì)師 Taras Bakusevych 的這篇文章《Button Design — UI component series》 ，詳細(xì)拆解了一個(gè)設(shè)計(jì)良好的 UI 按鈕，應(yīng)該有哪些「自我修養(yǎng)」。

為了更好地設(shè)計(jì)交互界面，有的時(shí)候，我們需要重新回顧一下歷史。想要設(shè)計(jì)好一個(gè)按鈕，也許我們不用完整地回溯整個(gè) UI 界面的發(fā)展歷史，但是至少要回到數(shù)字界面誕生之前看一看。

按鈕很重要。按鈕很棒。

在沒有圖形化界面的年代，使用按鈕來實(shí)現(xiàn)復(fù)雜的命令，將算法和功能隱藏在一個(gè)按鈕背后，讓電器、汽車或者系統(tǒng)發(fā)揮作用。在《Power Button》一書中，Rachel Plotnick 回溯了如今整個(gè)按鈕文化的起源，在書中，他認(rèn)為是按鈕推動了數(shù)字技術(shù)，讓復(fù)雜的命令得以以輕松、便捷且防呆的方式，在我們的生活中普及。

「你只需要按一下按鈕，剩下的交給我們?！?mdash;—柯達(dá)相機(jī)通過這種醒目的Slogan吸引潛在的消費(fèi)者。

即使在今天，足夠便捷的按鈕設(shè)計(jì)，也是吸引用戶的原因。比如 iPhone 的 home 鍵。通過簡單的觸摸、按下來完成任務(wù)，讓人享受到強(qiáng)烈的即時(shí)滿足感。盡管成千上萬的數(shù)字產(chǎn)品和家電開始加上觸摸屏，但是物理按鈕還沒有消失，而虛擬的按鈕更是交互的基礎(chǔ)設(shè)施。實(shí)體按鈕在過去一個(gè)世紀(jì)里所塑造的體驗(yàn)和認(rèn)知根深蒂固，它所塑造的習(xí)慣、認(rèn)知和文化影響著設(shè)計(jì)的直觀性和易用性。

按鈕和鏈接的差別

按鈕傳達(dá)給用戶的是直接的可執(zhí)行性的操作，它們通常會存在于整個(gè) UI 界面體系當(dāng)中，從各種對話框、窗口到工具欄。按鈕和鏈接在某些功能體驗(yàn)上很接近，但是兩者之間的區(qū)別是很重要的：

• 導(dǎo)航到另外一個(gè)位置的時(shí)候使用鏈接。比如「查看全部」頁面，用戶「Roger Wright」的個(gè)人資料，等。
• 執(zhí)行特定操作的時(shí)候的按鈕。比如「上傳」、「新建」、「合并」等等。

按鈕會將它的狀態(tài)告訴用戶

創(chuàng)建按鈕需要使用正確的樣式，而用來昭示按鈕狀態(tài)的不同樣式設(shè)計(jì)，是按鈕設(shè)計(jì)過程中繞不過的工作。每種狀態(tài)都必須有明確的「可供性」，這樣才能讓它和其他的元素、布局區(qū)分開來。但是，差異化的設(shè)計(jì)又不能造成喧賓奪主的效果，制造視覺噪音。

• 正常狀態(tài)——表示按鈕是可交互的，并且可用的。
• 聚焦?fàn)顟B(tài)——通過高亮的形式告訴用戶，它已經(jīng)被鍵盤或者其他的方式所選中
• 懸停狀態(tài)——當(dāng)用戶使用光標(biāo)或者其他的元素，置于其上方的時(shí)候，顯示這樣的狀態(tài)
• 激活狀態(tài)——表示用戶已經(jīng)按下按鈕(且還未結(jié)束按按鈕的動作)
• 加載狀態(tài)——表示操作正在加載中，組件正在反映，但是操作還未完成
• 禁用狀態(tài)——表示當(dāng)前組件處于非交互狀態(tài)，但是之后可以被啟用

按鈕有各種不同的色彩、形狀和大小

圓角矩形的按鈕是最常見的按鈕，這些按鈕被置于輸入框旁邊，非常易于識別，特別常見。但是按鈕的樣式、大小變化范疇非常大，使用什么樣的樣式，取決于你要做什么，所用的平臺，以及需要遵循的規(guī)范。下面是一些最常用的、受歡迎的樣式：

樣式可以用來呈現(xiàn)按鈕的重要性

樣式優(yōu)先級是用來區(qū)分按鈕和操作重要性的。通過樣式，可以區(qū)分出代表背后操作的重要性層級，從而指引用戶進(jìn)行多方面的選擇。通常，你可以讓最重要的按鈕使用優(yōu)先級最高的樣式，這種按鈕通常是「主按鈕」，同時(shí)搭配幾個(gè)次優(yōu)先級的按鈕，而其他很少使用、優(yōu)先級不高、不推薦使用的按鈕，則使用第三級的樣式。

有時(shí)按鈕沒有「默認(rèn)狀態(tài)」

通常，我們會將用戶最常用到的按鈕使用「默認(rèn)」?fàn)顟B(tài)，也就是常說的聚焦?fàn)顟B(tài)，或者是主樣式，這樣可以幫助用戶更快完成任務(wù)，指引正確的方向。但是也有例外的情況，比如所有選擇都是平級、對等的情況下，或者說所有的操作都是有潛在風(fēng)險(xiǎn)的情況下，這個(gè)時(shí)候，你可能會使用兩個(gè)次優(yōu)先級的按鈕樣式來呈現(xiàn)所有按鈕。

「不要讓我思考」

「Don’t Make Me Think」 是可用性大師 Steve Krug 經(jīng)典的設(shè)計(jì)入門書中所提到的一種設(shè)計(jì)精神，它涉及到許多要點(diǎn)，但是核心思想是要讓設(shè)計(jì)顯而易見，不要讓用戶感到迷惑。這是基于多年橫跨多設(shè)備、各種產(chǎn)品設(shè)計(jì)之后沉淀下來的經(jīng)驗(yàn)。我們對于按鈕的功能和體驗(yàn)是有期望和基礎(chǔ)認(rèn)知的，與我們通常所見的按鈕差別太大，會讓人感到困惑。

避免對交互式和非交互式的元素使用相同的顏色，否則用戶會很難判斷到底哪里可以被點(diǎn)擊。

一致性設(shè)計(jì)可以提高交互準(zhǔn)確度和效率

「一致性是非常強(qiáng)大的可用性原則：當(dāng)事物的表現(xiàn)和反饋保持一致的時(shí)候，用戶不會擔(dān)心會有意外發(fā)生?！?mdash;—Jakob Nielsen

一致性提高了用戶交互的速度和準(zhǔn)確性，有助于避免錯(cuò)誤。這在很大程度上讓設(shè)計(jì)具備了可預(yù)測性，用戶能夠清楚自己能夠做到什么。當(dāng)你創(chuàng)建三種不同層級的樣式的時(shí)候，請盡量使用相對一致、具有延續(xù)性的設(shè)計(jì)，按鈕在整套體系內(nèi)部是高度一致的，并且要兼顧到其他可能會用到它的平臺。

讓按鈕足夠大，確保交互可靠性

按下按鈕應(yīng)該是一個(gè)簡單的任務(wù)，如果用戶無法成功地輕點(diǎn)按鈕，或者在操作過程中無從旁邊的元素，這會帶來負(fù)面的體驗(yàn)，并且浪費(fèi)時(shí)間。

對于絕大多數(shù)平臺，請盡量讓按鈕的大小在 48×48 dp 以上(最早 iOS 上按鈕的最小尺寸為 44×44 dp)。無論屏幕大小如何，觸摸按鈕控件的物理觸摸尺寸應(yīng)該至少為 9 mm ，觸摸屏幕上，按鈕控件的可視尺寸應(yīng)該在 7~10 mm 這個(gè)范疇內(nèi)。

對于圖標(biāo)按鈕，盡量讓它的觸摸尺寸大于它的可視尺寸，這不僅適用于移動端觸摸屏，對于普通的網(wǎng)頁和桌面端 UI 也是一樣。

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

對于每個(gè)組件，都應(yīng)該保持足夠的可訪問性，嚴(yán)格意義上來說，就是遵循 WCAG 的標(biāo)準(zhǔn)，在色彩、布局等細(xì)節(jié)上，確保有視覺障礙的用戶可以輕松地使用他們。有大量的在線的工具可以幫你測試設(shè)計(jì)的可訪問性，確保無障礙。

設(shè)計(jì)師應(yīng)當(dāng)和開發(fā)者緊密合作，確保按鈕可以和屏幕閱讀器可以配合使用，添加 role = “button” 到代碼當(dāng)中，確保元素可以調(diào)用屏幕閱讀控件，讓視障用戶可以使用這一切。

記得兼顧手勢操作

手勢交互如今已經(jīng)是觸摸交互的基礎(chǔ)了。諸如滑動、雙擊、長按這樣的交互已經(jīng)被用戶廣泛接受，并且每天都在高頻度地使用。但是對于普通用戶而言，它們依然不是很明顯，因?yàn)槭謩菔悄J(rèn)「隱形」的。我建議對于手勢交互提供支持，但是不作為唯一的交互方式，依然以顯性的按鈕交互作為基礎(chǔ)。

優(yōu)秀的按鈕標(biāo)簽?zāi)軌虼龠M(jìn)用戶操作

按鈕上的標(biāo)簽文本和它的視覺外觀一樣重要。使用錯(cuò)誤的標(biāo)簽文本會讓人感到困惑，會浪費(fèi)時(shí)間，會帶來問題。

這也是為什么微文案的重要性在如今被一再提高。好的按鈕文本同樣是被精心設(shè)計(jì)出來的。最好使用動詞提供趨勢引導(dǎo)，并且標(biāo)注出它的實(shí)際功能。就像按鈕在問用戶「您要(將商品)添加購物車嗎?」或者「(您要)確認(rèn)訂單嗎?」

避免使用「是」和「否」這樣可能會存在歧義的、簡單的文本。

「取消/確認(rèn)」還是「確認(rèn)/取消」?都可以

「確認(rèn)」和「取消」到底哪個(gè)在左，哪個(gè)在右?有的設(shè)計(jì)師可能會花費(fèi)好幾個(gè)小時(shí)來糾結(jié)和確認(rèn)。

• 將「確認(rèn)」置于首位。如果我們知道「確認(rèn)」可能是多數(shù)情況下的選擇，并且這樣的放置能夠節(jié)省用戶交互時(shí)間，那么可以這么放。
• 將「確認(rèn)」置于末位。有人認(rèn)為將「確認(rèn)」置于末位能夠促進(jìn)用戶去點(diǎn)擊。更多的時(shí)候，置于這樣的位置可能會促進(jìn)用戶衡量和思考是否要點(diǎn)擊。蘋果的設(shè)計(jì)當(dāng)中，「確認(rèn)」常常被置于末位。

其實(shí)哪種使用方式都有良好的論據(jù)支撐，并且任何選擇都不會是災(zāi)難性的。我個(gè)人傾向于將「確認(rèn)」置于末位(這可能是因?yàn)槲沂且粋€(gè) Mac 用戶)。

禁用按鈕令人抓狂

每個(gè)人都或多或少會碰到這樣的情況，被卡在頁面上好一陣子，想搞清楚到底表單哪里填錯(cuò)了導(dǎo)致無法推進(jìn)。禁用狀態(tài)下的按鈕令人抓狂，雖然后續(xù)如果正確觸發(fā)可以啟用，但是此刻是讓人糟心的。結(jié)合信息引導(dǎo)和錯(cuò)誤說明，讓按鈕保持正常狀態(tài)，讓「可點(diǎn)擊」的狀態(tài)呈現(xiàn)出來，會讓用戶更舒適。

我建議盡量避免使用按鈕的禁用狀態(tài)。

結(jié)語

按鈕的使用有很多技巧，但是這里只是最常用也最容易忽略的一部分。在 UI 控件的設(shè)計(jì)和使用上，這么些年已經(jīng)逐步地完善成為了一套成型的「設(shè)計(jì)禮儀」，在設(shè)計(jì)的時(shí)候需要多加注意。