網(wǎng)頁制作如何做好按鈕設(shè)計(jì)

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

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

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

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

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

（鄭重聲明：本文版權(quán)歸原作者海鹽社風(fēng)箏KK所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如有侵權(quán)，請聯(lián)系我們刪除；如作者信息標(biāo)記有誤，請聯(lián)系我們修改。）

當(dāng)前名稱：網(wǎng)頁制作如何做好按鈕設(shè)計(jì)
鏈接分享：http://www.muchs.cn/news/113557.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供標(biāo)簽優(yōu)化、App設(shè)計(jì)、商城網(wǎng)站、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站內(nèi)鏈、建站公司

廣告

聲明：本網(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)