前兩篇:
? ? ? ? ? ??視覺誤差會對 UI 造成什么樣的影響?(一)
? ? ? ? ? ??視覺誤差會對 UI 造成什么樣的影響?(二)
3.視覺圓角
什么可以比圓形更圓？我曾經(jīng)認為沒有什么，但正如我在本文開頭所說的那樣，我們的眼睛很奇怪，，眼睛看到的東西不能全信。那么，下面的圖片中的哪個圓圈看起來最圓？
我之前詢問的人都是在3號和4號之間進行選擇。數(shù)字1和2絕對太瘦，5太豐滿。如果我們將第3個和第4個圓重疊 - 實際上3是正圓，4偏胖一些。但是會有很多人認為4才是正圓。
鑒于高品質字體是基于人類視覺感知而建立的，并且使用了復雜的光學構造系統(tǒng)，我認為字體O的圓形看起來比幾何形狀更圓。
讓我們將它們與幾何圓圈重疊。即使是最幾何的Futura的“o”也有四個突出部分。除此之外，Circe和Geometria都比圓圈寬，但即使它們具有相同的高度和寬度，我們也可以看到這四個“肚子”更胖。
看看下圖，左手邊的圓是一個正圓，右手邊的圓是一個經(jīng)過“變胖”的圓。但是“變胖”的圓看起來更像正圓，
我們如何規(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ù)黃金分割等理論加上了一些必要的參考線。
重要的是要記住
1. 因為您可以很容易地看到直線突然變成曲線的點，因此幾何圓角看起來很生硬。
2. ?制做自然的圓角矩形需要特殊的公式或對形狀進行一些手動調整。
