UI設計培訓：你的眼睛在跟你開玩笑

最新 12-26

我們每個人在生活中都會遇到視錯覺的現象，它是我們的眼睛給我們開的玩笑，在視錯覺現象的背後存在一個這樣的原理——格式塔原理。格式塔原理解釋了人們如何以視覺方式感覺物體，以及圖像的結構，視角，大小等要素是如何影響我們的視覺的。格式塔（Gestalt）是一個德國詞，意思是圖像或形式,格式塔學派曾是心理學歷史上一個重要的流派。

下面我們看一些案例感受一下吧。

上圖中左邊的中間圓和右邊的紫色圓其實一樣大，但是前者看起來就要小一點，很神奇吧？

看一下這個圖中三條弧線的圓周半徑哪個最大？

其實是一樣的。

這張圖中的直線其實都是平行線。

在設計工作中,我們難免會遇到視覺誤差的情景，那我們如何來處理界面設計中的視覺誤差呢，大體總結為三個方面：

1. 有時我們需要避免使用造成視覺誤差的設計

在做界面設計的時候，我們經常會遇到模塊的劃分，那我們就會用到色塊和線框來進行設計，比如下圖中，我們能夠感受到黑線是凸顯出來的，正常的話我們都喜歡讓他們對齊，但看到這個就會覺得視覺上不舒服，是沒有對齊的，但我們放大來看它們在物理上是確實是對齊的，因為人眼的錯覺，導致感受上不對齊，所以我們要避免這種色塊和線框接觸的設計，如果一定需要這樣的形式，那麼我們可以採用降低「色塊」和「線條」的明暗差，來緩和這種視覺誤差，見下圖右側的視覺感受就好多了。

2. 有時我們要利用視覺誤差

比如像素畫在表現線條的粗細方面也有講究,因為像素畫1像素線條和2像素線條視覺上的粗細差異是非常大的,那麼在表現粗細的時候,更多的是用顏色的明暗來表現.。在像素畫中可以用淡色來表達「細線」，這就是利用了視覺誤差. 另外還有「膨脹色」、「收縮色」，都是視覺誤差的表現，設計師們可以利用其特點，在自己的作品上更好的進行視覺信息傳達。

3、面對視覺誤差時，我們遵循一條原則「以你的感受為準」

做icon是件非常嚴謹的事情，我們當然是追求每個 icon 都看起來一樣大。但假如我們只通過物理尺寸來進行量度的畫，畫出來的 icon 必然會個大個小，烏七八糟，更糟糕的是，這種問題經常發生，手機里隨便打開個 app 都能發現這樣的問題。在畫 icon 的時候，一定要把視覺尺寸這個無法用數字進行衡量的維度考慮進去。視覺重量小的元素要放大，視覺重量大的元素要縮小。

我們看看上圖，icon的外形不盡相同為了達到視覺尺寸上的相等，當它們一起出現的時候，我們要去放大或縮小它們的尺寸，讓我們從視覺上能夠感受到icon的大小是一致的，但是我們看右邊的參考線能夠看得出來，實際上他們的物理尺寸並不是一致的。

總之視覺設計師需要關注並了解到「視覺誤差」帶來的影響，思考如何更好的處理，為追求「完美」增加砝碼。

如果你對IT感興趣~

如果你想成為IT技術大咖~

如果你有夢想~

如果你想擁抱成功~

快來報名加入我們~

翡翠教育的大舞台~

任你揮灑努力的汗水~

學好IT技術~

翡翠教育成就美好人生！

關注翡翠教育官網