在Web和移動用戶界面中對內容呈現進行周到的設計,對于擴大產品的實用性和可用性意義重大。本文將重點介紹用于視覺板塊劃分的技巧:分隔符和布局。我們一起來看看都有哪些常見的視覺分隔符吧~

什么是視覺分隔符?

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

分隔符與其它頁面元素在建立堅實的視覺層次結構中發揮了重要作用。例如,用戶可以更輕松地定義相同、相似或相關的內容;或每個頁面板塊之間的從屬關系等。

分隔符也有助于塑造產品可用性:在大部分情況下,分隔符有助于創建可點擊的可視容器。這對于移動設備界面尤其重要。

 

視覺分隔符種類

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

根據分隔符外觀分類,有五種比較常見的分隔元素:

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

 

線條

無論是在印刷品還是數字產品中,線條歷來都是用來分隔內容的最佳方法,簡單、直觀,用戶不需過多思考。

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

致力于零廢品生活的網站頁面使用水平線作為視覺分隔符,以清晰地組織有關商品的不同信息

科學平臺的網頁使用水平線分隔不同的內容版塊,并使其結構更清晰

 

負空間

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

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

 

顏色對比

另一種有效的視覺分隔是色彩對比。在UI設計中,色彩的選擇和組合對用戶可以產生巨大的心理暗示作用。它們能夠強化網站的信息和內容,從而營造出恰當的氛圍。對比度是影響頁面或屏幕視覺層次的關鍵因素之一。因此,色彩對比可以有效地分離不同的選項、項目,或交互區域。這也是分屏設計近年慢慢流行起來的原因。

移動菜單設計基于色彩對比,以使項目清晰可見

柔和色彩對比

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

 

陰影和體積

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

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

 

圖片

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

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

 

功能類型

視覺分隔器的功能類型取決于其工作的層次結構級別。

 

實線分隔線

實線分隔線是用于分隔各部分并跨越整個屏幕的分隔線。

畫廊App使用實線水平線作為藝術家列表分隔線。

Perfect Recipe使用實線分割線來分隔菜單

財務App也使用實線分隔線來分隔費用列表

電影App在結帳頁面上使用實線分隔符

 

嵌入式分隔線

嵌入式分隔符用于將與相關內容的項目分開,錨定與應用程序欄標題對齊的元素,或調整到頁面上特定類型的文本內容。

帶子標題的分隔線

在某些情況下,可以將分隔符與子標題配對,以標識分組內容的版塊。此時,分隔符應該放置在子標題之上,以使子標題與內容的連接更加明顯。

 

中間分隔線

通常是放置在布局中間的分隔線。例如,收據上的價格之間的分隔線。

出售草藥的電子商務網站的產品頁面帶有中間分隔符,可以清晰地將結賬區與產品描述分隔開來

 

溫馨提示:

當你選擇視覺分隔符的類型時,需要考慮以下兩個因素:

畫龍點睛:分隔符不應該喧賓奪主,分散用戶對內容本身的注意力。要記住,使用分隔符的目的始終在于使布局變得清晰,起到畫龍點睛的作用。

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

 

原文地址:tubikstudio

譯文地址:mockplus

譯者:Mockplus團隊

轉載請注明:學UI網 » 確定會使用視覺分隔符嗎?干貨在此!

登錄收藏
 
你可能喜歡的:
讓你的「引導設計」更加有理有據讓你的「引導設計」更加有理有據
超實用!手把手教你從頭構建UI設計系統超實用!手把手教你從頭構建UI設計系統
產品設計中的「驚喜感」 | 交互問答 002產品設計中的「驚喜感」 | 交互問答 002
提升UI設計視覺效果的5個角度提升UI設計視覺效果的5個角度
【設計師必看】提高Banner點擊率的15個設計技巧!【設計師必看】提高Banner點擊率的15個設計技巧!
用設計化解用戶的負面情緒(下)用設計化解用戶的負面情緒(下)
用設計化解用戶的負面情緒(上)用設計化解用戶的負面情緒(上)
為什么,人們喜歡簡單,卻購買復雜!(上)為什么,人們喜歡簡單,卻購買復雜!(上)
有圖標的設計,體驗就一定好嗎?有圖標的設計,體驗就一定好嗎?
掌握這4點,UI排版再無難題掌握這4點,UI排版再無難題
?
5星腾龙时时彩做号软件 多乐彩 配资平台哪个好快找融创配资平台力荐 浩广配资 重庆百变王牌 淘宝快3 安全的理财平台 网球比分牌 山西泳坛夺金 胜分差 怎么买股票 河南快三 除息日 10万理财一年多少收益 甘肃快3 湖北快三 p2p网络投资理财平台