如何讓視覺(jué)層次更加清晰?
發(fā)布時(shí)間:2021-12-28 11:04 [ 我要自學(xué)網(wǎng)原創(chuàng) ] 發(fā)布人: 小劉2175

在網(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í),也有助于用戶(hù)理解內(nèi)容,明白內(nèi)容之間的關(guān)系。

視覺(jué)間隔和頁(yè)面上的其他內(nèi)容在一起,構(gòu)成視覺(jué)層級(jí),這是它最重要的作用。在視覺(jué)間隔的幫助之下,用戶(hù)可以輕松地感知內(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)型:

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

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


線(xiàn)條


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

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

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

想讓視覺(jué)層次更加清晰?來(lái)看這篇視覺(jué)間隔方法完全梳理!

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

想讓視覺(jué)層次更加清晰?來(lái)看這篇視覺(jué)間隔方法完全梳理!

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

想讓視覺(jué)層次更加清晰?來(lái)看這篇視覺(jué)間隔方法完全梳理!

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


負(fù)空間


負(fù)空間,也就是留白,也是最為常見(jiàn)的一種視覺(jué)分隔元素。留白絕不是對(duì)空間的浪費(fèi),和屏幕上其他的元素一樣,它同樣發(fā)揮著重要的作用,拱衛(wèi)支撐著整個(gè)用戶(hù)體驗(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è)面的呼吸感。

想讓視覺(jué)層次更加清晰?來(lái)看這篇視覺(jué)間隔方法完全梳理!

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

想讓視覺(jué)層次更加清晰?來(lái)看這篇視覺(jué)間隔方法完全梳理!

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


色彩對(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ì)如此流行的原因所在。

想讓視覺(jué)層次更加清晰?來(lái)看這篇視覺(jué)間隔方法完全梳理!

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

想讓視覺(jué)層次更加清晰?來(lái)看這篇視覺(jué)間隔方法完全梳理!

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

想讓視覺(jué)層次更加清晰?來(lái)看這篇視覺(jué)間隔方法完全梳理!

想讓視覺(jué)層次更加清晰?來(lái)看這篇視覺(jué)間隔方法完全梳理!

在 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é)得出戲或者受到干擾。

想讓視覺(jué)層次更加清晰?來(lái)看這篇視覺(jué)間隔方法完全梳理!

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

想讓視覺(jué)層次更加清晰?來(lái)看這篇視覺(jué)間隔方法完全梳理!

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


圖片


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

想讓視覺(jué)層次更加清晰?來(lái)看這篇視覺(jué)間隔方法完全梳理!

想讓視覺(jué)層次更加清晰?來(lái)看這篇視覺(jué)間隔方法完全梳理!

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

想讓視覺(jué)層次更加清晰?來(lái)看這篇視覺(jué)間隔方法完全梳理!

想讓視覺(jué)層次更加清晰?來(lái)看這篇視覺(jué)間隔方法完全梳理!

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


按照功能劃分


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


全出血間隔


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

想讓視覺(jué)層次更加清晰?來(lái)看這篇視覺(jué)間隔方法完全梳理!

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

想讓視覺(jué)層次更加清晰?來(lái)看這篇視覺(jué)間隔方法完全梳理!

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

想讓視覺(jué)層次更加清晰?來(lái)看這篇視覺(jué)間隔方法完全梳理!

想讓視覺(jué)層次更加清晰?來(lái)看這篇視覺(jué)間隔方法完全梳理!

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

想讓視覺(jué)層次更加清晰?來(lái)看這篇視覺(jué)間隔方法完全梳理!

在這個(gè)電影APP的結(jié)帳頁(yè)面當(dāng)中,也使用了線(xiàn)條來(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)。

想讓視覺(jué)層次更加清晰?來(lái)看這篇視覺(jué)間隔方法完全梳理!

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


中間分隔


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

想讓視覺(jué)層次更加清晰?來(lái)看這篇視覺(jué)間隔方法完全梳理!

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


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


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

  • 保持微妙:視覺(jué)分隔不應(yīng)該醒目、太過(guò)引人矚目,它們不應(yīng)該分散用戶(hù)的注意力,它們應(yīng)該支撐布局的同時(shí),微妙而不那么抓人眼球。
  • 中等頻率:這和上一點(diǎn)是相輔相承的,過(guò)多的分隔線(xiàn)會(huì)變成視覺(jué)噪音,讓用戶(hù)瀏覽的時(shí)候感到疲倦。因此,應(yīng)該仔細(xì)考慮使用頻率,盡可能使用負(fù)空間,而不是線(xiàn)條。不要過(guò)度使用太多色彩,應(yīng)該盡量保持整體的協(xié)調(diào)一致。
平面海報(bào)設(shè)計(jì)快速實(shí)戰(zhàn)教程
我要自學(xué)網(wǎng)商城 ¥60 元
進(jìn)入購(gòu)買(mǎi)
文章評(píng)論
0 條評(píng)論 按熱度排序 按時(shí)間排序 /350
添加表情
遵守中華人民共和國(guó)的各項(xiàng)道德法規(guī),
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任,
本站有權(quán)保留或刪除有爭(zhēng)議評(píng)論。
參與本評(píng)論即表明您已經(jīng)閱讀并接受
上述條款。
V
特惠充值
聯(lián)系客服
APP下載
官方微信
返回頂部
分類(lèi)選擇:
電腦辦公 平面設(shè)計(jì) 室內(nèi)設(shè)計(jì) 室外設(shè)計(jì) 機(jī)械設(shè)計(jì) 工業(yè)自動(dòng)化 影視動(dòng)畫(huà) 程序開(kāi)發(fā) 網(wǎng)頁(yè)設(shè)計(jì) 會(huì)計(jì)課程 興趣成長(zhǎng) AIGC