這是一篇關(guān)于界面視覺分割的文章顺囊，布局元素有助于清晰地分辨屏幕上的內(nèi)容庄岖。檢查它們?cè)赨I中的工作方式以及類型。
視覺分割在 Web 和移動(dòng) UI 界面中對(duì)內(nèi)容能進(jìn)行很好的視覺設(shè)計(jì)引導(dǎo)，對(duì)于擴(kuò)大產(chǎn)品的實(shí)用性和可用性意義重大。這些分隔元素有助于整理屏幕上的內(nèi)容一目了然偏竟。讓我們看一下視覺分隔的工作方式以及它們的類型吧。
什么是視覺分隔
視覺分隔符是一種布局元素敞峭，有助于將內(nèi)容分成清晰的部分踊谋。并可幫助設(shè)計(jì)師根據(jù)典型的視覺感觀來布局頁面，并使整體更易于用戶理解旋讹。
視覺分割與頁面上的其他設(shè)計(jì)元素一樣至關(guān)重要殖蚕。例如，用戶可以更輕松地定義內(nèi)容之間的關(guān)系沉迹。視覺分割對(duì)于實(shí)用性也很重要：在許多情況下睦疫，分割會(huì)使內(nèi)容看上去是可點(diǎn)擊的，這對(duì)于移動(dòng)界面尤為重要鞭呕。
視覺種類的分隔線
談到分隔線蛤育，我們可以從分隔線的外觀和功能來分析。從外觀，有五種常見 UI 界面中劃分內(nèi)容的方法：
· 線
· 顏色
· 負(fù)空間
· 陰影/體積
· 圖片
線
無論是在什么情況下缨伊，“線”都屬于分離內(nèi)容的主流方式。線可以讓內(nèi)容簡(jiǎn)單易識(shí)別进宝，因此用戶無需三思刻坊。
另一方面，這種類型貌似超簡(jiǎn)單党晋。因此谭胚，設(shè)計(jì)人員通常會(huì)努力尋找其他分離內(nèi)容的方法。此外未玻，建議僅在無法以其他方式有效分割內(nèi)容的情況下使用灾而。太多的線條會(huì)導(dǎo)致屏幕嚴(yán)重視覺噪音，并產(chǎn)生不必要的視覺疲勞扳剿。
負(fù)空間
負(fù)空間?（又稱空白）是指元素周圍屏幕上（通常是元素內(nèi)部）的空白。然而瞧掺，空白并不意味著浪費(fèi)空間資源耕餐，與屏幕上的任何其他元素一樣，它也可以支持用戶體驗(yàn)辟狈。負(fù)空間是最流行的視覺分隔之一肠缔，尤其是在以極簡(jiǎn)主義的界面中。負(fù)空間充分體現(xiàn)了“格式塔”視覺感原理（例如哼转，接近性和相似性原理）明未，從而成為有效的視覺分隔，它還使界面避免視覺混亂壹蔓。
色彩對(duì)比
視覺分隔的另一種有效類型是顏色對(duì)比度煮纵。UI 設(shè)計(jì)中的顏色選擇和組合具有很大的心理暗示：它們能夠增強(qiáng)網(wǎng)站消息和內(nèi)容，從而營造適當(dāng)?shù)姆諊荨?duì)比度是影響頁面或屏幕的可瀏覽性和視覺層次結(jié)構(gòu)的關(guān)鍵因素之一行疏。通過這些，顏色對(duì)比度可以有效地分割不同的內(nèi)容套像。這就是近年來分屏如此流行的原因酿联。
陰影和體積
陰影和體積一般可以通過可視化部分內(nèi)容達(dá)到視覺效果续镇，也可以有效地用作與分隔線。它們營造出一種深度的層次感销部。另一方面摸航，它看起來不像線條那樣顯眼，因此這種方法可用于項(xiàng)目的平衡和易讀性舅桩，而不會(huì)產(chǎn)生過多的視覺疲勞或干擾酱虎。
插圖
各種插圖提供了一種非常有效的視覺分隔读串。插圖在帶有大量文本內(nèi)容的界面中特別適用，例如博客撒妈，在線媒體和基于文本的登錄頁面爹土。照片，插圖踩身，3D圖形以及動(dòng)畫圖像有助于平衡文本內(nèi)容胀茵，提高可瀏覽性。
平鋪分隔
平鋪分隔是用于分隔界面每個(gè)部分并跨越屏幕布局整體長度的分隔線。
嵌入式分隔線
嵌入式分割線將與相關(guān)內(nèi)容的項(xiàng)目分開附鸽，并與 APP 標(biāo)題對(duì)齊脱拼。
帶子標(biāo)題的分隔線
在某些情況下，可以將分隔線與子標(biāo)題搭配坷备，來標(biāo)識(shí)出分組的內(nèi)容熄浓。在這種情況下，分隔線應(yīng)放在子標(biāo)題上方省撑，使子標(biāo)題與內(nèi)容的連接更加明顯赌蔑。
中間分隔線
這些通常是放置在布局中間某處的分隔線，用于分隔相關(guān)內(nèi)容竟秫，例如收據(jù)上的價(jià)格娃惯。
要考慮的要點(diǎn)
為設(shè)計(jì)的布局選擇視覺分隔的類型趾浅，需要考慮兩個(gè)基本因素愕提。
細(xì)節(jié)：分隔線不能過度醒目，不可讓用戶從內(nèi)容本身中分散注意力皿哨。分隔線的目的是讓布局整潔浅侨，而不是引起注意。
適當(dāng)?shù)某霈F(xiàn)：如上所述证膨，太多的視覺分隔會(huì)產(chǎn)生視覺疲勞如输。因此，使用分割類型椎例，三思而后行。在恰當(dāng)?shù)牡胤绞褂每瞻锥皇蔷€條请祖；不要夸張的顏色订歪；保持和諧與一致。
喜歡的童鞋可以關(guān)注我們
— 來自PxCook?官方團(tuán)隊(duì) 肆捕，專注多年設(shè)計(jì)研發(fā)
?效率協(xié)作工具
