我們常常會(huì )揪住某個(gè)設計細節不放，深入討論直到透徹。這樣的探究并非毫無(wú)意義，因為即使是最細小的細節也可能會(huì )讓近乎完美的設計毀于一旦。
所以，今天的文章我們繼續深入到設計的細節當中，探討按鈕的設計。用戶(hù)每天都會(huì )接觸按鈕，從現實(shí)世界到虛擬的界面，從移動(dòng)端要桌面端，它是如今界面設計中最小的元素之一，同時(shí)也是最關(guān)鍵的控件。當你在設計按鈕的時(shí)候，是否想過(guò)用戶(hù)會(huì )在什么情形下與之交互?按鈕將會(huì )在整個(gè)交互和反饋的循環(huán)中提供信息?
在早期的扁平化設計當中，用戶(hù)常常因為按鈕的感知度較差而完全處于懵逼狀態(tài)，這也從側面反映出按鈕本身在UI設計中的重要作用。
它應當看起來(lái)可點(diǎn)擊/觸摸
用戶(hù)看到可點(diǎn)擊的按鈕會(huì )有去點(diǎn)擊和觸摸的沖動(dòng)。雖然按鈕在屏幕上會(huì )以各種各樣的尺寸出現，并且通常都具備良好的可點(diǎn)擊性，但是在移動(dòng)端設備上按鈕本身的尺寸和按鈕周?chē)拈g隙尺寸都是非常有講究的。
普通用戶(hù)的指尖尺寸通常為8~10毫米，所以尺寸為10×10毫米的觸摸交互對象是符合邏輯的，這也算是移動(dòng)端上約定俗成的規則了。
想要讓一個(gè)元素看起來(lái)可點(diǎn)擊，注意下面的技巧：
·微妙的陰影能夠讓按鈕看起來(lái)“浮動(dòng)”出界面，讓它看起來(lái)更接近用戶(hù)
·增加按鈕內邊距，讓它看起來(lái)更容易點(diǎn)擊，引導用戶(hù)點(diǎn)擊
·進(jìn)行懸浮或者點(diǎn)擊操作的時(shí)候通過(guò)實(shí)時(shí)色彩和效果變化，提示用戶(hù)
色彩很重要
按鈕的色彩需要根據整個(gè)網(wǎng)站的配色來(lái)單獨搭配。作為用戶(hù)交互的核心，按鈕在頁(yè)面中適合使用特定的色彩進(jìn)行強調。
按鈕的色彩應該明亮而迷人，這也是為什么那么多UI設計都喜歡采用明亮的黃色、綠色和藍色的按鈕設計。想要按鈕在視覺(jué)上突出，按鈕的色彩最好選取背景色在色輪上相對位置的互補色。
另外一個(gè)值得注意的是品牌用色。你需要為按鈕選取一個(gè)同你的品牌配色方案相匹配的色彩，它不僅要有識別度，還要有關(guān)聯(lián)性。不論你配色方案怎么調整，按鈕首先要與你的主要配色保持關(guān)聯(lián)和一致。
尺寸的影響更大
按鈕要大!設計師常常被各種人戳屏，LOGO要大是被指責得最多的地方，而在進(jìn)行按鈕設計的時(shí)候，大也同樣是鋼需。只有當按鈕尺寸夠大的時(shí)候，用戶(hù)才能在一看到界面的時(shí)候就被它所吸引。雖然幽靈按鈕可以占據足夠大的面積，但是幽靈按鈕在視覺(jué)重量上的不足，使得它并不是最好的選擇。所以，我們所說(shuō)的大不僅僅是尺寸上的大，在視覺(jué)重量上同樣要“大”。
當然，按鈕的大小尺寸也是一個(gè)相對值。有的時(shí)候，同樣的尺寸的按鈕，在一種情況下是完美的大小，在另外一個(gè)界面中可能就是過(guò)大了。很大程度上，按鈕的大小取決于周?chē)氐拇笮”壤?。如果按鈕是界面中可見(jiàn)的唯一元素，那么誰(shuí)都不會(huì )錯過(guò)了。
位置也關(guān)鍵
按鈕應該放置在哪個(gè)位置?界面中哪些地方能夠為你帶來(lái)更多的點(diǎn)擊量?
在絕大多數的情況下，按鈕應當按照你的頁(yè)面和APP的內容來(lái)添加：
·在表單的底部
·在行為召喚類(lèi)信息附近
·在頁(yè)面或者屏幕底部
·在信息的正下方
為何要放置在這些位置?因為他們遵循用戶(hù)的習慣和自然的交互路徑，不論是網(wǎng)頁(yè)還是APP。
專(zhuān)注于對比
幾乎所有類(lèi)型的設計都會(huì )對對比度有所要求，在進(jìn)行按鈕設計的時(shí)候，不僅要讓按鈕內的內容(圖標、文本)能夠同按鈕本身構成良好的對比，而且按鈕和背景以及周?chē)脑匾惨纬蓪Ρ取?/p>
那么，在你進(jìn)行設計的時(shí)候，需要考慮到下面的因素：
·色彩
·字體的字重和尺寸
·元素的大小
·背景與形狀
·陰影與漸變
·留白和內外間距
使用標準的形狀
當你在考慮按鈕的外形的時(shí)候，你只需要考慮兩種情況：
·圓形。隨著(zhù)Material Design這種設計規范的推廣，圓形的按鈕已經(jīng)被大家所接受了。圓形按鈕廣泛適用于時(shí)下流行的扁平化設計風(fēng)格，適合目前的用戶(hù)模式。
·矩形。矩形按鈕(包括方形和各種圓角矩形)是最常見(jiàn)也是按鈕在大家認知中的默認形狀，它符合用戶(hù)的認知與習慣，絕大多數的按鈕長(cháng)度寬度的兩倍(當然三四倍也有)。當用戶(hù)看到它的時(shí)候，立刻會(huì )明白應該如何與之交互。至于使用圓角還是直角，那就是另外一個(gè)問(wèn)題了，選擇符合你的設計風(fēng)格的即可。
告訴用戶(hù)做什么
每個(gè)按鈕都會(huì )包含一個(gè)文本指令，它會(huì )告訴用戶(hù)這個(gè)按鈕的功能。所以，按鈕上的文本要盡量簡(jiǎn)潔、直觀(guān)，并且使用符合整個(gè)網(wǎng)站風(fēng)格的語(yǔ)音語(yǔ)調。
然后，你需要“履行承諾”。當用戶(hù)點(diǎn)擊按鈕的時(shí)候，按鈕所指示的內容和結果應當合理、迅速地呈現在用戶(hù)眼前，無(wú)論是提交表單、跳轉到新的頁(yè)面，用戶(hù)通過(guò)這個(gè)按鈕應當獲得他所預期的結果。
按鈕中的內容通常包括：
·戳我!
·立即創(chuàng )建
·免費試用
·加入購物車(chē)
·查看更多
讓按鈕擁有更高的視覺(jué)優(yōu)先級
幾乎每個(gè)界面都塞滿(mǎn)了各種不同的UI元素。設計的過(guò)程中，設計師往往會(huì )設計出若干個(gè)不同的版本，而直到項目接近完成的時(shí)候，才從無(wú)比相近的幾個(gè)方案中挑選一個(gè)版本。
不要陷入這種困境。
按鈕就該有按鈕的樣子。按鈕應該是整個(gè)設計中獨一無(wú)二的控件，它在形狀、色彩和視覺(jué)重量上，都應當同其他部分區分開(kāi)。想想看，當你創(chuàng )造出的按鈕和其他的控件都要大，色彩在整個(gè)配色方案中都獨一無(wú)二，它絕對比黑暗中的螢火蟲(chóng)還要來(lái)得顯眼。
結語(yǔ)
看了這些內容之后，你是否開(kāi)始重新思考按鈕的設計?你能否創(chuàng )造出更加吸引用戶(hù)、轉化率更高的UI界面?你可以試著(zhù)借助以上的建議，結合持續的網(wǎng)站/APP的數據分析，更加準確地了解用戶(hù)對于你的新設計的實(shí)際效果。
