當(dāng)前位置：首頁(yè) >UI設(shè)計(jì) >如何設(shè)計(jì)完美按鈕，有方法

如何設(shè)計(jì)完美按鈕，有方法

發(fā)布時(shí)間：2024-04-03 19:22:36 瀏覽量：213次

前言

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

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

因此，向用戶傳達(dá)一個(gè)按鈕是如何工作，以及它將把用戶引向何處是至關(guān)重要的。

一、好按鈕的設(shè)計(jì)原則

正如谷歌解釋的那樣，一個(gè)好的按鈕設(shè)計(jì)遵循以下三個(gè)原則：

· 可被理解的

· 可被識(shí)別的

· 可被發(fā)現(xiàn)的

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

1.使按鈕可被理解

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

當(dāng)然你也可以添加一個(gè)圖標(biāo)來(lái)幫助用戶識(shí)別并理解所要進(jìn)行操作的上下文語(yǔ)境。

但是如果沒(méi)有任何文字，按鈕將缺乏完整的意義，因?yàn)槲谋臼菍?duì)點(diǎn)擊按鈕后會(huì)發(fā)生什么的承諾。

2019年，Wix的OS團(tuán)隊(duì)決定改變按鈕層級(jí)。

當(dāng)我們第一次推出時(shí)，我們的設(shè)計(jì)系統(tǒng)只在行動(dòng)召喚按鈕中附帶文本，而我們頁(yè)面上的任何二級(jí)行動(dòng)召喚（CAT）都只有一個(gè)按鈕，沒(méi)有文字。

在我們更新之后，我們把所有只有圖標(biāo)的按鈕變成了文本或者文本+圖標(biāo)按鈕。這個(gè)小小的改變讓“創(chuàng)建新文件夾”的點(diǎn)擊率大幅提升。

更新之前

更新之后

2.使按鈕可被找到

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

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

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

3.使按鈕可被識(shí)別

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

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

在某些情況下，如在下方這種彩色背景上，藍(lán)色由于對(duì)比度的原因而不太適合被使用時(shí)。

此時(shí)，文本、和形式可以使按鈕看起來(lái)可被識(shí)別并與周?chē)h(huán)境的其余部分區(qū)分開(kāi)來(lái)。

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

二、按鈕的文本

我們剛剛提到過(guò)，文本是解釋按鈕意圖的主要元素，它應(yīng)該是清晰的、可預(yù)測(cè)的和簡(jiǎn)潔的。

1.文本的選擇

可以嘗試從使用動(dòng)詞開(kāi)始入手，必須告訴用戶點(diǎn)擊按鈕后會(huì)發(fā)生什么，這樣他們才能預(yù)測(cè)下一步。（注意：盡量使用任何年齡組都能識(shí)別的簡(jiǎn)單語(yǔ)言。）

2.上下文中的文本

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

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

好的例子

糟糕的例子

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

三、按鈕的圖標(biāo)設(shè)計(jì)

圖標(biāo)也能幫助用戶理解上下文語(yǔ)境。

然而，圖標(biāo)經(jīng)常會(huì)被誤解，因?yàn)閳D標(biāo)不如文本那樣直白易懂，因此，你應(yīng)該謹(jǐn)慎使用圖標(biāo)按鈕。

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

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

四、按鈕的層級(jí)

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

而一個(gè)好的層次結(jié)構(gòu)意味著每一個(gè)動(dòng)作在需要的時(shí)候都很容易被發(fā)現(xiàn)，這里會(huì)提供一些技巧來(lái)幫助你構(gòu)建一個(gè)良好的層級(jí)結(jié)構(gòu)。

1.位置

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

在從左至右書(shū)寫(xiě)的語(yǔ)言中（如英語(yǔ)和中文），用戶需要從左邊開(kāi)始閱讀，心理學(xué)家Herman Ebbinghaus認(rèn)為，一個(gè)序列中的第一個(gè)和最后一個(gè)元素是最容易被記憶的，因此這就是為什么最好把主要的行動(dòng)號(hào)召按鈕放在右邊。

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