「視覺補正」是什麼？

01-25

在這張圖裡第一次看到這個概念：
「糟糕的設計師」、「普通的設計師」、「好的設計師」，有專業的設計師來講解一下這張圖嗎？ - 視覺設計
搜了一下，有關的只有這個訪談：
Sony Design x Monotype 字型設計師小林章訪談(上)

僅僅只有一個很簡單的介紹：
視覺補正：防止因錯視覺等看見非設計意圖呈現的形象而微調文字的線條長度或形狀校正錯視覺
英文用 Visual Correction 也沒搜出什麼。
請問：
- 「視覺補正」這個概念是誰提出來的？
- 英文/日文的對應翻譯是？
- 有什麼網站或書籍系統講解「視覺補正」？
謝謝。

- 「視覺補正」是什麼

我們知道人的眼睛實際上會產生視覺錯誤，比如下面的圖片，大家肯定都見過：

圖中的水平線看起來是傾斜的，但實際上卻相互平行。這樣的視錯覺叫做幾何錯覺，再來看看下面的正方形、三角形和圓形：

上面的正方形、三角形和圓形幾何測量上等高，但是圓形看起來卻要小一些，而三角形的頂角看起來卻要矮一些。下面是根據這一現象調整過的圖案，看起來是不是和諧了許多？在字體設計中也一樣，比如下面的字樣（Adobe Garamond Pro）：

五個字母看起來等高，很和諧。但是畫上線

以後就會發現，O 的上下多出來一點，A 的尖頂要高。

這就是題主所說的「視覺補正」（術語應當叫做 overshoot），是字體設計師為了避免視錯覺帶來的不和諧而對字形做的微小的調整。

- 英文/日文的對應翻譯是？

「視覺補正」可能只是一個口頭上的叫法，或者一個翻譯時根據原文起的名字，它的術語應當叫作 Overshoot。

- 有什麼網站或書籍系統講解「視覺補正」？

同樣的概念在許多字體設計教程中都有提及，比如這篇 Design With FontForge 中。但是裡面並沒有提到「視覺補正」，而是用另外一個概念「視覺高度（perceived height）」闡述了這一點。

至於系統的講解，我並不清楚，還待他人補充吧。

- 一點參考資料

Cafe wall illusion
Overshoot (typography)

一般來說在 typography 內，第二行的調整叫做 Kerning，第三行叫做 Overshoot。具體的提出者已經不可考了，很可能在極早期的活字設計中就有類似的應用。

對於 Overshoot 的大小研究，在 Peter Karow 提出的經驗公式裡面，圓弧形的部分（如 o）溢出 3%，A 的尖角溢出 5%。但是這方面仍然欠缺科學的、系統性的研究，Type designer 確定這些數值的大小，基本就是靠試……

謝謝邀請。我也是第一次看到「視覺補正」這個概念。拋磚引玉，僅說一下我自己的理解。

「視覺補正」的翻譯

西文字體設計中有一個Optical adjustment的概念。

Optical adjustment
Any adjustment made to the design of a letterform, its placement, or the space that surrounds it that is based upon aesthetics or visual criteria as opposed to measurement or mathematical formulas.

我的渣翻譯：依據美學或視覺標準而不是遵照精確的測量或數學公式的對字型的設計、擺放和周圍空間的調整。

這是我找到的最接近題中「視覺補正」的定義的英文typography術語了。但這個定義中沒有像「視覺補正」那樣強調「錯視覺」。鑒於此我覺得西文里未必有與「視覺補正」完全對應的概念。

Overshoot和字距調整

題中那張對比Bad Design、Average Design和Good Design的圖講的是透過Overshoot使各字母的高度數學不一致但看起來一致，以及通過調整字母間距使不同字母間的垂直距離一樣。根據小林章那篇訪談中給出的「視覺補正」的定義，overshoot肯定是屬於「視覺補正」的範疇的。但將三角形和圓形的垂直距離定為與方形和圓形的垂直距離一樣，別說是「視覺補正」了，連字距調整都不算。真正的字距調整是依靠人眼判斷和調整字母對之間的距離使字母間包含均衡的空白空間，而不是像圖中（有些誤導地）示意的僅僅將水平等距改成垂直等距。

應用Overshoot這種「視覺補正」手段的原因是當形狀不一樣時人眼有時會將高度上的一致的看成不一致，因而需要從設計上補償，達到數學上不一致但視覺上卻一致的效果。比如字母「I」、「O」和「A」，如果數學上高度一致，方形頂端的字母看起來會比圓形頂端的高，圓形頂端的又會比尖形頂端的高。因而就需要「O」設計得比「I」高一些，「A」還要更高一些，才能使它們全都看起來一般高。

（圖片來源：Frere-Jones Type）

字距需要調整是因為字母的形狀各異，不能僅僅依據簡單的測量來確定字母間的間距，必須從視覺上去調整不同的字母組合之間的間距，使它們包圍的空白空間達到視覺上的均衡，從而實現雖然字母間距不一樣但看起來字母間距一樣的效果。比如下圖中上面一行是沒有進行字偶距調整的，字母的水平間距是基本一樣的，但各字母組合間的空白卻大小不一，看起來有一種磕磕絆絆的感覺，非常不利於閱讀。下面一行是對每個字母對手工調整過的，使字母之間的空白達到了均衡，這才是我們一般閱讀時能夠接受的效果。字距調整我覺得是不符合前面的「視覺補正」的定義的（因為都沒涉及視錯覺），但應該符合optical adjustment的定義。

可能屬於「視覺補正」的設計手段

除了overshoot以及那篇訪談中提及的橫細豎粗原則還有另外一些矯正視覺誤差的設計手段，應該也算是「視覺補正」，比如：

字母「x」，一般右上到左下的斜線（細的那條）並不是連續的，而是在中間錯開一點，下半段要向上偏一點，否則看起來這條線將會像在中間折斷。
長的線條要比短的傾斜得少一些，這樣表面上看起來他們的傾斜度才會相同。
一些字母如果完全豎直會有一種向前或向後傾倒的感覺，所以設計師可能會故意將字母設計得稍微傾斜一點來補償視覺上的前傾或後傾。比如Frutiger的Meridien，在Frutiger的原始設計中字母「p」和「r」的主幹都不是完全豎直的，而是稍微向左傾（但後來Linotype的數字化版本不知為何沒有保留這個小細節）。

相關資料

Tobias Frere-Jones的博客：Frere-Jones Type。這是非常好的了解overshoot的文章。
Karen Cheng的：字體設計的規則與藝術 (豆瓣)。介紹了非常多的字體設計細節，不乏能夠歸入「視覺補正」範疇的。
Design With FontForge: Trusting Your Eyes。

我又來打岔了。。。

這個題目很適合科研標籤，單單對設計師來說可能意義不大。問題絕對是個好問題，但請學設計的們警惕知乎的討論習慣——不要摳概念。不要摳概念。不要摳概念。

估計因為高中學理科，我之前有相當長的一段時間都被各種設計文章里的規則、套路唬住了，以為設計也有唯一解；一來設計網站拿概念唬人的混子太多，二來自學教材也良莠不齊。總之不是特敢相信自己的直覺。答這個題是想提醒其他跟我一樣還在摸索的同學們，視覺補正應該知道，也應該記住，但它不存在普適性規律，多看多試，比什麼都重要。別把自己帶溝里去，我走過彎路了，希望你們不要走。老設計師跟設計新人看待概念的視角心態完全不一樣，我們當學徒的不要急功近利。

一張圖能感覺出來的問題，到一千張圖才能熟稔的視覺經驗，都不要試圖通過一個科學概念去掌握。你根本掌握不了。

目前在德國學習，有些課拼圖做稿比國內還原始，初期兩輪的學生稿甚至不允許用電腦，第一輪純手繪，第二輪只能把黑白材料列印剪出來一個個去用膠水拼。。改稿基本靠看。。

這裡貼個早先字體課的講義舉例吧（整份理論講義里也沒有花大篇幅解釋視覺補正，只是教授附帶說明了一下）。

仔細看下圖，除了k跟f上端兩條線指出明顯的overshoot外，g跟o的上下兩端，p的上端，大寫G下端，都有不同程度的突出，都算視覺補正。

這意味著字形一變，視覺補正也要變……圖案同理。影響視覺膨脹收縮感的因素還有顏色，正負形，弧度，等等等等......它們在實際應用中的組合無窮無盡，所以最靠譜的測量器材只有眼睛。運氣不好碰到不熟悉的，幾行字幾張圖要que一晚上，哪裡多一點好，哪裡少一點好，都是玄學。。

早前截過設計師陳紹華（01年北京申奧logo作者）針對「設計圈如何看待視覺補正」發表的重要講話，看到這題想起來了，貼在最後。

來領略一下陳老師豪邁的批評風格~哈哈哈哈~

看來在漢字、字母、數字，以及其他字母符號混排場合，要有一個好的視覺效果對於字形設計師還是有要求的。

目前動車組上面鐵道部標緻與「和諧號」三個字就非常不和諧。

做圖標也比較適用

跟中文字體一樣，「國」「因」之類的字，框要小一號，看上去和別的字才一樣大。