(全文共計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
作者已經授權本公眾號發布