視覺分割可以說是不過時卻又流行的視覺設(shè)計技法,在Dribbble和Behance社區(qū)也經(jīng)常看到有WEB UI運用這種技法的作品,一個好的分割和一個不規(guī)范的分割能塑造出兩種完全不同的效果界面。同時針對不同類型的設(shè)計也會采用不同方式來進行分割。
今天的文章主要講的是視覺分割,視覺分割是幫助在屏幕上組織內(nèi)容,并將內(nèi)容的各個部分清晰地分開的布局元素。讓我們來看看視覺分割是如何工作的,以及哪些類型的視覺分割比較受歡迎。
什么是視覺分割
視覺分割是一種排版元素,它可以幫助將內(nèi)容分成明確的組、部分、選項或部分。這樣,它可以幫助設(shè)計者按照視覺感知的典型模式組織頁面,使頁面布局更加清晰,用戶更容易消化。
分隔板與頁面上的其他元素一起,在建立穩(wěn)固的視覺層次感方面起到了很大的作用。例如,有了它們,用戶可以更容易定義內(nèi)容之間的關(guān)系,比如內(nèi)容之間是否相同、相似、相近、相關(guān),是否有從屬關(guān)系等等。
分隔板對于可用性也很重要:在很多情況下,它們可以創(chuàng)建看起來可點擊或可點擊的可視化容器,這對于移動界面來說尤為關(guān)鍵。
分隔板的視覺類型
說到分割器,我們可以從兩個方面來分析:外觀和功能。從視覺部分開始,在用戶界面中,有五種基本且廣泛使用的內(nèi)容劃分方法。
線條
顏色
負空間
陰影/體積
圖像
線條
線條自古以來,無論是在印刷生產(chǎn)中還是在數(shù)字界面中,都屬于頂級的內(nèi)容分割方法。它們在這個角色上很容易被認可,所以用戶不用多想。
另一方面,這種類型似乎超級簡單,遠非原創(chuàng)。所以,很多時候,設(shè)計師們會努力尋找其他的內(nèi)容分離方式。更重要的是,建議只有在內(nèi)容無法用其他方式有效分割的情況下,才可以使用線條的方式。太多的線條會讓屏幕上的視覺噪音過大,造成不必要的視覺張力。
致力于零浪費生活的網(wǎng)站的產(chǎn)品頁面使用水平線作為視覺分隔符,以清晰地組織有關(guān)商品的不同信息。
科學(xué)平臺的網(wǎng)頁使用水平線分隔不同的內(nèi)容塊。
茶品牌的電子商務(wù)網(wǎng)站使用不同級別的內(nèi)容可視化分隔,從簡單的水平線分隔定價和CTA元素,到具有不規(guī)則網(wǎng)格的表格查找有關(guān)項目的信息,常規(guī)表格查找網(wǎng)站標(biāo)題中的項目和顏色形成對比,以將視覺內(nèi)容與文本內(nèi)容分開。
負空間
負空間(又名白色空間)意味著屏幕周圍和元素內(nèi)部的空空間。然而,空白并不意味著被動或浪費:和屏幕上的其他元素一樣,它的作用是支持積極的用戶體驗。負空間是最受歡迎的視覺分割之一,尤其是在基于極簡主義和簡約理念的界面中。在視覺感知的Gestal原則中,例如,近似性和相似性原則,負空間變成了一個有效的、優(yōu)雅的視覺分割,也讓界面有了呼吸,避免了雜亂。
旅行計劃應(yīng)用程序?qū)⒘斜碇械捻椖糠指糸_,而沒有任何其他視覺元素,僅帶有空白。
Health Blog文章列表基于印刷層次結(jié)構(gòu)和負空格,以使它們看起來像一組清晰的項目。
色彩對比度
另一種有效的視覺劃分方式是色彩對比。在UI設(shè)計中色彩的選擇和組合具有巨大的心理潛力:它們能夠強化網(wǎng)站的信息和內(nèi)容,營造出適當(dāng)?shù)姆諊。對比度是影響頁面或屏幕的可掃描性和視覺層次感的關(guān)鍵因素之一。綜上所述,色彩對比度可以有效地分隔不同的選項、項目或互動區(qū)域,也就是作為視覺分割工作。這也是近年來分屏的流行原因。而這或許也解釋了沿對比色背景上呈現(xiàn)的內(nèi)容塊來組織著陸頁和單頁網(wǎng)站的流行方式。
移動菜單概念基于顏色對比,以使項目清晰可見。
即使在像這樣的柔和元素中,顏色對比的力量也很明顯:它有助于將英雄部分的頁面與CTA和菜單的活動部分分開。另外,請注意用作菜單項可視分隔線的垂直線:與略微可見的圖像一起,在這里它們還可以作為方向提示,并有助于避免在頁面上出現(xiàn)完整的錯覺。
在GNO毛毯的網(wǎng)站設(shè)計中,顏色對比有助于將較長的網(wǎng)頁劃分為易于消化的精美內(nèi)容。
陰影
陰影,通常是通過視覺上抬高一部分內(nèi)容的效果來達到的,也可以有效地起到隔斷的作用。它們能創(chuàng)造出一種層次感,將頁面分隔在幾個層次上,對于人眼來說,往往看起來很自然、很和諧。另一方面,與線條相比,它看起來不那么明顯和引人注目,所以這種方法可能有助于實現(xiàn)特定項目的平衡和可讀性,而不會產(chǎn)生過多的視覺噪音或分散注意力。
展示庫存商品的目錄屏幕以這種方式使用了陰影,從而使布局更加深入,并清楚地將卡片彼此分開。
購買定制花束的移動應(yīng)用程序還通過從背景中突出顯示的卡片來劃分目錄中的位置。這樣一來,內(nèi)容在界面上顯得清晰互動,看起來既輕松又通風(fēng)。
圖片
各種類型的圖片是一種更有效的視覺分割。在這個角色中,它們在有大量文字內(nèi)容的界面中特別受歡迎,例如,博客、在線媒體和基于文字的著陸頁等。照片、插圖、3D圖形以及動畫圖像,有助于平衡文字內(nèi)容,提高可讀性和可讀性水平,有效地劃分視覺區(qū)塊,并增加趣味性和情感吸引力。
加密貨幣報告的目標(biāo)頁面使用帶有動畫的“了解更多”號召性用語的醒目的3D圖形塊。這樣,主題塊也可以清楚地分開。
餐廳應(yīng)用程序的菜單屏幕將圖像用作劃分選項的關(guān)鍵元素。
功能類型
視覺分割的功能類型取決于其工作的層級。
全幅式分割器
所謂全漂隔板,是指將各部分隔開,跨越整個屏幕布局的長度。
畫廊應(yīng)用程序使用水平線作為藝術(shù)家目錄中的分隔線。
在完美的食譜應(yīng)用程式使用全出血分隔的食譜分開。
內(nèi)嵌式隔板
內(nèi)嵌式隔板將相關(guān)內(nèi)容的項目分隔開來,由與應(yīng)用欄標(biāo)題對齊的元素錨定,或調(diào)整到頁面上的特定文本內(nèi)容的種類。
帶小標(biāo)題的分頁
在某些情況下,您可以將分隔符與子標(biāo)題配對,以標(biāo)識一個分組內(nèi)容塊。在這種情況下,分界線應(yīng)該放在子標(biāo)題的上方,以使子標(biāo)題與內(nèi)容的聯(lián)系更加明顯。
中間的分隔板
這些通常是放置在版面中間的某處的隔板,例如,用來分隔相關(guān)的內(nèi)容,如收據(jù)上的價格。
出售草藥的電子商務(wù)網(wǎng)站的產(chǎn)品頁面帶有中間分隔符,以將簽出交互式區(qū)域與描述產(chǎn)品的文本內(nèi)容清楚地分開。
需要考慮的事項
選擇視覺隔斷的類型為你設(shè)計的版面,你最好考慮兩個基本因素。
細致:隔斷器不應(yīng)該大喊大叫吸引用戶的注意力,不應(yīng)該分散用戶對內(nèi)容本身的注意力。分隔板的目的是為了支撐和使布局簡潔,而不是為了吸引用戶的注意力。所以,要讓人注意到但不討厭。
適度的頻率:如上文所述,過多的視覺分割線,尤其是像線條一樣呈現(xiàn)出布局的附加元素,會造成視覺上的噪音,讓用戶感到疲憊。所以,在類型上要三思而后行,三思而后行,七思而后行。在可能的情況下,寧愿用負空間也不要用線條;不要過度玩弄色彩;力求和諧一致。
正如上面的例子所示,設(shè)計師們往往會找到有效的視覺分割線的有效組合,將網(wǎng)頁或手機屏幕上的內(nèi)容有效組織起來。
任何設(shè)計技法都需要經(jīng)驗的積累,最后應(yīng)用出來的效果更加符合專業(yè)性的設(shè)計,所以獲得方法方式的同時要加以靈活運用哦。
作者 | 追波范兒
來源 | 追波范兒(id:dribbbledesign)
全部評論