20 條把按鈕設計做到最好的建議上榜經歷2020年12月21日 192期站酷文章總榜第9名

20 條把按鈕設計做到最好的建議上榜經歷2020年12月21日 192期站酷文章總榜第9名

20 條把按鈕設計做到最好的建議,教程,黑馬青年,原創文章站酷網,中國設計師互動平台。

按鈕在產品界面中是非常重要的元件之一,按鈕作為用戶引流和行動觸發來說都是至關重要的。如何把按鈕設計做到最好,是設計師需要不斷探索的問題,把控好每一個細節才能讓每一個元件更精緻。

 

本文為大家梳理總結了20 條在設計按鈕時需要避免的問題,希望這些設計細節和思考你都能完美避開,把按鈕設計做到最好。

 

 

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 條經驗,相信還有更多值得梳理的細節,期待更多設計夥伴去挖掘。

 

文中觀點為日常設計經驗總結,可結合實際情況選擇性運用,希望可以帶給大家更多思考。

作者:黑馬青年(黎波)

本文由@黑馬青年原創發布。未經許可,禁止轉載。

<!--

- 位站酷推荐设计师推荐 -

-->

Category

GogoShark 給你最好的網頁設計

無論您的事業才剛起步、漸上軌道,或計劃向大中華區拓展市場,GogoShark 團隊將提供全方位的服務,為您量身打造數位品牌形象。