按鈕設(shè)計-UI組件系列

時間：2023-10-01 16:42:01 | 來源：網(wǎng)站運(yùn)營

時間：2023-10-01 16:42:01 來源：網(wǎng)站運(yùn)營

按鈕設(shè)計-UI組件系列：

?為什么按鈕無處不在？

為了設(shè)計正確的交互，我們需要回顧物理按鈕的歷史和起源，它是如今所有數(shù)字產(chǎn)品中大量使用的UI組件的直接前身。按鈕是驚人的。手指觸摸正在運(yùn)行的設(shè)備、汽車或系統(tǒng)，即使用戶不理解底層的機(jī)制或算法。在《Power Button》一書中，雷切爾?普羅尼克追溯了當(dāng)今按鍵文化的起源，并描述了按鍵如何成為數(shù)字指令的一種方式，這種方式承諾了輕松、謹(jǐn)慎和萬無一失的控制。

“你按下按鈕，我們來做其余的事，”——柯達(dá)相機(jī)通過一個朗朗上口的直接標(biāo)語來吸引潛在的消費(fèi)者。




即使在今天，這也是令用戶著迷的地方。用一個簡單的觸摸讓事情發(fā)生的瞬間滿足。盡管有大量的新家用電器和其他設(shè)備轉(zhuǎn)向了觸摸屏控制，但物理按鈕不會很快消失，它們所形成的行為習(xí)慣會影響按鈕設(shè)計的直觀性和易用性。

按鈕和鏈接

按鈕傳達(dá)用戶可以采取的行動。它們通常放置在整個UI中，比如對話框、表單、工具欄等位置。按鈕和鏈接的區(qū)別很重要:

• 鏈接是用來當(dāng)你導(dǎo)航到另一個地方，如:“查看所有”頁面，“羅杰賴特”個人資料等。
  
• 按鈕是用來執(zhí)行一個動作，如:“提交”，“合并”，“創(chuàng)建新”，“上傳”等。
  

按鈕狀態(tài)將其狀態(tài)傳達(dá)給用戶

為按鈕創(chuàng)建正確的交互和樣式是這個過程中最重要的部分之一。每個狀態(tài)必須具有清晰的啟示，將其與其他狀態(tài)和周圍的布局區(qū)分開來，但不應(yīng)該徹底改變組件或創(chuàng)建大量的視覺干擾。

• 正常——將該組件交互并啟用。
• 聚焦——用戶使用鍵盤或其他輸入法突出顯示了一個元素。
• 懸停—當(dāng)用戶將光標(biāo)置于交互元素之上時進(jìn)行通信。
• 激活——按下狀態(tài)表示用戶已激活按鈕。
• 進(jìn)度/加載——當(dāng)沒有立即執(zhí)行操作并告知組件正在完成操作時使用。
• 禁用——表示組件當(dāng)前是非交互的，但將來可以啟用。

按鈕有各種顏色、形狀和大小

最常見的是帶有圓角的矩形按鈕，它們很容易識別，并且在輸入字段旁邊看起來很好。為按鈕選擇正確的樣式將取決于用途、平臺和指南。以下是一些最流行的風(fēng)格變化

風(fēng)格傳達(dá)了一個動作的重要性

風(fēng)格主要用于區(qū)分更重要的動作和不太重要的動作。創(chuàng)建一個操作層次結(jié)構(gòu)，在有大量選擇的地方指導(dǎo)用戶。通常，你可以有一個突出的按鈕(該樣式通常被稱為“主”)和幾個中等的“次”和低強(qiáng)調(diào)的“第三”動作。

有時不存在“默認(rèn)”

通常，你希望將最常選擇的按鈕設(shè)置為“默認(rèn)”(使用主樣式)，并將其置于聚焦?fàn)顟B(tài)。這有助于大多數(shù)用戶更快地完成他們的任務(wù)，并為他們指出正確的方向。

例外情況是，當(dāng)所有的選擇都是相同的，或者操作特別危險時，在這些情況下，你希望用戶明確地選擇按鈕，而不是意外地選擇按鈕。

不要讓我思考

不要讓我思考，這是可用性工程師Steve Krug的一本書的標(biāo)題。它所觸及的許多要點(diǎn)之一是，讓界面對用戶來說是多么重要，而不是制造謎題或迷宮。基于多年來對各種設(shè)備和其他產(chǎn)品的使用，我們對按鈕的外觀和功能形成了一定的期待。一個大的偏離被認(rèn)為是“標(biāo)準(zhǔn)”將會給用戶造成延遲和混亂。

避免使用同一顏色的互動和非互動的元素。如果交互元素和非交互元素有相同的顏色，人們就很難知道該點(diǎn)擊哪里。

一致性提高了速度和準(zhǔn)確性

“一致性是最強(qiáng)大的可用性原則之一:當(dāng)事物總是表現(xiàn)相同時，用戶不必?fù)?dān)心會發(fā)生什么。”——雅各布·尼爾森

一致性提高了速度和準(zhǔn)確性，有助于避免錯誤。創(chuàng)建可預(yù)測性，幫助用戶感覺在控制和有能力實(shí)現(xiàn)他們的目標(biāo)在使用的產(chǎn)品時。當(dāng)你創(chuàng)建主要的、次要的和第三的樣式時，試著找到一些共同的元素，如顏色、形狀等。不僅要在你的設(shè)計系統(tǒng)中保持一致，還要注意你設(shè)計的平臺。

使按鈕足夠大，以保證可靠的交互

按下一個按鈕應(yīng)該是一個簡單的任務(wù)，如果用戶不能成功地按下一個按鈕或在過程中不小心按下了相鄰的元素，將會導(dǎo)致一個負(fù)面的體驗(yàn)和時間的損失。

對于大多數(shù)平臺，考慮使觸摸目標(biāo)至少48×48 dp。這樣大小的觸摸目標(biāo)，無論屏幕大小，其物理大小都在9mm左右。觸摸屏的推薦尺寸至少是7-10mm。

對于圖標(biāo)按鈕，確保觸發(fā)區(qū)域超出了元素的可視范圍。這不僅適用于移動設(shè)備或平板電腦，同樣大小的推薦也適用于web上的指針設(shè)備(如鼠標(biāo))。

設(shè)計的可訪問性

對于每個組件都應(yīng)該重復(fù)這一建議。目標(biāo)區(qū)域大小是影響可達(dá)性的因素之一。其他的是字體大小、顏色和對比度。有大量的工具可以幫助你輕松地檢查組件的設(shè)計執(zhí)行情況。

設(shè)計人員應(yīng)該與開發(fā)團(tuán)隊緊密合作，以確保按鈕能夠與屏幕閱讀器協(xié)同工作。按鈕角色應(yīng)該用于在用戶激活時觸發(fā)響應(yīng)的可單擊元素。添加role= " button "將使元素作為按鈕控件出現(xiàn)在屏幕閱讀器中。

手勢被廣泛采用

手勢允許用戶使用觸摸與應(yīng)用程序進(jìn)行交互。使用觸摸作為執(zhí)行任務(wù)的另一種方式可以節(jié)省時間，并給予觸覺控制。有些手勢，如滑動來觸發(fā)上下文動作、雙擊來點(diǎn)贊或長按，每天都在被廣泛使用，但對于普通用戶來說，它們?nèi)匀徊皇呛苊黠@。我建議使用它們作為執(zhí)行高級用戶操作的另一種方法。

良好的按鈕標(biāo)簽邀請用戶采取行動

你的按鈕說了什么和它們的外觀一樣重要。使用錯誤的標(biāo)簽可能會導(dǎo)致用戶的困惑，浪費(fèi)時間，甚至可能導(dǎo)致一些重大錯誤。

一個好的按鈕標(biāo)簽會讓用戶采取行動。最好使用動詞，并將按鈕的實(shí)際功能標(biāo)記出來。這就像按鈕在詢問用戶——“你想要(添加到購物籃中)嗎?”或“您想(確認(rèn)訂單)嗎?”

避免使用“是”、“否”或過于通用的標(biāo)簽，如“提交”。

好的/取消或取消好嗎?不是很好

兩者都只是選擇，設(shè)計師可以就自己的喜好爭論幾個小時。

• 擁有OK動作首先支持自然的閱讀順序。如果我們知道這是最有可能選擇的用途，這可能有助于節(jié)省一些時間。Windows將OK放在首位；
• 最后列出OK改進(jìn)了流程。有些人可能會說Ok，因?yàn)橄乱粋€按鈕會讓用戶向前移動。把OK放在最后，幫助用戶在采取行動之前評估所有選項，并幫助避免錯誤和匆忙的決定。蘋果把OK放在最后；

任何一種選擇都有其有利的論據(jù)，沒有一種選擇可能會導(dǎo)致可用性災(zāi)難。我個人通常把OK放在動作列表的最后，比如對話框窗口(可能因?yàn)槲抑饕荕ac用戶)。

禁用按鈕

以前每個人都是這樣。在屏幕上停留幾秒鐘或幾分鐘，試圖找出為什么你的進(jìn)程會被一個禁用的按鈕阻塞，以及你需要做什么才能讓這個東西恢復(fù)正常)。禁用的控件用于指示組件當(dāng)前是非交互的，但在將來可以啟用。之所以使用禁用按鈕，是因?yàn)閷粹o從其原始位置移除并在以后的上下文中顯示它會使用戶感到困惑。

我建議盡量避免禁用按鈕。最好總是啟用它，如果用戶沒有提供一些必需的信息，只需突出顯示空字段，或調(diào)出通知。