如何利用視錯覺讓界面UI設計更有趣!

在做界面UI設計的時候應該巧妙的利用視錯覺,有效地控制網頁的視覺效果,從而創造出風格更和諧的界面UI設計, 同時也能更有效地將你界面UI設計中的信息傳達給用戶。 在現實生活里,我們都曾體會到錯覺,有時候甚至沉迷其中。而視覺錯覺現象就好像雙眼和我們開的一個玩笑,而我們還享受其中,其實,在這之中,還有個重要的科學原理——格式塔原理。格式塔原理解釋了人們如何以視覺方式感覺物體,以及圖像的結構,視角,大小等要素是如何影響我們的視覺的。 今天交互科技分享的這篇關于界面UI設計利用視覺錯覺的文章中中,我們首先會簡單介紹一下格式塔原理中的基本概念,然后再詳細探討一下如何將它們應用于今日的界面UI設計中。 界面UI設計中的格式塔原理 雖然從名字上看來很像,但“格式塔”這個名稱并非是一個叫做“格式塔”的人的創意。格式塔(Gestalt)是一個德國詞,意思是圖像或形式,格式塔學派曾是心理學歷史上一個重要的流派。


據說在1910年的某天,心理學家Max Wertheimer看到一個鐵路交叉道口的信號燈交替閃爍,產生了這么一個錯覺:他覺得這些信號燈是在一個圓周之內運動,事實上,這些信號燈只是按預定的時間間隔閃爍而已。這個視覺與現實的差異觸發了Wertheimer的靈感。 Wertheimer與他的同事們一道發展出一套理論,這套理論在數十年后成為界面UI設計的基石之一。這個理論實際上是對亞里士多德那句經典名言的擴展,即在視覺現象中,“整體大于部分之和”。格式塔理論包括一系列基本概念。格式塔原理幾乎適用于所有與視覺有關的領域,但它與界面UI設計的關系尤其密切。 下面我們就來重點了解一下它與界面UI設計有關的四個特性。 1.整體性 當我們(人類)辨認一樣物體時,我們傾向于首先辨別它的輪廓,然后將這個輪廓歸類為已知的事物。在此之后,我們才會去注意到這件物體的細節及各個組成部分.


上面的圖片在解釋格式塔原理時經常被采用。在這張圖片中,看圖的人首先會辨認出一條達瑪爾提亞狗,而不是首先認出它的腿,耳朵,頭部,然后把它們在腦中組合成一條狗的樣子。 在界面UI設計中的應用:輪廓及線條往往比細節更重要(盡管界面UI設計的細節也需要有創意)。如果用戶根本就辨認不出哪個圖形才是界面UI設計中可以點擊的按鈕,那么這個按鈕設計得再華麗也是失敗的。 2.具體化 由于在現實中我們所接受的視覺刺激很多都是支離破碎的,我們的大腦在處理這些信息時會自動把缺失的部分補足。


例如,上面的圖形事實上都是含糊而不完整的,但我們的大腦依然能辨認的出它們。在圖形A中,我們會得出這樣的印象,即三個不完整的黑色圓形是由一個白色三角形連在一起的。在界面UI設計中的應用:“閉合性”對界面UI設計而言非常重要。這意味著你只需提供某樣東西的基本要素,觀看者會自動補全確實的部分。因此你應該在界面UI設計中積極靈活地運用負空間(white space),而不應只是把它簡單視作畫面中的留白部分。 3.組織性 如果在視覺上一件物體有不止一種解釋方法,大腦會在不同的解釋之間切換,因為它無法同時接受兩種解釋。一個觀看者越是集中注意力于某種解釋之上,這種解釋就越有支配性。


這也是許多“視錯覺”圖形的理論基礎。例如,在上面的圖形中,觀看者可以將其解釋為一個老婦人,也可以將其解釋為一個年輕女人,但不能同時解釋它的不同意義。 而在界面UI設計中的應用:盡量避免在界面UI設計中使用具有多重意義的圖形。你想要觀看者看到什么,就在界面UI設計中呈現給他們什么。 4.恒常性 這是大腦在辨認和理解圖形時采用的另一種策略。這個特性讓我們總是能根據物體的輪廓與基本結構去辨認不同視角,大小和燈光下的物體。


這個特性讓我們能夠辨認出表A中的圖形與表B中的圖形所存在的差異,盡管它們外型上很相似。同樣的,我們也能夠理解表A中的圖形其實也是表C和表D中的圖形,盡管它們外型上有些變化。 在界面UI設計中的應用:這個特性在界面UI設計中的體現或許不如其他特性那么明顯,但它被廣泛應用于驗證碼中,因為目前在視覺恒常性上,人類依然比機器人更有優勢。



文/UI戴柄

上一篇: 非科班出生如何成為一名UI設計師

下一篇: 黃金比例分割使用指南

分享到: 更多
云南时时下载手机版下载安装 大乐透19101期预测 福彩3d技巧稳赚公式 体彩排三六码组六遗漏 单双大小软件下载 双色球历史开奖走势图 北京pk赛车开奖直播网 360时时彩计划软件 彩名堂是骗局 牛看4张牌抢庄老是输 北京pk赛车改成20分钟 pk10走势图看法教程 双色球开奖结果今天 快三玩法技巧口诀 国彩网官方网站 必富娱乐是不是倒闭了