許多設計師可以擁有創造性的直覺和銳利的眼光：他們將未來網站或應用程序的布局增加了更多的激情和感覺作為理性思考和測量

許多設計師可以擁有創造性的直覺和銳利的眼光：他們將未來網站或應用程序的布局增加了更多的激情和感覺作為理性思考和測量。在很多情況下，這不是吹牛，而是將所有細節整合在一起的真正技能，感受用戶流程的可能陷阱，找到原始解決方案不會破壞可用性。然而，這種方式沒有任何魔法：這種技能不僅基于人才，而且還基于實踐經驗，堅持不懈地研究與技術和設備一起快速變化的理論，標準和指導原則。即使創造性的實驗也是基于互動機制和影響因素的知識：打破規則，你必須認識他們。

Web和移動界面中的視覺層次結構屬于領域，知道哪些設計者加強了他們的創造潛力。探索人們如何看待信息并將其用于建立良好的導航，可消化的副本和有效的顏色選擇的方式對產品的可用性（可掃描性）作為其重要部分有很大的影響。所以，今天我們將回到基礎：讓我們開始修改Gestalt分組原理如何積極地影響用戶界面。

什么是格式塔理論？

基本上，格式塔是來自德語Gestalt [ɡtalt]意思是“形狀，形式”的術語。它主要用于認知心理學領域，探索人們不斷從世界獲得的數據，這些數據似乎主要是混亂的。這個運動背后的基本想法可以通過格萊塔克心理學家庫爾特·科夫卡（Kurt Koffka）的著名短語來捕捉：“ 整體不是部分的總和”。當人們看到由許多元素組成的復雜對象時，它們將有意識的或潛意識的方法應用到整個有組織的系統中，而不僅僅是一組簡單的對象。它在不同層次的感知上起作用，但視覺部分似乎是設計者創建界面最有趣的部分。

為什么設計師可以對這個問題感興趣？因為它有助于更好地了解應用程序或網站用戶的心理學。當您了解影響視覺感知的因素時，它使得UX設計的過程更加精通，提高了成功互動的速度，并降低了用戶可以通過這種方式獲得的誤解。在這種方法的各個層次中，分組的原則（或法律）可能是設計師考慮最重要的。這些原則是基于人們將他們所看到的一些模式組織成五個全球類別的概念：鄰近，相似性，連續性，關閉和連接。這是“垂直度量”博客提供的圖表之一，可視化一些原則的核心描述。

在用戶界面中，分組應用原則周到地使布局元素的感知更快更容易，并在不同層次的交互中建立優先級。今天我們將考慮廣泛應用于設計實踐中的分組的相似原理。

相似原則

相似性的原則是基于共享視覺特征的東西，如形狀，大小，顏色，紋理，價值或方向的東西將被視為屬于一起。這意味著，如果一個人感知到這些元素，他或她傾向于將具有一個或幾個特征的那些組合作為相關項目。因此，給予不同的布局元素相同或相似的視覺特征，設計人員刺激用戶設置適當的連接并更快地了解整個方案。

相似性可以基于各種視覺參數，如顏色，形狀，大小和方向。我們來看一些Tubik團隊設計的界面的實例。

顏色

以下是在簡單日歷應用程序中應用顏色相似度的常見示例。在日歷屏幕上標記星期幾的字母可視地分組為與日歷網格中的數字所使用的顏色不同的一種顏色。因此，快速瀏覽足以分離這些類型的符號 - 顏色簡化了第一次掃描的過程。顏色相似度的下一個級別發生在數字領域：用戶選擇的星期幾中的日期看起來更亮，而其他日期看起來更加褪色。關鍵的互動區域明亮地呈現，呈現出立即引人注意的不可錯過的視覺口音。因此，顏色使設計人員能夠通過分組原理為具有有效視覺分層結構的用戶創建簡單的導航路徑。

這里還有一個例子顯示了如何通過顏色分組可以有效地應用于圖形界面中的副本。您可以看到待處理應用程序的屏幕，其中已經標記為已完成的位置與正在進行的任務相比具有不同的顏色。它使用戶能夠快速掃描列表，并在幾秒鐘內對任務的種類進行分組。

通過顏色分組原理的更復雜的應用是標記內容的類別和塊。它可以在各種各樣的內容，如博客，電子商務或教育資源等組織的各種內容的界面上運行得很好。顏色標記簡化了導航并保持了設計的一致性，使用戶能夠記住顏色提示并找到他們想要的內容很容易。上面的示例顯示了應用此原則的博客應用程序：各種帖子圍繞全局類別進行組織，并以顏色標記，您可以在圖標上看到顏色，帖子上的彩色標簽和用戶個人資料中帖子的快速統計信息。相同的原則適用于以下所示的Moneywise App。

這是專門用于經濟學的教育應用：內容分為四大類。用于標記該類別的顏色也用作所有屬于它的卡的背景顏色。所以，在互動的過程中，它可以幫助用戶快速地獲得領先地位。

當然，這種顏色分組的方式更進一步，因為它不僅組織在一個屏幕上的元素，而且在所有數字產品中組織不同的屏幕或頁面。然而，它也對應于格式塔原則：這種方法允許設計者創建外觀和感覺一致的界面，并支持從屏幕到屏幕的視覺感知的一般完整性，從一個交互到另一個交互。

尺寸

通過大小對元素進行相似性分類的原則是創建直觀和用戶友好界面的另一個基石，因為它建立了支持用戶的強視覺層次的基礎。這種方法有助于確定優先級，并使最重要的內容可見。按照這個原則對類似的內容元素進行分組排列它們之間的連接，通常比用戶可以讀取副本或查看所有細節更快。

提出這一原則的好方法是檢查復制內容的組織。

該示例展示了一家建筑公司的企業網站。通過關鍵詞同時應用兩個分組原則來支持呈現公司利益和方法的復制塊：它們使用不同的大小和不同的文本方向。在相互作用的過程中，它們被明顯地看作是相關元素。此外，擴展菜單頁面還顯示了按照大小分類復制元素的排版層次結構：關鍵字，類別和子類別。

這是另一個按大小和顏色進行分組的例子。我們可以看到標簽欄的概念，其中相同重要性的交互元素以相同的大小和褪色的陰影給出，而核心的交互元素加按鈕通過明亮的顏色和更大的尺寸而突出。此外，嘗試通過此按鈕添加內容，為用戶提供三種不同類型內容的選項。再次，使用與父按鈕相同顏色的出現的三個按鈕進行分組，但尺寸較小，該界面使用戶能夠基于認知感知的典型操作輕松設置導航元素的連接和層次。

形狀

在網頁或屏幕上分組元素的另一種方法是通過形狀來標記它們。

該示例顯示了使用相同形狀的卡來模擬與物理對象（數據卡的基礎）的交互的應用程序。該方法允許用戶將該組內容塊視為相關的。

如上所示的Homey應用程序的界面還提供了從一個屏幕到另一個屏幕的形狀分組的示例：標記房間的按鈕使用四舍五入形狀，而特定房間屏幕內各種指示器的按鈕使用圓形。它設置相關布局元素之間的明確連接以及應用程序中的全局導航。

雖然我們剛剛開始修改格式塔在設計中的理論使用，但已經明白的是，知道這些簡單而有效的原則可以為用戶節省大量的精力，并且可以根據人的認知能力和心理模式來支持用戶界面。按照更新檢查其他分組原則的說明和示例：接近度，對稱性，延續性等。