當(dāng)前位置：首頁(yè) >UI設(shè)計(jì) >好的UI按鈕，應(yīng)該有哪些「自我修養(yǎng)」?

好的UI按鈕，應(yīng)該有哪些「自我修養(yǎng)」?

發(fā)布時(shí)間：2024-04-03 10:57:12 瀏覽量：151次

編者按：一個(gè)合格的 UI 按鈕到底需要具備什么樣的素質(zhì)？在很多設(shè)計(jì)師眼里似乎并不是一個(gè)太大的問(wèn)題的，但是在實(shí)際設(shè)計(jì)的時(shí)候，UI 按鈕的細(xì)節(jié)處理不到位的情況卻比比皆是。來(lái)自資深設(shè)計(jì)師 Taras Bakusevych 的這篇文章《Button Design — UI component series》，詳細(xì)拆解了一個(gè)設(shè)計(jì)良好的 UI 按鈕，應(yīng)該有哪些「自我修養(yǎng)」。

為了更好地設(shè)計(jì)交互界面，有的時(shí)候，我們需要重新回顧一下歷史。想要設(shè)計(jì)好一個(gè)按鈕，也許我們不用完整地回溯整個(gè) UI 界面的發(fā)展歷史，但是至少要回到數(shù)字界面誕生之前看一看。

按鈕很重要。按鈕很棒。

在沒(méi)有圖形化界面的年代，使用按鈕來(lái)實(shí)現(xiàn)復(fù)雜的命令，將算法和功能隱藏在一個(gè)按鈕背后，讓電器、汽車(chē)或者系統(tǒng)發(fā)揮作用。在《Power Button》一書(shū)中，Rachel Plotnick 回溯了如今整個(gè)按鈕文化的起源，在書(shū)中，他認(rèn)為是按鈕推動(dòng)了數(shù)字技術(shù)，讓復(fù)雜的命令得以以輕松、便捷且防呆的方式，在我們的生活中普及。

“

「你只需要按一下按鈕，剩下的交給我們?！埂逻_(dá)相機(jī)通過(guò)這種醒目的Slogan吸引潛在的消費(fèi)者。

即使在今天，足夠便捷的按鈕設(shè)計(jì)，也是吸引用戶(hù)的原因。比如 iPhone 的 home 鍵。通過(guò)簡(jiǎn)單的觸摸、按下來(lái)完成任務(wù)，讓人享受到強(qiáng)烈的即時(shí)滿(mǎn)足感。盡管成千上萬(wàn)的數(shù)字產(chǎn)品和家電開(kāi)始加上觸摸屏，但是物理按鈕還沒(méi)有消失，而虛擬的按鈕更是交互的基礎(chǔ)設(shè)施。實(shí)體按鈕在過(guò)去一個(gè)世紀(jì)里所塑造的體驗(yàn)和認(rèn)知根深蒂固，它所塑造的習(xí)慣、認(rèn)知和文化影響著設(shè)計(jì)的直觀性和易用性。

01按鈕和鏈接的差別

按鈕傳達(dá)給用戶(hù)的是直接的可執(zhí)行性的操作，它們通常會(huì)存在于整個(gè) UI 界面體系當(dāng)中，從各種對(duì)話(huà)框、窗口到工具欄。按鈕和鏈接在某些功能體驗(yàn)上很接近，但是兩者之間的區(qū)別是很重要的：

導(dǎo)航到另外一個(gè)位置的時(shí)候使用鏈接。比如「查看全部」頁(yè)面，用戶(hù)「Roger Wright」的個(gè)人資料，等。
執(zhí)行特定操作的時(shí)候的按鈕。比如「上傳」、「新建」、「合并」等等。

02按鈕會(huì)將它的狀態(tài)告訴用戶(hù)

創(chuàng)建按鈕需要使用正確的樣式，而用來(lái)昭示按鈕狀態(tài)的不同樣式設(shè)計(jì)，是按鈕設(shè)計(jì)過(guò)程中繞不過(guò)的工作。每種狀態(tài)都必須有明確的「可供性」，這樣才能讓它和其他的元素、布局區(qū)分開(kāi)來(lái)。但是，差異化的設(shè)計(jì)又不能造成喧賓奪主的效果，制造視覺(jué)噪音。

正常狀態(tài)——表示按鈕是可交互的，并且可用的。
聚焦?fàn)顟B(tài)——通過(guò)高亮的形式告訴用戶(hù)，它已經(jīng)被鍵盤(pán)或者其他的方式所選中
懸停狀態(tài)——當(dāng)用戶(hù)使用光標(biāo)或者其他的元素，置于其上方的時(shí)候，顯示這樣的狀態(tài)
激活狀態(tài)——表示用戶(hù)已經(jīng)按下按鈕（且還未結(jié)束按按鈕的動(dòng)作）
加載狀態(tài)——表示操作正在加載中，組件正在反映，但是操作還未完成
禁用狀態(tài)——表示當(dāng)前組件處于非交互狀態(tài)，但是之后可以被啟用

03按鈕有各種不同的色彩、形狀和大小

圓角矩形的按鈕是最常見(jiàn)的按鈕，這些按鈕被置于輸入框旁邊，非常易于識(shí)別，特別常見(jiàn)。但是按鈕的樣式、大小變化范疇非常大，使用什么樣的樣式，取決于你要做什么，所用的平臺(tái)，以及需要遵循的規(guī)范。下面是一些最常用的、受歡迎的樣式：

04樣式可以用來(lái)呈現(xiàn)按鈕的重要性

樣式優(yōu)先級(jí)是用來(lái)區(qū)分按鈕和操作重要性的。通過(guò)樣式，可以區(qū)分出代表背后操作的重要性層級(jí)，從而指引用戶(hù)進(jìn)行多方面的選擇。通常，你可以讓最重要的按鈕使用優(yōu)先級(jí)最高的樣式，這種按鈕通常是「主按鈕」，同時(shí)搭配幾個(gè)次優(yōu)先級(jí)的按鈕，而其他很少使用、優(yōu)先級(jí)不高、不推薦使用的按鈕，則使用第三級(jí)的樣式。

05有時(shí)按鈕沒(méi)有「默認(rèn)狀態(tài)」通常，我們會(huì)將用戶(hù)最常用到的按鈕使用「默認(rèn)」?fàn)顟B(tài)，也就是常說(shuō)的聚焦?fàn)顟B(tài)，或者是主樣式，這樣可以幫助用戶(hù)更快完成任務(wù)，指引正確的方向。但是也有例外的情況，比如所有選擇都是平級(jí)、對(duì)等的情況下，或者說(shuō)所有的操作都是有潛在風(fēng)險(xiǎn)的情況下，這個(gè)時(shí)候，你可能會(huì)使用兩個(gè)次優(yōu)先級(jí)的按鈕樣式來(lái)呈現(xiàn)所有按鈕。

06「不要讓我思考」

「Don’t Make Me Think」是可用性大師 Steve Krug 經(jīng)典的設(shè)計(jì)入門(mén)書(shū)中所提到的一種設(shè)計(jì)精神，它涉及到許多要點(diǎn)，但是核心思想是要讓設(shè)計(jì)顯而易見(jiàn)，不要讓用戶(hù)感到迷惑。這是基于多年橫跨多設(shè)備、各種產(chǎn)品設(shè)計(jì)之后沉淀下來(lái)的經(jīng)驗(yàn)。我們對(duì)于按鈕的功能和體驗(yàn)是有期望和基礎(chǔ)認(rèn)知的，與我們通常所見(jiàn)的按鈕差別太大，會(huì)讓人感到困惑。

避免對(duì)交互式和非交互式的元素使用相同的顏色，否則用戶(hù)會(huì)很難判斷到底哪里可以被點(diǎn)擊。

07一致性設(shè)計(jì)可以提高交互準(zhǔn)確度和效率“

「一致性是非常強(qiáng)大的可用性原則：當(dāng)事物的表現(xiàn)和反饋保持一致的時(shí)候，用戶(hù)不會(huì)擔(dān)心會(huì)有意外發(fā)生。」——Jakob Nielsen

一致性提高了用戶(hù)交互的速度和準(zhǔn)確性，有助于避免錯(cuò)誤。這在很大程度上讓設(shè)計(jì)具備了可預(yù)測(cè)性，用戶(hù)能夠清楚自己能夠做到什么。當(dāng)你創(chuàng)建三種不同層級(jí)的樣式的時(shí)候，請(qǐng)盡量使用相對(duì)一致、具有延續(xù)性的設(shè)計(jì)，按鈕在整套體系內(nèi)部是高度一致的，并且要兼顧到其他可能會(huì)用到它的平臺(tái)。

08讓按鈕足夠大，確保交互可靠性

按下按鈕應(yīng)該是一個(gè)簡(jiǎn)單的任務(wù)，如果用戶(hù)無(wú)法成功地輕點(diǎn)按鈕，或者在操作過(guò)程中無(wú)從旁邊的元素，這會(huì)帶來(lái)負(fù)面的體驗(yàn)，并且浪費(fèi)時(shí)間。

對(duì)于絕大多數(shù)平臺(tái)，請(qǐng)盡量讓按鈕的大小在 48×48 dp 以上（最早 iOS 上按鈕的最小尺寸為 44×44 dp）。無(wú)論屏幕大小如何，觸摸按鈕控件的物理觸摸尺寸應(yīng)該至少為 9 mm ，觸摸屏幕上，按鈕控件的可視尺寸應(yīng)該在 7~10 mm 這個(gè)范疇內(nèi)。

對(duì)于圖標(biāo)按鈕，盡量讓它的觸摸尺寸大于它的可視尺寸，這不僅適用于移動(dòng)端觸摸屏，對(duì)于普通的網(wǎng)頁(yè)和桌面端 UI 也是一樣。

09無(wú)障礙設(shè)計(jì)

對(duì)于每個(gè)組件，都應(yīng)該保持足夠的可訪問(wèn)性，嚴(yán)格意義上來(lái)說(shuō)，就是遵循 WCAG 的標(biāo)準(zhǔn)，在色彩、布局等細(xì)節(jié)上，確保有視覺(jué)障礙的用戶(hù)可以輕松地使用他們。有大量的在線(xiàn)的工具可以幫你測(cè)試設(shè)計(jì)的可訪問(wèn)性，確保無(wú)障礙。

設(shè)計(jì)師應(yīng)當(dāng)和開(kāi)發(fā)者緊密合作，確保按鈕可以和屏幕閱讀器可以配合使用，添加 role = “button” 到代碼當(dāng)中，確保元素可以調(diào)用屏幕閱讀控件，讓視障用戶(hù)可以使用這一切。

10記得兼顧手勢(shì)操作

手勢(shì)交互如今已經(jīng)是觸摸交互的基礎(chǔ)了。諸如滑動(dòng)、雙擊、長(zhǎng)按這樣的交互已經(jīng)被用戶(hù)廣泛接受，并且每天都在高頻度地使用。但是對(duì)于普通用戶(hù)而言，它們依然不是很明顯，因?yàn)槭謩?shì)是默認(rèn)「隱形」的。我建議對(duì)于手勢(shì)交互提供支持，但是不作為唯一的交互方式，依然以顯性的按鈕交互作為基礎(chǔ)。

11優(yōu)秀的按鈕標(biāo)簽?zāi)軌虼龠M(jìn)用戶(hù)操作

按鈕上的標(biāo)簽文本和它的視覺(jué)外觀一樣重要。使用錯(cuò)誤的標(biāo)簽文本會(huì)讓人感到困惑，會(huì)浪費(fèi)時(shí)間，會(huì)帶來(lái)問(wèn)題。

這也是為什么微文案的重要性在如今被一再提高。好的按鈕文本同樣是被精心設(shè)計(jì)出來(lái)的。最好使用動(dòng)詞提供趨勢(shì)引導(dǎo)，并且標(biāo)注出它的實(shí)際功能。就像按鈕在問(wèn)用戶(hù)「您要（將商品）添加購(gòu)物車(chē)嗎？」或者「（您要）確認(rèn)訂單嗎？」

避免使用「是」和「否」這樣可能會(huì)存在歧義的、簡(jiǎn)單的文本。

12「取消/確認(rèn)」還是「確認(rèn)/取消」？都可以

「確認(rèn)」和「取消」到底哪個(gè)在左，哪個(gè)在右？有的設(shè)計(jì)師可能會(huì)花費(fèi)好幾個(gè)小時(shí)來(lái)糾結(jié)和確認(rèn)。

將「確認(rèn)」置于首位。如果我們知道「確認(rèn)」可能是多數(shù)情況下的選擇，并且這樣的放置能夠節(jié)省用戶(hù)交互時(shí)間，那么可以這么放。
將「確認(rèn)」置于末位。有人認(rèn)為將「確認(rèn)」置于末位能夠促進(jìn)用戶(hù)去點(diǎn)擊。更多的時(shí)候，置于這樣的位置可能會(huì)促進(jìn)用戶(hù)衡量和思考是否要點(diǎn)擊。蘋(píng)果的設(shè)計(jì)當(dāng)中，「確認(rèn)」常常被置于末位。

其實(shí)哪種使用方式都有良好的論據(jù)支撐，并且任何選擇都不會(huì)是災(zāi)難性的。我個(gè)人傾向于將「確認(rèn)」置于末位（這可能是因?yàn)槲沂且粋€(gè) Mac 用戶(hù)）。

13禁用按鈕令人抓狂

每個(gè)人都或多或少會(huì)碰到這樣的情況，被卡在頁(yè)面上好一陣子，想搞清楚到底表單哪里填錯(cuò)了導(dǎo)致無(wú)法推進(jìn)。禁用狀態(tài)下的按鈕令人抓狂，雖然后續(xù)如果正確觸發(fā)可以啟用，但是此刻是讓人糟心的。結(jié)合信息引導(dǎo)和錯(cuò)誤說(shuō)明，讓按鈕保持正常狀態(tài)，讓「可點(diǎn)擊」的狀態(tài)呈現(xiàn)出來(lái)，會(huì)讓用戶(hù)更舒適。