移動(dòng)應(yīng)用按鈕的可用性標(biāo)準(zhǔn)，應(yīng)比桌面應(yīng)用按鈕的高。由于屏幕較小且用手指導(dǎo)航，移動(dòng)應(yīng)用上的按鈕必須易于點(diǎn)擊、閱讀和識(shí)別。其中，大多數(shù)實(shí)心按鈕符合這一標(biāo)準(zhǔn)，但純文本按鈕很少符合。因此在你的應(yīng)用程序使用純文本按鈕之前，你應(yīng)該知道以下內(nèi)容。

純文本按鈕更難點(diǎn)擊

手指比鼠標(biāo)光標(biāo)大，將手指放在較小的目標(biāo)上感覺(jué)很尷尬——用戶(hù)的手指遮擋了按鈕的內(nèi)容，使得他們沒(méi)有視覺(jué)上的提示來(lái)確認(rèn)是否提交了該動(dòng)作。如果純文本按鈕里的文本足夠長(zhǎng)，用戶(hù)通過(guò)露出手指外的內(nèi)容，會(huì)得到一個(gè)小的視覺(jué)反饋，這會(huì)好一點(diǎn)，但仍然不足以使他們確保已經(jīng)擊中了目標(biāo)。

小尺寸的純文本按鈕強(qiáng)迫用戶(hù)精確地移動(dòng)手指以擊中目標(biāo)。但越精確越需要用戶(hù)付出更多的努力。他們必須密切注意手指和目標(biāo)，以確保他們點(diǎn)中了按鈕所在區(qū)域。

缺少直邊使得純文本按鈕邊界難以區(qū)分，更難以瞄準(zhǔn)。實(shí)心按鈕不會(huì)出現(xiàn)這樣的問(wèn)題，因?yàn)樗鼈兙哂懈蟮哪繕?biāo)區(qū)域和筆直的邊緣。

所有大寫(xiě)的純文本按鈕都難以閱讀

為了解決純文本按鈕的點(diǎn)擊問(wèn)題，一些設(shè)計(jì)師將它們的文本按鈕全部大寫(xiě)。Google的Material Design系統(tǒng)推廣了這種按鈕風(fēng)格，但也有其缺陷。

全部大寫(xiě)確實(shí)為純文本按鈕提供了更直的邊緣和更大的目標(biāo)區(qū)域。但這并沒(méi)有好很多，因?yàn)槟繕?biāo)區(qū)域只是略大，但是大寫(xiě)樣式卻降低了可讀性。

所有大寫(xiě)的純文本按鈕都難以閱讀，尤其是對(duì)于有閱讀障礙的用戶(hù)。用戶(hù)依靠字母的形狀來(lái)識(shí)別單詞。大寫(xiě)字母外形上沒(méi)有對(duì)比鮮明的上升和下降，這使單詞更難以閱讀。

純文本按鈕難以感知

純文本按鈕和文本之間唯一的區(qū)別是顏色。這種相似性使得純文本按鈕難以識(shí)別，尤其對(duì)于色盲用戶(hù)而言。如果沒(méi)有明顯的外圍形狀，用戶(hù)更有可能忽略純文本按鈕，并錯(cuò)過(guò)點(diǎn)擊它。

用什么形式替代純文本按鈕

許多人在二級(jí)操作里使用純文本按鈕的形式，來(lái)表示此按鈕優(yōu)先級(jí)較低。但有更好的方法可以做到這一點(diǎn)，同時(shí)不會(huì)損害移動(dòng)應(yīng)用的可用性。

輪廓按鈕

一種方法是在文本周?chē)O(shè)計(jì)輪廓以制作輪廓按鈕。這使按鈕的邊緣可見(jiàn)，為用戶(hù)提供更大，更清晰的目標(biāo)。他們的手指可以落在輪廓上或輪廓內(nèi)的任何地方，以提交操作。

缺乏背景色可以防止它與按鈕內(nèi)部主要的號(hào)召性用語(yǔ)競(jìng)爭(zhēng)。輕盈但可見(jiàn)的輪廓是理想的，因此它不會(huì)干擾按鈕中的文本。

淺色陰影按鈕

純文本按鈕的另一種替代方法是將文本內(nèi)容放在淺色陰影按鈕上。淺色陰影按鈕可區(qū)分按鈕邊框和背景，不會(huì)與主要號(hào)召性用語(yǔ)競(jìng)爭(zhēng)。陰影應(yīng)該幾乎融入背景，但仍然保持足夠的可視對(duì)比度。

哪種帶來(lái)更好的視覺(jué)呈現(xiàn)

輪廓按鈕和淺色陰影按鈕都可以作為二級(jí)操作的樣式。但是淺色陰影按鈕的視覺(jué)重量略高，按壓感覺(jué)更好。背景為手指提供了一個(gè)堅(jiān)實(shí)的目標(biāo)，而不是一個(gè)單薄的輪廓。

什么情況下，純文字按鈕會(huì)起作用？

以下這些案例中，純文字按鈕的出現(xiàn)起了作用。

如圖所示，不要將純文字按鈕用于二級(jí)操作，而是將它們用于三級(jí)操作。三級(jí)操作不會(huì)得到那么多的點(diǎn)擊，也不需要多么突出。一級(jí)和二級(jí)操作更重要，因此他們需要更多的視覺(jué)重量。

另一處純文本按鈕具有意義的地方，是在用戶(hù)想采取行動(dòng)需要幫助的情況下——當(dāng)您需要向用戶(hù)提供與上下文有關(guān)的信息以幫助他們選擇最佳選項(xiàng)時(shí)，請(qǐng)使用純文本按鈕。純文本按鈕可防止用戶(hù)將幫助視為號(hào)召性用語(yǔ)，因?yàn)榧兾谋镜男问讲粫?huì)與其他按鈕競(jìng)爭(zhēng)。

不要濫用純文本按鈕

在界面上的放置純文本按鈕很容易，因?yàn)樗鼈儾恍枰ㄙM(fèi)太多精力去設(shè)計(jì)。但是，這樣做的結(jié)果是讓那些無(wú)法有效閱讀、識(shí)別和選中按鈕的用戶(hù)感到受挫。

不要放任懶惰，濫用純文本按鈕。您的CTA入口（按鈕）可以包含文字，但它們應(yīng)看起來(lái)始終像個(gè)按鈕，而不是一段話。

原文作者：Anthony

原文地址：https://uxmovement.com/mobile/why-text-buttons-hurt-mobile-usability/

編譯作者：桃花果 | 杭州 | 設(shè)計(jì)師（微信ID：shiningineye-bq）

編輯整理：TCC實(shí)驗(yàn)室 | 翻譯特工隊(duì)（微信ID：sanfen-design）

本文由 @三分設(shè) 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

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