無極5登錄_為什麼你的圖標看着不舒服?

如何打造視覺平衡:正確的尺寸+視覺對齊+完美的圓角修飾。

我們的眼睛很奇怪,經常誤導我們。但如果你知道人類視覺的特殊性,就可以構建更好的設計。

20 世紀 20 年代,格式塔的視覺感知理論得到了發展。它解釋了我們的眼睛如何處理不同的圖像以及我們的大腦如何解釋它們。你可能已經聽說過諸如親近原則或共同命運規則之類的話題,本文引用了格式塔理論的一些觀點,重點介紹了實踐方面而不是學術研究上的問題。在底部有關於這個主題的相關推薦列表,有興趣的話可以瀏覽。

測量尺寸和視覺尺寸

400 px 的正方形和 400 px 的圓哪一個更大?從幾何角度來說,它們的寬和高是相等的。但看看下面的圖片,我們的眼睛立刻發現正方形大於圓。

下圖是帶有標註的:

讓我們再看一張正方形和圓的圖。就視覺重量而言,它們相同嗎?

至少很難立即指出哪一個比較重,不足為奇,因為我增加了圓的直徑。

我重疊了第一個和第二個示例中的形狀。左圖,400 px 正方形的面積大於 400 px 圓的面積。這就是為什麼我們在視覺上看到它更大的原因。右邊,圓和正方形是平衡的,基本上它們的面積也相似,但是寬和高不同。

我們可以看到菱形、三角形具有同樣效果。為了在視覺上與正方形保持平衡,它們應該更寬和更高,以使得它們的面積相似。基於面積的方法非常適合最簡單的形狀。

在 icon 中怎麼使用呢?

當你創建一組圖標時,重要的是要使它們保持平衡,以使圖標不會顯得太突出或太小。如果我們直接把圖標放在正方形內,那麼越像正方形的圖標看起來就越大。

我建議補償不同形狀圖標的重量,允許視覺上較小的圖標懸挂在正方形外,並在視覺上較重的圖標和正方形之間留出一些距離。

下面是一組修改過的圖標:

現在了解了,為什麼一個圖標區域總是比圖標主體大,只是為了讓非正方形圖標適合它並且看起來不小於正方形圖標。

檢查視覺平衡最簡單的測試是模糊設計。如果你的圖標變成相似的斑點,則它們具有形同的視覺權重。

例如,Facebook 和 Instagram 的圖標是方形的,而 Twitter 的圖標則是鳥的輪廓,Pinterest 則是一個環繞的「P」。這就是為什麼 Twitter 和 Pinterest 的圖標要大一點,以便於它們與 Facebook 和 Instagram 圖標保持平衡。

視覺平衡的另一個例子是將文本框與圓形按鈕放在一起。如果按鈕的直徑等於文本框的高度,那麼按鈕會顯得更小。當你把它放大一點,整個結構就會變得更加平衡。

但如果你改變按鈕的樣式,就不需要放大了。在下圖中,按鈕和文本框的高度是 80 px,但是右邊的按鈕視覺上看起來並沒有很弱,因為它是黑色的。

Tips:

  • 視覺重量是人眼感知物體大小和重要性的方式,它不一定等於其像素大小或面積。
  • 圓形、菱形、三角形和其他非正方形圖形需要更高和更寬的尺寸,才能與正方形圖標在視覺上保持平衡。
  • 圖標區域應該留有一些空間用於視覺平衡。對於一組圖標來說,這是至關重要的,它們應該確保看起來是一致的。

不同形狀的對齊

視覺對齊是視覺平衡主題的延續。看下圖:它們看起來一樣長嗎?

以 px 為單位,答案是肯定的。但是,第一眼看上去,第一條要比第二條長一些。

現在看下圖,有什麼變化嗎?

我對第二條矩形應用了視覺補償。允許尖峰值超過上條矩形長度的 20 px,是補償峰值之間的間隙並使兩個形狀在視覺上相等。

還有一些特殊圖形的例子:

所以,如果你設計一張帶有摺疊條紋和文字的海報,或者商品圖角標設計時,請注意使它們達到視覺平衡。銳利的邊緣應該超出形狀的其他部分。

文本和有背景的段落怎麼對齊?這取決於背景的視覺密度。如果它很輕,你可以將突出显示的段落與文本的其餘部分對齊。

由於背景較淺,因此不會中斷正常的文本流。

對於深色背景,可以使用不同的方法。在圖片上,黑色背景與文本的其餘部分對齊,而其中的白色文本以縮進方式放置。

與淺色背景的情況不同,黑色背景具有較大的視覺重量,如果目標是無縫瀏覽段落,則最好按照以下所示的方式對齊。

相同的原理同樣適用於按鈕和輸入字段。當然這隻是基於人類視覺感知的設計。

左側輸入字段的淺色背景可以超出輸入標籤和輸入文本的範圍。「發送」按鈕的與輸入背景的右對齊,因為該按鈕較暗且從視覺角度看較重。

在右側,輸入具有實線邊框,當用戶輸入的框內有凹痕時,我將其與標籤對齊。「發送」按鈕的側面為三角形。該按鈕向右移動一點,看起來與上面的矩形輸入字段保持平衡。

在這裏,我們探討另一個對齊問題:文本和圖標按鈕的對齊。下圖,文字看起來居中嗎?

秘訣在於,右邊是三角形,因此在右邊的按鈕上我將文本向左移動了一點。此外,箭頭按鈕的寬度為 40 像素,看起來與矩形按鈕在視覺上相等。

文本按鈕不僅具有水平對齊,而且具有文本和背景的垂直對齊。我想講的第一種方法是在各種操作系統、站點和 APP 中使用的。它是基於字體的大寫字母的高度(即上限)對齊方式,它等於「 H」或「 I」的高度。

基本上,大寫字母上下的空間和按鈕的邊緣是相等的。這是有道理的,因為操作按鈕通常以大寫字母書寫,並且英文字母的升序更多,上伸出部分(l,t,d,b,k,h)比下伸出部分(y,j,g,p )多。

另一種方法是使用字體的小寫字母的高度(所謂的x高度)來對齊文本和背景。在 sans 和 sans serif  字體中,它等於字母「 x」的高度。

由於文本的主要視覺重量集中在小寫字母的區域,因此該方法也是可行的。

這些方法之間有什麼區別嗎?有區別,但差異不大。

對於「取消」和「確定」(常用按鈕),由左列代表的上限高度方法肯定更好,因為「取消」沒有下垂部分(y,j,g,p ),並且「確定」都是大寫字母。

右欄中显示的 x 高度方法僅對「同步」按鈕更好,該按鈕的名稱同時具有上下突出的元素;「取消」和「確定」兩個詞似乎位置太高了。

圖標按鈕的情況與文本按鈕略有不同,讓我們在圓形背景上放一個「發送」圖標。哪個看起來視覺更加平衡?

希望你已經注意到左邊的那個有問題。發生這種情況的原因是對齊方法不同。第一個選項將圖標視為矩形,在某種程度上說是正確的,因為當你將 SVG 或 PNG 文件給開發人員時,它是一張矩形圖。右側显示圖標的位置,使其所有尖銳邊緣與圓形按鈕背景的距離相等。

如果為開發輸出文件,則需要保留一些區域,以便他們可以使圖標在背景上正確居中。

同樣「播放」按鈕也一樣,如果直接對齊這些形狀(圓角矩形和三角形),它們將看起來很奇怪。

如果要使三角形的視覺位置更好,則將其圍繞並使其與按鈕背景對齊會更好。

Tips:

  • 帶有尖銳邊緣的形狀應更大或更長,以與相鄰的矩形對象保持平衡。
  • 帽高對齊是在按鈕背景上定位按鈕文本的有效方法。
  • 正確將三角形圖標放在按鈕上的一種有效方法是將其包圍並使其與背景對齊。

視覺圓角

還有什麼比圓形更圓的圖形嗎?

我曾認為沒有,但是正如我在本文開頭所說的那樣,我們的眼睛很奇怪,有時會欺騙我們。那麼,下面圖片中哪個圓看起來最平滑?

我之前問過的人在 3 號和 4 號之間進行糾結。1 號和 2 號絕對太瘦了,5 號太豐滿了。如果我們將第三個和第四個變體(一個幾何圓和一個修改的圓)重疊在一起,我們會發現,後者比第一個重一些。

為了說明我的意思,我從 Futura,Circe 和 Geometria 這三種著名的幾何字體中選取了字母「 o」。鑒於高質量字體是基於人類的視覺感知構建的,並且使用了複雜的視覺構造系統,因此我認為它們的圓形看起來比幾何形狀更圓。

讓我們將它們與幾何圓重疊。即使是最幾何圖形的 Futura 的「 o」也有四個突出部分。此外,Circe 和 Geometria 的字母比圓圈寬,但即使它們的高度和寬度相等,我們也可以看到這四個「肚子」好像小了。

因此,從視覺角度而言,修改后的圓(右側)看起來比幾何圓(左側)更「圓形」。

我們如何使用這種現象?當然要進行圓角處理。如果你在圖形編輯器中直接修改圓角,效果其實並不好。

人眼立即發現直線突然變成曲線的點,而且這種處理看起來並不自然。

考慮到我們的視覺感知,我修改了這個圓角。

這種嵌入具有超出幾何圓的額外區域,使得直線與曲線相交的點不那麼明顯。

只是嘗試感受一下這些嵌入方法之間的差異。

現在,我們可以將這種方法應用於圓形按鈕。

你可能已經注意到,右側的按鈕具有更平滑的圓角倒角,並且你的眼睛更加舒適。

與 APP 圖標相同,人們不只是使用標準的圓角整數來達到理想的效果。在深入探討此問題前,讓我們看一下下面圖形的差異:

第一個是我在 Sketch 中創建的圓角矩形。第二個形狀是超橢圓形,也稱為 Lamé 曲線。它是由法國數學家加布里埃爾·拉梅(GabrielLamé)發現的,根據公式的不同,其範圍可能從四點星形到實際上看起來像是圓角正方形。

馬克·愛德華茲(Marc Edwards)提出了 Lamé 曲線的公式,該公式產生了平滑且視覺上完美的形狀。從 iOS 7 開始的圖標均基於此設計的。

後來,通過添加黃金比例和用於指導新圖標設計者的網格來修改此形狀。

使用超橢圓等形狀的主要好處是其光滑的外觀。另一方面,這些非標準形狀很難到真實項目中。應該將多個 SVG 組合在一起,在代碼中包含特殊的公式或腳本,或者像 Apple 為其應用程序圖標那樣使用 PNG 掩碼。

至於設計過程本身,有一個簡單的圓角修復方法。您需要調整合適的圓角度數。

銳角倒圓的差異更加明顯,這對於繪製道路或交通設計非常重要。

Tips:

  • 幾何圓角看起來很假,因為你可以輕鬆看到直線突然變成曲線的點。
  • 視覺上正確的圓角需要特殊的公式或手動調整形狀。

有時,非幾何正方形看起來更像方形。你可能會想,「這是什麼廢話?」 那麼,你看下面的正方形?哪種形狀看起來更方形?

如果你選擇了左側的形狀,你就能感受到視覺差異的點。

更多圖標設計原則:

搞懂這7個圖標設計原則,你就能像專業圖標設計師一樣

編者按:設計原則總是看起來簡單抽象不言自明的,但是在細分的設計領域,這些原則其實有着各自不同適用情況,有着「特定的條件」。圖標設計,就是如此。今天的這篇文章,來自專業的…

閱讀文章 >>

歡迎關注作者微信公眾號:「UX Talk」

未经-摩登3注册-摩登3测速官网-允许不得转载:摩登3注册-摩登3测速官网 » 無極5登錄_為什麼你的圖標看着不舒服?

赞 (0)