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

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

你按下的這個按鈕，背后有哪些設(shè)計和學(xué)問?

發(fā)布時間：2024-01-26 17:45:22 瀏覽量：157次

原文標(biāo)題：《你真的理解按鈕嘛？》，題圖來自：視覺中國

按鈕在 UI 中用于即時操作，響應(yīng)用戶點(diǎn)擊的行為，從而可以觸發(fā)相應(yīng)的業(yè)務(wù)邏輯。按鈕幾乎存在于每個界面元素中，也是交互中重要的元素。本篇文章我們將從以下四個方面（按鈕的尺寸、按鈕的顏色、常用的按鈕樣式、按鈕上的文案）介紹關(guān)于按鈕的一些細(xì)節(jié)，希望看完文章可以對你有幫助。

一、按鈕的尺寸和顏色

1. 按鈕的尺寸

一個好的按鈕設(shè)計遵循3個原則。它必須是可識別的、可找到的和清晰的。對于這3個原則來說，按鈕的尺寸似乎占據(jù)相當(dāng)重要的位置，那么觸摸UI上的觸摸目標(biāo)應(yīng)該設(shè)置多大呢？根據(jù)麻省理工學(xué)院觸摸實驗室的研究“人類指尖調(diào)查觸覺力學(xué)”發(fā)現(xiàn)，人類指墊平均為10~14毫米，指尖平均為8~10毫米，這意味著神奇的數(shù)字是10毫米。

大多數(shù)用戶可以舒適可靠地?fù)糁?0毫米x10毫米的觸摸目標(biāo)。然而，不同的移動平臺以不同的方式表達(dá)，此尺寸僅供建議。例如，年齡較大的用戶可能無法輕松點(diǎn)擊 UI 中較小的按鈕。小目標(biāo)很難準(zhǔn)確點(diǎn)擊，當(dāng)我們針對這些老齡化用戶設(shè)計時，應(yīng)當(dāng)放大按鈕在屏幕的占比，使按鈕能夠更頻繁地成功完成操作。這也是為什么在做適老化時會將按鈕放大。（小按鈕需要用戶付出更多的認(rèn)知努力，并且可能會讓老齡化人群在犯錯后感到沮喪和不滿，這樣他們使用該流程的欲望就沒有了）

在iOS發(fā)布的人機(jī)界面操作指南中：iPhone建議最小目標(biāo)尺寸為44px（像素）、寬44px；Android的Material Design中，建議至少為長48dp、寬48dp，不同觸點(diǎn)間的距離為8dp。這樣做是為了確保信息密度以及可用性。

當(dāng)然這些就像是標(biāo)注中說的一樣，僅是為了提供參考，如果設(shè)計都按著這樣的指南來，那我們的設(shè)計將毫無溫度可言。

對于UI設(shè)計師來說，我們要更貼近我們產(chǎn)品的目標(biāo)人群去進(jìn)行設(shè)計，這也是為什么會有眼動測試、用戶調(diào)研、用戶可用性測試、屏幕熱點(diǎn)操作區(qū)域等。它不應(yīng)該只是出現(xiàn)在我們的作品集的前幾頁，好的產(chǎn)品需要以人為本的設(shè)計。

2. 按鈕的顏色

顏色對于按鈕的作用似乎更為重要，按鈕的顏色可以提供視覺連續(xù)性，傳達(dá)狀態(tài)和反饋，并幫助人們理解信息。比如我們熟知的“紅色-刪除”“黃色-警告”“綠色-通過”“藍(lán)色-更多”。

這些顏色的使用都是為了讓我們的按鈕能夠引導(dǎo)用戶采取有意義的操作。

很多APP都用的品牌色來作為很多重要按鈕的顏色，比如在登錄頁面“站酷、抖音、淘寶、美團(tuán)、微信”都用了品牌主題色，而一些重要按鈕例如“淘寶的支付、飛書的漂浮、美團(tuán)、餓了么的點(diǎn)單”等這些同樣使用了品牌色。但是切記一定不要過度使用品牌色當(dāng)按鈕，這樣會起到反效果，明智地使用顏色，可以和用戶增強(qiáng)溝通，同樣可以加深品牌記憶。

確認(rèn)等正向反饋的按鈕都是用品牌色來使用，那么與這些使用突出顏色的按鈕相反，有一種按鈕也經(jīng)常出現(xiàn)在我們的產(chǎn)品中，那就是“取消按鈕”。取消按鈕也是一個很重要的存在，它往往伴隨著確認(rèn)來出現(xiàn)。我們見過名氣最大的取消按鈕可能就是退出時的挽留彈窗（它會關(guān)閉用戶當(dāng)前的屏幕并將他們返回到上一個屏幕。這個取消的按鈕是一種保護(hù)措施，它的好處是可以防止對當(dāng)前操作步驟進(jìn)行不必要的更改。）

對于取消按鈕來說，它的展示則盡可能使它弱化下去，有很多軟件會把它們做成主題色的幽靈按鈕（幽靈按鈕是那些具有基本形狀（例如矩形）的透明鏤空按鈕。它們通常由很細(xì)的線邊框及內(nèi)部的純文本組成。）

對于取消按鈕的顏色一直是一個很有爭議的事情，那就是它該不該被賦予顏色。換句話說，它是否應(yīng)該只是作為中性色存在。

帶著這個疑問我去查閱資料，似乎找到了一點(diǎn)苗頭。贊成它不該有顏色的人說，“取消按鈕應(yīng)表示退回安全狀態(tài)，而不是號召采取行動?！?/strong>簡單來說：我們不應(yīng)該用顏色來裝飾它，否則這樣會給用戶留下強(qiáng)調(diào)的印象。相反，我們需要讓他們知道該按鈕不會進(jìn)行任何更改，而是返回上一步的操作。還有一種解釋是“當(dāng)屏幕上的每個按鈕都有顏色時，它們就會爭奪注意力。兩個按鈕都存在顏色會使用戶對每個動作思考的時間更長。使用中性色可以快速讓他們做出選擇?！?/p>

贊成取消按鈕應(yīng)該有顏色的人則是這樣說：“通過按鈕間樣式的區(qū)分，就足以給出用戶判斷，沒有必要過分強(qiáng)調(diào)它不該有顏色，這樣即使達(dá)到了它的作用，但是整體視覺的色彩平衡會消失?！?/p>

目前帶顏色的幽靈按鈕則廣泛地出現(xiàn)在我們的App中，我們對于這件事情似乎并沒有太在意。我們在使用主按鈕（實心按鈕）和輔助按鈕（幽靈按鈕），沒有必要使用不同的顏色，能明確告知用戶它們的區(qū)別就可以了。

其實無論是哪一種說法，都有一個共同點(diǎn)，就是我們是基于讓用戶更容易瀏覽以及操作才進(jìn)行這樣的設(shè)計，用戶渴望可預(yù)測性和熟悉性，因此使用顏色來幫助他們識別和解釋應(yīng)用程序的內(nèi)容并與正確的模塊之間進(jìn)行交互。所以不管是哪種做法，目的就是通過對比度讓用戶更容易區(qū)分。我們更應(yīng)該使用引導(dǎo)用戶采取有意義操作的顏色和對比度。

二、常用的按鈕樣式與狀態(tài)

1. 按鈕的樣式

①填充按鈕

填充按鈕就如它的名字一樣，是一個充滿顏色填充的按鈕。這也是我們最常見的按鈕，在“按鈕的顏色”中講過，填充按鈕一般都采用的是APP主色調(diào)。填充按鈕一般是在重要的操作步驟、作為主按鈕的時候才會使用。

②邊框按鈕（次按鈕）與幽靈按鈕

邊框按鈕和幽靈按鈕很相似，但還是有明顯的區(qū)別，“幽靈按鈕”就像它的名字一樣飄來飄去，游離于組件外但是又在大框架中，幽靈按鈕是那些具有基本形狀的透明空按鈕，例如矩形或正方形。與其相反，邊框按鈕就是與組件一起存在組件庫規(guī)范中。

從資料中找到，第一次提到“Ghost Buttons（幽靈按鈕）”這個概念的是一個叫做“T***”的博客網(wǎng)站，幽靈按鈕起源于扁平化設(shè)計革命，流行于蘋果發(fā)布iOS 7。現(xiàn)在iOS也經(jīng)常使用“幽靈按鈕”。

幽靈按鈕的作用在于，它可以飄在任何的設(shè)計環(huán)境，擁有很好的適應(yīng)性；它還可以提升UI界面的同時不會分散我們的注意力，不會阻擋背景圖像的使用（存在背景圖時，我們大多數(shù)都會采用幽靈按鈕）。

③圓角按鈕

圓角按鈕就是圓角尺度，現(xiàn)在圓角按鈕似乎廣泛使用起來了，圓角會比常規(guī)的按鈕更能讓用戶感受到親切，就相當(dāng)于一個飽經(jīng)風(fēng)霜圓滑的老OG和一個愣頭青和你相處，你會覺得和哪個相處起來會更順暢？

④漂浮按鈕

漂浮按鈕和幽靈按鈕聽起來貌似是一種東西，但是漂浮按鈕一般存在于網(wǎng)頁的邊緣用于附加功能。浮動操作按鈕在屏幕上執(zhí)行主要或最常見的操作。它出現(xiàn)在所有屏幕內(nèi)容的前面，通常呈圓形，中心有一個圖標(biāo)。漂浮按鈕分為三種類型：常規(guī)、迷你和擴(kuò)展。

⑤文字按鈕

顧名思義，文字按鈕就是將文字變?yōu)榘粹o鏈接。這里說一個很有意思的點(diǎn)，很多網(wǎng)站都會把主題色設(shè)置為藍(lán)色，最知名的是Google藍(lán)，是在測試時篩選了一大批藍(lán)色最終選擇了點(diǎn)擊最高的藍(lán)色。對于大多數(shù)的藍(lán)色文字按鈕，可以了解下蒂姆·伯納斯·李爵士，他通常被認(rèn)為是萬維網(wǎng)的發(fā)明者。藍(lán)色酷的地方在于，即使是色盲的人通常也能看到它。

2. 按鈕的狀態(tài)

按鈕的狀態(tài)是為了能讓用戶了解當(dāng)前對于按鈕的操作（點(diǎn)擊或者未點(diǎn)擊）。下面我們就來說明幾種最常見的按鈕狀態(tài)。

①可點(diǎn)擊與不可點(diǎn)擊

從狀態(tài)的命名也就能看到它們的作用方式。那么這里我們需要注意的點(diǎn)就是：在用戶還未填寫完當(dāng)前信息時，我們應(yīng)該禁用按鈕，這樣會告訴他在沒有完成信息輸入時不可以點(diǎn)擊進(jìn)行下一步的操作。

②五種狀態(tài)

在懸停狀態(tài)中，我們最常用的就是在網(wǎng)頁端，特別是在瀏覽官網(wǎng)時會經(jīng)常使用。可以讓用戶知道它是可以點(diǎn)擊的，鼠標(biāo)懸停在上面時按鈕會改變顏色或者文案，這里會存在和用戶之間很有意思的互動。不過我們在移動端時沒有遇到過這種懸停按鈕，當(dāng)然懸停狀態(tài)不會在平板電腦和移動設(shè)備上看到，因為我們的手指無法“懸?！?。

正常狀態(tài)、懸停狀態(tài)、點(diǎn)擊狀態(tài)是我們在設(shè)計PC端時經(jīng)常要為開發(fā)同學(xué)單獨(dú)列出來的三件套。點(diǎn)擊狀態(tài)就是在點(diǎn)擊時按鈕發(fā)生的改變，這個狀態(tài)我們在移動端也很常見。

禁用狀態(tài)表示這個按鈕不能點(diǎn)擊，表現(xiàn)樣式上一般是置灰，或者在正常狀態(tài)的基礎(chǔ)上降低不透明度；加載中就是在點(diǎn)擊時會出現(xiàn)一個簡單的停頓，緩沖下一步驟即將出現(xiàn)的狀態(tài)。

三、按鈕的文案

其實文案應(yīng)該是UI/UX設(shè)計師的基本功，因為一個好的文案能夠更清晰直觀地引導(dǎo)用戶，但是我們實際工作中似乎直接把他們忽略掉了，直接拿著產(chǎn)品經(jīng)理發(fā)來的需求文檔復(fù)制粘貼。

對于按鈕上的文案我們也應(yīng)該重視起來，它并不像是其他文案一樣惹人注意。一個好的按鈕文案可以讓用戶輕松地執(zhí)行操作，流暢地完成當(dāng)前流程；當(dāng)然一個充滿問題的按鈕文案會增加用戶的使用困惑，徒增一些沒必要的時間。

正確的按鈕文本是解釋按鈕意圖的主要元素。它應(yīng)該是清晰的、可預(yù)測的和簡單的。以動詞開頭來鼓勵用戶進(jìn)行下一步的行動。動詞必須告訴用戶單擊按鈕后會發(fā)生什么，以便他們可以預(yù)測下一步。使用任何年齡段都能識別的簡單語言。

經(jīng)過查閱資料，我找到了幾篇文章講述的一些方法，我把它們總結(jié)為兩點(diǎn)，希望能夠幫助大家快速地選擇正確的按鈕文案。

1. 具體性

具體性就是按鈕對于動詞的使用，是設(shè)計按鈕時最為常見的方法。這會激發(fā)用戶進(jìn)行操作，當(dāng)用戶閱讀時，他們會知道按下按鈕會做什么。正如“一個好的按鈕，用戶無需閱讀任何支持文本就可以進(jìn)行操作?！?/strong>

為什么對于“確認(rèn)”不適合展示，是因為與向用戶展示“確定”按鈕來確認(rèn)他們想要執(zhí)行的操作相比，向用戶提供一個標(biāo)有特定操作的按鈕會更高效。

我們可以自己讀一遍上圖中的兩種文案，這樣對比是不是發(fā)現(xiàn)“是的”會存在很多弊端？因為“是的”是感嘆詞，并不是具體動作。

我們根據(jù)一個實驗來印證這點(diǎn)，我們可以先把上面的標(biāo)題和內(nèi)容遮擋，只露出按鈕。看一下哪個更容易懂。

這個實驗可以很直觀地印證前面的那句話：“一個好的按鈕用戶無需閱讀任何支持文本就可以進(jìn)行操作?！毕襁@樣的案例，我們在工作中可以在修改信息時使用，相比較C端來說，B端更應(yīng)該注重兩者文案的區(qū)分，否則用戶的邏輯思緒很容易混亂。

特定按鈕文案將使用戶能夠更快、更準(zhǔn)確地完成任務(wù)。并不是所有用戶都會閱讀彈窗中的問題或消息。大多數(shù)人會在沒有仔細(xì)或完整地閱讀它的情況下做出決定。我們?nèi)绻梢詼?zhǔn)確地描述，用戶將能夠看到他們將要執(zhí)行的操作，而無需閱讀彈窗中的文本信息。

2. 準(zhǔn)確性

我們還應(yīng)該注意按鈕的準(zhǔn)確性，這樣不會讓用戶誤解這個步驟本身的含義。關(guān)于這個問題，在網(wǎng)易云和QQ音樂中都會出現(xiàn)。網(wǎng)易云音樂在歌單中移除歌曲時，會提示“確定要將歌曲從歌單中刪除嗎？”會出現(xiàn)刪除按鈕，而qq音樂則提示都沒有就直接刪除了。

這兩種模式很容易使我理解錯誤或者誤操作。我們就拿網(wǎng)易云來說，雖然在提示文案里說明了這個是從歌單中“刪除”，“刪除”意味著該按鈕將從系統(tǒng)中刪除該項目，“刪除”這個文案放在刪除歌曲時會更加合適；我們將“刪除”改為“移除”效果就完全不一樣，這兩個文案意思雖然相近，但是“移除”更能準(zhǔn)確地表示我把歌曲從歌單中除去了。

關(guān)于“刪除”和“移除”，我找到了詳細(xì)的解答，希望可以幫助你快速理解兩者之間的區(qū)別。

模糊且通用的按鈕標(biāo)簽會給用戶帶來不確定性。所以我們要貼心地為用戶準(zhǔn)備好每一個環(huán)節(jié)，這樣用戶在使用時會更加便捷。文案是解釋按鈕含義的主要元素。它應(yīng)該是清晰的、可預(yù)測的和簡單的。這些界面元素作為我們和用戶之間的溝通橋梁，希望我們能在今后的工作中更加注重文案，讓我們與用戶間有一個愉快的對話，讓用戶感受到我們的產(chǎn)品是有溫度的，能在使用時發(fā)現(xiàn)我們是有認(rèn)真地在為用戶考慮。

四、總結(jié)

簡單講解按鈕后，我們意識到，UI界面中任何一個小元素都不是憑空出現(xiàn)的，它是由若干個問題組成的，再由我們?nèi)ミM(jìn)行尋找解決辦法。正如設(shè)計是將問題轉(zhuǎn)化為可能性的藝術(shù)。 這是一個本質(zhì)上旨在解決問題的過程，也是一種以人為本的創(chuàng)新方法，整合人的需求、技術(shù)的可能性和商業(yè)成功的要求。

作為UI/UX設(shè)計師，我們應(yīng)該理解到我們不是為了我們自己去設(shè)計，我們是以我們的用戶為中心去設(shè)計，只有當(dāng)用戶真正使用起產(chǎn)品來覺得開心，這個設(shè)計才是有意義的。

本內(nèi)容為作者獨(dú)立觀點(diǎn)，不代表虎嗅立場。未經(jīng)允許不得轉(zhuǎn)載，授權(quán)事宜請聯(lián)系 hezuo@huxiu.com

正在改變與想要改變世界的人，都在 虎嗅APP

熱門課程推薦

熱門資訊

請綁定手機(jī)號

獲取驗證碼
x

同學(xué)您好！

您已成功報名0元試學(xué)活動，老師會在第一時間與您取得聯(lián)系，請保持電話暢通！
確定