按鈕可能是你設(shè)計(jì)中最小的元素之一，但是千萬不要忽視他們的存在，它們是組成一個(gè)完整、合理的網(wǎng)頁設(shè)計(jì)的最重要的元素之一。如果在網(wǎng)站設(shè)計(jì)中缺少了按鈕元素，你要通過什么途徑與用戶交流？他們又如何在反饋循環(huán)中提供信息？

一.展示位置是關(guān)鍵
在網(wǎng)頁設(shè)計(jì)中應(yīng)該在哪里設(shè)置按鈕？有哪些位置可以幫助你產(chǎn)生更多點(diǎn)擊次數(shù)？
在大多數(shù)情況下，按鈕應(yīng)該按照其設(shè)計(jì)的內(nèi)容進(jìn)行補(bǔ)充。
· 在表單的結(jié)尾；
· 在強(qiáng)調(diào)行動(dòng)的用語消息右側(cè)；
· 在頁面或屏幕的底部；
· 居中在信息下方。
為什么偏偏使用這些位置作為展示？很簡單，因?yàn)樗裱匀坏男袆?dòng)路徑和用戶閱讀和與網(wǎng)站交互的方式。
二.關(guān)于顏色
按鈕的顏色需要在整個(gè)網(wǎng)站設(shè)計(jì)中特別注意。同時(shí)，這也是一個(gè)使用特定強(qiáng)調(diào)顏色的好地方，它只作用于按鈕的操作。
按鈕顏色應(yīng)該是明亮且足夠吸引人的。你很容易注意到，有許多設(shè)計(jì)使用包括黃色，藍(lán)色或綠色的按鈕設(shè)置，這么做基于一個(gè)原因——這些明亮的顏色很容易被注意到并和網(wǎng)頁設(shè)計(jì)的其余部分分離開來。所以，如果你想要一個(gè)真正突出的按鈕，你可以選擇一種與設(shè)計(jì)中主色（在色輪上的對面）互補(bǔ)的顏色。
還有一種顏色你可以考慮，那就是使它和你的品牌色直接關(guān)聯(lián)。無論你想要在設(shè)計(jì)中使用什么按鈕顏色使它脫穎而出，它應(yīng)該配合（至少不反對）你的整體網(wǎng)頁設(shè)計(jì)的配色方案。
三.它看起來應(yīng)該是可以點(diǎn)擊（或可觸發(fā)）的
設(shè)計(jì)師對于按鈕的設(shè)計(jì)重點(diǎn)在于，如何使用戶在你的網(wǎng)頁設(shè)計(jì)中看到一個(gè)按鈕，就馬上意識到他們需要-um，或者說想要將鼠標(biāo)移動(dòng)到它的上面和觸發(fā)它。雖然幾乎任何尺寸的按鈕都可以在屏幕上被點(diǎn)擊到，但是在那些觸摸式設(shè)備上使用按鈕時(shí)，尺寸和填充就顯得至關(guān)重要了。
一般的用戶他們的指尖具有8-10毫米之間的有效觸摸長度?？紤]到這一點(diǎn)，10×10毫米的尺寸是觸摸設(shè)備上按鈕很好的起始目標(biāo)大小。（比鍵盤上的標(biāo)準(zhǔn)鍵略?。?br />以下我們提供幾個(gè)小提示，希望他們可以幫助在你的網(wǎng)頁設(shè)計(jì)中使你的按鈕看起來是可觸發(fā)的：
· 一個(gè)微妙的陰影設(shè)置可以“提升”元素和背景之間的層次感，使它感覺更接近用戶；
· 在按鈕周圍增加填充使它們看起來更容易點(diǎn)擊，同時(shí)也可以幫助引導(dǎo)用戶注意到它；
· 通過變色的懸停效果或切換操作可以向用戶展示他們正在做的實(shí)時(shí)操作。
四.更多關(guān)于尺寸的事
使用大尺寸的設(shè)計(jì)！
按鈕需要有一些體積感以便讓用戶能夠立即在屏幕上注意到它。現(xiàn)在出現(xiàn)一種模糊按鈕的設(shè)計(jì)趨勢——沒有明顯的按鈕顏色輪廓，它的重點(diǎn)在于通過以大按鈕的像素計(jì)數(shù)，但缺乏視覺重量和體積感。在尺寸方面，按鈕需要在這兩方面都很大才能起到提示作用。（這也是趨勢已經(jīng)脫離時(shí)尚的一個(gè)原因。）
如何在一個(gè)按鈕是在剛好好的大小到大得讓人覺得尷尬之間做一個(gè)界定是一個(gè)棘手的地方。當(dāng)在你的網(wǎng)站設(shè)計(jì)中發(fā)生這種情況時(shí)，這要取決于其他設(shè)計(jì)元素的規(guī)模，如果你第一眼看上去整個(gè)網(wǎng)站設(shè)計(jì)都被按鈕占滿了視覺的話，那很有可能就是按鈕調(diào)整過大了，不過一般出現(xiàn)上面的情況的時(shí)候你很容易就能發(fā)現(xiàn)。
五.使用標(biāo)準(zhǔn)形狀
當(dāng)涉及到按鈕只有兩個(gè)形狀，你應(yīng)該考慮：
· 圓形。由于material design和material lite的相關(guān)概念，圓形按鈕已經(jīng)變得很流行。它因?yàn)榫哂腥魏涡问降拿缹W(xué)，使得圓形按鈕的設(shè)計(jì)更適合用戶模式。
·矩形。此默認(rèn)形狀應(yīng)該是所有按鈕的“歸宿”，除非你在上面的實(shí)例中使用圓圈。這是用戶認(rèn)知和習(xí)慣造成的。大多數(shù)矩形按鈕趨向于至少兩倍于高（有時(shí)三或四倍寬）。用戶看到這種形狀，立即知道該怎么做。雖然有些人可能會(huì)爭辯圓角與90度角的優(yōu)點(diǎn)，但根據(jù)你的設(shè)計(jì)風(fēng)格也同樣適用。
六.專注于對比
現(xiàn)在，你有了所有的設(shè)計(jì)元素，但還需要注意一點(diǎn)，對比度是一個(gè)重要的考慮元素。這是在元素內(nèi)使用的真實(shí)的技術(shù)，但也和元素在設(shè)計(jì)中的位置和那些環(huán)境之間存在聯(lián)系。
記住在這種雙重環(huán)境中考慮以下技術(shù)：
· 配色；
· 字號和大小；
· 元素的大?。?br />· 形狀，因?yàn)樗婕暗奖尘埃?br />· 透明度或動(dòng)畫；
· 陰影和漸變；
· 空格和填充。
七.告訴用戶要做什么
每個(gè)按鈕應(yīng)該包括一個(gè)文本塊，因?yàn)槟阒辽傩枰粋€(gè)版塊告訴用戶該按鈕是做什么用的。你應(yīng)該保持語言簡短和簡單，它應(yīng)該匹配網(wǎng)站設(shè)計(jì)其余部分的語調(diào)和主題。
然后，就是履行承諾的過程了。下一個(gè)彈出的東西應(yīng)該告訴用戶他們已經(jīng)到達(dá)預(yù)期的目的地。無論是提交表單，進(jìn)行購買還是只是移動(dòng)到另一個(gè)鏈接，用戶應(yīng)該通過與按鈕交互來獲得期望的結(jié)果。（如果沒有，請確保在反饋回路中顯示錯(cuò)誤，以便你知道網(wǎng)站設(shè)計(jì)中需要進(jìn)行哪些更正。）
按鈕消息的示例包括：
· 點(diǎn)擊這里；
· 立即創(chuàng)建帳戶；
· 免費(fèi)試用；
· 添加到購物車；
· 閱讀更多。
八.給按鈕一個(gè)高度的視覺體驗(yàn)的重要性
大多數(shù)網(wǎng)頁設(shè)計(jì)都充滿了小的ui元素。我們經(jīng)常發(fā)生的一個(gè)錯(cuò)誤是，直到網(wǎng)站設(shè)計(jì)項(xiàng)目接近完成時(shí)，我們才重新回到這些元素的設(shè)計(jì)上。
不要陷入這種危險(xiǎn)的情況。
你要保證在你的網(wǎng)頁設(shè)計(jì)中，按鈕應(yīng)該看起來像個(gè)按鈕！設(shè)計(jì)中的任何其他東西都不應(yīng)該具有與按鈕相同的形狀，顏色和視覺重量。他們需要不同?？紤]為大于設(shè)計(jì)中任何其他類似元素的按鈕創(chuàng)建樣式，或者使用僅適用于按鈕的顏色。這些技術(shù)可以幫助使按鈕看起來特別，并強(qiáng)調(diào)其使用。
總結(jié)
通過上面的幾個(gè)提示，你開始重新思考為你的網(wǎng)頁設(shè)計(jì)更新按鈕設(shè)計(jì)了嗎？你認(rèn)為你可以創(chuàng)造更好的樣式鼓勵(lì)用戶點(diǎn)擊嗎？

大膽的嘗試上面的其中一些提示，同時(shí)注意分析你的網(wǎng)站設(shè)計(jì)，以準(zhǔn)確地了解你的用戶群響應(yīng)的設(shè)計(jì)更改。

成都創(chuàng)新互聯(lián)科技網(wǎng)站制作我們更專業(yè)! 網(wǎng)址：m.rwnh.cn 聯(lián)系電話:135-1821-9792

新聞名稱：網(wǎng)站網(wǎng)頁中按鈕設(shè)計(jì)的注意知識點(diǎn)
分享路徑：http://m.rwnh.cn/news7/106557.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供移動(dòng)網(wǎng)站建設(shè)、網(wǎng)站內(nèi)鏈、標(biāo)簽優(yōu)化、動(dòng)態(tài)網(wǎng)站、企業(yè)建站、微信小程序

廣告

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