按鈕設計在UI工作中十分常見，但細節(jié)處理不到位的情況卻時有發(fā)生。按鈕充當了用戶與系統(tǒng)之間對話的作用，也是交互設計的基本要素之一。UI中的按鈕怎么設計?本文將展開詳細的介紹。

UI中的按鈕怎么設計?

　　1、匹配品牌

　　按鈕設計中非常重要的一點就是與它的使用環(huán)境相匹配。這意味著在按鈕的設計過程中也需要選擇特定的色彩、形狀，或從目標品牌的設計理念及Logo中汲取靈感。需要以目標品牌為依據來決定按鈕的形狀、材質和風格。

　　2、匹配風格

　　在按界面設計中設計師要對界面風格做整體把握，這樣對界面中按鈕的設計運用就要有一定的要求，按鈕與界面設計風格相匹配是按鈕設計中基本的要求。

　　3、突出對比度

　　在界面設計中，按鈕的重要性不容忽視，漂亮的按鈕可以直接吸引用戶點擊。因此在設計中，設計師往往會利用色彩、形狀、字體等不同元素，賦予按鈕獨特的視覺效果，使它們能與界面中的其他元素清晰地區(qū)別開。

　　4、描邊顏色的設置

　　人們見到的大多數按鈕都或多或少地使用了描邊效果。通常情況下，如果按鈕的顏色比背景色更暗，那么應使用比按鈕顏色暗的描邊效果。如果是相反的情形，那么應使比背景色偏暗的描邊效果。

按鈕設計具有哪些元素？

　　按鈕設計具有以下元素：文本標簽、背景、邊框和圖標。除文本標簽外，所有其他元素都不是必要的。

　　1、圖標：按鈕含義的圖形化表達。

　　2、文字標簽：按鈕含義的文字化表達。

　　3、圓角：決定按鈕視覺感受的元素。

　　4、背景：決定按鈕視覺感受的元素，改變顏色能夠表示按鈕的狀態(tài)。

　　5、容器：按鈕的載體。

　　6、邊框：明確的按鈕的大小與邊界。

常見的按鈕設計類型

　　1.文字按鈕

　　存在感很弱，視覺重量輕;由于文字按鈕沒有容器，容易和正文混淆，所以，純英文的文字按鈕需要所有字母大寫，中文字(方塊字)需要用字體加粗、變色等特征來區(qū)別于正文;文字按鈕多出現(xiàn)在卡片和對話框中。

　　2.線框按鈕

　　又叫幽靈按鈕，它的容器沒有填充色(如果填充白色那是實心按鈕);它的存在感較強但不是頁面中重要按鈕，其文本的要求和上方文字按鈕一致;由于沒有填充所以請注意在不同背景上的易讀性。

　3.實心按鈕

　　為醒目，常常是頁面中的重要按鈕;(目前流行的風格是)沒有描邊;英文文本可以是字母大寫。

　　4.可切換按鈕

　　這是以組合形式出現(xiàn)的按鈕，幾個icon共用一個容器;同時只能選中、激活一個icon。常見于文字編輯器中，但可切換按鈕的形式并不止這么單一，能代表單選的icon也算是可切換按鈕的一種。

　　UI中的按鈕怎么設計?上文中分享了幾個好方法，可作為參考。另外選擇一款合適的設計軟件也是非常重要的，比如figma和sketch都還可以，https://js.design/special/figma/設計師在設計按鈕時，應當對細小的元素進行反復斟酌和思考，只有做到精益求精，才能為用戶帶來更好的體驗。