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

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

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

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

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

廣告

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