如何用好設計中的線條?來看高手的總結!

有句話叫:「設計無小事」,很多看似不起眼的東西卻起著至關重要的作用,比如這期要說的線條,很多人對於線條的理解有侷限性,比如:線條的形態可以是曲線、直線、折線、粗線、細線、實線、虛線等等。其實已經牽扯到了點、線、面的知識,這也是很多科班生在學校必學的知識點,但是這期所說的線與點線面中的線還是有所不同的,點線面中的線可以是線條、可以是文字或者是看不到的視線,而是今天著重說的是設計中很直觀的線條。下面我們還是通過實際的案例逐一分析:


線條可以引導視覺

設計類的知識很多都和日常生活息息相關,嘗試著把設計類的知識點與日常生活想結合,對於記憶和理解來說會更加得心應手,例如:

如何用好設計中的線條?來看高手的總結!

圖中的閃電可以視作為設計中的線條,給人的視覺感受是通過閃電把天與地連接為一個整體,而閃電在圖中的作用就是串聯整體,那麼回到這裡的正題:線條有引導視覺的作用該怎麼理解呢?再舉一個現實生活中的案例:

如何用好設計中的線條?來看高手的總結!

我們選擇從北京到拉薩開車去,出發之前可能需要在地圖上看下路線,知道途徑哪些省市,規劃好行程路線,這裡綠色的虛線就起到了引導視覺的作用。迴歸設計中道理是一樣的,線條可以引導用戶把原本雜亂無章的視覺點規整為有次序的視覺元素,例如:

如何用好設計中的線條?來看高手的總結!

當看到左側這張海報時我們視覺次序會出現很多變化,比如:1>A>3>B>4>C>2 或者 A>2>C>4>B>3>1 等等 N 多種順序,這時給人的感覺就是雜亂無章的,毫無視覺次序而言;而看右側的海報給人的感覺卻是條例清晰的,相比而言只是多了兩條線,但是卻在整個海報中起到了引導視覺的作用,它可以給與用戶閱讀海報時視覺輔助的作用,讓用戶以右>左>右的視覺次序欣賞、閱讀,看似很不起眼,其作用卻至關重要。

前面也說了,線的形態可以有很多種,例如:

如何用好設計中的線條?來看高手的總結!

這裡是以真實的可口可樂吸管作為設計中的線條,同樣起到了視覺引導的作用,但是我們不難發現,這裡的線條不僅僅只有一個作用,也牽扯到另一個作用:線條有串聯整體的作用。

線條能夠串聯整體

在排版時我們有分組原則,即把互想關聯的元素彼此靠近,無關聯的相互疏遠。在頁面中我們會把同一色塊上的元素視作為一個整體;下面我們說下線條所帶來的串聯整體的作用是如何體現的,比如:

如何用好設計中的線條?來看高手的總結!

△ 圖一

如何用好設計中的線條?來看高手的總結!

△ 圖二

圖一因為大面積的留白能使得用戶很容易分辨出自行車與文案是一個整體,但是相較於圖二而言,其整體性略顯不足,而且給人的感覺太過單薄、重心不穩;圖二的整體性更強,這裡的矩形線條就起到了串聯主題的作用,類似的還有:

如何用好設計中的線條?來看高手的總結!

不難看出,這些案例中的線條都有串聯主題的作用,線條使得主題元素整體感更強、畫面板式更加嚴謹;對於整體的視覺傳達也起到了串聯、引導的作用;在文字排版中,也有類似的線條,比如:

如何用好設計中的線條?來看高手的總結!

同樣是通過線條把文案更加整體化,也起到了串聯的作用。

線條可以突出主題

突出主題的方式有很多種,像我們之前所說到的留白、對比。接下來繼續說下另一個可以突出主題的方式—線條,下面看個案例:

如何用好設計中的線條?來看高手的總結!

通過對比觀察我們發現,右側海報整體感更強,主題文案信息更加清晰,主體更明確。其中的原理可以理解為:因為線條的存在,使得主題信息有了一定的範圍,在視覺上等於是在海報中劃定了視覺焦點,從而起到了突出主題的作用。當然還有其他的表現形式,比如:

如何用好設計中的線條?來看高手的總結!

很好的詮釋了線條的作用——突出標題序號。在進行創作時,作品的每個元素都要做到有理有據,否則只是一味的抄襲,到再創作時腦袋裡還是一片空白,只有明白了其中的設計原理,才能做到活學活用。再看幾個案例:

如何用好設計中的線條?來看高手的總結!

突出主題也許一個線條就可以表現的淋漓盡致,因設計目的的不同,線條所發揮的作用也不盡相同。下面繼續分析:

線條可以分割整體

前面說了線條有串聯整體的作用,而這裡又說可以分割整體,是否存在矛盾呢?下面舉個簡單的例子:

如何用好設計中的線條?來看高手的總結!

在小文案的區域中間我加了兩個線條,看似很小的改變,其目的是把文案很準確、嚴謹地分割為三個小整體,希望能給用戶帶來識別性更強的閱讀性,再舉個例子:

如何用好設計中的線條?來看高手的總結!

這裡的線條把月份和日期分割、英文和中文分割開,使得用戶對於信息的捕捉能力以及可辨識性都提升了很多,而線條的作用就起到了分割的作用。

線條有修飾的作用

線條也能起到修飾、襯托的作用,很多小夥伴會忽視這一點,其實線條也可以成為海報中襯托畫面、修飾主題的元素,例如:

如何用好設計中的線條?來看高手的總結!

海報中的線條起到了襯托、修飾主題的作用,假如把這些線條都刪除,畫面整體會顯得相對單薄。

更多設計中線條的應用:


如何巧用線條,讓你的Banner 更有設計感?

在上兩期整理banner設計的過程中,我發現線框在banner設計中的應用非常廣泛。不僅能夠輔助一些元素的設計,還可以為設計增色不少,增加設計感。所以,我決定總結研究一番,發現這裡面還...


線條之美!20個優秀網頁告訴你如何善用線性圖標

隨著扁平化和現代設計風格的逐步流行和沉澱,線性圖標也迎來了它的黃金時期。現在你會在越來越多的地方發現它的身影,從傳統的控制面板、導航欄和社交媒體插件,到功能性的列表界面...


總結

線條的作用我們分為四個逐一分析,其實它們之間也存在著相輔相成的作用,不能以一概全,線條所起到的作用可以是一種,也可以是多種,比如:我們前面「可口可樂」的案例,即有串聯整體的作用,又有引導視覺的作用。只要我們在使用的時候能明確目的,而不是機械式的抄襲,那麼最終一定會得心應手。


分享到:


相關文章: