按鈕是一個普通的,幾乎我們每天都要接觸的設(shè)計元素.除了這個,由于按鈕是一個在網(wǎng)頁或者app上創(chuàng)造流暢的會話流體驗的必不可少的元素,所以它值得我們?yōu)榘粹o這樣最基本的元素提供最佳的體驗做出努力.

為按鈕做些最佳實踐

讓按鈕看起來像按鈕

想想如何達到設(shè)計溝通的可供性吧.用戶是怎么理解一個按鈕的呢?用形狀和顏色是界面上的元素看起來像一個按鈕. 

Groupon 的登錄頁面關(guān)注于最主要的動作.

另外,手指點擊的尺寸也是要在設(shè)計時仔細考慮的事情.按鈕的大小在幫助用戶分辨這些元素的過程中起到了決定性的作用.不同的平臺提供了熱區(qū)的最小尺寸的不同設(shè)計規(guī)范.MIT Touch Lab的研究結(jié)果表明手指接觸面積平均為10-14mm之間,指尖平均為8-10mm,所以最佳的熱區(qū)尺寸應(yīng)設(shè)定為10mmX10mm. 

位置和命令

按鈕應(yīng)放置在用戶能夠直接找到或者他有預(yù)期能看到的地方.例如,iOS UI 設(shè)計規(guī)范給明了按鈕的合理位置. 

按鈕要執(zhí)行的命令和位置的關(guān)系.按鈕要執(zhí)行的命令非常重要,特別是在出現(xiàn)成對的選項時(就像”上一個”和”下一個”).確保設(shè)計強調(diào)了最主要或者最重要的動作.

在下面的例子中我們使用了紅色的按鈕顏色表現(xiàn)一個潛在的具有破壞性的動作.并且，主要動作不但可以通過顏色和對比度去引起注意，還可以看它是否置于對話段落的右邊。

刪除按鈕比取消按鈕更加顯眼

標簽

按鈕上的標簽告訴給人們這個按鈕能做什么。清楚的說明點擊之后將會發(fā)生的事情。

我們講上面的圖片去掉文字。你能發(fā)現(xiàn)什么區(qū)別么？

沒有文字標簽

喚起行動（Call to action）

讓最重要的按鈕（特別在你想要用他們喚起行動時）看起來它是最重要的。

Create Resume 就是一個很明顯喚起行動按鈕

按鈕形狀

通常，根據(jù)網(wǎng)站或者APP的風格，我們會把按鈕設(shè)計成矩形或者圓角矩形。一些研究建議圓角能夠加強信息的傳遞并且能夠?qū)⑷说膶崿F(xiàn)集中在元素的中心位置。

圓角矩形按鈕

我們有時也會根據(jù)自己的創(chuàng)意使用其他的形狀例如圓形，三角形或者自定義形狀，但是你要知道這樣的嘗試其實是有風險的。 

Floating Action Bar 是一個自定義按鈕形狀的好的例子

一定要確保統(tǒng)一性能夠把控你的界面設(shè)計，以便用戶能夠識別出你的界面元素。

按鈕樣式和行為

1.突出按鈕

突出的按鈕樣式特別是突出的長方形按鈕。（投影表現(xiàn)出按鈕是可以點擊的）。突出的按鈕樣式相較于扁平的設(shè)計增加了一維空間。在復(fù)雜或?qū)捲５目臻g中強調(diào)功能。 

使用

成直線的排列（在布局上根據(jù)諸多不同的內(nèi)容使用更顯著的引導(dǎo)）。

行為

讓按鈕凸起并在點擊是填充顏色。 

例子

突出按鈕比扁平按鈕更加顯眼。例如安卓的應(yīng)用

2.扁平按鈕

扁平樣式的按鈕不會突出出來，但是在點擊時會改變顏色。主要的優(yōu)勢在于界面的簡潔——最不容易被內(nèi)容打擾。 

使用

在會話中（統(tǒng)一按鈕行為和會話內(nèi)容） 

安卓會話當中的扁平按鈕

在工具條上 

在工具條上的扁平按鈕

于留白對齊，一遍用戶能夠輕易找到它們。

扁平按鈕 

行為

例子

安卓應(yīng)用上的扁平按鈕 

3.切換按鈕

切換按鈕能夠允許用戶從兩種狀態(tài)中改變設(shè)置。

切換按鈕

使用

多數(shù)的切換按鈕都是以開或關(guān)的形式使用。

還有就是切換按鈕可以在成組相關(guān)的選項中使用。但是你的布局應(yīng)當是將切換按鈕作為一組選項中的組成部分。所以切換按鈕要求：

1.一組中有至少3個切換按鈕

2按鈕上使用文字，icon或者兩者結(jié)合作為標簽。

一個被選中的切換按鈕

在切換按鈕上使用icon是最好的方法，因為它只接受一個選擇，比如添加或者轉(zhuǎn)移一個星星到另一個項目上。最好在APP的bar,toolbar,動作按鈕或者切換按鈕上使用它們。

Twitter的”LIKE”上的切換按鈕

為一個按鈕上選擇一個正確的icon是非常重要的。我將會在另外一篇文章上講解icon 扮演著完美用戶體驗的重要角色。

例子

iOS上使用切換按鈕作為設(shè)置選項。

4.幽靈按鈕

幽靈按鈕就是一種透明的或者空按鈕的使用基本形狀的形式。當內(nèi)部的內(nèi)容為簡單的文字形式時，通常使用非常細的描邊作為幽靈按鈕的輪廓。 

不同的幽靈按鈕

使用

使用幽靈按鈕做為一個主要的喚起動作其實并不是一個好主意。你能看到下面的例子就是幽靈按鈕上Download Bootstrap的樣子看起來和他們產(chǎn)品的logo很相似容易引起用戶的困惑。

Download Bootstrap是一個按鈕，你看出來了么？顆顆。。。。

幽靈按鈕最好是用在第二或第三層級的內(nèi)容上，哪怕他最終無法完全傳達你想要喚起行動的目的。你當然想用戶能夠返現(xiàn)你主要想要傳達的喚起行動的內(nèi)容，然后再跳過它看到第二級的按鈕。

積極動作會有更高的反差以便用戶能看到清晰的動作。 

主要動作（CTA）是Purchase Now，幽靈按鈕是第二級按鈕

行為 

正常狀態(tài)（左）和高亮態(tài)（右）

例子

Airbnb的網(wǎng)站有一個幽靈按鈕“Become a Host”

5.FAB浮動按鈕是谷歌設(shè)計的重要部分。它是一個圓形的材質(zhì)按鈕，點按之后按鈕浮起并表現(xiàn)墨水暈開的效果。

使用

浮動按鈕用于驅(qū)動動作時使用。

行為

懸浮按鈕利用本身的圓形形狀懸浮于界面之上與其他元素進行區(qū)分，加上運動動作，包括漸變，展開和轉(zhuǎn)化為單一定點。 

選擇按鈕樣式

選擇一個按鈕樣式其實是取決于按鈕的權(quán)重，屏幕上的容器個數(shù)和視覺布局。

谷歌設(shè)計中的按鈕類型的選擇

Z-depth

功能：

這個按鈕的重要程度和普遍程度到了要使用浮動按鈕的地步了么？

維度

選擇按鈕樣式取決于容器和多少個Z軸空間的布局。

布局：

每個容器使用一個最主要的按鈕樣式。除非你有很好的理由才可以混用，比如為了強調(diào)一個重要的功能。

按鈕狀態(tài)

這一點跟這個按鈕給用戶的第一印象是沒有太大關(guān)系，但是跟猶豫是否去點擊一個按鈕和發(fā)現(xiàn)沒有改變有關(guān)。用戶會感到迷惑：“這是不是一個按鈕呢？現(xiàn)在我是不是得點它去驗證一下它是不是一個按鈕呢。額……”

按鈕不是單一—狀態(tài)目標。它是多狀態(tài)的。并且可以為用戶提供一個可視的反饋去表明當前的狀態(tài)應(yīng)該是優(yōu)先級最高的任務(wù)。

正常狀態(tài)

這一狀態(tài)的主要規(guī)則就是—按鈕應(yīng)當在正常態(tài)時就能被識別出是一個按鈕。Windows 8是一個很好的反例—用戶很難看出上面的元素在設(shè)置菜單中是否是可點的。 

Windows8中按鈕的正常態(tài)

關(guān)注狀態(tài)（高亮狀態(tài)）

為用戶營造一個具有很好的視覺反饋效果的按鈕非常具有實踐意義。用戶能夠立即明白按鈕的含義從而接受并且視覺上的反饋也起到了相應(yīng)的作用。 

點擊態(tài)

將不同的元素設(shè)計成有創(chuàng)意和有驅(qū)動性的動效能為用戶帶來興奮和愉悅的體驗。

不活躍狀態(tài)

顯示方式有兩種可能—隱藏按鈕或者不可用狀態(tài)。

隱藏按鈕的爭議：

明確性。只需在旁邊顯示任務(wù)的需求。

• 保存草稿。允許用戶改變設(shè)置，不同的命令使用同一個位置。這樣很方便。Gmail就是是這樣做的。

Gmail隱藏了不可用的按鈕 

只有在用戶進行了啟用操作時才會讓它可見

不可用狀態(tài)的爭議：

表明動作的可執(zhí)行性。雖然按鈕不可用，用戶有機會去得知動作是可以執(zhí)行的。甚至要提供一個提示去解釋按鈕如何使用。

控制面板的位置。用戶能夠?qū)W習到控制面板和按鈕在界面上的具體位置。

不可用按鈕狀態(tài)

總結(jié)

按鈕意味著用戶能夠直接執(zhí)行我們希望他們?nèi)?zhí)行的任務(wù)。一個平滑的轉(zhuǎn)場能夠保持會話流暢性，小差錯比如找不到正確的按鈕，最好的情況是是打斷進程，最差是程序崩潰。

按鈕體驗設(shè)計總是關(guān)乎于識別性和明確性。想想一個很忙碌的用戶開啟網(wǎng)頁或者APP展開會話的情況。按鈕起到相當重要的作用。