按鈕是交互設計中一個常見的日常元素。雖然button看起來像一個非常簡單的UI元素，但它的設計在過去幾十年裏發生了很大的變化。但按鈕用戶體驗設計總是關於識別和清晰（recognition and clarity.）。
在本文中，我們將概述按鈕設計的發展，並指出爲了創建有效的按鈕，您應該遵循的最重要的最佳實踐。
風格的演變
三維按鈕（Three-Dimensional Button）
很早的時候，操作系統按鈕就依賴於浮雕和陰影效果，讓按鈕的外觀與周圍的環境區分開來。這個設計方案基於一個簡單的原則——使用邊框、漸變和陰影讓元素在背景和內容的襯托下脫穎而出，這使得它很容易被識別爲一個可點擊的元素。
在 Windows95 的對話框就使用了重陰影和高光來打造3D效果，用來幫助用戶理解視覺層次和感知哪些元素是交互式的。
擬物按鈕（Skeuomorphic Button）
在數字設計中，擬物化是指將 UI 元素製作得像現實生活中的物品，無論是複製現實生活中的紋理，還是將按鈕製作得像現實生活中的按鈕。擬物化設計通過映射用戶心智裏已有的設計，幫助用戶理解如何使用一個新的界面。計算器就是一個很好的案例，幫助用戶將先前的物理計算器知識直接轉移到數字環境中。
扁平按鈕（Flat Design Button）
2017年蘋果推出 iOS 7 系統，使得扁平設計在 UI設計廣泛應用。推動了設計從擬物化元素轉向扁平的轉化，去掉3D效果。與擬物化設計不同的是，扁平設計被視爲一種探索數字媒體的方式，而不是試圖還原現實世界的外觀。因此，它刪除了傳統上用於向用戶傳達點擊性/可點擊性的粗糙視覺提示。
當所有東西都是平的時，用戶如何知道哪些部分是按鈕?
用戶仍然需要視覺符號來告訴他們可以在頁面的哪裏點擊：可感知的線索設計細節幫助他們理解如何使用界面。因此，顏色在平面設計中特別重要，因爲當你使用扁平按鈕時，顏色將是幫助用戶識別它們的主要標識符之一。
扁平設計和懸浮按鈕（Almost Flat Design and Floating Action Button）
扁平設計是原始(或超)平坦設計的進化。這種風格大部分是平面的，但使用了微妙的陰影、高光和層級在 UI 中創建一些深度。谷歌的材質設計語言（Material Design ）是第一個正確使用這種設計，並做出優秀的具有優先級扁平設計的例子，它帶來了一種新型的按鈕：懸浮按鈕。這些按鈕被分層放置在界面的頂部，並將用戶的注意力完全吸引到這些可以交互的按鈕上。它們扮演着行動召喚按鈕的角色(“CTA”)，代表着用戶在特定屏幕上執行最多的單個行動。
在UI設計中使用FAB（ Floating Action Button）的另一個好例子是Evernote。儘管UI十分的扁平，但是在導航欄和浮動操作按鈕(“添加新”)上提供了一些微妙的陰影。
幽靈按鈕（Ghost Button）
2014年，幽靈按鈕成爲UI設計領域的主流設計趨勢之一。幽靈按鈕是那些具有基本形狀(如矩形或正方形)的透明或者空心的按鈕。它們也有諸如“空”、“赤裸”或“空心”按鈕之類的標題。幽靈按鈕通常由一條非常細的線邊界，而內部部分由純文本組成。
幽靈按鈕的起源於平面設計革命，當蘋果發佈 iOS 7 時，幽靈按鈕變得流行起來。iOS UI上的很多按鈕我們稱之爲幽靈按鈕。簡單而樸素的矩形形狀與框架內整潔的字體相結合，在扁平的UI中看起來非常完美。
它們通常以CTA (Call to Action)按鈕的形式出現，並提供整潔的外觀。Specular site就是一個很好的例子。
按鈕的最佳實踐
在你開始設計按鈕之前，你應該先思考設計如何輔助傳遞給用戶功能。用戶如何將元素理解爲按鈕？也許你應該：
1.使按鈕看起來像按鈕(參見形狀)
2.便於用戶與按鈕交互(參見大小和填充)
3.根據按鈕的功能來標註按鈕(參見標籤)
4.使用顏色對比引導用戶操作(見顏色)
確保按鈕在整個界面控制中保持一致性，這樣用戶就能夠在每個頁面上識別和感知你的應用程序或站點哪些UI元素是按鈕。
形狀
一個安全的做法是，根據網站或應用程序的風格，把按鈕做成正方形或圓角正方形。矩形形狀的按鈕很久以前就被引入了數字世界，用戶對它們很熟悉。
一些研究表明，圓角增強了信息處理能力，並將我們的眼睛吸引到元素的中心。
你可以更有創意地使用其他形狀，如圓形、三角形或甚至自定義形狀，但請記住，後者可能更有風險。
尺寸和間距
按鈕的大小在幫助用戶識別這些元素方面也起着關鍵作用。你應該考慮按鈕元素的大小以及可點擊元素之間的填充:
大小
當點擊作爲應用程序或網站的主要交互形式，你可以依靠MIT Touch Lab的研究成果，，愛輔助選擇合適的按鈕大小。麻省理工學院的研究發現，手指接觸面積的平均尺寸在10-14mm之間，指尖是8-10mm，所以10mm × 10mm是一個很好的觸摸目標尺寸。
這一建議值針對的不是那些容易誤操作的元素，而是在平衡其他重要特徵(如屏幕信息密度)的同時將錯誤數量減少到實際水平:
當鼠標和鍵盤是主要的交互方式，可以稍微減少按鈕的測量，以適應密集的UI
間距
按鈕之間的空間有助於分隔控件，併爲用戶界面提供足夠的喘息空間。
文案
你應該爲按鈕選擇一個合適的標籤。選擇應該基於最小驚奇的原則（principle of least astonishment）：如果一個必要的按鈕有一個高驚奇係數的標籤，它可能需要改變標籤。
經驗法則——用按鈕的功能來標記按鈕。添加一個清晰的信息，說明在點擊/點擊之後會發生什麼，或者使用動作動詞指示元素做了什麼。
在下面的例子中，當用戶試圖使用web應用程序將文件上傳到Dropbox時，會出現一個對話框。這個信息提供了一個單一的按鈕，標籤是“Awesome!”這個標籤可能會讓普通用戶感到困惑，因爲不清楚點擊這個按鈕後會做什麼。
顏色
在選擇調色板時，記住要考慮顏色如何幫助用戶使用導航和理解操作:
使用顏色和對比度幫助用戶感知和理解應用的內容，與正確的元素進行交互，並理解操作。在下面的例子中，我們將紅色用於執行潛在破壞性操作的按鈕。
讓最重要的按鈕(特別是當你使用它們來引導用戶下一步操作時)看起來是最重要的一個。例如，亞馬遜使用對比鮮明的黃色按鈕來吸引用戶注意正確的操作。
結論
每個按鈕（無論是經典的還是現代的，如幽靈按鈕或懸浮按鈕)都是爲了引導用戶採取你希望他們採取的行動。可以將web或應用程序看作是跟一個忙碌的用戶發起的對話。這個按鈕在這個對話中扮演着至關重要的角色——一個順暢的互動使對話繼續進行，而小故障(比如找不到一個右鍵)會造成中斷，最糟糕的是，導致崩潰。