如何設計完美按鈕，有方法！

時間：2023-09-10 14:18:02 | 來源：網(wǎng)站運營

時間：2023-09-10 14:18:02 來源：網(wǎng)站運營

如何設計完美按鈕，有方法！：

前言

我們都知道按鈕是交互設計中主要的UI元素之一，它們能夠幫助用戶去操控產(chǎn)品以此來實現(xiàn)用戶的目標，比如可以指引用戶在不同頁面之間瀏覽、修改內(nèi)容等。

不僅如此，大多數(shù)企業(yè)還常常通過記錄按鈕的點擊率來衡量他們是否成功。

因此，向用戶傳達一個按鈕是如何工作，以及它將把用戶引向何處是至關重要的。

一、好按鈕的設計原則

正如谷歌解釋的那樣，一個好的按鈕設計遵循以下三個原則：

· 可被理解的
· 可被識別的
· 可被發(fā)現(xiàn)的

以Wix（網(wǎng)頁設計編輯系統(tǒng)）為例則能非常好的闡釋這些原則。

1.使按鈕可被理解

首先，一個按鈕必須清楚地傳達它是做什么的，而文本正是解釋意圖的主要元素。

當然你也可以添加一個圖標來幫助用戶識別并理解所要進行操作的上下文語境。

但是如果沒有任何文字，按鈕將缺乏完整的意義，因為文本是對點擊按鈕后會發(fā)生什么的承諾。

2019年，Wix的OS團隊決定改變按鈕層級。
當我們第一次推出時，我們的設計系統(tǒng)只在行動召喚按鈕中附帶文本，而我們頁面上的任何二級行動召喚（CAT）都只有一個按鈕，沒有文字。
在我們更新之后，我們把所有只有圖標的按鈕變成了文本或者文本+圖標按鈕。這個小小的改變讓“創(chuàng)建新文件夾”的點擊率大幅提升。

2.使按鈕可被找到

操作按鈕必須位于用戶能夠找到的地方，比如主要操作必須總是非常明顯且位于頂部區(qū)域的，而導航性質(zhì)的操作可以看起來是更次要的，但也必須是可見的。

那些不影響主路徑且最不重要的操作(如“刪除”)則可以隱藏在彈出框之下。

用戶可不希望去尋找一個脫離上下文的按鈕，因此，我們需要避免將工具按鈕和導航按鈕放在同一個列表中。

3.使按鈕可被識別

在按鈕的設計中，我們需要讓用戶清楚且輕松理解界面上的哪些部分是靜態(tài)的，哪些是可點擊的。

在這點上，Wix為所有主要操作都賦上了藍色，淺藍色只能用作按鈕的背景色。

在某些情況下，如在下方這種彩色背景上，藍色由于對比度的原因而不太適合被使用時。

此時，文本、和形式可以使按鈕看起來可被識別并與周圍環(huán)境的其余部分區(qū)分開來。

遵循web內(nèi)容可訪問性指南，將有助于提供良好的文本對比。

二、按鈕的文本

我們剛剛提到過，文本是解釋按鈕意圖的主要元素，它應該是清晰的、可預測的和簡潔的。

1.文本的選擇

可以嘗試從使用動詞開始入手，必須告訴用戶點擊按鈕后會發(fā)生什么，這樣他們才能預測下一步。（注意：盡量使用任何年齡組都能識別的簡單語言。）

2.上下文中的文本

按鈕的文本應該反映上下文，從而確保用戶知道可以采取什么行動。

例如，警告彈窗的快速出現(xiàn)會改變界面布局，因此，潛在的操作必須非常明確得讓用戶知曉。

在只陳述事實的情態(tài)動詞中，比如“成功”或者“兩個用戶不能同時編輯”，可以使用較少描述性的按鈕，比如“知道了，謝謝”。

三、按鈕的圖標設計

圖標也能幫助用戶理解上下文語境。

然而，圖標經(jīng)常會被誤解，因為圖標不如文本那樣直白易懂，因此，你應該謹慎使用圖標按鈕。

對于一些專業(yè)工具類型的操作，圖標按鈕能夠發(fā)揮出很好的效果，它能夠幫助用戶去記憶，同時將圖標放在帶有文本的按鈕旁邊能夠增加被用戶注意到的機會。

側(cè)面導航測試表明，Wix用戶更多地使用帶有箭頭圖標的深入按鈕。

四、按鈕的層級

一個應用程序往往含有多個操作，有些操作是經(jīng)常被使用的，有些只是偶爾使用，但這里要強調(diào)的是，所有的按鈕都必須是可以被發(fā)現(xiàn)的！

而一個好的層次結(jié)構意味著每一個動作在需要的時候都很容易被發(fā)現(xiàn)，這里會提供一些技巧來幫助你構建一個良好的層級結(jié)構。

1.位置

最重要的按鈕必須放在最顯眼的地方，在Wix中，它往往會被置于在頁面的右上角，按鈕位置越靠下，越不容易被發(fā)現(xiàn)。

在從左至右書寫的語言中（如英語和中文），用戶需要從左邊開始閱讀，心理學家Herman Ebbinghaus認為，一個序列中的第一個和最后一個元素是最容易被記憶的，因此這就是為什么最好把主要的行動號召按鈕放在右邊。

一旦所有選項都已呈現(xiàn)，用戶就可以采取行動，這種趨勢被稱為「系列位置效應」，它常常被用于UX設計當中。

2.突出

我們常常會突出一些按鈕使其能夠更容易被用戶識別到，但請注意，不是每個按鈕都必須在同一級別被強調(diào)。

一個頁面應該只有一個主要操作，其他操作應該被視為第二或第三級別的。

五、按鈕的風格

每個按鈕都有一套基于自身意圖的樣式，一組樣式構建了客戶在使用應用程序時的設計語言。

不同性質(zhì)的按鈕如通用、導航、社交分享或上傳按鈕可以有不同的樣式，每個品牌的產(chǎn)品都可以有自己的一套按鈕樣式。

六、總結(jié)一下

良好的操作層次結(jié)構能夠在頁面上創(chuàng)造和諧，這能讓用戶更容易閱讀和理解，而構建良好的操作層次需要我們懂得如何劃分主要、次要以及最不重要的操作。

主要操作：與頁面形成最強烈的對比，對完成主要目標至關重要。

次要操作：無需用戶點擊即可在屏幕上識別，對完成主要目標起輔助作用。

最不重要的操作：通常隱藏在圖標按鈕下，與主目標沒有真正直接的聯(lián)系，例如:“編輯標簽”。

注意，每個操作都需有一個清晰的文本標簽，幫助用戶從第一眼就理解按鈕，按鈕中的圖標也需符合行業(yè)標準。

最后，這篇文章收集了多名設計師的經(jīng)驗，非常感謝他們的案例研究、見解和反饋，希望大家都能從這篇文章中有所收獲。




原文作者：Domas Markevi

原文鏈接：https://medium.com/wix-ux/designing-the-perfect-button-e77ec1f32ee5

---

更多UX行業(yè)前端資訊，歡迎訪問↓







當然也可以關注「簡立方」公眾號，每周定時更新精彩文章～