盤點按鈕設(shè)計常見的11個問題

按鈕是界面設(shè)計中的關(guān)鍵性元素,引導(dǎo)用戶進行下一步交互。對話框、輸入框、工具欄等很多組件都需要按鈕。

?在這里,我們將盤點一下按鈕設(shè)計中最常遇到的問題。

01.可以使用無邊框的按鈕嗎?

按鈕設(shè)計的基本準則很簡單——讓按鈕看起來像按鈕。邊框加強了傳統(tǒng)按鈕的感覺,并為用戶創(chuàng)建了引人注目的目標。

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

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

顏色作為視覺語言,是與用戶進行交流的重要組成部分。選擇顏色時要記住以下幾點:

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

顏色強調(diào)了動作的本質(zhì)。可以通過顏色的常見含義來確定選擇。對于可能存在危險的操作(例如刪除用戶信息),則選擇紅色。

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

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

圓形按鈕對用戶來說有兩個優(yōu)點:

圓形在視覺上更討人喜歡。人們會很自然地避開鋒利的物體,例如削尖的鉛筆,鋒利的針等物體。

圓形按鈕將用戶的注意力指向了按鈕中心,即文本標簽所在的位置,因此用戶更有可能閱讀標簽。

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

04.如何設(shè)計按鈕的尺寸大???

按鈕的目的是讓用戶能最大程度地減少錯誤操作的風險,輕松地與界面交互。

按鈕尺寸要求:

保證文本標簽的易讀性和可讀性。(檢查所選的字體在較小的屏幕上是否清晰可見!)

讓按鈕易于點擊,小的觸摸目標會增加錯誤操作的風險。建議創(chuàng)建尺寸為9mm的控件,以便可以用手指準確地敲擊它們。

05.使用有填充還是無填充按鈕?

近年來,空心按鈕(Ghost buttons)變得很流行,常用于登錄頁面中。但在用戶體驗方面,空心按鈕的視覺重量較小,吸引用戶注意力的效率要低很多。

通常填充按鈕由于具有更高的色彩對比度而用于強調(diào)。

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

06.如何寫出恰當?shù)奈谋緲撕灒?/b>

文本標簽描述了當用戶點擊按鈕時將發(fā)生的操作。

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

07.按鈕中使用多少文本作為標簽?

有時設(shè)計師會過分關(guān)注文本標簽中的字數(shù)。雖然更多文字可能意味著更清晰,但也可能造成視覺混亂。

這里注意兩點:

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

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

08.文本標簽可以全部大寫嗎?

所有字母都大寫會造成文本難以閱讀和理解,研究發(fā)現(xiàn),全部大寫的標題閱讀時間要延長13%到20%。同時字母全部大寫會讓用戶覺得被動。

09.可以用圖標替換文本嗎?

可以替換,但前提是該圖標有一個通用的含義(如主頁、打印或購物車)。

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

但不要在同一個按鈕中使用兩個圖標,這樣可能會讓人感到困惑。

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

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

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

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

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

正常(活動)?;顒訝顟B(tài)是按鈕可點擊時的狀態(tài)。

懸停(僅限桌面)。這個額外的狀態(tài)可以讓用戶明白某個元素是可交互的。

按下。按鈕改變視覺形式來反饋點擊。

已禁用。當用戶沒有完成必要的操作時,可以禁用該按鈕。

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


更多精選文章請關(guān)注公眾號:Clip設(shè)計夾

精彩推薦:

1、聊聊卡片式設(shè)計的運用

2、案例分析:柵格系統(tǒng)的布局設(shè)計

3、如何設(shè)計深色模式?這3點因素需要考慮

4、深度解析:服務(wù)藍圖的應(yīng)用邏輯

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容