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

你按下的這個按鈕，背后有哪些設計和學問?

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

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

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

一、按鈕的尺寸和顏色

1. 按鈕的尺寸

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

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

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

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

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

2. 按鈕的顏色

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

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

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

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

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

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

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

贊成取消按鈕應該有顏色的人則是這樣說：“通過按鈕間樣式的區(qū)分，就足以給出用戶判斷，沒有必要過分強調它不該有顏色，這樣即使達到了它的作用，但是整體視覺的色彩平衡會消失。”

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

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

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

1. 按鈕的樣式

①填充按鈕

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

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

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

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

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

③圓角按鈕

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

④漂浮按鈕

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

⑤文字按鈕

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

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

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

①可點擊與不可點擊

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

②五種狀態(tài)

在懸停狀態(tài)中，我們最常用的就是在網頁端，特別是在瀏覽官網時會經常使用?？梢宰層脩糁浪强梢渣c擊的，鼠標懸停在上面時按鈕會改變顏色或者文案，這里會存在和用戶之間很有意思的互動。不過我們在移動端時沒有遇到過這種懸停按鈕，當然懸停狀態(tài)不會在平板電腦和移動設備上看到，因為我們的手指無法“懸?！?。

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

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

三、按鈕的文案

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

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

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

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

1. 具體性

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

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

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

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

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

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

2. 準確性

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

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

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

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

四、總結

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

作為UI/UX設計師，我們應該理解到我們不是為了我們自己去設計，我們是以我們的用戶為中心去設計，只有當用戶真正使用起產品來覺得開心，這個設計才是有意義的。

本內容為作者獨立觀點，不代表虎嗅立場。未經允許不得轉載，授權事宜請聯(lián)系 hezuo@huxiu.com

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

熱門課程推薦

熱門資訊

請綁定手機號

獲取驗證碼
x

同學您好！

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