格式塔知覺中臨近原則案例運用_第1頁
格式塔知覺中臨近原則案例運用_第2頁
格式塔知覺中臨近原則案例運用_第3頁
格式塔知覺中臨近原則案例運用_第4頁
格式塔知覺中臨近原則案例運用_第5頁
已閱讀5頁,還剩6頁未讀, 繼續(xù)免費閱讀

下載本文檔

版權說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權,請進行舉報或認領

文檔簡介

格式塔原則案例運用格式塔理論是一個心理學名詞,旨在解釋人類的某些行為是如何產(chǎn)生的,也解釋了我們?nèi)祟惖囊曈X經(jīng)驗如何與大腦的反應產(chǎn)生聯(lián)系;主要由以韋特海默為首的一群來自奧地利及德國的心理學家,通過對重要的視覺現(xiàn)象總結觀察而來,闡述了人的神經(jīng)系統(tǒng)對外界輸入的視覺信息自動感知、處理的特點。觀點:人們的審美觀對整體與和諧具有一種基本的要求。簡單地說,視覺形象首先是作為統(tǒng)一的整體被認知的,而后才以部分的形式被認知。通俗的講我們先“看見”一個構圖的整體,然后才“看見”組成這一構圖整體的各個部分。這個logo大家應該不陌生,我們在識別他的時候是不是先看到了一個整體的U然后才看到里面組合的各種元素。如果去深入研究格式塔原理,可能需要相當長的時間來學習理解,乍為視覺設計師,其實只要理解這幾個原理的含義和使用方法,就可以對自己的設計做出指導和支撐了。比如:接近性、相似性、閉合性、連續(xù)性、簡單性、圖形和背景。比較常見的是前面四條,也是我們視覺設計包括平面設計當中常用的四條。下面就來具體解讀這些原理接近性距離/位置相近的元素趨于組成一個整體。就像上圖一樣,由于兩個圓之間的距離更近,一般我們首先看到的就是3組圓而不是6個獨立的小圓。

這里要注意一點,相近性作為格式塔的首要原則,它的影響非常大,大到可以抵消其他原則,比如上圖的圓形添加顏色,甚至改變其形狀,人們也會把相近的事物當成一個整體。觀fl-1S:(171'*lWJi發(fā)Ml觀fl-1S:(171'*lWJi發(fā)Ml****■-中U科襯章Z3M愛tTCJffSQ草詞豐?目云詞單0熱詞帀就桶(31E1子s?i?aiMnif晝力(El?01GSi:UN這則原理在平時的視覺設計中應用比較廣泛,比如上圖的app列表頁。設計師在設計的時候會有意識的將相似的功能聚合在一起,讓其變成一個整體,使整個頁面結構更加清晰便于理解。

相似性在某一方面(大小、顏色、形狀等)相似的元素趨于組成一個整體。o?o?o?o?o?o?淒0中IW閒V12淒0中IW閒V12:16Q酋頁????特燙期JORead址書觀察上圖我們會發(fā)現(xiàn)有2種圓,而不是15個圓。這是因為我們的眼睛很容易關注那些外表相近的物體歸為一組。@?@?峙讀JiHJDRtad駅書電J今日特■價們;虻;防m(xù)出寸聲枕臉復鞫創(chuàng)業(yè)寶典豆拇今勒溜錐電J今日特■價們;虻;防m(xù)出寸聲枕臉復鞫創(chuàng)業(yè)寶典豆拇閉合性構成閉合造型的元素趨構成閉合造型的元素趨觀察上圖我們會發(fā)現(xiàn)有1個圓圈,和1個點,而不是9個點。我們的視覺系統(tǒng)自動的嘗試將敞開的圖形封閉起來,從而將其感知為完整的物體而不是分散的碎片。比如文章開始的時候聯(lián)合利華的logo就是運用了這條原理。伺伺DayZ亦祺加4Q倉□□番■■甘員WrtHlJ?.?Z#¥d站日新華倉□□番■■甘員WrtHlJ?.?Z#¥d站日新華tfi舉戊■餅SAW^W晏零Q凸毎日新顛館辱式魚闌竝陽梓珈嶺K1在頁面設計過程中也有很多地方利用了這條原理。比如上圖右側的圖片被不自然的切斷了,但是用戶可以通過殘留的部分,腦補出右側仍然有個完整的整體,這樣用戶很自然知道可以左滑查看更多的信息。連續(xù)性當發(fā)現(xiàn)一個視覺規(guī)律后,傾向于將對象按規(guī)律延續(xù)下去。比如上面這張圖,你首先會意識到這是一個圈、三條直線和一條曲線,我們從小就知道直線、圈和曲線,所以當我們看到這張圖的時候,知覺上會弱化這些線條分割所帶來的“塊”,而依然意識到是由三條直線、一個圓、一條曲線組成的。卩牛11:1工F觸榜25?51嚕t.KGL£l1A641?1276卩牛11:1工F觸榜25?51嚕t.KGL£l1A641?1276UthHm事干屛霸maZem-Imw995舊N4HNC.59512595are■理莊回1276這條原理對設計師的啟發(fā)在于,要為用戶創(chuàng)建一個條形規(guī)律,輔助他閱讀理解頁面。像上圖,用戶可以通過閱讀前三名的信息,組建出一條自己閱讀規(guī)律方便后續(xù)的閱讀。比如有些用戶關注運動時常,這樣他在閱讀該信息的時候只需要關注最右側的運動時間,因為時間都展現(xiàn)在右側。單性將復雜的視覺信息降低為更為簡單的,更有對稱性,更容易理解,更有意義的東西

比如上圖,一般人更傾向于將左側的圖形理解為兩個圓形,而不是右側的兩個形狀。AfterBeforeAfter電0■啊■啊這個原則在扁平風格當?shù)赖慕裉焯貏e受用上匕如上圖,圖標越來越簡潔。圖形和背景內(nèi)■圖形與背景對比越大,位置越突出,則形越容易被發(fā)覺。內(nèi)■圖形與背景對比越大,位置越突出,則形越容易被發(fā)覺。上圖對比后會發(fā)現(xiàn)左側的白色圖形更容易被發(fā)現(xiàn)。這條原理告訴我們圖形與背景的對比越大就越明顯,反之我們也可以降低對比度來弱化不重要的信息。比如上圖頂部三個功能按鈕使用明亮的顏色增加了圖形與背景的對比度,是他比下面的功能更容易被發(fā)現(xiàn)。OO總結對于原理本身,因為他是由我們?nèi)祟愖约旱纳窠?jīng)系統(tǒng)感知圖形的規(guī)律總結出來的東西,也就是說我們每個人潛意識里就具備這項技能,在解釋原理的過程中你也會發(fā)現(xiàn)很容易理解,但是我們在構思設計的過程中往往會多于專注視覺效果的創(chuàng)作而忽略最基本的原理,也是PM和需求方經(jīng)常反饋的問題。比如功能不夠明顯、頁面雜亂、不舒服等等。我們把原理歸類、總結

溫馨提示

  • 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯(lián)系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會有圖紙預覽,若沒有圖紙預覽就沒有圖紙。
  • 4. 未經(jīng)權益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間,僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理,對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對任何下載內(nèi)容負責。
  • 6. 下載文件中如有侵權或不適當內(nèi)容,請與我們聯(lián)系,我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論