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