那么，一個高轉化率的按鈕應該如何設計？

編者按：聊到按鈕的設計，我們有太多的話要說。確認按鈕在左邊還是右邊，幽靈按鈕到底可靠不可靠，陰影的存在到底合理不合理，等等等等。但是今天不聊這些，我們來聊一下，如何設計一個高轉化率的按鈕：

我們常常會揪住某個設計細節不放，深入討論直到透徹。這樣的探究并非毫無意義，因為即使是最細小的細節也可能會讓近乎完美的設計毀于一旦。

所以，今天的文章我們繼續深入到設計的細節當中，探討按鈕的設計。用戶每天都會接觸按鈕，從現實世界到虛擬的界面，從移動端要桌面端，它是如今界面設計中最小的元素之一，同時也是最關鍵的控件。當你在設計按鈕的時候，是否想過用戶會在什么情形下與之交互？按鈕將會在整個交互和反饋的循環中提供信息？

在早期的扁平化設計當中，用戶常常因為按鈕的感知度較差而完全處于懵逼狀態，這也從側面反映出按鈕本身在UI設計中的重要作用。

它應當看起來可點擊/觸摸

用戶看到可點擊的按鈕會有去點擊和觸摸的沖動。雖然按鈕在屏幕上會以各種各樣的尺寸出現，并且通常都具備良好的可點擊性，但是在移動端設備上按鈕本身的尺寸和按鈕周圍的間隙尺寸都是非常有講究的。

普通用戶的指尖尺寸通常為8~10毫米，所以尺寸為10x10毫米的觸摸交互對象是符合邏輯的，這也算是移動端上約定俗成的規則了。

想要讓一個元素看起來可點擊，注意下面的技巧：

·微妙的陰影能夠讓按鈕看起來“浮動”出界面，讓它看起來更接近用戶
·增加按鈕內邊距，讓它看起來更容易點擊，引導用戶點擊
·進行懸浮或者點擊操作的時候通過實時色彩和效果變化，提示用戶

色彩很重要

按鈕的色彩需要根據整個網站的配色來單獨搭配。作為用戶交互的核心，按鈕在頁面中適合使用特定的色彩進行強調。

按鈕的色彩應該明亮而迷人，這也是為什么那么多UI設計都喜歡采用明亮的黃色、綠色和藍色的按鈕設計。想要按鈕在視覺上突出，按鈕的色彩最好選取背景色在色輪上相對位置的互補色。

另外一個值得注意的是品牌用色。你需要為按鈕選取一個同你的品牌配色方案相匹配的色彩，它不僅要有識別度，還要有關聯性。不論你配色方案怎么調整，按鈕首先要與你的主要配色保持關聯和一致。

尺寸的影響更大

按鈕要大！設計師常常被各種人戳屏，LOGO要大是被指責得最多的地方，而在進行按鈕設計的時候，大也同樣是鋼需。只有當按鈕尺寸夠大的時候，用戶才能在一看到界面的時候就被它所吸引。雖然幽靈按鈕可以占據足夠大的面積，但是幽靈按鈕在視覺重量上的不足，使得它并不是最好的選擇。所以，我們所說的大不僅僅是尺寸上的大，在視覺重量上同樣要“大”。

當然，按鈕的大小尺寸也是一個相對值。有的時候，同樣的尺寸的按鈕，在一種情況下是完美的大小，在另外一個界面中可能就是過大了。很大程度上，按鈕的大小取決于周圍元素的大小比例。如果按鈕是界面中可見的唯一元素，那么誰都不會錯過了。

位置也關鍵

按鈕應該放置在哪個位置？界面中哪些地方能夠為你帶來更多的點擊量？

在絕大多數的情況下，按鈕應當按照你的頁面和APP的內容來添加：

·在表單的底部
·在行為召喚類信息附近
·在頁面或者屏幕底部
·在信息的正下方

為何要放置在這些位置？因為他們遵循用戶的習慣和自然的交互路徑，不論是網頁還是APP。

專注于對比

幾乎所有類型的設計都會對對比度有所要求，在進行按鈕設計的時候，不僅要讓按鈕內的內容（圖標、文本）能夠同按鈕本身構成良好的對比，而且按鈕和背景以及周圍的元素也要形成對比。

那么，在你進行設計的時候，需要考慮到下面的因素：

·色彩
·字體的字重和尺寸
·元素的大小
·背景與形狀
·陰影與漸變
·留白和內外間距

使用標準的形狀

當你在考慮按鈕的外形的時候，你只需要考慮兩種情況：

·圓形。隨著Material Design這種設計規范的推廣，圓形的按鈕已經被大家所接受了。圓形按鈕廣泛適用于時下流行的扁平化設計風格，適合目前的用戶模式。

·矩形。矩形按鈕（包括方形和各種圓角矩形）是最常見也是按鈕在大家認知中的默認形狀，它符合用戶的認知與習慣，絕大多數的按鈕長度寬度的兩倍（當然三四倍也有）。當用戶看到它的時候，立刻會明白應該如何與之交互。至于使用圓角還是直角，那就是另外一個問題了，選擇符合你的設計風格的即可。

告訴用戶做什么

每個按鈕都會包含一個文本指令，它會告訴用戶這個按鈕的功能。所以，按鈕上的文本要盡量簡潔、直觀，并且使用符合整個網站風格的語音語調。

然后，你需要“履行承諾”。當用戶點擊按鈕的時候，按鈕所指示的內容和結果應當合理、迅速地呈現在用戶眼前，無論是提交表單、跳轉到新的頁面，用戶通過這個按鈕應當獲得他所預期的結果。

按鈕中的內容通常包括：

·戳我！
·立即創建
·免費試用
·加入購物車
·查看更多

讓按鈕擁有更高的視覺優先級

幾乎每個界面都塞滿了各種不同的UI元素。設計的過程中，設計師往往會設計出若干個不同的版本，而直到項目接近完成的時候，才從無比相近的幾個方案中挑選一個版本。

不要陷入這種困境。

按鈕就該有按鈕的樣子。按鈕應該是整個設計中獨一無二的控件，它在形狀、色彩和視覺重量上，都應當同其他部分區分開。想想看，當你創造出的按鈕和其他的控件都要大，色彩在整個配色方案中都獨一無二，它絕對比黑暗中的螢火蟲還要來得顯眼。

結語

看了這些內容之后，你是否開始重新思考按鈕的設計？你能否創造出更加吸引用戶、轉化率更高的UI界面？你可以試著借助以上的建議，結合持續的網站/APP的數據分析，更加準確地了解用戶對于你的新設計的實際效果。

【Nick Babich 的用戶體驗設計經驗之談】

1. 輸入框設計：《講真，你真的懂得文本輸入框設計的那些潛規則么？》
2. 表單設計：《摳細節！設計高效好用表單的10個技巧》
3. 極簡APP UI：《超贊！幫你打造極簡風APP UI 的實用設計技巧》
4. 前端開發：《有法可依！幫你衡量一個動效是否合格的六個核心因素》
5. 面包屑：《并不簡單！網頁中為你指路的面包屑到底應當怎么使用？》
6. 移動端頁面：《跟著建議走！這樣的移動端網站設計才對頭》

原文地址：designshack
原文作者：CARRIE COUSINS
優設譯文：@陳子木

本文由優設網原創翻譯，請尊重版權和譯者成果，轉摘請附上優設鏈接，違者必究。謝謝各位編輯同仁配合。

【優設網 原創文章 投稿郵箱：yuan@uisdc.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量180萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com