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