編者按：按鈕設(shè)計(jì)是 UI/UX 設(shè)計(jì)的一個(gè)基礎(chǔ)問題，設(shè)計(jì)師 Eduard Kuric 為此專門深入地撰寫了這個(gè)系列文章，這篇是系列的第一篇。他在文章中深入分析了按鈕的基礎(chǔ)特性，并且深入細(xì)致的設(shè)置了一套完整的測試，試圖徹底徹底揭秘，如何設(shè)計(jì)才能防錯(cuò)并且避免用戶感到困惑和沮喪。

這是系列文章的第一篇。按鈕有很多基礎(chǔ)的特征，這些特征可以作為視覺提示，幫助用戶了解信息和狀態(tài)，我們和真實(shí)的用戶進(jìn)行了溝通和測試，全面地進(jìn)行了研究，評(píng)估各種類別視覺元素的有效性。在測試的第一部分，我們給了用戶足夠多的時(shí)間，看看哪些視覺元素用戶更容易感知到，以及隨著時(shí)間變化，這些感知是否會(huì)發(fā)生變化。

第二篇文章將會(huì)將測試和調(diào)研的結(jié)果總結(jié)出來：哪些視覺元素更重要，更好，哪些設(shè)計(jì)不夠好，以及為什么。在這次的研究過程中，我們發(fā)現(xiàn)有一些設(shè)計(jì)的實(shí)際效果和我們的傳統(tǒng)的理解有所不同，最后，我們列舉出了按鈕設(shè)計(jì)的一些最佳實(shí)踐，方便在后續(xù)的設(shè)計(jì)中使用。

這次的研究主要圍繞著下面的 2 個(gè)問題：

• 一個(gè)好的、清晰易讀的按鈕應(yīng)該是什么樣的
• 按鈕和開關(guān)的那些視覺要素能夠防錯(cuò)并且不會(huì)讓用戶感到困惑和沮喪

下面我們先回到按鈕本身的一些特征，以及我們使用過程中的它們的變化，以及可能會(huì)涉及到的一些設(shè)計(jì)原則。

先假設(shè)一個(gè)場景，你正在下單購買一張機(jī)票，然后你會(huì)看到下面的按鈕：

左邊是單程，右邊是往返

這個(gè)時(shí)候你可能會(huì)感到困惑，到底你能不能返程回家？

開關(guān)按鈕是什么？

Swtich，或者說開關(guān)按鈕，它指的是在兩個(gè)或者多個(gè)狀態(tài)或者選項(xiàng)之前切換的控件，它從名稱到功能，都是高度擬物的，它們是基于物理世界當(dāng)中傳統(tǒng)的開關(guān)和按鈕的邏輯來設(shè)計(jì)的。為了更好的理解虛擬的按鈕，我們不妨從普通的物理開關(guān)聊起，比如一個(gè)電燈的開關(guān)。

• 如你所見，電燈的開關(guān)按鈕可以處于通斷兩種狀態(tài)，開和關(guān)，同樣的，數(shù)字的按鈕有兩個(gè)（有時(shí)候又更多）互斥的狀態(tài)，其中一個(gè)狀態(tài)通常會(huì)被設(shè)置成為默認(rèn)狀態(tài)。
• 電燈開關(guān)被撥動(dòng)之后，燈會(huì)立刻亮起或者關(guān)閉，和電燈的開關(guān)一致，數(shù)字的開關(guān)按鈕在點(diǎn)擊的時(shí)候，交互的結(jié)果應(yīng)該會(huì)立即出現(xiàn)。精心設(shè)計(jì)的數(shù)字開關(guān)按鈕，在觸發(fā)后會(huì)立刻觸發(fā)系統(tǒng)狀態(tài)改變，而無需點(diǎn)擊「保存」或者「提交」。

何時(shí)使用開關(guān)按鈕

簡而言之，在設(shè)計(jì)開關(guān)按鈕的時(shí)候，你應(yīng)該遵循以下原則：

• 確保當(dāng)按鈕被點(diǎn)擊的時(shí)候，立即會(huì)出現(xiàn)效果，而不要額外增加「保存」或者「提交」按鈕
• 當(dāng)涉及的選項(xiàng)有默認(rèn)值的時(shí)候，才使用按鈕

在其他的情況下，使用復(fù)選框和單選按鈕可能是更好的選擇。

撥動(dòng)開關(guān)和切換開關(guān)

在開關(guān)按鈕的類型選取上，通常有 2 種不同的類型供你選擇。如果功能涉及 2 種不同的狀態(tài)，那么你可以選擇傳統(tǒng)的撥動(dòng)式的開關(guān)控件，這很簡單，觸發(fā)或者關(guān)閉。

而切換式開關(guān)則不僅可以在二元選擇下使用，還能兼顧到多狀態(tài)、多選項(xiàng)的需求。它由 2 個(gè)或者更多的、彼此相鄰的按鈕組成，而被選中的狀態(tài)或者選項(xiàng)會(huì)被「高亮顯示」。

在設(shè)計(jì)的時(shí)候，需要讓被選中的和未選中的按鈕兩者之間在視覺重量上有差異，同時(shí)，按鈕又需要在外輪廓上足夠相似，這樣才會(huì)被視作為一個(gè)整體當(dāng)中的兩個(gè)或者多個(gè)相互關(guān)聯(lián)的子個(gè)體。而設(shè)計(jì)的挑戰(zhàn)在于，如何明確哪個(gè)按鈕上處于觸發(fā)狀態(tài)，哪個(gè)是被禁用的狀態(tài)。

使用撥動(dòng)式開關(guān)本身上比較簡單的，即使不看文本內(nèi)容，通常也可以借助色彩和視覺重量來判斷開關(guān)狀態(tài)。但是切換式按鈕則不同，它們的文本內(nèi)容是無法被忽略的，因?yàn)楸仨氁柚谋緲?biāo)簽來判斷狀態(tài)差異。

在這種情況下，用戶需要依賴其他的視覺信息和元素來了解信息，如果設(shè)計(jì)不當(dāng)，反而會(huì)增加認(rèn)知負(fù)荷。不過可以肯定的是，我們需要做的是借助視覺線索來強(qiáng)化按鈕激發(fā)態(tài)的感知。而這又回到了最基礎(chǔ)的問題：如何設(shè)計(jì)一個(gè)良好的按鈕。我們也一直在問自己這個(gè)問題，所以這次調(diào)研和測試就試圖從根本上來理解按鈕，然后解決這個(gè)問題。

案例研究：基于數(shù)據(jù)來設(shè)計(jì)清晰有效的切換按鈕

通常大家是根據(jù)經(jīng)驗(yàn)和可用性測試，來確保自己設(shè)計(jì)的切換按鈕是有效的。但是如果完全基于冷硬的數(shù)據(jù)來重新做設(shè)計(jì)，又會(huì)發(fā)生什么不一樣的事情呢？哪些設(shè)計(jì)元素的變化，會(huì)帶來我們認(rèn)知之外的改變？是否存在讓用戶更快識(shí)別按鈕和狀態(tài)的設(shè)計(jì)元素？在我們的調(diào)研的第一部分，就著重研究了按鈕的狀態(tài)和不同視覺元素之間的關(guān)系。

視覺提示

視覺提示，或者說視覺線索，是網(wǎng)站和APP為用戶提供信息，并且告知用戶如何使用這些功能的視覺信息。它們幫助用戶發(fā)現(xiàn)可點(diǎn)擊的區(qū)域，了解功能的運(yùn)作模式，明確狀態(tài)，并且告訴他們可能存在的可能性。

設(shè)計(jì)切換按鈕的研究路徑

盡管設(shè)計(jì)按鈕是設(shè)計(jì)師經(jīng)常討論的話題，但是目前來看，在選擇設(shè)計(jì)的時(shí)候，其實(shí)沒有非常全面的指導(dǎo)方針，因此我們會(huì)先定義這個(gè)研究方案。

如圖所示，按鈕的結(jié)構(gòu)通常包含標(biāo)簽文本、內(nèi)部顏色填充、外部輪廓構(gòu)成，有時(shí)候會(huì)帶有特定圖標(biāo)，但是它們有時(shí)候不會(huì)同時(shí)存在，它們當(dāng)中每一個(gè)都可以以某種方式來被強(qiáng)調(diào)，作為視覺提示，而且它們之間存在很多種不同的搭配方式。

獨(dú)立的視覺提示

我們?cè)跍y試中，將會(huì)專注于每個(gè)按鈕當(dāng)中可能存在的 4 種獨(dú)立的視覺提示：標(biāo)簽文本、填充顏色、外框、圖標(biāo)。我們需要研究這四個(gè)要素是如何影像用戶感知的。我們希望使用控制變量法，讓用戶每次都專注到特定的一個(gè)元素上，借此來判斷用戶對(duì)于特定元素的認(rèn)知和反應(yīng)。

在研究過程中，我們還碰到一個(gè)問題，就是我們要選擇什么樣的文本標(biāo)簽。但是為了避免文本本身對(duì)于用戶認(rèn)知的影像，我們最初的想法的是使用「選項(xiàng)A/選項(xiàng)B」，但是考慮到 A 和 B 暗含字母順序這可能會(huì)對(duì)用戶潛意識(shí)有影響，所以我們選擇來毫無關(guān)聯(lián)和意義的兩個(gè)詞「Racted」和「Blison」，這樣它們就只存在視覺差異，而規(guī)避來語義上的影響。

接下來，我們先設(shè)置好我們要做的測試主題和內(nèi)容。

下面我們正式開始設(shè)置測試。

標(biāo)簽文本

將標(biāo)簽視作為關(guān)鍵的視覺提示，那么我們需要考慮字體的粗細(xì)、文本的大小和顏色。

研究主題1：粗體字

我們假設(shè)帶有加粗文本的視作為激發(fā)態(tài)，而不是常規(guī)體字體：

研究主題2：文本大小

當(dāng)兩個(gè)大小不同的文本標(biāo)簽彼此靠近的時(shí)候，我們通常會(huì)認(rèn)為更大的文本所在的按鈕上激發(fā)態(tài)。字體差異越大，越容易被定義為激發(fā)態(tài)。

研究對(duì)象3：顏色和對(duì)比度

對(duì)比色有利于做出區(qū)分，如果你只是想要強(qiáng)調(diào)其中的一個(gè)，那么你需要增加其中一個(gè)的視覺重量，那么單純的對(duì)比就不夠來，因?yàn)閱渭兊膶?duì)比色，讓兩者成為了平等的選擇。

在我們的研究當(dāng)中，單純的顏色色相反轉(zhuǎn)不足以讓人分出優(yōu)先級(jí)，我們的參與在看到這些按鈕的時(shí)候，可能會(huì)做出截然不同的選擇。

在這項(xiàng)研究當(dāng)中，我們假定深色的按鈕更容易被視作為激發(fā)態(tài)。

在這里需要強(qiáng)調(diào)的是，對(duì)于色彩有視覺缺陷的用戶而言，對(duì)比度和顏色通常不足作為判斷的依據(jù)。根據(jù) NHS 的調(diào)研，大概有 8% 的男性有道爾頓癥，這意味著他們無法根據(jù)色彩的視覺提示來做出選擇。

研究主題4：紅色和綠色的文化感知

當(dāng)然，這個(gè)主題可能存在和上一個(gè)主題存在類似的問題，不過紅色和綠色上對(duì)比色，而且在多數(shù)文化當(dāng)中對(duì)于兩者的認(rèn)知存在相同的共識(shí)。在西方文化當(dāng)中綠色表示「開啟」（激活或者打開）的狀態(tài)，而紅色通常表示「關(guān)閉」。值得注意的，在阿拉伯文化當(dāng)中綠色被賦予更多的含義，紅色在東方文化中也有更特殊的含義。

研究主題5：文本標(biāo)簽種的彩色和黑色/白色

當(dāng)彩色和無彩度的黑色/白色結(jié)合起來的時(shí)候，我們通常認(rèn)為彩色的標(biāo)簽內(nèi)容被視作為激發(fā)態(tài)，因?yàn)樗鼈冊(cè)趯傩陨细鼜?qiáng)，有更多視覺重量。

研究主題6：文本標(biāo)簽中的彩色和灰色

和上一個(gè)主題類似，身為中性色的灰色在視覺重量上更輕，因此我們預(yù)期中彩色的標(biāo)簽會(huì)更加容易被視作為激發(fā)態(tài)。

研究主題7：文本標(biāo)簽中顏色飽和度的影響

我們假定顏色飽和度越高，它的視覺重量會(huì)越重，高飽和度的顏色更容易讓用戶感覺它上激發(fā)態(tài)。

填充色

按鈕的填充色的選取，基本都是圍繞著色彩理論來進(jìn)行的。

研究主題8：背景色反色對(duì)比

按鈕填充色選擇對(duì)比色，本質(zhì)上和之前的文本標(biāo)簽選擇對(duì)比色的邏輯是類似的。由于色相相反的顏色有相同的視覺重量，我們預(yù)計(jì)測試中很容易讓人感到困惑。我們預(yù)計(jì)結(jié)果差異會(huì)非常大。

在實(shí)際測試中，我們默認(rèn)將相對(duì)較暗的顏色標(biāo)識(shí)為激發(fā)狀態(tài)。

研究主題9：背景中紅色和綠色的文化感知

這一點(diǎn)和上面的主題4是類似的，考慮到多數(shù)的文化習(xí)慣，我們將綠色的按鈕標(biāo)識(shí)為激發(fā)態(tài)。

研究主題10：相同顏色不同飽和度的影響

正如同我們?cè)谇懊嫠f的，顏色飽和度對(duì)于視覺重量是有明顯影響的。我們假定飽和度更高的色彩更容易被識(shí)別為激發(fā)態(tài)，尤其是在和灰色這樣的中性色的對(duì)比之下。

在測試過程中，我們選用了灰色和橙色進(jìn)行測試。

研究主題11：背景中非中性和中性色的對(duì)比

我們預(yù)期非中性色比如黃色比起中性色更容易讓人感覺到視覺重量，所以在這個(gè)測試中采用了黃色和中性色灰色進(jìn)行了對(duì)比。

研究主題12：按鈕顏色倒置測試

這個(gè)測試當(dāng)中，標(biāo)簽文本的顏色和填充色之間的顏色進(jìn)行了互換倒置，藍(lán)色作為填充背景色時(shí)，似乎更容易被認(rèn)為有著更強(qiáng)的視覺重量，但是我們預(yù)計(jì)在用戶眼中，兩者之間到底誰是激發(fā)態(tài)更難被判斷出來。

外描邊

關(guān)于外描邊的設(shè)計(jì)問題，通常都圍繞著是否要使用描邊，以及描邊的樣式和位置。在色彩和粗細(xì)方面的探討，已經(jīng)在之前的測試中有充分的研究，因此對(duì)于外描邊，我們傾向于測試一般描邊和特定外描邊作為視覺線索的效果。

研究主題13：激發(fā) 態(tài)按鈕的高亮輪廓

我們希望帶有突顯輪廓的按鈕被視作為激發(fā)態(tài)，這看起來是比較顯而易見的，但是它在實(shí)際測試中的有效性還有待驗(yàn)證。

研究主題14：非激發(fā)態(tài)按鈕和背景色重合

這其實(shí)是對(duì)于之前的測試的一個(gè)重要補(bǔ)充。有時(shí)候，為了讓彩色按鈕被更加高亮的顯示，有時(shí)候會(huì)讓輪廓和非激發(fā)態(tài)按鈕的背景色重合，但是這種設(shè)計(jì)可能存在的問題在于，用戶可能不再將非激發(fā)態(tài)的按鈕視作為按鈕。

研究主題15：凸顯和凹陷按鈕測試

有時(shí)候設(shè)計(jì)師會(huì)讓處于激發(fā)態(tài)的按鈕被凸顯出來，但是如果遵循物理世界的常規(guī)邏輯，被激發(fā)的按鈕通常處于凹陷狀態(tài)，這兩者其實(shí)是存在沖突的。因此，我們?yōu)榱肆私庥脩舻降资窃趺蠢斫饧ぐl(fā)態(tài)按鈕的狀態(tài)，設(shè)置了這一測試。

我們預(yù)估數(shù)字按鈕的邏輯和物理世界的邏輯是相反的。

圖標(biāo)

額外的圖標(biāo)增加了凸顯按鈕的視覺線索，它們有可能完全超越之前的視覺線索，給用戶足夠直觀的認(rèn)知嗎？為了確保圖標(biāo)的有效性，我們將不會(huì)在其中加入其他的視覺信息，只保留圖標(biāo)相關(guān)的內(nèi)容。

研究主題16：選中標(biāo)識(shí)

我們?cè)诒贿x中的按鈕上增加一個(gè)選中的對(duì)勾標(biāo)識(shí)，來表示活動(dòng)狀態(tài)。

研究主題17：單選標(biāo)識(shí)

通常按鈕上不會(huì)帶有單選標(biāo)識(shí)，但是使用單選標(biāo)識(shí)能夠簡單清晰地呈現(xiàn)按鈕地狀態(tài)。

測試獨(dú)立視覺提示的有效性

在測試過程中，我們進(jìn)行了定量的測試，根據(jù)大量可靠的實(shí)際數(shù)據(jù)來支撐整個(gè)研究，我們使用了 UXtweak 來分別進(jìn)行 5 秒測試和 20 秒測試，測試過程中我們分別給用戶 5 秒和 20 秒來選擇到底哪個(gè)按鈕是激發(fā)狀態(tài)的，以此來測試時(shí)間對(duì)于決定的影像。

同時(shí)我們分別兩邊的按鈕 Racted 和 Blison 分別設(shè)置為不同的活動(dòng)狀態(tài)，然后將它們隨機(jī)分配給不同的用戶，以此抵消左右兩側(cè)在認(rèn)知上對(duì)于用戶的影像。

五秒測試

在五秒測試當(dāng)中，參與者會(huì)被展示不同的按鈕設(shè)計(jì)，在每次展示按鈕設(shè)計(jì)的時(shí)候，他們會(huì)被要求查看切換按鈕 5 秒，然后回答一些問題，通常第一個(gè)問題會(huì)是「哪個(gè)按鈕是被按下的？」

答案 通常是其中的一個(gè)按鈕，Racted 或者 Blison。

在我們的研究過程中，我們會(huì)考慮詳細(xì)的措辭，因?yàn)榇朕o可能會(huì)影響最終的結(jié)果。

根據(jù)大氣透視原理，在我們的認(rèn)知當(dāng)中，飽和度更低、更加模糊的物體我們會(huì)認(rèn)為它更遠(yuǎn)，但是這種認(rèn)知習(xí)慣投射到按鈕上，又和我們?nèi)粘?duì)于按鈕的習(xí)慣認(rèn)知是反過來的。

所以我們的第二個(gè)問題，通常是「你對(duì)自己的回答有多大的把握？」我們會(huì)給用戶 5 個(gè)不同的級(jí)別，從「完全不確定」到「完全確定」。

20秒測試

和五秒測試類似，只不過測試的時(shí)長拉到了20秒，我們進(jìn)行這個(gè)測試是為了確定，拉長時(shí)間能否讓用戶做出不一樣的選擇。

調(diào)研期間的問卷

被調(diào)研的用戶在參與期間會(huì)被要求填寫一份問卷，以幫助我們對(duì)于用戶本身進(jìn)行了解，我們感興趣的是：

• 參與者的年齡
• 參與者的性別
• 參與者的教育水平
• 參與者瀏覽網(wǎng)頁的頻率
• 參與者瀏覽網(wǎng)頁的原因和需求
• 參與者對(duì)于自己上網(wǎng)行為的自我評(píng)估

這些數(shù)據(jù)讓我們對(duì)于用戶樣本有基礎(chǔ)的理解，例如用戶上網(wǎng)的頻率和需求和他們的認(rèn)知是否有相關(guān)性，是否和用戶年齡有關(guān)系，和日常網(wǎng)上的活躍度是否有關(guān)系，等等。

參與者

總的來說，我們的目標(biāo)是搜集 100 份普通用戶的回復(fù)，我們招募了從 16 歲到 75 歲范疇內(nèi)的人群，主要選擇英語為主語言的國家的用戶參與調(diào)研。

結(jié)果

會(huì)在下一篇文章當(dāng)中，詳細(xì)揭示測試的結(jié)果。

作者：陳子木