幻燈片中的線條

繼上一篇文字淺談幻燈片中的「點」之後，現在開始來談談幻燈片中的「線」。從構成上看，線是由無數個點構成的，不同於點的局部作用，線條所起的作用是貫穿整個頁面。

試著去認識「線」條

兩點之間，距離最短的是直線，然還有眾多其他的線條：折線、弧線，或者更籠統概括說是曲線。當然這也就是線條所帶來的第一個使用場景：連接一切。

從線條的實與虛，開放與封閉的角度上來看，線條的種類眾多。且根據指向性來劃分，還有無箭頭和有箭頭之分。怎麼樣去使用這些線條，下面的篇幅將簡要做個說明。

概述

幻燈片中的線，按照使用場景，分為：連接、分隔、修飾三種。

顧名思義，分隔的意義在於劃分文字板塊、色塊、圖片等演示文稿展示元素，能夠使得各個元素各自細化進而說明。連接是作為各個元素之間連接的關係紐帶，尤其在流程說明中由於其各個流程之間的指向作用，線條的連接作用顯得至為重要。修飾，只是通過線條的扁平延伸的作用，使得頁面看起來更加舒服和突出要點。

1 線條的連接

線的連接關係，這是一種概要的說法。因為使用線條的目的，在於利用線條的連續顯示，將兩個或多個部分通過線條這一特性結合起來。因此，換一種說法，從所連接的對象角度來說，線條的呈現，可以是一種帶方向的指向邏輯，也可能僅僅是只是單純的連接。

1.1 線條連接指向性

這種三角的金字塔結構，右側用於填充內容作為層級顯示，左側通過線條指示，對每個層級進行詳細說明。使用層級結構的內容論述時，可以使用這種使用場景。

下圖這種作為解釋說明的文字，主要內容在水平中間呈現。而對於詳細內容的解釋，使用這種延伸的線條進行說明，這種自定義的線條，可給整個版面的布局增點色。

下圖中三角關係，使用線條作為三個對象的關係導向，為了提高指示關係的辨識度，可以在箭頭線條上加上精簡文字說明。當然，你說四角，五角關係可不可以使用，答案是of course。但是對象越多，關係也就繁瑣，只要能夠分清主次即可。

1.2 線條的流程連接

對於上一篇關於「點」的文字中說到，點的指向作用，一方面是點的提示詳細內容的，另外還有點和點之間的連接關係，二者就是通過線條連接實現的，這裡就不再論述。

使用曲線虛線作為流程連接，使得排版錯落不一，也符合某些流程不定性的走勢線條，和直線的連接線條相比，使用區別不大。

2 線條的分隔

根據幻燈片界面二維空間的布局關係，使用線條進行空間分隔，使得每一個小的平面區域實現各自的關係說明，進而達成區域與界面的分與合，區域和區域的獨立。

2.1 線條分隔的對稱邏輯

線條分隔一個用處，是通過線條的顯示，更加強調本已有的對稱性。也就說說，將本已存在的對稱性實實在在的體現出來，給人的視覺以提示：這存在哦。

2.2 線條分隔的標題內容

無論知乎的設置界面、私信顯示界面或微信的消息顯示界面，使用線條劃分內容實現內容的獨立性，這種包含頭像、標題、內容的ListView是消息視覺呈現的一種較好方式。和卡片式的邊緣間隔不同，這種List的排布更加直觀

2.3 線條分隔的獨立統一

線條分隔將更加細化分隔對象的直觀展示，但是從整個敘述層級上來看，這樣做的目的是很好的將線條的獨立和主題的統一性結合起來。通過細化的內容展示，更加系統的理解整個頁面所承載的統一論述。下面是幾張圖片說明。

上圖中使用同心圓及圓環，作為內容的展示。從圓環的層級上，可以看出展示的順序以及可以人為設置側重點。然而，細微的動畫顯示才是這個界面展示的重中之重…

3 線條的修飾

作為點線面構圖中的關鍵一環，線條所帶來的美感更多是線條所勾勒劃分版面的體現，作為一維結構的基礎元素，可以用它來勾勒二維的線感，三維的面感。關於修飾這一塊內容，真的是每個人均有自己的看法，這裡列出的只是我的線條之美。

4 線條的其他

用線條來構建進度條，也是一個絕佳的選擇。體會下，各位。

最後，第三篇專欄到此結束

交流可以私信或者評論留

推薦閱讀

幻燈片中的點