你在排版時一定遇過這種崩潰情境：在軟體裡把 X 軸與 Y 軸的數值完美置中，按下確認後，畫面上的按鈕看起來就是歪的。當你手動把它往右挪動幾個像素，視覺上終於舒服了，但旁邊的工程師卻看著程式碼問你：「這兩個元素的間距怎麼不是雙數？為什麼沒有絕對置中？」
這不是你眼睛有問題，而是大腦在作祟。人類的眼睛並非精密的測量儀器，我們感知到的形狀、顏色與空間，深受周遭環境與物體輪廓的影響。優秀的排版人員不會盲從數據，而是懂得駕馭 UI 視覺心理，透過刻意製造的微調來達到真正的「視覺平衡」。
為什麼「數學正確」不等於「視覺正確」？
我們依賴的設計軟體，其底層邏輯是「幾何邊界（Bounding Box）」。系統只看物件最外圍的長寬矩形，並以此計算中心點。但人眼看東西，看的是「視覺重心（Visual Mass）」。
當一個物件的幾何中心與視覺重心不重疊時，視覺不平衡的狀況就會發生。掌握視覺錯覺 設計的核心關鍵，就是學會判斷什麼時候該相信數值，什麼時候該相信自己的眼睛。
這種「眼見不為憑」的現象，正是視覺心理學迷人之處。想知道大腦是如何欺騙我們，又是如何影響設計決策的嗎？
既然介面設計是為了「人」而服務，我們就必須深入理解人類視覺運作的底層邏輯。當我們學會放下對絕對數據的執著，轉而探究大腦如何解讀畫面時，設計才能真正打動人心。如果你想進一步探索人類視覺感知與解讀圖像的奧祕，強烈建議閱讀這本經典之作。它能幫助你培養出更敏銳的「設計師之眼」，讓你從更宏觀的角度理解觀看這回事。
想深入鑽研這類設計心理學經典，卻又擔心沒時間完整讀完嗎？或許可以試試用更聰明的方式學習。
這款 App 能幫你用 15 分鐘聽完一本書的重點，快速吸收《觀看之道》這類經典的核心洞見，把零碎時間化為設計養分。
LeapAhead5 個常見的視覺錯覺陷阱與破解心法
以下拆解實作中最容易踩坑的圖形錯視與排版陷阱，並提供直接可用的微調解法。
陷阱一：影片播放按鈕的「置中」災難
問題場景：在一個圓形底框中放入一個三角形的播放圖示，使用軟體的自動置中功能後，三角形看起來會嚴重偏左。
背後原理：這是最經典的對齊錯覺。矩形的視覺重心在正中間，但三角形的視覺重心會偏向面積較大、較寬的那一側（也就是左邊的垂直底邊）。軟體對齊的是三角形外框的中心，導致左側留白看起來比右側尖端處少得多。
如何破解：
放棄自動置中。你需要手動將三角形向右微調，直到左側邊緣到圓框的距離，與右側尖端到圓框的距離在視覺上達到面積對等。一個經驗法則是：用三角形的「重心」來對齊圓形的「中心」，而不是用外框對齊。
放棄自動置中。你需要手動將三角形向右微調，直到左側邊緣到圓框的距離，與右側尖端到圓框的距離在視覺上達到面積對等。一個經驗法則是：用三角形的「重心」來對齊圓形的「中心」，而不是用外框對齊。
陷阱二：圖示大小不一致的圖形 錯視（Overshooting）
問題場景：當你正在為蝦皮或 momo購物 等電商 App 設計底部的導覽列（Tab Bar）時，如果你把一個圓形的「首頁」圖示跟一個方形的「購物車」圖示都設定為 24x24 像素，圓形看起來絕對會比方形小一圈。
背後原理：方形填滿了整個 24x24 的面積，但圓形只在四個邊緣的切點碰到邊界，其餘的四個角都是留白。這導致圓形的「視覺體積」明顯小於方形。同理，菱形或三角形看起來也會比較小。
如何破解：
運用字體設計中的「Overshooting（視覺補償）」技巧。讓圓形、三角形或邊緣有弧度的圖示，刻意超出參考線 1 到 2 個像素。如果方形是 24x24，圓形可以設定為 26x26。這種刻意打破數值一致性的排版 錯覺處理，能讓兩者在人眼中看起來一樣大。
運用字體設計中的「Overshooting（視覺補償）」技巧。讓圓形、三角形或邊緣有弧度的圖示，刻意超出參考線 1 到 2 個像素。如果方形是 24x24，圓形可以設定為 26x26。這種刻意打破數值一致性的排版 錯覺處理，能讓兩者在人眼中看起來一樣大。
我們習慣說「眼見為憑」，但在設計的世界裡，這句話往往是最大的陷阱。許多看似真實的圖像，背後可能隱藏著精心設計的視覺暗示。
這種視覺體積的落差，其實是大腦在處理邊界與空間時產生的自然反應。很多時候，我們以為是眼睛看到了真實，但實際上是大腦經過「腦補」後給出的結論。身為設計師，若能掌握大腦的這些潛規則，不只能優化排版，還能大幅提升使用者的操作流暢度。推薦你參考這本深入探討大腦運作機制的書籍，它不僅能解開你對視覺錯覺的疑惑，更能幫助你在設計與職場上更精準地抓住用戶的心智模型。
穿出最好的自己
唐恩．卡倫
46 時長
7 重點
4.7 評分陷阱三：文字與圖示垂直對齊的排版 錯覺
問題場景：一個按鈕裡面同時有「返回圖示」與「返回文字」。你框選兩者並點擊「垂直置中」，結果文字看起來總是比圖示稍微偏下。
背後原理：文字的結構非常複雜，包含了大寫字母、小寫字母、Ascender（如 h, l 的上半部）與 Descender（如 p, y 的下半部）。設計軟體通常以文字框（Text Box）的高度來計算置中，但文字框往往包含了一些為特殊字母預留的隱形上下空間。而圖示通常是飽滿的幾何圖形，兩者用文字框對齊時，真正的視覺重心就會錯位。
如何破解：
先將文字與圖示放在同一個水平基準線（Baseline）上作為參考，然後根據文字的「X字高（x-height）」去對齊圖示的垂直中心。通常你需要把圖示稍微往上挪動 1 到 2 個像素，或者把文字稍微往上抬，直到兩者的視覺重量在一條直線上。
先將文字與圖示放在同一個水平基準線（Baseline）上作為參考，然後根據文字的「X字高（x-height）」去對齊圖示的垂直中心。通常你需要把圖示稍微往上挪動 1 到 2 個像素，或者把文字稍微往上抬，直到兩者的視覺重量在一條直線上。
陷阱四：深色模式下的色彩膨脹效應
問題場景：同樣的字體與字重（Font Weight），在純白背景上顯示黑字非常清晰舒適，但一切換到深色模式（純黑背景白字）時，字體看起來突然變得擁擠、刺眼且肥厚。
背後原理：這是因為「光滲效應（Irradiation Illusion）」。明亮的顏色會向黑暗的區域擴張。白底黑字時，白底會吃掉一點黑字的邊緣，讓字看起來細挺；黑底白字時，白字的光芒會向外暈染，導致筆畫在視覺上變粗。
如何破解：
在設計深色模式的介面時，請勿直接沿用淺色模式的字重設定。如果你在淺色模式使用 Regular（一般），在深色模式可能需要微調成 Light（細），或者稍微增加字距（Letter-spacing）。當你在部落格或文章閱讀區塊應用這種微調時，使用者的眼睛會感謝你。
在設計深色模式的介面時，請勿直接沿用淺色模式的字重設定。如果你在淺色模式使用 Regular（一般），在深色模式可能需要微調成 Light（細），或者稍微增加字距（Letter-spacing）。當你在部落格或文章閱讀區塊應用這種微調時，使用者的眼睛會感謝你。
顏色的明暗變化不僅會影響文字的胖瘦，更是決定資訊傳遞效率的關鍵。在設計數據儀表板或資訊密集的 App 介面時，稍微一點點的光滲效應都可能讓使用者感到視覺疲勞。若你希望在排版與色彩運用上更上一層樓，特別是在呈現複雜報表與數據時能維持畫面的清晰舒適，這本書將會是你的絕佳指南。它教你如何用最符合人類視覺直覺的方式，精準掌握色彩與留白，讓畫面自己說話。
赤裸裸的經濟學
查爾斯．惠蘭
44 時長7 重點4.3 評分陷阱五：大寫字母與形狀的間距錯覺
問題場景：在設定間距（Padding）或留白時，元素與直角字母（如 H、M）旁邊的間距看起來很正常，但遇到有斜角或圓角的字母（如 A、V、W、O）時，間距看起來就突然變大了。
背後原理：字母 A 的兩側斜邊自帶了大量的隱形留白，字母 O 的圓弧邊緣也無法填滿邊界。當這些字母靠近畫面的邊緣或其他圖形時，它們自身的留白會與外部間距疊加，產生視覺不平衡。
如何破解：
排版不是死板的數學公式。當邊緣遇到 A、V、O 這類字母時，可以刻意將文字區塊向外稍微推出去一點（負的 Margin），或者縮小設定的數值間距，吃掉那些多餘的視覺留白，確保整體邊界的對齊感。
排版不是死板的數學公式。當邊緣遇到 A、V、O 這類字母時，可以刻意將文字區塊向外稍微推出去一點（負的 Margin），或者縮小設定的數值間距，吃掉那些多餘的視覺留白，確保整體邊界的對齊感。
如何在日常設計中落實視覺平衡？
理解了上述這些錯覺陷阱，你就會明白，真正的進階排版技巧，是在「規範」與「感受」之間取得平衡。
- 先用數值打底，再用眼睛微調：永遠先依賴軟體的網格（Grid）與對齊工具建立基礎架構。完成後，將畫面縮小至實際在行動裝置上觀看的尺寸，稍微瞇起眼睛觀察。哪裡覺得重、哪裡覺得歪，就針對那裡進行手動偏移。
- 建立「視覺邊界」而非「幾何邊界」的設計系統：在切圖或製作元件（Component）時，將 Overshooting 的空間直接包含在圖示的透明背景框內。例如，統一輸出 24x24 的框，但內部的方形畫 20x20，圓形畫 22x22。這樣工程師在套用時只需要對齊外框，就能自動實現視覺平衡。
- 倒轉畫面檢查法：如果你看一個畫面看太久，視覺已經疲勞，可以把整個畫布水平翻轉或上下顛倒。當內容失去原有的語意意義時，你的大腦就能純粹透過形狀與重量來判斷排版有沒有歪斜。
這些微調技巧的背後，都指向一個核心能力：敏銳的觀察力。學會如何「看」，遠比學會如何操作軟體更為重要。
優秀的視覺平衡能打造出無摩擦的使用體驗，而這種「順暢感」正是讓使用者不知不覺愛上產品的關鍵第一步。當你將排版細節做到極致，不僅能降低操作門檻，還能潛移默化地引導用戶行為，建立起長期的使用習慣。想要從介面視覺設計進階到打造具有高黏著度的數位產品，這本探討產品成癮機制的暢銷書絕對不容錯過。它將帶你從行為心理學的角度，重新檢視你的設計如何完美融入使用者的日常。
文中提到了好幾本經典好書，若你希望能更有效率地吸收這些大師的智慧，卻總是被日常工作佔滿時間，不妨試試這個方法。
想一次搞懂文中推薦的設計與心理學名著，卻沒空讀完？用它快速掌握每本書的精華，把大師洞見應用到你的產品工作中。
LeapAheadFAQ
Q1：工程師只看數值，我該怎麼跟他溝通這種「視覺錯覺」需要微調？
別用「我覺得看起來比較順」這種主觀感受去溝通。你可以用「視覺重心對齊」或「視覺補償（Overshooting）」等專業術語向工程師解釋原理，並展示對比圖（有微調 vs 沒微調）。最好的做法是在交付的設計稿上，直接標示出「此處為了視覺補償，刻意偏移 -2px」，讓這個微調變成一個明確的規格，而不是隨機的誤差。
別用「我覺得看起來比較順」這種主觀感受去溝通。你可以用「視覺重心對齊」或「視覺補償（Overshooting）」等專業術語向工程師解釋原理，並展示對比圖（有微調 vs 沒微調）。最好的做法是在交付的設計稿上，直接標示出「此處為了視覺補償，刻意偏移 -2px」，讓這個微調變成一個明確的規格，而不是隨機的誤差。
Q2：Figma 等設計軟體有自動校正這些視覺不平衡的功能嗎？
目前多數主流軟體還是以幾何邊界計算為主。不過，文字排版方面有些進階功能正在完善，例如 Figma 裡的「垂直修剪（Vertical Trim）」功能，就能削去文字框上下多餘的行高留白，幫助你更精準地對齊文字與圖示的真實高度。但對於形狀與重心的錯覺，依然需要仰賴設計師的雙眼判斷。
目前多數主流軟體還是以幾何邊界計算為主。不過，文字排版方面有些進階功能正在完善，例如 Figma 裡的「垂直修剪（Vertical Trim）」功能，就能削去文字框上下多餘的行高留白，幫助你更精準地對齊文字與圖示的真實高度。但對於形狀與重心的錯覺，依然需要仰賴設計師的雙眼判斷。
Q3：如果每個圖示都要微調，工作效率會不會變得很低？
微調應該要在設計系統（Design System）的建置階段就處理好。當你在建立 Icon 庫時，就已經將圓形、三角形、方形的比例用網格（Icon Grid）統一做好視覺補償，並且設定好統一的外框尺寸。這樣在日常頁面排版時，你只要直接拖曳元件，就能兼顧工作效率與視覺平衡了。
微調應該要在設計系統（Design System）的建置階段就處理好。當你在建立 Icon 庫時，就已經將圓形、三角形、方形的比例用網格（Icon Grid）統一做好視覺補償，並且設定好統一的外框尺寸。這樣在日常頁面排版時，你只要直接拖曳元件，就能兼顧工作效率與視覺平衡了。
Q4：中文字也會有這種錯覺問題嗎？
當然會。中文字的方塊字特性雖然相對英文字母整齊，但不同筆畫密度的字，視覺重量差異極大。例如「一」跟「龜」放在同樣大小的按鈕中，視覺體積感完全不同；此外，標點符號（如逗號、引號）在排版時也常常會造成邊界看起來沒有對齊的錯覺，這就是為什麼進階排版中會有「標點懸掛」的處理方式。
當然會。中文字的方塊字特性雖然相對英文字母整齊，但不同筆畫密度的字，視覺重量差異極大。例如「一」跟「龜」放在同樣大小的按鈕中，視覺體積感完全不同；此外，標點符號（如逗號、引號）在排版時也常常會造成邊界看起來沒有對齊的錯覺，這就是為什麼進階排版中會有「標點懸掛」的處理方式。