如何打造視覺平衡：正確的尺寸+視覺對齊+完美的圓角修飾。

我們的眼睛很奇怪，經(jīng)常誤導(dǎo)我們。但如果你知道人類視覺的特殊性，就可以構(gòu)建更好的設(shè)計。

20 世紀(jì) 20 年代，格式塔的視覺感知理論得到了發(fā)展。它解釋了我們的眼睛如何處理不同的圖像以及我們的大腦如何解釋它們。你可能已經(jīng)聽說過諸如親近原則或共同命運規(guī)則之類的話題，本文引用了格式塔理論的一些觀點，重點介紹了實踐方面而不是學(xué)術(shù)研究上的問題。在底部有關(guān)于這個主題的相關(guān)推薦列表，有興趣的話可以瀏覽。

測量尺寸和視覺尺寸

400 px 的正方形和 400 px 的圓哪一個更大？從幾何角度來說，它們的寬和高是相等的。但看看下面的圖片，我們的眼睛立刻發(fā)現(xiàn)正方形大于圓。

下圖是帶有標(biāo)注的：

讓我們再看一張正方形和圓的圖。就視覺重量而言，它們相同嗎？

至少很難立即指出哪一個比較重，不足為奇，因為我增加了圓的直徑。

我重疊了第一個和第二個示例中的形狀。左圖，400 px 正方形的面積大于 400 px 圓的面積。這就是為什么我們在視覺上看到它更大的原因。右邊，圓和正方形是平衡的，基本上它們的面積也相似，但是寬和高不同。

我們可以看到菱形、三角形具有同樣效果。為了在視覺上與正方形保持平衡，它們應(yīng)該更寬和更高，以使得它們的面積相似。基于面積的方法非常適合最簡單的形狀。

在 icon 中怎么使用呢？

當(dāng)你創(chuàng)建一組圖標(biāo)時，重要的是要使它們保持平衡，以使圖標(biāo)不會顯得太突出或太小。如果我們直接把圖標(biāo)放在正方形內(nèi)，那么越像正方形的圖標(biāo)看起來就越大。

我建議補償不同形狀圖標(biāo)的重量，允許視覺上較小的圖標(biāo)懸掛在正方形外，并在視覺上較重的圖標(biāo)和正方形之間留出一些距離。

下面是一組修改過的圖標(biāo)：

現(xiàn)在了解了，為什么一個圖標(biāo)區(qū)域總是比圖標(biāo)主體大，只是為了讓非正方形圖標(biāo)適合它并且看起來不小于正方形圖標(biāo)。

檢查視覺平衡最簡單的測試是模糊設(shè)計。如果你的圖標(biāo)變成相似的斑點，則它們具有形同的視覺權(quán)重。

例如，F(xiàn)acebook 和 Instagram 的圖標(biāo)是方形的，而 Twitter 的圖標(biāo)則是鳥的輪廓，Pinterest 則是一個環(huán)繞的「P」。這就是為什么 Twitter 和 Pinterest 的圖標(biāo)要大一點，以便于它們與 Facebook 和 Instagram 圖標(biāo)保持平衡。

視覺平衡的另一個例子是將文本框與圓形按鈕放在一起。如果按鈕的直徑等于文本框的高度，那么按鈕會顯得更小。當(dāng)你把它放大一點，整個結(jié)構(gòu)就會變得更加平衡。

但如果你改變按鈕的樣式，就不需要放大了。在下圖中，按鈕和文本框的高度是 80 px，但是右邊的按鈕視覺上看起來并沒有很弱，因為它是黑色的。

Tips：

• 視覺重量是人眼感知物體大小和重要性的方式，它不一定等于其像素大小或面積。
• 圓形、菱形、三角形和其他非正方形圖形需要更高和更寬的尺寸，才能與正方形圖標(biāo)在視覺上保持平衡。
• 圖標(biāo)區(qū)域應(yīng)該留有一些空間用于視覺平衡。對于一組圖標(biāo)來說，這是至關(guān)重要的，它們應(yīng)該確?？雌饋硎且恢碌?。

不同形狀的對齊

視覺對齊是視覺平衡主題的延續(xù)。看下圖：它們看起來一樣長嗎？

以 px 為單位，答案是肯定的。但是，第一眼看上去，第一條要比第二條長一些。

現(xiàn)在看下圖，有什么變化嗎？

我對第二條矩形應(yīng)用了視覺補償。允許尖峰值超過上條矩形長度的 20 px，是補償峰值之間的間隙并使兩個形狀在視覺上相等。

還有一些特殊圖形的例子：

所以，如果你設(shè)計一張帶有折疊條紋和文字的海報，或者商品圖角標(biāo)設(shè)計時，請注意使它們達(dá)到視覺平衡。銳利的邊緣應(yīng)該超出形狀的其他部分。

文本和有背景的段落怎么對齊？這取決于背景的視覺密度。如果它很輕，你可以將突出顯示的段落與文本的其余部分對齊。

由于背景較淺，因此不會中斷正常的文本流。

對于深色背景，可以使用不同的方法。在圖片上，黑色背景與文本的其余部分對齊，而其中的白色文本以縮進(jìn)方式放置。

與淺色背景的情況不同，黑色背景具有較大的視覺重量，如果目標(biāo)是無縫瀏覽段落，則最好按照以下所示的方式對齊。

相同的原理同樣適用于按鈕和輸入字段。當(dāng)然這只是基于人類視覺感知的設(shè)計。

左側(cè)輸入字段的淺色背景可以超出輸入標(biāo)簽和輸入文本的范圍。「發(fā)送」按鈕的與輸入背景的右對齊，因為該按鈕較暗且從視覺角度看較重。

在右側(cè)，輸入具有實線邊框，當(dāng)用戶輸入的框內(nèi)有凹痕時，我將其與標(biāo)簽對齊?！赴l(fā)送」按鈕的側(cè)面為三角形。該按鈕向右移動一點，看起來與上面的矩形輸入字段保持平衡。

在這里，我們探討另一個對齊問題：文本和圖標(biāo)按鈕的對齊。下圖，文字看起來居中嗎？

秘訣在于，右邊是三角形，因此在右邊的按鈕上我將文本向左移動了一點。此外，箭頭按鈕的寬度為 40 像素，看起來與矩形按鈕在視覺上相等。

文本按鈕不僅具有水平對齊，而且具有文本和背景的垂直對齊。我想講的第一種方法是在各種操作系統(tǒng)、站點和 APP 中使用的。它是基于字體的大寫字母的高度（即上限）對齊方式，它等于「 H」或「 I」的高度。

基本上，大寫字母上下的空間和按鈕的邊緣是相等的。這是有道理的，因為操作按鈕通常以大寫字母書寫，并且英文字母的升序更多，上伸出部分（l，t，d，b，k，h）比下伸出部分（y，j，g，p ）多。

另一種方法是使用字體的小寫字母的高度（所謂的x高度）來對齊文本和背景。在 sans 和 sans serif  字體中，它等于字母「 x」的高度。

由于文本的主要視覺重量集中在小寫字母的區(qū)域，因此該方法也是可行的。

這些方法之間有什么區(qū)別嗎？有區(qū)別，但差異不大。

對于「取消」和「確定」（常用按鈕），由左列代表的上限高度方法肯定更好，因為「取消」沒有下垂部分（y，j，g，p ），并且「確定」都是大寫字母。

右欄中顯示的 x 高度方法僅對「同步」按鈕更好，該按鈕的名稱同時具有上下突出的元素；「取消」和「確定」兩個詞似乎位置太高了。

圖標(biāo)按鈕的情況與文本按鈕略有不同，讓我們在圓形背景上放一個「發(fā)送」圖標(biāo)。哪個看起來視覺更加平衡？

希望你已經(jīng)注意到左邊的那個有問題。發(fā)生這種情況的原因是對齊方法不同。第一個選項將圖標(biāo)視為矩形，在某種程度上說是正確的，因為當(dāng)你將 SVG 或 PNG 文件給開發(fā)人員時，它是一張矩形圖。右側(cè)顯示圖標(biāo)的位置，使其所有尖銳邊緣與圓形按鈕背景的距離相等。

如果為開發(fā)輸出文件，則需要保留一些區(qū)域，以便他們可以使圖標(biāo)在背景上正確居中。

同樣「播放」按鈕也一樣，如果直接對齊這些形狀（圓角矩形和三角形），它們將看起來很奇怪。

如果要使三角形的視覺位置更好，則將其圍繞并使其與按鈕背景對齊會更好。

Tips：

• 帶有尖銳邊緣的形狀應(yīng)更大或更長，以與相鄰的矩形對象保持平衡。
• 帽高對齊是在按鈕背景上定位按鈕文本的有效方法。
• 正確將三角形圖標(biāo)放在按鈕上的一種有效方法是將其包圍并使其與背景對齊。

視覺圓角

還有什么比圓形更圓的圖形嗎？

我曾認(rèn)為沒有，但是正如我在本文開頭所說的那樣，我們的眼睛很奇怪，有時會欺騙我們。那么，下面圖片中哪個圓看起來最平滑？

我之前問過的人在 3 號和 4 號之間進(jìn)行糾結(jié)。1 號和 2 號絕對太瘦了，5 號太豐滿了。如果我們將第三個和第四個變體（一個幾何圓和一個修改的圓）重疊在一起，我們會發(fā)現(xiàn)，后者比第一個重一些。

為了說明我的意思，我從 Futura，Circe 和 Geometria 這三種著名的幾何字體中選取了字母「 o」。鑒于高質(zhì)量字體是基于人類的視覺感知構(gòu)建的，并且使用了復(fù)雜的視覺構(gòu)造系統(tǒng)，因此我認(rèn)為它們的圓形看起來比幾何形狀更圓。

讓我們將它們與幾何圓重疊。即使是最幾何圖形的 Futura 的「 o」也有四個突出部分。此外，Circe 和 Geometria 的字母比圓圈寬，但即使它們的高度和寬度相等，我們也可以看到這四個「肚子」好像小了。

因此，從視覺角度而言，修改后的圓（右側(cè)）看起來比幾何圓（左側(cè)）更「圓形」。

我們?nèi)绾问褂眠@種現(xiàn)象？當(dāng)然要進(jìn)行圓角處理。如果你在圖形編輯器中直接修改圓角，效果其實并不好。

人眼立即發(fā)現(xiàn)直線突然變成曲線的點，而且這種處理看起來并不自然。

考慮到我們的視覺感知，我修改了這個圓角。

這種嵌入具有超出幾何圓的額外區(qū)域，使得直線與曲線相交的點不那么明顯。

只是嘗試感受一下這些嵌入方法之間的差異。

現(xiàn)在，我們可以將這種方法應(yīng)用于圓形按鈕。

你可能已經(jīng)注意到，右側(cè)的按鈕具有更平滑的圓角倒角，并且你的眼睛更加舒適。

與 APP 圖標(biāo)相同，人們不只是使用標(biāo)準(zhǔn)的圓角整數(shù)來達(dá)到理想的效果。在深入探討此問題前，讓我們看一下下面圖形的差異：

第一個是我在 Sketch 中創(chuàng)建的圓角矩形。第二個形狀是超橢圓形，也稱為 Lamé 曲線。它是由法國數(shù)學(xué)家加布里埃爾·拉梅（GabrielLamé）發(fā)現(xiàn)的，根據(jù)公式的不同，其范圍可能從四點星形到實際上看起來像是圓角正方形。

馬克·愛德華茲（Marc Edwards）提出了 Lamé 曲線的公式，該公式產(chǎn)生了平滑且視覺上完美的形狀。從 iOS 7 開始的圖標(biāo)均基于此設(shè)計的。

后來，通過添加黃金比例和用于指導(dǎo)新圖標(biāo)設(shè)計者的網(wǎng)格來修改此形狀。

使用超橢圓等形狀的主要好處是其光滑的外觀。另一方面，這些非標(biāo)準(zhǔn)形狀很難到真實項目中。應(yīng)該將多個 SVG 組合在一起，在代碼中包含特殊的公式或腳本，或者像 Apple 為其應(yīng)用程序圖標(biāo)那樣使用 PNG 掩碼。

至于設(shè)計過程本身，有一個簡單的圓角修復(fù)方法。您需要調(diào)整合適的圓角度數(shù)。

銳角倒圓的差異更加明顯，這對于繪制道路或交通設(shè)計非常重要。

Tips：

• 幾何圓角看起來很假，因為你可以輕松看到直線突然變成曲線的點。
• 視覺上正確的圓角需要特殊的公式或手動調(diào)整形狀。

有時，非幾何正方形看起來更像方形。你可能會想，「這是什么廢話？」 那么，你看下面的正方形？哪種形狀看起來更方形？

如果你選擇了左側(cè)的形狀，你就能感受到視覺差異的點。

文章來源：優(yōu)設(shè)網(wǎng)    作者：UX Talk

藍(lán)藍(lán)設(shè)計( m.sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)