讓我們來思考一下
每當我們抬頭看天的時候,經常會看到如下圖所示的這種形狀奇特的雲,會不會覺得像熟悉的動物或東西 , 那麼你是否曾想過,為什麼僅僅通過一團毛絨絨的氣體你就能在腦中建立起這種特殊聯繫呢?
這其實這就是因為你的大腦總是試圖通過對比以前的經驗或者視覺模型和以及其關聯的點來了解世界。感知形狀和形式、分組信息、填補空白等從而在你的腦中形成大概畫面。
了解大腦如何運作對成為一個理性的設計師,成為視覺傳達的主導者,有很大的幫助。
可以通過使用它們來影響感知,直接或間接的影響行為;當涉及到目標導向、解決問題、直觀設計以及UI設計時非常有用。
現在我們清楚的知道,視覺設計和心理學是相互聯繫且可以相互影響的,格式塔其中的一些原則可以幫助我們理解和把控這種聯繫。
格式塔的產生、發展頗具波折,其影響也涉及眾多領域。單從設計領域來講,格式塔理論可提煉出7大原則。
01 格式塔原則:貼近
貼近性原理是指,物體之間的相對距離會影響我們感知它們如何組織在一起。
互相靠近的物體看起來屬於一組。
左邊的圓相互之間水平方向比垂直方向靠的更近,因為我們看到圓排成了三行;右邊的圓垂直方向上比水平方向上靠的更近,因為我們看到圓排成了三列。
舉個簡單的例子,這個是一個票務的預定入口,
他的排版就是典型的比較零散的樣式,換成模塊圖就是這樣,會更明顯,整個組件脫離了上下文,因為沒有將圖像,標題和連結關聯在一起。
如果使用貼近原則,把三個單獨漂浮在外層空間的元素,作為一個整體組件,在視覺上就會很舒適。
舉個B端頁面中的例子:
在我們的數字卡片設計裡面裡面,很有可能也會出現這種情況,讓同一區域內的元素有一定的聯繫,會讓頁面更整體。
在界面中的運用
以ps的編輯面板來看,通過擺放距離可以知道樣式為一組,按鈕操作為一組;控制項的合理擺放,能減少用戶界面上的視覺凌亂感和代碼數量。
相反,如果無法感知或者分層不清晰,就會比較難理解和使用。
02 格式塔原則 : 相似
格式塔相似性原理是影響我們感知分組的另一個因素:如果其他因素相同,那麼相似的物體看起來歸屬於一組。下圖中相同形狀的看起來感覺屬於一組,相同顏色的看起來感覺屬於同一組。
相似原則可以幫助我們組織和分類組中的對象,並將它們與特定的含義或功能相關聯。
乍一看,我們可能會認為這只是一個我們可以忽略的普通類型系統。
但是當我們看得更近時,問題發生在正文文本和文本連結之間,它們都共享相同的文字系統(20px ),這可能導致用戶混淆並且缺乏用戶信任。
當他們瀏覽網站時,他們可能會猶豫,他們正在交互的是正文文本還是文本連結,那麼就需要進行反覆試驗。
在界面中的運用
下圖中通過相似性我們知道頂部文字組是一組,即菜單欄,左側全部是圖標,為工具欄。
03 格式塔原則 : 共同區域
與貼近原則類似,放置在同一區域內的元素被視為一個分組。
舉個🌰
在界面中的運用
我們可以通過使用線條、顏色、形狀和陰影來達到這個目的。上圖是共同區域原則的一個示例:一個布局合理的網頁,其中不同的信息位表示一個模塊,banner和表格是很好的示例。
04 格式塔原則 : 閉合
有一種常見的視覺歸類方法基於人類的一種完型心理:把局部形象當作一個整體的形象來感知。當提供適量的信息時,我們的大腦將通過填補空白並創建一個統一的整體來得出結論。
通過這種方式,我們可以減少傳遞信息所需的元素數量,降低複雜性也可以幫助我們最小化視覺噪音並傳達信息,在相當小的空間內強化概念。
在界面中的運用
建議我們可以在圖標以及圖形設計中使用閉合原則,可以簡單快速且清晰的傳達想表達的意義,同時視覺樣式也比較透氣。
05 格式塔原則 : 對稱
對稱元素簡單,和諧,視覺上令人愉悅 , 對快速有效地傳遞信息非常有用 , 幫助專注於重要的事情。
但它們也會變得有點沉悶和靜止。視覺對稱往往更有活力,更有趣。在對稱設計中添加不對稱元素有助於在留下印象時引起注意。在任何設計中,對稱以及合理的不對稱都很重要。
在界面中的運用
對稱的形式對於在界面中識別內容有很多的幫助,用於產品展示,列表,導航,banner和任何內容豐富的頁面,減輕閱讀壓力。
06 格式塔原則 : 連續
我們的視覺傾向於感知連續的形式而不是了散的碎片。連續性原理的IBM標誌設計,它由非連續的藍色塊組成,但一目了然,很容易看出它們是三個粗體字母。
在界面中的運用
連續性通過構圖來解釋方向和運動。加強了對分組信息的感知,創建了秩序並引導用戶通過不同的內容細分。
連續性的中斷可以表示一個部分的結尾,引起對新內容的關注。
行和列的線性排列是連續性的良好示例。我們可以在菜單和子菜單,列表,輪播,服務或流程/進度顯示中使用它們。
07 格式塔原則 : 共同命運
當元素在同一方向、同一時間和同一速度同步移動時,共同命運原則更為有效。它可以幫助對相關信息進行分組,並將行動與結果聯繫起來。同步運動的中斷可以吸引用戶的注意力,並將其引導到特定的元素或特性。
在界面中的運用
不管這些元素相距多遠,或者它們看起來有多麼不同,如果它們一起移動或變化,它們就被認為是相關的。這種效果可以發生,即使運動是隱含的。
建議我們可以在可擴展菜單,產品滑塊,視差滾動和滑動指示器中使用共同命運原則。
寫在最後
前面就是所有的格式塔對應的原則和建議使用的地方 , 一些真實的案例,讓大家清楚地知道如何運用簡單有效的方法來改變設計的觀感。關鍵是使用這些原理來設計的時候,可以達到 1 + 1 > 2 的效果。
格式塔原則的體現在設計中比比皆是,我們只有更好的利用視覺空間設計作品,減少設計的複雜性,儘量保持格式塔原則的完整,著眼頁面中的細節,才能讓我們的產品更好更容易地被用戶理解。
參考
用格式塔原理分析頁面中的用戶體驗
https://www.jianshu.com/p/311939783be5
如何在UI設計中使用格式塔原則
https://mp.weixin.qq.com/s/F7RYn_cgM1stJXOQPKej9g
📢 📢
大家對此有什麼想法呢?歡迎在評論提出~
記得持續關注我們哦~
喜歡我們,就點一下「在看」吧
👇 👇 👇