張哥從4個(gè)方面講解按鈕設(shè)計(jì)原則 全面、詳盡

在網(wǎng)站設(shè)計(jì)中，經(jīng)常涉及到按鈕。你的按鈕設(shè)計(jì)，必須考慮到如何讓它更加醒目，并且更容易點(diǎn)擊，而為了達(dá)到這個(gè)目的，你就必須從按鈕的大小和視覺(jué)反饋來(lái)進(jìn)行處理，以幫助用戶(hù)可以更方便地使用你的網(wǎng)站。

1、按鈕大小和顏色填充

在做頁(yè)面設(shè)計(jì)的時(shí)候，你必須要考慮按鈕相對(duì)于頁(yè)面上的其他元素有明顯區(qū)別。同時(shí)，保證您設(shè)計(jì)的按鈕足夠大，以供人們點(diǎn)擊。

根據(jù)美國(guó)MIT觸摸實(shí)驗(yàn)室的研究發(fā)現(xiàn)，手指墊的平均尺寸在10-14mm之間，指尖的尺寸為8-10mm，這就使得10mm x 10mm成為了按鈕設(shè)計(jì)的一個(gè)參考標(biāo)準(zhǔn)。當(dāng)然如果是用鼠標(biāo)鍵盤(pán)操作，可以減少按鈕尺寸以適應(yīng)密集的UI設(shè)計(jì)的。

另外在進(jìn)行按鈕設(shè)計(jì)時(shí)，還需要注意按鈕之間的間距，因?yàn)檫m當(dāng)?shù)拈g距有助于將按鈕分離，并為用戶(hù)提供足夠的使用范圍。

2、提供視覺(jué)上的反饋

這個(gè)要求不是頁(yè)面美觀(guān)上的問(wèn)題，而是考慮到用戶(hù)體驗(yàn)。通常，一個(gè)按鈕并不只是單純的一個(gè)狀態(tài)，而是會(huì)遇到多種不同情況下的點(diǎn)擊，而在這時(shí)你就需要有不同的視覺(jué)反饋來(lái)表達(dá)它現(xiàn)在的具體狀態(tài)。下面這個(gè)插圖清楚地表達(dá)了不同的按鈕顯示狀態(tài)：

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

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

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

4、主按鈕和輔助按鈕的視覺(jué)區(qū)別

在很多的網(wǎng)站和軟件上面，使用對(duì)話(huà)框中的選擇按鈕來(lái)吸引用戶(hù)的注意力。當(dāng)他們?cè)谥饕痛我袆?dòng)之間進(jìn)行選擇時(shí)，視覺(jué)差異是幫助他們作出選擇的有效方法：

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

*次要行為（例如繼續(xù)退出選項(xiàng)）應(yīng)該具有較弱的視覺(jué)重量，因?yàn)闇p少次要行為的視覺(jué)突出性可以減小用戶(hù)繼續(xù)退出的概率，進(jìn)一步讓用戶(hù)跟著你的想法去做。

標(biāo)題名稱(chēng)：如何在視覺(jué)感官上突出按鈕信息
URL分享：http://www.rwnh.cn/news30/187880.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供商城網(wǎng)站、網(wǎng)站內(nèi)鏈、網(wǎng)頁(yè)設(shè)計(jì)公司、關(guān)鍵詞優(yōu)化、企業(yè)網(wǎng)站制作、網(wǎng)站設(shè)計(jì)公司

廣告

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