作者：龐少棠，來源：龐門正道

在現(xiàn)實世界中，線可以將不相關(guān)的物件連接起來，在設(shè)計中也是如此。除此之外，線還具有塑造造型的功能，在文字排版中，線的組織作用可以讓文本的閱讀更舒適。總之，作為最基礎(chǔ)的設(shè)計元素，線的用處是多方面的。

下面我們就來看看線在實際的設(shè)計中是怎么應(yīng)用的。

一、線的特征

1、線的最大特征是長度。

什么是線？

用大白話來說，一條一條的就是線。按課本上的話就是：線是點的延伸。

一動就成了線：

所以，線的最大視覺特征是長度。

2、線具有流動感。

正因為線是由點延伸出來的，所以線天生就具有流動感，它是動態(tài)的。

雖然上面兩張圖都是靜態(tài)的，但是無論是左圖的直線，還是右圖的曲線，都把水的流淌感充分體現(xiàn)出來了。

還有中國的書法，更是將線條的流動感體現(xiàn)得淋漓盡致。

優(yōu)秀的書法作品完全是線條的藝術(shù)，你會感受到它的線條像是由墨水自動流淌出來一般，渾然天成，而不像人工書寫的。

3、線可以是無形的。

線可以是有形的，也可以是無形的。

這點可能有點反常識，還有看不到的線？逗我玩呢？一點不開玩笑，其實隱形的線在排版中很常見：

上圖中，雖然一條線也看不到，但是我相信所有人的腦中都會自動腦補上我畫出來的那幾條線。

再看一個更清晰的案例：

還有一種更隱蔽的線，那就是人的視線。

通過畫面中人物視線的引導(dǎo)，我們會很自然的將目光鎖定到標題文字上。

再看下面這張電影海報，人物的視線與魚尾之間的呼應(yīng)：

是不是感覺有條線把它們連起來了？

這條隱形的線把整個畫面連成了一個斜向下的構(gòu)圖方式，所以原圖的橫向文字排版其實是破壞了這種構(gòu)圖的。

我把文字排版稍微調(diào)整下：

這樣看起來是不是就順了很多？

其實只要能將畫面中的元素聯(lián)系在一起的，就都會形成隱形的線，我們要善于發(fā)現(xiàn)這些隱形的線，來串連我們的版式。

好了，現(xiàn)在我們對線已經(jīng)有了一些基本的了解，接下來我們看看我們平常都會用到哪些類型的線。

二、線的類型

1、水平直線

水平直線具有明快、簡潔、流暢的視覺特征。

它容易讓人聯(lián)想到海平線、地平線，給人平靜、安定、廣闊的心理感受。

以佛系風(fēng)格著稱的MUJI，一直向用戶傳達質(zhì)樸、簡約的品牌形象。所以原研哉大師找到了地平線來表達這樣的精神內(nèi)涵。

所以我們可以看到MUJI的宣傳海報，幾乎都是水平構(gòu)圖的。無形中將水平線這樣的基礎(chǔ)圖形深深的植入品牌中。

最牛逼的品牌設(shè)計是什么？

就是將最基礎(chǔ)的視覺圖形變成品牌私有的符號，想想阿迪的三條白線，耐克的勾，可樂的彩帶，優(yōu)衣庫的紅色正方形，都是這樣的案例。

好了，還是回到正題，下面來看看豎線。

2、豎線

豎線莊重、嚴肅、有縱深感。

它很容易讓人聯(lián)想到高聳的大樓、樹木、塔。

我們可以看到教堂這些象征權(quán)威的建筑，都會用高大的柱子在視覺上營造出神圣感。

希特勒在1933年的納粹集會上，設(shè)計師用探照燈射出來的光柱圖騰，將現(xiàn)場營造得既神秘又壯觀，光柱中走出來的元首簡直如天神下凡一般。

在實際的設(shè)計應(yīng)用中，由于豎線具有上下運動感，所以可以加入一些豎線元素來裝飾畫面，活躍版式。

3、斜線

斜線打破了空間的平衡性，具有不穩(wěn)定性，同時也是最具有運動感和方向感的線條。

大量斜線向一個焦點聚集，會造成強烈的緊張感。

曲線和直線在視覺上也有運動感，但是斜線的運動感是最強烈的，因為它還同時還具有很強的速度感與力量感。

所以斜線經(jīng)常會用在運動、男性化主題的設(shè)計上。

4、曲線

曲線在形態(tài)上優(yōu)美、柔和、流動、節(jié)奏感強。

在現(xiàn)實的世界中，沒有任何物體的輪廓外型是絕對的直線，曲線才是真實世界中的常態(tài)。所以，曲線會給人真實、自然、更有親和力的心理感受。

另一方面，曲線具有明顯的女性化特征。

因此，我們時?？梢娕灾黝}的設(shè)計中，用曲線來表達優(yōu)美、柔和的畫面氣質(zhì)。

除此之外，曲線還具有很強的韻律感，所以我們也常見到用曲線來裝飾畫面。

三、線的作用

線是一種既有功能性又有裝飾性的構(gòu)圖元素，但總的來說，我們用到的功能性會更多一些。

下面我們來具體看看線在設(shè)計中可以起到哪些作用。

1、引導(dǎo)方向

由于線是點的移動軌跡，所以它天生具有方向性，用它來做視覺引導(dǎo)，最適合不過。

上面的左圖中，因為沒有任何秩序引導(dǎo)，所以整個畫面顯得雜亂無章。右圖中加入了線，這樣可以領(lǐng)著我們的視線走，將一個個不相關(guān)的元素串聯(lián)起來之后，整個畫面變得井井有條。

引導(dǎo)線在海報中的應(yīng)用：

引導(dǎo)線在流程圖中的應(yīng)用：

雖然只用數(shù)字可以起到引導(dǎo)視線的作用，但是加上線條之后，可以讓用戶無需經(jīng)過大腦思考，更直觀的讓用戶感受到閱讀的路徑。

在引導(dǎo)的作用上，線是一種比數(shù)字更視覺化的表達方式。

2、分割畫面

這個很好理解，我們只要在兩個物體中畫一條線，它們就很自然的被分離。同樣的道理，在一個平面空間上畫一條線，即可把空間一分為二。

來看看具體的設(shè)計案例：

上圖中，一條曲線將整個畫面分成上下兩部分，同時作為地平線，起到穩(wěn)住畫面中的建筑重心的作用。

用線分割畫面，形成排版上的節(jié)奏變化：

用文字化作線，分割畫面：

3、信息組織

在文字排版中，我們經(jīng)常用線條來將信息分組。不同粗細的線條還可以起到劃分層次的作用。

直線可以將信息分組：

通過上面的示例我們可以看到，用線條可以將文字信息進行重新組織，分組后的文字可讀性更好，層次更清晰，同時在排版上也更加具有設(shè)計感。

具體的應(yīng)用案例：

線框可以讓聚攏信息：

線框可以將畫面中需要突顯的信息聚攏起來，讓用戶視線快速定位到這些重要信息上。

這就跟我們上學(xué)時用紅筆將課本中的重要信息圈出來，原理是一樣一樣的。

4、運動感

由于線條天生具有流動性以及方向性，所以一組線條放在一起，就會產(chǎn)生很強的運動感。

尤其是斜向上的線條，具有很強烈的速度感。

傾斜的文字也具有斜線的作用，通過編排的處理，可以給畫面營造出強烈的運動感。

不止斜線，曲線也有很強的運動感。

相較于斜線的速度與力量感，曲線則給人飄逸與優(yōu)雅的感覺。

四、實操案例

前面說我講過，雖然線既有裝飾性，又具有功能性。但在實際的應(yīng)用中，我們用到功能性會更多一些，純裝飾的線條較少。

下面我們就按線的不同功能用途來做幾個案例。

方向一：利用線條，制造畫面的動感效果。

這次的案例我打算請一位既有顏值，又有實力的偶像出鏡。

duang...就是他了，華晨宇。

先摳一張演唱會實拍的照片。

將背景換成大紅色，這樣人物與背景的融合度會更高。

再處理一下光影細節(jié)，將原圖中反射到人臉和衣服上的藍色調(diào)整成紅色，處理好之后，整個畫面在色調(diào)上就協(xié)調(diào)了許多。

接著在背景上添加一些斜上向的色塊，顏色上選擇和背景相近的色彩，標題文案也處理成同樣的傾斜角度。

再增加幾條斜線，給主標題加上微效果，這樣畫面的動感效果就得到了大大的強化。。

最后按照同樣的角度將信息文案排版好。

OK，完工。大圖走一波：

最后提醒一下，線條不太容易跟周邊的元素融合，所以我們添加線條的時候一定不能貪多，恰到好處就行，否則畫面將有失控的風(fēng)險。

接下來我們再看下一個案例。

方向二：利用線條的連接與引導(dǎo)功能，將畫面的重點信息串連起來。

還是上面那張海報，這次我們改下風(fēng)格，著重將巡演地點和時間順序表達出來。

背景換成藍色，與人物的紅色形成強烈的視覺對比效果。

在人物背后添加“火星”的英文單詞"mars"，字體上選擇視覺沖擊力強一些的手繪字體，這里主要是起到裝飾作用，所以不用太考慮識別性。

將幾個演出地點信息分布到人物的四周，再用圈形將演出地點著重標示出來。

用線條將幾個演出地點串連起來，這就相當于用視覺化的方式告訴用戶演出的時間和地點順序。

最后再添加其它文字信息，整張海報就完成了?？聪赂咔宕髨D：

好了，下一個案例走起。

方向三：利用線條的組織功能，將文案編排得清晰、有層次感。

在文字排版中，線條可以將信息分組，同時也可以強調(diào)其中的重點信息，恰當?shù)氖褂镁€條來排版，可以讓畫面條理更清晰，更具層次感。

OK，動手吧。

如果我們想讓畫面中的文字更清晰好閱讀，那最好的方法就是在排版上做到簡潔，工整。按照這個思路，我們首先把人物與文字進行分離，人物居左，文字信息靠右邊排。

正常情況下，人物的視線方向最好望向文案，這樣可以引導(dǎo)用戶去閱讀文案。。但也有特殊情況，比如說在這張海報中，我故意故人物背向文字，這樣可以制造出一點冷酷的氣氛，簡稱裝逼。

接下來將演出地點信息放到畫面中。

如果我們只是平鋪直敘的將信息羅列上來，在閱讀性上是沒問題的，簡潔清晰。但視覺上的層次感就很弱，所以在排版上可以有一些變化。

右圖中，我將演出地點抽出來加上短線條，這樣既有裝飾作用，在視覺上形成節(jié)奏感，將信息分組后也更利于閱讀。好了，看下大圖：

OK，關(guān)于線的教程就到這里了，敬請期待下次的內(nèi)容。

經(jīng)授權(quán)轉(zhuǎn)載至成都，轉(zhuǎn)載請聯(lián)系原作者
作者公眾號：龐門正道（ID: Artman_Design）