作者最大 原文鏈接

內(nèi)容簡介

像文章標題一樣，本文是“處女座”設計師的福利苗沧，主要講述“如何設計視覺平衡的圖標，正確的形狀對齊炭晒，以及完美的圓角的處理方法待逞。”多圖預警网严！

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

1.均衡視覺重量

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

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

讓我們來看一下一個正方形和一個圓圈的照片璧瞬。在視覺重量方面渔欢，他們是否相等奥额？

對我而言肯定是的。至少很難分辨出哪一個超過另一個九榔。不奇怪剩蟀，因為我將圓的直徑增加了50像素。

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

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

如何在界面中使用這一原理？例如产还，當你在設計一組圖標時匹厘，重要的是使它們視覺均衡，圖標不會看起來太大或太小脐区。如果我們直接將圖標刻在正方形區(qū)域愈诚，則形狀更像方形的圖標將會看起來更大。

我建議通過將視覺上較小的圖標擴展到在圖標區(qū)域之外牛隅，而視覺上較重的圖標在圖標區(qū)域之間留下一些空間匕累，來補償不同形狀的圖標的重量碘耳。

下面是視覺平衡的圖標允悦。

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

最簡單檢查視覺平衡的測試是模糊icon。如果您的圖標變成或多或少相似的斑點恍飘，它們具有相同的視覺重量蚪缀。

但有時我們可以使用現(xiàn)有的圖形苗傅，例如社交應用里的分享和喜歡。 Facebook和Instagram的圖標是平方的炬称，而Twitter由一個鳥圈剪影，Pinterest包圍的“P”代表蝌焚。這就是為什么Twitter和Pinterest圖標有點大裹唆，所以他們看起來與Facebook和Instagram圖標平衡。

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

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

熟記于心

1.視覺重量取決于人眼如何察覺物體的大小和顯著融求，并不一定等于其像素大小。
2.圓形算撮，菱形生宛，三角形和其他非方形形狀需要更大施掏，以便與方形形狀進行視覺平衡。
3.為達到視覺平衡茅糜，圖標區(qū)域需保留一定的空間七芭。對于一組圖標來說，這一點至關重要蔑赘。

2.不同形狀的對齊

視覺對齊是視覺平衡和視覺重量均衡的邏輯延續(xù)狸驳。看下面的條紋缩赛。他們看起來長度相同嗎耙箍？

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

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

我對下條進行了視覺補償砚尽。在原有基礎增加下面條紋的長度施无。20像素可以補償尖峰之間的間隙并使兩個形狀視覺相等。

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

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

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

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

不同的方法可以應用于密集的背景。在圖片上冰评，黑色背景與其余的文本對齊映胁，而其中的白色文本則以縮進形式放置。

與淺色背景不同的是甲雅，黑色具有很大的視覺重量解孙，如果目標是無縫地插入一段坑填，最好是按照下圖所示的方式對齊。

相同的原則適用于按鈕和輸入框一起使用時弛姜。當然脐瑰，這不是一個教條，只是基于視覺的界面版式廷臼。

左側(cè)輸入框的淺色背景可以超出標簽和用戶輸入苍在。 “發(fā)送”按鈕的右邊緣與輸入背景的右邊緣不完全對齊，因為按鈕較暗荠商，視覺上寂恬，更重。

在右側(cè)莱没，輸入框具有實體邊框初肉，并且我們將它們與標簽對齊，而用戶輸入的文本有縮進饰躲。 “發(fā)送”按鈕有三角形牙咏。并將該按鈕向右移動，以與上述矩形輸入框平衡嘹裂。

在這里眠寿，我們正在逐漸逼近對其的另一層面 — 文本和圖標按鈕的對齊〗鼓ⅲ看下面的按鈕盯拱。文本看起來居中，不是嗎例嘱？

訣竅在于狡逢，右邊的按鈕我把這個文案向左移動了幾像素，因為右邊是三角形的拼卵。此外奢浑，箭頭狀按鈕的寬度為40像素，看起來與矩形的相似腋腮。

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

基本上莺丑，大寫字母上方和下方的空白以及按鈕的邊緣是相等。這是有道理的，因為命令名稱通常用標題格式梢莽，英文字母有很多的上升 - 上部伸出部分（l萧豆，t，d昏名，b涮雷，k，h） - 比下降部分 - 較低的懸掛部分（y轻局，j洪鸭，g， p）嗽交。

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

這種方法也是有意義的拾枣，因為文本的視覺重量主要集中在放置小寫字母的區(qū)域中。

這些方法有什么區(qū)別嗎盒让？是的梅肤，有區(qū)別。但是邑茄，這并不大姨蝴。

下面比較更多的例子。左列表示的大寫字母方法肺缕，比較適用于“取消”和“好”更好 - 如此廣泛使用的按鈕 - 因為“取消”沒有下降左医，“OK”兩個字母都是大寫。右列中顯示的x高度方法同木，僅適用于“同步”按鈕浮梢，其名稱具有上部和下部突出元素；“取消”和“確定”字似乎放置得太高彤路。

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

希望你已經(jīng)注意到左邊的東西有問題远豺。這是因為不同的對齊方式。左側(cè)圖片將icon當作一個矩形坞嘀。在一定程度上躯护，這是正確的，因為當您向開發(fā)人員發(fā)送SVG或PNG文件時姆吭，它是一個帶有icon的矩形紙張榛做。右側(cè)的考慮調(diào)整顯示了所有銳邊使之與圓形按鈕背景相等。

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

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

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

牢記于心

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

3.視覺圓角

什么可以比圓圈更圓含思？我以前沒有想到，但正如我在這篇文章的開頭所說甘晤，我們的眼睛很奇怪含潘，有時候不會像我們預料的那樣感知事物。那么线婚，下面的圖片中的哪個圈看起來最圓呢遏弱？

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

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

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

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

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

人眼可以立即檢測到直線突然變成曲線的點。而這個突變看起來并不自然贯溅。

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

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

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

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

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

與應用程序圖標相同相似邮弹。一個人不會簡單地使用標準的四舍五入來達到一個完美的結(jié)果黔衡。但在我們潛入這個主題之前，我們來看看兩種不同的圓形腌乡。

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

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

后來僚碎，這種形狀通過添加黃金比例比例和網(wǎng)格來修改猴娩，用于指導新圖標的設計師，但這是一個不同的故事勺阐。

使用超橢圓形狀的主要優(yōu)點是它們更圓潤和光滑的外觀卷中。另一方面，這些非標準形狀難以插入到實際的界面中渊抽。應該組合多個SVG蟆豫，在代碼中包含特殊的公式或腳本，或者使用Apple為其應用程序圖標使用PNG蒙版懒闷。

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

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

牢記于心

1.如果你可以輕松地看到直線突然變成曲線的點织阅，這個幾何圓角看起來是人造的壳繁。

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

其他

有時不太理想的幾何方形看起來更方便荔棉。你可能會想，“多荒謬的廢話蒿赢！”那么润樱，你如何看待以下的正方形？哪種形狀看起來更方羡棵？

如果你選擇了左邊的形狀壹若，那你一定能聽到準確的視覺感知到的聲音。

當我們了解到眼睛對物體的高度比其寬度更敏感時皂冰，我個人感到驚訝店展。它解釋了為什么即使在幾何字體中，字母“o”總是比幾何圓寬秃流，字母“H”的垂直比劃總是比水平的更厚赂蕴。