格式塔知覺中臨近原則案例運(yùn)用

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

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

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

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