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

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

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

直角的含義：嚴(yán)謹(jǐn)、力量、高端。適用于金融類、奢品類產(chǎn)品中，讓產(chǎn)品給人嚴(yán)謹(jǐn)安全、高端的感覺(jué)。比如寺庫(kù)的按鈕設(shè)計(jì)。
小圓角的含義：穩(wěn)定、中性。適用于用戶跨度較大的常規(guī)類產(chǎn)品中，比如微信的按鈕設(shè)計(jì)。
全圓角的含義：活潑、年輕、安全。適用于兒童類、年輕化、娛樂(lè)類、購(gòu)物類的產(chǎn)品中，提升親和力，拉近用戶的距離。比如土豆的按鈕設(shè)計(jì)。
異形按鈕的含義：不穩(wěn)定、活潑、另類。適用于需要用戶做出選擇的場(chǎng)景中，比如招商銀行話題PK的按鈕設(shè)計(jì)。
寺庫(kù)奢侈品類電商，它的按鈕采用直角設(shè)計(jì)，剛好可體現(xiàn)奢侈品的高端性；微信的用戶群體上到七八十歲，下到幾歲其年齡范圍廣，因此采用穩(wěn)重的小圓角較為穩(wěn)妥。土豆短視頻用戶群體較為年輕活潑，因此采用全圓角較為適合；招商銀行話題PK采用異形的設(shè)計(jì)，會(huì)給用戶不穩(wěn)定和另類的感覺(jué)，從而引導(dǎo)用戶參與。
3.狀態(tài)
在部分界面設(shè)計(jì)中需要考慮按鈕的狀態(tài)設(shè)計(jì)，從而提高用戶操作流暢度。移動(dòng)端完整的系統(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)多用于提交表單按鈕，比如登陸注冊(cè)、轉(zhuǎn)賬等，如下圖所示。
京東金融轉(zhuǎn)賬頁(yè)面，當(dāng)未輸入轉(zhuǎn)賬金額時(shí)，按鈕禁用為灰色，當(dāng)輸入金額時(shí)按鈕為正常狀態(tài)，在操作中大家發(fā)現(xiàn)京東金融沒(méi)有按壓狀態(tài)，這是因?yàn)殡S著網(wǎng)絡(luò)的發(fā)展，寬帶速度越來(lái)越高，按壓狀態(tài)顯得沒(méi)有必要。
4.位置
按鈕位置往往對(duì)主操作按鈕較為重要，在設(shè)計(jì)時(shí)需要考慮以引導(dǎo)用戶、方便用戶點(diǎn)擊為目的。主操作按鈕的主要主要有三種，即固定在底部、頁(yè)面跟隨、將希望用戶操作的按鈕置于按鈕組右側(cè)。
根據(jù)費(fèi)茨定律可知，按鈕位置越近用戶所需的時(shí)間就越短，因此Keep的開(kāi)通會(huì)員按鈕置于底部離用戶手指最近。
餓了么的新增地址界面按鈕跟隨在信息后面，用戶看完信息即可點(diǎn)擊保存，需要注意當(dāng)表單信息較多時(shí)，也推薦采用固定到底部的方式減短用戶操作成本。
淘寶詳情的立即購(gòu)買按鈕置于界面右側(cè)，其一是為了視覺(jué)平衡，其二是人的使用習(xí)慣是先點(diǎn)右側(cè)按鈕。
三、畫(huà)重點(diǎn)
1.當(dāng)行為召喚的目的是誘導(dǎo)購(gòu)買時(shí)，按鈕的設(shè)計(jì)不管從顏色、形狀、樣式都需要突出。讓按鈕看上去可點(diǎn)擊，讓用戶進(jìn)來(lái)第一眼就能知道該按鈕的用途。
2.當(dāng)行為召喚的目的是點(diǎn)擊按鈕為主時(shí)，按鈕需要強(qiáng)調(diào)處理，比如采用主題色、強(qiáng)調(diào)色、添加圖標(biāo)等方式；當(dāng)目的是瀏覽內(nèi)容為主時(shí)，按鈕可弱化處理，比如按鈕采用淺色、灰色。
3.提交表單按鈕可設(shè)計(jì)按鈕正常、禁用狀態(tài)，避免用戶錯(cuò)誤操作。

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

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

當(dāng)前名稱：網(wǎng)頁(yè)制作如何做好按鈕設(shè)計(jì)
鏈接分享：http://www.bm7419.com/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)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)