怎樣使圖標，圖形整齊，圓角完美？這裏有超過50個小技巧，來一起學習一下吧。
眼睛是人體一個很奇怪的器官，因為它總是會對我們說謊。但如果你了解了人類視覺的感知特性，你就可以構建人性化的設計。類型設計師不僅可以利用視覺技巧創建刻度且平衡的字體，也有利於幫助界面設計師創建人機溝通。
1. 測量視覺大小
400像素的正方形和400像素的圓哪一個大？從幾何的角度來看，圓和正方形的寬度和高度是相同的。但看完下面的圖片我們會發現正方形比圓所占的視覺重量多。視覺重量相關的詞語很適合來描述視覺效果。
如果你不相信已經畫好的圖形，下面是對應的數字指導版本。
看看下面的正方形和圓形圖片在視覺重量中是否相等？
對我而言，很明顯是相等的。因為我將圓形的直徑增加了50像素，所以很難說其中的哪個圖形所占比重大。
發生這一情況的原因是，我將第一個例子（400像素的正方形和圓）和第二個例子（400像素的正方形，450像素的圓）分別重疊了。註意下面的正方形超出圓的‘a’區域，圓超出正方形的‘b’區域。左邊的圓形破壞了整個正方形，使得正方形中還包括了4個邊；右邊的圓形和正方形是平衡的，它們都不包含彼此，每個圖形中都有4個碎片。
為了在視覺上與正方形保持平衡，可以用菱形或三角形來實現相同的效果。相比較它們應該更寬、更高，這樣與正方形的面積才會相似。根據區域的方法可以很好地完成簡單的形狀。
如何在界面中使用這一特點呢？舉例來說，當你創建一組圖標時，最重要是讓它們平衡，所以圖標沒有太過突出或是太過微小。如果將圖標直接放在正方形區域中，會看起來更大。
建議讓視覺上的小圖標重量超過的圖標本身區域，讓視覺上較有重量的圖標與圖標之間的區域留一些空間，以此來修正不同形狀的圖標重量。
一些真實的視覺上平衡的圖標。
圖標區域總是大於圖標本身的原因是僅允許非凡塊區域看起來不小於方塊圖標。
最簡單的測試是用模糊的圖標來檢測視覺平衡。如果圖標變成或大或小相似的斑點，它們的視覺比重就是相同的。
但有些時候我們也會用現有的圖形，比如，作為分享和喜歡按鈕的社交網絡商標。Facebook和Instagram的圖標都是方塊狀的，而Twitter是用一只鳥的剪影來代表的，Pinterest是由一個環繞的“P”代表的。這就是為什麽Twitter和Pinterest的圖標會大一點，以至於它們和Facebook和Instagram的圖標看起來是平衡的。
視覺平衡的另一個例子是放置在文本框的圓形按鈕。如果按鈕直徑與文本框的高度相等，從我們視角看到的按鈕會比文本框小一些，但如果放大一點按鈕直徑，整體看上去就會更加平衡。
但如果改變按鈕風格，放大直徑將不是必需的。下面圖片的按鈕和文本狂都是80像素高，由於臨近文本框的按鈕有黑色填充，所以右邊按鈕的重量平衡會更好些。
謹記：
- 視覺重量是指從人們的視角看到的意義上的物體大小，並不一定和像素大小相等。
- 圓形、菱形、三角形和其他非方塊圖形，這些類似方形的圖形為了達到視覺平衡需要再放大一些。
- 為了達到視覺平衡，圖標區域要保留一些空間。這對設置圖標是至關重要的。
2. 不同形狀的一致性
視覺一致性是視覺平衡主體和視覺比重現象的邏輯延續。下面的條紋看起來是否是一樣長?
就像素而言，答案“是”。但一眼看上去下面的條紋會比上面的條紋更短一些。
再看另一張圖片上的兩條條紋，有什麽改變嗎？
對較低的條紋應用了視覺補償。允許尖頭增加20像素超過上面的條紋長度，這個補償尖頭之間的差距，使兩條條紋的視覺相等。
下面是一些更加復雜的不同形狀的條紋例子。
如果正在創建折疊條紋的文本海報或者是把一張有明顯“discount”字眼的產品卡片放在在線商店裏，註意要使他們的視覺重量達到平衡。如果它是一個長方形，尖頭邊緣應該有點其他形狀。
對於英文的純文字的段落背景應該怎樣調整？這取決於背景的視覺密度。如果背景是淺色的，可以將段落和其他文本一起突出顯示。
由於背景是淺色的，所以不會中斷正常的文本流。
一個可以應用密集背景的不同方法。下面圖片中，黑色背景與其余的文本對齊，而其中的白色文本則以縮進形式放置。
與淺色背景不同的是，黑色具有很大的視覺重量，如果目標是無縫地插入一個段落，最好是按照下圖所示的方式對齊。
對按鈕和輸入欄也是用相同的原理。這並不是固定模式，只是界面的視覺基礎的願景。
左邊輸入欄的淺色背景可以超過輸入標簽和用戶輸入。右邊緣的“Send”按鈕不完全符合右邊緣輸入背景，從視覺角度看更深色的按鈕的視覺重量更重一些。
右邊的輸入欄有固定的邊緣，標簽要和邊緣對齊，用戶在文本框中的輸入的內容要縮進。“Send”按鈕的三角形一邊要向右移動一點，這樣才能和上面的矩形輸入欄看起來平衡。
對其的文本和圖標按鈕。看下面的按鈕是以文本為中心嗎？
右邊按鈕用了一個小竅門，由於右邊緣是三角形，將單詞稍微向左移了一些。此外，像箭頭一樣的按鈕比矩形按鈕的像素寬40，但看起來卻和矩形按鈕是相同的。
文本按鈕不僅要水平對齊，字和背景還要垂直對齊。第一個方法是用於各種操作系統的界面，網站和應用程序。基於大寫字母的字體高度（大寫字母高度），等於“H”或“I”的高度。
基本上，大寫字母的上下空間要和按鈕邊緣相等。由於命令名通常都是在標題中寫的，有更多的上半部分出頭的英文字母——上半突出部分(l、t、d、b、k、h)，下半突出部分（y、j、g、p）。
另一種方法是用小寫字體（也叫x高度）的高度將名字和背景對齊。在無襯線字體中，它等於字母“x”的高度。
這個方法也很有用的，因為文本的主要視覺重量都集中在小寫字母的區域。
這些方法有什麽區別嗎？是有區別，但沒有那麽大的區別。
下面是幾個例子的對比。左列的“Cancel”和“OK”的大寫字母高度明顯比右邊的好，因為“Cancel”沒有下半突出的部分，“OK”全部都是大寫，所以通常使用按鈕。右列中只有“Sync”按鈕適合小寫字母高度，因為它的名稱有上、下突出的元素;“Cancel”和“OK”的單詞似乎太高了。
圖標按鈕的情況稍微有些不同。讓我們來看看當下流行的圓形按鈕中的“發送”圖標。哪種圖標按鈕更能平衡？
或許你已經註意到左邊的圖標按鈕有問題。這是由不同的對齊方式形成的。左邊是將圖標當成矩形。某一程度上這是對的，因為當你將一個SVG或PNG文件發給開發者時它是在平面上的一個矩形表單。右邊展示了圖標所有的尖頭邊緣都與圓形按鈕背景的距離相等。
如果要給開發者一個文件，你需要留一些區域，以至於可以將圖標放在右側視覺背景的中心。
相同的“Play”按鈕。如果直接將圓角矩形和三角形對齊，看起來會很奇怪。
如果想讓三角形的視覺位置看上去更好，對齊並環繞這個按鈕背景的圓。
謹記：
- 有尖頭邊緣的形狀應該相對更大一些，便於與相鄰的矩形保持平衡。
- 對齊大寫字母是在按鈕背景中定位按鈕名稱的一個廣泛使用且有效的方法。
- 在按鈕上準確定位三角形圖標的一個有效辦法是用圓環繞它且與背景對齊。
3. 視覺圓角
什麽可以比圓更圓？之前我從沒考慮過，但就像我在文章開頭所說的一樣，我們的眼睛很奇怪，有時看到的並不是我們想的那樣。看看下面圖片中的圓，哪個是最平滑的圓形？
我之前問的人會在3號和4號圓之間做選擇。1號和2號明顯過窄，5號過於飽滿。如果重疊第3個和第4個，一個是幾何圓一個修正圓，我們會發現第2個比第1個視覺上稍微重一點，所以我們看上去會更圓一些。
為了說明我的理解，我用三個著名的集合字體——Futura、Circe和Geometria來表達字母“o”。因為高質量的字體是基於人類的視覺感知和復雜的視覺系統而建立的，所以它們的圓形看起來比幾何圖形更圓。這些字母你看上去會有不舒服的體驗嗎？
把這幾個幾何圓重疊。即使是最幾何的Futura體的“o”也有四個部分。Circe和Geometria的字母盡管他們的高度和寬度都相等，但還是比圓寬。
在視覺上，一個經過修改的圓(右邊)看起來比一個幾何圖形(左邊)更圓。
我們應該如何運用這一現象呢？例如，在Photoshop、Illustrator或Sketch中使用嵌入的圓角特性，但視覺效果不是很好。
人的視線會立刻看到直線變曲線，但這一變化很不自然。
確定重新考慮我們視覺感知。
這種圓有一個超出幾何圓的額外的面積，使直線在變曲線時不那麽明顯。
試著去感受這些圓之間的區別。
我們現在將這一方法用在圓形按鈕上。
你可能會註意到右側按鈕的圓角更平滑，看起來更舒服。
應用程序的圖標也是一樣的。不能簡化地使用標準圓角達到完美。在討論這一話題前先來看看2個不同的圓角形狀。
第1個是在Sketch上創建的圓角矩形。第2個是超橢圓，也可以叫作拉梅曲線（Lamé curve）。是由法國數學家Gabriel Lamé發現的，根據使用的公式，從一個像四角星形狀變成實際上是圓形的正方形。
Marc Edwards提出了拉梅曲線公式，它的形狀是平滑而完美的。從iOS 7系統開始的圖標都是根據它做成的。
之後這個形狀被增加了黃金分割比例和網格，為設計師引導新的圖標。
使用像超橢圓這樣的形狀的主要好處是它們的很圓且光滑的外觀。另一方面，這些非標準的形狀很難插入到真實的界面中。你可以將多個SVG組合在一起，將特殊的公式或腳本加入到代碼中，或者使用像Apple為其應用圖標所做的PNG掩碼。
關於設計過程本身，有一個簡單的方法可以解決圓角的問題。需要將可轉換的圓形效果轉換為一個輪廓，輸入圖形編輯模式，並手動移動曲線進行處理。
區別在銳角圓形時會更為明顯，這對於繪制正確的視覺道路或地鐵項目是非常重要的。
謹記：
- 幾何上的圓角看起來更像是人為的，因為可以輕松的看到一條直線變成曲線。
- 正確的視覺圓角需要特殊的公式或某種形狀上的手動調整。
其他需要註意
有時一個不理想的幾何圖形看起來更像一個近似方形。你可能會想說，“這是什麽廢話?”那麽，你對下面的方塊有什麽想法？哪個形狀看起來更像一個近似方形呢？
如果你選擇左邊的形狀，你就會聽到公正的視覺的聲音。
當我得知我們的眼鏡比它的寬度更敏感時很驚訝。它解釋了為什麽在幾何字體中，字母“o”總是比幾何圓更寬，字母“H”的垂直部分總是比水平部分粗。
原文作者： Slava Shestopalov
原文地址： https://medium.muz.li/optical-effects-9fca82b4cd9a
譯者：SKYUI
本文由 @SKYUI 原創發布於人人都是產品經理。未經許可，禁止轉載。
題圖來自 Pexels，基於 CC0 協議
Tags: 正方形 視覺 像素 圓形 圖形 可以
文章來源：