作者最大原文鏈接

內(nèi)容簡介

像文章標(biāo)題一樣喉酌，本文是“處女座”設(shè)計師的福利，主要講述“如何設(shè)計視覺平衡的圖標(biāo)泵喘，正確的形狀對齊泪电，以及完美的圓角的處理方法〖推蹋”多圖預(yù)警相速！

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

1.均衡視覺重量

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

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

讓我們來看一下一個正方形和一個圓圈的照片。在視覺重量方面罕容，他們是否相等备恤？

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

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

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

如何在界面中使用這一原理游昼？例如甘苍，當(dāng)你在設(shè)計一組圖標(biāo)時，重要的是使它們視覺均衡烘豌，圖標(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)在很清楚為什么一個圖標(biāo)區(qū)域總是大于一個圖標(biāo)體 —— 只是為了保證非方形圖標(biāo)適合它茁计，并且看起來不要小于方形圖標(biāo)。

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

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

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

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

熟記于心

1.視覺重量取決于人眼如何察覺物體的大小和顯著锄贼，并不一定等于其像素大小。

2.圓形女阀，菱形宅荤，三角形和其他非方形形狀需要更大，以便與方形形狀進(jìn)行視覺平衡浸策。

3.為達(dá)到視覺平衡冯键，圖標(biāo)區(qū)域需保留一定的空間。對于一組圖標(biāo)來說庸汗，這一點(diǎn)至關(guān)重要惫确。

2.不同形狀的對齊

視覺對齊是視覺平衡和視覺重量均衡的邏輯延續(xù)。看下面的條紋改化。他們看起來長度相同嗎昧诱？

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

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

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

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

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

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

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

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

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

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

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

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

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

訣竅在于叁温，右邊的按鈕我把這個文案向左移動了幾像素再悼，因?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”兩個字母都是大寫。右列中顯示的x高度方法赦抖，僅適用于“同步”按鈕舱卡，其名稱具有上部和下部突出元素；“取消”和“確定”字似乎放置得太高队萤。

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

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

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

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

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

牢記于心

1.稍微放大具有鋒利邊緣的形狀田篇，以便與相鄰的矩形視覺平衡。

2.大寫字母高度對齊是在按鈕背景上定位按鈕名稱的有效且廣泛使用的方法箍铭。

3.將三角形圖標(biāo)正確放置在按鈕上的有效方法之一是做它的外接圓泊柬，并將圓圈與背景對齊。

3.視覺圓角

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

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

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

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

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

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

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

我考慮到我們的視覺感知來解決這個問題开皿。

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

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

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

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

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

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

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

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

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

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

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

牢記于心

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

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

其他

有時不太理想的幾何方形看起來更方便兜叨。你可能會想穿扳，“多荒謬的廢話衩侥！”那么，你如何看待以下的正方形矛物？哪種形狀看起來更方茫死？

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

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