在Web和移動(dòng)用戶界面中對內(nèi)容呈現(xiàn)進(jìn)行周到的設(shè)計(jì)，對于擴(kuò)大產(chǎn)品的實(shí)用性和可用性意義重大。本文將重點(diǎn)介紹用于視覺板塊劃分的技巧：分隔符和布局。和摹客一起來看看都有哪些常見的視覺分隔符吧~

什么是視覺分隔符？

視覺分隔符是一種布局元素，有助于將內(nèi)容分成清晰的組、部分或區(qū)域。并且，可以幫助設(shè)計(jì)師根據(jù)典型的視覺感知模式來組織頁面，并使布局更清晰，更易于用戶理解。

分隔符與其它頁面元素在建立堅(jiān)實(shí)的視覺層次結(jié)構(gòu)中發(fā)揮了重要作用。例如，用戶可以更輕松地定義相同、相似或相關(guān)的內(nèi)容；或每個(gè)頁面板塊之間的從屬關(guān)系等。

分隔符也有助于塑造產(chǎn)品可用性：在大部分情況下，分隔符有助于創(chuàng)建可點(diǎn)擊的可視容器。這對于移動(dòng)設(shè)備界面尤其重要。

視覺分隔符種類

分隔符可根據(jù)其外觀和功能分為兩大類。

根據(jù)分隔符外觀分類，有五種比較常見的分隔元素：

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

線條

無論是在印刷品還是數(shù)字產(chǎn)品中，線條歷來都是用來分隔內(nèi)容的最佳方法，簡單、直觀，用戶不需過多思考。

另一方面，單純的線條分隔符似乎看起來有點(diǎn)過于單調(diào)。因此，設(shè)計(jì)師也開始嘗試尋找其他分離內(nèi)容的方法。此外，建議僅在無法以其他方式分割內(nèi)容的情況下才使用線條分隔。 太多的線條會(huì)導(dǎo)致屏幕噪聲過大，并產(chǎn)生不必要的視覺張力。

致力于零廢品生活的網(wǎng)站頁面使用水平線作為視覺分隔符，以清晰地組織有關(guān)商品的不同信息

科學(xué)平臺(tái)的網(wǎng)頁使用水平線分隔不同的內(nèi)容版塊，并使其結(jié)構(gòu)更清晰

負(fù)空間

負(fù)空間（留白），即視覺元素周圍或屏幕內(nèi)部的空白空間。但是，空白并不意味著消極或浪費(fèi)，反之，亦有利于提升用戶體驗(yàn)。負(fù)空間是最流行的視覺分隔器之一，尤其是在以極簡主義和簡潔性為基礎(chǔ)的界面中。通過對視覺感知的格式塔原則的了解，例如，鄰近性和相似性原則，負(fù)空間也可以是一個(gè)有效的、優(yōu)雅的視覺分隔，同時(shí)，也讓界面設(shè)計(jì)更加有條不紊。

旅行App不需要任何額外的視覺元素，只需要利用空白來分隔列表中的項(xiàng)目

顏色對比

另一種有效的視覺分隔是色彩對比。在UI設(shè)計(jì)中，色彩的選擇和組合對用戶可以產(chǎn)生巨大的心理暗示作用。它們能夠強(qiáng)化網(wǎng)站的信息和內(nèi)容，從而營造出恰當(dāng)?shù)姆諊?。對比度是影響頁面或屏幕視覺層次的關(guān)鍵因素之一。因此，色彩對比可以有效地分離不同的選項(xiàng)、項(xiàng)目，或交互區(qū)域。這也是分屏設(shè)計(jì)近年慢慢流行起來的原因。

移動(dòng)菜單設(shè)計(jì)基于色彩對比，以使項(xiàng)目清晰可見

柔和色彩對比

即使在柔和的設(shè)計(jì)元素中，色彩對比的力量也很明顯：主頁版塊、CTA及菜單的可交互部分都界限分明。另外，菜單中用于視覺分隔的垂直線條既可提示頁面滑動(dòng)方向，同時(shí)，也避免了頁面看起來不完整的問題。

陰影和體積

陰影和體積，通常是作為展示視覺高度的元素，但也可以作為一種非常有效的分隔符。它們的結(jié)合使用，有助于營造頁面深度和內(nèi)容分層，達(dá)到自然而和諧的視覺效果。 另一方面，它看起來也沒有線條那么明顯。因此，這種方法有助于實(shí)現(xiàn)特定項(xiàng)目的平衡度和易讀性，而不會(huì)產(chǎn)生過多的視覺干擾。

圖示屏幕中使用陰影使布局更有深度

圖片

不同的圖片本身就是一種視覺分隔器，尤其在包含大量文本內(nèi)容的界面中特別受歡迎。例如博客、在線媒體和基于文本的登錄頁面。照片、插圖、3D圖形以及動(dòng)畫圖像都有助于平衡文本內(nèi)容，強(qiáng)化可視性和可讀性，從而有效地劃分視覺范圍以及增加樂趣和情感吸引力。

餐廳App的菜單屏幕將圖像作為視覺分隔元素

功能類型

視覺分隔器的功能類型取決于其工作的層次結(jié)構(gòu)級別。

實(shí)線分隔線

實(shí)線分隔線是用于分隔各部分并跨越整個(gè)屏幕的分隔線。

畫廊App使用實(shí)線水平線作為藝術(shù)家列表分隔線。

Perfect Recipe使用實(shí)線分割線來分隔菜單

財(cái)務(wù)App也使用實(shí)線分隔線來分隔費(fèi)用列表

電影App在結(jié)帳頁面上使用實(shí)線分隔符

嵌入式分隔線

嵌入式分隔符用于將與相關(guān)內(nèi)容的項(xiàng)目分開，錨定與應(yīng)用程序欄標(biāo)題對齊的元素，或調(diào)整到頁面上特定類型的文本內(nèi)容。

帶子標(biāo)題的分隔線

在某些情況下，可以將分隔符與子標(biāo)題配對，以標(biāo)識(shí)分組內(nèi)容的版塊。此時(shí)，分隔符應(yīng)該放置在子標(biāo)題之上，以使子標(biāo)題與內(nèi)容的連接更加明顯。

中間分隔線

通常是放置在布局中間的分隔線。例如，收據(jù)上的價(jià)格之間的分隔線。

出售草藥的電子商務(wù)網(wǎng)站的產(chǎn)品頁面帶有中間分隔符，可以清晰地將結(jié)賬區(qū)與產(chǎn)品描述分隔開來

溫馨提示：

當(dāng)你選擇視覺分隔符的類型時(shí)，需要考慮以下兩個(gè)因素：

畫龍點(diǎn)睛：分隔符不應(yīng)該喧賓奪主，分散用戶對內(nèi)容本身的注意力。要記住，使用分隔符的目的始終在于使布局變得清晰，起到畫龍點(diǎn)睛的作用。

中等頻率：如上所述，過多的視覺分隔器（特別是當(dāng)以線條的形式呈現(xiàn)布局中的其他元素時(shí)）會(huì)產(chǎn)生視覺干擾，并使用戶界面看起來很臃腫。因此，在考慮使用分隔符類型時(shí)需要三思而后行。在可能的情況下，建議使用負(fù)空間，不要過分渲染顏色，爭取界面視覺和諧。

作者： Marina Yalanska

原文地址： https://tubikstudio.com/visual-dividers-user-interface/