close

網頁設計中的“格式塔”原理應用
《平面設計資料——“格式塔”視覺原理》一文將“格式塔”視覺原理進這個視覺設計領域通用的法則做了簡單的介紹。網頁設計美國內華達大學的網站上曾經有一篇介紹格式塔原理在Web設計中應用的文章,現將部分內容翻譯出來與大家分享。
區域指某“感知元素”獨占的背景、空間。
左邊和右邊的圓形,哪個看起來更大一些?
輪廓/區域關係是一種最基本的視覺感知法則。
輪廓即“感知元素”內部與外部的區分(我們可以理解輪廓為無限精細的線段)。
通常輪廓被稱為網站設計“絕對感知元素”而區域被稱為“實體周圍的空間”或“空白”。
在感知上,眼睛與大腦協調工作幫助我們專注的把輪廓從區域中分離出來。例如,當我們閱讀時,我們必須把文字從紙張上閱讀出來。
同樣,當我們察看顯示器時,也必須從視覺上把各種各樣的輪廓從它們所在的窗口、桌面上分離出來。
有時恰恰相反,屏幕上的輪廓,不那麼顯而易見,因為太多的“感知元素”吸引著你的眼睛的注意力。
均衡Equilibrium
瀏覽者傾向於尋求視覺組合中的秩序或平衡,就是均衡。
瀏覽者的視覺系統會認為封閉的形狀比較穩定(這也是一種均衡)。
雖然這個圓形不完整,但你依然認為它存在著
在感知上,瀏覽者傾向於從視覺上封閉那些開放或未完成的輪廓。
封閉是取悅用戶視覺心理的重要原則。
比如網站優化,為了讓用戶保持積極投入關注,設計師會故意創造一些簡單的形狀讓瀏覽者去關閉。
用戶花越多的時間去關閉形狀,設計可能就越令人難忘;但是,如果圖形不能被閉合,觀眾的注意力就被分散,因為關閉它們實在太難了。
也許你覺得右邊的圓形更重一些,而其實屏幕上的圓形根本沒有重量
眼睛和大腦配合的視覺過程中,人們總是期望整個視場中存在一種均衡狀態。例如,由於屏幕往往是與地面垂直,那麼在人們的感知中會認為屏幕上的圖像也存在著重力系統。
保持均衡就是“和諧”,打破均衡可能造成“衝突”,而完全不均衡就是“混亂”。
閉合Closure or Completion
閉合,填充輪廓就是封閉的形狀,眼睛和大腦配合總是在不斷的完成這個封閉的過程。
網頁設計貼近Proximity
當多個可見元素出現時,眼睛和大腦配合起來,傾向於根據它們的貼近和靠近關係進行分組。
這些圓形在你的視覺中分為幾組?
元素與另外的元素越貼近,用戶越從視覺上認為它們團結的越緊密(可以理解為是一種“閉合”)。設計師通常使用貼近的辦法對同類內容進行分組,同時留下間距,給用戶的視覺以秩序和合理的休憩。
延續Continuation
當許多元素有組織的素排列在一個直線或曲線路徑上,這個原則將讓用戶的視覺系統認為元素正在按照路徑在延續下去。 視覺向量的指示作用
通常設計師使用這種構圖原則將告訴瀏覽者的視覺系統按照元素組成視覺向量進行延續。
在網頁上,這種延續的設計經常被用來指引用戶在可以點擊處停留,或者指引用戶滾動頁面進行瀏覽的延續;用戶的眼睛會在視覺向量的引導下一頁一頁的進行瀏覽。
相似Similarity
元素具有近似外觀時會被看成是一組;網站設計同組中的元素可能具有相似的顏色、外形、大小、文本樣式。
相似度首先決定了區分度,此時貼近關係被弱化
當大量相似的元素出現的時候,視覺系統傾向於不把它們分開。
當元素之間的相似性比較弱時,視覺系統傾向於使用貼近的原則對它們進行組織,形成統一的整體。因此在創建網站的風格時,設計師可以使用近似的文本、顏色、圖像和留白,讓網頁保持一致。

arrow
arrow
    全站熱搜

    banjia27 發表在 痞客邦 留言(0) 人氣()