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

對(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ì)的探索。

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

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

1. 文字按鈕（低強(qiáng)調(diào)）：通常用于次要操作；
2. 輪廓按鈕（中等強(qiáng)調(diào)）：描邊讓輪廓按鈕比文本按鈕更突出一些；
3. 填充按鈕（重點(diǎn)強(qiáng)調(diào)）：填充按鈕具有視覺重點(diǎn)，因?yàn)樗鼈兪褂昧祟伾畛浜完幱埃?/li>
4. 切換按鈕（按鈕組）：使用布局將同類按鈕分組。與其他按鈕類型相比，它們的使用頻率較低。

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ì)更為常見。

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

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

但你是不是也疑惑，為什么我們常?？吹桨粹o五花八門的設(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 所遇到的狀況。

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

我發(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í)并沒有想象中那么麻煩，一般視覺上可以高度與顏色來營造效果。

1. 高度

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

2. 顏色

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

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

四、結(jié)語

“幫用戶做出最優(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í)。

#專欄作家#

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

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

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