中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

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

2021-05-14    分類: 網(wǎng)站建設(shè)

按鈕設(shè)計(jì)看似簡(jiǎn)單,只需要畫個(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)第一眼就能知道該按鈕的用途,如下圖所示。

按鈕設(shè)計(jì)
美團(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)化處理,比如土豆視頻,如下圖所示。
按鈕設(shè)計(jì)
優(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)擊,如下圖所示。
按鈕設(shè)計(jì)
大眾點(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)而突出按鈕,如下圖所示。
按鈕設(shè)計(jì)
得到的學(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)建、分享、探索等,如下圖所示。
按鈕設(shè)計(jì)
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í)需要弱化處理,如下圖所示。
按鈕設(shè)計(jì)
支付寶投保頁(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è)計(jì)
微信設(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將其用到界面中使用,如下圖所示。
按鈕設(shè)計(jì)
美團(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)提示你去填寫信息,當(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)中,如下圖所示。
按鈕設(shè)計(jì)
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ì)合適的按鈕,按鈕樣式主要有直角、小圓角、全圓角、異形四種樣式。

按鈕設(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ì)。
按鈕設(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)。

按鈕設(shè)計(jì)
其中,正常狀態(tài)和加載狀態(tài)展示的是APP的主色;按壓狀態(tài)在正常態(tài)的基礎(chǔ)上疊加15%的黑色;禁用狀態(tài)一般是灰色或者將正常態(tài)降低45%的透明度,該狀態(tài)多用于提交表單按鈕,比如登陸注冊(cè)、轉(zhuǎn)賬等,如下圖所示。
按鈕設(shè)計(jì)
京東金融轉(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è)。
按鈕設(shè)計(jì)
根據(jù)費(fèi)茨定律可知,按鈕位置越近用戶所需的時(shí)間就越短,因此Keep的開(kāi)通會(huì)員按鈕置于底部離用戶手指最近。
餓了么的新增地址界面按鈕跟隨在信息后面,用戶看完信息即可點(diǎn)擊保存,需要注意當(dāng)表單信息較多時(shí),也推薦采用固定到底部的方式減短用戶操作成本。
淘寶詳情的立即購(gòu)買按鈕置于界面右側(cè),其一是為了視覺(jué)平衡,其二是人的使用習(xí)慣是先點(diǎn)右側(cè)按鈕。
三、畫重點(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)系我們修改。)

新聞名稱:網(wǎng)頁(yè)制作如何做好按鈕設(shè)計(jì)
文章網(wǎng)址:http://m.rwnh.cn/news7/113557.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供軟件開(kāi)發(fā)、網(wǎng)頁(yè)設(shè)計(jì)公司、網(wǎng)站制作、網(wǎng)站排名、品牌網(wǎng)站建設(shè)網(wǎng)站改版

廣告

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

外貿(mào)網(wǎng)站制作
九龙县| 西充县| 偃师市| 家居| 丁青县| 琼海市| 舒兰市| 忻州市| 平江县| 象州县| 滦平县| 灵武市| 尤溪县| 高淳县| 夹江县| 灵武市| 自治县| 潢川县| 搜索| 大化| 奉贤区| 泽库县| 通道| 来安县| 孟村| 定陶县| 长泰县| 岢岚县| 观塘区| 柳林县| 中牟县| 庆安县| 罗源县| 佛坪县| 平塘县| 凤城市| 安乡县| 宁明县| 云龙县| 深圳市| 广平县|