iT邦幫忙

2026 iThome 鐵人賽

DAY 24
0
自我挑戰組

沒有壞設計,只有剛好戳中你的心機:30天拆解UI裡的心理學筆記系列 第 24

Day 24|紅色按鈕寫著繼續,我們的手指順著直覺點了旁邊的綠色選項

  • 分享至 

  • xImage
  •  

https://ithelp.ithome.com.tw/upload/images/20260917/20143250VI2K67lVj5.png
多數 App 裡,紅色通常帶著警示的意味,綠色則給人一種可以放心前進的安全感。在某些訂閱制服務的取消頁面中,設計團隊把顏色的配置稍微做了轉換。「確定取消」用上了柔和的綠色,「保留訂閱」搭配了警示感很重的紅色。

我們的手指直覺反應通常會走在大腦思考前面。看到紅色,下意識會產生「這需要停下來想一下」的念頭,手指順勢點了旁邊的綠色按鈕,訂閱就在這個瞬間被取消了。另一種情況下,面對紅色的警示感,我們選擇停下動作,順勢多留了一期原本打算取消的方案。

建立在過往經驗上的直覺:一致性與標準

延續 Nielsen Norman 十大可用性原則,這篇談的是第四條:「一致性與標準(Consistency and Standards)」。介面上的詞彙、視覺跟動作,應該遵循大家已經習慣的通用慣例。這條原則的心理基礎,來自我們長期使用數位產品累積的視覺聯想。紅色等於暫停、綠色等於通行,這套自動化的聯想模式,已經成為大家日常操作中的本能反應。

介面上的顏色語意轉換

調整按鈕的顏色語意,是在實務上很容易見到的設計變化。把具有警示感的顏色放在安全的選項上,或者將安全色套用在需要謹慎考慮的步驟中。在文案完全正確的狀況下,單純因為顏色配置跟大眾長期建立的直覺產生落差,就會讓大家很順暢地做出原本沒有預期的操作。

手指動作與視覺習慣的連動

這種設計的作用機制,建立在大家已經內化的視覺習慣上。我們在操作介面時,手指的反應速度通常快過閱讀文案的速度。當大家對某個 App 的介面形成長期慣性後,遇到顏色配置互換的狀況,大腦會優先順著顏色帶來的直覺下達指令。這個順暢的點擊動作發生後,我們才會在操作完成的當下,發現剛才的選擇跟原本的意圖不太一樣。

品牌風格與操作直覺的拿捏

介面的視覺風格擁有很多彈性的發揮空間,品牌專屬色系能創造獨特的識別度。在實務上,我們可以關注顏色轉換發生在哪一些特定的節點上。當這類視覺互換應用在取消訂閱、刪除帳號或確認付款等高風險的動作時,大家會更需要明確的引導。提供符合大眾直覺的顏色配置,能確保大家在關鍵時刻做出最符合心意的決定。

建立在安全感上的品牌展現

結合品牌色系與通用的業界標準,我們可以將符合直覺的顏色保留給關鍵的高風險動作,確保大家的安全感。同時,將品牌獨特的調性自由發揮在其他次要的按鈕上。這樣一來,整個介面保有完整的品牌個性,使用者也能在最重要的操作節點上,擁有最安心流暢的體驗。

看完這種運用「視覺直覺」的介面巧思,最後也整理了幾個思考方向,讓大家下次在規劃按鈕顏色時,可以試著從這些角度切入看看:

  1. 在設計介面時,我們有沒有順著大家已經習慣的顏色語意,讓操作過程直覺又省力?
  2. 面對刪除、付款等重要節點,畫面上提供的視覺引導,能不能幫助大家做出最安心的決定?
  3. 品牌在展現專屬風格的過程中,如何拿捏美學與通用慣例的平衡,讓每一次的點擊都充滿信任感?

上一篇
Day 23|按上一頁資料就全部不見,我們最後是怎麼默默把表單重填一次的?
系列文
沒有壞設計,只有剛好戳中你的心機:30天拆解UI裡的心理學筆記24
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言