中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

編輯導(dǎo)語(yǔ)：格式塔，系德文“Gestalt”的音譯，由三位德國(guó)心理學(xué)家威特海默、考夫卡和科勒所創(chuàng)立。旨在解釋人類(lèi)的某些行為是如何產(chǎn)生的，也解釋了我們?nèi)祟?lèi)的視覺(jué)經(jīng)驗(yàn)如何與大腦的反應(yīng)產(chǎn)生聯(lián)系。將格式塔應(yīng)用至設(shè)計(jì)中，往往會(huì)取得意想不到的好效果。本文作者深度解析了格式塔7大原則，一起來(lái)漲知識(shí)吧。

前段時(shí)間應(yīng)邀給部門(mén)內(nèi)新入職的校招設(shè)計(jì)師講一堂設(shè)計(jì)法則的基礎(chǔ)課，因?yàn)槿ツ暌呀?jīng)按照聚類(lèi)的方式，整理了一張非常具有廣度的設(shè)計(jì)法則一覽表，如下圖所示：

所以今年再次備課時(shí)，就想從深度切入，把一組大家耳熟能詳?shù)脑O(shè)計(jì)法則講得更加透徹，讓大家意識(shí)到學(xué)海無(wú)涯，不僅有廣度知識(shí)要吸納，還有深度智慧要挖掘。

在簡(jiǎn)單的掃描了之前整理的設(shè)計(jì)法則一覽表之后，我馬上就把目光鎖定在了《格式塔原理》上，這幾乎是所有設(shè)計(jì)師入門(mén)必學(xué)的基礎(chǔ)知識(shí)，日常運(yùn)用也最為廣泛，不過(guò)很多同學(xué)只知其核心理念，對(duì)其延展知識(shí)卻知之甚少（如果你不信，可以繼續(xù)往下看哦~），非常符合我想深度解析的想法。

格式塔，是由三位德國(guó)心理學(xué)家威特海默、考夫卡和科勒創(chuàng)立的。它是德文“Gestalt”一詞的音譯，意思為“形式”、“形狀”，在心理學(xué)中用這個(gè)詞表示的是任何一種被分離的整體。對(duì)它的研究，起源于視知覺(jué)，后以此為地基，構(gòu)建了現(xiàn)代認(rèn)知心理學(xué)的大廈。

格式塔心理學(xué)派指出，人類(lèi)的視覺(jué)感知具有整體性，整體是大于個(gè)體總和的。整體不能簡(jiǎn)單的看做是個(gè)體集合，它的特性是不包含于元素之內(nèi)。

舉個(gè)?：

從元素構(gòu)成上來(lái)說(shuō)，上圖就是一系列的一模一樣的小圓點(diǎn)，整體構(gòu)成一個(gè)笑臉，一系列的圓點(diǎn)有無(wú)數(shù)種可能，但單獨(dú)看任意一個(gè)圓點(diǎn)都不具備笑臉的特性，這就是1+1＞2帶來(lái)的整體特性。

格式塔原理告訴我們：我們的眼睛和大腦在觀察事物，接收影像刺激時(shí)，會(huì)有一些特別的傾向，以幫助我們快速地辨別事物。這些特別的傾向，就是我們今天要深度解析的格式塔七大設(shè)計(jì)原則，下面我們逐一來(lái)了解一下。

一、簡(jiǎn)單原則

在人眼的認(rèn)知過(guò)程中，大腦會(huì)傾向于把一個(gè)復(fù)雜的物體解析成較為簡(jiǎn)單的物象來(lái)理解，以降低大腦的認(rèn)知負(fù)荷，這就是簡(jiǎn)單原則。

簡(jiǎn)單原則是格式塔的核心與基石，當(dāng)我們看一個(gè)畫(huà)面時(shí)，大腦并不會(huì)把他們拆解為獨(dú)立的點(diǎn)線面體，而是會(huì)自動(dòng)對(duì)元素進(jìn)行組合、甚至腦補(bǔ)缺失，以便讓它們呈現(xiàn)為一個(gè)相對(duì)完整且簡(jiǎn)單的整體。

舉個(gè)?：

對(duì)于左一的圖形，拆解的方式有多種，但多數(shù)正常的大腦都會(huì)將其拆解為右一的圖形，而不是中間的種種，這便是簡(jiǎn)單原則的一個(gè)體現(xiàn)。在互聯(lián)網(wǎng)設(shè)計(jì)中，我們也經(jīng)常利用簡(jiǎn)單原則來(lái)做設(shè)計(jì)，比如：

根據(jù)簡(jiǎn)單法則，我們的大腦會(huì)把它解析成三張獨(dú)立，相同大小，近大遠(yuǎn)小且有所遮擋的圖片，而不是一大二小且不完整的三張圖片。

再比如，我們?cè)谠O(shè)計(jì)圖標(biāo)時(shí)，也經(jīng)常利用簡(jiǎn)單法則，設(shè)計(jì)一些前后疊加或者組合的視覺(jué)效果，讓用戶(hù)感知其作為一個(gè)圖標(biāo)整體的涵義，而忽略單個(gè)視覺(jué)元素的寓意。

以上都是簡(jiǎn)單法則的基礎(chǔ)應(yīng)用，下面進(jìn)入我們的延展知識(shí)環(huán)節(jié)。

?延展小芝士：關(guān)于簡(jiǎn)單法則，我們提到最終是為了給大腦減少負(fù)荷，那所謂的負(fù)荷到底有幾類(lèi)？這些負(fù)荷之間的關(guān)系又是怎樣的？我們又應(yīng)該怎么樣給大腦減負(fù)呢？

答案：我們?nèi)粘Ｌ岬降呢?fù)荷可以細(xì)分為三種：認(rèn)知負(fù)荷、操作負(fù)荷以及視覺(jué)負(fù)荷。

1. 認(rèn)知負(fù)荷指人腦在思考、記憶或計(jì)算時(shí)所消耗的能量負(fù)載，簡(jiǎn)單來(lái)說(shuō)就是燒腦程度；
2. 操作負(fù)荷就是因抬手、點(diǎn)擊、眼動(dòng)等運(yùn)動(dòng)所消耗的能量負(fù)載，簡(jiǎn)單來(lái)說(shuō)就是操作復(fù)雜度；
3. 視覺(jué)負(fù)荷是指我們?yōu)g覽一個(gè)頁(yè)面時(shí)，人眼所接受到的信息量，簡(jiǎn)單來(lái)說(shuō)就是信息復(fù)雜度；

一般來(lái)講認(rèn)知負(fù)荷＞操作負(fù)荷＞視覺(jué)負(fù)荷。所以我們會(huì)把“Don’t make me think”奉為設(shè)計(jì)的真理，在日常設(shè)計(jì)中堅(jiān)守。如果認(rèn)知負(fù)荷小，有時(shí)候哪怕多一兩步慣性的操作負(fù)荷都是值得的。

在操作負(fù)荷上，（如果不會(huì)導(dǎo)致認(rèn)知負(fù)荷負(fù)荷增加）我們也會(huì)盡量秉承三步操作法則，費(fèi)茨定律等，盡可能的減少用戶(hù)操作的步數(shù)和單次操作的難度。視覺(jué)負(fù)荷是所有負(fù)荷的基石，無(wú)論是“Less is More”，還是“奧卡姆剃刀原理”，都告訴我們：保持簡(jiǎn)約是優(yōu)秀設(shè)計(jì)的必要條件。

一般情況下，做完視覺(jué)負(fù)荷的減法后，操作負(fù)荷和認(rèn)知負(fù)荷也會(huì)有所降低。

舉個(gè)?：

大家對(duì)蘋(píng)果和星巴克的logo都比較熟悉，從他們的發(fā)展歷程來(lái)看，這是扁平化的體現(xiàn)，也是視覺(jué)負(fù)荷降低的典型案例，經(jīng)歷了時(shí)間的變遷，人們可以在更遠(yuǎn)的范圍內(nèi)，以更快的速度完成視覺(jué)認(rèn)知，提升了信息傳達(dá)的效率。

再舉一個(gè)?：

在Web端設(shè)計(jì)時(shí)，手機(jī)號(hào)、驗(yàn)證碼和短信驗(yàn)證碼同頁(yè)呈現(xiàn)是非常普遍的一個(gè)設(shè)計(jì)模式。移動(dòng)端設(shè)計(jì)興起時(shí)，這樣的設(shè)計(jì)也延續(xù)了過(guò)來(lái)，但隨著移動(dòng)端設(shè)計(jì)的發(fā)展，就逐步被更主流的拆分設(shè)計(jì)（分三個(gè)頁(yè)面分別呈現(xiàn)手機(jī)號(hào)、驗(yàn)證碼和短驗(yàn)）所替代。

這樣的設(shè)計(jì)對(duì)于操作負(fù)荷來(lái)說(shuō)其實(shí)是沒(méi)什么變化的，主要的就是對(duì)認(rèn)知負(fù)荷的降低，達(dá)到一個(gè)頁(yè)面一個(gè)核心關(guān)注點(diǎn)的設(shè)計(jì)目標(biāo)。

二、接近法則

我們的大腦會(huì)傾向于將彼此靠近的元素視為一個(gè)組，這就是接近法則。

以左一圖為例，當(dāng)元素之間彼此間距完全相同，視覺(jué)上就會(huì)比較均衡，不會(huì)讓人產(chǎn)生接近性聯(lián)想。

當(dāng)元素橫向距離變小，縱向距離變大，形成中間圖后，我們的大腦就會(huì)傾向于將其視作橫向的三個(gè)小組，同理，我們也會(huì)傾向于把右圖視為縱向的三個(gè)小組，這就是接近性法則最直觀的體現(xiàn)。

舉個(gè)?：

在我們進(jìn)行書(shū)籍排版時(shí)，因?yàn)橛袡M向閱讀和縱向閱讀的版式差別，為了直觀的給用戶(hù)傳達(dá)閱讀順序，我們就需要加大行間距，縮小字間距，讓橫向排版和縱向排版一目了然，而不需要通過(guò)具體語(yǔ)義來(lái)傳遞。

生活中，如果不注重接近法則進(jìn)行設(shè)計(jì)，還有可能鬧出以下的笑話(huà)。

再來(lái)看兩個(gè)互聯(lián)網(wǎng)產(chǎn)品的設(shè)計(jì)案例：

當(dāng)我們進(jìn)行圖文布局時(shí)，對(duì)于同組信息，需要充分利用接近原則，讓圖片和文字之間的成組關(guān)系能夠一目了然，而不是模棱兩可。

當(dāng)組間關(guān)系明確時(shí)，我們也需要在組內(nèi)充分利用接近原則，讓彼此之間更加接近收攏，讓組內(nèi)信息整體性更好，用戶(hù)視覺(jué)更聚焦。

?延展小芝士：在利用接近法則的時(shí)候，到底多近能成組？多遠(yuǎn)會(huì)分離？有什么參考標(biāo)準(zhǔn)嗎？

答案：接近性是相對(duì)而言的，在書(shū)籍設(shè)計(jì)中，核心間距原則是：字間距＜行間距＜段間距＜欄間距＜頁(yè)邊距。借鑒到我們的產(chǎn)品設(shè)計(jì)中，字間距＜行間距＜組間距＜模塊間距＜頁(yè)邊距的設(shè)計(jì)標(biāo)準(zhǔn)依然成立。

在Material Design對(duì)柵格的間距和邊距有明確的建議，在產(chǎn)品設(shè)計(jì)時(shí)，設(shè)計(jì)師可以參考，也可以根據(jù)產(chǎn)品內(nèi)容，定義具體的間距規(guī)范。以我們的vivo視頻為例，設(shè)計(jì)師定義了以6為倍數(shù)的間距規(guī)范，然后就根據(jù)元素之間的親密性，確定不同元素之間的間距關(guān)系，整體依然符合前面的間距原則。

繞了一圈，到底多近能成組，多遠(yuǎn)會(huì)分離呢？

答案是：當(dāng)有一個(gè)明顯的大間距作為對(duì)照時(shí)，小間距之間的元素就會(huì)形成一個(gè)組。

以上圖為例，當(dāng)存在紅色大間距時(shí)，封面信息和選集信息會(huì)成為一個(gè)大組。

在這個(gè)組內(nèi)，因?yàn)樗{(lán)色大間距的存在，選集之間又成為一個(gè)小組。所以信息是否成組，很大程度上取決于他們構(gòu)成的整體和外部的距離是否足夠大，只要外部間距夠大，內(nèi)部就會(huì)因接近而更像一個(gè)組。

那在頁(yè)面中，多遠(yuǎn)會(huì)分離呢？一般來(lái)講，可以以最大間距頁(yè)邊距作為參考，當(dāng)元素之間的間距大于頁(yè)面的頁(yè)邊距后，元素之間會(huì)呈現(xiàn)明顯的分離效果，如上圖所示。

三、相似原則

具有相同屬性的元素，會(huì)比看起來(lái)完全不同的元素更具有關(guān)聯(lián)性，這就是相似原則，我們的大腦會(huì)傾向于將相似的元素視為一個(gè)組。

以上圖為例，當(dāng)看到這三組圖片時(shí)，我們會(huì)自然的因?yàn)橄嗤膶傩裕侯伾?、大小和形狀?duì)其進(jìn)行視覺(jué)分組。

生活中，有很多以相似性進(jìn)行分組的產(chǎn)品，比如大家常玩的消消樂(lè)和圍棋，都是利用顏色形狀的相似性來(lái)進(jìn)行配對(duì)和分組。

圖片來(lái)自網(wǎng)絡(luò)

在互聯(lián)網(wǎng)產(chǎn)品中，利用相似原則來(lái)進(jìn)行分組的例子也非常多，比如：

在我們?yōu)g覽器的個(gè)人主頁(yè)中，因?yàn)樾枰故镜墓δ茌^多，為了方便用戶(hù)查找，我們就將常用功能和其他工具用兩種不同的設(shè)計(jì)形式來(lái)體現(xiàn)，讓用戶(hù)可以從視覺(jué)上將其分為兩組，每組內(nèi)的元素也是符合相似原則的。

?延展小芝士：當(dāng)「接近原則」和「相似原則」同時(shí)出現(xiàn)時(shí)，到底誰(shuí)會(huì)勝出，占據(jù)主導(dǎo)地位成為一組呢？

答案：接近原則會(huì)勝出，占據(jù)主導(dǎo)地位。

以上圖為例，左側(cè)三個(gè)圖標(biāo)，具有非常明顯的相似性，但因?yàn)樽髠?cè)圖標(biāo)信息和右側(cè)的文本信息間距更小，所以我們?cè)趻呙钑r(shí)，依然會(huì)很輕易的將圖標(biāo)和右側(cè)的文本信息歸為一組。

四、連續(xù)原則

我們的視覺(jué)傾向于感知連續(xù)的形式而不是離散的碎片，這就是連續(xù)性原則。

以上圖為例，對(duì)于左一的圖形，我們?cè)谝曈X(jué)認(rèn)知的時(shí)候，大概率不會(huì)把他按照中間的三段式進(jìn)行分解，而是會(huì)把它看做一條連續(xù)的蛇，只不過(guò)下方被其他物品（水）所遮擋。

舉兩個(gè)生活中的?：

圖片來(lái)自網(wǎng)絡(luò)

IBM的logo，是典型的連續(xù)性設(shè)計(jì)案例，雖然所有的線條都是分離的，但我們的視覺(jué)依然會(huì)把它解析成連續(xù)的線條并組合成簡(jiǎn)單的字母?？煽诳蓸?lè)的橫幅廣告也是，雖然拆分成了三塊完全獨(dú)立的廣告牌，但我們的連續(xù)性感知依然會(huì)把他們連接起來(lái)，共同構(gòu)建起可口可樂(lè)的典型曲線標(biāo)識(shí)。

在互聯(lián)網(wǎng)產(chǎn)品中，斷點(diǎn)字體和圖標(biāo)的設(shè)計(jì)，都是利用了連續(xù)原則，打破常規(guī)，讓人們忽略特意設(shè)計(jì)的斷點(diǎn)，連接成線而不影響視覺(jué)認(rèn)知。

圖片來(lái)自網(wǎng)絡(luò)

五、閉合原則

我們的視覺(jué)系統(tǒng)會(huì)自動(dòng)嘗試將敞開(kāi)的圖形關(guān)閉起來(lái)，從而將其感知為完整的物體而不是分散的碎片，這就是閉合原則。簡(jiǎn)單來(lái)說(shuō)，就是人類(lèi)視覺(jué)傾向于看到整個(gè)物體，即使他們是不完整的。

以上圖為例，不管這個(gè)圓缺失了一塊，兩塊，還是三塊，都不妨礙我們將其識(shí)別為一個(gè)閉合的圓形，閉合原則在互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)中運(yùn)用也非常廣泛。

舉個(gè)?：

圖片來(lái)自網(wǎng)絡(luò)

在朋友圈中，我們經(jīng)常能看到這樣的九宮格拼圖，雖然圖片存在部分缺失，但并不影響我們將其識(shí)別成為一張簡(jiǎn)單的圖片。

再來(lái)個(gè)?：

在vivo瀏覽器中，當(dāng)用戶(hù)看到熱點(diǎn)精選右側(cè)和底部的半張圖片時(shí)，并不會(huì)認(rèn)為這就是一張小尺寸的完全展示的圖片，根據(jù)視知覺(jué)的閉合原則，他們會(huì)知道在其右側(cè)或者底部還存在部分未顯示出來(lái)的圖片，這些未顯示出來(lái)的圖片和已經(jīng)顯示出來(lái)的部分圖片共同構(gòu)建出一張完整的圖片。

?延展小芝士：提到閉合原則，那我們?cè)O(shè)計(jì)中又有哪幾種閉合類(lèi)型呢？我們是如何在產(chǎn)品設(shè)計(jì)中運(yùn)用他們的呢？

答案：閉合類(lèi)型可以大致劃分為3類(lèi)，分別是形狀閉合，負(fù)形閉合和經(jīng)驗(yàn)閉合。

以上圖為例，第一個(gè)是比較常見(jiàn)的形狀閉合，即我們會(huì)自行腦補(bǔ)一個(gè)白色的閉合三角形，想象它遮擋在一個(gè)三角形和三個(gè)圓形上，而不是將其分解為三個(gè)相互分離的吃豆人和箭頭，因?yàn)榍罢邩?gòu)成的整體更為簡(jiǎn)單。

第二個(gè)是典型的負(fù)形閉合，看似只有一頭大象+一個(gè)點(diǎn)，但一個(gè)點(diǎn)的意義太不明確，我們更愿意把點(diǎn)周?chē)呢?fù)形空間也囊括進(jìn)來(lái)，理解為一大一小兩頭大象，讓認(rèn)知更加簡(jiǎn)單。

第三個(gè)是典型的經(jīng)驗(yàn)閉合，這個(gè)有點(diǎn)超越原生視知覺(jué)。選項(xiàng)卡的設(shè)計(jì)，在初始都是有明確的邊界線的，利用邊界線的界定，讓用戶(hù)把它認(rèn)知為一個(gè)整體，但隨著扁平化設(shè)計(jì)的發(fā)展，到后來(lái)已經(jīng)省略成完全不帶邊界線的Tab設(shè)計(jì)了，這對(duì)于初期接入互聯(lián)網(wǎng)產(chǎn)品的用戶(hù)來(lái)說(shuō)，是有一定的理解門(mén)檻的，需要一定的經(jīng)驗(yàn)積累，所以才叫經(jīng)驗(yàn)閉合。

?延展小芝士：我們學(xué)習(xí)了「連續(xù)原則」和「閉合原則」，那這二者之間是什么關(guān)系？有什么差異呢？

答案：在線性圖形中，連續(xù)原則是包含閉合原則的，閉合現(xiàn)象可以看做是一種特殊情況下的連續(xù)現(xiàn)象。二者的差異在于，連續(xù)性更強(qiáng)調(diào)方向，重在信息方向的指引。而閉合性更強(qiáng)調(diào)始終，重在閉合之后的圖形或信息的完整性。

六、主體與背景

在具有一定配置的場(chǎng)內(nèi)，有些對(duì)象突現(xiàn)出來(lái)形成主體，有些對(duì)象退居到襯托地位而成為背景，這就是主體與背景。

值得一提的是在我們的產(chǎn)品設(shè)計(jì)中，主體和背景并不是一成不變的。

以上圖為例，當(dāng)把灰色底作為背景時(shí)，整個(gè)卡片都是主體。當(dāng)圖片視為背景時(shí)，圖片上疊加的文字變成主體。長(zhǎng)按頂部出現(xiàn)浮層后，浮層成為頁(yè)面主體，整個(gè)卡片又淪為背景。

這個(gè)案例給我們的啟示是，在進(jìn)行頁(yè)面設(shè)計(jì)時(shí)，需要充分考慮元素的優(yōu)先級(jí)，以凸顯核心元素使其成為主題，弱化次要要素，使其成為背景。在運(yùn)營(yíng)設(shè)計(jì)中，這點(diǎn)尤為重要，甚至我們特意把元素劃分為主體層（焦點(diǎn)信息層），氛圍層（輔助信息層）和背景層（背景信息層），以強(qiáng)化頁(yè)面的主次關(guān)系。

七、共同命運(yùn)

無(wú)論元素之間的距離有多遠(yuǎn)，或者它們看起來(lái)有多不同，只要它們一起運(yùn)動(dòng)或變化，它們就會(huì)被認(rèn)為是相關(guān)的，這就是共同命運(yùn)。

以上圖為例，雖然這些汽車(chē)形狀各異，顏色各異，但是因?yàn)樗麄冄叵嗤姆较?，以相同的速度運(yùn)動(dòng)，所以整體會(huì)形成一個(gè)組。

結(jié)合我們前面提到的接近性＞相似性，我們可以再增加一項(xiàng)：共同命運(yùn)＞接近性＞相似性。共同命運(yùn)給我的啟示是，在產(chǎn)品設(shè)計(jì)中，為了讓信息形成一個(gè)整體，可以適當(dāng)運(yùn)用共同命運(yùn)原則。比如當(dāng)我們?cè)谧鰈oading設(shè)計(jì)時(shí)，

如果僅僅是loading圖標(biāo)在運(yùn)動(dòng)，動(dòng)態(tài)的icon和靜態(tài)的文本，會(huì)讓人感覺(jué)他們并不在一個(gè)層級(jí)上，讓本來(lái)表達(dá)相同涵義的兩個(gè)元素被割裂開(kāi)，為了減少這種割裂感，讓二者始終在用戶(hù)眼中以組的形式存在，我們就可以采用共同命運(yùn)原則，讓二者同頻動(dòng)起來(lái)。

八、結(jié)語(yǔ)

到這里，格式塔7大設(shè)計(jì)原則就講完了，給新入職的設(shè)計(jì)師們講完之后，大家都覺(jué)得還挺漲芝士的，如果你閱讀完也有所收獲，不要忘了轉(zhuǎn)發(fā)喲~

參考文獻(xiàn)：

• 設(shè)計(jì)中的超整理術(shù)，和凌亂說(shuō)再見(jiàn)
• 打破規(guī)則之前，一定要懂這些

#專(zhuān)欄作家#

悅有所思，人人都是產(chǎn)品經(jīng)理專(zhuān)欄作家。10年體驗(yàn)設(shè)計(jì)經(jīng)驗(yàn)，崇尚理論指導(dǎo)實(shí)踐，實(shí)踐迭代理論，熱衷于學(xué)習(xí)、解構(gòu)、建構(gòu)、傳播交互設(shè)計(jì)、服務(wù)設(shè)計(jì)、行為設(shè)計(jì)等設(shè)計(jì)相關(guān)領(lǐng)域知識(shí)。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自?Unsplash，基于 CC0 協(xié)議