作者最大 原文鏈接

內(nèi)容簡介

像文章標(biāo)題一樣，本文是“處女座”設(shè)計(jì)師的福利，主要講述“如何設(shè)計(jì)視覺平衡的圖標(biāo)，正確的形狀對齊，以及完美的圓角的處理方法?！倍鄨D預(yù)警！

眼睛是奇怪的器官，他們經(jīng)常對我們說謊。但是，如果你了解人類視覺感知的特殊性，你可以建立更加平易近人更加清潔的設(shè)計(jì)。不僅字體設(shè)計(jì)師可以使用光學(xué)技巧來創(chuàng)建可讀和平衡的字體，而且交互設(shè)計(jì)師構(gòu)建人機(jī)交互界面也是十分有幫助的。

1.均衡視覺重量

哪個(gè)更大：400像素的平方或400像素的圓？在幾何學(xué)上，它們的寬度和高度是相等的。但是看下面的圖片。我們的眼睛立即發(fā)現(xiàn)方塊比圓圈重。順便說一下，與重量相關(guān)的詞更適合于描述視覺效果。

如果你不相信我們是準(zhǔn)確繪制這些形狀的，下面是個(gè)帶參考線和數(shù)字的版本。

讓我們來看一下一個(gè)正方形和一個(gè)圓圈的照片。在視覺重量方面，他們是否相等？

對我而言肯定是的。至少很難分辨出哪一個(gè)超過另一個(gè)。不奇怪，因?yàn)槲覍A的直徑增加了50像素。

為了說明為什么會發(fā)生這種情況，我重疊了第一個(gè)例子（400像素平方和圓）和第二個(gè)例子（400像素平方和450像素圓）的形狀。正如下圖所示，方格超過圓圈的在“a”區(qū)域內(nèi)，而圓圈超過方格的在“b”區(qū)域內(nèi)。左邊圖里，方格完全包含圓圈。在右圖里，圓圈和方格相平衡；沒有一個(gè)包含另一個(gè)；他們每個(gè)都有四個(gè)松散的部分。基本上，在右邊圖重，形狀有相似的面積，而它們的寬度和高度是不同的。

在菱形或三角形上我們也可以發(fā)現(xiàn)相同的視覺效果。為了在視覺平衡跟方格相平衡，它們應(yīng)該更寬更高一些，使得它們的面基相似。簡單的形狀可以通過面基相似的方法達(dá)到視覺平衡。

如何在界面中使用這一原理？例如，當(dāng)你在設(shè)計(jì)一組圖標(biāo)時(shí)，重要的是使它們視覺均衡，圖標(biāo)不會看起來太大或太小。如果我們直接將圖標(biāo)刻在正方形區(qū)域，則形狀更像方形的圖標(biāo)將會看起來更大。

我建議通過將視覺上較小的圖標(biāo)擴(kuò)展到在圖標(biāo)區(qū)域之外，而視覺上較重的圖標(biāo)在圖標(biāo)區(qū)域之間留下一些空間，來補(bǔ)償不同形狀的圖標(biāo)的重量。

下面是視覺平衡的圖標(biāo)。

現(xiàn)在很清楚為什么一個(gè)圖標(biāo)區(qū)域總是大于一個(gè)圖標(biāo)體 —— 只是為了保證非方形圖標(biāo)適合它，并且看起來不要小于方形圖標(biāo)。

最簡單檢查視覺平衡的測試是模糊icon。如果您的圖標(biāo)變成或多或少相似的斑點(diǎn)，它們具有相同的視覺重量。

但有時(shí)我們可以使用現(xiàn)有的圖形，例如社交應(yīng)用里的分享和喜歡。 Facebook和Instagram的圖標(biāo)是平方的，而Twitter由一個(gè)鳥圈剪影，Pinterest包圍的“P”代表。這就是為什么Twitter和Pinterest圖標(biāo)有點(diǎn)大，所以他們看起來與Facebook和Instagram圖標(biāo)平衡。

視覺平衡問題的另一個(gè)例子是與圓按鈕一起放置的文本框。如果按鈕直徑等于文本框的高度，那么按鈕對我們的眼睛看起來會更小，但如果你放大一點(diǎn)，整個(gè)結(jié)構(gòu)將會變得更加平衡。

但是如果更改按鈕的樣式，則不需要放大。在下圖中，按鈕和文本框高80像素，但由于黑色填充強(qiáng)度，右側(cè)的按鈕不會看起來小。

熟記于心

1.視覺重量取決于人眼如何察覺物體的大小和顯著，并不一定等于其像素大小。
2.圓形，菱形，三角形和其他非方形形狀需要更大，以便與方形形狀進(jìn)行視覺平衡。
3.為達(dá)到視覺平衡，圖標(biāo)區(qū)域需保留一定的空間。對于一組圖標(biāo)來說，這一點(diǎn)至關(guān)重要。

2.不同形狀的對齊

視覺對齊是視覺平衡和視覺重量均衡的邏輯延續(xù)?？聪旅娴臈l紋。他們看起來長度相同嗎？

在像素方面，答案是肯定的。然而，乍一看，下條紋看起來比上方短。

再一張兩條紋圖。有什么改變？

我對下條進(jìn)行了視覺補(bǔ)償。在原有基礎(chǔ)增加下面條紋的長度。20像素可以補(bǔ)償尖峰之間的間隙并使兩個(gè)形狀視覺相等。

而現(xiàn)在有一些更復(fù)雜的不同形狀條紋的例子。

所以，如果你正在創(chuàng)建一個(gè)折疊條紋和文字的海報(bào)，或者你在網(wǎng)上商店的產(chǎn)品卡上貼上明亮的“折扣”條紋，請牢記視覺平衡。尖銳的邊緣應(yīng)該比其余的形狀長一些，特別是如果它是一個(gè)矩形。

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

由于背景很淺，它不會打斷常規(guī)的文本流。

不同的方法可以應(yīng)用于密集的背景。在圖片上，黑色背景與其余的文本對齊，而其中的白色文本則以縮進(jìn)形式放置。

與淺色背景不同的是，黑色具有很大的視覺重量，如果目標(biāo)是無縫地插入一段，最好是按照下圖所示的方式對齊。

相同的原則適用于按鈕和輸入框一起使用時(shí)。當(dāng)然，這不是一個(gè)教條，只是基于視覺的界面版式。

左側(cè)輸入框的淺色背景可以超出標(biāo)簽和用戶輸入。 “發(fā)送”按鈕的右邊緣與輸入背景的右邊緣不完全對齊，因?yàn)榘粹o較暗，視覺上，更重。

在右側(cè)，輸入框具有實(shí)體邊框，并且我們將它們與標(biāo)簽對齊，而用戶輸入的文本有縮進(jìn)。 “發(fā)送”按鈕有三角形。并將該按鈕向右移動，以與上述矩形輸入框平衡。

在這里，我們正在逐漸逼近對其的另一層面 — 文本和圖標(biāo)按鈕的對齊。看下面的按鈕。文本看起來居中，不是嗎？

訣竅在于，右邊的按鈕我把這個(gè)文案向左移動了幾像素，因?yàn)橛疫吺侨切蔚?。此外，箭頭狀按鈕的寬度為40像素，看起來與矩形的相似。

文本按鈕不僅具有水平對齊方式，而且還具有字和背景的垂直對齊方式。我說的第一種方法是適用于各種操作系統(tǒng)的，站點(diǎn)和應(yīng)用程序的界面中。它是基于字體大寫字母的高度（所謂的大寫字母高度）的對齊方式。它等于“H”或“I”的高度。

基本上，大寫字母上方和下方的空白以及按鈕的邊緣是相等。這是有道理的，因?yàn)槊蠲Q通常用標(biāo)題格式，英文字母有很多的上升 - 上部伸出部分（l，t，d，b，k，h） - 比下降部分 - 較低的懸掛部分（y，j，g， p）。

另一種方法是基于字體的小寫字母的高度（所謂的x-height）對齊名稱和背景。在襯線體和非襯線界面字體中，保證字體高度等于字母“x”的高度 。

這種方法也是有意義的，因?yàn)槲谋镜囊曈X重量主要集中在放置小寫字母的區(qū)域中。

這些方法有什么區(qū)別嗎？是的，有區(qū)別。但是，這并不大。

下面比較更多的例子。左列表示的大寫字母方法，比較適用于“取消”和“好”更好 - 如此廣泛使用的按鈕 - 因?yàn)椤叭∠睕]有下降，“OK”兩個(gè)字母都是大寫。右列中顯示的x高度方法，僅適用于“同步”按鈕，其名稱具有上部和下部突出元素；“取消”和“確定”字似乎放置得太高。

圖標(biāo)按鈕的情況略有不同。讓我們在一個(gè)圓形按鈕上放一個(gè)流行的“發(fā)送”圖標(biāo)。哪個(gè)變體看起來更平衡？

希望你已經(jīng)注意到左邊的東西有問題。這是因?yàn)椴煌膶R方式。左側(cè)圖片將icon當(dāng)作一個(gè)矩形。在一定程度上，這是正確的，因?yàn)楫?dāng)您向開發(fā)人員發(fā)送SVG或PNG文件時(shí)，它是一個(gè)帶有icon的矩形紙張。右側(cè)的考慮調(diào)整顯示了所有銳邊使之與圓形按鈕背景相等。

如果你為開發(fā)人員準(zhǔn)備一個(gè)文件，您需要預(yù)留一些區(qū)域，以便他們可以通過中心對齊實(shí)現(xiàn)視覺對齊。

與“播放”按鈕也是一樣。如果直接對齊這些形狀 - 圓角矩形和三角形 - 它們會看起來很奇怪。

如果要更好地將三角形放置好，請先做它的外接圓，然后讓其與按鈕背景對齊。

牢記于心

1.稍微放大具有鋒利邊緣的形狀，以便與相鄰的矩形視覺平衡。
2.大寫字母高度對齊是在按鈕背景上定位按鈕名稱的有效且廣泛使用的方法。
3.將三角形圖標(biāo)正確放置在按鈕上的有效方法之一是做它的外接圓，并將圓圈與背景對齊。

3.視覺圓角

什么可以比圓圈更圓？我以前沒有想到，但正如我在這篇文章的開頭所說，我們的眼睛很奇怪，有時(shí)候不會像我們預(yù)料的那樣感知事物。那么，下面的圖片中的哪個(gè)圈看起來最圓呢？

我以前問過的人選擇集中在3號和4號之間。數(shù)字1和2絕對太瘦，5太豐滿了。如果我們重疊第3個(gè)和第4個(gè)圓形 - 一個(gè)幾何圓圈和一個(gè)修改的圓圈 - 我們會發(fā)現(xiàn)第4個(gè)圓形比第3個(gè)圓形更重，因此我們的眼睛會覺得第4個(gè)更圓。

為了進(jìn)一步解釋我的意思，我從三種著名的幾何字體（Futura，Circe和Geometria）取出“o”字母。鑒于高品質(zhì)的字體是基于人類的視覺感知而建立的，并且使用復(fù)雜的視覺結(jié)構(gòu)系統(tǒng)，我認(rèn)為它們的圓形看起來比幾何圓形更圓形。這些字母不是具有良好的視覺感受嗎？

將這些字母與幾何圓圈重疊。即使是最為幾何的Futura的“o”也有四個(gè)伸出的部分。 Circe和Geometria的字母比圓圈更大，但即使他們的高度和寬度相等，我們也可以看到這四個(gè)“肚子”好像餓了一樣。

所以，從視覺角度來說，修改后的圓圈（右側(cè)）可以看起來比幾何圖形（左側(cè)）更圓。

我們怎么使用這種現(xiàn)象呢？當(dāng)然，如果你使用在圖形編輯器（Photoshop，Illustrator或Sketch）中使用內(nèi)置的舍入功能，結(jié)果將不如視覺上的效果好。

人眼可以立即檢測到直線突然變成曲線的點(diǎn)。而這個(gè)突變看起來并不自然。

我考慮到我們的視覺感知來解決這個(gè)問題。

這種倒圓具有超出幾何圓的額外面積，使線條自然地從直變曲。

只要嘗試感受這些四舍五入方法之間的區(qū)別。

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

我想你可能已經(jīng)注意到，右邊的按鈕有更圓滑的圓角，更適合你的眼睛。

與應(yīng)用程序圖標(biāo)相同相似。一個(gè)人不會簡單地使用標(biāo)準(zhǔn)的四舍五入來達(dá)到一個(gè)完美的結(jié)果。但在我們潛入這個(gè)主題之前，我們來看看兩種不同的圓形。

第一個(gè)是在sketch中創(chuàng)建的圓角矩形。第二種形狀是超橢圓形（superellipse），也稱為Lamé曲線。法國數(shù)學(xué)家GabrielLamé發(fā)現(xiàn)，根據(jù)所使用的公式可以從四角星得到圓角矩形。

馬克·愛德華茲提出了Lamé曲線的公式，形成了光滑和視覺上完美的形狀。從iOS 7的圖標(biāo)是基于它的。

后來，這種形狀通過添加黃金比例比例和網(wǎng)格來修改，用于指導(dǎo)新圖標(biāo)的設(shè)計(jì)師，但這是一個(gè)不同的故事。

使用超橢圓形狀的主要優(yōu)點(diǎn)是它們更圓潤和光滑的外觀。另一方面，這些非標(biāo)準(zhǔn)形狀難以插入到實(shí)際的界面中。應(yīng)該組合多個(gè)SVG，在代碼中包含特殊的公式或腳本，或者使用Apple為其應(yīng)用程序圖標(biāo)使用PNG蒙版。

至于設(shè)計(jì)過程本身，有一個(gè)簡單的修復(fù)圓角。您需要將可翻轉(zhuǎn)的四舍五入效果轉(zhuǎn)換為輪廓，進(jìn)入形狀編輯模式并手動將曲線手柄彼此靠近。

這種差異對于銳角四舍五入更為生動，這對于繪制視覺正確的路徑更加重要。

牢記于心

1.如果你可以輕松地看到直線突然變成曲線的點(diǎn)，這個(gè)幾何圓角看起來是人造的。

2.視覺正確的圓角需要特殊配方或一些手動調(diào)整形狀。

其他

有時(shí)不太理想的幾何方形看起來更方便。你可能會想，“多荒謬的廢話！”那么，你如何看待以下的正方形？哪種形狀看起來更方？

如果你選擇了左邊的形狀，那你一定能聽到準(zhǔn)確的視覺感知到的聲音。

當(dāng)我們了解到眼睛對物體的高度比其寬度更敏感時(shí)，我個(gè)人感到驚訝。它解釋了為什么即使在幾何字體中，字母“o”總是比幾何圓寬，字母“H”的垂直比劃總是比水平的更厚。