按鈕的點擊率低，用戶在放置按鈕的頁面上花費了大量時間，這可能是由于按鈕不直觀和混亂。

我們將從用戶體驗的角度詳細(xì)解釋直觀且易于用戶理解的按鈕，例如內(nèi)容中按鈕的排列、按鈕的形狀以及基于內(nèi)容的配色方案。

什么是用戶友好按鈕？

您擁有的按鈕越多，做出決定所需的時間就越長。用戶使用每個按鈕以確定需要哪個按鈕來實現(xiàn)目標(biāo)。對按鈕的不確定性會導(dǎo)致對按鈕不做任何操作。

為防止出現(xiàn)這種情況，請直觀地確定每個操作的優(yōu)先級。用戶一旦知道哪些按鈕對其任務(wù)很重要，就可以立即采取行動。

1. 按視覺掃描模式排列按鈕

應(yīng)用程序中最常見的錯誤就是按與用戶自然掃描模式不同的順序排列按鈕。優(yōu)先級最高的按鈕放在最前面，以便用戶首先注意到它。然而，通過視覺加權(quán)，用戶會以任何順序注意到按鈕。

按鈕的順序不是為了提高可見度，而是為了提高效率。首先放置高優(yōu)先級按鈕會使掃描方向從上到下顛倒，從而破壞視線的自然流動。

它不是強(qiáng)制用戶重新掃描按鈕，而是允許用戶在單向掃描中執(zhí)行高優(yōu)先級操作。這允許用戶在做出決定之前依次掃描按鈕所需的所有信息。

將最高優(yōu)先級的動作放在底部使其成為視覺阻力最小的路徑，并且可以快速輕松地點擊。此外，底部位置是手指最容易觸及的位置，進(jìn)一步提高了效率。

2. 使用形狀區(qū)分按鈕和文本

應(yīng)用程序中的另一個常見錯誤是使用文本來表示按鈕。設(shè)計師使用文本按鈕來表明它們的優(yōu)先級低于其他操作。但是，這對于操作按鈕來說是不合適的選擇。文本看起來不像按鈕。通過使用文本按鈕，用戶可以忽略操作而只看到主要操作。

文本按鈕也會使得用戶對內(nèi)容是按鈕還是信息而引起混淆。這種不確定性會導(dǎo)致這些按鈕被跳過。

文本按鈕不僅令人困惑，而且還是難以點擊的小目標(biāo)。將文本標(biāo)簽放置在按鈕形狀內(nèi)可以更輕松地調(diào)用操作并點擊它。

按鈕形狀是抑制優(yōu)先級低于文本按鈕的操作的好方法。使用戶更容易識別以他們喜歡的方式實現(xiàn)目標(biāo)的所有選項。

3. 為漸進(jìn)式動作添加顏色

高優(yōu)先級操作是最容易看到的。此操作與用戶的目標(biāo)直接相關(guān)。如果您不確定其余的操作，請考慮哪些操作將用戶推向目標(biāo)，哪些操作正在遠(yuǎn)離目標(biāo)。

在上面的例子中，“結(jié)帳”是優(yōu)先的，這是用戶達(dá)到目標(biāo)的一個動作。但是，尚不清楚“查看購物車”或“繼續(xù)購物”操作是否具有中等優(yōu)先級。

“查看購物車”操作允許用戶查看他們添加到購物車中的產(chǎn)品，這會促進(jìn)結(jié)帳?！袄^續(xù)購物”操作將用戶從結(jié)賬返回到產(chǎn)品頁面。

通過查看每個操作，很明顯“查看購物車”具有中等優(yōu)先級，而“繼續(xù)購物”具有低優(yōu)先級。

按鈕顏色從文本顏色中脫穎而出并吸引用戶的注意力，因此它是顯示漸進(jìn)式動作的有效方式。如果按鈕顏色與文字顏色相同，則信號不是很強(qiáng)。為漸進(jìn)式動作添加不同的顏色意味著用戶應(yīng)該采取的動作。

如果您為每個漸進(jìn)式動作使用相同的顏色，則用戶無法確定哪個具有更高的優(yōu)先級。此外，為每種顏色使用不同的顏色只會使用戶感到困惑，并且不會理解不同的顏色。并且，您還會在每個按鈕上感受到相同的視覺重量。

設(shè)計的訣竅是使用相同的色調(diào)，但改變中等優(yōu)先級動作的飽和度和亮度，使其看起來比高優(yōu)先級動作更亮?，F(xiàn)在按鈕權(quán)重不沖突，很明顯哪個突出。

對比以增強(qiáng)對比度。主要按鈕使用深色背景上的淺色文字，次要按鈕使用淺色背景上的深色文字。這為高優(yōu)先級操作提供了更亮的文本標(biāo)簽和最佳對比度。

4. 改變標(biāo)簽上文字的粗細(xì)

到目前為止，應(yīng)用這些技術(shù)足以區(qū)分優(yōu)先級，但您還可以做更多的事情。按鈕越直觀，用戶就越不需要考慮它。

對每個標(biāo)簽上的文本使用相同的粗體可以賦予該文本相同的強(qiáng)調(diào)量。因此，建議根據(jù)優(yōu)先級分別強(qiáng)調(diào)每個標(biāo)簽的文本。更改文本的粗細(xì)，使高優(yōu)先級按鈕最厚重，低優(yōu)先級按鈕相對單薄。這樣，當(dāng)用戶閱讀文本標(biāo)簽時，文本的權(quán)重表示優(yōu)先級。

在上面的例子中，“結(jié)賬”標(biāo)簽比其他標(biāo)簽更厚更亮?！安榭促徫镘嚒睒?biāo)簽為半粗體，“繼續(xù)購物”標(biāo)簽為中等。因此，文本標(biāo)簽反映了每個動作的視覺權(quán)重?！安榭促徫镘嚒睒?biāo)簽上指示“3件商品”的文字沒有加粗，因為它是補(bǔ)充信息，并不代表所執(zhí)行的操作。

5. 為高優(yōu)先級操作提供圖標(biāo)

最后一種技術(shù)是讓色盲用戶可以訪問您的按鈕。色盲用戶無法通過顏色區(qū)分重量差異。因此，我們需要的東西是不是顏色作為一個視覺線索。

為高優(yōu)先級操作添加圖標(biāo)將進(jìn)一步強(qiáng)調(diào)它以使其脫穎而出。用戶瀏覽時，用戶通常關(guān)注視覺元素而不是文本。該圖標(biāo)將使所有用戶更加關(guān)注高優(yōu)先級操作。

用戶仍然可以通過移除顏色和標(biāo)簽來識別結(jié)賬按鈕。

總結(jié)

如果用戶在操作屏幕上花費大量時間，或者點擊率較低，可能就是按鈕設(shè)計的不直觀。在這種情況下，可以使用這些技術(shù)來增強(qiáng)按鈕顯示并有利于突顯優(yōu)先級。

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計( www.lzhte.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)