按鈕是互動設計中一個常見基本元素。儘管按鈕看似一個非常簡單的使用者介面（UI）元素，在過去幾十年，其設計也經歷了不少發展和演變。但萬變不離其宗，對於按鈕的使用者體驗（UX）設計仍關乎於辨識度和清晰度。
本文簡要概述了按鈕設計的發展演變，並提出使用者體驗好的按鈕設計應遵循的最佳實踐。
一、按鈕設計的發展演變
1. 3D 按鈕
自初以來，作業系統按鈕一直通過浮雕和陰影來區分外圍背景。這種設計方案是基於一個簡單原則——通過邊框、斜度和陰影使按鈕在背景內容襯托下顯得醒目，這樣就方便將其識別為一個可點選的元素。
注意按鈕是如何凸顯的
Windows 95 對話方塊使用了厚重陰影和高光來製造 3D 效果，以輔助使用者識別視覺層次，並瞭解哪些元素是互動元素。
凸顯的互動元素看似能（通過點選滑鼠）按下去
2. 擬物按鈕就數字設計而言，擬物化是指 UI 元素的設計與現實物體相像的一種方式，它可以是對現實物體材質外觀的複製，也可以是模擬真實按鈕使其看似像實物按鈕。擬物化設計藉助使用者對某物的先驗知識使其理解如何去使用新的互動介面。
下圖中對計算器的擬物設計即通過使用者對計算器實物的先驗知識，從而幫助使用者在數字環境中更好地去認識和使用它。
圖片來源：theultralinx
3. 扁平按鈕如今 UI 設計的一個重大轉變是逐漸從擬物化設計向扁平化設計過渡，設計效果也不再有 3D 效果。
與擬物化設計不同的是，扁平化設計被視作探索數字媒體的一種方式，其不再試圖去「還原」實物的材質外觀。因此，其擯棄了起初用來告訴使用者哪些元素可點選/可操作的厚重視覺線索。
整齊排列的扁平按鈕
蘋果 iOS 系統的計算器 App
當整個使用者介面都是扁平化設計，使用者如何知道按鈕在哪裡呢？使用者仍需要通過視覺指引（幫助使用者理解如何使用介面的可感知線索）來知道頁面上可點選/可操作的地方。因此，顏色在扁平化設計中相當重要，因為若使用扁平按鈕，這些顏色將是幫助使用者識別按鈕的主要識別符號之一。
4. 近扁平化設計及浮動操作按鈕（FAB）
近扁平化設計是在原扁平化設計（或超扁平化設計）基礎上的一種演變。這種設計幾乎是扁平化的，但又在設計中通過細薄陰影、高光和疊層在使用者介面製造出立體效果。
Google 的質感設計（Material Design）語言即是一個按正確次序使用這些立體效果的近扁平化設計案例，它創新出一種全新按鈕：浮動操作按鈕（Floating Action Button，簡稱 FAB）。
這些按鈕置於使用者介面頂層，並吸引使用者進行進階操作（Promoted Actions）或主要操作（Primary Actions）。它們作為行為號召按鈕（用以促進進階操作），是使用者在某特定螢幕上最常用的單一操作。
Google Maps 是正確使用 FAB 的一個典例，使用者在地圖上最主要的操作行為是找到方向，所以Google FAB 的設計方式就能說得通。
Android 系統上的 Google Maps
另一個在 UI 設計中使用 FAB 的範例是 Evernote 。儘管 Evernote 的 UI 幾乎近扁平化，其在導航欄新增了細薄陰影，同時也使用了 FAB （新建筆記）。
安卓系統上的 Evernote 應用
5. 虛擬按鈕2014年，UI 設計領域的主導性演變趨勢之一就是虛擬按鈕的應用。虛擬按鈕是有基本形狀的透明或中空按鈕，按鈕形狀通常是矩形或正方形。
虛擬按鈕也被稱為「中空（empty）按鈕」、「裸露（naked）按鈕」或「鏤空（hollow）按鈕」。虛擬按鈕的邊框通常是一條非常細的線條，框內即純文字。
普通設計（左）和聚焦設計（右）
虛擬按鈕最初始於扁平化設計的發展演變，當蘋果釋出 iOS 7 後就變得非常流行。蘋果 iOS 介面有很多虛擬按鈕的應用。簡約的矩形方框加上框內整潔的字型，使得扁平化介面看起來非常完美。
「Name」、「Release Data」以及「Featured」類似虛擬按鈕。「GET」是虛擬按鈕。
虛擬按鈕通常看似行為號召（Call to Action, 簡稱 CTA）按鈕，同時展示其清爽外觀。Specular 網站是應用此類按鈕的一個很好的範例。
Specular 網站上使用了扁平化按鈕「立即購買（PURCHASE NOW）」作為主要操作按鈕，同時使用虛擬按鈕「瀏覽（TAKE TOUR）」作為次要操作按鈕。
二、按鈕設計的基本最佳實踐
在開始設計按鈕之前，要考慮你的設計如何向使用者傳達出可供性（Affordance，可供性就設計而言，其著重於物體與使用者之前的關係，以及其達到的效果和提示作用）。那使用者如何將互動介面元素理解為按鈕呢？鑑於此，在設計中你更應該：
此外，還要確保在所有介面互動控制中保持一致性，這樣使用者就能在 app 或網站的每個頁面上從 UI 元素中識別出按鈕。
1. 外形
穩妥的方式就是根據網站或 app 的風格來設計方形按鈕或圓角方形按鈕。矩形狀按鈕很久之前就應用於數字世界的設計，使用者對此也非常熟悉了。
據研究顯示，圓角能促進資訊處理，並吸引使用者聚焦到元素正中央。
圓角矩形按鈕
當然，你還可以加入更多創意元素，使用如圓形，三角形甚至自定義形狀的其它形狀，但要注意，使用這些形狀可能會更加冒險。
FAB 示例
2. 尺寸和內邊距在幫助使用者識別按鈕元素時，按鈕的尺寸大小也非常重要。你需要考慮按鈕元素的尺寸大小，同時還要考慮可點選元素間的內邊距。
尺寸。當你使用輕擊（tap）作為 app 或網站的主要輸入互動方式時，你可以參考麻省理工大學觸擊實驗室（MIT Touch Lab）的研究，從而為你的按鈕設計選擇合適的尺寸。
根據 MIT 的研究發現，指墊的平均寬度在10-14毫米之間，指尖的平均寬度在8-10毫米之間。因此，10×10毫米是觸屏按鈕最小尺寸的一個好選擇。
圖片來源：uxmag
這個建議本意不是讓那些易按錯的按鈕更加完美，而是儘可能將按錯次數最小化到實用水平，同時，還要平衡其他重要特性（比如螢幕資訊密度）。
圖片來源：ux.stackexchange.com
當滑鼠和鍵盤作為主要的輸入互動方式時，對按鈕尺寸的要求則可以稍微降低，以便於適應密集型的使用者介面。內邊距。按鈕間內邊距是為更好地區分各互動控制按鈕而設計，同時給使用者介面足夠多的空間。
Google 的 Material Design 對話方塊中扁平化按鈕間的內邊距
3. 標籤你應該為按鈕選擇一個合適的標籤。選擇標籤的方法應該基於最小驚訝原則（principle of least astonishment）：如果某必要按鈕有個高驚訝因素的標籤，那就要考慮更換這個標籤了。
經驗法則——按鈕的標籤要體現其功能。新增一條清晰資訊來告知使用者在點選/輕擊後會發生什麼，或者通過行為動詞提示使用者某介面元素的功能。
下圖示例是在 Dropbox 網頁版上傳檔案的一個對話方塊，該對話方塊中有一個帶有「棒極了！（Awesome!）」標籤的單獨按鈕。這個標籤對普通使用者來說可能有困惑性，因為它並沒有說明點選該按鈕後有什麼用。
圖片來源：uxmatters
4. 顏色在調色盤上選擇顏色時，要思考顏色可以怎樣幫助使用者導航和理解該行為的。
使用顏色和對比來幫助使用者檢視和了解 app 的內容，與正確的元素進行互動，並理解相關行為。
下圖示例中，我們使用了紅色按鈕來標識一個潛在的毀滅性行為（該按鈕標籤「UNINSTALL」意為「解除安裝」）。
注意「解除安裝（Uninstall）」動作按鈕是如果通過顏色和對比更吸人注意的。圖片來源：Material Design
使最為重要的按鈕（特別是行為號召按鈕）看似最重要的。例如，亞馬遜使用了對比性較強的黃色按鈕來吸引使用者採取正確的行為。
亞馬遜的CTA按鈕「加入購物車（Add to Cart）」使用了對比顏色
結束語所有按鈕（比如經典按鈕或者像虛擬按鈕或浮動操作按鈕等現代按鈕）的作用都是指導使用者實施你想讓他們去採取的行為。
把網頁或者 app 當做一個繁忙的使用者發起的對話，那麼按鈕對這段對話就非常重要——流暢的互動能保證對話正常進行，而小故障（比如找不到正確的按鈕）就會引起中斷，更甚是故障。
謝謝！
評論(0)