做爰三级在线播放_又大又粗又猛又舒服又爽_暖暖www免费高清视频最新期_午夜精品aaa国产福利

設(shè)計(jì)源于生活——淺談格式塔原理

2020-12-1    ui設(shè)計(jì)分享達(dá)人


設(shè)計(jì)源于生活,本文通過(guò)生活視角溯源格式塔原理,從生活到界面設(shè)計(jì)感受格式塔原理應(yīng)用在方方面面。


一、什么是格式塔原理

格式塔即Gestalt,是德語(yǔ)中“形狀”和“圖形”的意思。是基于心理學(xué)對(duì)人類(lèi)視覺(jué)系統(tǒng)的研究,人類(lèi)的視覺(jué)系統(tǒng)自動(dòng)對(duì)視覺(jué)輸入構(gòu)建結(jié)構(gòu)。

最重要的格式塔原理有:接近性原理、相似性原理、連續(xù)性原理、封閉性原理、對(duì)稱(chēng)性原理、主體/背景原理、共同命運(yùn)體 原理。

下面將進(jìn)行詳細(xì)分述


視覺(jué)會(huì)把互相靠近的物體看成一組,反之則不是。

下方示意圖中A被看作三排,B被看作三列


【 生活中】

無(wú)論是在看閱兵還是軍訓(xùn),我們都有所經(jīng)歷,左右間距為一拳,前后間距為一臂。

列與列之間的間距遠(yuǎn)大于每個(gè)人之間的間距,互相靠近的則被看作一列。

(圖片來(lái)源于網(wǎng)絡(luò),僅供交流學(xué)習(xí))


【界面設(shè)計(jì)中】

個(gè)人中心中,同一組信息之間的間距遠(yuǎn)小于不同組,下圖中我們明顯可以感知到7組由圖標(biāo)和文字組成的信息

(圖片來(lái)源于網(wǎng)絡(luò),僅供交流學(xué)習(xí))


建議

設(shè)計(jì)過(guò)程當(dāng)中可以控制元素與元素之間的間距,從而對(duì)元素進(jìn)行視覺(jué)分組,就像排隊(duì)一樣,有利于元素排列更有規(guī)律,主次分明,易于用戶獲取信息。



視覺(jué)會(huì)把相似的物體看成一組,反之則不是

下方示意圖中顏色相似的被看成一組,顏色較深的兩個(gè)圓被看作一組


【 生活中】

大家都玩過(guò)跳棋,在全部棋子形狀相同的情況下,通過(guò)顏色進(jìn)行陣營(yíng)區(qū)分。相同顏色的棋子很容易區(qū)分被分為一個(gè)陣營(yíng)。

(圖片來(lái)源于網(wǎng)絡(luò),僅供交流學(xué)習(xí))


【界面設(shè)計(jì)中】

下圖中01、02、03三個(gè)圖標(biāo)區(qū)域呈現(xiàn)不同的圖標(biāo)樣式,通過(guò)樣式的相似性進(jìn)行了合理分組,體現(xiàn)了個(gè)人中心圖標(biāo)的強(qiáng)弱層級(jí)


建議

設(shè)計(jì)過(guò)程當(dāng)中可以通過(guò)制造相似性,包括:顏色、形狀、格式、質(zhì)感等,使某些對(duì)象在視覺(jué)上成組。



視覺(jué)傾向于感知連續(xù)性,而不是零散的事物

下圖中我們更傾向于把圖形看作為兩條不同顏色的線交疊,甚至是一個(gè)X。而不是一條淺色線段,兩條深色線段


【 生活中】

被切開(kāi)的水果我們依然可以感受到完整的樣子,一看便知這是一個(gè)完整的橙子被切開(kāi)之后的樣子

(圖片來(lái)源于網(wǎng)絡(luò),僅供交流學(xué)習(xí))


【界面設(shè)計(jì)中】

利用連續(xù)性原理,我們將上圖中的會(huì)員等級(jí)曲線看成是完整的曲線,而不是兩段不同顏色的曲線

利用連續(xù)性,下圖中依然可以感受到完整的一盤(pán)食物

(圖片來(lái)源于網(wǎng)絡(luò),僅供交流學(xué)習(xí))


建議

設(shè)計(jì)中可以利用連續(xù)性原理,只露出部分元素暗示完整元素,或用連續(xù)性來(lái)暗示走向趨勢(shì)等。



視覺(jué)會(huì)將敞開(kāi)的圖形封閉起來(lái),從而感知完整的物體

下圖中我們不會(huì)將其看作三段曲線,而是很容易感知到是一個(gè)圓


【 生活中】

劃分停車(chē)位的時(shí)候,即使不畫(huà)出四面封閉的四邊形,我們依然可以感知到完整的四邊形車(chē)位

(圖片來(lái)源于網(wǎng)絡(luò),僅供交流學(xué)習(xí))


【界面設(shè)計(jì)中】

下圖中的斷點(diǎn)式icon設(shè)計(jì),即使圖形沒(méi)有完全連續(xù),我們依然可以感受到完整的圖形

(圖片來(lái)源于網(wǎng)絡(luò),僅供交流學(xué)習(xí))


建議

設(shè)計(jì)中可以利用封閉性原理合理刪減、斷點(diǎn)等方式增加設(shè)計(jì)感、豐富度,強(qiáng)化頁(yè)面趣味感、精細(xì)度



視覺(jué)會(huì)將復(fù)雜物體解析為符合對(duì)稱(chēng)規(guī)律的更簡(jiǎn)單的物體,從而降低復(fù)雜性

我們可以很快感知到下圖是兩個(gè)圓交疊,而不是其他更復(fù)雜的圖形,因?yàn)橐粚?duì)圓的復(fù)雜度遠(yuǎn)小于其他


【 生活中】

河對(duì)岸的房子倒影在水面上,我們通常會(huì)最快地自動(dòng)解析出水平的對(duì)稱(chēng)線,將其視為上下對(duì)稱(chēng)的兩組房子

(圖片來(lái)源于網(wǎng)絡(luò),僅供交流學(xué)習(xí))


【界面設(shè)計(jì)中】

下圖的網(wǎng)頁(yè)排版,我們的視覺(jué)自動(dòng)梳理出了左右對(duì)稱(chēng)的規(guī)律,即使左右的顏色并不一樣,也有其他小字信息干擾。但對(duì)稱(chēng)的解析方式極大地降低了頁(yè)面的復(fù)雜性

(圖片來(lái)源于網(wǎng)絡(luò),僅供交流學(xué)習(xí))


建議

設(shè)計(jì)中復(fù)雜圖形可以通過(guò)簡(jiǎn)單圖形復(fù)用得出,降低視覺(jué)理解難度。復(fù)雜的排版中可以制造對(duì)稱(chēng)性,從而降低頁(yè)面的理解成本。



視覺(jué)將聚焦部分解析為主體其余解析為背景,或改變焦點(diǎn)時(shí)呈現(xiàn)不同的主體

大的矩形和圓形交疊時(shí),我們傾向于把小的看作主體,矩形則視為背景。


【 生活中】

下圖中將深色區(qū)域視為主體時(shí)我們看到了建筑,把淺色視為主體時(shí)我們看到了五角星,在五角星中我們把美隊(duì)看作主體,天空看作背景

(圖片來(lái)源于網(wǎng)絡(luò),僅供交流學(xué)習(xí))


【界面設(shè)計(jì)中】

下圖中彈窗的出現(xiàn)轉(zhuǎn)移了頁(yè)面的主體

(圖片來(lái)源于網(wǎng)絡(luò),僅供交流學(xué)習(xí))


建議

可以通過(guò)控制主體與背景,改變用戶視線焦點(diǎn),從而起到引導(dǎo)用戶視覺(jué)的目的。



一起運(yùn)動(dòng)的物體被感知成一組或彼此關(guān)聯(lián)

下圖中三個(gè)運(yùn)動(dòng)的小球被看作一組


【 生活中】

舞蹈表演中,通向運(yùn)動(dòng)的舞蹈演員被我們歸位同一組

(資料來(lái)源于網(wǎng)絡(luò),僅供交流學(xué)習(xí))


【界面設(shè)計(jì)中】

背景的文字擁有一致的運(yùn)動(dòng)速度,因此原本零散的文字在動(dòng)效過(guò)程中被我們視為同一層元素

(資料來(lái)源于網(wǎng)絡(luò),僅供交流學(xué)習(xí))


建議

設(shè)計(jì)中不僅可以通過(guò)接近性、相似性,還可以通過(guò)同樣的動(dòng)態(tài)特征將物體成組,減少視覺(jué)凌亂感。



文章來(lái)源:UI中國(guó)   作者:JuneW

藍(lán)藍(lán)設(shè)計(jì)91whvog3.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 平面設(shè)計(jì)服務(wù)

日歷

鏈接

個(gè)人資料

存檔