設(shè)計(jì)師大部分時(shí)間，就是在排布點(diǎn)線面在版面中的大小比例及位置關(guān)系，設(shè)計(jì)師可以在不理解文案內(nèi)容的情況下，依然能通過這些法則來將文字和圖片進(jìn)行合理的布局。而本文要談的正是點(diǎn)、線、面在版式設(shè)計(jì)中的作用。

本篇文章將深入剖析版式設(shè)計(jì)的基本構(gòu)成單位，點(diǎn)、線、面。

我們將點(diǎn)線面稱為設(shè)計(jì)三元素，一個(gè)文字或者標(biāo)點(diǎn)，我們可以抽象成一個(gè)點(diǎn)，一行文字可以抽象成一條線，那么一段文字就是一個(gè)面，一張圖片也可以被看做是一個(gè)面。

其實(shí)我們?cè)O(shè)計(jì)師大部分時(shí)間，就是在排布點(diǎn)線面在版面中的大小比例及位置關(guān)系。換句話說，我們可以在不理解文案內(nèi)容的情況下，依然能夠通過形式美法則將文字和圖片進(jìn)行合理的布局。

筆者在外企擔(dān)任視覺設(shè)計(jì)師的時(shí)候，經(jīng)常面對(duì)各個(gè)國(guó)家和地區(qū)的設(shè)計(jì)需求。母語(yǔ)是英語(yǔ)的我們還能看懂文字的意思，但是像德國(guó)、俄羅斯、日本這些國(guó)家的語(yǔ)言我們也看不懂，那看不懂就不設(shè)計(jì)了嗎？

肯定不能，通常文案編輯會(huì)在word中標(biāo)明哪段文字是大標(biāo)題，并進(jìn)行加粗加大字號(hào)顯示，哪些是正文已經(jīng)在哪換行都會(huì)標(biāo)注清楚，所以你只需要按照版式規(guī)律進(jìn)行設(shè)計(jì)就OK。這種情況就是把文字和圖片抽象成點(diǎn)線面了，你實(shí)際排的就是點(diǎn)線面的位置關(guān)系了。

那么點(diǎn)線面在版式設(shè)計(jì)中的作用是什么呢？

點(diǎn)的作用

點(diǎn)，可以聚焦我們的視線?？梢宰屓藗儼炎⒁饬劢乖谖覀兿胫攸c(diǎn)表達(dá)的信息上面。比如：APP啟動(dòng)頁(yè)面中的LOGO，這些都可以看做是一個(gè)點(diǎn)，讓我們只關(guān)注這個(gè)品牌并留下印象，排除其他的信息干擾，這也是減法法則的運(yùn)用，少即是多！

下圖中只有一個(gè)點(diǎn)，我們的視覺焦點(diǎn)會(huì)不自覺的落在這個(gè)點(diǎn)上，所以點(diǎn)可以起到聚焦視覺的作用。那么在實(shí)際設(shè)計(jì)中有哪些經(jīng)典案例呢？

各位看官請(qǐng)繼續(xù)往下看：

天貓APP開屏頁(yè)面中心位置只有一個(gè)天貓的LOGO，實(shí)際就是起到聚焦用戶的眼球，從而加深對(duì)品牌的認(rèn)知和記憶。有的同學(xué)可能會(huì)覺得天貓這樣的億級(jí)用戶量產(chǎn)品，怎么可能浪費(fèi)這么大的banner位卻只放一個(gè)logo呢？

因?yàn)樘熵堖@個(gè)品牌更需要人們記住！

當(dāng)頁(yè)面當(dāng)中有兩個(gè)點(diǎn)并列存在的時(shí)候，情況又不一樣了。我們的視覺焦點(diǎn)會(huì)在兩個(gè)點(diǎn)之間進(jìn)行反復(fù)的游離，很難獲取到視覺焦點(diǎn)，所以這里又涉及到了一個(gè)奇數(shù)法則。

奇數(shù)法則就是在版式設(shè)計(jì)中，一個(gè)區(qū)塊內(nèi)的元素應(yīng)最好是奇數(shù)個(gè)數(shù)。這樣一直會(huì)有一個(gè)視覺中心可以獲取我們的焦點(diǎn)，從而讓視覺保持平衡。

看到這里，很多視覺設(shè)計(jì)師可能會(huì)恍然大悟，原來視覺還有這么多的講究和原理。那么在實(shí)際設(shè)計(jì)中，有哪些經(jīng)典案例呢？

一般多數(shù)APP底部標(biāo)簽導(dǎo)航和頂部標(biāo)簽導(dǎo)航，都應(yīng)該是奇數(shù)排列才符合視覺規(guī)律。

參考下圖APP頁(yè)面頂部標(biāo)簽及底部導(dǎo)航標(biāo)簽個(gè)數(shù)：

點(diǎn)在版式設(shè)計(jì)中的實(shí)際應(yīng)用案例：

線的作用

線，可以用來分割設(shè)計(jì)元素。將版面劃分成不同的信息區(qū)塊，方便用戶閱讀。線有長(zhǎng)短、有粗細(xì)、有虛實(shí)，線還起到版面骨骼的作用，能夠撐起版面。

上圖為重復(fù)排列的線條，我們?cè)谌髽?gòu)成中學(xué)習(xí)過重復(fù)當(dāng)中求變化，變化當(dāng)中求統(tǒng)一。這種重復(fù)的線條可以營(yíng)造出線動(dòng)成面的效果，起到了支撐版面的作用，從線條中沖破紙面的雙手讓視覺更具沖擊力，同時(shí)也讓用戶聚焦到了中間的產(chǎn)品-手表！

上圖中運(yùn)用了蜿蜒曲折的線條，穿插于版面中，可以讓版面更加生動(dòng)靈活！這也是線在版面當(dāng)中穿插效果營(yíng)造出來的視覺分區(qū)效果。并且多線條的運(yùn)用同時(shí)讓版面富有內(nèi)容，起到支撐版面的作用。

上圖中，線的粗細(xì)長(zhǎng)短作為版面的骨骼，可以支撐起版面并劃分版面。骨骼類的排版規(guī)則中明確指出：橫縱線條可以起到支撐版面的作用，就好比我們?nèi)梭w中的骨骼，可以支撐起我們的身軀道理是一樣的。

并且，在上圖中，橫豎線條通過粗細(xì)的對(duì)比也明顯的隱喻版面中的區(qū)塊劃分。

面的作用

面，可以將版面進(jìn)行區(qū)域的劃分。我們說一段文字，或一張圖片就是一個(gè)區(qū)塊，在區(qū)塊里面的信息高度相關(guān)。

上圖的灰色塊將版面進(jìn)行了區(qū)域的劃分，在版式設(shè)計(jì)中我們將這種手法稱作墊色區(qū)域劃分法。假想，如果版面中沒有灰色塊和黃色塊，只有三個(gè)酒瓶頁(yè)面效果會(huì)顯得空洞，整個(gè)版面也立不住。

所以通過墊色的處理手法，讓版面更加富有變化，同時(shí)襯托出主體產(chǎn)品-酒瓶的視覺重量。

上圖雜志對(duì)頁(yè)頁(yè)面中的圖片都可以理解為面的應(yīng)用，圖片是一個(gè)面，段落文字同時(shí)也可以理解成是面的變體。這樣版面中圖片和文字的區(qū)域性便顯得條理清晰，在我們閱讀的時(shí)候會(huì)有暗示性的區(qū)域劃分。

在整個(gè)版面當(dāng)中，設(shè)計(jì)師還運(yùn)用了點(diǎn)的穿插。點(diǎn)在版面中的出現(xiàn)一方面是點(diǎn)綴了版面，同時(shí)點(diǎn)中的文字也是一種區(qū)塊的劃分。

以上是本人根據(jù)多年設(shè)計(jì)經(jīng)驗(yàn)整理的關(guān)于設(shè)計(jì)中的三元素 點(diǎn)線面的個(gè)人理解！

本文由 @黑馬PM 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議