什麼是視覺間隔
視覺間隔是一種佈局元素，它有助於將內容分隔成為清晰的分組、選項和部分。它可以讓設計師更好地組織內容的視覺體驗，處理信息的層級，也有助於用戶理解內容，明白內容之間的關係。
視覺間隔和頁面上的其他內容在一起，構成視覺層級，這是它最重要的作用。在視覺間隔的幫助之下，用戶可以輕鬆地感知內容之間的關係，明白各個信息片段之間的關係是相似，並列，承襲，從屬，還是其他。
視覺間隔的可用性也同樣重要：在很多時候，有的視覺間隔元素看起來是可點擊，可交互的，這在移動端界面上，是非常重要的。
視覺間隔的種類
談到視覺間隔，我們可以從兩方面來進行拆解分析：視覺間隔的外觀和功能。按照視覺特徵，視覺間隔有5種基本的類型：
- 線條
- 色彩
- 負空間
- 陰影/體積
- 圖片
下面我們分別針對這5種類型進行說明。
線條
很長時間以來，在排版印刷領域，線條就一直是一種用來分隔內容的頂級方法。線條的分隔功能是認可度最高的一種間隔方式，用戶幾乎不用思考，就能夠理解和感知它，並且發揮作用。
另一方面，這種間隔方式也很容易顯得過於簡單，並且和應有的形態相去甚遠。這也是為什麼設計師在想盡辦法去尋求別的視覺間隔形態。太多的線條間隔會讓屏幕上的視覺干擾太多，並且帶來不必要的視覺噪音。
所以，能夠將線條間隔用得微妙、恰到好處、出神入化，是設計師功力的一個重要體現。
在這個網站產品頁面中，使用深色的線條間隔來分割產品信息，用來組織和間隔信息內容。
在這個頁面當中，線條分隔了不同的內容區塊，讓頁面的結構更易於被掃讀。
這個電商網站將不同級別的視覺內容進行了分離，藉助簡單的水平線將價格、CTA按鈕以及承載相關信息的表單分隔到不同的區域。
負空間
負空間，也就是留白，也是最為常見的一種視覺分隔元素。留白絕不是對空間的浪費，和屏幕上其他的元素一樣，它同樣發揮著重要的作用，拱衛支撐著整個用戶體驗。負空間是最為流行的視覺分隔之一，尤其是在極簡主義風格為主導的設計當中。負空間本身遵循著格式塔原理，尤其是其中「接近原理」和「相似原理」是負空間在設計中，發揮分隔作用的核心所在。合理地運用負空間，還能強化頁面的呼吸感。
上面這款旅行規劃 APP當中，使用留白將不同的條目分開，沒有使用額外的具體視覺元素，僅僅只靠留白。
Health Blog 的列表的排版層次是基於負空間來實現的，看起來清晰又充滿呼吸感。
色彩對比
高對比度的色彩，同樣能夠帶來清晰的視覺間隔效果。在 UI 界面中高對比度的色彩有著極為明顯視覺表現潛質，它們能夠增強網站的信息和內容的表現力，分割區塊，營造氛圍。對比度是影響頁面和屏幕可讀性的關鍵因素之一。在具體的應用當中，不同的色彩會有效地分離不同的選項、條目和區域，這意味著它作為視覺分隔的作用非常強。這也是近年來分屏式設計如此流行的原因所在。
這是一套移動端菜單的概念設計，強烈的色彩對比讓信息清晰可見。
即使是在這樣的柔和的設計當中，色彩的對比度也發揮了相當的作用：一方面，強烈的色彩對比讓CTA按鈕和輸入框之間有了明顯的區分，另一方面，右側的主視覺元素的背景也同樣藉由不同色彩的對比，做到了突出的效果。
在 GNO Blankets 這個網站當中，強烈的明暗對比將網站元素分隔成為精美而清晰的區塊。
陰影和體積
陰影和體積也是一種非常常見的視覺間隔方式，通過營造在「高度」或者說高程上的視覺差異，從而達到分層的效果，而這種設計也是符合人類一直以來的認知習慣。這種方法有利於保持整個設計的平衡和易讀性，另一方面，它又能保持足夠的微妙和自然，不會那麼引人矚目從而讓人覺得出戲或者受到干擾。
這個APP的目錄頁面所有元素都採用了白色的背景，而陰影讓佈局呈現出了縱深層次，讓內容足以展現又不顯突兀。
這款提供定製化花束服務的APP也採用了類似的陰影元素，讓整體看起來清晰又通透。
圖片
圖片在 UI 界面當中，同樣也是一種非常有效的視覺間隔，尤其是在包含大量文本內容的界面中。無論是博客、在線媒體網站還是其他類型的網站當中，圖片的間隔作用都非常明顯。無論是照片、插畫、3D圖形，它們作為圖片都可以很好的平衡文本內容，提高內容的識別度和可讀性，有效地劃分層級，並且提高情感吸引力。
這個比特幣網站的著陸頁就使用了帶有3D效果「瞭解更多」動態圖片，圖片和文本在內容和功能上都清晰地分隔開來。
在這個餐廳 APP 當中，圖片作為劃分內容的關鍵元素而存在。
按照功能劃分
如果從功能的角度上來劃分視覺間隔，可以根據它所處的層次來進行劃分。
全出血間隔
使用線條作為全出血間隔是最為常見的，它會很跨整個屏幕布局來作為信息層級的劃分。
這個畫廊圖庫 APP 的藝術家目錄當中，使用線條作為全出血間隔，來區分藝術家。
這個名為完美食譜的APP也使用了全出血間隔線來區分內容。
在這個財務APP當中，也使用了全出血間隔線來區分條目。
在這個電影APP的結帳頁面當中，也使用了線條來作為全出血間隔。
嵌入式間隔
嵌入式間隔的功能是將相關性較高的內容分割開，並且它通常會和標題或者其他的特定元素保持對齊或者對應，它們通常是進行某個大區塊內不同組件的分隔，或者將多個同類的元素分隔開。
這個網站當中，使用橫向的短分隔線來區分表單中的參數條目。
中間分隔
這種分割線通常會置於佈局的中間某處，同樣是分隔相關的內容，但是通常它們在屬性上不一定是一致的，但是層級近似。
在這個出售草藥的電商網站的右側，使用中間分隔線將文本和可交互的區域清晰地分隔開。
鏈接：https://www.uisdc.com/visual-dividers-user-interface
今天就分享到這裡啦~~
如果有任何問題
都可以私聊站長喲
站長微頭條 不定時更新好東西喲！
閱讀更多 UI設計靠譜站長 的文章
