旗下產(chǎn)業(yè): A產(chǎn)業(yè)/?A實習(xí)/?A計劃
全國統(tǒng)一咨詢熱線:010-5367 2995
首頁 > 熱門文章 > UI設(shè)計 > UI設(shè)計中按鈕設(shè)計指南

UI設(shè)計中按鈕設(shè)計指南

時間:2020-08-20來源:m.5wd995.cn點擊量:作者:Gella
時間:2020-08-20點擊量:作者:Gella

  一天,領(lǐng)導(dǎo)丟過來個需求,要求改一下頁面上的一個按鈕。我想了想,按鈕簡單啊,很快就畫好發(fā)過去了,沒想到被領(lǐng)導(dǎo)打回來說不行!
 

  我看著自己做的按鈕,一臉茫然,這個按鈕飽滿誘人還亮晶晶的,怎么就不行了呢?
 

  是不是初入職場的你也遇到過類似的問題呢,今天AAA教育郭老師就針對UI設(shè)計中按鈕設(shè)計指南進行簡單說明,希望能幫助到大家。

 



 

  一、按鈕的設(shè)計要點
 

  1.1、按鈕的設(shè)計尺寸
 

  根據(jù) iOS 和 Android 給出的建議,在界面設(shè)計中,按鈕尺寸至少高于 5.5 毫米(36 pt),否則用戶點擊時會較為困難;iOS 提出的44 pt,Android 提出 48/56 pt,都是用于特定場景下,具體情況還需具體分析;
 

  按鈕尺寸一般有2種設(shè)計形式:
 

  (1)按鈕長度固定,文字長度變化
 

  (2)按鈕長度根據(jù)文字長短而變化,這種情況文字距離按鈕上下左右邊距一般成一定比例關(guān)系

 



 

  1.2、按鈕的形狀樣式
 

  (1)按鈕形狀:按鈕設(shè)計時,需要根據(jù)產(chǎn)品屬性和界面風(fēng)格設(shè)計合適的形式,按鈕形狀主要有直角、小圓角、全圓角三種樣式。

 



 

  直角按鈕:直角具有嚴謹、力量、高端的特點。適用于金融類、奢侈品類產(chǎn)品中,給人嚴謹安全、高端的感覺,符合產(chǎn)品調(diào)性。例如京東金融
 

  小圓角按鈕:小圓角具有穩(wěn)定、中性的感覺。適用于用戶跨度較大的常規(guī)類產(chǎn)品中,例如微信、滴滴。
 

  全圓角按鈕:全圓角具有活潑、年輕、安全的特點。適用于兒童類、年輕化、娛樂類、購物類的產(chǎn)品中,具有親和力,拉近與用戶之間的距離。例如淘寶、京東、愛奇藝。

 



 

  (2)按鈕樣式:按鈕樣式主要分為面形、線性、文字加圖標(biāo)、文字按鈕等,視覺優(yōu)先級:面性>線性>文字

 



 

  1.3按鈕的狀態(tài)變化
 

  在界面設(shè)計中需要考慮按鈕不同狀態(tài)的設(shè)計,從而提高用戶操作流暢度。移動端常用的按鈕可以分為正常狀態(tài)、按壓狀態(tài)、禁用狀態(tài)三種。

 



 

  其中,正常狀態(tài)展示的是APP的主色;按壓狀態(tài)在正常態(tài)的基礎(chǔ)上疊加15%不透明度的黑色#000000蒙版;禁用狀態(tài)是設(shè)置灰色或者將正常狀態(tài)設(shè)置45%不透明度。

 



 

  通過上圖的對比可以發(fā)現(xiàn),都是不可點擊,純灰色按鈕更像是禁止且不會被可用的狀態(tài)。而使用品牌色,降低不透明度,可加強用戶對該產(chǎn)品按鈕的認知。且暗示用戶該按鈕滿足條件即可被點擊,所以個人覺得第二種方案會更合理。
 

  另外,根據(jù)現(xiàn)在網(wǎng)絡(luò)速度的發(fā)達,按壓狀態(tài)慢慢被忽略。
 

  1.4提供恰當(dāng)?shù)姆答?br />  

  當(dāng)用戶點擊按鈕時,他們希望界面有恰當(dāng)?shù)姆答?。如果沒有任何反饋,用戶會以為系統(tǒng)沒有收到他們的操作,然后就會重復(fù)多次點擊。這種行為常常導(dǎo)致多個不必要的操作。
 

  1.5多個按鈕位置擺放
 

  從產(chǎn)品需求來說,要根據(jù)具體頁面的業(yè)務(wù)需求而定,比如設(shè)計一個彈窗的關(guān)閉按鈕,如果不希望用戶太快的關(guān)閉彈窗,最好放在相對邊緣的角落;如果希望用戶閱讀完內(nèi)容后關(guān)閉,則應(yīng)放置在內(nèi)容結(jié)尾處,方便關(guān)閉。
 

  總的來說,按鈕的位置要根據(jù)具體的需求來擺放,這里記住一點,根據(jù)用戶右手操作習(xí)慣,一般最重要的按鈕會放在最右邊,提高操作效率。
 

  二、按鈕功能類型及使用
 

  按鈕的功能類型往往決定了一個按鈕的設(shè)計方式是需要強調(diào)還是需要弱化;文案是需要強引導(dǎo),還是直接闡述功能;按鈕上放不放圖標(biāo)等。按鈕根據(jù)功能的不同,可以分為不同的類型,主要有行為召喚按鈕、懸浮按鈕、命令按鈕、開關(guān)按鈕等。
 

  2.1.行為召喚按鈕
 

  行為召喚(CTA)按鈕:通過設(shè)計誘導(dǎo)或激勵用戶點擊, 從而提高產(chǎn)品的轉(zhuǎn)化率。例如立即購買、訂閱關(guān)注、利益誘導(dǎo)等。
 

  (1)誘導(dǎo)購買
 

  當(dāng)行為召喚的目的是誘導(dǎo)購買時,按鈕的設(shè)計從顏色、形狀、樣式上都需要突出。讓用戶進來第一眼就能知道該按鈕的用途。如下圖所示:

 



 

  以餓了么為例,該按鈕的顏色采用綠色色塊,同時加入購物箱的元素,配上小紅點,能夠清晰的給用戶傳遞出可點擊部分有去結(jié)算、購物箱。另外加入價格誘導(dǎo),讓你可直觀看到優(yōu)惠了多少錢,促使你進一步操作。
 

  以淘寶詳情為例,該按鈕是一個組合按鈕,由加入購物車和立即購買以及店鋪、客服、收藏組成,不管從顏色、形狀、樣式都能夠讓我們快速地注意到。
 

  (2)訂閱關(guān)注
 

  當(dāng)行為召喚的目的是訂閱關(guān)注時,在設(shè)計時根據(jù)產(chǎn)品目的判斷是誘導(dǎo)用戶訂閱關(guān)注重要,還是讓用戶閱讀內(nèi)容重要,來設(shè)計按鈕大小、樣式等,如下圖所示:

 



 

  當(dāng)訂閱關(guān)注重要時,按鈕的設(shè)計需要強化處理,當(dāng)內(nèi)容重要時,按鈕的設(shè)計需要弱化處理。
 

  以大眾點評和圖蟲為例,大眾點評的頁面是以訂閱關(guān)注為主,所以按鈕加了描邊樣式,而圖蟲很明顯是以內(nèi)容為主的界面,在設(shè)計時直接弱化了按鈕形式,讓按鈕和整個界面相融合,另外按鈕設(shè)計的原則是讓其看上去像按鈕,因此當(dāng)按鈕只是文字時可以加圖標(biāo)進行引導(dǎo),也可以加入淺色背景進行突出。
 

  2.2懸浮按鈕
 

  懸按鈕浮是 Android 應(yīng)用中最常見的一個控件。不過隨著Android和iOS規(guī)范的不斷融合,在iOS中也經(jīng)常會看到各種各樣的懸浮按鈕。懸浮按鈕經(jīng)常采用顯眼的顏色或加投影的方式來設(shè)計,以吸引用戶的注意力。如下圖所示:

 



 

  以豆瓣和騰訊視頻為例,懸浮按鈕在頁面的右下角出現(xiàn),和界面結(jié)合很容易看出是創(chuàng)建內(nèi)容的意思。
 

  2.3.命令按鈕
 

  命令按鈕指該按鈕具有明確的指令,多出現(xiàn)在彈框中,一般分為一個文字命令或2個文字命令。其要求是文字語義要明確,同時根據(jù)用戶的操作習(xí)慣,一般遵循"左回退右行進"的設(shè)計原則。如下圖所示:

 



 

  左圖是京東金融退出的確認頁面,將確定按鈕做了視覺突出,右圖是同程旅游訂單返回頁面,需要注意的是,這里將繼續(xù)預(yù)訂做了視覺突出并放在右側(cè),跟我們平時習(xí)慣的左回退,右行進操作相反,我想這是因為這里的業(yè)務(wù)目標(biāo)是想讓用戶繼續(xù)下單。
 

  2.4.開關(guān)按鈕
 

  開關(guān)按鈕也是我們很常見的一個組件。表示兩種相互對立的狀態(tài)間的切換,多用于表示功能的開啟和關(guān)閉。當(dāng)按鈕開啟后可能還會帶來其他的相應(yīng)操作。開關(guān)按鈕最常見的就是手機設(shè)置中,但是也有很多APP將其用到界面中使用。如下圖所示:

 



 

  以同程旅游和驢媽媽為例,它們在提交訂單頁面時都采用了開關(guān)按鈕,這種開關(guān)按鈕還可以做點擊展開的操作來增加更多的功能內(nèi)容。
 

  三、總結(jié)
 

  一、按鈕的設(shè)計要點:尺寸、形狀樣式、狀態(tài)變化、恰當(dāng)?shù)姆答?、多個按鈕位置擺放
 

  二、按鈕的功能類型:召喚按鈕、懸浮按鈕、命令按鈕、開關(guān)按鈕
 

  好了,以上就是今天分享的內(nèi)容,因此,您現(xiàn)在已經(jīng)了解了與UI設(shè)計師的工作相關(guān)的主要技能。如果您想了解更多信息,請訪問AAA教育,包含有關(guān)在該領(lǐng)域工作的更多相關(guān)文章。



 

預(yù)約申請免費試聽課

填寫下面表單即可預(yù)約申請免費試聽!怕錢不夠?可先就業(yè)掙錢后再付學(xué)費! 怕學(xué)不會?助教全程陪讀,隨時解惑!擔(dān)心就業(yè)?一地學(xué)習(xí),可推薦就業(yè)!

?2007-2021/北京漫動者教育科技有限公司版權(quán)所有
備案號:京ICP備12034770號

?2007-2022/ m.5wd995.cn 北京漫動者數(shù)字科技有限公司 備案號: 京ICP備12034770號 監(jiān)督電話:010-53672995 郵箱:bjaaa@aaaedu.cc

京公網(wǎng)安備 11010802035704號

網(wǎng)站地圖