乍一看許多平面布局並不複雜,感覺換成自己也能設計出來,但是當你真的開始著手設計這麼一個原型的時候,會發現事情並不是那麼簡單。在特定的元素的選取和設計上很容易陷入困局,一個好的分割和一個不規範的分割能塑造出兩種完全不同的效果界面。同時針對不同類型的設計也會採用不同方式來進行分割。
今天的文章主要講的是視覺分割,視覺分割是幫助在屏幕上內容的各個部分清晰地分開的布局顯示。讓我們來看看視覺分割是如何工作的,以及哪些類型的視覺分割比較受歡迎。
什麼是視覺分割?
視覺分割是一種排版元素,它可以幫助將內容分成明確的組、部分、選項或部分。這樣,它可以幫助設計者按照視覺感知的典型模式組織頁面,使頁面布局更加清晰,用戶更容易消化。
分隔板與頁面上的其他元素一起,在建立穩固的視覺層次感方面起到了很大的作用。例如,有了它們,用戶可以更容易定義內容之間的關係,比如內容之間是否相同、相似、相近、相關,是否有從屬關係等等。
線條
線條自古以來,無論是在印刷生產中還是在數字界面中,都屬於頂級的內容分割方法。它們在這個角色上很容易被認可,所以用戶不用多想。
這種類型似乎超級簡單,遠非原創。設計師們會努力尋找其他的內容分離方式。建議只有在內容無法用其他方式有效分割的情況下,才可以使用線條的方式,太多的線條會讓屏幕上的視覺雜亂。
致力於零浪費生活的網站的產品頁面使用水平線作為視覺分隔符,以清晰地組織有關商品的不同信息。
負空間
負空間意味著屏幕周圍和元素內部的空空間。然而,空白並不意味著被動或浪費:和屏幕上的其他元素一樣,它的作用是支持積極的用戶體驗。
負空間是最受歡迎的視覺分割之一,尤其是在基於極簡主義和簡約理念的界面中。近似性和相似性原則,負空間變成了一個有效的、優雅的視覺分割,也讓界面有了呼吸,避免了雜亂。
色彩對比度
在平面設計中色彩的選擇和組合具有巨大的心理潛力:它們能夠強化網站的信息和內容,營造出適當的氛圍。對比度是影響頁面或屏幕的可讀性和視覺層次感的關鍵因素之一。
色彩可以有效地分隔不同的選項、項目或互動區域,也就是作為視覺分割工作。這也是近年來分屏的流行原因。而這或許也解釋了沿對比色背景上呈現的內容塊來組織著陸頁和單頁網站的流行方式。
即使在像這樣的柔和元素中,顏色對比的力量也很明顯:它有助於將英雄部分的頁面與CTA和菜單的活動部分分開。另外,請注意用作菜單項可視分隔線的垂直線:與略微可見的圖像一起,在這裡它們還可以作為方向提示,並有助於避免在頁面上出現完整的錯覺。
陰影
陰影,通常是通過視覺上抬高一部分內容的效果來達到的,也可以有效地起到隔斷的作用。它們能創造出一種層次感,將頁面分隔在幾個層次上,對於人眼來說,往往看起來很自然、很和諧。
與線條相比,它看起來不那麼明顯和引人注目,所以這種方法可能有助於實現特定項目的平衡和可讀性,而不會產生過多的視覺噪音或分散注意力。
展示庫存商品的目錄屏幕以這種方式使用了陰影,從而使布局更加深入,並清楚地將卡片彼此分開。
從背景中突出顯示的卡片來劃分目錄中的位置。這樣一來,內容在界面上顯得清晰互動,看起來既輕鬆又通風。
圖片
各種類型的圖片是一種更有效的視覺分割,因為不同圖片本身會創建視覺區別。
照片、插圖、3D圖形以及動畫圖像,有助於平衡文字內容,提高可讀性和易讀性,有效地劃分視覺區塊,並增加趣味性和視覺吸引力。
留白
界面中的留白的區域通常不會放置任何視覺元素。大量的留白能夠讓原本凌亂的界面看起來簡約而吸引人——它讓界面元素周圍都空出來,讓這些元素更加醒目,脫穎而出。留白讓界面顯得更加富於呼吸感,也更加簡潔。
正如上面的例子所示,平面設計師們往往會找到有效的視覺分割線的有效組合,將網頁或手機屏幕上的內容有效組合起來,過多的視覺分割線,尤其是像線條一樣呈現出布局的附加元素,會造成視覺上的噪音。
任何設計技法都需要經驗的積累,最後應用出來的效果更加符合專業性的平面設計,所以獲得方法方式的同時要加以靈活運用哦。
END