本文作者Slava Shestopalov是eleks的設(shè)計團(tuán)隊(duì)負(fù)責(zé)人。在本文中他從視覺格式塔理論的角度為我們闡述如何用視覺誤差平衡我們的設(shè)計。即使是現(xiàn)在，這些研究對于UI、字體、和平面設(shè)計師來說依然是至關(guān)重要的。希望可以對大家有所幫助。
眼睛經(jīng)常會欺騙我們，但如果我們了解了人類視覺的特性，就能設(shè)計出更友好、干凈的設(shè)計。視覺技巧不僅僅只對字體設(shè)計師們有用，對于UI設(shè)計師也很有幫助。
20世紀(jì)20年代，視覺格式塔理論建立。它解釋了我們的眼睛如何處理不同的圖像，以及大腦如何重構(gòu)它們。你可能已經(jīng)聽過了“接近原理”和“相似原理”，但本文將引用格式塔理論的一些觀點(diǎn)，站在實(shí)操性的角度為大家闡述這些視覺理論。
以下400px*400px的正方形和400px*400px的圓形哪個更大？
從幾何方面講，它們的寬度和高度是相等的。但從視覺感受，是不是發(fā)現(xiàn)正方形比圓形更大？
下面是帶有輔助線標(biāo)記的版本。
我們再來看一張相似的圖片。
是不是發(fā)現(xiàn)它們的視覺權(quán)重變得相似了？不要奇怪，這是因?yàn)槲以黾恿藞A的直徑。
如果感受不夠明顯的話，我們將兩張圖片的形狀重疊。
可以發(fā)現(xiàn)左邊的正方形比圓形面積大，視覺權(quán)重也更大。而右邊的圓形和正方形的面積是是相等的，它們的視覺效果也更平衡。
我們也可以用方形和三角形來見證同樣的效果。為了在視覺上與方形保持平衡，三角形應(yīng)該更寬、更高，這樣它們的面積才會相似。需要注意的是，此方法只適用于簡單形狀。
如何在界面中利用這個特性？舉個例子，當(dāng)我們在創(chuàng)建一組圖標(biāo)時，每個圖標(biāo)相互之間的視覺平衡是非常重要的，如果我們直接將圖標(biāo)嵌入方形區(qū)域，那么面積更大、更像方形的圖標(biāo)視覺權(quán)重也會更大。
因此我們可以通過補(bǔ)償不同形狀圖標(biāo)的面積來平衡視覺，允許較小的圖標(biāo)超出圖標(biāo)區(qū)域之外，并在較大的圖標(biāo)和圖標(biāo)區(qū)域之間留出一些空間。
下面這組圖標(biāo)在視覺上是完全平衡的。
現(xiàn)在可以理解為什么圖標(biāo)區(qū)域總是大于圖標(biāo)主體了——就是讓非方形的圖標(biāo)看起來不小于方形圖標(biāo)。
在這里給大家一個小技巧——檢查視覺平衡最簡單的方法就是進(jìn)行模糊化處理。如果我們的圖像變成了相似大小的小塊，那么就證明它們具有相同的視覺權(quán)重。
不過，我們很多時候都要處理已經(jīng)存在的圖形。比如Facebook和Instagram的圖標(biāo)是方形的，而Twitter的圖標(biāo)是鳥的輪廓，Pinterest的圖標(biāo)是一個環(huán)繞的“P”。如果將Twitter和Pinterest的圖標(biāo)放大一些，看起來就能和Facebook和Instagram的圖標(biāo)保持平衡了。
視覺平衡的另一個例子就將是一個文本框和一個圓形按鈕放在一起。如果按鈕的直徑等于文本框的高度，那么我們就會覺得按鈕更小，當(dāng)把按鈕放大一點(diǎn)，整個結(jié)構(gòu)就會變得更加平衡。
但是，如果我們改變了按鈕的樣式，就不需要放大了。在下面的圖片中，按鈕和文本框都是80像素高的，但是右邊的按鈕看起來并沒有“變小”，因?yàn)樗泻苌畹暮谏畛洹?/p>
- 重點(diǎn)
視覺對齊是視覺平衡的邏輯延續(xù)。下圖的條帶，它們看起來一樣長嗎？
像素上，是的。但在視覺效果方面，下面的條形看起來似乎要比上面的短。
如果將它們稍稍改變一下，效果是不是不一樣了?
其實(shí)我只是對下面的條形進(jìn)行了視覺補(bǔ)償處理，將長度延長了20px，以補(bǔ)償下方條形尾部的間隙，使兩個條形在視覺上平衡。
還有一些更復(fù)雜的形狀案例。
如果我們要設(shè)計一張有折疊條紋和文字元素的海報，或者需要一條顯眼的“打折”條紋，那么就要注意讓它們在視覺上保持平衡，尖角可以突出形狀外圍一點(diǎn)，特別是長方形的情況。
那么，如何對齊有背景的純文本或段落呢?
這取決于背景的視覺密度。如果是淺色背景，我們可以將突出顯示的段落與其他文本對齊。
由于背景是淺色的，所以不會中斷或干擾我們的閱讀體驗(yàn)。
而對于密集的背景則要使用不同的方法。在下面的圖片中，黑色背景與其它文字對齊，而要突出的白色文字則進(jìn)行了縮進(jìn)處理。
與淺色背景的情況不同，黑色背景有很大的視覺權(quán)重，如果要把它無縫插入一個段落，那么最好按照如下方式對齊。
同樣的原理也適用于按鈕和輸入字段。當(dāng)然這不是教條的規(guī)則，只是基于視覺感知的建議。
在左圖中，由于輸入框是淺色背景，所以背景框是完全可以超出其他輸入文本的。而由于“發(fā)送”按鈕的顏色較深，視覺重量更大，所以與輸入背景的右邊緣完全對齊。
而在右圖中，由于輸入框有實(shí)線描邊，所以我們將它與其他文本對齊，并且將對應(yīng)的文本內(nèi)容進(jìn)行了縮進(jìn)處理?！鞍l(fā)送”按鈕有一個三角形的邊，并且向右移動了一點(diǎn)，以與上面的矩形輸入元素保持平衡。
我們再來看視覺對齊的另外一種情況——文字與按鈕的對齊。看看下面按鈕中的文本，它們看起來都居中是嗎？
訣竅是，我右邊按鈕的文本向左移動了一點(diǎn)，因?yàn)橛疫叺倪吺侨切蔚?。除此之外，還把箭頭狀按鈕加寬了40px，這樣看起來就與矩形按鈕平衡了。
按鈕和文字不僅有垂直對齊，也有水平對齊的問題。
我想介紹的第一種方法適用于各種網(wǎng)頁和APP的界面中，即文字的高度基于大寫字母的最高高度。
基本上，文字的上下距離按鈕邊緣的距離是相等的。這是合理的，因?yàn)槊蠲Ｊ谴髮戦_頭，有更多上升的趨勢，l, t, d, b, k, h這樣上升的部分多于y, j, g, p這樣下延的部分。
第二種方法，是將小寫字母的上下與按鈕上下端等距（x高度）。這種方法也是合理的，可以將視覺重量主要集中在小寫字母的范圍內(nèi)。
那這兩種方法有什么區(qū)別嗎？答案是：區(qū)別不大。
下圖更多案例中，Cancel和OK更適合使用大寫高度對齊的方法。因?yàn)镃ancel沒有向下延伸，而OK全是大寫。x高度對齊法在下圖中僅適合用在Sync按鈕中，其文本包含了向上伸展和向下延伸。Cancel和OK用x高度對齊法就有點(diǎn)太高了。
圖標(biāo)按鈕的情況與文本按鈕略有不同。我們把“發(fā)送”圖案放在一個圓形按鈕的背景上。你認(rèn)為哪種圖標(biāo)在視覺上更平衡?
你應(yīng)該已經(jīng)注意到左邊的不平衡了，這是因?yàn)椴煌膶R方法。第一種，是矩形對齊方法，這當(dāng)然是沒錯的，因?yàn)槟闱谐鰜淼膕vg/png就是矩形的，工程師開發(fā)時看到的也是矩形。而在第二個方案中，我們移動了圖標(biāo)的位置，使圖標(biāo)銳利的突出與圓形邊緣等距。
所以如果你要輸出給開發(fā)人員，那么最好偏移一些距離，以便將圖形維持在視覺中心。
播放按鈕也是一樣，如果你直接對齊這些形狀，那么它們看起來會很奇怪。
如果你想讓三角形的位置在視覺上更平衡，那么就把它圈起來，然后將這個圓與按鈕背景對齊。
- 要點(diǎn)：
如何比圓形更圓？我之前沒想過這問題，但就像文章開始我說的，眼睛總是不按照我們想象的那樣反映事物。所以，下圖那個圓形顯得更圓潤？
大多數(shù)人通常會在3和4之間做選擇。1號和2號太瘦了，5號太胖了。如果我們把第三個和第四個圖形重疊起來，會得到一個幾何圓和一個修改過的圓。
發(fā)現(xiàn)了嗎？后者要比第一個圓更具有視覺重量，對我們的眼睛來說也更光滑。
為讓大家加深理解，我從三種常用的的幾何字體——Futura、Circe和Geometria中選取了字母“o”。由于這些高精度的字體是基于人類復(fù)雜的視覺感知系統(tǒng)構(gòu)建的，所以它們的圓形看起來要比幾何圓形更圓潤。
我們用幾何圓把它們重疊起來，會發(fā)現(xiàn)即使是最接近于幾何圓的Futura的“o”也有四個突出的部分。此外，Circe和Geometria的字母比圓還要寬，但即使它們的高度和寬度相等，我們也能看到這四個“肚子”，就好像它們吃得太多了。
所以從視覺上來說，左邊那種被修改過的圓形會比右邊的幾何圓形看起來更加圓潤。
我們?nèi)绾卫眠@一原理？當(dāng)然是圓角！因?yàn)榧词乖诋?dāng)前流行的圖像編輯軟件中用“嵌入式舍入”（就是普通布爾運(yùn)算做出的圓角）功能，視覺效果也不怎么好。
人眼會敏銳的捕捉到由直線變化為曲線的那個點(diǎn)，所以這個圓角看上去不怎么自然。
考慮到視覺感知，我解決了這個問題。
這種類型的圓角在圓形外面有一個額外的區(qū)域，使得直線與曲線的交點(diǎn)不明顯。
試著體會一下兩種方法之間的不同吧。
現(xiàn)在我們可以將這種方法應(yīng)用于圓角按鈕。
可以發(fā)現(xiàn)右邊的按鈕有更平滑的圓角，而且視覺效果也更好。
APP 圖標(biāo)也是如此，用標(biāo)準(zhǔn)的圓角是不能達(dá)到完美效果的。在深入討論這個話題之前，我們先來看看兩個不同的圓形。
第一個是在Sketch中創(chuàng)建的圓角矩形，第二個是勾選了“平滑圓角”的圓角矩形，也稱作Lamé曲線。這是法國數(shù)學(xué)家加布里埃爾·拉姆發(fā)現(xiàn)的規(guī)律，這套公式可以解決從四角星形到圓角矩形的的平滑問題。
Marc Edwards提出了拉姆曲線的公式，使得形狀在視覺上光滑而完美。ios7的桌面圖標(biāo)就基于此公式。
后來這個形狀通過黃金分割網(wǎng)格進(jìn)行了修改。其思想是不變的，不過這是另一個故事了。
使用“平滑圓角”的好處主要是它們超級平滑的外觀。但從另外一方面看，這些非標(biāo)準(zhǔn)的形狀是難以應(yīng)用到真實(shí)界面當(dāng)中的。應(yīng)該將多個SVG組合在一起，在代碼中包含特殊的公式或腳本，或者使用像Apple的應(yīng)用程序圖標(biāo)一樣把png放在一個統(tǒng)一的蒙版上。
而從設(shè)計上講，有一個簡單修改圓角的方法，那就是先進(jìn)入編輯路徑模式，然后把他們變成非標(biāo)準(zhǔn)的路徑，直接操作貝塞爾角點(diǎn)的杠桿，讓它們彼此靠近一點(diǎn)。
銳角平滑的差異會更加明顯，這種方法對于繪制道路或地鐵方案來說非常有效。
- 要點(diǎn)
- 除此之外
幾何正方形看起來也會不那么'方正'？你可能會說“省省吧”。那你看下面哪個正方形顯得更正呢？
如果你選左邊，那就是聽從了自己無偏見的視覺感受了。
有趣的是，相比寬度，我們的眼睛對物體的高度更加敏感。這也解釋了為什么即使在幾何字體中，字母“o”總是比幾何圓寬，而字母“H”的豎線總是比橫線粗。
～此文轉(zhuǎn)載，如有侵權(quán)，請聯(lián)系刪除
聯(lián)系客服
