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

 

依據(jù)用戶體驗(yàn)設(shè)計(jì)的宗旨，把這么長(zhǎng)一段話說(shuō)直白一些，其實(shí)就是：讓按鈕幫助用戶做出最優(yōu)選擇。

越是權(quán)威的設(shè)計(jì)團(tuán)隊(duì)，對(duì)自家所探尋出來(lái)的核心原則越是從一而終。Google 產(chǎn)品線的按鈕設(shè)計(jì)，始終遵循著MD規(guī)范這一個(gè)標(biāo)準(zhǔn)。我想就這一標(biāo)準(zhǔn)，來(lái)展開(kāi)對(duì)于「按鈕」設(shè)計(jì)的探索。

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

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

1. 文字按鈕（低強(qiáng)調(diào)）：通常用于次要操作；

2. 輪廓按鈕（中等強(qiáng)調(diào)）：描邊讓輪廓按鈕比文本按鈕更突出一些；

3. 填充按鈕（重點(diǎn)強(qiáng)調(diào)）：填充按鈕具有視覺(jué)重點(diǎn)，因?yàn)樗鼈兪褂昧祟伾畛浜完幱埃?/p>

4. 切換按鈕（按鈕組）：使用布局將同類按鈕分組。與其他按鈕類型相比，它們的使用頻率較低。

 

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

你可以用“較高視覺(jué)級(jí)+較低視覺(jué)級(jí)”的按鈕搭配，來(lái)引導(dǎo)用戶在當(dāng)前場(chǎng)景做出更重要的操作。

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

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

 

例如信用消費(fèi)類金融產(chǎn)品常常用“較高視覺(jué)級(jí)”按鈕引導(dǎo)用戶對(duì)賬單進(jìn)行分期。而京東白條在賬單還款時(shí)，也用“較高視覺(jué)級(jí)”按鈕引導(dǎo)用戶進(jìn)行“小金庫(kù)還款”，為自家的金融業(yè)務(wù)引流。

 

 

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

 

但反其道而行之，我們也可以推敲出，當(dāng)當(dāng)前場(chǎng)景的敏感度較高時(shí)，我們也可以降低按鈕的視覺(jué)對(duì)比，不要對(duì)用戶進(jìn)行引導(dǎo)，讓用戶自行謹(jǐn)慎操作，做出選擇。一般在協(xié)議、隱私條款場(chǎng)景這樣的設(shè)計(jì)會(huì)更為常見(jiàn)。

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

按鈕尺寸是設(shè)計(jì)界老生常談的一個(gè)問(wèn)題了，想必最經(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ò)一篇關(guān)于按鈕可行性的博文中找到答案。

Scott Hurff 在使用 iOS 9 鎖屏狀態(tài)下的 Apple Music 時(shí)，遇到了問(wèn)題：

 

在我想切歌時(shí)，我常常無(wú)法一次就點(diǎn)中切歌按鈕，我需要一而再再而三地嘗試。我甚至?xí)蛘`操作而調(diào)高音量，或是按到暫停。

 

而 iOS 9 在這里所用到的按鈕尺寸就是經(jīng)典的44pt。

 

等到 iOS 10 更新了這一設(shè)計(jì)之后，上述情況改善了許多。同時(shí)也提起了 Scott Hurff 對(duì)于按鈕設(shè)計(jì)尺寸研究的興趣，并展開(kāi)了一系列科學(xué)性的論證。

 

 

 

Scott Hurff 搬出了2006年芬蘭奧盧大學(xué)和馬里蘭大學(xué)帕克分校的研究人員合作進(jìn)行的實(shí)驗(yàn)。研究人員測(cè)試了兩個(gè)場(chǎng)景：

 

 

• 執(zhí)行單個(gè)任務(wù)場(chǎng)景（如激活按鈕、點(diǎn)選復(fù)選框或單選按鈕）

• 執(zhí)行連續(xù)任務(wù)場(chǎng)景（如輸入電話號(hào)碼）

 

在研究過(guò)程中，研究人員在每個(gè)場(chǎng)景下都測(cè)試了一系列不同大小的按鈕。他們發(fā)現(xiàn)，當(dāng)按鈕小于9.2毫米時(shí)，單個(gè)任務(wù)場(chǎng)景的錯(cuò)誤率顯著增加；當(dāng)按鈕小于9.6毫米時(shí)，連續(xù)任務(wù)場(chǎng)景的錯(cuò)誤率顯著增加。

 

 

 

當(dāng)時(shí)這個(gè)實(shí)驗(yàn)只確定了按鈕尺寸的合適區(qū)間。但五年后，兩所德國(guó)大學(xué)的研究人員又進(jìn)行了另一項(xiàng)研究。這一次他們的目標(biāo)是：確定觸摸屏按鈕的最佳觸摸目標(biāo)尺寸。

 

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

 

 

 

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

 

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

 

 

 

通過(guò)兩個(gè)實(shí)驗(yàn)印證了按鈕尺寸設(shè)計(jì)的科學(xué)性后，提煉出了4個(gè)關(guān)鍵數(shù)據(jù)：9.2毫米、9.6毫米、12毫米與15毫米。

 

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

經(jīng)過(guò)數(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è)面中需具體分析運(yùn)用，目前各大規(guī)范已放開(kāi)了按鈕高度的指導(dǎo)建議，并不是一定要讓按鈕保持一個(gè)固定的尺寸，只要在合適的可點(diǎn)擊范圍內(nèi)，均是合理的；

3.根據(jù)以上的實(shí)驗(yàn)結(jié)論，按鈕尺寸的最大臨界值 12毫米（約為 82pt），大于 82pt后并不能增加用戶可點(diǎn)擊概率，更多是視覺(jué)方面的考慮。

合理科學(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)并沒(méi)有 Web 端重要，可能是因?yàn)橐苿?dòng)端按鈕沒(méi)有 hover（懸?。?態(tài)，認(rèn)為按鈕在移動(dòng)端只有常態(tài)與點(diǎn)擊態(tài)，狀態(tài)較少，覺(jué)得用戶本身就易于區(qū)分。

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

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

 

• Enabled - 激活狀態(tài)（按鈕常規(guī)狀態(tài)）

• Hover-懸浮狀態(tài)（Web場(chǎng)景下的鼠標(biāo)懸浮狀態(tài)）

• Focused-聚焦?fàn)顟B(tài)（長(zhǎng)按聚焦?fàn)顟B(tài)，如長(zhǎng)按語(yǔ)音輸入）

• Pressed-點(diǎn)擊狀態(tài)（按鈕被點(diǎn)擊按下的狀態(tài)）

• Disable-禁用狀態(tài)（按鈕不可用的狀態(tài)）

• Loading-加載狀態(tài)（我自行添加進(jìn)來(lái)的，當(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)樣式定義的過(guò)程其實(shí)并沒(méi)有想象中那么麻煩，一般視覺(jué)上可以高度與顏色來(lái)營(yíng)造效果。

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

· 顏色 ：顏色的改變可以直接在按鈕上方覆蓋一層含透明度的顏色遮罩，這樣可以確保適量的底色可見(jiàn)性，并且針對(duì)每種不同的狀態(tài)，應(yīng)調(diào)整顏色遮罩不同的透明度值。MD有一套現(xiàn)成的透明度指導(dǎo)建議，可以進(jìn)行參考。

 

 

 

四、結(jié)語(yǔ)

 

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

我盡量從我能考慮得到的方面，聊了關(guān)于按鈕交互的設(shè)計(jì)點(diǎn)，可能不太全面，也歡迎補(bǔ)充與校正。至于按鈕的視覺(jué)設(shè)計(jì)，因?yàn)檫^(guò)于個(gè)性化，且篇幅原因，我就不再展開(kāi)討論了。

希望這篇文章能夠幫助到你對(duì)按鈕有新的認(rèn)識(shí)。我是耍家，我們下期再見(jiàn)。

作者：UCD耍家
鏈接：https://www.zcool.com.cn/article/ZMTE4MDc2NA==.html
來(lái)源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

蘭亭妙微(www.cqzjtgb.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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)的軟件開(kāi)發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。