南京網(wǎng)站建設(shè)--網(wǎng)頁設(shè)計(jì)中如何突出按鈕
發(fā)布者:南京文飛科技信息有限公司|TIME : 2018-08-14
導(dǎo)讀:南京網(wǎng)站建設(shè)--網(wǎng)頁設(shè)計(jì)中如何突出按鈕 在網(wǎng)站設(shè)計(jì)中,經(jīng)常涉及到按鈕。你的按鈕設(shè)計(jì),必須考慮到如何讓它更加醒目,并且更容易點(diǎn)擊,而為了達(dá)到這個(gè)目的,你就必須從按鈕的大小和視覺反饋來進(jìn)行處理,以幫助用戶可以更方便地使用你的網(wǎng)站。 1、按鈕大小和顏色填充 在做頁面設(shè)計(jì)的時(shí)候,你必須要考慮按鈕相對(duì)于頁面上的其他元素有明顯區(qū)別。同時(shí),保證您設(shè)計(jì)的按鈕足夠大,以供人們點(diǎn)擊。 根據(jù)美國(guó)MIT觸摸實(shí)驗(yàn)室的研究發(fā)現(xiàn),手指墊的平均尺寸在10-14mm之間,指尖的尺寸為8-10mm,這就使得10mm x 10mm成
南京網(wǎng)站建設(shè)--網(wǎng)頁設(shè)計(jì)中如何突出按鈕
在網(wǎng)站設(shè)計(jì)中,經(jīng)常涉及到按鈕。你的按鈕設(shè)計(jì),必須考慮到如何讓它更加醒目,并且更容易點(diǎn)擊,而為了達(dá)到這個(gè)目的,你就必須從按鈕的大小和視覺反饋來進(jìn)行處理,以幫助用戶可以更方便地使用你的網(wǎng)站。
1、按鈕大小和顏色填充
在做頁面設(shè)計(jì)的時(shí)候,你必須要考慮按鈕相對(duì)于頁面上的其他元素有明顯區(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)鍵盤操作,可以減少按鈕尺寸以適應(yīng)密集的UI設(shè)計(jì)的。
南京網(wǎng)站建設(shè)
另外在進(jìn)行按鈕設(shè)計(jì)時(shí),還需要注意按鈕之間的間距,因?yàn)檫m當(dāng)?shù)拈g距有助于將按鈕分離,并為用戶提供足夠的使用范圍。
2、提供視覺上的反饋
這個(gè)要求不是頁面美觀上的問題,而是考慮到用戶體驗(yàn)。通常,一個(gè)按鈕并不只是單純的一個(gè)狀態(tài),而是會(huì)遇到多種不同情況下的點(diǎn)擊,而在這時(shí)你就需要有不同的視覺反饋來表達(dá)它現(xiàn)在的具體狀態(tài)。下面這個(gè)插圖清楚地表達(dá)了不同的按鈕顯示狀態(tài):
3、從視覺上突出顯示最重要的按鈕
在進(jìn)行頁面設(shè)計(jì)的時(shí)候,使用顯眼的顏色,并將按鈕放置在用戶最有可能注意到的顯著位置。比如我們看一下微信的聊天界面,它就非常簡(jiǎn)單,幾乎是單色的,除了“發(fā)送”按鈕。 一旦用戶寫完信息,他們立即注意到這個(gè)漂亮的綠色按鈕。
同樣的規(guī)則也適用于網(wǎng)站上面。如果您看一下下面的騰訊官網(wǎng)示例,首先會(huì)引起注意的就是“立即下載”這個(gè)按鈕。在這種情況下,顏色和位置比文字本身要更重要。
4、主按鈕和輔助按鈕的視覺區(qū)別
在很多的網(wǎng)站和軟件上面,使用對(duì)話框中的選擇按鈕來吸引用戶的注意力。當(dāng)他們?cè)谥饕痛我袆?dòng)之間進(jìn)行選擇時(shí),視覺差異是幫助他們作出選擇的有效方法:
*把你想要他做的選擇,增加更有分量的視覺重量,讓它成為視覺主導(dǎo)按鈕。
*次要行為(例如繼續(xù)退出選項(xiàng))應(yīng)該具有較弱的視覺重量,因?yàn)闇p少次要行為的視覺突出性可以減小用戶繼續(xù)退出的概率,進(jìn)一步讓用戶跟著你的想法去做。
本文章來自于:南京網(wǎng)站建設(shè)