按鈕是UI和交互設(shè)計的基本元素，它們是用戶交互的時候，和系統(tǒng)進行溝通交流的核心組件，也是圖形化界面當中，最早出現(xiàn)，也是最為常見的一種交互對象。在今天的文章當中，我們將會回顧一下按鈕設(shè)計的7個基本原則，希望它們能夠在設(shè)計的時候幫到你。

創(chuàng)新互聯(lián)公司專注于臨川網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗。 熱誠為您提供臨川營銷型網(wǎng)站建設(shè)，臨川網(wǎng)站制作、臨川網(wǎng)頁設(shè)計、臨川網(wǎng)站官網(wǎng)定制、成都微信小程序服務(wù)，打造臨川網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供臨川網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。

1.按鈕必須得看起來像按鈕

涉及到用戶界面交互的時候，用戶需要知道哪些是可點擊的，而哪些不是。面對著UI界面中的每個元素，用戶都需要對它們進行辨別和判斷，而這個過程越長，可用性其實就越差。

那么，用戶是如何判讀哪個元素是可交互的呢？通常，用戶是基于以往的經(jīng)驗和視覺來對UI元素進行判斷，這就是為什么需要通過合適的視覺符號來幫助用戶理解（比如尺寸、形狀、顏色、陰影等），使得元素看起來像是按鈕。視覺符號為界面提供可供性。

不幸的是，在許多界面當中，按鈕的可發(fā)現(xiàn)性和指示性并不強，這使得交互發(fā)生的機率有所降低，用戶會糾結(jié)于哪些可點擊，而哪些不可點擊，這個時候設(shè)計是否炫酷，就顯得不那么重要了。即使視覺上界面設(shè)計得足夠突出，可用性很弱，會讓用戶陷入沮喪，產(chǎn)品也就不再具備可用性了。

為了確定按鈕是否可用，用戶在桌面端訪問網(wǎng)站的時候，需要將光標移動到元素上，檢查元素狀態(tài)是否會改變，才能判斷它是否是可點擊的。而移動端用戶就麻煩了，根本沒有鼠標來執(zhí)行這樣的操作，元素能否點擊，只能都試一次，沒有其他更好的方法了。

不要假定你的UI中的元素對于用戶是顯而易見的。

在很多情況下，設(shè)計師會有意識地不將某些元素的交互性凸顯出來，因為他們會認為這些東西是顯而易見的。但是事實并非如此，在設(shè)計UI的時候，應(yīng)該牢記下面的事情。

作為設(shè)計師，是很容易搞清楚UI中哪些元素可交互，哪些不可交互，但是用戶并不清楚。

盡量在按鈕中采用用戶熟悉的設(shè)計。

以下是絕大多數(shù)用戶都熟悉的按鈕樣式：

帶有矩形邊框的、填充有色彩的按鈕；帶有圓角矩形邊框的、填充色彩的按鈕；帶有陰影有色彩和內(nèi)容填充的按鈕；幽靈按鈕。

在這幾種常見的模式當中，帶有陰影和色彩填充的按鈕，對于用戶來說是最清晰的，因為它在視覺上是有三個維度的，用戶會感知到這是一個可按下去的元素。

不要忘記留白

按鈕本身的視覺屬性很重要，而按鈕附近的留白同樣重要，他們讓按鈕更容易被識別，也更容易交互。在下面的案例當中，用戶很可能會將文本內(nèi)容和幽靈按鈕混淆。用戶在此無法判斷它到底是一個盒子元素，還是個按鈕。

2.將按鈕放在用戶希望看到的地方

用戶對于頁面交互其實是有基本的感知和期望的，也就是說用戶對于按鈕的位置是有個基本的認知的。不要讓用戶到處找按鈕，它最好在用戶所期望的位置出現(xiàn)。

盡可能使用傳統(tǒng)的布局和標準的UI模式

所謂傳統(tǒng)的布局也就是貼合用戶經(jīng)驗的布局，用戶在瀏覽的時候會對于這樣「標準」的UI布局有明確的預(yù)期，在對的位置看到了對的按鈕，整體更容易理解，自然也就可以輕松和界面進行交互了。

想要確認設(shè)計的可用性，只需要觀察用戶在使用過程中是否會通過操作抵達你希望他們到達的位置，并且找到需要點擊的按鈕。

3.按鈕上應(yīng)該加上相應(yīng)操作的標簽

當按鈕的文本標簽上的內(nèi)容寫的太過于寬泛，或者使用帶有誤解的內(nèi)容，可能會讓用戶感到迷惑。每個標簽上的文本標簽都應(yīng)該盡量準確，簡明直接地介紹清楚它的真實功能。

用戶應(yīng)該清楚他們點擊按鈕之后，會發(fā)生什么。舉個簡單的例子，想象一下，你不小心觸發(fā)了一個刪除按鈕，現(xiàn)在你看到了下面的報錯信息：

在這個界面當中，「OK」是一個相當模糊的表述，并沒有說明按鈕的作用。不論是「確定」還是「取消」，都沒有說清楚這個操作的真實含義。尤其當刪除是一個存在潛在危險的操作，這個操作就更加需要精準的表述。所以，這個地方兩個按鈕應(yīng)該是「刪除」和「取消」更合適，而刪除應(yīng)該用紅色進行區(qū)分標識，讓用戶意識到這個操作的重要性或者獨特性。

4.按鈕應(yīng)該擁有合理的尺寸

按鈕的大小應(yīng)該反映出屏幕上這一元素的優(yōu)先級，更大的按鈕應(yīng)該意味著更重要的交互。

按鈕優(yōu)先級

讓更重要的按鈕在視覺上就足以體現(xiàn)它的重要性。始終嘗試讓主要的按鈕更加突出，增加它的尺寸，并且使用高對比度的色彩來吸引用戶的注意力。

在Dropbox的界面上，設(shè)計師就是使用了大小和色彩的對比來創(chuàng)造優(yōu)先級。

讓按鈕適配用戶的手指

在許多APP當中，按鈕的設(shè)計太小了，這可能會導(dǎo)致用戶出現(xiàn)誤觸的情況。

△左側(cè)：正確的按鈕尺寸；右側(cè)：按鈕尺寸太小

麻省理工學(xué)院的實驗室研究發(fā)現(xiàn)，手指墊寬度的平均值在10~14mm之間，指尖在8-10mm之間，這使得10×10mm的按鈕尺寸是比較合理的。

5.注意按鈕的次序

按鈕的順序應(yīng)該反映出用戶和界面之間交互的屬性，問問自己用戶期望在屏幕上看到什么樣的順序，或者說什么樣的順序更合理，然后進行相應(yīng)的設(shè)計。

舉個例子，比如「上一步/下一步」兩個按鈕應(yīng)該如何安置方位呢？通常而言，「上一步」是回卷操作，應(yīng)該在左邊，而「下一步」則是前進操作，應(yīng)該在右邊。

6.避免使用太多按鈕

這是許多APP和網(wǎng)站中經(jīng)常出現(xiàn)的一個問題。當你提供太多的選擇的時候，用戶往往會無所適從。無論是設(shè)計網(wǎng)站還是APP，請務(wù)必盡量考慮最重要的操作，控制好優(yōu)先級和復(fù)雜度。

△太多的按鈕

7.為按鈕交互提供視覺和音頻反饋

當用戶點擊按鈕的時候，他們更希望界面能夠給予適當?shù)姆答仭；诓煌牟僮?，界面給予視覺或者音頻的反饋。當用戶沒有收獲任何反饋的時候，他們可能會覺得界面沒有收到他們的操作，從而反復(fù)點擊，執(zhí)行多次不必要的操作。

人類和物理世界交互，獲得反饋，然后執(zhí)行更多的操作，這種機制是人類進化中所形成的認知，這種反饋可以是視覺，也可以是聽覺，這些反饋會告訴用戶發(fā)生了什么。

對于某些操作，比如下載，不僅要告訴用戶他們的操作執(zhí)行成功了，而且要顯示當前的進度。

網(wǎng)站欄目：按鈕設(shè)計的7個基本原則
分享鏈接：http://m.rwnh.cn/article12/cjhsgc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站制作、網(wǎng)站導(dǎo)航、營銷型網(wǎng)站建設(shè)、云服務(wù)器、品牌網(wǎng)站設(shè)計、定制網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)