我們在眾多企業(yè)官網(wǎng)建設(shè)中，所有項(xiàng)目案例都會(huì)遇到按鈕的研究及設(shè)計(jì)問題。按鈕設(shè)計(jì)得當(dāng)，整個(gè)網(wǎng)站體驗(yàn)提升，按鈕設(shè)計(jì)得很糟糕，用戶體驗(yàn)不佳，甚至導(dǎo)致操作錯(cuò)誤！那么，我們應(yīng)該如何優(yōu)化按鈕的設(shè)計(jì)呢？今天我們分享7個(gè)不錯(cuò)的按鈕設(shè)計(jì)策略。按鈕是表單、字段、標(biāo)簽、彈出窗口、按鈕、搜索提示等上的小型、信息性或指導(dǎo)性文本。它可以在人們使用產(chǎn)品時(shí)提供信息和幫助。

為了設(shè)計(jì)有效的縮影，我們需要考慮用戶處理信息和閱讀文本的方式。根據(jù)NN/g：

• 掃描文本是識(shí)字率較高的用戶的典型行為。
• 用戶在一個(gè)平均600到800字的頁面上只閱讀了大約20%的文本。
• 簡潔的文本、客觀的語言和可掃描的副本將可用性提高了124%。

有效的用戶體驗(yàn)縮影具有以下特點(diǎn)：

• 它清晰、簡潔、易懂
• 它體現(xiàn)了品牌的聲音和基調(diào)
• 它在視覺上很合身，感覺就像是設(shè)計(jì)的一部分
• 它滿足需求、回答問題或建立同理心（取決于產(chǎn)品）
• 它激勵(lì)用戶采取行動(dòng)
• 它預(yù)測并解決用戶問題

下面列出了一些有助于改進(jìn)按鈕縮微鏡的做法：

01
-
使用動(dòng)作動(dòng)詞

應(yīng)使用動(dòng)作動(dòng)詞，而不是泛指詞。應(yīng)避免使用“是/否”，因?yàn)樗鼈兛赡軙?huì)對用戶造成歧義和混淆。

用戶必須先閱讀對話框，然后才能采取行動(dòng)。如上所述，大多數(shù)用戶掃描頁面以獲取相關(guān)信息，而不是閱讀提供的所有信息。如果他們跳過或誤讀對話框，他們會(huì)按錯(cuò)按鈕。被動(dòng)標(biāo)簽不僅會(huì)增加采取行動(dòng)的風(fēng)險(xiǎn)，還會(huì)迫使用戶做更多的工作。通過確認(rèn)按鈕文本上的操作，我們減少了出錯(cuò)的機(jī)會(huì)，并減少了用戶的工作量。

這可以在下面的示例中看到。當(dāng)對話框文本被阻止，只有按鈕可見時(shí)，帶有動(dòng)作動(dòng)詞的按鈕標(biāo)簽允許用戶采取行動(dòng)，但使用“是/否”標(biāo)簽的按鈕不允許。動(dòng)作動(dòng)詞按鈕標(biāo)簽的任務(wù)效率更高，可以防止用戶錯(cuò)誤。

左邊是動(dòng)作按鈕標(biāo)簽的壞例子（是/否），右邊是好例子（放棄/保存），左邊是動(dòng)作按鈕標(biāo)簽的壞例子（是/否），右邊是好例子（放棄/保存）

動(dòng)作動(dòng)詞按鈕標(biāo)簽的任務(wù)效率更高，可以防止用戶錯(cuò)誤。

02
-
使用特定于任務(wù)的語言

按鈕副本應(yīng)與操作匹配。我們使用的按鈕應(yīng)該始終清楚地描述用戶單擊按鈕時(shí)采取的操作。

例如，“提交”一詞是一個(gè)可以用于大多數(shù)按鈕的技術(shù)術(shù)語。當(dāng)用戶閱讀時(shí)，不清楚會(huì)發(fā)生什么，因?yàn)闃?biāo)簽不是特定于任務(wù)的。用戶會(huì)質(zhì)疑當(dāng)他們點(diǎn)擊表單按鈕時(shí)會(huì)發(fā)生什么。通過使用描述用戶任務(wù)結(jié)果的按鈕標(biāo)簽，避免使其不確定。

相比之下，使用特定于動(dòng)作的詞語可以讓標(biāo)簽更清晰，讓用戶確定行動(dòng)。請記住，用戶通常會(huì)掃描頁面以獲取相關(guān)信息。為了改進(jìn)用戶體驗(yàn)，表單按鈕應(yīng)該準(zhǔn)確地描述用戶在任務(wù)中所做的事情。例如，如果用戶正在刪除照片，則顯示“刪除”的按鈕會(huì)告訴用戶單擊“操作”按鈕將刪除照片。這對他們的任務(wù)來說是明確而具體的。

兩個(gè)示例對話框：左側(cè)為通用語言（“確認(rèn)”），右側(cè)為特定于任務(wù)的語言（“刪除”），兩個(gè)示例對話框：左側(cè)為通用語言（“確認(rèn)”），右側(cè)為特定于任務(wù)的語言（“刪除”）

使用特定于任務(wù)的語言可以使標(biāo)簽更清晰（右側(cè)示例）

03

-
一致性

為按鈕編寫副本時(shí)，保持一致性很重要。決定縮微拷貝的規(guī)則可以幫助做到這一點(diǎn)。例如，您可以：

1. 選擇單詞數(shù)量：不同組件平均應(yīng)該有多少單詞？每個(gè)按鈕一個(gè)、兩個(gè)或多個(gè)單詞。
2. 選擇案例：在整個(gè)產(chǎn)品中應(yīng)始終使用大寫字母。您可以在句子大小寫、標(biāo)題大小寫、大寫或小寫之間進(jìn)行選擇（稍后將詳細(xì)介紹…）
3. 標(biāo)簽結(jié)構(gòu)：您需要決定標(biāo)簽的結(jié)構(gòu)。它們是否僅包括一個(gè)動(dòng)詞或動(dòng)詞與名詞的組合（例如“動(dòng)詞”+“名詞”或“動(dòng)詞”或“動(dòng)詞”+a+“名詞”）？

04
-
使用縮微鏡以提高透明度

有時(shí)，數(shù)字產(chǎn)品可能會(huì)出于安全和隱私原因（例如，要求用戶提供敏感信息）而引起關(guān)注。在這些情況下，Microcopy可以幫助我們與用戶建立信任，并對用戶體驗(yàn)產(chǎn)生積極影響。

例如，如果人們在進(jìn)行交易時(shí)感到不安全或可疑，他們可能最終無法完成自己的行為。

Bhatt提供了一些示例場景：

• 要求用戶提供過多的個(gè)人信息
• 有關(guān)產(chǎn)品保修/保修/更換的未詳細(xì)說明
• 詢問免費(fèi)試用訂閱的信用卡詳細(xì)信息

有效的縮微鏡可以告知用戶詢問信息的原因以及如何使用。下面是一個(gè)很好的例子；Airbnb通知用戶點(diǎn)擊reserve不會(huì)收取費(fèi)用。

空中訂票服務(wù)

05
-
避免使用行話

簡單明了的小詞比聽起來重要的大詞更響亮，但行話仍然設(shè)法潛入我們的界面。這是因?yàn)槲覀兪煜の覀兯鶑氖碌漠a(chǎn)品以及我們每天遇到的特定術(shù)語。解決這個(gè)問題的一種方法是與用戶一起測試microcopy——他們理解我們使用的語言嗎？

06
-
注意資本化

大寫是用戶體驗(yàn)寫作中提高文本元素理解和一致性的工具，需要給予應(yīng)有的重視。最流行的大寫形式有：句子大小寫（僅大寫句子的第一個(gè)字母和專有名詞）、標(biāo)題大小寫（大寫除冠詞、連詞和命題外的每個(gè)單詞的第一個(gè)字母）和大寫（大寫每個(gè)字母）。適當(dāng)?shù)馁Y本化風(fēng)格取決于你的產(chǎn)品-你可以在這里閱讀更多關(guān)于這方面的內(nèi)容。一般來說，如果你寫的是面向國際的內(nèi)容，請使用句子大小寫，因?yàn)檫@樣更利于國際化（除非產(chǎn)品面向美國觀眾）。標(biāo)題大小寫可用于標(biāo)題/副標(biāo)題/標(biāo)簽文本（<4個(gè)單詞）。在大多數(shù)情況下（雙關(guān)語），為了保持一致性，最好選擇一種格式。

資本化的兩個(gè)例子；標(biāo)題格在左邊，句子格在右邊

07
-
了解你的用戶

好的縮微鏡應(yīng)該在用戶使用您的產(chǎn)品時(shí)提供信息和幫助。為了實(shí)現(xiàn)這一目標(biāo)，了解他們是誰并了解他們的需求是很重要的。用戶測試是必要的。