超全面的按鈕設(shè)計(jì)指南
時(shí)間：2023-09-10 16:24:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)
時(shí)間：2023-09-10 16:24:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)
超全面的按鈕設(shè)計(jì)指南：按鈕在交互設(shè)計(jì)中是最常見(jiàn)的元素之一，它看起來(lái)似乎很容易。但是即便是這樣一個(gè)簡(jiǎn)單的設(shè)計(jì)元素也有很多細(xì)節(jié)需要在設(shè)計(jì)中考慮到。
這篇文章便會(huì)列舉出在為不同情景設(shè)計(jì)按鈕是你需要考慮到的細(xì)節(jié)。
5種按鈕類(lèi)型從按鈕的視覺(jué)樣式上，按鈕可以分為
- 凸起按鈕 - 帶有3D效果（比如，陰影，漸變或者高光）的矩形按鈕
- 扁平按鈕 - 和類(lèi)型1相反，不帶有任何3D效果的矩形按鈕
- 描邊按鈕 - 只有描邊效果沒(méi)有填色的矩形按鈕
- 文字按鈕 - 僅僅只有文字的按鈕
- 浮動(dòng)按鈕 - 由Google Material Design提出的浮在頁(yè)面最上層的圓形按
5種按鈕類(lèi)型
5個(gè)交互狀態(tài)不管在你的設(shè)計(jì)中你使用的是上面的哪種樣式，按鈕都始終要包括5個(gè)交互狀態(tài)，以便給使用者提供視覺(jué)上及時(shí)的反饋。這樣他們才能確認(rèn)產(chǎn)品有按照他們的預(yù)期在工作。
按鈕需要提供為這五種狀態(tài)提供視覺(jué)反饋：
正常，
懸浮，
按下，
加載和
禁用。5個(gè)交互狀態(tài)
不同場(chǎng)景中的按鈕設(shè)計(jì)前面我們說(shuō)到了按鈕的5種類(lèi)型和5個(gè)交互狀態(tài)，你可能會(huì)問(wèn)怎么才能設(shè)計(jì)出有效的按鈕呢？回答這個(gè)問(wèn)題之前，讓我們一起來(lái)定義一下所謂的有效的按鈕設(shè)計(jì)。
有效的按鈕會(huì)：
- 提供視覺(jué)幫助讓使用者意識(shí)到這是一個(gè)按鈕
- 幫助使用者了解它的意圖
- 為使用者設(shè)置合理的預(yù)期
對(duì)于不同的使用場(chǎng)景，有效也會(huì)有它獨(dú)特的詮釋
網(wǎng)頁(yè)表單中如何設(shè)計(jì)首要按鈕和次要按鈕很多時(shí)候頁(yè)面上會(huì)有不止一個(gè)按鈕，有些按鈕會(huì)幫助使用者完成他們想要完成的任務(wù)，這類(lèi)的按鈕我們稱(chēng)為首要按鈕，比如說(shuō)表單上面的提交按鈕，購(gòu)物網(wǎng)站中的結(jié)賬按鈕。次要按鈕則是那些不能幫助使用者完成首要任務(wù)，但是可以給他們提供其他的操作選項(xiàng)或者撤回他們之前的操作。
設(shè)計(jì)這類(lèi)按鈕是，你要確保：
- 首要按鈕和次要按鈕之間有明顯的視覺(jué)區(qū)別
- 首要按鈕能在周?chē)脑刂型怀?/li>
彈窗上如何設(shè)計(jì)按鈕模態(tài)彈窗打斷了使用者的流程，并讓他們?cè)谙到y(tǒng)提出的選項(xiàng)中做出選擇。設(shè)計(jì)社區(qū)已經(jīng)有很多關(guān)于在模態(tài)彈窗上面如何放置確認(rèn)（OK）和取消（Cancel）按鈕的爭(zhēng)論。各個(gè)平臺(tái)也有自己的準(zhǔn)則：
Windows把確認(rèn)按鈕放在取消按鈕之前，而Apple和Google都與之相反。
所以在為彈窗設(shè)計(jì)按鈕的時(shí)候你需要考慮到一下的細(xì)節(jié)：
- 設(shè)計(jì)APP時(shí)遵循平臺(tái)的準(zhǔn)則。設(shè)計(jì)網(wǎng)頁(yè)應(yīng)用時(shí)，應(yīng)該研究哪個(gè)平臺(tái)是產(chǎn)品目標(biāo)群體更加傾向的。
- 視覺(jué)上明顯區(qū)分出兩種按鈕
- 使用更加具體的按鈕文字，而不是”確認(rèn)“或是“好的”。
按鈕無(wú)障礙設(shè)計(jì)對(duì)比度對(duì)比度是按鈕上文字顏色亮度和背景顏色亮度的的比例。根據(jù)W3C的規(guī)范，對(duì)比度至少是4.5：1，以下的情況除外:
- 如果按鈕文本大小為18pt或大于18pt, 或者文本加粗且大小大于或等于14，對(duì)比度至少是3：1.
- 對(duì)于不能進(jìn)行交互的按鈕，沒(méi)有對(duì)比度的要求。
結(jié)論一個(gè)有效的按鈕，能讓使用者預(yù)測(cè)它的功能和重要性。一個(gè)有效的按鈕始終提供及時(shí)的視覺(jué)反饋當(dāng)你設(shè)計(jì)一個(gè)按鈕時(shí)可以對(duì)照下面的清單：- 使用者是否能辨別出這是個(gè)按鈕
- 按鈕是否在不同的交互狀態(tài)下包括不同的視覺(jué)效果
- 按鈕的文本是否簡(jiǎn)潔清晰
- 首要按鈕是否比其他的次要按鈕更明顯
- 按鈕的位置是否遵循了平臺(tái)的準(zhǔn)則
- 對(duì)比度是否達(dá)到了W3C的要求
在線咨詢(xún)