張哥從4個方面講解按鈕設計原則 全面、詳盡

在網站設計中，經常涉及到按鈕。你的按鈕設計，必須考慮到如何讓它更加醒目，并且更容易點擊，而為了達到這個目的，你就必須從按鈕的大小和視覺反饋來進行處理，以幫助用戶可以更方便地使用你的網站。

1、按鈕大小和顏色填充

在做頁面設計的時候，你必須要考慮按鈕相對于頁面上的其他元素有明顯區別。同時，保證您設計的按鈕足夠大，以供人們點擊。

根據美國MIT觸摸實驗室的研究發現，手指墊的平均尺寸在10-14mm之間，指尖的尺寸為8-10mm，這就使得10mm x 10mm成為了按鈕設計的一個參考標準。當然如果是用鼠標鍵盤操作，可以減少按鈕尺寸以適應密集的UI設計的。

另外在進行按鈕設計時，還需要注意按鈕之間的間距，因為適當的間距有助于將按鈕分離，并為用戶提供足夠的使用范圍。

2、提供視覺上的反饋

這個要求不是頁面美觀上的問題，而是考慮到用戶體驗。通常，一個按鈕并不只是單純的一個狀態，而是會遇到多種不同情況下的點擊，而在這時你就需要有不同的視覺反饋來表達它現在的具體狀態。下面這個插圖清楚地表達了不同的按鈕顯示狀態：

3、從視覺上突出顯示最重要的按鈕

在進行頁面設計的時候，使用顯眼的顏色，并將按鈕放置在用戶最有可能注意到的顯著位置。比如我們看一下微信的聊天界面，它就非常簡單，幾乎是單色的，除了“發送”按鈕。 一旦用戶寫完信息，他們立即注意到這個漂亮的綠色按鈕。

同樣的規則也適用于網站上面。如果您看一下下面的騰訊官網示例，首先會引起注意的就是“立即下載”這個按鈕。在這種情況下，顏色和位置比文字本身要更重要。

4、主按鈕和輔助按鈕的視覺區別

在很多的網站和軟件上面，使用對話框中的選擇按鈕來吸引用戶的注意力。當他們在主要和次要行動之間進行選擇時，視覺差異是幫助他們作出選擇的有效方法：

*把你想要他做的選擇，增加更有分量的視覺重量，讓它成為視覺主導按鈕。

*次要行為（例如繼續退出選項）應該具有較弱的視覺重量，因為減少次要行為的視覺突出性可以減小用戶繼續退出的概率，進一步讓用戶跟著你的想法去做。

標題名稱：如何在視覺感官上突出按鈕信息
URL分享：http://m.2m8n56k.cn/news30/187880.html

成都網站建設公司_創新互聯，為您提供商城網站、網站內鏈、網頁設計公司、關鍵詞優化、企業網站制作、網站設計公司

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：[email protected]。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯