格式塔原理在產(chǎn)品交互設(shè)計中的應(yīng)用

2023-8-8    ui設(shè)計分享達人

一、格式塔的起源

格式塔的德文為“Gestalt”,意思為「形狀」和「圖形」,在心理學(xué)中可以看作是任何一種被分離的整體。格式塔心理學(xué)的研究源于視知覺,是現(xiàn)代認知主義學(xué)習(xí)理論的先驅(qū),為后來的社會心理學(xué)的發(fā)展打下了堅實的基礎(chǔ),其創(chuàng)始人是韋特海墨、考夫卡和苛勒。

二、格式塔的定義

格式塔的核心為“整體大于部分之和”,即人類的視覺感知具有整體性,當(dāng)感知到復(fù)雜的事物時,會從神經(jīng)系統(tǒng)層面感知形狀、圖形或物體,并在大腦的指揮下將視覺輸入自建結(jié)構(gòu)成為一個整體,而不是單獨的互不相關(guān)的邊、線或區(qū)域。

格式塔原理試圖解釋人們在合適的情況下如何看待視覺元素。這些建立在四個關(guān)鍵想法上:【出現(xiàn)】、【物化】、【多穩(wěn)定性】、【不變性】。

三、格式塔原理在設(shè)計中的運用

格式塔原理描述的是人類視覺從神經(jīng)系統(tǒng)對事物的感知方式,經(jīng)心理學(xué)研究者總結(jié)并得出若干理論,但在設(shè)計中,常用的有以下7種:

接近性原則
相似性原則
連續(xù)性原則
封閉性原則
簡單對稱性原則
主體與背景原則
共同命運原則

四、接近性原則

接近性原則指出,物體之間的相對距離會影響我們感知它們的關(guān)系,元素之間越是接近,組合在一起的可能性就越大,會被看作成一個整體,反之那些距離較遠的則自動劃分到組外。

【接近性原則】在UI設(shè)計中的應(yīng)用

在UI中最常見的就是列表以及文字展示、圖文展示了,在列表頁信息多的時候,都會把功能趨于相似的放在一起,利用相近原理,使他們在視覺上趨于一個整體,這樣既能讓界面功能清晰易懂,又不至于雜亂無章。

五、相似性原則

相似性原則指出,有共同視覺元素的物體看起來更有關(guān)聯(lián)性,我們傾向于將彼此相似的元素(形狀、尺寸、方向、顏色...)分為一組,這就意味著當(dāng)功能、含義和層次結(jié)構(gòu)相同時,更應(yīng)該讓它們在視覺上保持一致性。

【相似性原則】在UI設(shè)計中的應(yīng)用

在UI設(shè)計中,當(dāng)界面元素過多,接近性原則不足以滿足信息層級區(qū)分時,可以使用相似性原則來統(tǒng)一視覺樣式、表達統(tǒng)一的功能性。

六、連續(xù)性原則

連續(xù)性原則指出,人的視覺傾向于完整的連接一個圖形,而不是零散的碎片,通過感知事物的形狀和運動方向?qū)⒎稚⒌脑剡B接在一起,使直線繼續(xù)成為直線、曲線繼續(xù)成為曲線并朝著特定的方向延續(xù)。

【連續(xù)性原則】在UI設(shè)計中的應(yīng)用

在互聯(lián)網(wǎng)產(chǎn)品中,做字體設(shè)計時,合理的通過斷點來打破常規(guī)并不影響識別度,這正是利用的連續(xù)性原則。UI界面中的banner輪播圖交互模塊、圖標(biāo)等,很多都結(jié)合了連續(xù)性設(shè)計來提升用戶的視覺體驗。

七、封閉性原則

封閉性原則指出,人們的視覺系統(tǒng)傾向于將不完整的局部當(dāng)做一個整體來感知??雌饋砼c連續(xù)性有諸多相似,不過連續(xù)性是通過物體的形狀和運動方向、按照視覺慣性來制定閉合規(guī)律,而封閉性則并無特定規(guī)律,只要把握好不完整物體的尺度、使各元素之間相互輔助,就能讓其與我們認知模型中的原型匹配。

【封閉性原則】在UI設(shè)計中的應(yīng)用

在圖形用戶界面中,運用封閉性原則做省略或減法處理,可以節(jié)省很多空間資源。

八、簡單對稱性原則

簡單對稱性原則指出,人們在觀察事物的過程中第一印象更傾向于簡單且對稱的物體,當(dāng)看到一個復(fù)雜的事物時,神經(jīng)系統(tǒng)會潛意識地移除無關(guān)細節(jié)并簡化它們,使其成為簡單且統(tǒng)一的形狀。

【簡單對稱性原則】在UI設(shè)計中的應(yīng)用

在UI設(shè)計中,大家也會經(jīng)常利用簡單對稱原則做設(shè)計。

九、主體與背景原則

主體與背景原則指出,在同一畫面中,不管有多少元素,都只能存在一個主體。人們在感知事物的時候,總是會將視覺區(qū)域分為主體和背景兩個部分,主體指的是最吸引視覺注意力的元素,其他的元素皆為背景,這對于我們區(qū)分重要信息和次要信息至關(guān)重要。

【主體與背景原則】在UI設(shè)計中的應(yīng)用

將主體與背景原則運用于UI設(shè)計中,能幫助設(shè)計師在設(shè)計過程中抓住用戶注意力。

十、共同命運原則

共同命運原則指出,人們傾向于將具有共同運動形式的事物感知為一個彼此相關(guān)的整體,無論元素之間的距離有多遠、或其他屬性(形狀、顏色、大小)各異,但只要沿著相同的方向、相同的速度運動,共同命運就會將其歸類。

【共同命運原則】在UI設(shè)計中的應(yīng)用

移動端產(chǎn)品中有很多這樣的案例,如iOS系統(tǒng)中,長按刪除某個APP時,所有桌面圖標(biāo)會抖動、且左上角都有一個相同的刪除圖標(biāo),通過一致性的動作告知用戶圖標(biāo)的可操作狀態(tài),非常直觀。

十一、總結(jié)

設(shè)計要求和諧有序、層次分明,這不僅是輔助傳達內(nèi)在業(yè)務(wù)信息的存在,還是一門關(guān)于溝通、性能和便利性的學(xué)問,靈活運用格式塔原理能幫助我們實現(xiàn)這些目標(biāo),對產(chǎn)品體驗的提升有很大的幫助,所以不管是產(chǎn)品經(jīng)理還是設(shè)計師,都應(yīng)該重視格式塔原理。

從上述的設(shè)計案例中不難發(fā)現(xiàn),這七項原理并不是獨立存在的,它們之間相輔相成,具有高度的關(guān)聯(lián)性。在實際工作中,我們需要根據(jù)不同的需求和使用場景,將這些基本法則組合使用,才能使你的設(shè)計方案更加有據(jù)可依,用戶也能更好地理解、使用我們的產(chǎn)品。

作者:哆啦的設(shè)計筆記
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請注明出處。

分享本文至:

日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://www.bouu.cn

存檔