脫水版
1宦棺、矩形按鈕是用戶非常熟悉的按鈕形狀。使用其他形狀的按鈕黔帕，要注意保持一致性代咸。陰影能使按鈕凸顯，容易被用戶識(shí)別成黄。
2侣背、按鈕上的文字應(yīng)該意義明確白华，能夠告訴用戶這個(gè)按鈕能做什么，或者點(diǎn)擊后會(huì)發(fā)生什么贩耐。
3、APP按鈕的位置最好符合平臺(tái)的GUI指導(dǎo)書厦取。web端產(chǎn)品按鈕的位置最好通過(guò)測(cè)試來(lái)確定潮太。
4、觸摸屏按鈕最小10mmX10mm虾攻，再小手指很難按準(zhǔn)確铡买。鼠標(biāo)操作的按鈕，尺寸可以減小霎箍。按鈕之間的間距也要控制好奇钞。按鈕用該有不同的狀態(tài)：正常、獲取焦點(diǎn)漂坏、按下景埃、不可點(diǎn)擊，以及動(dòng)畫效果顶别。
5谷徙、使用顏色和對(duì)比讓用戶的注意力集中到最重要按鈕上。當(dāng)需要用戶在主要和次要按鈕之間進(jìn)行選擇的時(shí)候驯绎，主要按鈕應(yīng)該有更重的視覺(jué)重量完慧。
6、按鈕設(shè)計(jì)檢查表：用戶能否正確識(shí)別這個(gè)元素是按鈕剩失？按鈕標(biāo)簽是否信息明確屈尼？用戶是否可以輕松地找到這個(gè)按鈕？有2個(gè)及以上按鈕拴孤，主按鈕是否有最強(qiáng)的視覺(jué)重量脾歧。
正文
按鈕是交互設(shè)計(jì)的常見(jiàn)元素。 雖然他們可能看起來(lái)像一個(gè)非常簡(jiǎn)單的UI元素乞巧，它們?nèi)匀皇亲钪匾囊粋€(gè)元素涨椒。
在今天的文章中，我們將介紹設(shè)計(jì)高效提升用戶體驗(yàn)控件的關(guān)鍵因素绽媒。 如果你想在原型設(shè)計(jì)和線框設(shè)計(jì)有點(diǎn)不同蚕冬，你可以免費(fèi)下載和測(cè)試Adobe XD（http://www.adobe.com/products/experience-design.html?scid=social66570666&adbid=1192390774137587&adbpl=fb&adbpr=341657335877606看起來(lái)還不錯(cuò)的樣子，又喜新厭舊了）是辕。
1使按鈕看起來(lái)像按鈕
用戶如何知道一個(gè)元素是按鈕囤热？ 答案很簡(jiǎn)單。 視覺(jué)提示幫助人們了解這個(gè)元素是可點(diǎn)擊的获三。 在可點(diǎn)擊元素上使用適當(dāng)?shù)囊曈X(jué)符號(hào)旁蔼，使它們看起來(lái)像按鈕這點(diǎn)很重要锨苏。
1.1形狀
使用正方形或圓角矩形的形狀是比較保險(xiǎn)的選擇。 很久以前棺聊，矩形按鈕就被引入數(shù)字世界了伞租，所以用戶對(duì)矩形按鈕非常熟悉。
當(dāng)然作喘，你可以更有創(chuàng)意，使用其他形狀（比如 圓晕城，三角形泞坦，甚至自定義形狀），但要注意砖顷，特殊的形狀可能會(huì)有點(diǎn)冒險(xiǎn)贰锁。 你需要確保用戶可以輕松地識(shí)別特殊形狀的按鈕。
無(wú)論選擇什么形狀李根，請(qǐng)確保在整個(gè)界面控件中保持一致性，以便用戶能夠識(shí)別所有UI元素并將其識(shí)別為按鈕几睛。
為什么要保持一致性房轿？ 因?yàn)闊o(wú)論用戶是否意識(shí)到，他們會(huì)記得細(xì)節(jié)所森。 例如囱持，用戶會(huì)將特定元素的形狀關(guān)聯(lián)為“按鈕”。因此焕济，一致性不僅有助于創(chuàng)建出色的設(shè)計(jì)纷妆，還能為用戶提供更為熟悉的體驗(yàn)。
下面的圖片完美地說(shuō)明了這一點(diǎn)晴弃。 在app的一部分（例如系統(tǒng)工具中）中使用三種不同的形狀掩幢，不僅讓使用者感到困惑，而且設(shè)計(jì)上也不正確上鞠。
1.2陰影和高光
陰影是有價(jià)值的線索芍阎，陰影可以告訴用戶他們?cè)谀膫€(gè)UI元素世曾。 陰影使按鈕從背景中凸顯出來(lái)，容易被用戶識(shí)別為可點(diǎn)擊的元素谴咸，因?yàn)榘粹o凸起了轮听，看起來(lái)好像可以按下去的樣子骗露。 即使有平面的按鈕，仍然有這些微妙的線索的地方血巍。
2清晰地表達(dá)按鈕的含義
用戶會(huì)避免和界面中意義不明確的元素進(jìn)行交互藻茂。 因此驹暑，界面中的每個(gè)按鈕都應(yīng)該有正確的文字或圖標(biāo)。 這個(gè)選擇基于減少驚訝的原則：如果一個(gè)按鈕讓用戶點(diǎn)擊后產(chǎn)生高度的驚訝辨赐，那么可能需要改變文字或圖標(biāo)了。
可操作元素上的文字京办，例如按鈕上的文字掀序，應(yīng)該總是告訴用戶這個(gè)按鈕將為用戶做什么。 當(dāng)用戶預(yù)先知道按鈕可以進(jìn)行的操作時(shí)惭婿，用戶會(huì)感覺(jué)更舒適不恭。 諸如“提交”或類似于以下示例中的文字無(wú)法提供有關(guān)操作的足夠信息。
行為按鈕必須確認(rèn)主要目的是什么换吧，使得用戶可以明確的知道當(dāng)他們點(diǎn)擊按鈕之后會(huì)發(fā)生什么事情。這就使得按鈕用什么動(dòng)作行為去表明變得狠重要钥星。例如：如果一個(gè)用戶去登陸賬號(hào)沾瓦，一個(gè)按鈕顯示，“創(chuàng)建賬號(hào)” 告訴他們按了按鈕后的結(jié)果是什么谦炒。這是一個(gè)清晰且特殊的任務(wù)贯莺。這樣明確的標(biāo)簽就像是一個(gè)即時(shí)幫助，給用戶信心去選擇正確的行為宁改。
3把按鈕放在用戶可以找到的地方
不要讓用戶去找按鈕，把按鈕放在用戶可以輕松找到或者他們期望看到的地方还蹲。
位置和順序
如果你設(shè)計(jì)一個(gè)APP爹耗，當(dāng)你為按鈕選擇一個(gè)適當(dāng)?shù)奈恢煤晚樞虻臅r(shí)候你應(yīng)該遵循平臺(tái)的GUI 的指導(dǎo)書。為什么谜喊？因?yàn)橥瑯拥脑O(shè)計(jì)符合用戶的期望潭兽，節(jié)約了人們的時(shí)間。
在基于web的應(yīng)用程序的情況下,你應(yīng)該考慮真正適合用戶的位置锅论。正確的方式是通過(guò)測(cè)試來(lái)確定的讼溺。
如果你在設(shè)計(jì)移動(dòng)導(dǎo)航 這最需要注意按鈕的最佳位置。這個(gè)文章The Golden Rules Of Bottom Navigation Design包含了這個(gè)話題最易。
4方便用戶交互按鈕
按鈕的大小和視覺(jué)反饋在用戶交互中起到至關(guān)重要的作用怒坯。
4.1大小和內(nèi)邊距
你應(yīng)該考慮多大的一個(gè)按鈕是和其他頁(yè)面上的元素有關(guān)聯(lián)的炫狱。同時(shí)，你需要確保你設(shè)計(jì)的按鈕要足大到可以夠人們進(jìn)行交互剔猿。
當(dāng)點(diǎn)擊成為一個(gè)在你的應(yīng)用或者頁(yè)面里的主要輸入方法视译，你可以依賴于麻省理工學(xué)院聯(lián)系實(shí)驗(yàn)室研究按鈕選擇一個(gè)適當(dāng)?shù)拇笮 ＿@個(gè)研究表明平均的手指墊點(diǎn)擊的大小從10-14mm归敬，指尖點(diǎn)擊是8-10mm酷含，設(shè)計(jì)一個(gè)10mm x 10mm 是一個(gè)最小的尺寸。當(dāng)一個(gè)鼠標(biāo)或者鍵盤作為主要輸入方法的時(shí)候汪茧，按鈕的尺寸可以稍微的減少椅亚，以容納更多的UI。
你應(yīng)該考錄按鈕元素的大小呀舔，還有元素和元素之間的內(nèi)間距，內(nèi)間距幫助分開(kāi)控制并且給予用戶足夠的交互空間扩灯。
4.2提供視覺(jué)反饋
這個(gè)需求不是關(guān)于按鈕在用戶看來(lái)是怎么樣的；這是關(guān)于UI元素的交互體驗(yàn)的珠插。通常來(lái)說(shuō)惧磺，一個(gè)按鈕不是一個(gè)狀態(tài)，他是有復(fù)合的狀態(tài)捻撑，并提供了當(dāng)前狀態(tài)下的最高優(yōu)先級(jí)的一個(gè)可視性的反饋磨隘。這個(gè)有用的插圖來(lái)自于Material Design，清晰的反應(yīng)了按鈕的不同狀態(tài)：
5在視覺(jué)上突出最重要的按鈕
確保設(shè)計(jì)強(qiáng)調(diào)主要或最突出的行動(dòng)白嘁。使用顏色和對(duì)比來(lái)讓用戶集中注意，把按鈕放在突出位置,讓用戶最有可能注意到膘流。
5.1Call-to-Action 按鈕
重要的按鈕（例如CTAs）意味著直接讓用戶去做你想讓他們做的行動(dòng)絮缅，創(chuàng)建一個(gè)有效的call to action 按鈕，抓住用戶的注意力讓他們?nèi)c(diǎn)擊呼股，你應(yīng)該用強(qiáng)烈對(duì)比的顏色耕魄。
如果我們看看Gmail界面,界面非常簡(jiǎn)單,幾乎是單色,除了發(fā)送按鈕。一旦用戶寫完一個(gè)消息,他們馬上就注意到這個(gè)漂亮的藍(lán)色按鈕彭谁。
同樣的規(guī)則適用于網(wǎng)站吸奴。如果你在下面的例子Behance公司看一看,吸引你的注意的第一件事是注冊(cè)文字-動(dòng)作按鈕。顏色和位置,在這種情況下,比文字更重要。
5.2視覺(jué)區(qū)分主要和次要按鈕
你可以找到另一個(gè)抓住用戶的注意力與按鈕和對(duì)話形式的例子则奥。當(dāng)在主要和次要?jiǎng)幼髦g進(jìn)行選擇時(shí)考润，視覺(jué)的區(qū)別是一個(gè)有用的方法，幫助人們做出可靠的選擇：
一個(gè)帶有主要積極行動(dòng)的按鈕需要有更強(qiáng)的視覺(jué)重量读处。它應(yīng)該是視覺(jué)占主導(dǎo)地位的按鈕糊治。
次要操作，（例如罚舱，像“取消”或者“回去”）應(yīng)該有最弱的視覺(jué)重量井辜，因?yàn)闇p少了視覺(jué)輔助行動(dòng)的重要程度，最小化的避免了潛在的錯(cuò)誤風(fēng)險(xiǎn)管闷。進(jìn)一步引導(dǎo)用戶走向成功的結(jié)果粥脚。
6按鈕設(shè)計(jì)檢查表
在每一個(gè)設(shè)計(jì)來(lái)說(shuō)都是獨(dú)一無(wú)二的,每一個(gè)設(shè)計(jì)也有一組共同之處包个。有一個(gè)好的設(shè)計(jì)檢查表阿逃。確保你的按鈕設(shè)計(jì)適合你的用戶,你需要問(wèn)幾個(gè)問(wèn)題：
1.用戶識(shí)別您的元素作為一個(gè)按鈕嗎?思考如何設(shè)計(jì)讓一個(gè)按鈕看起來(lái)像一個(gè)按鈕(使用大小、形狀赃蛛、陰影和顏色這一目的)。
2.一個(gè)按鈕的標(biāo)簽提供了一個(gè)明確的信息,點(diǎn)擊后會(huì)發(fā)生什么?這個(gè)經(jīng)常比命名一個(gè)按鈕要好,解釋它干什么用搀菩，然后使用一個(gè)通用的標(biāo)簽呕臂，(如OK)。
3.用戶可以輕松地找到這個(gè)按鈕嗎?你的按鈕在哪里和因?yàn)樗男螤?顏色和標(biāo)簽一樣重要肪跋∑缃考慮到用戶的路徑,把按鈕放在用戶可以很容易地找到它們或期望他們?cè)诘牡胤健?/p>
4.如果在你看來(lái)，你有兩個(gè)或兩個(gè)以上的按鈕州既，(如對(duì)話框)谜洽。與主操作按鈕有最強(qiáng)的視覺(jué)重量?明確兩個(gè)選項(xiàng)之間的差別,通過(guò)使用不同的視覺(jué)重量為每個(gè)按鈕。
總結(jié)
按鈕是創(chuàng)建一個(gè)平滑的用戶體驗(yàn)的一個(gè)至關(guān)重要的元素，所以值得花精力去做最好的實(shí)踐蚌卤，一個(gè)快速回顧：
1.讓按鈕看上去像按鈕
2.標(biāo)簽按鈕為用戶做了什么
3.把按鈕放在用戶可以找到或者他們期望的位置
4.使得每個(gè)按鈕可以讓用戶很容易的交互
5.使得最重要的按鈕清晰明確
當(dāng)你設(shè)計(jì)你自己的按鈕实束，從最重要的開(kāi)始，并記住逊彭，按鈕設(shè)計(jì)總是關(guān)于識(shí)別和清晰咸灿。
“7 Basic Best Practices for Buttons,” UXmatters
“The Evolution of Buttons in UX Design,” Adobe
“How Button Placement Conventions Reinforce User Habits,” UX Movement
“Visual Weight of Primary and Secondary Action Buttons,” UX Movement
“The Golden Rules Of Bottom Navigation Design“, Smashing Magazine
“11 Characteristics Of Persuasive Call-To-Action Buttons“, UserTesting
原文作者：Nick Babich
原文地址：https://www.smashingmagazine.com/2016/11/a-quick-guide-for-designing-better-buttons/
更多文章請(qǐng)關(guān)注http://www.youjiaohu.com，或者關(guān)注微信公眾賬號(hào)友交互：
每篇文章都有脫水版總結(jié)侮叮，讓你的閱讀更高效避矢。
