在網(wǎng)頁(yè)和移動(dòng)端界面中，內(nèi)容和信息是否能夠經(jīng)過(guò)系統(tǒng)性、有效的整理和組織，對(duì)于內(nèi)容的可用性和實(shí)用性，都是意義巨大的。而在呈現(xiàn)信息的時(shí)候，視覺(jué)間隔是組織信息的關(guān)鍵因素。它說(shuō)起來(lái)并不難理解，但是在實(shí)際的運(yùn)用當(dāng)中，卻是千變?nèi)f化，今天我們來(lái)梳理一下流行的視覺(jué)間隔的方法。

什么是視覺(jué)間隔

視覺(jué)間隔是一種布局元素，它有助于將內(nèi)容分隔成為清晰的分組、選項(xiàng)和部分。它可以讓設(shè)計(jì)師更好地組織內(nèi)容的視覺(jué)體驗(yàn)，處理信息的層級(jí)，也有助于用戶理解內(nèi)容，明白內(nèi)容之間的關(guān)系。

視覺(jué)間隔和頁(yè)面上的其他內(nèi)容在一起，構(gòu)成視覺(jué)層級(jí)，這是它最重要的作用。在視覺(jué)間隔的幫助之下，用戶可以輕松地感知內(nèi)容之間的關(guān)系，明白各個(gè)信息片段之間的關(guān)系是相似，并列，承襲，從屬，還是其他。

視覺(jué)間隔的可用性也同樣重要：在很多時(shí)候，有的視覺(jué)間隔元素看起來(lái)是可點(diǎn)擊，可交互的，這在移動(dòng)端界面上，是非常重要的。

視覺(jué)間隔的種類(lèi)

談到視覺(jué)間隔，我們可以從兩方面來(lái)進(jìn)行拆解分析：視覺(jué)間隔的外觀和功能。按照視覺(jué)特征，視覺(jué)間隔有5種基本的類(lèi)型：

• 線條
• 色彩
• 負(fù)空間
• 陰影/體積
• 圖片

下面我們分別針對(duì)這5種類(lèi)型進(jìn)行說(shuō)明。

線條

很長(zhǎng)時(shí)間以來(lái)，在排版印刷領(lǐng)域，線條就一直是一種用來(lái)分隔內(nèi)容的方法。線條的分隔功能是認(rèn)可度最高的一種間隔方式，用戶幾乎不用思考，就能夠理解和感知它，并且發(fā)揮作用。

另一方面，這種間隔方式也很容易顯得過(guò)于簡(jiǎn)單，并且和應(yīng)有的形態(tài)相去甚遠(yuǎn)。這也是為什么設(shè)計(jì)師在想盡辦法去尋求別的視覺(jué)間隔形態(tài)。太多的線條間隔會(huì)讓屏幕上的視覺(jué)干擾太多，并且?guī)?lái)不必要的視覺(jué)噪音。

所以，能夠?qū)⒕€條間隔用得微妙、恰到好處、出神入化，是設(shè)計(jì)師功力的一個(gè)重要體現(xiàn)。

在這個(gè)網(wǎng)站產(chǎn)品頁(yè)面中，使用深色的線條間隔來(lái)分割產(chǎn)品信息，用來(lái)組織和間隔信息內(nèi)容。

在這個(gè)頁(yè)面當(dāng)中，線條分隔了不同的內(nèi)容區(qū)塊，讓頁(yè)面的結(jié)構(gòu)更易于被掃讀。

這個(gè)電商網(wǎng)站將不同級(jí)別的視覺(jué)內(nèi)容進(jìn)行了分離，借助簡(jiǎn)單的水平線將價(jià)格、CTA按鈕以及承載相關(guān)信息的表單分隔到不同的區(qū)域。

負(fù)空間

負(fù)空間，也就是留白，也是最為常見(jiàn)的一種視覺(jué)分隔元素。留白絕不是對(duì)空間的浪費(fèi)，和屏幕上其他的元素一樣，它同樣發(fā)揮著重要的作用，拱衛(wèi)支撐著整個(gè)用戶體驗(yàn)。負(fù)空間是最為流行的視覺(jué)分隔之一，尤其是在極簡(jiǎn)主義風(fēng)格為主導(dǎo)的設(shè)計(jì)當(dāng)中。負(fù)空間本身遵循著格式塔原理，尤其是其中「接近原理」和「相似原理」是負(fù)空間在設(shè)計(jì)中，發(fā)揮分隔作用的核心所在。合理地運(yùn)用負(fù)空間，還能強(qiáng)化頁(yè)面的呼吸感。

上面這款旅行規(guī)劃 APP當(dāng)中，使用留白將不同的條目分開(kāi)，沒(méi)有使用額外的具體視覺(jué)元素，僅僅只靠留白。

Health Blog 的列表的排版層次是基于負(fù)空間來(lái)實(shí)現(xiàn)的，看起來(lái)清晰又充滿呼吸感。

色彩對(duì)比

高對(duì)比度的色彩，同樣能夠帶來(lái)清晰的視覺(jué)間隔效果。在 UI 界面中高對(duì)比度的色彩有著極為明顯視覺(jué)表現(xiàn)潛質(zhì)，它們能夠增強(qiáng)網(wǎng)站的信息和內(nèi)容的表現(xiàn)力，分割區(qū)塊，營(yíng)造氛圍。對(duì)比度是影響頁(yè)面和屏幕可讀性的關(guān)鍵因素之一。在具體的應(yīng)用當(dāng)中，不同的色彩會(huì)有效地分離不同的選項(xiàng)、條目和區(qū)域，這意味著它作為視覺(jué)分隔的作用非常強(qiáng)。這也是近年來(lái)分屏式設(shè)計(jì)如此流行的原因所在。

這是一套移動(dòng)端菜單的概念設(shè)計(jì)，強(qiáng)烈的色彩對(duì)比讓信息清晰可見(jiàn)。

即使是在這樣的柔和的設(shè)計(jì)當(dāng)中，色彩的對(duì)比度也發(fā)揮了相當(dāng)?shù)淖饔茫阂环矫?，?qiáng)烈的色彩對(duì)比讓CTA按鈕和輸入框之間有了明顯的區(qū)分，另一方面，右側(cè)的主視覺(jué)元素的背景也同樣借由不同色彩的對(duì)比，做到了突出的效果。

在 GNO Blankets 這個(gè)網(wǎng)站當(dāng)中，強(qiáng)烈的明暗對(duì)比將網(wǎng)站元素分隔成為精美而清晰的區(qū)塊。

陰影和體積

陰影和體積也是一種非常常見(jiàn)的視覺(jué)間隔方式，通過(guò)營(yíng)造在「高度」或者說(shuō)高程上的視覺(jué)差異，從而達(dá)到分層的效果，而這種設(shè)計(jì)也是符合人類(lèi)一直以來(lái)的認(rèn)知習(xí)慣。這種方法有利于保持整個(gè)設(shè)計(jì)的平衡和易讀性，另一方面，它又能保持足夠的微妙和自然，不會(huì)那么引人矚目從而讓人覺(jué)得出戲或者受到干擾。

這個(gè)APP的目錄頁(yè)面所有元素都采用了白色的背景，而陰影讓布局呈現(xiàn)出了縱深層次，讓內(nèi)容足以展現(xiàn)又不顯突兀。

這款提供定制化花束服務(wù)的APP也采用了類(lèi)似的陰影元素，讓整體看起來(lái)清晰又通透。

圖片

圖片在 UI 界面當(dāng)中，同樣也是一種非常有效的視覺(jué)間隔，尤其是在包含大量文本內(nèi)容的界面中。無(wú)論是博客、在線媒體網(wǎng)站還是其他類(lèi)型的網(wǎng)站當(dāng)中，圖片的間隔作用都非常明顯。無(wú)論是照片、插畫(huà)、3D圖形，它們作為圖片都可以很好的平衡文本內(nèi)容，提高內(nèi)容的識(shí)別度和可讀性，有效地劃分層級(jí)，并且提高情感吸引力。

這個(gè)比特幣網(wǎng)站的著陸頁(yè)就使用了帶有3D效果「了解更多」動(dòng)態(tài)圖片，圖片和文本在內(nèi)容和功能上都清晰地分隔開(kāi)來(lái)。

在這個(gè)餐廳 APP 當(dāng)中，圖片作為劃分內(nèi)容的關(guān)鍵元素而存在。

按照功能劃分

如果從功能的角度上來(lái)劃分視覺(jué)間隔，可以根據(jù)它所處的層次來(lái)進(jìn)行劃分。

全出血間隔

使用線條作為全出血間隔是最為常見(jiàn)的，它會(huì)很跨整個(gè)屏幕布局來(lái)作為信息層級(jí)的劃分。

這個(gè)畫(huà)廊圖庫(kù) APP 的藝術(shù)家目錄當(dāng)中，使用線條作為全出血間隔，來(lái)區(qū)分藝術(shù)家。

這個(gè)名為完美食譜的APP也使用了全出血間隔線來(lái)區(qū)分內(nèi)容。

在這個(gè)財(cái)務(wù)APP當(dāng)中，也使用了全出血間隔線來(lái)區(qū)分條目。

在這個(gè)電影APP的結(jié)帳頁(yè)面當(dāng)中，也使用了線條來(lái)作為全出血間隔。

嵌入式間隔

嵌入式間隔的功能是將相關(guān)性較高的內(nèi)容分割開(kāi)，并且它通常會(huì)和標(biāo)題或者其他的特定元素保持對(duì)齊或者對(duì)應(yīng)，它們通常是進(jìn)行某個(gè)大區(qū)塊內(nèi)不同組件的分隔，或者將多個(gè)同類(lèi)的元素分隔開(kāi)。

這個(gè)網(wǎng)站當(dāng)中，使用橫向的短分隔線來(lái)區(qū)分表單中的參數(shù)條目。

中間分隔

這種分割線通常會(huì)置于布局的中間某處，同樣是分隔相關(guān)的內(nèi)容，但是通常它們?cè)趯傩陨喜灰欢ㄊ且恢碌?，但是層?jí)近似。

在這個(gè)出售草藥的電商網(wǎng)站的右側(cè)，使用中間分隔線將文本和可交互的區(qū)域清晰地分隔開(kāi)。

值得思考的問(wèn)題

上面對(duì)于不同類(lèi)型的視覺(jué)分隔方式都有描述，在此之外，還有兩個(gè)問(wèn)題需要注意：

• 保持微妙：視覺(jué)分隔不應(yīng)該醒目、太過(guò)引人矚目，它們不應(yīng)該分散用戶的注意力，它們應(yīng)該支撐布局的同時(shí)，微妙而不那么抓人眼球。

• 中等頻率：這和上一點(diǎn)是相輔相承的，過(guò)多的分隔線會(huì)變成視覺(jué)噪音，讓用戶瀏覽的時(shí)候感到疲倦。因此，應(yīng)該仔細(xì)考慮使用頻率，盡可能使用負(fù)空間，而不是線條。不要過(guò)度使用太多色彩，應(yīng)該盡量保持整體的協(xié)調(diào)一致。

文章來(lái)源：站酷