iT邦幫忙

2026 iThome 鐵人賽

DAY 28
0
自我挑戰組

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

Day 28|滿畫面的飯店推薦,讓我們略過了角落預設打勾的加購選項

  • 分享至 

  • xImage
  •  

https://ithelp.ithome.com.tw/upload/images/20260921/20143250LMJ9qTFQDI.png
買機票或規劃旅遊行程的頁面,放滿了精美的景點照片、飯店推薦、租車優惠跟免稅品目錄,整個畫面看起來超級豐富。我們一路滑到底部按下確認付款。事後看明細時,剛好發現角落有個小小的預先勾選框,寫著「加購 500 元享有優先選位服務」。

大家在看那些漂亮的照片跟行程推薦時,通常順手就滑過了這個小選項。

減輕視覺負擔的留白藝術:美學與極簡設計

延續這幾天聊到的 Nielsen Norman 十大可用性原則,這篇來到第八條:「美學與極簡設計(Aesthetic and Minimalist Design)」。一個友善的介面,會盡量減少不相關或很少用到的資訊。畫面上每多出一筆額外的內容,都會分散大家對真正重要資訊的注意力。這個原則完美解釋了,當畫面上充滿豐富的裝飾性素材時,關鍵資訊很容易變得不那麼起眼。

豐富資訊與關鍵選項的視覺層級

在訂票或結帳頁面中,放上飯店推薦、當地行程優惠,這些內容本身都能提供大家更多旅遊靈感。當這些資訊大量且密集地放在同一個畫面中,那個真正需要大家仔細確認的加購選項,在視覺上跟周圍的推薦內容看起來一樣,很自然地融入了整個豐富的版面裡。

大腦的注意力篩選機制

人的注意力資源非常寶貴。當一個頁面充滿大量資訊時,大腦會很自然地啟動篩選機制,快速掃過那些看起來像裝飾或背景的內容,挑出視覺上被特別強調的部分來閱讀。那個需要大家確認的選項,在排版上剛好使用了跟周圍素材相同的視覺比重。大腦的篩選機制會自動把它歸類成同一組背景資訊,帶著我們順暢地滑過這個角落。

兼顧豐富度與清晰度的版面安排

適度的推薦內容跟精美的圖片,本身是很好的素材,能幫助大家想像旅行的美好。在實務上,我們可以多關注這份豐富度與選項清晰度之間的平衡。把那個預先勾選的加購選項獨立出來,給它一個明確的視覺空間。這樣一來,版面依然保有豐富的旅遊資訊,同時也確保大家能清楚看見每一個需要確認的細節。

建立在清晰指引上的安心體驗

同樣是資訊豐富的頁面,只要把需要主動確認的項目,用清楚的區塊獨立呈現出來,不跟其他的裝飾性內容混在一起。大家一樣能感受到平台的用心推薦,同時也能清楚掌握每一項花費。這份在視覺上預留的清晰度,能讓每一次的結帳過程都充滿安心感。

看完這種關於「視覺極簡」的設計巧思,最後也整理了幾個思考方向。下次在規劃資訊比較豐富的頁面時,可以試著帶入這些角度看看:

  1. 在設計充滿行銷素材的頁面時,我們有沒有幫重要的加購選項保留乾淨的視覺空間?
  2. 畫面上的精美圖片跟推薦內容,能不能和結帳確認區塊做出清楚的區隔?
  3. 團隊在規劃版面時,如何拿捏內容豐富度與關鍵資訊的平衡,讓大家能安心完成結帳?

上一篇
Day 27|「不能直接照上次點嗎?」少了再點一次的外送介面
系列文
沒有壞設計,只有剛好戳中你的心機:30天拆解UI裡的心理學筆記28
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言