亚洲av日韩av永久无码久久,免费的视频app网站,欧美性猛交xxxx免费看,国产成人精品三级麻豆

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

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


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


一、什么是格式塔原理

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

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

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


視覺會把互相靠近的物體看成一組,反之則不是。

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


【 生活中】

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

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

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


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

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

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


建議

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



視覺會把相似的物體看成一組,反之則不是

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


【 生活中】

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

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


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

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


建議

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



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

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


【 生活中】

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

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


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

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

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

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


建議

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



視覺會將敞開的圖形封閉起來,從而感知完整的物體

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


【 生活中】

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

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


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

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

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


建議

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



視覺會將復(fù)雜物體解析為符合對稱規(guī)律的更簡單的物體,從而降低復(fù)雜性

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


【 生活中】

河對岸的房子倒影在水面上,我們通常會最快地自動解析出水平的對稱線,將其視為上下對稱的兩組房子

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


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

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

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


建議

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



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

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


【 生活中】

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

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


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

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

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


建議

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



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

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


【 生活中】

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

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


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

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

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


建議

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



文章來源:UI中國   作者:JuneW

藍(lán)藍(lán)設(shè)計(jì)www.chinatradebeam.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(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ù)

日歷

鏈接

個人資料

藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.chinatradebeam.com

存檔

色窝窝亚洲av网在线观看| 久久人妻无码毛片a片麻豆| 日本a级毛片| 再用点力今晚随你弄| 成人亚洲a片v一区二区三区蜜月| 年轻护士的滋味中文字幕| h双腿涨灌捆绑play慎入| 五十路息与子在线播放藤崎樱| 军人的粗大(h)拔不出来| 欧美人妻日韩精品| 把腿张开开被添死去活来| 日本人妻丰满熟妇久久久久久| 亚洲国产成人精品无码区99| 免费a级黄毛片| 国产精品一亚洲av日韩av欧| 精品爆乳一区二区三区无码av| 久久av色欲av久久蜜桃麻豆| 被夫の上司に犯波多野结衣| 国产+日韩+另类+视频一区| 成人性生交大片免费看r| 娇妻穿丁字裤公交车被c| 奶头被教练摸得受不了| a级国产乱理伦片在线观看| 日日碰狠狠添天天爽超碰97| av在线免费观看| 黑人上司粗大拔不出来电影| 欧美性xxxx极品少妇| 少妇无码AV无码专区在线观看| 中文字幕一精品亚洲无线一区| 久久精品国产亚洲AV影片| 女局长白白嫩嫩大屁股| 制服丝袜中文字幕在线| 日韩av无码一区二区三区不卡| 国产97色在线 | 国产| 长篇交换高h肉辣全集目录| 国产人成视频在线观看| 无码人妻丰满熟妇啪啪欧美| 久久久久成人精品无码| 处破女a片免费观看| 香蕉久久一区二区不卡无毒影院| 蜜臀av国产精品久久久久|