網頁設計的視覺效果

網頁設計 通過《格式塔:轉動視覺的魔方》一文已經將格式塔視覺原理進行了基本的介紹,格式塔原理是視覺設計領域通用的法則。在美國內華達大學的網站上曾經有一篇介紹格式塔原理Web應用的文章(可惜原位址已經無法訪問了),曾經翻譯過部分原文,與大家分享。

輪廓/區域 Figure/Ground

輪廓/區域關係是一種最基本的視覺感知法則。輪廓即“感知元素”內部與外部的區分(我們可以理解輪廓為無限精細的線段)。 區域指某“感知元素”獨佔的背景、空間。左邊和右邊的圓形,哪個看起來更大一些?Web Design通常輪廓被稱為“絕對感知元素”而區域被稱為“實體周圍的空間”或“空白”。在感知上,眼睛與大腦協調工作幫助我們專注的把輪廓從區域中分離出來。例如,當我們閱讀時,我們必須把文字從紙張上閱讀出來。同樣,當我們察看顯示器時,也必須從視覺上把各種各樣的輪廓從它們所在的視窗、桌面上分離出來。有時恰恰相反,螢幕上的輪廓,不那麼顯而易見,因為太多的“感知元素”吸引著你的眼睛的注意力。

均衡 Equilibrium

流覽者傾向於尋求視覺組合中的秩序或平衡,就是均衡。也許你覺得右邊的圓形更重一些,而其實螢幕上的圓形根本沒有重量眼睛和大腦配合的視覺過程中,人們總是期望整個視場中存在一種均衡狀態。例如,由於螢幕往往是與地面垂直,那麼在人們的感知中會認為螢幕上的圖像也存在著重力系統。保持均衡就是“和諧”,打破均衡可能造成“衝突”,而完全不均衡就是“混亂”。

閉合 Closure or Completion

閉合,填充輪廓就是封閉的形狀,眼睛和大腦配合總是在不斷的完成這個封閉的過程。流覽者的視覺系統會認為封閉的形狀比較穩定(這也是一種均衡)。雖然這個圓形不完整,但你依然認為它存在著在感知上,流覽者傾向於從視覺上封閉那些開放或未完成的輪廓。封閉是取悅用戶視覺心理的重要原則。比如,為了讓用戶保持積極投入關注,設計師會故意創造一些簡單的形狀讓流覽者去關閉。用戶花越多的時間去關閉形狀,設計可能就越令人難忘;但是,如果圖形不能被閉合,觀眾的注意力就被分散,因為關閉它們實在太難了 網上推廣。

貼近 Proximity

當多個可見元素出現時,眼睛和大腦配合起來,傾向於根據它們的貼近和靠近關係進行分組 SEO。