亚洲另类97色波,四季久久免费一区二区三区四区,丰满蜜桃精品视频网,国产在线观看无码九色8X视频亚洲中文字幕久久精品无码喷水_国产精品无码一区二区

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

2019-10-31 資深UI設(shè)計者

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

什么是視覺間隔

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

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

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

視覺間隔的種類

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

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

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

線條

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

另一方面，這種間隔方式也很容易顯得過于簡單，并且和應(yīng)有的形態(tài)相去甚遠。這也是為什么設(shè)計師在想盡辦法去尋求別的視覺間隔形態(tài)。太多的線條間隔會讓屏幕上的視覺干擾太多，并且?guī)聿槐匾囊曈X噪音。

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

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

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

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

負空間

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

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

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

色彩對比

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

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

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

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

陰影和體積

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

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

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

圖片

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