爲新手量身打造的 UI 界面視覺分割方法 |【值得收藏】

這是一篇關於界面視覺分割的文章，佈局元素有助於清晰地分辨屏幕上的內容。檢查它們在UI中的工做方式以及類型。

視覺分割在 Web 和移動 UI 界面中對內容能進行很好的視覺設計引導，對於擴大產品的實用性和可用性意義重大。這些分隔元素有助於整理屏幕上的內容一目瞭然。讓咱們看一下視覺分隔的工做方式以及它們的類型吧。

什麼是視覺分隔

視覺分隔符是一種佈局元素，有助於將內容分紅清晰的部分。並可幫助設計師根據典型的視覺感觀來佈局頁面，並使總體更易於用戶理解。

視覺分割與頁面上的其餘設計元素同樣相當重要。例如，用戶能夠更輕鬆地定義內容之間的關係。視覺分割對於實用性也很重要：在許多狀況下，分割會使內容看上去是可點擊的，這對於移動界面尤其重要。

視覺種類的分隔線

談到分隔線，咱們能夠從分隔線的外觀和功能來分析。從外觀，有五種常見 UI 界面中劃份內容的方法：

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

線

不管是在什麼狀況下，「線」都屬於分離內容的主流方式。線可讓內容簡單易識別，所以用戶無需三思。

另外一方面，這種類型貌似超簡單。所以，設計人員一般會努力尋找其餘分離內容的方法。此外，建議僅在沒法以其餘方式有效分割內容的狀況下使用。太多的線條會致使屏幕嚴重視覺噪音，併產生沒必要要的視覺疲勞。

低碳生活網站的產品頁面使用水平線做爲視覺分隔，以清晰地佈局有關商品的不一樣信息

科學平臺的網頁使用水平線分隔不一樣的內容塊，並使內容結構易於瀏覽

某電商網站使用不一樣層次的內容可視化分隔，從水平分隔訂價和CTA元素，到網格滑動佈局查找有關物品的信息

負空間

負空間 （又稱空白）是指元素周圍屏幕上（一般是元素內部）的空白。然而，空白並不意味着浪費空間資源，與屏幕上的任何其餘元素同樣，它也能夠支持用戶體驗。負空間是最流行的視覺分隔之一，尤爲是在以極簡主義的界面中。負空間充分體現了「格式塔」視覺感原理（例如，接近性和類似性原理），從而成爲有效的視覺分隔，它還使界面避免視覺混亂。

旅行 APP 將列表中的項目分隔開，而沒有任何其餘視覺元素，僅帶有空白

Health Blog文章列表基於印刷層次結構和負空間，使內容看起來清晰瞭然

色彩對比

視覺分隔的另外一種有效類型是顏色對比度。UI 設計中的顏色選擇和組合具備很大的心理暗示：它們可以加強網站消息和內容，從而營造適當的氛圍。對比度是影響頁面或屏幕的可瀏覽性和視覺層次結構的關鍵因素之一。經過這些，顏色對比度能夠有效地分割不一樣的內容。這就是近年來分屏如此流行的緣由。

移動菜單概念基於顏色對比，使項目清晰可見

即便在像這樣的柔和元素中，顏色對比的做用也很明顯。另外，請注意用做菜單項可視分隔的垂直線：與略微可見的圖像一塊兒，還能夠做爲方向提示可引導繼續下拉瀏覽

GNO毛毯的網站設計中，顏色對比有助於將較長的網頁劃分爲易於消化的精美內容塊

陰影和體積

陰影和體積通常能夠經過可視化部份內容達到視覺效果，也能夠有效地用做與分隔線。它們營造出一種深度的層次感。另外一方面，它看起來不像線條那樣顯眼，所以這種方法可用於項目的平衡和易讀性，而不會產生過多的視覺疲勞或干擾。

展現庫存商品的目錄以這種方式使用了陰影，從而使佈局更加滲透，並清楚地將卡片彼此分開

訂花的 APP 經過從背景中突出顯示的卡片來劃分目錄中的位置

插圖

各類插圖提供了一種很是有效的視覺分隔。插圖在帶有大量文本內容的界面中特別適用，例如博客，在線媒體和基於文本的登陸頁面。照片，插圖，3D圖形以及動畫圖像有助於平衡文本內容，提升可瀏覽性。

某金融網站頁面使用動畫效果的「瞭解更多」CTA標語的3D圖形塊。這樣，主題內容也能夠清楚地分開

餐廳 APP 的菜單屏幕將圖像用做劃分選項的關鍵元素

平鋪分隔

平鋪分隔是用於分隔界面每一個部分並跨越屏幕布局總體長度的分隔線。

畫廊 APP 使用水平線做爲藝術家目錄中的分隔線

食譜 APP 使用平鋪分隔線來分割食譜

財務 APP 使用了不多見的平鋪分割線來分隔費用列表中的項目

電影 APP 在結賬屏幕上使用平鋪分隔線

嵌入式分隔線

嵌入式分割線將與相關內容的項目分開，並與 APP 標題對齊。

 

 該結構的網站上的零件帶有使用水平線做爲嵌入式分割線

帶子標題的分隔線

在某些狀況下，能夠將分隔線與子標題搭配，來標識出分組的內容。在這種狀況下，分隔線應放在子標題上方，使子標題與內容的鏈接更加明顯。

中間分隔線

這些一般是放置在佈局中間某處的分隔線，用於分隔相關內容，例如收據上的價格。

某電商網站的產品頁面帶有中間分隔線，將交互區域與描述產品的文本內容清楚地分開。

要考慮的要點

爲設計的佈局選擇視覺分隔的類型，須要考慮兩個基本因素。

• 細節：分隔線不能過分醒目，不可以讓用戶從內容自己中分散注意力。分隔線的目的是讓佈局整潔，而不是引發注意。
• 適當的出現：如上所述，太多的視覺分隔會產生視覺疲勞。所以，使用分割類型，三思然後行。在恰當的地方使用空白而不是線條；不要誇張的顏色；保持和諧與一致。

——————————————————————————————————————

喜歡的童鞋能夠關注咱們

— 來自 PxCook 官方團隊 ，專一多年設計研發

效率協做工具