網頁制作如何做好按鈕設計

按鈕設計看似簡單，只需要畫個矩形框然后填色即可，但是在設計時根據按鈕的功能不同，設計方式也有差異，另外按鈕的一些設計細節(jié)很容易被忽略。本文主要將從按鈕功能類型和設計要點兩個方面進行分析，從而對按鈕設計進行全面的了解。
一、按鈕功能類型
按鈕功能類型主要包括行為召喚按鈕、表格按鈕、標簽按鈕、命令按鈕、懸浮按鈕、開關按鈕。
1. 行為召喚按鈕
行為召喚（CTA）按鈕其目的是通過設計誘導或激勵用戶點擊按鈕，從而達到產品的目的。主要包括誘導購買、訂閱關注、利益誘導、文字誘導四種。
1）誘導購買
當行為召喚的目的是誘導購買時，按鈕的設計不管從顏色、形狀、樣式都需要突出。讓按鈕看上去可點擊，讓用戶進來第一眼就能知道該按鈕的用途，如下圖所示。

美團外賣的結算按鈕的顏色采用黑黃對比、形狀采用具有親和力的圓角，在樣式上加入投影同時加入送餐員的元素，配上小紅點，另外加入價格誘導，讓你可直觀看到優(yōu)惠了多少錢，促使你進一步操作。
淘寶詳情的加入購物車和馬上搶是一個組合按鈕，作為行為召喚按鈕我們可以明確的看到，不管從顏色、形狀、樣式都能夠讓我們快速注意到。
2）訂閱關注
當行為召喚的目的是訂閱關注時，其重要程度相比誘導購買低很多，但是在設計時我們仍然需要考慮一個問題，是用戶關注更重要還是用戶閱讀內容更重要。當內容重要時，按鈕的設計需要弱化處理，比如優(yōu)酷星球；當點擊關注重要時，按鈕的設計需要強化處理，比如土豆視頻，如下圖所示。
優(yōu)酷的星球主要引導用戶去閱讀內容，感興趣你就關注，因此在設計時對關注按鈕進行了弱化處理，讓按鈕和界面融合。
土豆視頻關注界面的目的就是引導用戶關注。因此按鈕設計較為明顯，采用黃色填充加圖標引導，在視覺上和產品內容形成強烈對比。
3）利益誘導
當行為召喚的目的是利益誘導時，可以考慮顏色、形狀、加入圖標、誘導文字等設計方法引導用戶點擊，如下圖所示。
大眾點評領獎按鈕明顯比賺積分的層級高，因此為了突出領獎按鈕，采用了色塊設計的樣式，同時賺積分按鈕采用描邊設計進行弱化處理。
騰訊doki打榜頁面沖榜的重要層級高，因此在設計時不僅采用了色塊、加入動效圖標、同時還加入了誘導文字，讓按鈕更明顯同時誘導用戶點擊，其他按鈕則采用描邊樣式弱化處理。
4）文字誘導
文字誘導簡單來說就是通過文字，誘導用戶進行下一步操作，多用于空頁面、活動頁面中，因此在設計時采用簡單的色塊填充即可，如果該頁面為活動頁面也可增加漸變或投影樣式，讓按鈕更有空間感，進而突出按鈕，如下圖所示。
得到的學習計劃界面為空時，為了促進用戶進行下一步操作，它的按鈕文字“開始制定學習計劃”直接誘導用戶制定，同時其按鈕采用重要程度較高的色塊+投影的方式，誘導用戶點擊。
大眾點評我的攻略界面為空時，為了讓用戶創(chuàng)建攻略，它的按鈕文字“我也要創(chuàng)建攻略”直接誘導用戶創(chuàng)建，同時其按鈕采用漸變填充的方式，誘導用戶點擊。
2. 懸浮按鈕
懸按鈕浮是Android應用中最常見的一個控件。不過隨著Android和iOS規(guī)范的不斷融合，在iOS中也經常會看到各種各樣的懸浮按鈕。在設計上懸浮按鈕應該采用顯眼的顏色，以抓住用戶的注意力。同時它應該是積極正向的交互，比如創(chuàng)建、分享、探索等，如下圖所示。
UC瀏覽器的懸浮按鈕采用藍色背景和添加圖標，具有很強的提示作用，點擊按鈕即可呼出對應的發(fā)布圖文或者視頻的功能。
3. 標簽按鈕
標簽按鈕往往呈多個出現。在使用時可以將他看成一種篩選條件，采用該設計方式可減少用戶操作步驟，提高操作效率。不過標簽的重要程度仍然較低，在設計時需要弱化處理，如下圖所示。
支付寶投保頁面，為了幫助用戶快速做出選擇，采用了標簽的設計方式，由于其重要程度不及我要投保高，因此在設計時默認用的描邊處理；選中采用較淺的色塊。
轉轉產品列表頁，篩選條件下方也采用了標簽設計，由于用戶主要目的還是瀏覽商品，因此標簽按鈕樣式默認采用淺灰色，選中效果為較淺的色塊加描邊。
4. 表格按鈕
表格按鈕是由一個白色網格加文字組成，從視覺上看和頁面融為一體，特別不突出。因此多在個人中心設置頁面想要弱化按鈕的情況使用，如下圖所示。
微信設置界面切換賬號和退出登錄由于不是核心操作按鈕，同時為了和界面表格協調，設計時采用表格按鈕將其弱化處理。
淘票票影院介紹頁面底部設置了給影院提建議和信息糾錯，很明顯不需要引導用戶操作，設計時采用表格按鈕將其弱化處理。
5. 開關按鈕
開關按鈕是兩種相互對立狀態(tài)間的切換，多用于功能的開啟和關閉。當按鈕開啟后可能還會帶來其他的相應操作。開關按鈕多用在設置界面，但是也有很多APP將其用到界面中使用，如下圖所示。
美團外賣提交訂單界面中的號碼保護就采用了開關按鈕，相比其他滑動選擇的交互狀態(tài)來說，開關按鈕無意可以減少操作步驟，提高操作效率。
小豬短租的提交訂單界面中是否需要發(fā)票也采用了開關按鈕，當開啟按鈕會展開提示你去填寫信息，當關閉按鈕提示信息隱藏，相比于其他選擇控件，這里用開關按鈕更為合適。
二、按鈕設計要點
上面總結了五大功能按鈕的表現形式和使用場景，當然要設計出一個引導性好的按鈕，我們還需要掌握一些細節(jié)，比如顏色、形狀、狀態(tài)、位置等。
1. 顏色
顏色是最容易感知到的對比方式，不同的顏色會給用戶不一樣的心理預期，在設計時按鈕顏色主要有主題色、強調色、輔助色。主題色多用于需要強調的行為召喚按鈕、懸浮按鈕、開關按鈕中；強調色多用于需要拉開主次關系的按鈕組中，一般采用主題色的對比色彩或者鄰近色；輔助色多用于默認狀態(tài)或不可點擊的狀態(tài)中，如下圖所示。
Keep首頁的查看計劃按鈕直接采用主題色，不僅可以起到很好的強調作用，同時和界面風格也比較協調；UC瀏覽器小視頻的我來拍按鈕采用了鄰近色綠色漸變來強調，引導用戶拍攝小視頻。天貓購物選擇尺碼標簽按鈕默認狀態(tài)采用灰色，突出當前選中狀態(tài)。
2. 形狀
在按鈕設計時，需要根據整個界面風格設計合適的按鈕，按鈕樣式主要有直角、小圓角、全圓角、異形四種樣式。

直角的含義：嚴謹、力量、高端。適用于金融類、奢品類產品中，讓產品給人嚴謹安全、高端的感覺。比如寺庫的按鈕設計。
小圓角的含義：穩(wěn)定、中性。適用于用戶跨度較大的常規(guī)類產品中，比如微信的按鈕設計。
全圓角的含義：活潑、年輕、安全。適用于兒童類、年輕化、娛樂類、購物類的產品中，提升親和力，拉近用戶的距離。比如土豆的按鈕設計。
異形按鈕的含義：不穩(wěn)定、活潑、另類。適用于需要用戶做出選擇的場景中，比如招商銀行話題PK的按鈕設計。
寺庫奢侈品類電商，它的按鈕采用直角設計，剛好可體現奢侈品的高端性；微信的用戶群體上到七八十歲，下到幾歲其年齡范圍廣，因此采用穩(wěn)重的小圓角較為穩(wěn)妥。土豆短視頻用戶群體較為年輕活潑，因此采用全圓角較為適合；招商銀行話題PK采用異形的設計，會給用戶不穩(wěn)定和另類的感覺，從而引導用戶參與。
3.狀態(tài)
在部分界面設計中需要考慮按鈕的狀態(tài)設計，從而提高用戶操作流暢度。移動端完整的系統(tǒng)按鈕可以分為正常狀態(tài)、按壓狀態(tài)、禁用狀態(tài)。

其中，正常狀態(tài)和加載狀態(tài)展示的是APP的主色；按壓狀態(tài)在正常態(tài)的基礎上疊加15%的黑色；禁用狀態(tài)一般是灰色或者將正常態(tài)降低45%的透明度，該狀態(tài)多用于提交表單按鈕，比如登陸注冊、轉賬等，如下圖所示。
京東金融轉賬頁面，當未輸入轉賬金額時，按鈕禁用為灰色，當輸入金額時按鈕為正常狀態(tài)，在操作中大家發(fā)現京東金融沒有按壓狀態(tài)，這是因為隨著網絡的發(fā)展，寬帶速度越來越高，按壓狀態(tài)顯得沒有必要。
4.位置
按鈕位置往往對主操作按鈕較為重要，在設計時需要考慮以引導用戶、方便用戶點擊為目的。主操作按鈕的主要主要有三種，即固定在底部、頁面跟隨、將希望用戶操作的按鈕置于按鈕組右側。
根據費茨定律可知，按鈕位置越近用戶所需的時間就越短，因此Keep的開通會員按鈕置于底部離用戶手指最近。
餓了么的新增地址界面按鈕跟隨在信息后面，用戶看完信息即可點擊保存，需要注意當表單信息較多時，也推薦采用固定到底部的方式減短用戶操作成本。
淘寶詳情的立即購買按鈕置于界面右側，其一是為了視覺平衡，其二是人的使用習慣是先點右側按鈕。
三、畫重點
1.當行為召喚的目的是誘導購買時，按鈕的設計不管從顏色、形狀、樣式都需要突出。讓按鈕看上去可點擊，讓用戶進來第一眼就能知道該按鈕的用途。
2.當行為召喚的目的是點擊按鈕為主時，按鈕需要強調處理，比如采用主題色、強調色、添加圖標等方式；當目的是瀏覽內容為主時，按鈕可弱化處理，比如按鈕采用淺色、灰色。
3.提交表單按鈕可設計按鈕正常、禁用狀態(tài)，避免用戶錯誤操作。

4.將主操作按鈕固定在界面的底部，按鈕組中希望用戶點擊的按鈕置于右側。

（鄭重聲明：本文版權歸原作者海鹽社風箏KK所有，轉載文章僅為傳播更多信息之目的，如有侵權，請聯系我們刪除；如作者信息標記有誤，請聯系我們修改。）

新聞名稱：網頁制作如何做好按鈕設計
文章網址：http://www.muchs.cn/news7/113557.html

成都網站建設公司_創(chuàng)新互聯，為您提供軟件開發(fā)、網頁設計公司、網站制作、網站排名、品牌網站建設、網站改版

廣告

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