如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點(diǎn)這里

每個(gè)設(shè)計(jì)師多少都有一點(diǎn)強(qiáng)迫癥，有時(shí)候會為一個(gè)像素的間距而糾結(jié)，有時(shí)候又會割舍不下自己做的元素，滿屏的信息都想突出，導(dǎo)致畫面混亂。設(shè)計(jì)師培養(yǎng)自己對畫面的全局觀是很重要的，所以我們的腦子里時(shí)刻都需要有一把“尺子”在，這把尺子，就是“點(diǎn)線面”。在使用這把“尺子”的時(shí)候，拋開那些裝飾和顏色還有材質(zhì)，將畫面抽象成點(diǎn)線面來把控你的設(shè)計(jì)，也許會有不一樣的啟發(fā)和看到畫面不和諧的原因所在。

設(shè)計(jì)師對版面的全局觀，就是“點(diǎn)線面”的處理。“點(diǎn)線面”是所有視覺畫面的基本結(jié)構(gòu)，點(diǎn)線面可以把不同的部分或者元素組合成一個(gè)整體，進(jìn)而打造一個(gè)視覺舒適平衡的版面。

一 . 點(diǎn)的運(yùn)用

點(diǎn)，單獨(dú)存在時(shí)，是空間的一個(gè)痕跡；點(diǎn)也可以作為線的開端。很多點(diǎn)聚在一起可以組成韻律和圖案，點(diǎn)的疏密，重復(fù)，規(guī)模和數(shù)量變化都能對畫面效果起到很關(guān)鍵的作用。

點(diǎn)成線，線成面，點(diǎn)是幾何中最基本的組成部分。比如，在基本平面設(shè)計(jì)當(dāng)中，你可把點(diǎn)當(dāng)做一個(gè)文字或單獨(dú)小元素，線是一句文案，而面，則是一段文字等等。

不同形狀的點(diǎn)

圓，平穩(wěn)，完美無瑕疵的，給人的感受是飽滿，有力量的。

方形，除了平穩(wěn)外有端莊，大方感，在給人的感受踏實(shí)依靠的。

三角形：菱角分明，且有指向性，也給人尖銳的情感。

菱形比三角形對稱，在個(gè)性中又有平衡。其他不規(guī)則的圖形，各自有自己的個(gè)性，是獨(dú)立的，張揚(yáng)的。

△ 以點(diǎn)為主要元素作為畫面的主體，有層次的分布點(diǎn)的位置，同時(shí)點(diǎn)的形狀又各不相同，使得畫面細(xì)節(jié)特別豐富，有很多看點(diǎn)，同時(shí)有時(shí)有節(jié)奏變化的。需注意，這時(shí)點(diǎn)的面積大小都是很接近的，不然反而會導(dǎo)致畫面凌亂不堪。

△ 這個(gè)例子是點(diǎn)用得的做法，每個(gè)文字都是單獨(dú)的點(diǎn)，但整體的一段又可以看做是面，這么多顏色運(yùn)用在一起也不會顯得凌亂，可見這位設(shè)計(jì)師是功力扎實(shí)的。

二. 線的運(yùn)用

線具有很強(qiáng)的視覺引導(dǎo)性，它是連接任意兩個(gè)點(diǎn)的路徑。有直線、曲線、粗線、細(xì)線、水平線、斜線、波浪線、實(shí)線、虛線等等。柔和、感性的線條暗示平靜、和諧，而鋒利，曲折的線條表達(dá)打破規(guī)則和緊張。

線還有分割畫面的作用，線有連貫性，畫面因?yàn)樗姆指疃兊蒙鷦佑腥ぃ瑢τ陂喿x順序有著決定性的作用。

△ 線的規(guī)則性讓整體畫面有一致的方向感，達(dá)到一種愉悅舒適的感受。

△ 在這個(gè)版式中，曲線的運(yùn)用貫穿整個(gè)頁面，打破了整齊的文字排版，打破了乏味的基調(diào)。

△ 上面這幅書籍封面通過田野線條的縱向延伸，同時(shí)使用負(fù)空間將觀看者的注意力引向The Wealth of Nations這一標(biāo)題，線在畫面中具有很強(qiáng)的引導(dǎo)性。

三. 面的運(yùn)用

面是線的移動至終結(jié)而形成的，面有長度和寬度。面的形態(tài)也是多種多樣的，不同的形態(tài)的面，在視覺上表現(xiàn)不同的情感。

直線形的面具有直線所表現(xiàn)的心理特征，有穩(wěn)定、秩序感。曲線形的面具有柔軟、輕松、活潑。不規(guī)則的面，例如水和油墨，混合墨灑產(chǎn)生的偶然形等，比較自然生動，有靈性、人情味。

△ 例如上圖，我們會感覺版式特別穩(wěn)定，是因?yàn)楫嬅嬷姓w是兩塊大矩形支撐了畫面，構(gòu)好基本版面后再在面里去加入線和點(diǎn)，來增加其細(xì)節(jié)。

△ 再如上圖，版式依舊穩(wěn)定，也是因?yàn)楫嬅媸怯袔状缶匦螛?gòu)成的。

△ 不規(guī)則的面切割畫面讓頁面整體比較靈動，中間的文字是規(guī)矩的矩形，穿插在整個(gè)不規(guī)則的畫面中，鎮(zhèn)住了整體的版式。

△ 不過，點(diǎn)線面之間，沒有絕對的界線。通過程度的變化可以使它們自由變換。 A和B比較，A是點(diǎn)，B是面。B和C比較，B 是點(diǎn)，C是面。D和A比較，A是點(diǎn)，D是線。D和E比較，D是點(diǎn)，E是線。

四. 點(diǎn)線面全局觀

上面各自講完點(diǎn)線面，現(xiàn)在就可以用點(diǎn)線面全局觀來審視和檢查我們的設(shè)計(jì)畫面了。

我大致總結(jié)了點(diǎn)線面在版式中各自的角色分配：

• 點(diǎn)：畫面的信息排版，畫面點(diǎn)綴，平衡。
• 線：畫面的信息方向引導(dǎo)，造型，分割信息。
• 面：畫面的氣氛調(diào)性，背景打造，主體信息。

△ 上圖是最簡單操作，但也是考功底的排版，以純文字排版達(dá)到的點(diǎn)線面平衡。其中點(diǎn)作為點(diǎn)綴，線作為分割，面作為主體信息。主次分明，版面平衡。

△ 點(diǎn)與點(diǎn)，線與線，面與面之間也是有大小對比的。例如上圖，背景超大面積不規(guī)則的面，頂部中等面積的矩形標(biāo)題，底部小面積的logo排放，是面之間的對比，同樣的，上半部分的線比較密集，下半部分的線是松散的。

△ 而把點(diǎn)線面用到最最的還是無印良品的海報(bào)，只能說，佩服佩服！

當(dāng)我們抽象化這些版式變成點(diǎn)線面之后，我們就能以宏觀的角度來看待我們的畫面，那自然而然畫面的信息層次輕重就很明朗，也不會在一開始就陷入太過于細(xì)節(jié)之中，而忽略了整體的版式編排。

藍(lán)藍(lán)設(shè)計(jì)( m.skdbbs.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)