按鈕是互動(dòng)設(shè)計(jì)的常見(jiàn)元素。，是最重要的UI元素之一。在今天的文章中，我們將介紹您了解基本知識(shí)，以創(chuàng)建有效的按鈕操作來(lái)改善用戶(hù)體驗(yàn)。

1.使按鈕看起來(lái)像個(gè)"按鈕鏈接"

用戶(hù)如何理解元素是一個(gè)按鈕? 答案很簡(jiǎn)單:視覺(jué)提示可幫助人們確定可點(diǎn)擊性。 在可點(diǎn)擊元素上使用適當(dāng)?shù)囊曈X(jué)符號(hào)來(lái)使它們看起來(lái)像按鈕很重要。1.1形狀根據(jù)網(wǎng)站或應(yīng)用程序的風(fēng)格，基本可以確定按鈕的形狀。其中 矩形按鈕早已被引入數(shù)字世界，用戶(hù)也已經(jīng)非常熟悉。

當(dāng)然，您可以更具創(chuàng)意，并使用其他形狀(圓形，三角形或甚至自定義形狀)，但請(qǐng)記住，獨(dú)特的想法可能被證明有點(diǎn)冒險(xiǎn)。 您需要確保人們可以輕松識(shí)別每個(gè)不同形狀的按鈕。

無(wú)論您選擇何種形狀，請(qǐng)確保在整個(gè)界面控件中保持一致性，以便用戶(hù)能夠識(shí)別所有UI元素作為按鈕。為什么一致性如此重要? 因?yàn)橛脩?hù)會(huì)有意識(shí)無(wú)意識(shí)的記住細(xì)節(jié)。 例如，用戶(hù)將特定元素的形狀與“按鈕”相關(guān)聯(lián)。因此，一致性不僅有助于創(chuàng)造出美觀的設(shè)計(jì)，而且還為用戶(hù)提供了更加熟悉的體驗(yàn)。下圖顯示了這一點(diǎn)。 在應(yīng)用程序的一部分(例如系統(tǒng)工具欄)中使用三種不同的形狀不僅使用戶(hù)感到困惑，這是不正確的設(shè)計(jì)實(shí)踐。

創(chuàng)意沒(méi)有錯(cuò)，但是保持設(shè)計(jì)一致同樣重要。1.2陰影和亮點(diǎn)陰影是有價(jià)值的線(xiàn)索，告訴用戶(hù)他們正在尋找哪個(gè)UI元素。陰影使得元素脫離背景，使其容易識(shí)別為可點(diǎn)擊或可點(diǎn)擊的元素，因?yàn)槌霈F(xiàn)的對(duì)象看起來(lái)像被壓下的(點(diǎn)擊或點(diǎn)擊)。 即使是扁平的按鈕(幾乎平坦，準(zhǔn)確)，仍然有這些微妙的線(xiàn)索的地方。

如果一個(gè)按鈕投射一個(gè)微妙的陰影，用戶(hù)往往會(huì)明白元素是交互式的。

2.明確標(biāo)簽按鈕

避免用戶(hù)界面元素沒(méi)有明確的含義。 因此，UI中的每個(gè)按鈕都應(yīng)該有一個(gè)正確的標(biāo)簽或圖標(biāo)。2.1清除和標(biāo)記標(biāo)簽可操作的界面元素(例如按鈕)上的標(biāo)簽應(yīng)該總是綁定到用戶(hù)將執(zhí)行的操作。 當(dāng)用戶(hù)了解按鈕的動(dòng)作時(shí)，用戶(hù)會(huì)感到更舒服。 諸如“提交”之類(lèi)的模糊標(biāo)簽或像下面的示例中的抽象標(biāo)簽不能提供足夠的關(guān)于該操作的信息。

操作按鈕應(yīng)該確認(rèn)該任務(wù)是什么，以便用戶(hù)知道他們點(diǎn)擊該按鈕時(shí)會(huì)發(fā)生什么。 使用動(dòng)作動(dòng)詞來(lái)表示按鈕的作用很重要。 例如，如果用戶(hù)注冊(cè)了一個(gè)帳戶(hù)，則會(huì)顯示“創(chuàng)建帳戶(hù)”按鈕，告訴他們按下按鈕后會(huì)產(chǎn)生什么結(jié)果。 這個(gè)任務(wù)很清楚和具體。 這些明確的標(biāo)簽可以作為即時(shí)幫助，使用戶(hù)有信心選擇正確的操作。

3.放置用戶(hù)可以找到的按鈕

不要讓用戶(hù)尋找按鈕; 放置按鈕，用戶(hù)可以輕松找到它們或期望看到它們。3.1位置和順序如果您正在設(shè)計(jì)一個(gè)應(yīng)用程序，則在選擇適當(dāng)?shù)奈恢煤桶粹o順序時(shí)，應(yīng)遵循平臺(tái)GUI指南。 為什么? 因?yàn)樽裱脩?hù)期望的一致設(shè)計(jì)可以節(jié)省人們的時(shí)間。

在基于網(wǎng)絡(luò)的應(yīng)用程序的情況下，您應(yīng)該考慮哪個(gè)布局真的對(duì)您的用戶(hù)最有效。 確定這一點(diǎn)的正確方法是通過(guò)測(cè)試。如果您設(shè)計(jì)移動(dòng)導(dǎo)航，請(qǐng)注意按鈕位置的好做法。 文章底部導(dǎo)航設(shè)計(jì)的黃金規(guī)則涵蓋了這個(gè)主題。

4.使用戶(hù)輕松地與按鈕進(jìn)行交互

按鈕的大小和視覺(jué)反饋，在幫助用戶(hù)與他們交互方面發(fā)揮關(guān)鍵作用。4.1尺寸和填充色您應(yīng)該考慮一個(gè)按鈕與頁(yè)面上其他元素的關(guān)系有多大。 同時(shí)，您需要確保您設(shè)計(jì)的按鈕足夠大，以便人們進(jìn)行互動(dòng)。

當(dāng)點(diǎn)按作為您的應(yīng)用程序或站點(diǎn)的主要輸入方法時(shí)，您可以依靠MIT Touch Lab研究來(lái)選擇適當(dāng)?shù)陌粹o大小。 這項(xiàng)研究發(fā)現(xiàn)，手指墊的平均尺寸在10-14mm之間，指尖為8-10mm，使得10mm×10mm具有良好的最小觸摸目標(biāo)尺寸。 當(dāng)鼠標(biāo)和鍵盤(pán)是主要的輸入方法時(shí)，可以稍微減小按鈕測(cè)量以適應(yīng)密集的UI。

您應(yīng)該考慮按鈕元素的大小，以及可點(diǎn)擊元素之間的填充，因?yàn)樘畛溆兄诜蛛x控件，并為您的用戶(hù)界面提供足夠的呼吸空間。

4.2提供視覺(jué)反饋這個(gè)要求不是關(guān)于按鈕最初對(duì)用戶(hù)的看法; 這是關(guān)于與UI元素的交互經(jīng)驗(yàn)。 通常，按鈕不是單狀態(tài)對(duì)象。 它具有多狀態(tài)，并向用戶(hù)提供視覺(jué)反饋，以指示當(dāng)前狀態(tài)應(yīng)該是首要任務(wù)。

5.視覺(jué)突出顯示最重要的按鈕鏈接

確保設(shè)計(jì)強(qiáng)調(diào)主要或最突出的行動(dòng)。使用顏色和對(duì)比度來(lái)保持用戶(hù)對(duì)動(dòng)作的關(guān)注，并將按鈕置于用戶(hù)最有可能注意到的突出位置。5.1呼叫動(dòng)作按鈕重要按鈕(例如CTA)旨在指示用戶(hù)采取您希望采取的操作。 要?jiǎng)?chuàng)建一個(gè)有效的“號(hào)召性用語(yǔ)”按鈕，可以吸引用戶(hù)的注意力并引導(dǎo)他們點(diǎn)擊，您應(yīng)該使用與背景相對(duì)應(yīng)的高對(duì)比度的顏色，并將按鈕放置在用戶(hù)的路徑中。如果我們查看Gmail的UI，界面非常簡(jiǎn)單，幾乎是單色的，“發(fā)送”按鈕除外。 用戶(hù)一旦寫(xiě)完信息，就立即注意到這個(gè)漂亮的藍(lán)色按鈕。

同樣的規(guī)則適用于網(wǎng)站。 如果您看看下面的Behance示例，首先要注意的是“注冊(cè)”號(hào)召性用語(yǔ)按鈕。 在這種情況下，顏色和位置比文本更重要。

5.2主要和次要按鈕的視覺(jué)分析您可以通過(guò)彈窗和對(duì)話(huà)框中的按鈕找到另一個(gè)抓住用戶(hù)注意力的示例。 在主要和次要行動(dòng)之間進(jìn)行選擇時(shí)，視覺(jué)區(qū)別是幫助人們做出堅(jiān)實(shí)選擇的有用方法：與按鈕相關(guān)聯(lián)的主要積極動(dòng)作需要承載更強(qiáng)的視覺(jué)重量。 它應(yīng)該是視覺(jué)上主導(dǎo)的按鈕。次要?jiǎng)幼?例如“取消”或“返回”等選項(xiàng))應(yīng)具有最弱的視覺(jué)重量，因?yàn)闇p少次要?jiǎng)幼鞯囊曈X(jué)突出性可將潛在錯(cuò)誤的風(fēng)險(xiǎn)降至最低，并進(jìn)一步引導(dǎo)人們?nèi)〉贸晒Α?/p>

6.按鈕設(shè)計(jì)清單

為了確保您的按鈕設(shè)計(jì)適合您的用戶(hù)，您需要提出幾個(gè)問(wèn)題：用戶(hù)將您的元素標(biāo)識(shí)為按鈕嗎?想想設(shè)計(jì)如何提高交流能力。使按鈕看起來(lái)像一個(gè)按鈕(使用大小，形狀，陰影和顏色為此目的)。按鈕的標(biāo)簽是否提供了一個(gè)明確的信息，點(diǎn)擊后會(huì)發(fā)生什么?命名一個(gè)按鈕，解釋它的作用，而不是使用通用標(biāo)簽(如“OK”)往往更好。你的用戶(hù)可以輕松找到按鈕嗎? 在頁(yè)面上放置按鈕的位置與其形狀，顏色和標(biāo)簽一樣重要。考慮用戶(hù)通過(guò)頁(yè)面的路徑，并放置按鈕，用戶(hù)可以輕松找到它們或期望它們。如果您的視圖中有兩個(gè)或多個(gè)按鈕(例如對(duì)話(huà)框)，具有主要操作的按鈕是否具有最強(qiáng)的視覺(jué)重量?通過(guò)對(duì)每個(gè)按鈕使用不同的視覺(jué)重量來(lái)區(qū)分兩個(gè)選項(xiàng)。

結(jié)論

按鈕是創(chuàng)造平滑用戶(hù)體驗(yàn)的重要因素。簡(jiǎn)要設(shè)計(jì)要點(diǎn)：使按鈕看起來(lái)像按鈕。標(biāo)簽按鈕告知用戶(hù)能為他們做什么。放置按鈕，用戶(hù)可以找到它們或期望它們?cè)谀摹Ｗ層脩?hù)輕松地與每個(gè)按鈕進(jìn)行交互。使最重要的按鈕清晰可辨。

分享標(biāo)題：網(wǎng)頁(yè)按鈕設(shè)計(jì)總結(jié)
URL分享：http://www.js-pz168.com/news29/167279.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站維護(hù)、服務(wù)器托管、營(yíng)銷(xiāo)型網(wǎng)站建設(shè)、網(wǎng)站改版、網(wǎng)站制作、網(wǎng)站設(shè)計(jì)公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)