12個按鈕設計容易踩到的雷
發(fā)布時間:2022-01-06 10:20 [ 我要自學網(wǎng)原創(chuàng) ] 發(fā)布人: hh71427-2


按鈕設計


為了設計正確的交互,我們需要回顧一下物理按鈕的歷史和起源。物理按鈕是 UI 組件的前身,當今的數(shù)字產(chǎn)品都還在大量使用它們。按鈕很棒,即使用戶不了解基本的機制或算法,只用手指觸摸就可以讓電器、汽車或系統(tǒng)運行/關閉。在《Power Button》中,作者 Rachel Plotnick 描述了當今按鈕文化的起源,并解釋了按鈕是如何成為數(shù)字命令方式的。

“你按下按鈕,剩下的我們來做! ——柯達相機的醒目標語吸引了潛在消費者。

細節(jié)見真章!12個按鈕設計容易踩到的坑

即使在今天,這也是吸引用戶的地方——通過簡單觸摸就能讓事情發(fā)生的即時滿足感。盡管有大量新的家用電器和設備都變成了觸摸屏,但物理按鈕并不會消失,因為它們讓人形成的行為習慣,會影響按鈕設計的直觀性和易用性,是一種永遠存在的實物參考。


按鈕 vs 鏈接


按鈕向用戶傳遞了操作的可執(zhí)行性,在整個 UI 里很常見,例如:對話框、表單和工具欄等。按鈕和鏈接之間的區(qū)別,請注意:

-鏈接是導航到另一個地方時應用的,例如:“查看全部”頁面、“ Roger Wright”個人簡介等;

-按鈕是在執(zhí)行動作時應用的,例如:“提交”、“合并”、“創(chuàng)建”、“上傳”等。

細節(jié)見真章!12個按鈕設計容易踩到的坑



讓用戶直觀感受按鈕狀態(tài)


為按鈕創(chuàng)建正確的交互和樣式,是按鈕設計過程中重要的組成部分之一。在不改變組件或產(chǎn)生視覺干擾的前提下,每個按鈕的狀態(tài)都必須有明確定義,以使其與周圍布局區(qū)別開來。

細節(jié)見真章!12個按鈕設計容易踩到的坑

  • 正常 — 表示該組件已啟用交互;
  • 突出提示 — 用戶使用鍵盤,進入編輯狀態(tài);
  • 鼠標懸停 — 當用戶將鼠標置于交互式元素上方時;
  • 點擊 — 按下狀態(tài)表示用戶已輕點按鈕;
  • 進度/加載 — 用戶操作行為沒有立即執(zhí)行,表示正在完成操作中;
  • 禁用 — 表示該組件當前處于非交互狀態(tài),但將來可以啟用。


按鈕的顏色、形狀和大小


常見的是圓角矩形按鈕,這些按鈕即使在輸入框旁,用戶也能快速識別。按鈕樣式的選擇取決于用途、平臺和應用準則。以下是一些最受歡迎的樣式變化:

細節(jié)見真章!12個按鈕設計容易踩到的坑


建立按鈕樣式等級


樣式主要用于區(qū)分重要和不重要的動作。創(chuàng)建動作層次結構,該層次結構將指導用戶進行多種選擇。通常,可以有一個突出的按鈕(該樣式通常稱為“首要”按鈕),剩下的按鈕則依據(jù)重要程度建立不同的樣式等級。

細節(jié)見真章!12個按鈕設計容易踩到的坑


《Don’t Make Me Think》


這是可用性工程師 Steve Krug 撰寫的書籍標題,其中講到了一點:對用戶而言,界面清晰明了非常重要,不要給用戶制造難題。人們周圍其實已經(jīng)被電子產(chǎn)品包圍了,多年使用各種設備、軟件的經(jīng)驗,一定程度上固化了人們對按鈕外觀和功能的認知。如果與常見的“標準”存在較大偏差,也會給用戶造成困惑。

細節(jié)見真章!12個按鈕設計容易踩到的坑

避免對交互式和非交互式元素使用相同的顏色,否則用戶不知道該點擊哪里。


一致性的重要性


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

一致性提升了速度性和準確性,有助于避免錯誤。創(chuàng)建可預測性,幫助用戶控制和實現(xiàn)產(chǎn)品中的目標。當創(chuàng)建主要、次要和第三種樣式時,試著找找一致元素,如顏色、形狀等。按鈕設計不僅要在設計系統(tǒng)內(nèi)部保持一致,在整體平臺也要進行統(tǒng)一。

細節(jié)見真章!12個按鈕設計容易踩到的坑


使按鈕足夠大以實現(xiàn)可靠交互


按下按鈕應該是一個簡單的操作任務,如果用戶無法正常進行,或在過程中錯誤地按到了相鄰元素,不但給用戶造成了負面體驗又浪費了時間。

對于大多數(shù)平臺,請考慮被觸摸的目標至少為 48x48dp。無論屏幕大小,這種尺寸的觸摸目標的物理尺寸應為 9mm,觸摸屏元件的目標尺寸至少是 7-10mm。

細節(jié)見真章!12個按鈕設計容易踩到的坑

對于圖標按鈕來說,請確保觸摸目標超出元素的可視范圍。這不僅適用于移動設備、平板電腦,同時也適用于網(wǎng)絡上的指示設備,比如鼠標。


無障礙設計


所有組件都應推行無障礙設計。目標區(qū)域的大小是影響可訪問性的因素之一,其他的則是字體大小、顏色和對比度,也有很多工具能檢查組件的設計性能。

細節(jié)見真章!12個按鈕設計容易踩到的坑


手勢應用


手勢應用,讓用戶可以通過觸摸與應用程序進行交互。使用觸摸來完成任務,不僅提供了觸覺控制還非常節(jié)約時間。某些手勢(比如滑動以觸發(fā)上下文動作、雙擊或長按來標記喜歡等)每天都被人們廣泛使用,但對于普通用戶而言,它們?nèi)匀徊惶黠@,建議把它們替換給高級用戶執(zhí)行操作。

細節(jié)見真章!12個按鈕設計容易踩到的坑



按鈕標簽信息易于理解


按鈕傳達的信息與其外觀一樣重要,錯誤的信息會讓用戶感到困惑,甚至是誤導用戶操作。正確的按鈕標簽會引導用戶完成操作,最好使用動詞,并在按鈕上標記其實際功能。

就像按鈕在問用戶——“您要(添加到購物籃中)嗎?” 或“您要(確認訂單)嗎?”,避免使用Yes/No或過于通用的標簽,比如Submit。

細節(jié)見真章!12個按鈕設計容易踩到的坑


確定/取消,還是取消/確定?


兩者都是正確選擇,但設計師可能會花幾個小時來討論哪個更合適。確定按鈕在前,是自然流暢的閱讀順序。Windows 把確定按鈕放在了前面;確定按鈕在后,可以幫助改善流程。這種順序形式,幫助用戶在采取行動前,對所有選項評估,有效地幫助人們避免錯誤。蘋果則是把確定按鈕放在最后的;任何一種選擇其實都沒有錯,也不會造成什么可用性災難。

細節(jié)見真章!12個按鈕設計容易踩到的坑


避免使用禁用按鈕


每個人都遇到過這種情況:在屏幕上停留了幾秒或幾分鐘,怎么操作都沒反應,這才發(fā)現(xiàn)原來是禁用按鈕使我們無法進行下一步。禁用控件讓組件短暫處于非交互狀態(tài),但如果使用不當,則非常容易讓用戶產(chǎn)生負面情緒。

細節(jié)見真章!12個按鈕設計容易踩到的坑

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

UI設計之Figma系列教程
我要自學網(wǎng)商城 ¥50 元
進入購買
文章評論
0 條評論 按熱度排序 按時間排序 /350
添加表情
遵守中華人民共和國的各項道德法規(guī),
承擔因您的行為而導致的法律責任,
本站有權保留或刪除有爭議評論。
參與本評論即表明您已經(jīng)閱讀并接受
上述條款。
V
特惠充值
聯(lián)系客服
APP下載
官方微信
返回頂部
分類選擇:
電腦辦公 平面設計 室內(nèi)設計 室外設計 機械設計 工業(yè)自動化 影視動畫 程序開發(fā) 網(wǎng)頁設計 會計課程 興趣成長 AIGC