比圓更圓—視覺感知在UI中的應用

原作者：Slava Shestopalov

鏈接：https://medium.muz.li/optical-effects-9fca82b4cd9a

來源：Medium

著作權歸作者所有。商業轉載請聯繫作者獲得授權，非商業轉載請註明出處。

_______________________________________________________________________________

*譯者註：第一次在知乎上發文章，竟然被舉報了。本來放在底部的原作者信息及出處按要求放到了頂部。

正文之前，兩個問題

哪個更圓？

哪個更方？

本文作者9月13號在Medium上發表了這篇文章，15號就開始翻譯了，一直拖到現在，期間網上已經出現了各種版本，這是另一個完全不權威很隨心的版本。

• 物理尺寸和視覺感知尺寸
• 不同形狀的正確布局
• 完美的圓角

1、數學和視覺尺寸

哪一個尺寸更大？一個400px的正方形或者是一個400像素的圓形。幾何學上來說，它們的寬度和高度是一樣的。但是觀察一下下面的圖片，我們的眼睛能立即識別出正方形比圓形更重。順便說一下，「重量」相關的詞語更適合描述視覺效果。

以防你不相信我的話，下面是加上參考線和數值的版本。

現在讓我們再看一張圖片，在視覺重量上，它們是一樣的么？

對我來說，絕對是的。最起碼很難立即說出哪一個更重。因為我把圓的直徑增加了50px。

為了說明緣由，我把兩張圖重疊在一起。如下圖，可以看出來，在「a」區域正方形比圓形更重，然而「b」區域圓形比正方形更重。左邊的圖中正方形能完全包裹圓形，右邊的圖中圓形和正方形是平衡的，沒有誰能包裹誰，圓形和正方形都有四小片內容。

同樣的菱形和三角形也有同樣的效果。為了與正方形有一樣的重量，它們需要變得更大。

那…重點來了。這和界面設計有什麼關係？

當你設計一組icon的時候，所有的icon看起來視覺平衡是非常重要的，以確保沒有icon太突出或者太小。如果直接將icon放入正方形中，越接近正方形的icon會看起來更大。

我推薦把視覺重量比較輕的icon稍微超過icon區域的邊界，而視覺較重的icon則在區域中留下一部分空白區域。

以下是一些視覺平衡的icon案例

圖中很清楚的標明了為什麼一個icon區域通常會比icon本身要大了—為了能讓非方形的icon看上去更合適，看上去不比方形的icon小。

最簡單的檢查方式是將icon模糊掉，如果模糊掉之後看上去或多或少是相似的斑點的話，它們就具有相同的視覺重量。

但有時候我們需要與現有的圖形打交道，比如：社交網路的logo會經常被用來作為分享或者喜歡的按鈕。Facebook和Instagram的icon是方形的，而Twitter則是一個小鳥的剪影，Pinterest則是一個被圓形包裹的P字母。所以將它們放在一起的時候，Twitter和Pinterest的icon會可以放大一些，這樣這一排icon看上去就一樣大了。

另一個情景是當輸入框和圓形的按鈕放置在一起的時候如果按鈕的直徑和輸入框的高度一致的話，按鈕會看上去顯得小一點，但如果將圓形按鈕放大一點，整個組合會看上去協調很多。

換一個情況，如果改變按鈕的樣式，可能就不需要放大按鈕了。如下圖，按鈕和輸入框都是80px高，右邊的按鈕看上去明顯與輸入框更和諧一些。

需要記住的幾點：

• 視覺重量是人眼感知物體的尺寸和意義的方式，它不必和實際的物理尺寸相同；
• 圓形，菱形，正方形和其他非方形的形狀需要更大以確保與方形的icon的視覺重量上一致；
• Icon區域需要為視覺平衡留出一些空白區域，對於一組系列icon來說是非常有必要的。

2、不同形狀的正確布局

邏輯上來說視覺分布是視覺平衡及視覺重量現象的延續。讓我們看一下下面的條形。它們看上去是一樣長么？

從像素單位上來說，當然是的。但是第一眼看上去的時候回感覺下面的條形比上面的短一些。

再看另一張圖，有什麼改變么？

我稍微增加了一些下麵條形的長度，讓右側尖的部分增長了20px，這樣就可以彌補由於中間缺口，從而使得上下兩條看上去「一樣長」

現在一起看一下更複雜的條形

舉個例子，當你在設計一張在折彎的條形上放文字的海報時，或者只是放一些折線在產品卡片或者是在電商中使用的時候，需要注意它們是否達到了視覺平衡。尖銳的形狀需要稍微超過一點主體形狀，尤其是主體是長方形的情況下。

那當排布一些帶有背景的文字或者段落時該怎麼辦呢。這取決於背景的視覺密度。如果背景比較輕，可以把段落排布與其他部分一致。（直接看圖比較明顯。）

當背景比較輕的時候，它不會打斷整個文章的文字流。

另一種形式是增加一個深色的背景。在下圖中，把黑色的背景排列的與文字的寬度相同，文字則在背景上縮進排列。

與淺色的背景不同，深色的背景視覺重量很重，如果加背景的目的是想無縫的在文章流中加入一段文字，最好是像下圖這樣排列。

同樣的原理可以用在按鈕和輸入框的排列中。當然，這不是教條，只是基於視覺感知的界面。（Of course, it』s not a dogma, just the optics-based vision of an interface.）

左邊的文本輸入框的淺色背景可以超出標籤和輸入的內容，可以注意到「send」按鈕的右邊和淺色背景的右邊不是完全對齊的，因為按鈕顏色比輸入框顏色更深，從視覺感知上來說看上去更重。

再看右邊，輸入框有實線的邊框，我將輸入框與標籤的文字對齊，而輸入框內的文字則往裡縮進了一些。「send」按鈕有一邊有三角，所以將按鈕稍微往右邊移動了一點。這樣的話從視覺感知上來說，就看上去會比較平衡。

接下來看一下關於「分布」的另一個方面—文字和按鈕形狀的排列。觀察一下下面的按鈕，文字看上去在正中間不是么？

事實上，在右邊的按鈕中，我將文字往左邊移動了一點，因為按鈕的右側是三角形，此外右邊的按鈕比左邊寬40像素，以確保兩個按鈕在視覺感知上看上去一致。

文字和背景不僅有水平方向的排布，同樣也有垂直方向的排列。第一點我想表達的是這能運用在操作系統，網站，APP等不同介質的界面上。垂直方向是基於大寫字母的高度（也叫做cap-height）的，所以「H」和「I」的高度一樣。

基本上一個大寫字母頂部和底部到按鈕上下的空間是一致的。這很有用，因為按鈕文字通常用與標題相似，首字母大寫，而有些字母有突出的部分—字母有部分在上方的（l,t,d,b,k,h）；字母有部分在下方的（y,j,g,p）

還有一種處理方式是根據小寫字母的高度（也叫x-height）來排列字母和按鈕底色。在襯線體和無襯線體的字體中，字母」x」的高度是一樣的。

這樣的排列方式同樣有用，因為主要的視覺感知區域是小寫字母集中的地方。

這兩種方式有什麼區別么？還真有，不過只是一點點。

下面有更多比較的例子。左邊一列以cap-height（大寫字母高度）為準排列的按鈕更適合「cancel」和「OK」這樣用的很多的按鈕—因為「cancel」中沒有字母有往下的小腳（descender…小翻實在能力有限），「OK」則全是大寫字母。右邊一列是以x-height（小寫字母高度）為基準排列的，這一列中只有「Sync」這一個按鈕比較合適，因為「Sync」在上下都有一部分字母的腳，此時「Cancel」和「OK」按鈕看上去就不那麼合適了。

這樣的情況在帶icon的按鈕中也有一些差別。我們看下面的按鈕，哪一個更加平衡？

希望你有注意到左邊那個有點不對勁。這是不同的排列方式導致的。第一種做法是將整個icon放置在一個方形的區域內。對於特定範圍內來說，這是正確的做法，因為當把SVG或者PNG文件給到工程師的時候就是一個帶有圖形的方形的區域塊。右邊的則表示所有的尖角到圓形的邊緣的距離是一致的。

如果需要準備一個文件給開發，那麼久需要預留一些空間，這樣的話就能確保它能在視覺上保持平衡。

同樣的來看「Play」按鈕，如果直接按照方形區域來排列，會出現下面的情況—看上去很奇怪。

如果想讓他看上去更合適，可以將三角形放在圓形當中，然後調整圓形和底色圖形的位置。

需要記住的點：

• 帶有尖角的形狀應該更大一點以確保和方形元素看起來一致；
• 基於cap-height來排列字母和按鈕背景色是一種行之有效的方法；
• 將三角形的icon元素放置在方形的背景上，有效的做法是用一個圓圈包圍住三角的元素。

3、圓角的處理（圓角≠倒角）

有什麼能比圓角更圓？我曾經也以為沒有。但如同我最開始說的，我們的眼睛是是非常不可思議的，有時候它不會像我們所以為的那樣傳遞信息。所以，下面那張圖看起來更圓？

我之前問過的人大多會選擇3或者4。1和2明顯太瘦，5則顯得太豐滿，如果將3和4重疊在一起——會發現一個是幾何意義上的圓形一個是優化過得圓形，第二個比第一個視覺上會稍微重一點，因此也看上去更圓一點。

為了進一步的說說明這是怎麼回事，我排列了字母O在三種著名的的幾何字體的情況——Futura，Circe和Geometria。這樣高質量的字體是基於人類的視知覺優化的，並且運用了複雜的系統來優化視覺上的感受，希望它們的圓看上去比幾何圓形更圓。這些字母有讓你的眼睛更愉悅么？

如果在它們上面疊加一個幾何圓形，即使是最接近幾何圓的Futura也有四塊超出幾何圓形的地方。此外，Circe和Geometria的字母則在寬度上也比幾何圓形更寬，及時他萌和真正的幾何圓形有同樣的高度和寬度，也能看到有四塊炒出來的「小肚腩」，看上去像吃多了一樣。

所以從視覺感知上來說，經過優化的圓形（右邊的）會比一個幾何圓形看上去更圓。

那我們能怎麼利用這一現象呢？當然是用在圓角中！如果直接用軟體中默認的圓角工具—PS,AI,Sketch等…結果可能在視覺感知上不來說並不太好。

人的眼睛能立馬看出來直線在哪裡突然轉成曲線，這樣的圓角看上去並不太自然。

考慮到我們的視覺感知能力，我修復了這個問題。

這樣的圓角在傳統幾何形圓角的基礎上有一塊額外的區域，來確保直線和曲線交界的地方不會那麼明顯。

儘可能體驗一下兩種不同處理方式的區別吧，看下圖。

現在可以將這種方法應用到圓形的按鈕中了。

相信你已經注意到右邊一列的按鈕看上去有更順滑的圓角，而且視覺效果更好。

APP的icon同理。我們不會簡單的直接使用默認的幾何圓角就能得到完美的結果。在深入討論這個問題之前，讓我們看一下兩種不同的圓角形狀：

第一個是在Sketch中創建的圓角矩形，第二個則是「超橢圓」，也被叫做Lame曲線。是被一個叫做Gabriel Lamé的法國數學家基於數學公式從一個類四角星的形狀變化而來的，看上去更圓。

Marc Edwards使用Lame的曲線創造除了一個順滑的視覺效果完美的形狀。從IOS7開始的ICON就是基於這個形狀。

後來這個形狀加上了黃金比例和網格，來指導設計師設計新的ICON。

使用超橢圓的好處是能看上去更加的圓潤。另一方面，這些非標準的形狀要應用在實際的屏幕中是比較麻煩的。一方面要結合各種SVGs文件，一方面也需要載入一些公式和腳本或者是像APPLE處理APP ICON一樣用PNG蒙版的方式。

對於設計過程本身來說，有一個簡單的處理方法。只需要雙擊進入可調整貝塞爾曲線的狀態，手動將兩個圓角的控制桿拉近一點即可。

這樣的效果在尖銳的角上會更明顯，這在畫線路或者是地鐵路的時候很重要。

需要記住的點：

• 幾何圓角看上去很生硬是因為人能輕易的分辨出直線和曲線交界的地方；
• 視覺效果完美的圓角需要特殊的公式或者手動調整一些細節

彩蛋

有時候一個不是完全準確的方形看上去會更「方「一點。你可能會覺得這有點胡說八道。所以你覺得下面哪個方形更」方「？

如果你選擇左邊的形狀，那你可能完全相信自己的視覺感知能力。

驚訝於人的視覺系統對物體的高度的感知敏感度會強於對寬度的敏感度。這就解釋了為什麼基於幾何形狀的字體，字母」O「通常會比實際的幾何形狀要寬，字母」H「的垂直高度通常比實際幾何形狀的要細。

正文結束

譯的時候就學到很多能直接拿來用的tips，感謝

原作者 Slava Shestopalov。、

https://medium.muz.li/optical-effects-9fca82b4cd9a

09.26補充內容：

PS：有人說之前看到過這篇文章，的確在之前有幾個不同的出處，包括某知名設計網站公眾號，但平時個人就會在自己的公眾號翻譯一下自己感興趣的內容，此篇在原作者文章發布（9月13號）後的第3天就開始翻譯的事情，未參照任何其他平台的翻譯內容，全憑自己大學四級的水平，翻譯出來是為了自身加強對內容的理解，發布到平台上，也只是覺得它有用，而已。

附上自己印象筆記的截圖。to舉報的同學，就是來打你臉的。