盤(pán)點(diǎn)按鈕設(shè)計(jì)的常見(jiàn)的11個(gè)問(wèn)題

2 評(píng)論 12551 瀏覽 24 收藏 9 分鐘

按鈕是界面設(shè)計(jì)中的關(guān)鍵性元素,引導(dǎo)用戶進(jìn)行下一步交互。對(duì)話框、輸入框、工具欄等很多組件都需要按鈕。在這里,我們將盤(pán)點(diǎn)一下按鈕設(shè)計(jì)中最常遇到的問(wèn)題。

01 可以使用無(wú)邊框的按鈕嗎?

按鈕設(shè)計(jì)的基本準(zhǔn)則很簡(jiǎn)單——讓按鈕看起來(lái)像按鈕。邊框加強(qiáng)了傳統(tǒng)按鈕的感覺(jué),并為用戶創(chuàng)建了引人注目的目標(biāo)。

如果沒(méi)有邊框,元素看起來(lái)更像是一個(gè)鏈接而不是按鈕,所以在可選擇的情況下,使用帶邊框的設(shè)計(jì)會(huì)更安全。

02 應(yīng)該為按鈕選擇什么顏色?

顏色作為視覺(jué)語(yǔ)言,是與用戶進(jìn)行交流的重要組成部分。選擇顏色時(shí),需要記住以下幾點(diǎn):

  • 色彩鮮明的按鈕更容易被發(fā)現(xiàn)。在Gmail界面中“發(fā)送”按鈕會(huì)立即吸引用戶的注意。

  • 顏色強(qiáng)調(diào)了動(dòng)作的本質(zhì)。可以通過(guò)顏色的常見(jiàn)含義來(lái)確定選擇。對(duì)于可能存在危險(xiǎn)的操作(例如刪除用戶信息),則選擇紅色。

無(wú)論選擇哪種顏色,都要確保讓使用產(chǎn)品的用戶能夠理解這些顏色的含義。

03 使用圓形還是方形的按鈕?

圓形按鈕對(duì)用戶來(lái)說(shuō)有兩個(gè)優(yōu)點(diǎn):

  • 圓形在視覺(jué)上更討人喜歡。人們會(huì)很自然地避開(kāi)鋒利的物體,例如削尖的鉛筆,鋒利的針等物體。
  • 圓形按鈕將用戶的注意力指向了按鈕中心,即文本標(biāo)簽所在的位置,因此用戶更有可能閱讀標(biāo)簽。

另外在設(shè)計(jì)時(shí),要根據(jù)產(chǎn)品整體的視覺(jué)形式來(lái)選擇合適的按鈕形狀。如果頁(yè)面中使用了很多方形的設(shè)計(jì),也應(yīng)該使用方形按鈕。

04 如何設(shè)計(jì)按鈕的尺寸大?。?/h2>

按鈕的目的是讓用戶能最大程度地減少錯(cuò)誤操作的風(fēng)險(xiǎn),輕松地與界面交互。

按鈕的尺寸要求:

  • 保證文本標(biāo)簽的易讀性和可讀性。(請(qǐng)檢查所選的字體在較小的屏幕上是否清晰可見(jiàn)!)
  • 讓按鈕易于點(diǎn)擊,小的觸摸目標(biāo)會(huì)增加錯(cuò)誤操作的風(fēng)險(xiǎn)。建議創(chuàng)建尺寸為9mm的控件,以便可以用手指準(zhǔn)確地敲擊它們。

05 使用有填充還是無(wú)填充按鈕?

近年來(lái),空心按鈕(Ghost buttons)變得很流行,常用于登錄頁(yè)面中。但在用戶體驗(yàn)方面,空心按鈕的視覺(jué)重量較小,吸引用戶注意力的效率要低很多。通常填充按鈕由于具有更高的色彩對(duì)比度而用于強(qiáng)調(diào)。

有時(shí)可能需要這兩類(lèi)按鈕同時(shí)顯示,在這種情況下,填充按鈕吸引最多的注意力,作為主要CTA(即行為召喚,設(shè)計(jì)師有意識(shí)地通過(guò)設(shè)計(jì)引導(dǎo)用戶執(zhí)行特定操作,諸如點(diǎn)擊按鈕、留下聯(lián)絡(luò)方式或點(diǎn)擊購(gòu)買(mǎi))??招陌粹o起到輔助作用。

06 如何寫(xiě)出恰當(dāng)?shù)奈谋緲?biāo)簽?

文本標(biāo)簽描述了當(dāng)用戶點(diǎn)擊按鈕時(shí)將發(fā)生的操作。

建議使用動(dòng)詞來(lái)清楚地描述操作,例如當(dāng)用戶發(fā)送電子郵件時(shí),應(yīng)該使用的標(biāo)簽為“Send(發(fā)送)”而不是“Submit(提交)”。

07 按鈕中使用多少文本作為標(biāo)簽?

有時(shí)設(shè)計(jì)師會(huì)過(guò)分關(guān)注文本標(biāo)簽中的字?jǐn)?shù)。雖然更多文字可能意味著更清晰,但也可能造成視覺(jué)混亂。

這里注意兩點(diǎn):

  • 避免換行。為了保持文本的可讀性,文本標(biāo)簽應(yīng)該保持在一行上。

  • 按鈕容器的寬度不能小于文本。

08 文本標(biāo)簽可以全部大寫(xiě)嗎?

所有字母都大寫(xiě)會(huì)造成文本難以閱讀和理解,研究發(fā)現(xiàn),全部大寫(xiě)的標(biāo)題閱讀時(shí)間要延長(zhǎng)13%到20%。同時(shí)字母全部大寫(xiě)會(huì)讓用戶覺(jué)得被動(dòng)。

09 可以用圖標(biāo)替換文本嗎?

可以替換,但前提是該圖標(biāo)有一個(gè)通用的含義(如主頁(yè)、打印或購(gòu)物車(chē))。

如果用戶不清楚含義,可使用圖標(biāo)、文本相結(jié)合的方式來(lái)表達(dá)——圖標(biāo)用來(lái)吸引注意力,文本用來(lái)解釋按鈕的含義。

但不要在同一個(gè)按鈕中使用兩個(gè)圖標(biāo),這樣可能會(huì)讓人感到困惑。

10 需要在按鈕上使用陰影嗎?

雖然陰影能增加按鈕的突出度,凸顯重點(diǎn),但最終是否使用取決于界面的樣式。如果界面中大多數(shù)UI元素是平面的,可能就不需要在按鈕上使用陰影。

11?如何傳達(dá)按鈕狀態(tài)?

用戶不僅需要明白按鈕的操作,還需要了解按鈕的狀態(tài)。

定義按鈕的狀態(tài):

  • 正常(活動(dòng))?;顒?dòng)狀態(tài)是按鈕可點(diǎn)擊時(shí)的狀態(tài)。
  • 懸停(僅限桌面)。這個(gè)額外的狀態(tài)可以讓用戶明白某個(gè)元素是可交互的。
  • 按下。按鈕改變視覺(jué)形式來(lái)反饋點(diǎn)擊。
  • 已禁用。當(dāng)用戶沒(méi)有完成必要的操作時(shí),可以禁用該按鈕。

另外顏色和不透明度也可用于傳達(dá)狀態(tài)。

 

原文:https://uxplanet.org/11-questions-about-button-design-1bf68019b21d

作者:Nick Babich

譯者:Clippp,微信公眾號(hào):Clip設(shè)計(jì)夾。每周精選設(shè)計(jì)文章,專(zhuān)注分享關(guān)于產(chǎn)品、交互、視覺(jué)上的設(shè)計(jì)思考。

本文由 @Clippp 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)作者許可,禁止轉(zhuǎn)載。

題圖來(lái)自Unsplash,基于CC0協(xié)議

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 對(duì)于按鈕內(nèi)文案大小寫(xiě)規(guī)則,其實(shí)可以多看看,為何有大廠會(huì)進(jìn)行全字母大寫(xiě)

    來(lái)自廣東 回復(fù)
    1. ????

      來(lái)自山東 回復(fù)