按鈕可能是你設計中最小的元素之一,但是千萬不要忽視他們的存在,它們是組成一個完整、合理的網頁設計的最重要的元素之一。如果在網站設計中缺少了按鈕元素,你要通過什么途徑與用戶交流?他們又如何在反饋循環中提供信息?
一.展示位置是關鍵
在網頁設計中應該在哪里設置按鈕?有哪些位置可以幫助你產生更多點擊次數?
在大多數情況下,按鈕應該按照其設計的內容進行補充。
· 在表單的結尾;
· 在強調行動的用語消息右側;
· 在頁面或屏幕的底部;
· 居中在信息下方。
為什么偏偏使用這些位置作為展示?很簡單,因為它遵循自然的行動路徑和用戶閱讀和與網站交互的方式。
二.關于顏色
按鈕的顏色需要在整個
網站設計中特別注意。同時,這也是一個使用特定強調顏色的好地方,它只作用于按鈕的操作。
按鈕顏色應該是明亮且足夠吸引人的。你很容易注意到,有許多設計使用包括黃色,藍色或綠色的按鈕設置,這么做基于一個原因——這些明亮的顏色很容易被注意到并和網頁設計的其余部分分離開來。所以,如果你想要一個真正突出的按鈕,你可以選擇一種與設計中主色(在色輪上的對面)互補的顏色。
還有一種顏色你可以考慮,那就是使它和你的品牌色直接關聯。無論你想要在設計中使用什么按鈕顏色使它脫穎而出,它應該配合(至少不反對)你的整體網頁設計的配色方案。
三.它看起來應該是可以點擊(或可觸發)的
設計師對于按鈕的設計重點在于,如何使用戶在你的網頁設計中看到一個按鈕,就馬上意識到他們需要-um,或者說想要將鼠標移動到它的上面和觸發它。雖然幾乎任何尺寸的按鈕都可以在屏幕上被點擊到,但是在那些觸摸式設備上使用按鈕時,尺寸和填充就顯得至關重要了。
一般的用戶他們的指尖具有8-10毫米之間的有效觸摸長度。考慮到這一點,10×10毫米的尺寸是觸摸設備上按鈕很好的起始目標大小。(比鍵盤上的標準鍵略小)。
以下我們提供幾個小提示,希望他們可以幫助在你的網頁設計中使你的按鈕看起來是可觸發的:
· 一個微妙的陰影設置可以“提升”元素和背景之間的層次感,使它感覺更接近用戶;
· 在按鈕周圍增加填充使它們看起來更容易點擊,同時也可以幫助引導用戶注意到它;
· 通過變色的懸停效果或切換操作可以向用戶展示他們正在做的實時操作。
四.更多關于尺寸的事
使用大尺寸的設計!
按鈕需要有一些體積感以便讓用戶能夠立即在屏幕上注意到它。現在出現一種模糊按鈕的設計趨勢——沒有明顯的按鈕顏色輪廓,它的重點在于通過以大按鈕的像素計數,但缺乏視覺重量和體積感。在尺寸方面,按鈕需要在這兩方面都很大才能起到提示作用。(這也是趨勢已經脫離時尚的一個原因。)
如何在一個按鈕是在剛好好的大小到大得讓人覺得尷尬之間做一個界定是一個棘手的地方。當在你的網站設計中發生這種情況時,這要取決于其他設計元素的規模,如果你第一眼看上去整個
網站設計都被按鈕占滿了視覺的話,那很有可能就是按鈕調整過大了,不過一般出現上面的情況的時候你很容易就能發現。
五.使用標準形狀
當涉及到按鈕只有兩個形狀,你應該考慮:
· 圓形。由于material design和material lite的相關概念,圓形按鈕已經變得很流行。它因為具有任何形式的美學,使得圓形按鈕的設計更適合用戶模式。
·矩形。此默認形狀應該是所有按鈕的“歸宿”,除非你在上面的實例中使用圓圈。這是用戶認知和習慣造成的。大多數矩形按鈕趨向于至少兩倍于高(有時三或四倍寬)。用戶看到這種形狀,立即知道該怎么做。雖然有些人可能會爭辯圓角與90度角的優點,但根據你的設計風格也同樣適用。
六.專注于對比
現在,你有了所有的設計元素,但還需要注意一點,對比度是一個重要的考慮元素。這是在元素內使用的真實的技術,但也和元素在設計中的位置和那些環境之間存在聯系。
記住在這種雙重環境中考慮以下技術:
· 配色;
· 字號和大小;
· 元素的大小;
· 形狀,因為它涉及到背景;
· 透明度或動畫;
· 陰影和漸變;
· 空格和填充。
七.告訴用戶要做什么
每個按鈕應該包括一個文本塊,因為你至少需要一個版塊告訴用戶該按鈕是做什么用的。你應該保持語言簡短和簡單,它應該匹配網站設計其余部分的語調和主題。
然后,就是履行承諾的過程了。下一個彈出的東西應該告訴用戶他們已經到達預期的目的地。無論是提交表單,進行購買還是只是移動到另一個鏈接,用戶應該通過與按鈕交互來獲得期望的結果。(如果沒有,請確保在反饋回路中顯示錯誤,以便你知道網站設計中需要進行哪些更正。)
按鈕消息的示例包括:
· 點擊這里;
· 立即創建帳戶;
· 免費試用;
· 添加到購物車;
· 閱讀更多。
八.給按鈕一個高度的視覺體驗的重要性
大多數網頁設計都充滿了小的ui元素。我們經常發生的一個錯誤是,直到網站設計項目接近完成時,我們才重新回到這些元素的設計上。
不要陷入這種危險的情況。
你要保證在你的網頁設計中,按鈕應該看起來像個按鈕!設計中的任何其他東西都不應該具有與按鈕相同的形狀,顏色和視覺重量。他們需要不同。考慮為大于設計中任何其他類似元素的按鈕創建樣式,或者使用僅適用于按鈕的顏色。這些技術可以幫助使按鈕看起來特別,并強調其使用。
總結
通過上面的幾個提示,你開始重新思考為你的網頁設計更新按鈕設計了嗎?你認為你可以創造更好的樣式鼓勵用戶點擊嗎?
大膽的嘗試上面的其中一些提示,同時注意分析你的網站設計,以準確地了解你的用戶群響應的設計更改。
成都創新互聯科技網站制作我們更專業! 網址:m.newbst.com 聯系電話:135-1821-9792
新聞名稱:網站網頁中按鈕設計的注意知識點
分享路徑:http://m.newbst.com/news7/106557.html
成都網站建設公司_創新互聯,為您提供移動網站建設、網站內鏈、標簽優化、動態網站、企業建站、微信小程序
廣告
聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源:
創新互聯