格式塔心理學應用於Web UI 設計
引言
介面設計不僅僅是將各種令人困惑的零零碎碎安排妥當，而是在給定的規則之內將產品的作用發揮到極致。並且簡潔而不混亂，好看而不失內涵。
設計的難點在於人們一眼就能決定是否會繼續使用你的產品。因為視覺是人類最主要的感覺。所以你設計的產品必須清晰而明確地提供其存在的價值與意義。
本書中，我們涵蓋了體驗設計、介面設計、和心理學的知識。初學者能學到怎樣將格式塔的基本理論運用到Web UI設計當中，而中級讀者能從反面教材中吸取教訓，學習如何平衡介面元素之間的差異性與相似性，以及如何使用顏色來表達相應的情感。
為了使本書更加實用，其中包含了33個公司的案例分析。其中包括Tumblr, Etsy, Google, Facebook, Twitter, Medium, Intercom, Bose, AIGA 等等。
像大多數的電子書，本書簡單易讀，實用性強。我們將各種理論分解，分析好的設計到底好在哪裡，並且通過案例來教會你如何運用這些理論。
我們很高興能分享我們的知識。如果這本書對你有所幫助，我們會很欣慰。
致UI設計愛好者
Jerry Cao
Kamil Zieba, Krzysztof Stryjewski, and Matt Ellis
格式塔心理學應用於Web UI 設計
不得不承認，生活中我們經常或被幻覺所欺騙。
眼睛是如何欺騙大腦讓人驚奇，但更神奇的是視覺會覆蓋其他感覺。格式塔學說指出視幻覺是視覺科學。
格式塔原則分析我們視覺的灰色地帶。那些原則解釋了人們是如何看到事物及事物在佈局、透視、大小等等方面是如何挑戰我們的視覺經驗的。
我們來簡要的看一下格式塔的內容和在實際UI設計中的應用。
Gestalt principles bring to light the grey areas of human vision
格式塔設計原則的基礎
格式塔來源於德語，代表“形狀、結構”，在20世紀早期被用於描述心理活動。
在1910年，心理學家Max Wertheimer 鐵路的燈光在開關時會產生一種幻覺好像燈光會在一個圓中移動，即使並沒有經過特意的控制。這種我們我們看到的幻覺和實際物體之間的差異促使格式塔幾十年接下來的發展。
在Wertheimer 和他的同事對於視覺觀察方面的理論發展了將近5年之後，他的這套理論就運用在了web 設計上了。這套理論解釋了亞里士多德簡單而經典的一句話“事物的整體比將其拆分後的部件奇妙得多”同樣這句話也適用於視覺方面。在視覺觀察領域，這些理論尤其適用於web UI 設計。
讓我們看一下4條格式塔原則
1. 整體性
當我們嘗試分辨一個物體時，我們的眼睛試著找出物體的輪廓，然後去比對腦中的記憶。當我們觀察到一個物體整體的一部分時，我們會通過其大致的輪廓鑑別出來。
這張圖經常用來解釋格式塔原則。我們能一眼看出這是一條狗，而不是“一隻腳、一個頭、然後把它們拼起來。。。”
web設計中的應用 ：形狀和輪廓應該優先於更少的細節（無論細節多麼高大上）。如果使用者不知道一個按鈕是可以點選的，那麼這個按鈕再怎麼花哨都毫無用處。 就像我們在Interaction Design Best Practices中講的這些符號具有釋義功能（功能可用性）
2. 具化性
當視覺刺激太不協調時，我們的大腦會自動填充丟失的資訊。這能幫助我們在視覺受限或模糊時理解我們所看到的東西。
上面的每一個圖片都耍了一點小把戲。在現實生活中，它們都是模糊的不完整的圖形，但是我們的大腦仍然能賦予了它們意義。例如在A圖中，我們的大腦理解成3個黑色的圓通過一個白色的三角形連線了起來。
web設計中的應用 ：近距離在web 設計中是有一定用處的。只要你提供足夠的資訊將其聯絡到一個物體，你的使用者就會感受到這一點並填補中間的空白。這意味著你要適當留白，將留白當成是一種設計工具而不僅僅是空白。
Treat white space as a design tool,not as an empty canvas.
3. 組織性
如果一個物體有一種以上的解釋，我們的大腦在同一時間只能予以一種解釋方式，不可能同時看到兩種及以上的解釋方式。我們盯著一種理解方式的時間越長，這種解釋方式就越佔主導作用。
這是一張的的視幻覺圖片，我們能夠看到一個年輕的女人或者是一個老太太。但我們不能同時看到這兩種解釋方式。
web設計中的應用 ：設計中避免多種解釋方式。對你的設計進行多次檢查，以防使用者可以以多種角度理解你的設計。通過介面設計影響使用者的使用體驗及使用行為。可用性測試能夠幫助你發現這些問題，即使測試者是個小白。
4. 恆常性
就像具化性，恆常性使我們大腦理解視覺矛盾的另一個策略。不管物體如何旋轉、透視、角度改變甚至輕微畸變我們都能認出這個物體。
在以上的例子中，我們能分清A和B，即使他們長得很像。同樣我們也能理解A、C、D是同一種物體，即使他們被分開了。
web設計中的應用 ：也許恆常性不想其他格式塔原則一樣對web 設計有直接的影響，但是它經常被運用於圖靈測試（一種區分人和計算機的程式），恆常性是人類仍然超越計算機的方面。
5個最有用的格式塔原則
1954年，在Wertheimer首次在火車燈光中發現視幻覺後的十幾年，Rudolg Arnheim將格式塔原則寫進Art and Visual Perception:A Psychology of the Creative Eye.按照Carolann Bonner的建議，在設計中有5個經常使用的原則：
1.相似性
2.主體背景關係
3.組織
4.閉合
5.延續
1. 相似
當物體看起來相似時我們就認為們是相似的。
在web 設計領域為了能最快最簡單的傳達出資訊，所以存在很多暗喻。通過視覺上將物體設計得相似，我們就能直觀的表達其中的含義。
只需驚鴻一瞥就能發現相似性。在以下設計機構Green Chameleon給出的案例中導航欄圖示看起來都不一樣，但是在顏色、大小、位置、間距都暗示著各個圖示代表著的網頁導航設計中的同一層級（最高層級）。
在懸停操作方面，一個互動動作就是懸停在圖示上，會有文字滑出對其進行深一層次的解釋。這種互動方式在垂直導航方面應用較好。它不僅節省了空間，而且沒有犧牲其功能（使圖示的隱喻變得有意義）。
這些屬於互動模式和一致性，在Interaction Design Best Practices中有所討論。一個好的設計師會運用相似性原則來表意的同時優化使用者體驗。
2. 主體背景關係
元素被分為主體和背景。Steven Bradley 列出了3中主題背景關係。
在上面的例子中，Moddeals展示一個圖案時使用了主體與背景關係的方法。當小廣告跳出來時，頁面其他部分變灰，層級退後為背景。另外使用者仍然能夠滾動頁面，但是小廣告仍會在那裡，從背景裡獨立出來。
在主題背景關係方面為德國電影Tannbach設計的網站運用得更加細緻。
為了強調電影中的人物關係，設計師讓兩個模特清晰的立於模糊的背景中，通過運用顏色和排版，真正的介面變成了首要層次，而這對情侶變成了第二層次。其結果是使用者視覺上盯著這對情侶同時也能在網站中瀏覽。
這絕對是格式塔原則的絕佳應用，當你把主體清晰地顯示在一個模糊的背景上時你不用刻意去解釋它的意義。
3. 組織性
不相同的專案仍然可以被放在一起，並看起來相似。格式塔原則建議至少使用2種方法來組織物體顯示它們之間的關係：
圍繞 — 將不相似的物體通過明確的界限圍繞起來能夠使它們在使用者眼裡有關係的。
接近 — 相互靠近的物體會看起來相似，特別是和其他的組別相距較遠時。這和Hick’s Law 中的時間與空間元素相關聯，同樣在Interaction Design BestPractices也有所描述。
上面的Facebook網站的例子運用了圍繞和接近的原則。
整個的頁面—標題、照片、描述、評論等等都是封裝在一個線框裡的，與灰色的背景分隔開，同時運用了圍繞和主體背景關係原則。在頁面裡，像“Like”,“Comment”和“Share”緊緊地靠在一起，暗示著它們都是個人與該頁面之間的互動接觸點（不涉及它們在字型、大小、顏色方面使用的相似性原則）。
將操作按鈕放置於相關專案旁邊，使用者則省去了尋找、記憶、以及更深層次的挖掘。通過更簡單的點選使用者與其目標之間的距離被縮短了。通過複雜的解釋將系統簡化幫助使用者達到心理預期。
4. 閉合
根據我們剛才談到的具化性原則，閉合原則就是通過在物體之間新增間隙將事物分隔開。設計師可以充分利用這一點，首先在區域性設計時留下一些空隙，然後通過極簡主義的宣揚傳達出優雅的格調。
下面是Abduzeedo網站柵格化輸出的例子。即使在各塊內容之間並沒有明顯的界限，但是三個圖片依次排列將三塊欄目相互分開而不是一大塊。
閉合原則在互動方面也有應用，在動作（button）之間增加間隙傳達出了一種意義。
設計師Carolann Bonner 說：Urban Outfitters 的使用者通過閉合原則可以跳過許多步驟，讓“Add to Bag” 這個動作更加順暢。點選檢視“Add to Bag” 讓我們分析一下其中的步驟。
1. “Add to Bag” 按鈕變成“Added!”
2. 在導航欄中的購物袋圖示旁邊的數字變成1
3. 從購物袋下拉一個對話方塊從視覺上確認了該物品已經新增到購物車了。
最後我們已經清楚地知道一個物品已經新增到了購物車裡了，我們不需要再到購物車中去確認及修改物品（可能增加互動障礙）通過正確地省略步驟，介面在提供充足的反饋同時將互動輕量化。Andy Rutledge wrote an excellent piece提供了更多閉合原則在web UI 設計方面的運用。
5. 延續性
和閉合相關，延續性原則闡釋了使用者的視覺有一種從一個物體到另一個物體的趨勢，在設計佈局時直線具有強大的視覺趨勢。
在下圖中人們能夠看到一條直線和一條曲線，而不是一條彎的藍線和一條彎的綠線。這使延續性比顏色優先順序更高，延續性是一種很好地能夠展現物體之間的相似性的工具。
這就意味著使用者會將排列成直線或曲線的事物視為同一類事物。
延續性在站點導航時會很有用，排列成同一直線的專案將會視為同一層級。
在CreativeBloq的導航欄的第一排所有的導航專案代表了網站內容的種類。在導航欄第二排代表了內容的分類。因為運用了延續性原則，網站不需點明其中的差異。
更多格式塔原則，檢視helpful tutorial。
小結：
理解格式塔原則讓我們更好的管理視覺層級，幫助設計出更舒適的作品，增加與使用者之間溝通的可能性。將普遍原則—整體性、具化性、組織性、恆常性和細化原則—相似、閉合、主題背景關係等等融合起來將會使web介面設計提升一個等級。
打賞支援我寫出更多好文章，謝謝！
打賞作者
打賞支援我寫出更多好文章，謝謝！
