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

按鈕設計-UI組件系列

發(fā)布時間：2024-01-26 18:40:09 瀏覽量：123次


?為了設計正確的交互，我們需要回顧一下物理按鈕的歷史和起源，物理按鈕是UI組件的直接前身，如今在所有數字產品中都被大量使用。按鈕是一款非常不錯的設計，即使用戶不了解基本的機制或算法，手指的觸摸也會使電器、汽車或系統(tǒng)處于運動狀態(tài)。在《電源按鈕》(Power Button)一書中，雷切爾·普洛特尼克（Rachel Plotnick）追溯了當今按鈕文化的起源，并描述了按鈕推動成為數字命令手段的方式，這種方法保證了輕松、謹慎和安全的控制。


“你按一下按鈕，剩下的由我們來做?！?—柯達相機通過一句朗朗上口、直接的廣告語，吸引著潛在的消費者。



即使在今天，這也是吸引用戶的原因。通過簡單地觸摸讓事情發(fā)生的即時滿足感。盡管有大量的新家用電器和其他設備遷移到觸摸屏控件，但物理按鈕并沒有很快消失，而由它們形成的行為習慣會影響按鈕設計的直觀性和易用性。


按鈕與鏈接


按鈕傳達用戶可以執(zhí)行的操作。它們通常被放置在整個UI中，比如：對話框、窗體、工具欄等。按鈕和鏈接之間的區(qū)別很重要：


  • 導航到另一個位置時使用鏈接，例如：“查看全部”頁面，“ Roger Wright”個人資料等。
  • 在執(zhí)行動作時使用按鈕，例如：“提交”、“合并”、“新建”、“上傳”等。

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


為按鈕創(chuàng)建正確的交互和樣式是過程中最重要的部分之一。每個州都必須有清晰的可視性，以使其與其他州和周圍的布局區(qū)分開來，但不得徹底改變組件或產生大量視覺噪聲。



  • 正?！硎驹摻M件是交互式的且已啟用。
  • 焦點—使用鍵盤或其他輸入法傳達用戶突出顯示一個元素的信息。
  • 懸?！斢脩魧⒐鈽酥糜诮换ナ皆厣戏綍r進行通信。
  • 激活或按下狀態(tài)表示用戶已輕按按鈕。
  • 進度/加載—在不立即執(zhí)行操作并通知組件正在完成操作的過程中使用。
  • 已禁用—表示該組件當前處于非交互狀態(tài)，但將來可以啟用。


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


最常見的是帶有圓角的矩形按鈕，這些按鈕易于識別并且在輸入字段旁邊看起來不錯。為按鈕選擇正確的樣式將取決于目的、平臺和指南。以下是一些最受歡迎的樣式變體：



風格傳達了行動的重要性


樣式主要用于區(qū)分較重要的動作和不重要的動作。創(chuàng)建一個動作層次結構，該層次結構將指導用戶進行多種選擇。通常，你可以有一個突出的按鈕（該樣式通常稱為“主要”按鈕），以及幾個中等的“次要”和低強調的“第三”操作。



有時沒有“默認值”


通常，你希望將最常用的按鈕設置為“默認”（使用主要樣式）并將其置于焦點狀態(tài)。這可以幫助大多數用戶更快地完成任務，并為他們指明正確的方向。


唯一的例外是，當所有選擇都相等時，或者操作特別危險時，在這種情況下，你希望用戶明確地選擇按鈕，而不是意外地選擇按鈕。



不要讓我想


“不要讓我思考”是可用性工程師史蒂夫·克魯格（Steve Krug）撰寫的書的標題。它涉及的許多要點之一是，使界面對于用戶顯而易見而不是引起困惑或迷宮是多么重要。基于多年使用各種設備和其他產品的經驗，我們對按鈕的外觀和功能有了一定的期望。與“標準”的較大偏差會給用戶帶來延遲和困惑。



避免對交互式和非交互式元素使用相同的顏色。如果交互式和非交互式元素具有相同的顏色，則人們很難知道在哪里點擊。


一致性提高了速度和準確性


“一致性是最強大的可用性原則之一：當事物始終表現相同時，用戶不必擔心會發(fā)生什么?！?—雅各布·尼爾森（Jakob Nielsen）


一致性提高了速度和準確性，有助于避免錯誤。創(chuàng)建可預測性，以幫助用戶掌控自己并能夠在產品中實現其目標。當你創(chuàng)建主要、次要和第三種樣式時，請嘗試查找一些常見的元素，例如顏色、形狀等。不僅要在設計系統(tǒng)內部保持一致，還要注意你所設計的平臺。



使按鈕足夠大，以實現可靠的交互


按下按鈕應該是一個簡單的任務，如果用戶無法成功地輕按按鈕或在過程中錯誤地輕按相鄰元素，將會導致負面的體驗并浪費時間。


對于大多數平臺，請考慮使觸摸目標至少達到48 x 48 dp。無論屏幕大小如何，此尺寸的觸摸目標的物理尺寸約為9mm。觸摸屏元件的建議目標尺寸至少為7–10mm。



對于圖標按鈕，請確保觸摸目標超出了元素的可視范圍。這不僅適用于移動設備或平板電腦，而且相同大小的建議也適用于網絡上的指針設備（如鼠標）。


無障礙設計


對于每個組件都應重復此建議，目標區(qū)域大小是影響可訪問性的因素之一。其他是字體大小、顏色和對比度。有大量工具可以幫助你輕松檢查組件設計的性能。



設計師應與開發(fā)團隊緊密合作，以確保按鈕與屏幕閱讀器配合使用。按鈕角色應用于當用戶激活時觸發(fā)響應的可點擊元素。添加role =” button”將使元素作為按鈕控件出現在屏幕閱讀器上。


手勢被廣泛采用


手勢使用戶可以通過觸摸與應用程序進行交互。使用觸摸作為執(zhí)行任務的另一種方法可以節(jié)省時間并提供觸覺控制。隨著某些手勢（例如滑動以觸發(fā)上下文動作，雙擊來點贊或長按）每天都在廣泛使用，對于普通用戶而言，它們仍然不是很明顯。我建議使用它們作為對高級用戶執(zhí)行操作的替代方法。



好的按鈕標簽邀請用戶采取行動


你的按鈕所表達的內容與其外觀一樣重要。使用錯誤的標簽可能會導致用戶感到困惑，浪費時間，并可能導致一些重大錯誤。


一個好的按鈕標簽會邀請用戶采取行動。最好使用動詞，并在按鈕上標記其實際功能。就像按鈕在問用戶—“Would you like to (Add to basket)?” 或“您要（確認訂單）嗎？”。


避免使用Yes 、No或過于通用的標簽，例如Submit。



確定/取消還是取消/確定？都可以


兩者都是選擇，設計師可以花幾個小時來討論自己的偏好。


  • 有確定行動第一支持自然閱讀順序，如果我們知道這很可能會選擇用途，則可能會節(jié)省一些時間。Windows先放OK
  • 最后列出OK可以改善流程，有些人可能會說“OK”是因為下一個按鈕將使用戶向前移動。把ok放到最后，可以幫助用戶評估所有選項，然后再采取行動，并幫助避免錯誤和倉促決策，蘋果推出OK最后



任何一種選擇都有其良好的論據，并且任何選擇都不會造成可用性災難。我個人通常將“確定”放在對話列表之類的操作列表的最后（也許是因為我主要是Mac用戶。）


禁用的按鈕很爛


每個人以前都遇到過這種情況。被卡在屏幕上幾秒鐘或幾分鐘，試圖弄清楚為什么你的進程被一個禁用按鈕阻止，你需要做什么來讓這個東西起死回生)。禁用控件用于指示組件當前是非交互的，但將來可以啟用。使用禁用按鈕是因為將按鈕從其本機位置刪除并在以后的上下文中顯示可能會迷惑用戶。



我建議盡量避免禁用按鈕，最好始終啟用它，如果用戶未提供某些必需信息，則只需突出顯示空白字段或顯示通知即可。


文中所用圖片來自網絡，如侵權，請聯系刪除


想要了解汽車更多內容，就留言聯系我們吧！

來源：Taras Bakusevych：Button Design — UI component series

- 服務內容 -

熱門課程推薦

熱門資訊

請綁定手機號

獲取驗證碼
x

同學您好！

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