2021-4-26 周周
如何打造視覺平衡：正確的尺寸+視覺對(duì)齊+完美的圓角修飾。
我們的眼睛很奇怪，經(jīng)常誤導(dǎo)我們。但如果你知道人類視覺的特殊性，就可以構(gòu)建更好的設(shè)計(jì)。
20 世紀(jì) 20 年代，格式塔的視覺感知理論得到了發(fā)展。它解釋了我們的眼睛如何處理不同的圖像以及我們的大腦如何解釋它們。你可能已經(jīng)聽說過諸如親近原則或共同命運(yùn)規(guī)則之類的話題，本文引用了格式塔理論的一些觀點(diǎn)，重點(diǎn)介紹了實(shí)踐方面而不是學(xué)術(shù)研究上的問題。在底部有關(guān)于這個(gè)主題的相關(guān)推薦列表，有興趣的話可以瀏覽。
400 px 的正方形和 400 px 的圓哪一個(gè)更大？從幾何角度來說，它們的寬和高是相等的。但看看下面的圖片，我們的眼睛立刻發(fā)現(xiàn)正方形大于圓。
下圖是帶有標(biāo)注的：
讓我們?cè)倏匆粡堈叫魏蛨A的圖。就視覺重量而言，它們相同嗎？
至少很難立即指出哪一個(gè)比較重，不足為奇，因?yàn)槲以黾恿藞A的直徑。
我重疊了第一個(gè)和第二個(gè)示例中的形狀。左圖，400 px 正方形的面積大于 400 px 圓的面積。這就是為什么我們?cè)谝曈X上看到它更大的原因。右邊，圓和正方形是平衡的，基本上它們的面積也相似，但是寬和高不同。
我們可以看到菱形、三角形具有同樣效果。為了在視覺上與正方形保持平衡，它們應(yīng)該更寬和更高，以使得它們的面積相似。基于面積的方法非常適合最簡(jiǎn)單的形狀。
在 icon 中怎么使用呢？
當(dāng)你創(chuàng)建一組圖標(biāo)時(shí)，重要的是要使它們保持平衡，以使圖標(biāo)不會(huì)顯得太突出或太小。如果我們直接把圖標(biāo)放在正方形內(nèi)，那么越像正方形的圖標(biāo)看起來就越大。
我建議補(bǔ)償不同形狀圖標(biāo)的重量，允許視覺上較小的圖標(biāo)懸掛在正方形外，并在視覺上較重的圖標(biāo)和正方形之間留出一些距離。
下面是一組修改過的圖標(biāo)：
現(xiàn)在了解了，為什么一個(gè)圖標(biāo)區(qū)域總是比圖標(biāo)主體大，只是為了讓非正方形圖標(biāo)適合它并且看起來不小于正方形圖標(biāo)。
檢查視覺平衡最簡(jiǎn)單的測(cè)試是模糊設(shè)計(jì)。如果你的圖標(biāo)變成相似的斑點(diǎn)，則它們具有形同的視覺權(quán)重。
例如，F(xiàn)acebook 和 Instagram 的圖標(biāo)是方形的，而 Twitter 的圖標(biāo)則是鳥的輪廓，Pinterest 則是一個(gè)環(huán)繞的「P」。這就是為什么 Twitter 和 Pinterest 的圖標(biāo)要大一點(diǎn)，以便于它們與 Facebook 和 Instagram 圖標(biāo)保持平衡。
視覺平衡的另一個(gè)例子是將文本框與圓形按鈕放在一起。如果按鈕的直徑等于文本框的高度，那么按鈕會(huì)顯得更小。當(dāng)你把它放大一點(diǎn)，整個(gè)結(jié)構(gòu)就會(huì)變得更加平衡。
但如果你改變按鈕的樣式，就不需要放大了。在下圖中，按鈕和文本框的高度是 80 px，但是右邊的按鈕視覺上看起來并沒有很弱，因?yàn)樗呛谏摹?/span>
Tips：
視覺對(duì)齊是視覺平衡主題的延續(xù)。看下圖：它們看起來一樣長(zhǎng)嗎？
以 px 為單位，答案是肯定的。但是，第一眼看上去，第一條要比第二條長(zhǎng)一些。
現(xiàn)在看下圖，有什么變化嗎？
我對(duì)第二條矩形應(yīng)用了視覺補(bǔ)償。允許尖峰值超過上條矩形長(zhǎng)度的 20 px，是補(bǔ)償峰值之間的間隙并使兩個(gè)形狀在視覺上相等。
還有一些特殊圖形的例子：
所以，如果你設(shè)計(jì)一張帶有折疊條紋和文字的海報(bào)，或者商品圖角標(biāo)設(shè)計(jì)時(shí)，請(qǐng)注意使它們達(dá)到視覺平衡。銳利的邊緣應(yīng)該超出形狀的其他部分。
文本和有背景的段落怎么對(duì)齊？這取決于背景的視覺密度。如果它很輕，你可以將突出顯示的段落與文本的其余部分對(duì)齊。
由于背景較淺，因此不會(huì)中斷正常的文本流。
對(duì)于深色背景，可以使用不同的方法。在圖片上，黑色背景與文本的其余部分對(duì)齊，而其中的白色文本以縮進(jìn)方式放置。
與淺色背景的情況不同，黑色背景具有較大的視覺重量，如果目標(biāo)是無縫瀏覽段落，則最好按照以下所示的方式對(duì)齊。
相同的原理同樣適用于按鈕和輸入字段。當(dāng)然這只是基于人類視覺感知的設(shè)計(jì)。
左側(cè)輸入字段的淺色背景可以超出輸入標(biāo)簽和輸入文本的范圍。「發(fā)送」按鈕的與輸入背景的右對(duì)齊，因?yàn)樵摪粹o較暗且從視覺角度看較重。
在右側(cè)，輸入具有實(shí)線邊框，當(dāng)用戶輸入的框內(nèi)有凹痕時(shí)，我將其與標(biāo)簽對(duì)齊。「發(fā)送」按鈕的側(cè)面為三角形。該按鈕向右移動(dòng)一點(diǎn)，看起來與上面的矩形輸入字段保持平衡。
在這里，我們探討另一個(gè)對(duì)齊問題：文本和圖標(biāo)按鈕的對(duì)齊。下圖，文字看起來居中嗎？
秘訣在于，右邊是三角形，因此在右邊的按鈕上我將文本向左移動(dòng)了一點(diǎn)。此外，箭頭按鈕的寬度為 40 像素，看起來與矩形按鈕在視覺上相等。
文本按鈕不僅具有水平對(duì)齊，而且具有文本和背景的垂直對(duì)齊。我想講的第一種方法是在各種操作系統(tǒng)、站點(diǎn)和 APP 中使用的。它是基于字體的大寫字母的高度（即上限）對(duì)齊方式，它等于「 H」或「 I」的高度。
基本上，大寫字母上下的空間和按鈕的邊緣是相等的。這是有道理的，因?yàn)椴僮靼粹o通常以大寫字母書寫，并且英文字母的升序更多，上伸出部分（l，t，d，b，k，h）比下伸出部分（y，j，g，p ）多。
另一種方法是使用字體的小寫字母的高度（所謂的x高度）來對(duì)齊文本和背景。在 sans 和 sans serif 字體中，它等于字母「 x」的高度。
由于文本的主要視覺重量集中在小寫字母的區(qū)域，因此該方法也是可行的。
這些方法之間有什么區(qū)別嗎？有區(qū)別，但差異不大。
對(duì)于「取消」和「確定」（常用按鈕），由左列代表的上限高度方法肯定更好，因?yàn)椤溉∠箾]有下垂部分（y，j，g，p ），并且「確定」都是大寫字母。
右欄中顯示的 x 高度方法僅對(duì)「同步」按鈕更好，該按鈕的名稱同時(shí)具有上下突出的元素；「取消」和「確定」兩個(gè)詞似乎位置太高了。
圖標(biāo)按鈕的情況與文本按鈕略有不同，讓我們?cè)趫A形背景上放一個(gè)「發(fā)送」圖標(biāo)。哪個(gè)看起來視覺更加平衡？
希望你已經(jīng)注意到左邊的那個(gè)有問題。發(fā)生這種情況的原因是對(duì)齊方法不同。第一個(gè)選項(xiàng)將圖標(biāo)視為矩形，在某種程度上說是正確的，因?yàn)楫?dāng)你將 SVG 或 PNG 文件給開發(fā)人員時(shí)，它是一張矩形圖。右側(cè)顯示圖標(biāo)的位置，使其所有尖銳邊緣與圓形按鈕背景的距離相等。
如果為開發(fā)輸出文件，則需要保留一些區(qū)域，以便他們可以使圖標(biāo)在背景上正確居中。
同樣「播放」按鈕也一樣，如果直接對(duì)齊這些形狀（圓角矩形和三角形），它們將看起來很奇怪。
如果要使三角形的視覺位置更好，則將其圍繞并使其與按鈕背景對(duì)齊會(huì)更好。
Tips：
還有什么比圓形更圓的圖形嗎？
我曾認(rèn)為沒有，但是正如我在本文開頭所說的那樣，我們的眼睛很奇怪，有時(shí)會(huì)欺騙我們。那么，下面圖片中哪個(gè)圓看起來最平滑？
我之前問過的人在 3 號(hào)和 4 號(hào)之間進(jìn)行糾結(jié)。1 號(hào)和 2 號(hào)絕對(duì)太瘦了，5 號(hào)太豐滿了。如果我們將第三個(gè)和第四個(gè)變體（一個(gè)幾何圓和一個(gè)修改的圓）重疊在一起，我們會(huì)發(fā)現(xiàn)，后者比第一個(gè)重一些。
為了說明我的意思，我從 Futura，Circe 和 Geometria 這三種著名的幾何字體中選取了字母「 o」。鑒于高質(zhì)量字體是基于人類的視覺感知構(gòu)建的，并且使用了復(fù)雜的視覺構(gòu)造系統(tǒng)，因此我認(rèn)為它們的圓形看起來比幾何形狀更圓。
讓我們將它們與幾何圓重疊。即使是最幾何圖形的 Futura 的「 o」也有四個(gè)突出部分。此外，Circe 和 Geometria 的字母比圓圈寬，但即使它們的高度和寬度相等，我們也可以看到這四個(gè)「肚子」好像小了。
因此，從視覺角度而言，修改后的圓（右側(cè)）看起來比幾何圓（左側(cè)）更「圓形」。
我們?nèi)绾问褂眠@種現(xiàn)象？當(dāng)然要進(jìn)行圓角處理。如果你在圖形編輯器中直接修改圓角，效果其實(shí)并不好。
人眼立即發(fā)現(xiàn)直線突然變成曲線的點(diǎn)，而且這種處理看起來并不自然。
考慮到我們的視覺感知，我修改了這個(gè)圓角。
這種嵌入具有超出幾何圓的額外區(qū)域，使得直線與曲線相交的點(diǎn)不那么明顯。
只是嘗試感受一下這些嵌入方法之間的差異。
現(xiàn)在，我們可以將這種方法應(yīng)用于圓形按鈕。
你可能已經(jīng)注意到，右側(cè)的按鈕具有更平滑的圓角倒角，并且你的眼睛更加舒適。
與 APP 圖標(biāo)相同，人們不只是使用標(biāo)準(zhǔn)的圓角整數(shù)來達(dá)到理想的效果。在深入探討此問題前，讓我們看一下下面圖形的差異：
第一個(gè)是我在 Sketch 中創(chuàng)建的圓角矩形。第二個(gè)形狀是超橢圓形，也稱為 Lamé 曲線。它是由法國(guó)數(shù)學(xué)家加布里埃爾·拉梅（GabrielLamé）發(fā)現(xiàn)的，根據(jù)公式的不同，其范圍可能從四點(diǎn)星形到實(shí)際上看起來像是圓角正方形。
馬克·愛德華茲（Marc Edwards）提出了 Lamé 曲線的公式，該公式產(chǎn)生了平滑且視覺上完美的形狀。從 iOS 7 開始的圖標(biāo)均基于此設(shè)計(jì)的。
后來，通過添加黃金比例和用于指導(dǎo)新圖標(biāo)設(shè)計(jì)者的網(wǎng)格來修改此形狀。
使用超橢圓等形狀的主要好處是其光滑的外觀。另一方面，這些非標(biāo)準(zhǔn)形狀很難到真實(shí)項(xiàng)目中。應(yīng)該將多個(gè) SVG 組合在一起，在代碼中包含特殊的公式或腳本，或者像 Apple 為其應(yīng)用程序圖標(biāo)那樣使用 PNG 掩碼。
至于設(shè)計(jì)過程本身，有一個(gè)簡(jiǎn)單的圓角修復(fù)方法。您需要調(diào)整合適的圓角度數(shù)。
銳角倒圓的差異更加明顯，這對(duì)于繪制道路或交通設(shè)計(jì)非常重要。
Tips：
有時(shí)，非幾何正方形看起來更像方形。你可能會(huì)想，「這是什么廢話？」 那么，你看下面的正方形？哪種形狀看起來更方形？
如果你選擇了左側(cè)的形狀，你就能感受到視覺差異的點(diǎn)。
文章來源：優(yōu)設(shè)網(wǎng) 作者：UX Talk
藍(lán)藍(lán)設(shè)計(jì)( www.73404.com.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.73404.com.cn