按鈕是一個(gè)普通的,幾乎我們每天都要接觸的設(shè)計(jì)元素.除了這個(gè),由于按鈕是一個(gè)在網(wǎng)頁(yè)或者app上創(chuàng)造流暢的會(huì)話流體驗(yàn)的必不可少的元素,所以它值得我們?yōu)榘粹o這樣最基本的元素提供最佳的體驗(yàn)做出努力.
為按鈕做些最佳實(shí)踐
讓按鈕看起來(lái)像按鈕
想想如何達(dá)到設(shè)計(jì)溝通的可供性吧.用戶是怎么理解一個(gè)按鈕的呢?用形狀和顏色是界面上的元素看起來(lái)像一個(gè)按鈕.
Groupon 的登錄頁(yè)面關(guān)注于最主要的動(dòng)作.
另外,手指點(diǎn)擊的尺寸也是要在設(shè)計(jì)時(shí)仔細(xì)考慮的事情.按鈕的大小在幫助用戶分辨這些元素的過(guò)程中起到了決定性的作用.不同的平臺(tái)提供了熱區(qū)的最小尺寸的不同設(shè)計(jì)規(guī)范.MIT Touch Lab的研究結(jié)果表明手指接觸面積平均為10-14mm之間,指尖平均為8-10mm,所以最佳的熱區(qū)尺寸應(yīng)設(shè)定為10mmX10mm.
位置和命令
按鈕應(yīng)放置在用戶能夠直接找到或者他有預(yù)期能看到的地方.例如,iOS UI 設(shè)計(jì)規(guī)范給明了按鈕的合理位置.
按鈕要執(zhí)行的命令和位置的關(guān)系.按鈕要執(zhí)行的命令非常重要,特別是在出現(xiàn)成對(duì)的選項(xiàng)時(shí)(就像”上一個(gè)”和”下一個(gè)”).確保設(shè)計(jì)強(qiáng)調(diào)了最主要或者最重要的動(dòng)作.
在下面的例子中我們使用了紅色的按鈕顏色表現(xiàn)一個(gè)潛在的具有破壞性的動(dòng)作.并且，主要?jiǎng)幼鞑坏梢酝ㄟ^(guò)顏色和對(duì)比度去引起注意，還可以看它是否置于對(duì)話段落的右邊。
刪除按鈕比取消按鈕更加顯眼
標(biāo)簽
按鈕上的標(biāo)簽告訴給人們這個(gè)按鈕能做什么。清楚的說(shuō)明點(diǎn)擊之后將會(huì)發(fā)生的事情。
我們講上面的圖片去掉文字。你能發(fā)現(xiàn)什么區(qū)別么？
沒(méi)有文字標(biāo)簽
喚起行動(dòng)（Call to action）
讓最重要的按鈕（特別在你想要用他們喚起行動(dòng)時(shí)）看起來(lái)它是最重要的。
Create Resume 就是一個(gè)很明顯喚起行動(dòng)按鈕
按鈕形狀
通常，根據(jù)網(wǎng)站或者APP的風(fēng)格，我們會(huì)把按鈕設(shè)計(jì)成矩形或者圓角矩形。一些研究建議圓角能夠加強(qiáng)信息的傳遞并且能夠?qū)⑷说膶?shí)現(xiàn)集中在元素的中心位置。
圓角矩形按鈕
我們有時(shí)也會(huì)根據(jù)自己的創(chuàng)意使用其他的形狀例如圓形，三角形或者自定義形狀，但是你要知道這樣的嘗試其實(shí)是有風(fēng)險(xiǎn)的。
Floating Action Bar 是一個(gè)自定義按鈕形狀的好的例子
一定要確保統(tǒng)一性能夠把控你的界面設(shè)計(jì)，以便用戶能夠識(shí)別出你的界面元素。
按鈕樣式和行為
1.突出按鈕
突出的按鈕樣式特別是突出的長(zhǎng)方形按鈕。（投影表現(xiàn)出按鈕是可以點(diǎn)擊的）。突出的按鈕樣式相較于扁平的設(shè)計(jì)增加了一維空間。在復(fù)雜或?qū)捲５目臻g中強(qiáng)調(diào)功能。
使用
成直線的排列（在布局上根據(jù)諸多不同的內(nèi)容使用更顯著的引導(dǎo)）。
行為
讓按鈕凸起并在點(diǎn)擊是填充顏色。
例子
突出按鈕比扁平按鈕更加顯眼。例如安卓的應(yīng)用
2.扁平按鈕
扁平樣式的按鈕不會(huì)突出出來(lái)，但是在點(diǎn)擊時(shí)會(huì)改變顏色。主要的優(yōu)勢(shì)在于界面的簡(jiǎn)潔——最不容易被內(nèi)容打擾。
使用
在會(huì)話中（統(tǒng)一按鈕行為和會(huì)話內(nèi)容）
安卓會(huì)話當(dāng)中的扁平按鈕
在工具條上
在工具條上的扁平按鈕
于留白對(duì)齊，一遍用戶能夠輕易找到它們。
扁平按鈕
行為
例子
安卓應(yīng)用上的扁平按鈕
3.切換按鈕
切換按鈕能夠允許用戶從兩種狀態(tài)中改變?cè)O(shè)置。
切換按鈕
使用
多數(shù)的切換按鈕都是以開(kāi)或關(guān)的形式使用。
還有就是切換按鈕可以在成組相關(guān)的選項(xiàng)中使用。但是你的布局應(yīng)當(dāng)是將切換按鈕作為一組選項(xiàng)中的組成部分。所以切換按鈕要求：
1.一組中有至少3個(gè)切換按鈕
2按鈕上使用文字，icon或者兩者結(jié)合作為標(biāo)簽。
一個(gè)被選中的切換按鈕
在切換按鈕上使用icon是最好的方法，因?yàn)樗唤邮芤粋€(gè)選擇，比如添加或者轉(zhuǎn)移一個(gè)星星到另一個(gè)項(xiàng)目上。最好在APP的bar,toolbar,動(dòng)作按鈕或者切換按鈕上使用它們。
Twitter的”LIKE”上的切換按鈕
為一個(gè)按鈕上選擇一個(gè)正確的icon是非常重要的。我將會(huì)在另外一篇文章上講解icon 扮演著完美用戶體驗(yàn)的重要角色。
例子
iOS上使用切換按鈕作為設(shè)置選項(xiàng)。
4.幽靈按鈕
幽靈按鈕就是一種透明的或者空按鈕的使用基本形狀的形式。當(dāng)內(nèi)部的內(nèi)容為簡(jiǎn)單的文字形式時(shí)，通常使用非常細(xì)的描邊作為幽靈按鈕的輪廓。
不同的幽靈按鈕
使用
使用幽靈按鈕做為一個(gè)主要的喚起動(dòng)作其實(shí)并不是一個(gè)好主意。你能看到下面的例子就是幽靈按鈕上Download Bootstrap的樣子看起來(lái)和他們產(chǎn)品的logo很相似容易引起用戶的困惑。
Download Bootstrap是一個(gè)按鈕，你看出來(lái)了么？顆顆。。。。
幽靈按鈕最好是用在第二或第三層級(jí)的內(nèi)容上，哪怕他最終無(wú)法完全傳達(dá)你想要喚起行動(dòng)的目的。你當(dāng)然想用戶能夠返現(xiàn)你主要想要傳達(dá)的喚起行動(dòng)的內(nèi)容，然后再跳過(guò)它看到第二級(jí)的按鈕。
積極動(dòng)作會(huì)有更高的反差以便用戶能看到清晰的動(dòng)作。
主要?jiǎng)幼鳎–TA）是Purchase Now，幽靈按鈕是第二級(jí)按鈕
行為
正常狀態(tài)（左）和高亮態(tài)（右）
例子
Airbnb的網(wǎng)站有一個(gè)幽靈按鈕“Become a Host”
5.FAB浮動(dòng)按鈕是谷歌設(shè)計(jì)的重要部分。它是一個(gè)圓形的材質(zhì)按鈕，點(diǎn)按之后按鈕浮起并表現(xiàn)墨水暈開(kāi)的效果。
使用
浮動(dòng)按鈕用于驅(qū)動(dòng)動(dòng)作時(shí)使用。
行為
懸浮按鈕利用本身的圓形形狀懸浮于界面之上與其他元素進(jìn)行區(qū)分，加上運(yùn)動(dòng)動(dòng)作，包括漸變，展開(kāi)和轉(zhuǎn)化為單一定點(diǎn)。
選擇按鈕樣式
選擇一個(gè)按鈕樣式其實(shí)是取決于按鈕的權(quán)重，屏幕上的容器個(gè)數(shù)和視覺(jué)布局。
谷歌設(shè)計(jì)中的按鈕類(lèi)型的選擇
Z-depth
功能：
這個(gè)按鈕的重要程度和普遍程度到了要使用浮動(dòng)按鈕的地步了么？
維度
選擇按鈕樣式取決于容器和多少個(gè)Z軸空間的布局。
布局：
每個(gè)容器使用一個(gè)最主要的按鈕樣式。除非你有很好的理由才可以混用，比如為了強(qiáng)調(diào)一個(gè)重要的功能。
按鈕狀態(tài)
這一點(diǎn)跟這個(gè)按鈕給用戶的第一印象是沒(méi)有太大關(guān)系，但是跟猶豫是否去點(diǎn)擊一個(gè)按鈕和發(fā)現(xiàn)沒(méi)有改變有關(guān)。用戶會(huì)感到迷惑：“這是不是一個(gè)按鈕呢？現(xiàn)在我是不是得點(diǎn)它去驗(yàn)證一下它是不是一個(gè)按鈕呢。額……”
按鈕不是單一—狀態(tài)目標(biāo)。它是多狀態(tài)的。并且可以為用戶提供一個(gè)可視的反饋去表明當(dāng)前的狀態(tài)應(yīng)該是優(yōu)先級(jí)最高的任務(wù)。
正常狀態(tài)
這一狀態(tài)的主要規(guī)則就是—按鈕應(yīng)當(dāng)在正常態(tài)時(shí)就能被識(shí)別出是一個(gè)按鈕。Windows 8是一個(gè)很好的反例—用戶很難看出上面的元素在設(shè)置菜單中是否是可點(diǎn)的。
Windows8中按鈕的正常態(tài)
關(guān)注狀態(tài)（高亮狀態(tài)）
為用戶營(yíng)造一個(gè)具有很好的視覺(jué)反饋效果的按鈕非常具有實(shí)踐意義。用戶能夠立即明白按鈕的含義從而接受并且視覺(jué)上的反饋也起到了相應(yīng)的作用。
點(diǎn)擊態(tài)
將不同的元素設(shè)計(jì)成有創(chuàng)意和有驅(qū)動(dòng)性的動(dòng)效能為用戶帶來(lái)興奮和愉悅的體驗(yàn)。
不活躍狀態(tài)
顯示方式有兩種可能—隱藏按鈕或者不可用狀態(tài)。
隱藏按鈕的爭(zhēng)議：
明確性。只需在旁邊顯示任務(wù)的需求。
-
保存草稿。允許用戶改變?cè)O(shè)置，不同的命令使用同一個(gè)位置。這樣很方便。Gmail就是是這樣做的。
Gmail隱藏了不可用的按鈕
只有在用戶進(jìn)行了啟用操作時(shí)才會(huì)讓它可見(jiàn)
不可用狀態(tài)的爭(zhēng)議：
表明動(dòng)作的可執(zhí)行性。雖然按鈕不可用，用戶有機(jī)會(huì)去得知?jiǎng)幼魇强梢詧?zhí)行的。甚至要提供一個(gè)提示去解釋按鈕如何使用。
控制面板的位置。用戶能夠?qū)W習(xí)到控制面板和按鈕在界面上的具體位置。
不可用按鈕狀態(tài)
總結(jié)
按鈕意味著用戶能夠直接執(zhí)行我們希望他們?nèi)?zhí)行的任務(wù)。一個(gè)平滑的轉(zhuǎn)場(chǎng)能夠保持會(huì)話流暢性，小差錯(cuò)比如找不到正確的按鈕，最好的情況是是打斷進(jìn)程，最差是程序崩潰。
按鈕體驗(yàn)設(shè)計(jì)總是關(guān)乎于識(shí)別性和明確性。想想一個(gè)很忙碌的用戶開(kāi)啟網(wǎng)頁(yè)或者APP展開(kāi)會(huì)話的情況。按鈕起到相當(dāng)重要的作用。