登錄/注冊

幻燈片中的線條-君陵的PPT小院雜談3

設(shè)計·配圖·板式2017-02-15

留言 1

導(dǎo)讀

繼上一篇文字淺談幻燈片中的「點」之后，現(xiàn)在開始來談?wù)劵脽羝械摹妇€」。從構(gòu)成上看，線是由無數(shù)個點構(gòu)成的，不同于點的局部作用，線條所起的作用是貫穿整個頁面。

試著去認識「線」條

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

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

概述

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

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

1 線條的連接

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

1.1 線條連接指向性

這種三角的金字塔結(jié)構(gòu)，右側(cè)用于填充內(nèi)容作為層級顯示，左側(cè)通過線條指示，對每個層級進行詳細說明。使用層級結(jié)構(gòu)的內(nèi)容論述時，可以使用這種使用場景。

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

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

1.2 線條的流程連接

對于上一篇關(guān)于「點」的文字中說到，點的指向作用，一方面是點的提示詳細內(nèi)容的，另外還有點和點之間的連接關(guān)系，二者就是通過線條連接實現(xiàn)的，這里就不再論述。

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

2 線條的分隔

根據(jù)幻燈片界面二維空間的布局關(guān)系，使用線條進行空間分隔，使得每一個小的平面區(qū)域?qū)崿F(xiàn)各自的關(guān)系說明，進而達成區(qū)域與界面的分與合，區(qū)域和區(qū)域的獨立。

2.1 線條分隔的對稱邏輯

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

2.2 線條分隔的標(biāo)題內(nèi)容

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

2.3 線條分隔的獨立統(tǒng)一

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

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

3 線條的修飾

作為點線面構(gòu)圖中的關(guān)鍵一環(huán)，線條所帶來的美感更多是線條所勾勒劃分版面的體現(xiàn)，作為一維結(jié)構(gòu)的基礎(chǔ)元素，可以用它來勾勒二維的線感，三維的面感。關(guān)于修飾這一塊內(nèi)容，真的是每個人均有自己的看法，這里列出的只是我的線條之美。