細(xì)節(jié)定成?。?2個常見的按鈕設(shè)計誤區(qū)

按鈕設(shè)計的直覺性，源于物理按鈕給我們留下的行為習(xí)慣。回顧歷史，物理按鈕正是現(xiàn)代UI組件的鼻祖。它們至今仍被大量使用，其魅力在于：即便用戶不懂內(nèi)部原理，只需輕輕一按，就能讓設(shè)備運(yùn)轉(zhuǎn)起來。正如《Power Button》一書作者Rachel Plotnick所言，按鈕文化塑造了我們今天下達(dá)數(shù)字指令的方式。

“你只需按下按鈕，剩下的交給我們。”——柯達(dá)公司的這句經(jīng)典廣告語，精準(zhǔn)捕捉了按鈕對用戶的吸引力：用最簡單的觸碰，換來即時的滿足感。

即便觸摸屏日益普及，物理按鈕也并未消失。它所塑造的交互習(xí)慣，深刻影響著數(shù)字界面按鈕的設(shè)計，成為衡量直觀性與易用性的永恒參照。

一、分清按鈕與鏈接

按鈕向用戶傳達(dá)“可操作”的信號，廣泛出現(xiàn)在對話框、表單、工具欄等場景中。

• 鏈接：用于導(dǎo)航到另一個地方，如“查看全部”、“閱讀更多”。

• 按鈕：用于執(zhí)行具體動作，如“提交”、“合并”、“創(chuàng)建”、“上傳”。

二、定義完整的按鈕狀態(tài)

每個按鈕都應(yīng)具備清晰、無干擾的視覺反饋。其交互狀態(tài)需明確定義，以區(qū)別于周圍布局：

1. 正常：可交互的默認(rèn)狀態(tài)。

2. 焦點(diǎn)：通過鍵盤（如Tab鍵）進(jìn)入可編輯狀態(tài)時的提示。

3. 懸停：鼠標(biāo)指針置于元素上方時（主要適用于桌面端）。

4. 按下：表示用戶正在點(diǎn)擊該按鈕。

5. 加載中：操作未立即完成，向用戶反饋任務(wù)正在進(jìn)行。

6. 禁用：當(dāng)前不可交互，但未來可能啟用。

三、選擇合適的按鈕樣式

圓角矩形按鈕因其高識別度最為常見。樣式的選擇取決于用途、平臺及設(shè)計規(guī)范。主流樣式大致分為：

• 填充按鈕（實(shí)心）：視覺權(quán)重最高。

• 描邊按鈕（線框）：視覺權(quán)重次之。

• 文本按鈕：視覺權(quán)重最弱。

利用樣式差異構(gòu)建清晰的動作層級，在多個選項中引導(dǎo)用戶。通常，最重要的操作使用“首要”按鈕樣式，其他操作則按重要程度遞減。

四、避免讓用戶思考

可用性專家Steve Krug曾說：“別讓我思考。”用戶早已被各類電子產(chǎn)品“教育”，對按鈕的外觀和功能形成了固定認(rèn)知。任何與“標(biāo)準(zhǔn)”的較大偏差，都可能造成困惑。

五、區(qū)分可點(diǎn)與不可點(diǎn)元素

切勿對交互式元素（如按鈕、鏈接）和非交互式元素（如純文本標(biāo)簽）使用相同的顏色，否則用戶會因不確定哪里可以點(diǎn)擊而感到迷茫。

六、保持一致性

“一致性是最強(qiáng)大的可用性原則之一。當(dāng)事物總是以相同方式表現(xiàn)時，用戶就無需擔(dān)心意外發(fā)生。”——雅各布·尼爾森（Jakob Nielsen）

一致性提升了操作的效率和準(zhǔn)確性，減少了誤操作。它創(chuàng)造了可預(yù)測性，幫助用戶掌控流程。在定義主要、次要等按鈕樣式時，請確保顏色、形狀等元素的一致，不僅在項目內(nèi)部，也應(yīng)盡量遵循平臺的整體規(guī)范。

七、保證足夠的點(diǎn)擊區(qū)域

按下一個按鈕應(yīng)是輕松簡單的操作。如果用戶容易誤觸相鄰元素，會帶來糟糕的負(fù)面體驗。

• 推薦尺寸：對于多數(shù)平臺，觸摸目標(biāo)建議至少為 48x48dp。無論屏幕大小，其物理尺寸應(yīng)約為9mm。觸摸屏元件的目標(biāo)尺寸至少應(yīng)在7-10mm之間。

• 圖標(biāo)按鈕：務(wù)必確保其可點(diǎn)擊的熱區(qū)大于圖標(biāo)的可視范圍。這一原則不僅適用于移動設(shè)備和平板，也同樣適用于鼠標(biāo)操作的網(wǎng)頁端。

八、踐行無障礙設(shè)計

所有組件都應(yīng)遵循無障礙設(shè)計原則。除了目標(biāo)區(qū)域大小，字體尺寸、色彩對比度也至關(guān)重要。有許多工具可以幫助檢測組件的可訪問性表現(xiàn)。

九、謹(jǐn)慎使用手勢

手勢（如滑動、雙擊、長按）能提供觸覺反饋并節(jié)省時間。然而，對于普通用戶而言，許多手勢并不直觀。建議將復(fù)雜手勢作為快捷操作留給高級用戶，同時為普通用戶保留明確的按鈕操作入口。

十、使用清晰的按鈕標(biāo)簽

按鈕傳達(dá)的文字信息與其外觀同等重要。模糊的標(biāo)簽會讓用戶感到困惑甚至誤導(dǎo)。

• 使用動詞：好的標(biāo)簽?zāi)芤龑?dǎo)行動，就像按鈕在主動詢問用戶：“要把這件商品加入購物車嗎？” 或 “要確認(rèn)訂單嗎？”

• 避免模糊詞匯：應(yīng)避免使用“是/否”或過于通用的“提交”等標(biāo)簽。

十一、合理排列按鈕順序

“確定”與“取消”誰在前？兩種方式各有道理：

• 確定在前（如Windows）：符合自然的從左到右閱讀順序。

• 確定在后（如macOS）：促使用戶在行動前先評估所有選項，有助于減少錯誤。

兩種順序都沒有絕對的對錯，也不會造成嚴(yán)重的可用性問題。選擇哪種，取決于平臺規(guī)范與具體場景。

十二、少用“禁用”狀態(tài)

你是否曾面對一個灰色按鈕，停留數(shù)秒甚至數(shù)分鐘，卻不知如何是好？濫用“禁用”狀態(tài)極易引發(fā)用戶的挫敗感。

建議：盡量避免使用禁用按鈕。更好的做法是始終啟用按鈕。如果用戶遺漏了必填信息，只需在相應(yīng)空白字段下方給出明確提示，或高亮顯示錯誤項即可。

 

蘭亭妙微（藍(lán)藍(lán)設(shè)計）www.onerobin.cn 是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標(biāo)定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。