編者按：按鈕設計是 UI/UX 設計的一個基礎問題，設計師 Eduard Kuric 為此專門深入地撰寫了這個系列文章，這篇是系列的第一篇。他在文章中深入分析了按鈕的基礎特性，并且深入細致的設置了一套完整的測試，試圖徹底徹底揭秘，如何設計才能防錯并且避免用戶感到困惑和沮喪。
這是系列文章的第一篇。按鈕有很多基礎的特征，這些特征可以作為視覺提示，幫助用戶了解信息和狀態，我們和真實的用戶進行了溝通和測試，全面地進行了研究，評估各種類別視覺元素的有效性。在測試的第一部分，我們給了用戶足夠多的時間，看看哪些視覺元素用戶更容易感知到，以及隨著時間變化，這些感知是否會發生變化。
第二篇文章將會將測試和調研的結果總結出來：哪些視覺元素更重要，更好，哪些設計不夠好，以及為什么。在這次的研究過程中，我們發現有一些設計的實際效果和我們的傳統的理解有所不同，最后，我們列舉出了按鈕設計的一些最佳實踐，方便在后續的設計中使用。
這次的研究主要圍繞著下面的 2 個問題：
- 一個好的、清晰易讀的按鈕應該是什么樣的
- 按鈕和開關的那些視覺要素能夠防錯并且不會讓用戶感到困惑和沮喪
下面我們先回到按鈕本身的一些特征，以及我們使用過程中的它們的變化，以及可能會涉及到的一些設計原則。
延伸閱讀：
先假設一個場景，你正在下單購買一張機票，然后你會看到下面的按鈕：
左邊是單程，右邊是往返
這個時候你可能會感到困惑，到底你能不能返程回家？
Swtich，或者說開關按鈕，它指的是在兩個或者多個狀態或者選項之前切換的控件，它從名稱到功能，都是高度擬物的，它們是基于物理世界當中傳統的開關和按鈕的邏輯來設計的。為了更好的理解虛擬的按鈕，我們不妨從普通的物理開關聊起，比如一個電燈的開關。
- 如你所見，電燈的開關按鈕可以處于通斷兩種狀態，開和關，同樣的，數字的按鈕有兩個（有時候又更多）互斥的狀態，其中一個狀態通常會被設置成為默認狀態。
- 電燈開關被撥動之后，燈會立刻亮起或者關閉，和電燈的開關一致，數字的開關按鈕在點擊的時候，交互的結果應該會立即出現。精心設計的數字開關按鈕，在觸發后會立刻觸發系統狀態改變，而無需點擊「保存」或者「提交」。
簡而言之，在設計開關按鈕的時候，你應該遵循以下原則：
- 確保當按鈕被點擊的時候，立即會出現效果，而不要額外增加「保存」或者「提交」按鈕
- 當涉及的選項有默認值的時候，才使用按鈕
在其他的情況下，使用復選框和單選按鈕可能是更好的選擇。
在開關按鈕的類型選取上，通常有 2 種不同的類型供你選擇。如果功能涉及 2 種不同的狀態，那么你可以選擇傳統的撥動式的開關控件，這很簡單，觸發或者關閉。
而切換式開關則不僅可以在二元選擇下使用，還能兼顧到多狀態、多選項的需求。它由 2 個或者更多的、彼此相鄰的按鈕組成，而被選中的狀態或者選項會被「高亮顯示」。
在設計的時候，需要讓被選中的和未選中的按鈕兩者之間在視覺重量上有差異，同時，按鈕又需要在外輪廓上足夠相似，這樣才會被視作為一個整體當中的兩個或者多個相互關聯的子個體。而設計的挑戰在于，如何明確哪個按鈕上處于觸發狀態，哪個是被禁用的狀態。
使用撥動式開關本身上比較簡單的，即使不看文本內容，通常也可以借助色彩和視覺重量來判斷開關狀態。但是切換式按鈕則不同，它們的文本內容是無法被忽略的，因為必須要借助文本標簽來判斷狀態差異。
在這種情況下，用戶需要依賴其他的視覺信息和元素來了解信息，如果設計不當，反而會增加認知負荷。不過可以肯定的是，我們需要做的是借助視覺線索來強化按鈕激發態的感知。而這又回到了最基礎的問題：如何設計一個良好的按鈕。我們也一直在問自己這個問題，所以這次調研和測試就試圖從根本上來理解按鈕，然后解決這個問題。
通常大家是根據經驗和可用性測試，來確保自己設計的切換按鈕是有效的。但是如果完全基于冷硬的數據來重新做設計，又會發生什么不一樣的事情呢？哪些設計元素的變化，會帶來我們認知之外的改變？是否存在讓用戶更快識別按鈕和狀態的設計元素？在我們的調研的第一部分，就著重研究了按鈕的狀態和不同視覺元素之間的關系。
視覺提示，或者說視覺線索，是網站和APP為用戶提供信息，并且告知用戶如何使用這些功能的視覺信息。它們幫助用戶發現可點擊的區域，了解功能的運作模式，明確狀態，并且告訴他們可能存在的可能性。
盡管設計按鈕是設計師經常討論的話題，但是目前來看，在選擇設計的時候，其實沒有非常全面的指導方針，因此我們會先定義這個研究方案。
如圖所示，按鈕的結構通常包含標簽文本、內部顏色填充、外部輪廓構成，有時候會帶有特定圖標，但是它們有時候不會同時存在，它們當中每一個都可以以某種方式來被強調，作為視覺提示，而且它們之間存在很多種不同的搭配方式。
我們在測試中，將會專注于每個按鈕當中可能存在的 4 種獨立的視覺提示：標簽文本、填充顏色、外框、圖標。我們需要研究這四個要素是如何影像用戶感知的。我們希望使用控制變量法，讓用戶每次都專注到特定的一個元素上，借此來判斷用戶對于特定元素的認知和反應。
在研究過程中，我們還碰到一個問題，就是我們要選擇什么樣的文本標簽。但是為了避免文本本身對于用戶認知的影像，我們最初的想法的是使用「選項A/選項B」，但是考慮到 A 和 B 暗含字母順序這可能會對用戶潛意識有影響，所以我們選擇來毫無關聯和意義的兩個詞「Racted」和「Blison」，這樣它們就只存在視覺差異，而規避來語義上的影響。
接下來，我們先設置好我們要做的測試主題和內容。
下面我們正式開始設置測試。
將標簽視作為關鍵的視覺提示，那么我們需要考慮字體的粗細、文本的大小和顏色。
我們假設帶有加粗文本的視作為激發態，而不是常規體字體：
當兩個大小不同的文本標簽彼此靠近的時候，我們通常會認為更大的文本所在的按鈕上激發態。字體差異越大，越容易被定義為激發態。
對比色有利于做出區分，如果你只是想要強調其中的一個，那么你需要增加其中一個的視覺重量，那么單純的對比就不夠來，因為單純的對比色，讓兩者成為了平等的選擇。
在我們的研究當中，單純的顏色色相反轉不足以讓人分出優先級，我們的參與在看到這些按鈕的時候，可能會做出截然不同的選擇。
在這項研究當中，我們假定深色的按鈕更容易被視作為激發態。
在這里需要強調的是，對于色彩有視覺缺陷的用戶而言，對比度和顏色通常不足作為判斷的依據。根據 NHS 的調研，大概有 8% 的男性有道爾頓癥，這意味著他們無法根據色彩的視覺提示來做出選擇。
當然，這個主題可能存在和上一個主題存在類似的問題，不過紅色和綠色上對比色，而且在多數文化當中對于兩者的認知存在相同的共識。在西方文化當中綠色表示「開啟」（激活或者打開）的狀態，而紅色通常表示「關閉」。值得注意的，在阿拉伯文化當中綠色被賦予更多的含義，紅色在東方文化中也有更特殊的含義。
當彩色和無彩度的黑色/白色結合起來的時候，我們通常認為彩色的標簽內容被視作為激發態，因為它們在屬性上更強，有更多視覺重量。
和上一個主題類似，身為中性色的灰色在視覺重量上更輕，因此我們預期中彩色的標簽會更加容易被視作為激發態。
我們假定顏色飽和度越高，它的視覺重量會越重，高飽和度的顏色更容易讓用戶感覺它上激發態。
按鈕的填充色的選取，基本都是圍繞著色彩理論來進行的。
按鈕填充色選擇對比色，本質上和之前的文本標簽選擇對比色的邏輯是類似的。由于色相相反的顏色有相同的視覺重量，我們預計測試中很容易讓人感到困惑。我們預計結果差異會非常大。
在實際測試中，我們默認將相對較暗的顏色標識為激發狀態。
這一點和上面的主題4是類似的，考慮到多數的文化習慣，我們將綠色的按鈕標識為激發態。
正如同我們在前面所說的，顏色飽和度對于視覺重量是有明顯影響的。我們假定飽和度更高的色彩更容易被識別為激發態，尤其是在和灰色這樣的中性色的對比之下。
在測試過程中，我們選用了灰色和橙色進行測試。
我們預期非中性色比如黃色比起中性色更容易讓人感覺到視覺重量，所以在這個測試中采用了黃色和中性色灰色進行了對比。
這個測試當中，標簽文本的顏色和填充色之間的顏色進行了互換倒置，藍色作為填充背景色時，似乎更容易被認為有著更強的視覺重量，但是我們預計在用戶眼中，兩者之間到底誰是激發態更難被判斷出來。
關于外描邊的設計問題，通常都圍繞著是否要使用描邊，以及描邊的樣式和位置。在色彩和粗細方面的探討，已經在之前的測試中有充分的研究，因此對于外描邊，我們傾向于測試一般描邊和特定外描邊作為視覺線索的效果。
我們希望帶有突顯輪廓的按鈕被視作為激發態，這看起來是比較顯而易見的，但是它在實際測試中的有效性還有待驗證。
這其實是對于之前的測試的一個重要補充。有時候，為了讓彩色按鈕被更加高亮的顯示，有時候會讓輪廓和非激發態按鈕的背景色重合，但是這種設計可能存在的問題在于，用戶可能不再將非激發態的按鈕視作為按鈕。
有時候設計師會讓處于激發態的按鈕被凸顯出來，但是如果遵循物理世界的常規邏輯，被激發的按鈕通常處于凹陷狀態，這兩者其實是存在沖突的。因此，我們為了了解用戶到底是怎么理解激發態按鈕的狀態，設置了這一測試。
我們預估數字按鈕的邏輯和物理世界的邏輯是相反的。
額外的圖標增加了凸顯按鈕的視覺線索，它們有可能完全超越之前的視覺線索，給用戶足夠直觀的認知嗎？為了確保圖標的有效性，我們將不會在其中加入其他的視覺信息，只保留圖標相關的內容。
我們在被選中的按鈕上增加一個選中的對勾標識，來表示活動狀態。
通常按鈕上不會帶有單選標識，但是使用單選標識能夠簡單清晰地呈現按鈕地狀態。
在測試過程中，我們進行了定量的測試，根據大量可靠的實際數據來支撐整個研究，我們使用了 UXtweak 來分別進行 5 秒測試和 20 秒測試，測試過程中我們分別給用戶 5 秒和 20 秒來選擇到底哪個按鈕是激發狀態的，以此來測試時間對于決定的影像。
同時我們分別兩邊的按鈕 Racted 和 Blison 分別設置為不同的活動狀態，然后將它們隨機分配給不同的用戶，以此抵消左右兩側在認知上對于用戶的影像。
在五秒測試當中，參與者會被展示不同的按鈕設計，在每次展示按鈕設計的時候，他們會被要求查看切換按鈕 5 秒，然后回答一些問題，通常第一個問題會是「哪個按鈕是被按下的？」
答案 通常是其中的一個按鈕，Racted 或者 Blison。
在我們的研究過程中，我們會考慮詳細的措辭，因為措辭可能會影響最終的結果。
根據大氣透視原理，在我們的認知當中，飽和度更低、更加模糊的物體我們會認為它更遠，但是這種認知習慣投射到按鈕上，又和我們日常對于按鈕的習慣認知是反過來的。
所以我們的第二個問題，通常是「你對自己的回答有多大的把握？」我們會給用戶 5 個不同的級別，從「完全不確定」到「完全確定」。
和五秒測試類似，只不過測試的時長拉到了20秒，我們進行這個測試是為了確定，拉長時間能否讓用戶做出不一樣的選擇。
被調研的用戶在參與期間會被要求填寫一份問卷，以幫助我們對于用戶本身進行了解，我們感興趣的是：
- 參與者的年齡
- 參與者的性別
- 參與者的教育水平
- 參與者瀏覽網頁的頻率
- 參與者瀏覽網頁的原因和需求
- 參與者對于自己上網行為的自我評估
這些數據讓我們對于用戶樣本有基礎的理解，例如用戶上網的頻率和需求和他們的認知是否有相關性，是否和用戶年齡有關系，和日常網上的活躍度是否有關系，等等。
總的來說，我們的目標是搜集 100 份普通用戶的回復，我們招募了從 16 歲到 75 歲范疇內的人群，主要選擇英語為主語言的國家的用戶參與調研。
我會在下一篇文章當中，詳細揭示測試的結果。
復制本文鏈接 文章為作者獨立觀點不代表優設網立場，未經允許不得轉載。
發評論！每天贏獎品
點擊 登錄 后，在評論區留言，系統會隨機派送獎品
2012年成立至今，是國內備受歡迎的設計師平臺，提供獎品贊助 聯系我們
標志設計標準教程
已累計誕生 729 位幸運星
發表評論 為下方 3 條評論點贊，解鎖好運彩蛋
↓ 下方為您推薦了一些精彩有趣的文章熱評 ↓