來源：Medium

作者：Slava Shestopalov

“一看就會，一做就廢”，設計師們常常對最新的技術、風格、發展趨勢侃侃而談，卻忽略了最基礎的原則和理論.

本文作者Slava Shestopalov是eleks的設計團隊負責人。在本文中他從視覺格式塔理論的角度爲我們闡述如何用視覺誤差平衡我們的設計。即使是現在，這些研究對於UI、字體、和平面設計師來說依然是至關重要的。希望可以對大家有所幫助。

原文內容

眼睛經常會欺騙我們，但如果我們瞭解了人類視覺的特性，就能設計出更友好、乾淨的設計。視覺技巧不僅僅只對字體設計師們有用，對於UI設計師也很有幫助。

20世紀20年代，視覺格式塔理論建立。它解釋了我們的眼睛如何處理不同的圖像，以及大腦如何重構它們。你可能已經聽過了“接近原理”和“相似原理”，但本文將引用格式塔理論的一些觀點，站在實操性的角度爲大家闡述這些視覺理論。

>>>>

測量大小&視覺大小

以下400px*400px的正方形和400px*400px的圓形哪個更大？

從幾何方面講，它們的寬度和高度是相等的。但從視覺感受，是不是發現正方形比圓形更大？

下面是帶有輔助線標記的版本。

我們再來看一張相似的圖片。

是不是發現它們的視覺權重變得相似了？不要奇怪，這是因爲我增加了圓的直徑。

如果感受不夠明顯的話，我們將兩張圖片的形狀重疊。

可以發現左邊的正方形比圓形面積大，視覺權重也更大。而右邊的圓形和正方形的面積是是相等的，它們的視覺效果也更平衡。

我們也可以用方形和三角形來見證同樣的效果。爲了在視覺上與方形保持平衡，三角形應該更寬、更高，這樣它們的面積纔會相似。需要注意的是，此方法只適用於簡單形狀。

如何在界面中利用這個特性？舉個例子，當我們在創建一組圖標時，每個圖標相互之間的視覺平衡是非常重要的，如果我們直接將圖標嵌入方形區域，那麼面積更大、更像方形的圖標視覺權重也會更大。

因此我們可以通過補償不同形狀圖標的面積來平衡視覺，允許較小的圖標超出圖標區域之外，並在較大的圖標和圖標區域之間留出一些空間。

下面這組圖標在視覺上是完全平衡的。

現在可以理解爲什麼圖標區域總是大於圖標主體了——就是讓非方形的圖標看起來不小於方形圖標。

在這裏給大家一個小技巧——檢查視覺平衡最簡單的方法就是進行模糊化處理。如果我們的圖像變成了相似大小的小塊，那麼就證明它們具有相同的視覺權重。

不過，我們很多時候都要處理已經存在的圖形。比如Facebook和Instagram的圖標是方形的，而Twitter的圖標是鳥的輪廓，Pinterest的圖標是一個環繞的“P”。如果將Twitter和Pinterest的圖標放大一些，看起來就能和Facebook和Instagram的圖標保持平衡了。

視覺平衡的另一個例子就將是一個文本框和一個圓形按鈕放在一起。如果按鈕的直徑等於文本框的高度，那麼我們就會覺得按鈕更小，當把按鈕放大一點，整個結構就會變得更加平衡。

但是，如果我們改變了按鈕的樣式，就不需要放大了。在下面的圖片中，按鈕和文本框都是80像素高的，但是右邊的按鈕看起來並沒有“變小”，因爲它有很深的黑色填充。

- 重點

• 視覺重量由人眼感知的物體大小來決定，並不一定等於物體的實際像素或面積。
• 圓形、菱形、三角形和其他非正方形的形狀需要更高、更寬，才能在視覺上與方形的形狀保持平衡。
• 圖標區域應該預留一些空間用於視覺平衡，這對於圖標組來說非常重要。

>>>>

實際對齊vs視覺對齊

視覺對齊是視覺平衡的邏輯延續。下圖的條帶，它們看起來一樣長嗎？

像素上，是的。但在視覺效果方面，下面的條形看起來似乎要比上面的短。

如果將它們稍稍改變一下，效果是不是不一樣了?

其實我只是對下面的條形進行了視覺補償處理，將長度延長了20px，以補償下方條形尾部的間隙，使兩個條形在視覺上平衡。

還有一些更復雜的形狀案例。

如果我們要設計一張有摺疊條紋和文字元素的海報，或者需要一條顯眼的“打折”條紋，那麼就要注意讓它們在視覺上保持平衡，尖角可以突出形狀外圍一點，特別是長方形的情況。

那麼，如何對齊有背景的純文本或段落呢?

這取決於背景的視覺密度。如果是淺色背景，我們可以將突出顯示的段落與其他文本對齊。

由於背景是淺色的，所以不會中斷或干擾我們的閱讀體驗。

而對於密集的背景則要使用不同的方法。在下面的圖片中，黑色背景與其它文字對齊，而要突出的白色文字則進行了縮進處理。

與淺色背景的情況不同，黑色背景有很大的視覺權重，如果要把它無縫插入一個段落，那麼最好按照如下方式對齊。

同樣的原理也適用於按鈕和輸入字段。當然這不是教條的規則，只是基於視覺感知的建議。

在左圖中，由於輸入框是淺色背景，所以背景框是完全可以超出其他輸入文本的。而由於“發送”按鈕的顏色較深，視覺重量更大，所以與輸入背景的右邊緣完全對齊。

而在右圖中，由於輸入框有實線描邊，所以我們將它與其他文本對齊，並且將對應的文本內容進行了縮進處理。“發送”按鈕有一個三角形的邊，並且向右移動了一點，以與上面的矩形輸入元素保持平衡。

我們再來看視覺對齊的另外一種情況——文字與按鈕的對齊。看看下面按鈕中的文本，它們看起來都居中是嗎？

訣竅是，我右邊按鈕的文本向左移動了一點，因爲右邊的邊是三角形的。除此之外，還把箭頭狀按鈕加寬了40px，這樣看起來就與矩形按鈕平衡了。

按鈕和文字不僅有垂直對齊，也有水平對齊的問題。

我想介紹的第一種方法適用於各種網頁和APP的界面中，即文字的高度基於大寫字母的最高高度。

基本上，文字的上下距離按鈕邊緣的距離是相等的。這是合理的，因爲命令名常是大寫開頭，有更多上升的趨勢，l, t, d, b, k, h這樣上升的部分多於y, j, g, p這樣下延的部分。

第二種方法，是將小寫字母的上下與按鈕上下端等距（x高度）。這種方法也是合理的，可以將視覺重量主要集中在小寫字母的範圍內。

那這兩種方法有什麼區別嗎？答案是：區別不大。

下圖更多案例中，Cancel和OK更適合使用大寫高度對齊的方法。因爲Cancel沒有向下延伸，而OK全是大寫。x高度對齊法在下圖中僅適合用在Sync按鈕中，其文本包含了向上伸展和向下延伸。Cancel和OK用x高度對齊法就有點太高了。

圖標按鈕的情況與文本按鈕略有不同。我們把“發送”圖案放在一個圓形按鈕的背景上。你認爲哪種圖標在視覺上更平衡?

你應該已經注意到左邊的不平衡了，這是因爲不同的對齊方法。第一種，是矩形對齊方法，這當然是沒錯的，因爲你切出來的svg/png就是矩形的，工程師開發時看到的也是矩形。而在第二個方案中，我們移動了圖標的位置，使圖標銳利的突出與圓形邊緣等距。

所以如果你要輸出給開發人員，那麼最好偏移一些距離，以便將圖形維持在視覺中心。

播放按鈕也是一樣，如果你直接對齊這些形狀，那麼它們看起來會很奇怪。

如果你想讓三角形的位置在視覺上更平衡，那麼就把它圈起來，然後將這個圓與按鈕背景對齊。

- 要點：

• 具有尖銳邊緣的形狀應該更大或更長，以便與相鄰的矩形保持平衡。
• 用大寫高度對齊法通常是對齊文字與背景按鈕的有效方法。
• 要讓三角形圖標與按鈕對齊平衡，可以用其外接圓與背景按鈕對齊。

>>>>

實際圓角vs視覺圓角

如何比圓形更圓？我之前沒想過這問題，但就像文章開始我說的，眼睛總是不按照我們想象的那樣反映事物。所以，下圖那個圓形顯得更圓潤？

大多數人通常會在3和4之間做選擇。1號和2號太瘦了，5號太胖了。如果我們把第三個和第四個圖形重疊起來，會得到一個幾何圓和一個修改過的圓。

發現了嗎？後者要比第一個圓更具有視覺重量，對我們的眼睛來說也更光滑。

爲讓大家加深理解，我從三種常用的的幾何字體——Futura、Circe和Geometria中選取了字母“o”。由於這些高精度的字體是基於人類複雜的視覺感知系統構建的，所以它們的圓形看起來要比幾何圓形更圓潤。

我們用幾何圓把它們重疊起來，會發現即使是最接近於幾何圓的Futura的“o”也有四個突出的部分。此外，Circe和Geometria的字母比圓還要寬，但即使它們的高度和寬度相等，我們也能看到這四個“肚子”，就好像它們喫得太多了。

所以從視覺上來說，左邊那種被修改過的圓形會比右邊的幾何圓形看起來更加圓潤。

我們如何利用這一原理？當然是圓角！因爲即使在當前流行的圖像編輯軟件中用“嵌入式舍入”（就是普通布爾運算做出的圓角）功能，視覺效果也不怎麼好。

人眼會敏銳的捕捉到由直線變化爲曲線的那個點，所以這個圓角看上去不怎麼自然。

考慮到視覺感知，我解決了這個問題。

這種類型的圓角在圓形外面有一個額外的區域，使得直線與曲線的交點不明顯。

試着體會一下兩種方法之間的不同吧。

現在我們可以將這種方法應用於圓角按鈕。

可以發現右邊的按鈕有更平滑的圓角，而且視覺效果也更好。

APP 圖標也是如此，用標準的圓角是不能達到完美效果的。在深入討論這個話題之前，我們先來看看兩個不同的圓形。

第一個是在Sketch中創建的圓角矩形，第二個是勾選了“平滑圓角”的圓角矩形，也稱作Lamé曲線。這是法國數學家加布裏埃爾·拉姆發現的規律，這套公式可以解決從四角星形到圓角矩形的的平滑問題。

Marc Edwards提出了拉姆曲線的公式，使得形狀在視覺上光滑而完美。ios7的桌面圖標就基於此公式。

後來這個形狀通過黃金分割網格進行了修改。其思想是不變的，不過這是另一個故事了。

使用“平滑圓角”的好處主要是它們超級平滑的外觀。但從另外一方面看，這些非標準的形狀是難以應用到真實界面當中的。應該將多個SVG組合在一起，在代碼中包含特殊的公式或腳本，或者使用像Apple的應用程序圖標一樣把png放在一個統一的蒙版上。

而從設計上講，有一個簡單修改圓角的方法，那就是先進入編輯路徑模式，然後把他們變成非標準的路徑，直接操作貝塞爾角點的槓桿，讓它們彼此靠近一點。

銳角平滑的差異會更加明顯，這種方法對於繪製道路或地鐵方案來說非常有效。

- 要點

• 幾何圓角看起來很不自然，那是因爲人眼可以輕易地看到直線突然變成曲線的點。
• 視覺平滑曲邊需要手動操縱角點槓桿。

- 除此之外

幾何正方形看起來也會不那麼"方正"？你可能會說“省省吧”。那你看下面哪個正方形顯得更正呢？

如果你選左邊，那就是聽從了自己無偏見的視覺感受了。

有趣的是，相比寬度，我們的眼睛對物體的高度更加敏感。這也解釋了爲什麼即使在幾何字體中，字母“o”總是比幾何圓寬，而字母“H”的豎線總是比橫線粗。

>>>>

由於本文對該主題的理解有限，您可以選擇繼續探索。 這裏有一些關於格式塔心理學起源及其最初想法的文章和書籍清單。

巴里史密斯——《格式塔理論：哲學論文》，1988年。深入研究格式塔理論起源以及人類感知的哲學和心理方面。

Steven Lehar——《你頭腦中的世界：意識體驗機制的完形視圖》，2002年。這本書解釋了人們如何看待現實。 事實證明，我們看到的不是現實世界，而是它在大腦中的反映。

詹姆斯J.吉布森——《視覺世界的感知》，1950年。 這本書展示了我們大腦中的物理過程如何影響我們看待世界的方式。

詹姆斯J.吉布森——《視覺感知的生態學方法》，1979年。

George Boeree——《格式塔心理學》。

格式塔思想的簡史。 格式塔心理學創始人的傳記：Max Wertheimer，Kurt Koffka和WolfgangKöhler。

原文鏈接：https://medium.muz.li/optical-effects-9fca82b4cd9a

今天的內容就到這裏啦~

小夥伴們呢還有什麼想法和建議

記得給我們留言哦~

用設計的角度看世界，用學習的方式來成長

BigDcc