想讓視覺層次更加清晰?來看這篇視覺間隔方法完全梳理!

2019-10-31    泥人張 網站設計文章及欣賞

在網頁和移動端界面中,內容和信息是否能夠經過系統性、有效的整理和組織,對于內容的可用性和實用性,都是意義巨大的。而在呈現信息的時候,視覺間隔是組織信息的關鍵因素。它說起來并不難理解,但是在實際的運用當中,卻是千變萬化,今天我們來梳理一下流行的視覺間隔的方法。

什么是視覺間隔

視覺間隔是一種布局元素,它有助于將內容分隔成為清晰的分組、選項和部分。它可以讓設計師更好地組織內容的視覺體驗,處理信息的層級,也有助于用戶理解內容,明白內容之間的關系。

視覺間隔和頁面上的其他內容在一起,構成視覺層級,這是它最重要的作用。在視覺間隔的幫助之下,用戶可以輕松地感知內容之間的關系,明白各個信息片段之間的關系是相似,并列,承襲,從屬,還是其他。

視覺間隔的可用性也同樣重要:在很多時候,有的視覺間隔元素看起來是可點擊,可交互的,這在移動端界面上,是非常重要的。

視覺間隔的種類

談到視覺間隔,我們可以從兩方面來進行拆解分析:視覺間隔的外觀和功能。按照視覺特征,視覺間隔有5種基本的類型:

  • 線條
  • 色彩
  • 負空間
  • 陰影/體積
  • 圖片

下面我們分別針對這5種類型進行說明。

線條

很長時間以來,在排版印刷領域,線條就一直是一種用來分隔內容的頂級方法。線條的分隔功能是認可度最高的一種間隔方式,用戶幾乎不用思考,就能夠理解和感知它,并且發揮作用。

另一方面,這種間隔方式也很容易顯得過于簡單,并且和應有的形態相去甚遠。這也是為什么設計師在想盡辦法去尋求別的視覺間隔形態。太多的線條間隔會讓屏幕上的視覺干擾太多,并且帶來不必要的視覺噪音。

所以,能夠將線條間隔用得微妙、恰到好處、出神入化,是設計師功力的一個重要體現。

在這個網站產品頁面中,使用深色的線條間隔來分割產品信息,用來組織和間隔信息內容。

在這個頁面當中,線條分隔了不同的內容區塊,讓頁面的結構更易于被掃讀。

這個電商網站將不同級別的視覺內容進行了分離,借助簡單的水平線將價格、CTA按鈕以及承載相關信息的表單分隔到不同的區域。

負空間

負空間,也就是留白,也是最為常見的一種視覺分隔元素。留白絕不是對空間的浪費,和屏幕上其他的元素一樣,它同樣發揮著重要的作用,拱衛支撐著整個用戶體驗。負空間是最為流行的視覺分隔之一,尤其是在極簡主義風格為主導的設計當中。負空間本身遵循著格式塔原理,尤其是其中「接近原理」和「相似原理」是負空間在設計中,發揮分隔作用的核心所在。合理地運用負空間,還能強化頁面的呼吸感。

上面這款旅行規劃 APP當中,使用留白將不同的條目分開,沒有使用額外的具體視覺元素,僅僅只靠留白。

Health Blog 的列表的排版層次是基于負空間來實現的,看起來清晰又充滿呼吸感。

色彩對比

高對比度的色彩,同樣能夠帶來清晰的視覺間隔效果。在 UI 界面中高對比度的色彩有著極為明顯視覺表現潛質,它們能夠增強網站的信息和內容的表現力,分割區塊,營造氛圍。對比度是影響頁面和屏幕可讀性的關鍵因素之一。在具體的應用當中,不同的色彩會有效地分離不同的選項、條目和區域,這意味著它作為視覺分隔的作用非常強。這也是近年來分屏式設計如此流行的原因所在。

這是一套移動端菜單的概念設計,強烈的色彩對比讓信息清晰可見。

即使是在這樣的柔和的設計當中,色彩的對比度也發揮了相當的作用:一方面,強烈的色彩對比讓CTA按鈕和輸入框之間有了明顯的區分,另一方面,右側的主視覺元素的背景也同樣借由不同色彩的對比,做到了突出的效果。

在 GNO Blankets 這個網站當中,強烈的明暗對比將網站元素分隔成為精美而清晰的區塊。

陰影和體積

陰影和體積也是一種非常常見的視覺間隔方式,通過營造在「高度」或者說高程上的視覺差異,從而達到分層的效果,而這種設計也是符合人類一直以來的認知習慣。這種方法有利于保持整個設計的平衡和易讀性,另一方面,它又能保持足夠的微妙和自然,不會那么引人矚目從而讓人覺得出戲或者受到干擾。

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

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

圖片

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

這個比特幣網站的著陸頁就使用了帶有3D效果「了解更多」動態圖片,圖片和文本在內容和功能上都清晰地分隔開來。

在這個餐廳 APP 當中,圖片作為劃分內容的關鍵元素而存在。

按照功能劃分

如果從功能的角度上來劃分視覺間隔,可以根據它所處的層次來進行劃分。

全出血間隔

使用線條作為全出血間隔是最為常見的,它會很跨整個屏幕布局來作為信息層級的劃分。

這個畫廊圖庫 APP 的藝術家目錄當中,使用線條作為全出血間隔,來區分藝術家。

這個名為完美食譜的APP也使用了全出血間隔線來區分內容。

在這個財務APP當中,也使用了全出血間隔線來區分條目。

在這個電影APP的結帳頁面當中,也使用了線條來作為全出血間隔。

嵌入式間隔

嵌入式間隔的功能是將相關性較高的內容分割開,并且它通常會和標題或者其他的特定元素保持對齊或者對應,它們通常是進行某個大區塊內不同組件的分隔,或者將多個同類的元素分隔開。

這個網站當中,使用橫向的短分隔線來區分表單中的參數條目。

中間分隔

這種分割線通常會置于布局的中間某處,同樣是分隔相關的內容,但是通常它們在屬性上不一定是一致的,但是層級近似。

在這個出售草藥的電商網站的右側,使用中間分隔線將文本和可交互的區域清晰地分隔開。

值得思考的問題

上面對于不同類型的視覺分隔方式都有描述,在此之外,還有兩個問題需要注意:

  • 保持微妙:視覺分隔不應該醒目、太過引人矚目,它們不應該分散用戶的注意力,它們應該支撐布局的同時,微妙而不那么抓人眼球。

  • 中等頻率:這和上一點是相輔相承的,過多的分隔線會變成視覺噪音,讓用戶瀏覽的時候感到疲倦。因此,應該仔細考慮使用頻率,盡可能使用負空間,而不是線條。不要過度使用太多色彩,應該盡量保持整體的協調一致。

文章來源:站酷

標簽: 視覺設計 視覺層級

日歷

鏈接

blogger

藍藍 http://www.thriveonsite.com

存檔

易中彩票开户 2019最新网赚工具 PK10哪个平台赔率高 什么网赚稳定收入 欢乐斗牛 金旋网赚 有什么好的网赚项目 2019年最新网赚方法 福彩3D 优优彩票官网