格式塔視覺規律-我在實戰中的碎碎念

2021-01-13 應謀鬼計


今天小編給大家帶來的文章是格式塔視覺規律,本篇文章作者如是說:「這篇文章是寫給大多數人看的關于格式塔心裡學規律我在項目裡面的碎碎念。當然這會是全網最容易看懂的格式塔原理。」下面就讓我們一起來看看吧!👀

(全文共計2724字,閱讀約需要12分鐘)

我在大三的時候第一次聽說到這個名詞「格式塔」。當時就看了一些有關於他的文章等資料,但是可能是我並不聰明的緣故,當時並沒有太懂格式塔是一個什麼東西。現在工作了幾個年頭在看的時候就很容易理解。下面就是我理解的格式塔希望對你有幫助。



格式塔全稱應該叫格式塔心裡學又叫完形心裡學(完形心裡學是這幾個字是重點)。基本思想是視覺形象首先是作為統一的整體被認知的,而後才以部分的形式被認知。主張以整體的動力結構觀來研究心理現象(這句是重點整體的去看待一個事物)運用到視覺感知上、他總結了幾個我們視覺感知上的原則:接近性相似性連續性封閉性對稱性共同命運主體/背景

如果看不懂,不知道格式塔是做什麼的。沒關係,你可以這樣理解,我們在看東西時會有一些習慣,格式塔解釋或提出了我們的這些視覺習慣的規律。

接近性


接近性就是我們會把靠近的物品看成一個整體,換言之物體間的距離會影響我們的視覺感知。這個就很好理解。

相似性


我們會把相似的物體歸於一個整體,比如顏色,形狀,大小,方向,以及紋理等視覺元素,組成相近的樣式。

連續性

我們傾向於把連續的事物看成一個整體,而不是離散的碎片。(我們很容易把有導向性的或規律的事物看成一個整體)

封閉性

我們的視覺感知對傾向性的導視,有補缺功能。

對稱性

我們會把具有對稱性質的事物看成一個整體。(對稱在中國古建築裡面的運用非常的多,故宮就是最典型的一個)對稱的元素簡單、和諧、美觀。我們的眼睛尋求這些屬性,以及秩序和穩定,以了解世界。

共同命運

視覺系統會將運動規則一致的物體感知為一個整體。(古代一支衝殺的軍隊,我們注意到的是整支軍隊而不是軍隊裡的某個人)

主體/背景

我們的視覺感知會自動區分主體和背景。(我們傾向於把畫面中間的視覺作為主體)

我們的視覺感知


我們的視覺感知多數情況是遵循格式原理的,根據這些原理可以給我們提供工作中所遇到的設計視覺問題的大多數解決方案、當然也可以讓我們看的懂設計作品。

這裡說一個我自己的故事,大學在上專業課時(標誌設計)要做一個logo作為結課作業。然後我就做了一個特別簡單的圖形。然後交給了老師。當時老師很驚訝,說你這是啥。我就理直氣壯的說logo呀。你看那些大牌logo不都很簡潔嗎。然後老師笑著說人家那個叫簡潔,你這個叫簡單。哈哈。我想說的是簡潔的背後是無數複雜的支撐而並非簡單。


整體


我們的視覺感知是從整體到局部的。簡單的整體感覺會讓我們更容易接受,感覺會更舒服。所以我們在設計時總是要不斷的尋求視覺上的平衡和簡潔。

左邊圖像,我們模仿是有規整邊緣的視覺元素、右邊為不規整的視覺元素。很顯然我們更容易接受整體簡潔的視覺反饋。


創意

創意是吸引我們的點是我們可以駐足的關鍵,好的創意是對我們視覺的一種刺激。更能激發我們的視覺欲望。

創意運營到UI設計裡面,本身在這樣的表格申請單裡面並沒過多可進行視覺優化的點。但在表頭用小的的創意點來優化整個界面使界面美感升級更趨近於用戶情感化設計。


細節

用現在流行的一句話說這個圖片有內味,細節是我們視覺感知內味的關鍵所在。這個篇文章寫的還挺好的,說的如何提升UI界面設計的細節。

http://www.sj33.cn/archives/202002/52452.html

撤點自己的感受,細節這個東西真的是在項目裡你用心了就能很真切的體會到他的重要性。注重細節設計的界面看上去真心和趕工所作出來的不一樣。以前面試的時候簡歷裡總是寫著注重每一像素的細節。那可能大部分是寫給公司看的。現在如果在面試我不會再去說注重每一像素了。我會在項目裡講出來界面背後我所做的努力。注重細節不單單是說而是在項目裡去


其實格式塔原理在我們設計的解決方案裡一直在用,只不過你不知道它利用的是格式塔原理。下面我將介紹一個應用主頁的形成經歷。

主頁的九九八十一難

這裡我要說的是這個主頁從初稿到現在線上的一段經歷和迭代。這裡不僅是說格式塔理論,更多的是介紹在項目裡我們遇到的問題和解決的方法。

項目:某某應用2.0迭代

需求:優化現有應用交互、增加資訊模塊等。

某某1.0版本應用的首頁就是聊天列表和微信差不多。某某2.0要新增首頁為公司資訊頁面提升企業文化宣傳。


1、總之改了很多版本設計,第一個版本開始要灰度了。灰度兩個部門後我們收到一些用戶反饋主頁一些功能模塊的問題。功能模塊icon容易出現誤觸。


針對這個問題我們提了幾種方案。

01最直接的方法,把這幾個功能icon從首頁拿掉,他不存在就自然就不會出問題了。但是這樣處理的弊端是違背了我們優化交互提升用戶體驗的原則相違背。(這個方案被out掉了)

02採用鴕鳥的辦法,暫時不動。因為灰度的人並不是太多可能是用戶接觸新界面不習慣。過段時間在進行優化處理。

03設計進行調整、解決現在出現的誤觸問題。

當然最後我們決定對設計進行調整馬上更新一版繼續灰度。

在修改設計時首先考慮為什麼會出現誤觸問題?當然原因可能很多,我們就對我們能優化的原因比如icon之間的距離等進行優化。

我們修改了icon的大小、之間的間距、圖像的樣式和位置。這些都吻合了格式塔原理。距離近的容易被看作一個整體。所以我們要拉開距離。做出icon之間的區別。

2、因為各手機尺寸問題,出現實現後的效果和效果圖差別很大,造成給部分用戶呈現的界面視覺效果非常不理想。

在做設計時我們把手機狀態欄直接做在了banner裡。所以遇到蘋果X這樣帶劉海的屏幕顯示效果特別差所以我們就加大了banner高度來應對不同機型之間的兼容問題。

3、增加諮詢信息流每個模塊的顯示元素。(領導要求,要顯示一些詳情裡的元素到首頁)評論數、點讚數、查看數、未閱讀。

這個擺放位置其實調了很久,最後確定按數據的真實顯示自動適應評論、點讚、查看之間的距離。(這個和開發探討了很久、學到了不少)

4、每個信息塊之間分割不明顯界面視覺過於鬆散。

這個收穫很大。調了五六個版本,真心是一輛像素的調。真心體驗了一把細心的收穫。

這次首頁優化後真心是在細節和品質上都有了質的變化。



說這麼多其實這也是我學習的過程。寫這篇文章最初的初衷是為了徹底的弄懂這個概念。在設計裡更從容去應對所有需求。設計評審時能有力的反擊對手堅持自己的觀點。 


小編:@Kerr Xu

作者已經授權本公眾號發布

相關焦點

  • 無聊碎碎念 20190120
    5、我自己也曾經做過很多無聊的事情,比如騎車去西藏之類,聽上去很有聊,實際上在過程中的每一天都是機械的蹬車,爬山,休息,吃飯,日復一日,事後回想起來是有意思的,當時的感受是大部分時間是很無聊的,有一種孤獨感,因為這個過程中只有自己一個人。
  • 【乾貨】視覺篇-格式塔原理
    前言:在界面排版,網頁廣告設計等視覺傳達設計工作中,視覺上的畫面瑣碎,零散,信息混亂無序總是視覺設計師無可避免的問題。視覺的整體感做不好,會給人不舒服,不協調的心理感受。這些問題來自人們的主觀感受(「不舒服」,「奇怪」),通常難以描述清楚。同時,設計師們也意識到:表現作品的整體感與和諧感是十分重要的。
  • 神奇的「格式塔」理論~《視覺思維》讀書筆記二
    一、什麼是「格式塔」格式塔心理學誕生於1912年,是由德國心理學家組成的研究小組試圖解釋人類視覺的工作原理。他們觀察了許多重要的視覺現象並對它們編訂了目錄。其中最基礎的發現是人類視覺是整體的:我們的視覺系統自動對視覺輸入構建結構,並在神經系統層面上感知形狀、圖形和物體,而不是只看到互不相連的邊、線和區域。
  • 拖了很久的碎碎念
    2020年已經過去,春節即將來臨,我的拖延症真的是有點過分了,近來幾個月,我是真真實實的過上了996的打工人生活呀,每周上六天班的日子真的讓心深刻體會到什麼叫做眼前的苟且甚至可能毀滅內心對詩和遠方的嚮往,當然也有可能只是個例,和我本身比較懶有很大的關係,關於這一點,我家小公主和母上大人已經達成了高度共識,相信你也深有體會吧(從我越來越少的更新得以看出)。
  • 格式塔原理對視覺/互動設計師有多重要?
    格式塔原理就是根據人類感知和認知心裡而總結提煉的視覺規則。那麼必然為我們視覺設計師、互動設計師在設計產品時提供了理論依據。下面是我總結的部分格式塔原理,我會分開一一闡述,我想等你把內容讀完,應該明白「為什麼要這樣進行設計的問題?」像這種問題應該有些許答案。接近性原理是指,物體之間的距離會影響我們感知它們是否以及如何組織在一起的。
  • 引人注目的「格式塔」設計技法!
    在設計創作中,如何通過不完全的形、模糊的形、重複的形和形與形的組合等等,造成更大的形式意味或刺激力,這就需要充分運用格式塔原理,使得設計畫面的張力最大化。格式塔心理學依據人們的視知覺和視覺思維,提出了一系列圖形的視覺原理,運用這些原理進行視覺設計,可以豐富我們的視覺語言,形成畫面的審美張力。
  • 格式塔在界面中的使用思考
    建議我們可以在圖標以及圖形設計中使用閉合原則,可以簡單快速且清晰的傳達想表達的意義,同時視覺樣式也比較透氣。視覺對稱往往更有活力,更有趣。在對稱設計中添加不對稱元素有助於在留下印象時引起注意。在任何設計中,對稱以及合理的不對稱都很重要。
  • 廣告設計中的格式塔心理!
    文/韓斌 格式塔源於德文「Gestalt」一詞的音譯,是指形狀、形式或一種用視覺分離出來的整體,包括兩種含義:①事物具有獨有的形狀或者形式;②指一個實體部分對知覺所表現出的整體特徵,就是完形。格式塔心理學認為人在視知覺過程中,會自然地有一種自我完善事物的結構整體或完形的行為,當外界的一個事物呈現在我們面前時,內心會有一個格式塔與之相對應,如果內心的格式塔與這個事物不相符時,格式塔就出現「缺失」,這時我們的內心就表現出彌補缺失的活動傾向,活動的結果讓我們內心的格式塔本身達到完善化,形成良好的「完形」。這個理論讓我們能從一個新的角度來研究廣告設計。
  • 人工智慧在格式塔心理學測試中表現得像一個人
    這個領域的目標是發現人類思維的基本規律——本質上也是一個誘人的黑盒子——如何運作,Kim和她的同事寫道。在一篇上傳至預發布伺服器arXiv的新論文中,該團隊描述了一種對神經網絡進行人類認知測試的方法。這個測試探究我們如何自動地完成我們所看到的東西的間隙,從而使它們形成完整的物體——例如,從一串排列在鐘面上的鬆散點感知一個圓圈。
  • 寫作:鮮為人知的格式塔心理療法(中)
    寫在前面上篇文章,我在提及之前的認知行為療法和精神分析療法後,引入了新的心理療法——格式塔心理療法,並探討其與寫作的關係。可見,寫作完全可以作為一種系統的修行、規範的修煉和有效的心理療愈方法。寫作:鮮為人知的格式塔心理療法(上)格式塔心理療法與寫作的關係1.「生活在現在」,寫作也是如此,首先應專注於當下的感受,重點是描述當下的自己,自己內心的感受,其他都是次要的。所謂「既過不戀,未來不迎」,說的也是這個道理。在進行寫作的時候,我們完全可以以「我……」或者「我現在」等語句進行開頭。2.
  • 【精研篇】深入了解格式塔原理
    想要在界面排版、網頁設計中讓整體視覺井然有序,舒服協調,格式塔就是必須掌握的知識咯,今天的教程用深入淺出的方式給同學們科普格式塔原理以及在設計上的運用,包含大量實例,新手也可以輕鬆看懂!在界面排版,網頁廣告設計等視覺傳達設計工作中,視覺上的畫面瑣碎,零散,信息混亂無序總是視覺設計師無可避免的問題。視覺的整體感做不好,會給人不舒服,不協調的心理感受。
  • 司馬茶術碎碎念001~ 味覺地圖
    吃花椒感到麻的原理是花椒中的一種山椒醇激發了人類舌頭裡負責顫動的神經纖維活動,於是舌頭表面下的肌肉等開始快速地震顫,這種高頻率而且不由自主的顫動就是麻;再比如澀,是由味覺和其他感覺神經配合著味蕾的開合共同形成的…… 講真,以上內容隨便找出一句話就夠我們研究一輩子了。
  • 格式塔心理學,讓畫面更具視覺吸引力
    那麼,今天來聊一聊攝影構圖中的「潛規則」——格式塔心理學,讓你對這些構圖法則有一個全新(理性)的認知。格式塔(Gestalt),在心理學領域翻譯為「完形」。格式塔心理學,亦即完形心理學,是心理學的一個重要流派。格式塔到底是什麼?說「完形」似乎也很難理解,簡單來說,它是人類的知覺系統所感知的客觀形象的整體結構和形式。
  • 如何運用格式塔原理進行攝影創作?
    一、文章綜述在攝影的創作中,格式塔原理在攝影的構圖中起到了重要作用。運用各種有趣的元素的進行空間組合,組織成一幅完美的畫面,通過攝影的用光,色彩的構成,等其它攝影藝術手段,創作出優秀的攝影藝術作品,這就是格式塔原理在攝影創作中的應用。二、運用格式塔原理進行攝影創作的時候,有幾個重要的關鍵的特徵:
  • 老公成植物人,我想離開這個家,無意聽到婆婆碎碎念,我放棄離婚
    我叫陳霞,我嫁給老公三年了,我倆有一個兒子,原本是幸福的一家。但是自從結婚後,不幸的事卻是一件件的發生,在我結婚懷孕的時候,公公因疾病突發去世。我感覺天都塌下來了,家裡上有老下有小,我承受不了這麼大的負擔,我想要跟老公離婚,撇清關係。老公還有一個妹妹沒嫁人,最近也經常來照顧老公。我卻沒心思再去照顧老公,只想離開他,不過一次無意中,我聽到,婆婆碎碎念,說老公出事後保險公司賠了80萬,而錢都在婆婆那。我心中一動,這麼多錢在,我不能現在離婚,怎麼也得把錢拿到再離婚。
  • 原來任嘉倫是小話癆,雖然碎碎念,但卻正能量滿滿,喜歡你沒道理
    昨天《嚮往的生活》中,任嘉倫完全吸引了我的眼球,他真得很愛碎碎念,但是碎碎念之中又沒有諸多抱怨,反而正能量滿滿。差點忘記任嘉倫是出過文集的人,《國超文集2.0》在《嚮往的生活》成功出圈。沒想到今夏和陸大人的人設,在現實生活中是顛倒的,任嘉倫把「憨憨」幼稚的氣質抓得死死的。兩人進蘑菇屋的過程中,我真正領略到了任嘉倫碎碎念的功力,一時間竟有些同情同行的譚松韻了。任:你是說敲敲門,還是靜悄悄啊。
  • ①北方的冰花②大卡車的視覺死角③完美計劃遇到現實④奇特肌肉鍛鍊法⑤你是逃不開我的⑥非洲人民懲罰賊的方法
    -這是條碎碎念的分割線---這是條碎碎念的分割線---這是條碎碎念的分割線北方的冰花~~~我覺得有味道,emmmm~~~大卡車的視覺死角裡,每天都在死人..這是條碎碎念的分割線---這是條碎碎念的分割線---這是條碎碎念的分割線---這是條碎碎念的分割線這是條碎碎念的分割線---這是條碎碎念的分割線---這是條碎碎念的分割線---這是條碎碎念的分割線
  • 運用格式塔心理學做設計
    我們在做設計的時候利用好格式塔心理學,很可能你的設計就能吸引別人的眼球,從眾多設計中脫穎而出。格式塔心理學,又叫完形心理學。格式塔心理學重要的概念便是「整體不等於並且大於部分之和」而我們在做設計時就要利用格式塔心理學 「整體不等於個體之和」 這一重要概念人類的大腦有一些神奇的功能,因為世界是如此複雜,所以我們的大腦會聰明地嘗試組織各類視覺元素,將他們組成「完整個體」。
  • 格式塔心理學在景觀中的應用
    這一觀念,意味著導向與建築外部空間無限延伸的自然不同的、作為有限的人為目的空間的」「外部空間構成」據我所知,最初把「圖形」與「背景」觀念應用於建築和城市空間中的,是丹麥建築史家拉斯姆森,他在《作為經驗的建築》一書中論述「建築的實體與空洞」時,舉出埃德加·羅賓的「杯圖」加以說明。他還提到印度卡爾裡的石窟寺是挖掘山崖而建成的寺廟,是以去掉石料,亦即以造成凹部而建成的。
  • 格式塔設計原理,你知道多少?
    那麼,怎樣的視覺表達,使人們更容易理解,更協調,易於人們接受呢?  請看下面格式塔的研究結論。  根據酷友的反饋,增加電梯案例說明:  我的理解,黃色代表危險,根據相似率,建議人站的位置如果也用黃色,用戶也許會困惑,黃色的腳印能踩嗎?  中間那個方案,使用了不同顏色,既表明危險的地方,也表明安全的位置,非常容易分辨,似乎是合理的,但為什麼一定要傳達危險的信息呢? 一定要強調「不能」的行為呢?  是否只強調 正面的引導就好?