編輯導語：我們在使用Web或者移動端時經(jīng)常會看到一些按鈕，比如確認、切換、返回、取消等等，這些按鈕的設計會參考到用戶體驗的感受，比如關閉按鈕的顏色或者大小與旁邊的按鈕有明顯的區(qū)別，為了使用戶能夠清楚的區(qū)分；本文作者分析了怎么做好按鈕的用戶體驗，我們一起來看一下。

對于按鈕控件，Material Design 在規(guī)范中寫下了“突出一個按鈕”原則：布局中應包含一個視覺突出按鈕，以使其他按鈕在層次結構中的重要性降低，讓此高強調(diào)按鈕吸引用戶最多的關注。

依據(jù)用戶體驗設計的宗旨，把這么長一段話說直白一些，其實就是——讓按鈕幫助用戶做出最優(yōu)選擇。

越是權威的設計團隊，對自家所探尋出來的核心原則越是從一而終；Google 產(chǎn)品線的按鈕設計，始終遵循著MD規(guī)范這一個標準。

我想就這一標準，來展開對于「按鈕」設計的探索。

一、在層級上「幫用戶做出最優(yōu)選擇」

Material Design 按照視覺強調(diào)程度將按鈕分為了四個類型：

1. 文字按鈕（低強調(diào)）：通常用于次要操作；
2. 輪廓按鈕（中等強調(diào)）：描邊讓輪廓按鈕比文本按鈕更突出一些；
3. 填充按鈕（重點強調(diào)）：填充按鈕具有視覺重點，因為它們使用了顏色填充和陰影；
4. 切換按鈕（按鈕組）：使用布局將同類按鈕分組。與其他按鈕類型相比，它們的使用頻率較低。

MD規(guī)范之所以如此定義按鈕類型，其實就是為了滿足設計原則中的「對比」原則，足夠差異化的對比才能讓用戶視線有明確的著陸點。

你可以用“較高視覺級+較低視覺級”的按鈕搭配，來引導用戶在當前場景做出更重要的操作。

這一手法示例在許多產(chǎn)品中屢見不鮮；例如在一些功能性場景中，出于用戶體驗，用“較高視覺級”按鈕來輔助用戶進行正確操作。

而在一些非功能性場景中，許多產(chǎn)品還使用這個手法來突出重要操作，為業(yè)務引流；甚至你可以從中去摸索到競品當前對哪一塊業(yè)務更具有側重點。

例如信用消費類金融產(chǎn)品常常用“較高視覺級”按鈕引導用戶對賬單進行分期；而京東白條在賬單還款時，也用“較高視覺級”按鈕引導用戶進行“小金庫還款”，為自家的金融業(yè)務引流。

這些案例都是在視覺上幫用戶做出選擇。

但反其道而行之，我們也可以推敲出，當當前場景的敏感度較高時，我們也可以降低按鈕的視覺對比，不要對用戶進行引導，讓用戶自行謹慎操作，做出選擇；一般在協(xié)議、隱私條款場景這樣的設計會更為常見。

二、在尺寸上「幫用戶做出最優(yōu)選擇」

按鈕尺寸是設計界老生常談的一個問題了，想必最經(jīng)典的按鈕尺寸標準就是 iOS人機設計規(guī)范提到的“44pt”；除此之外還有MD規(guī)范對安卓按鈕定義的“36dp”、“56dp”等等。

但你是不是也疑惑，為什么我們常?？吹桨粹o五花八門的設計尺寸？“44pt”真的是按鈕尺寸的標準嗎？

這個回答可以在設計師 Scott Hurff 曾寫過一篇關于按鈕可行性的博文中找到答案。

Scott Hurff 在使用 iOS 9 鎖屏狀態(tài)下的 Apple Music 時，遇到了問題：在我想切歌時，我常常無法一次就點中切歌按鈕，我需要一而再再而三地嘗試；我甚至會因誤操作而調(diào)高音量，或是按到暫停；而 iOS 9 在這里所用到的按鈕尺寸就是經(jīng)典的44pt。

等到 iOS 10 更新了這一設計之后，上述情況改善了許多；同時也提起了 Scott Hurff 對于按鈕設計尺寸研究的興趣，并展開了一系列科學性的論證。

Scott Hurff 搬出了2006年芬蘭奧盧大學和馬里蘭大學帕克分校的研究人員合作進行的實驗。

研究人員測試了兩個場景：

• 執(zhí)行單個任務場景（如激活按鈕、點選復選框或單選按鈕）；
• 執(zhí)行連續(xù)任務場景（如輸入電話號碼）。

在研究過程中，研究人員在每個場景下都測試了一系列不同大小的按鈕。

他們發(fā)現(xiàn)，當按鈕小于9.2毫米時，單個任務場景的錯誤率顯著增加；當按鈕小于9.6毫米時，連續(xù)任務場景的錯誤率顯著增加。

當時這個實驗只確定了按鈕尺寸的合適區(qū)間，但五年后，兩所德國大學的研究人員又進行了另一項研究；這一次他們的目標是——確定觸摸屏按鈕的最佳觸摸目標尺寸。

這一次研究人員發(fā)布了一個Android游戲，該游戲被下載約10萬次，記錄了約1億2千萬次點擊事件；游戲的玩法很簡單：玩家要點擊各種大小、可能出現(xiàn)在屏幕任何地方的浮動圓圈來通關。

分析游戲中的點擊事件后，研究人員發(fā)現(xiàn)當圓圈尺寸小于15毫米，玩家的錯誤率逐步增加；當圓圈小于12毫米左右時急劇上升；當點擊目標小于8毫米時，玩家沒點中圓圈的概率超過40%。

但圓圈的尺寸大于 12毫米時，玩家的正確率也沒有顯著的數(shù)據(jù)變化，即——12毫米就像一個按鈕尺寸用戶體驗的最大臨界點。

通過兩個實驗印證了按鈕尺寸設計的科學性后，提煉出了4個關鍵數(shù)據(jù)：9.2毫米、9.6毫米、12毫米與15毫米。

而通過換算之后經(jīng)過換算可以發(fā)現(xiàn)，iOS 的按鈕建議尺寸約為 7毫米；Android 約為 9毫米；但微軟所給到的按鈕規(guī)范建議則直接是以“毫米”為單位的，定義為 13毫米。

經(jīng)過數(shù)據(jù)的換算總結可以得出以下結論：

1. Android 所定義的 36pt 按鈕高度約為5.5毫米，在設計按鈕時，盡量不要低于這個高度（文字按鈕也應該盡量把可點擊熱區(qū)擴展到這個高度）；
2. 36pt、44 pt、56 pt，這些規(guī)范參考數(shù)據(jù)在具體的頁面中需具體分析運用，目前各大規(guī)范已放開了按鈕高度的指導建議，并不是一定要讓按鈕保持一個固定的尺寸；只要在合適的可點擊范圍內(nèi)，均是合理的；
3. 根據(jù)以上的實驗結論，按鈕尺寸的最大臨界值 12毫米（約為 82pt），大于 82pt后并不能增加用戶可點擊概率，更多是視覺方面的考慮。

合理科學的按鈕尺寸可以讓用戶準確地點擊并進行操作，能夠避免發(fā)生類似 iOS 9 Apple Music 所遇到的狀況。

三、在狀態(tài)上「幫用戶做出最優(yōu)選擇」

我發(fā)現(xiàn)當下許多 APP 好像或多或少會忽略按鈕的狀態(tài)樣式設計，似乎許多人認為移動端按鈕狀態(tài)并沒有 Web 端重要，可能是因為移動端按鈕沒有 hover（懸?。?態(tài)，認為按鈕在移動端只有常態(tài)與點擊態(tài)，狀態(tài)較少，覺得用戶本身就易于區(qū)分。

但實際上MD規(guī)范提到按鈕狀態(tài)，不但沒有簡單地一筆帶過，還展開了一個專題進行了深入研究，可見把UI控件的“狀態(tài)”準確地反饋給用戶，是多么重要的一件事。

按照MD規(guī)范，按鈕的狀態(tài)，一般會發(fā)現(xiàn)有：

• Enabled – 激活狀態(tài)（按鈕常規(guī)狀態(tài)）；
• Hover-懸浮狀態(tài)（Web場景下的鼠標懸浮狀態(tài)）；
• Focused-聚焦狀態(tài)（長按聚焦狀態(tài)，如長按語音輸入）；
• Pressed-點擊狀態(tài)（按鈕被點擊按下的狀態(tài)）；
• Disable-禁用狀態(tài)（按鈕不可用的狀態(tài)）；
• Loading-加載狀態(tài)（我自行添加進來的，當下較為流行的多態(tài)按鈕）。

正確地在前期規(guī)范中定義按鈕的狀態(tài)交互及樣式，對按鈕的合理設計與用戶體驗而言其實十分重要。

按鈕狀態(tài)可以有效地傳達給用戶當前操作狀態(tài)，如發(fā)生失誤操作時可以及時止損，減少撤銷/返回操作的成本。

狀態(tài)樣式定義的過程其實并沒有想象中那么麻煩，一般視覺上可以高度與顏色來營造效果。

1. 高度

界面中往往使用陰影來營造高度視覺差，例如常態(tài)時的陰影能夠營造懸浮、可點擊的效果；禁用狀態(tài)取消陰影，可以營造按鈕觸底，無法點擊的效果。

2. 顏色

顏色的改變可以直接在按鈕上方覆蓋一層含透明度的顏色遮罩，這樣可以確保適量的底色可見性，并且針對每種不同的狀態(tài)，應調(diào)整顏色遮罩不同的透明度值。

MD有一套現(xiàn)成的透明度指導建議，可以進行參考。

四、結語

“幫用戶做出最優(yōu)選擇”說起來很容易，做起來卻容易被忽視或令產(chǎn)品設計者糾結頭疼，不然 Steve Krug 也不會寫一整本《Don’t Make Me Think》來教大家如何揣摩用戶思想的書了。

我盡量從我能考慮得到的方面，聊了關于按鈕交互的設計點，可能不太全面，也歡迎補充與校正。

至于按鈕的視覺設計，因為過于個性化，且篇幅原因，我就不再展開討論了。

希望這篇文章能夠幫助到你對按鈕有新的認識。

#專欄作家#

UCD耍家，公眾號：UCD耍家（ID：ucdplayer），人人都是產(chǎn)品經(jīng)理專欄作家。

本文由 @UCD耍家 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉載

題圖來自Unsplash，基于CC0協(xié)議