視覺誤差會對 UI 造成什么樣的影響?(三)

2 評論 4355 瀏覽 16 收藏 7 分鐘

上兩篇了解過了視覺誤差對UI造成影響的其他兩個因素,本文主要講視覺誤差對UI造成影響的最后一個因素——視覺圓角。

 

視覺圓角

什么可以比圓形更圓?我曾經(jīng)認為沒有什么。

但正如我在本文開頭所說的那樣,我們的眼睛很奇怪,眼睛看到的東西不能全信。那么,下面的圖片中的哪個圓圈看起來最圓?

我之前詢問的人都是在3號和4號之間進行選擇,數(shù)字1和2絕對太瘦,5太豐滿。如果我們將第3個和第4個圓重疊,實際上3是正圓,4偏胖一些,但是會有很多人認為4才是正圓。

鑒于高品質(zhì)字體是基于人類視覺感知而建立的,并且使用了復雜的光學構(gòu)造系統(tǒng),我認為字體O的圓形看起來比幾何形狀更圓。

讓我們將它們與幾何圓圈重疊,即使是最幾何的Futura的“o”也有四個突出部分。除此之外,Circe和Geometria都比圓圈寬,但即使它們具有相同的高度和寬度,我們也可以看到這四個“肚子”更胖。

看看下圖:左手邊的圓是一個正圓,右手邊的圓是一個經(jīng)過“變胖”的圓,但是“變胖”的圓看起來更像正圓。

我們?nèi)绾我?guī)避這種現(xiàn)象?

比如:常見的ios圓角,當然是為了四舍五入!如果使用Photoshop,Illustrator或Sketch中的功能畫圓角,視覺看上去,是不能畫出準確的圓角的。

人眼可以馬上檢測到一條直線突然變成曲線,軟件做出來的圓角并不自然。

我在考慮到我們的視覺感受的情況下,用非正圓畫出來的圓角非常平滑。

正圓之外還增加一點額外的部分,多出來的那點正好給予了一定的過渡,讓直線向曲線的改變更加平順。

比較一下:

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

我想你可能已經(jīng)注意到,右邊的按鈕有更圓滑的圓角,視覺效果更好。與應用程序圖標也是相同的,不會簡單地使用標準的圓角來達到完美的效果。

但在我們深入探討這個話題之前,讓我們來看看兩種:

第一個是一個圓角矩形,我在Sketch中創(chuàng)建。第二種形狀是超橢圓形,也稱為?Lamé 曲線。

它是由法國數(shù)學家?Gabriel Lamé 發(fā)現(xiàn)并命名,根據(jù)所使用的公式不同,可能會有所不同,很明顯,右邊那個更像 iOS 的 icon。

從 iOS7 起,iPhone 所有的 icon 都基于此進行設計。

曲線的方程式

后來,根據(jù)黃金分割等理論加上了一些必要的參考線。

重要的是要記?。?/strong>

  1. 因為您可以很容易地看到直線突然變成曲線的點,因此幾何圓角看起來很生硬。
  2. 制做自然的圓角矩形需要特殊的公式或?qū)π螤钸M行一些手動調(diào)整。

前兩篇:

視覺誤差會對 UI 造成什么樣的影響?(一)

視覺誤差會對 UI 造成什么樣的影響?(二)

 

原文作者:Slava Shestopalov

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

本文由 @VisualCC??翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載

題圖來自 Pexels ,基于 CC0 協(xié)議

更多精彩內(nèi)容,請關注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 很詳細,期待更深入挖掘

    回復