2025-2-26 杰睿
對于按鈕控件，Material Design 在規(guī)范中寫下了“突出一個按鈕”原則：布局中應(yīng)包含一個視覺突出按鈕，以使其他按鈕在層次結(jié)構(gòu)中的重要性降低，讓此高強(qiáng)調(diào)按鈕吸引用戶最多的關(guān)注。
依據(jù)用戶體驗設(shè)計的宗旨，把這么長一段話說直白一些，其實就是：讓按鈕幫助用戶做出最優(yōu)選擇。
越是權(quán)威的設(shè)計團(tuán)隊，對自家所探尋出來的核心原則越是從一而終。Google 產(chǎn)品線的按鈕設(shè)計，始終遵循著MD規(guī)范這一個標(biāo)準(zhǔn)。我想就這一標(biāo)準(zhǔn)，來展開對于「按鈕」設(shè)計的探索。
Material Design 按照視覺強(qiáng)調(diào)程度將按鈕分為了四個類型：
文字按鈕（低強(qiáng)調(diào)）：通常用于次要操作；
輪廓按鈕（中等強(qiáng)調(diào)）：描邊讓輪廓按鈕比文本按鈕更突出一些；
填充按鈕（重點強(qiáng)調(diào)）：填充按鈕具有視覺重點，因為它們使用了顏色填充和陰影；
切換按鈕（按鈕組）：使用布局將同類按鈕分組。與其他按鈕類型相比，它們的使用頻率較低。
MD規(guī)范之所以如此定義按鈕類型，其實就是為了滿足設(shè)計原則中的「對比」原則，足夠差異化的對比才能讓用戶視線有明確的著陸點。
你可以用“較高視覺級+較低視覺級”的按鈕搭配，來引導(dǎo)用戶在當(dāng)前場景做出更重要的操作。
這一手法示例在許多產(chǎn)品中屢見不鮮。例如在一些功能性場景中，出于用戶體驗，用“較高視覺級”按鈕來輔助用戶進(jìn)行正確操作。
而在一些非功能性場景中，許多產(chǎn)品還使用這個手法來突出重要操作，為業(yè)務(wù)引流。甚至你可以從中去摸索到競品當(dāng)前對哪一塊業(yè)務(wù)更具有側(cè)重點。
例如信用消費類金融產(chǎn)品常常用“較高視覺級”按鈕引導(dǎo)用戶對賬單進(jìn)行分期。而京東白條在賬單還款時，也用“較高視覺級”按鈕引導(dǎo)用戶進(jìn)行“小金庫還款”，為自家的金融業(yè)務(wù)引流。
這些案例都是在視覺上幫用戶做出選擇。
但反其道而行之，我們也可以推敲出，當(dāng)當(dāng)前場景的敏感度較高時，我們也可以降低按鈕的視覺對比，不要對用戶進(jìn)行引導(dǎo)，讓用戶自行謹(jǐn)慎操作，做出選擇。一般在協(xié)議、隱私條款場景這樣的設(shè)計會更為常見。
按鈕尺寸是設(shè)計界老生常談的一個問題了，想必最經(jīng)典的按鈕尺寸標(biāo)準(zhǔn)就是 iOS人機(jī)設(shè)計規(guī)范提到的“44pt”。除此之外還有MD規(guī)范對安卓按鈕定義的“36dp”、“56dp”等等。
但你是不是也疑惑，為什么我們常常看到按鈕五花八門的設(shè)計尺寸？“44pt”真的是按鈕尺寸的標(biāo)準(zhǔn)嗎？
這個回答可以在設(shè)計師 Scott Hurff 曾寫過一篇關(guān)于按鈕可行性的博文中找到答案。
Scott Hurff 在使用 iOS 9 鎖屏狀態(tài)下的 Apple Music 時，遇到了問題：
在我想切歌時，我常常無法一次就點中切歌按鈕，我需要一而再再而三地嘗試。我甚至?xí)蛘`操作而調(diào)高音量，或是按到暫停。
而 iOS 9 在這里所用到的按鈕尺寸就是經(jīng)典的44pt。
等到 iOS 10 更新了這一設(shè)計之后，上述情況改善了許多。同時也提起了 Scott Hurff 對于按鈕設(shè)計尺寸研究的興趣，并展開了一系列科學(xué)性的論證。
Scott Hurff 搬出了2006年芬蘭奧盧大學(xué)和馬里蘭大學(xué)帕克分校的研究人員合作進(jìn)行的實驗。研究人員測試了兩個場景：
執(zhí)行單個任務(wù)場景（如激活按鈕、點選復(fù)選框或單選按鈕）
執(zhí)行連續(xù)任務(wù)場景（如輸入電話號碼）
在研究過程中，研究人員在每個場景下都測試了一系列不同大小的按鈕。他們發(fā)現(xiàn)，當(dāng)按鈕小于9.2毫米時，單個任務(wù)場景的錯誤率顯著增加；當(dāng)按鈕小于9.6毫米時，連續(xù)任務(wù)場景的錯誤率顯著增加。
當(dāng)時這個實驗只確定了按鈕尺寸的合適區(qū)間。但五年后，兩所德國大學(xué)的研究人員又進(jìn)行了另一項研究。這一次他們的目標(biāo)是：確定觸摸屏按鈕的最佳觸摸目標(biāo)尺寸。
這一次研究人員發(fā)布了一個Android游戲，該游戲被下載約10萬次，記錄了約1億2千萬次點擊事件。游戲的玩法很簡單：玩家要點擊各種大小、可能出現(xiàn)在屏幕任何地方的浮動圓圈來通關(guān)。
分析游戲中的點擊事件后，研究人員發(fā)現(xiàn)當(dāng)圓圈尺寸小于15毫米，玩家的錯誤率逐步增加；當(dāng)圓圈小于12毫米左右時急劇上升；當(dāng)點擊目標(biāo)小于8毫米時，玩家沒點中圓圈的概率超過40%。
但圓圈的尺寸大于 12毫米時，玩家的正確率也沒有顯著的數(shù)據(jù)變化。即 12毫米 就像一個按鈕尺寸用戶體驗的最大臨界點。
通過兩個實驗印證了按鈕尺寸設(shè)計的科學(xué)性后，提煉出了4個關(guān)鍵數(shù)據(jù)：9.2毫米、9.6毫米、12毫米與15毫米。
而通過換算之后經(jīng)過換算可以發(fā)現(xiàn)，iOS 的按鈕建議尺寸約為 7毫米；Android 約為 9毫米。但微軟所給到的按鈕規(guī)范建議則直接是以“毫米”為單位的，定義為 13毫米。
經(jīng)過數(shù)據(jù)的換算總結(jié)可以得出以下結(jié)論：
1.Android 所定義的 36pt 按鈕高度約為5.5毫米，在設(shè)計按鈕時，盡量不要低于這個高度（文字按鈕也應(yīng)該盡量把可點擊熱區(qū)擴(kuò)展到這個高度）；
2.36pt、44 pt、56 pt，這些規(guī)范參考數(shù)據(jù)在具體的頁面中需具體分析運(yùn)用，目前各大規(guī)范已放開了按鈕高度的指導(dǎo)建議，并不是一定要讓按鈕保持一個固定的尺寸，只要在合適的可點擊范圍內(nèi)，均是合理的；
3.根據(jù)以上的實驗結(jié)論，按鈕尺寸的最大臨界值 12毫米（約為 82pt），大于 82pt后并不能增加用戶可點擊概率，更多是視覺方面的考慮。
合理科學(xué)的按鈕尺寸可以讓用戶準(zhǔn)確地點擊并進(jìn)行操作，能夠避免發(fā)生類似 iOS 9 Apple Music 所遇到的狀況。
我發(fā)現(xiàn)當(dāng)下許多 APP 好像或多或少會忽略按鈕的狀態(tài)樣式設(shè)計。似乎許多人認(rèn)為移動端按鈕狀態(tài)并沒有 Web 端重要，可能是因為移動端按鈕沒有 hover（懸浮） 態(tài)，認(rèn)為按鈕在移動端只有常態(tài)與點擊態(tài)，狀態(tài)較少，覺得用戶本身就易于區(qū)分。
但實際上MD規(guī)范提到按鈕狀態(tài)，不但沒有簡單地一筆帶過，還展開了一個專題進(jìn)行了深入研究，可見把UI控件的“狀態(tài)”準(zhǔn)確地反饋給用戶，是多么重要的一件事。
按照MD規(guī)范，按鈕的狀態(tài)，一般會發(fā)現(xiàn)有：
Enabled - 激活狀態(tài)（按鈕常規(guī)狀態(tài)）
Hover-懸浮狀態(tài)（Web場景下的鼠標(biāo)懸浮狀態(tài)）
Focused-聚焦?fàn)顟B(tài)（長按聚焦?fàn)顟B(tài)，如長按語音輸入）
Pressed-點擊狀態(tài)（按鈕被點擊按下的狀態(tài)）
Disable-禁用狀態(tài)（按鈕不可用的狀態(tài)）
Loading-加載狀態(tài)（我自行添加進(jìn)來的，當(dāng)下較為流行的多態(tài)按鈕）
正確地在前期規(guī)范中定義按鈕的狀態(tài)交互及樣式，對按鈕的合理設(shè)計與用戶體驗而言其實十分重要。按鈕狀態(tài)可以有效地傳達(dá)給用戶當(dāng)前操作狀態(tài)，如發(fā)生失誤操作時可以及時止損，減少撤銷/返回操作的成本。
狀態(tài)樣式定義的過程其實并沒有想象中那么麻煩，一般視覺上可以高度與顏色來營造效果。
· 高度 ：界面中往往使用陰影來營造高度視覺差，例如常態(tài)時的陰影能夠營造懸浮、可點擊的效果；禁用狀態(tài)取消陰影，可以營造按鈕觸底，無法點擊的效果。
· 顏色 ：顏色的改變可以直接在按鈕上方覆蓋一層含透明度的顏色遮罩，這樣可以確保適量的底色可見性，并且針對每種不同的狀態(tài)，應(yīng)調(diào)整顏色遮罩不同的透明度值。MD有一套現(xiàn)成的透明度指導(dǎo)建議，可以進(jìn)行參考。
“幫用戶做出最優(yōu)選擇”說起來很容易，做起來卻容易被忽視或令產(chǎn)品設(shè)計者糾結(jié)頭疼，不然 Steve Krug 也不會寫一整本《Don’t Make Me Think》來教大家如何揣摩用戶思想的書了。
我盡量從我能考慮得到的方面，聊了關(guān)于按鈕交互的設(shè)計點，可能不太全面，也歡迎補(bǔ)充與校正。至于按鈕的視覺設(shè)計，因為過于個性化，且篇幅原因，我就不再展開討論了。
希望這篇文章能夠幫助到你對按鈕有新的認(rèn)識。我是耍家，我們下期再見。
蘭亭妙微(www.73404.com.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標(biāo)定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計，有興趣請加入一起學(xué)習(xí)成長，咨詢及進(jìn)群請加藍(lán)小助微信ben_lanlan。
藍(lán)藍(lán)設(shè)計的小編 http://www.73404.com.cn