2025-2-27 杰睿
01. 按鈕設計強弱表現
在整個產品設計中我們要根據信息傳遞的優先級對按鈕設計進行主次區分，設計表達要有強弱差異。按鈕設計可以通過大小、填充、描邊、色相、飽和度等的不同來進行強弱差異，不同強弱的差異表現出按鈕的等級：行動觸發、主要、次要、輔助、禁用等。
02. 圓角設置要合理
對于按鈕邊框來說，我們通常采用全圓角和小圓角居多，這樣顯得穩重大氣。而大圓角按鈕并非不可用，只是相對較少，會顯得按鈕不方不圓的，設計表現顯得不夠成熟。
全圓角的圓角值等于按鈕高度值的一半，而小圓角的圓角值我們通常控制在 1/4H（高度值的四分之一）以內（僅為個人參考，并非絕對值）。
03. 投影設置要用對色彩關系
給一個有彩色系按鈕設置投影時，選擇無彩色系（比如黑色）也能達到效果，只是為了得到更好的視覺效果，提高用戶感官體驗。我們也可以嘗試基于按鈕本身色相來確定投影顏色，這樣得到的效果會顯得更加干凈清爽。
04. 投影的使用勿過度泛濫
雖然投影的運用可以使按鈕更有層次感，但是也需要根據具體情況慎用。比如對于一些淺色按鈕來說也許投影反而會降低按鈕的識別度，使得按鈕配色環境顯得不夠干凈清爽。
05. 給按鈕文字一點呼吸感
按鈕文字和邊框的設計要預留一定的留白，不要做“舍不得”的設計，使得按鈕給人感覺很擁擠。如果你把控不好可以分析一些按鈕的負空間獲取經驗，看看文字大小和負空間之間是否存在某種比例關系。找到這個比例關系運用到按鈕設計中，也許會讓你的設計顯得更加成熟穩重。
06. 按鈕設計別讓用戶思考
按鈕的存在是為了引導用戶進行引導式操作，而不是讓用戶對其產生困惑。按鈕設計別讓用戶思考這是啥，是否可以點擊，需要簡潔明了的對此操作進行指引。用戶已經養成對按鈕外觀和功能的行為習慣，如果你設計的按鈕樣式與“標準”差異太大，用戶就會產生疑惑，影響使用體驗。
07. 樣式表達的一致性
當設計元素規范統一時，用戶操作過程中的理解成本最低，一致性也因此成為最有力的可用性原則之一。我們在設計按鈕的時候要注意樣式表達的一致性，比如：按鈕形狀、色彩定義、風格特征等，這樣會使得我們的設計可用性更強。
08. 箭頭運用不是字符輸入
一些初入職場的設計師會偷懶直接字符輸入形成按鈕內部所需箭頭，這樣的表達方式自然顯得粗糙些。箭頭要當成圖標來進行設計，控制好箭頭的粗細和文字筆畫的粗細值接近，這樣顯得更有細節和態度。
09. 按鈕設計主次分明
通過信息對比才能形成主次之分，按鈕設計需要在風格上進行區分，達到層次結構的視覺提示。主要的按鈕需要和次要的、輔助的形成差異，最大化突出主按鈕的視覺效果，更好的引導用戶根據設定的軌跡進行操作。
10. 按鈕設計不要讓用戶誤解
在整個項目設計規范中，我們需要避免讓用戶把非按鈕狀態的內容進行誤判。在確定好按鈕樣式特征之后，不要在其它場景運用其樣式特征或者類似的風格特征，這樣會讓用戶產生錯誤的認知，因而進行無用的操作。
11. 按鈕文本表達要言簡意賅
在進行按鈕文本思考的時候，盡量減少字符和單詞的數量，內容表達言簡意賅，只要能夠準確傳達信息識別度即可。有時候也不一定需要文本，圖標可以傳遞的信息可以考慮文本的減少，也許可以讓界面的呼吸感更強。
12. 按鈕文本設置切勿換行
單行文字的可讀性更高，如果出現換行就會降低可讀性。我們在設計按鈕的時候，確保文本內容在一行之內顯示，如果設計空間不足要考慮文本內容的精簡。
13. 特殊場景要靈活轉變
底部按鈕的運用并非固定不變，不同機型或者特殊場景的考慮需要靈活轉變。比如 iPhone X 等類型的機型，由于底部需要預留主頁控制器的位置，所以在設計按鈕的時候需要考慮上中下的過渡銜接，這樣才能帶給用戶更好的感官體驗。
14. 按鈕大小要便于點擊
按鈕需要方便用戶進行點擊操作，如果用戶點擊失敗或者誤點到周邊元素，就會帶給用戶不友好的體驗。若是帶有文本的按鈕，只要文字大小不要小于極限值，通常實現出來的按鈕交互熱區都會滿足點擊需求。
如果是純 icon 的按鈕，除了按鈕大小需要控制合適以外，也要確保交互熱區能夠滿足點擊區域要求。
15. 同屬板塊按鈕大小一致
在同屬板塊內的按鈕設計，我們可以通過按鈕的強弱來體現層級關系，不要讓按鈕大小不一，這樣視覺平衡會受到影響。
16. 按鈕設計考慮文本最大值
稍微注意細節的設計師也不會讓文本的長度超過按鈕寬度，這是一個非常明顯的錯誤。但是按鈕文本變得很長卻是遇見過的，幾個字即可表達的意思卻使用了過多修飾詞。在進行按鈕文本思考的時候，要根據最佳的視覺效果設定一個最大值，不要任其無限制發揮，這樣會使得最終的視覺效果大打折扣，甚至影響用戶感官體驗。
17. 保持按鈕可讀性
按鈕設計需要考慮在不同環境下的適應度，確保用戶可以一目了然的發現它。現在很多產品都適配了深色主題模式，按鈕的配色不能只考慮白色或者淺色背景下的運用，需要考慮大多數背景下的適配。在進行色彩選擇的時候，始終保持按鈕與背景的高對比度和可讀性。
18. 按鈕去文本是否合理
關于按鈕文本的設置需要結合信息傳遞的識別性和準確性，雖然純圖標顯得設計簡潔大方，但是需要考慮圖形是否可以準確的表達其含義，不會讓用戶出現誤解或者錯誤的認知。所以，按鈕去文本需要根據文案代表的含義來判斷，如果不需要輔助解釋也能判斷出按鈕的意思，那么更為簡潔的設計表達效果更佳。
19. 正確判斷按鈕顏色選擇
色彩在設計中是最直觀的體現，不同的顏色會傳遞不同的性格，帶給用戶認知差異。而按鈕的顏色選擇也并非隨性發揮，需要結合品牌色和輔助色作出判斷。
通常比較統一的標準是采用品牌色作為大部分按鈕的顏色，遇到一些需要差異化的按鈕會選擇輔助色來表達，紅色或者橙色多為行動刺激作用，不適合在非品牌色的時候濫用。淺灰色或者低飽和度的色系會帶有不可用、禁用、失效等屬性，需要酌情選擇。
20. 按鈕位置結合用戶體驗
引導用戶作出選擇的按鈕應該放在左邊還是右邊，根據操作系統的不同也引起了設計師們的爭議。比如 Windows 系統習慣將確認按鈕放在左邊，而蘋果系統卻選擇了放在右邊，用戶運用系統的習慣會影響其行為的適應度。不過要是在移動端個人傾向于將引導用戶作出選擇的按鈕放在右邊，更有利于用戶點擊（特殊人群這里需要除外）。
有時候為了防止用戶誤操作，我們會將確認操作的按鈕放在左邊，通過助力設計讓用戶再次確認。所以，一方面我們要結合操作系統的習慣，另一方面也要結合用戶習慣，將按鈕放在最合適的位置，便于用戶操作。
小結
作為設計師來說，對每一個細小的元素進行深入思考和總結，才能讓我們設計出更好的解決方案。一枚小小的按鈕設計，其背后也有很多需要探索的東西，本文為大家總結了 20 條經驗，相信還有更多值得梳理的細節，期待更多設計伙伴去挖掘。
作者：黑馬青年
鏈接：https://www.zcool.com.cn/article/ZMTIwNzE4MA==.html
來源：站酷
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。
蘭亭妙微(www.lzhte.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內外優秀的設計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan