大廠求職秘籍,這些知識(shí)點(diǎn)必須要掌握
編輯導(dǎo)語(yǔ):產(chǎn)品設(shè)計(jì)要如何對(duì)用戶心理做好把握,在提升用戶使用體驗(yàn)的同時(shí),也能達(dá)成設(shè)計(jì)上的美觀追求?也許,你可以結(jié)合格式塔心理學(xué)原則進(jìn)行合理的UI設(shè)計(jì)。本篇文章里,作者就格式塔原則在產(chǎn)品設(shè)計(jì)中的應(yīng)用做了解讀,一起來(lái)看一下。
今天給大家分享格式塔心理學(xué)設(shè)計(jì)原理,它是由麥克斯·沃特海默(Max Wertheimer)于1923年發(fā)表的論文,成為最有影響力的早期建議。
格式塔原則是任何設(shè)計(jì)師都可以學(xué)習(xí)的重要思想集合,它們的實(shí)現(xiàn)不僅可以極大地改善設(shè)計(jì)的美觀性,而且還可以極大地改善其設(shè)計(jì)美感,其功能和用戶友好性。
分享大綱:
- 臨近定律
- 相似原理
- 封閉原則
- 連續(xù)原則
- 對(duì)稱原理
- 共同命運(yùn)原則
- 圖地原理
一、鄰近定律
彼此靠近的事物比彼此隔開的事物關(guān)聯(lián)性更強(qiáng)。我們的大腦將這些緊密放置的元素集合視為一組,臨近定律可以更清晰知道元素之間關(guān)系,在UI這種運(yùn)用比較廣泛。
那么它在UI中如何應(yīng)用?
左側(cè)卡片中,文字排版有點(diǎn)分散,導(dǎo)致信息理解會(huì)誤判。右側(cè)卡片中文字排版信息集中,便于表達(dá)同一個(gè)主題。
二、相似原理
具有相似視覺外觀的元素更容易被用戶認(rèn)為是同類物體。在格式塔理論中,對(duì)相似元素進(jìn)行視覺分組,可通過(guò)顏色、形狀、大小等將其安排在一起。
上圖中左側(cè)雖然間距大小一樣,但是色彩不一樣,我們視知覺會(huì)自動(dòng)將兩種顏色分別視為兩組。
如何應(yīng)用到UI設(shè)計(jì)中?
如上圖 ,在UI設(shè)計(jì)中,兩個(gè)按鈕大小形狀一樣,顏色不一樣,因此我們會(huì)將其視為兩種重要程度的功能。
由于相似原理,我們知道,有顏色字體是可以進(jìn)行點(diǎn)擊操作的。相似性可以讓整個(gè)UI系統(tǒng)更加一致性,體驗(yàn)更友好。
三、封閉原則
當(dāng)對(duì)象不完整時(shí),我們更喜歡完整的形狀,因此我們自動(dòng)填充元素之間的間隙以感知完整的圖像,例如形狀、字母、圖片等。具體來(lái)說(shuō),當(dāng)整個(gè)圖片的某些部分丟失時(shí),我們的感知將填補(bǔ)視覺上的空白。
網(wǎng)上很出名的一張圖
如上動(dòng)圖中,即使小狗元素用不規(guī)則小點(diǎn)組成,但是我們也能識(shí)別出來(lái)。
如何應(yīng)用到UI設(shè)計(jì)中?
封閉原則在加載指示器中運(yùn)用較多,這樣便于用戶理解。左側(cè)加載過(guò)于分散,無(wú)法讓用戶聯(lián)想到加載,因此右側(cè)思路與封閉原則有著一致思路。
封閉原則在圖形LOGO設(shè)計(jì)中也是屢見不鮮。
四、連續(xù)原則
連續(xù)定律一般由一條直線或者曲線的端點(diǎn)為起點(diǎn),一直延續(xù)下去達(dá)到終點(diǎn),我們感知傾向于對(duì)象是以直線或者曲線的形式排列起來(lái)更為相關(guān)性。
如何應(yīng)用到UI設(shè)計(jì)中?
在標(biāo)簽欄設(shè)計(jì)中,我們把橫向連接在一起的視為一組,表達(dá)一個(gè)功能含義。
上圖Apple和Medium的設(shè)計(jì)中,將標(biāo)簽橫向排列一組,便于用戶橫向滑動(dòng)找到對(duì)應(yīng)功能。
五、對(duì)稱原理
我們的大腦將對(duì)稱對(duì)象視為同一組的一部分。他們給人以穩(wěn)定和秩序的印象,對(duì)稱的UI元素有助于掃描內(nèi)容和瀏覽信息。
如何應(yīng)用到UI設(shè)計(jì)中?
在夸克和Naver產(chǎn)品設(shè)計(jì)中,底部圖標(biāo)網(wǎng)格菜單,采用對(duì)稱平衡手法,將功能排布在宮格列表上。
六、共同命運(yùn)原則
共同命運(yùn)原則(law of common fate)是指在其他條件相同時(shí),朝同一方運(yùn)動(dòng)和具有相同速度的元素會(huì)被組織在一起。
該原理是運(yùn)動(dòng)設(shè)計(jì)的基礎(chǔ)。每個(gè)有意義的動(dòng)畫都會(huì)使用共同的命運(yùn)來(lái)以正確的方式引導(dǎo)用戶的視線。這有助于將內(nèi)容與觸發(fā)的動(dòng)作聯(lián)系起來(lái)。
如何應(yīng)用到UI設(shè)計(jì)中?
如上圖,向左滑動(dòng)可以顯示更多的內(nèi)容,因此在設(shè)計(jì)時(shí)候就需要保證在統(tǒng)一方向上,讓它們有著共同屬性。
七、圖地原理
人眼能夠根據(jù)不同的聚焦計(jì)劃分離對(duì)象。我們直觀地知道哪些元素放置在前景中,哪些元素放置在背景中。
在模態(tài)彈出窗口時(shí),就可以見證“圖形地面原則”的實(shí)際使用。
如上在彈窗設(shè)計(jì)中,我們經(jīng)常會(huì)將背景疊加黑色便于突出前景彈窗內(nèi)容。
上圖中在版式上使用圖地原則,清晰區(qū)分信息層級(jí),通過(guò)圓形和鞋子前后關(guān)系,營(yíng)造視覺焦點(diǎn)。
八、總結(jié)一下
格式塔心理學(xué)知識(shí)在UI設(shè)計(jì)中的運(yùn)用遠(yuǎn)遠(yuǎn)要比我今天說(shuō)得要多,大家可以在項(xiàng)目實(shí)踐中去慢慢理解運(yùn)用。這是個(gè)比較重要的設(shè)計(jì)理論學(xué)術(shù),希望大家可以掌握后學(xué)以致用。
#專欄作家#
Tony,微信公眾號(hào):功夫體驗(yàn)設(shè)計(jì),人人都是產(chǎn)品經(jīng)理專欄作家。百度視覺體驗(yàn)設(shè)計(jì)師,一直堅(jiān)持原創(chuàng)文章,樂(lè)于幫助新人。擅長(zhǎng)作品集指導(dǎo)、筆試題指導(dǎo)、UI視覺創(chuàng)意、設(shè)計(jì)趨勢(shì)風(fēng)格等。
本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。
題圖來(lái)自Unsplash,基于CC0協(xié)議
UI設(shè)計(jì)真的是要從用戶的角度去考慮設(shè)計(jì),這樣做出來(lái)的產(chǎn)品才會(huì)使用戶滿意。
文章的舉例生動(dòng)形象,通俗易懂,格式塔心理學(xué)真是博大精深,一下子又掌握了好多UI設(shè)計(jì)知識(shí)!