激情六月丁香婷婷|亚洲色图AV二区|丝袜AV日韩AV|久草视频在线分类|伊人九九精品视频|国产精品一级电影|久草视频在线99|在线看的av网址|伊人99精品无码|午夜无码视频在线

高校合作1：010-59833514 ?咨詢電話：400-810-1418 服務(wù)與監(jiān)督電話：400-810-1418轉(zhuǎn)接2

按鈕設(shè)計(jì)的7條基本規(guī)則【新易設(shè)計(jì)坊】

發(fā)布時(shí)間：2024-04-03 12:56:37 瀏覽量：264次


按鈕是交互設(shè)計(jì)的基本元素。它們?cè)谟脩襞c系統(tǒng)之間的對(duì)話中起主要作用。在本文中，我將回顧創(chuàng)建有效按鈕所需了解的七個(gè)基本原則。

1.使按鈕看起來(lái)像按鈕

與用戶界面進(jìn)行交互時(shí)，用戶需要立即知道什么是“可點(diǎn)擊的”和什么不是。設(shè)計(jì)中的每個(gè)項(xiàng)目都需要用戶努力解碼。通常，用戶解碼UI所需的時(shí)間越長(zhǎng)，對(duì)他們的可用性就越差。

但是用戶如何理解某個(gè)元素是否是交互式的？他們使用以前的經(jīng)驗(yàn)和視覺(jué)指示符來(lái)闡明UI對(duì)象 的含義。這就是為什么使用適當(dāng)?shù)囊曈X(jué)指示符（例如大小，形狀，顏色，陰影等）以使元素看起來(lái)像一個(gè)按鈕如此重要的原因。視覺(jué)能持有必要的信息價(jià)值-他們協(xié)助創(chuàng)造適宜性的界面。

不幸的是，在許多接口中，交互性的指示性很弱，需要交互作用。結(jié)果，它們有效地降低了可發(fā)現(xiàn)性。

如果缺少明確的交互功能，并且用戶為“可單擊”和“不可單擊”之間的掙扎而掙扎，那么設(shè)計(jì)的出色程度將無(wú)關(guān)緊要。如果他們發(fā)現(xiàn)它很難使用，他們會(huì)發(fā)現(xiàn)它令人沮喪并且最終不是很有用。

對(duì)于移動(dòng)用戶而言，符號(hào)不足是一個(gè)更為嚴(yán)重的問(wèn)題。為了了解單個(gè)元素是否是交互式的，桌面用戶可以在元素上移動(dòng)光標(biāo)并檢查光標(biāo)是否更改了其狀態(tài)。移動(dòng)用戶沒(méi)有這樣的機(jī)會(huì)。要了解某個(gè)元素是否是交互式的，用戶是否必須點(diǎn)擊它-沒(méi)有其他方法可以檢查交互性。

不要以為您的用戶界面中的某些東西對(duì)您的用戶是顯而易見的

在許多情況下，設(shè)計(jì)人員有意不將按鈕標(biāo)識(shí)為交互元素，因?yàn)樗麄冋J(rèn)為交互元素對(duì)用戶是顯而易見的。在設(shè)計(jì)接口時(shí)，應(yīng)始終牢記以下規(guī)則：您解釋可點(diǎn)擊性指示符的能力與用戶的理解力不同，因?yàn)槟雷约涸O(shè)計(jì)中的每個(gè)元素打算做什么

以下是大多數(shù)用戶熟悉的一些按鈕示例：

  • 帶有方形邊框的填充按鈕
  • 圓角填充按鈕
  • 陰影填充按鈕
  • 幽靈按鈕

在所有這些示例中，“帶陰影的填充按鈕”設(shè)計(jì)對(duì)于用戶來(lái)說(shuō)是最清晰的。當(dāng)用戶看到物體的尺寸時(shí)，他們立即知道可以按下物體。

不要忘記空白

不僅按鈕本身的視覺(jué)屬性很重要。按鈕附近的空白量使用戶更容易（或更難）理解它是否是交互式元素。在該示例中，下面的某些用戶可能會(huì)將重影按鈕與信息框混淆。

作為用戶，您無(wú)法分辨它是盒子還是按鈕。

2.將按鈕放在用戶希望找到它們的位置

按鈕應(yīng)位于用戶可以輕松找到或期望看到的位置。不要讓用戶尋找按鈕。如果用戶找不到按鈕，他們將不知道該按鈕存在。

盡可能使用傳統(tǒng)布局和標(biāo)準(zhǔn)UI模式

常規(guī)的按鈕放置可提高發(fā)現(xiàn)性。使用標(biāo)準(zhǔn)布局，用戶可以輕松理解每個(gè)元素的目的，即使它是沒(méi)有強(qiáng)符號(hào)的按鈕。將標(biāo)準(zhǔn)布局與干凈的視覺(jué)設(shè)計(jì)和充足的空白相結(jié)合，可使布局更易于理解。

提示：測(cè)試設(shè)計(jì)的可發(fā)現(xiàn)性。當(dāng)用戶首次導(dǎo)航到包含您希望他們執(zhí)行的某些操作的頁(yè)面時(shí)，應(yīng)該很容易為用戶找到合適的按鈕。

3. 標(biāo)記按鈕的功能

具有通用標(biāo)簽或誤導(dǎo)性標(biāo)簽的按鈕可能會(huì)使您的用戶感到沮喪。寫下按鈕標(biāo)簽，清楚地說(shuō)明每個(gè)按鈕的功能。理想情況下，按鈕的標(biāo)簽應(yīng)清楚地描述其動(dòng)作。

用戶應(yīng)該清楚地了解單擊按鈕時(shí)會(huì)發(fā)生什么。讓我舉一個(gè)簡(jiǎn)單的例子。想象一下，您不小心觸發(fā)了刪除操作，現(xiàn)在您看到以下錯(cuò)誤消息。

含糊不清的標(biāo)簽“確定”并沒(méi)有過(guò)多說(shuō)明操作按鈕。


目前尚不清楚“確定”和“取消”在此對(duì)話框中代表什么。大多數(shù)用戶會(huì)問(wèn)自己“當(dāng)我單擊“取消”時(shí)會(huì)發(fā)生什么？”

永遠(yuǎn)不要設(shè)計(jì)僅由“確定”和“取消”兩個(gè)按鈕組成的對(duì)話框或表單。

與其使用“確定”標(biāo)簽，不如使用“刪除”。這將使該按鈕對(duì)用戶的作用變得清晰。另外，如果“刪除”操作有潛在危險(xiǎn)，您可以使用紅色說(shuō)明這一事實(shí)。


“刪除”可清楚說(shuō)明按鈕對(duì)用戶的作用。

潛在危險(xiǎn)的操作“禁用卡”在此界面中以紅色顯示。圖片：運(yùn)動(dòng)

4.適當(dāng)調(diào)整按鈕大小

按鈕大小應(yīng)反映此元素在屏幕上的優(yōu)先級(jí)。大按鈕表示更重要的動(dòng)作。

優(yōu)先按鈕

使最重要的按鈕看起來(lái)像是最重要的按鈕。始終嘗試使主要操作按鈕更加突出。增大其大?。ㄍㄟ^(guò)增大按鈕的大小，可以使它對(duì)用戶顯得更重要），并使用對(duì)比色吸引用戶的注意力。

Dropbox使用大小和顏色對(duì)比將用戶的注意力集中在“免費(fèi)試用Dropbox Business” CTA按鈕上。

使按鈕對(duì)移動(dòng)用戶友好

在許多移動(dòng)應(yīng)用中，按鈕太小。這通常會(huì)導(dǎo)致用戶輸入錯(cuò)誤的情況。


左：適當(dāng)大小的按鈕。右：按鈕太小。圖片：蘋果


麻省理工學(xué)院觸摸實(shí)驗(yàn)室的研究發(fā)現(xiàn)，指墊的平均值在10-14mm之間，指尖的平均值在8-10mm之間。這使得10mm x 10mm成為最小的觸摸目標(biāo)尺寸。

圖片來(lái)源：uxmag

5.注意順序

按鈕的順序應(yīng)反映用戶與系統(tǒng)之間對(duì)話的性質(zhì)。問(wèn)問(wèn)自己，用戶期望在此屏幕上擁有什么順序并進(jìn)行相應(yīng)的設(shè)計(jì)。

用戶界面是與用戶的對(duì)話

例如，如何在分頁(yè)中對(duì)“上一個(gè)/下一個(gè)”按鈕進(jìn)行排序？邏輯上，使您向前移動(dòng)的按鈕應(yīng)位于右側(cè)，而使您向后移動(dòng)的按鈕應(yīng)位于左側(cè)

6.避免使用太多按鈕

這是許多應(yīng)用程序和網(wǎng)站的常見問(wèn)題。當(dāng)您提供太多選項(xiàng)時(shí)，您的用戶最終無(wú)能為力。在您的應(yīng)用或網(wǎng)站中設(shè)計(jì)頁(yè)面時(shí)，請(qǐng)考慮您希望用戶采取的最重要的操作。

按鈕太多

7.提供互動(dòng)的視覺(jué)或聽覺(jué)反饋

當(dāng)用戶單擊或點(diǎn)擊按鈕時(shí)，他們期望用戶界面將響應(yīng)并提供適當(dāng)?shù)姆答?。根?jù)操作類型，這可能是視覺(jué)或音頻反饋。當(dāng)用戶沒(méi)有任何反饋時(shí)，他們可能會(huì)認(rèn)為系統(tǒng)未收到命令，因此將重復(fù)執(zhí)行該操作。這種行為通常會(huì)導(dǎo)致多個(gè)不必要的操作。

為什么會(huì)這樣呢？作為人類，我們期望在與對(duì)象互動(dòng)后得到一些反饋。它可能是視覺(jué)，聽覺(jué)或觸覺(jué)反饋，任何承認(rèn)交互已被注冊(cè)的事實(shí)。

用戶界面提供印刷機(jī)已注冊(cè)的視覺(jué)反饋。圖片：瓦迪姆·格羅莫夫（Vadim Gromov）

對(duì)于某些操作，例如下載，不僅值得確認(rèn)用戶輸入，而且還需要顯示進(jìn)程的當(dāng)前狀態(tài)。

此按鈕轉(zhuǎn)換為進(jìn)度指示器，以演示操作的當(dāng)前狀態(tài)。圖片：科林·加文（Colin Garven）

結(jié)論

盡管按鈕是交互設(shè)計(jì)中的一個(gè)普通元素，但值得一提的是使按鈕盡可能地好。按鈕UX設(shè)計(jì)應(yīng)始終圍繞識(shí)別性和清晰度。

熱門課程推薦

熱門資訊

請(qǐng)綁定手機(jī)號(hào)

獲取驗(yàn)證碼
x

同學(xué)您好！

您已成功報(bào)名0元試學(xué)活動(dòng)，老師會(huì)在第一時(shí)間與您取得聯(lián)系，請(qǐng)保持電話暢通！
確定