起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識設計干貨：點、線、面在版式設計中的作用
設計師大部分時間，就是在排布點線面在版面中的大小比例及位置關系，設計師可以在不理解文案內容的情況下，依然能通過這些法則來將文字和圖片進行合理的布局。而本文要談的正是點、線、面在版式設計中的作用。
本篇文章將深入剖析版式設計的基本構成單位，點、線、面。
我們將點線面稱為設計三元素，一個文字或者標點，我們可以抽象成一個點，一行文字可以抽象成一條線，那么一段文字就是一個面，一張圖片也可以被看做是一個面。
其實我們設計師大部分時間，就是在排布點線面在版面中的大小比例及位置關系。換句話說，我們可以在不理解文案內容的情況下，依然能夠通過形式美法則將文字和圖片進行合理的布局。
筆者在外企擔任視覺設計師的時候，經常面對各個國家和地區的設計需求。母語是英語的我們還能看懂文字的意思，但是像德國、俄羅斯、日本這些國家的語言我們也看不懂，那看不懂就不設計了嗎？
肯定不能，通常文案編輯會在word中標明哪段文字是大標題，并進行加粗加大字號顯示，哪些是正文已經在哪換行都會標注清楚，所以你只需要按照版式規律進行設計就OK。這種情況就是把文字和圖片抽象成點線面了，你實際排的就是點線面的位置關系了。
那么點線面在版式設計中的作用是什么呢？
點的作用
點，可以聚焦我們的視線?？梢宰屓藗儼炎⒁饬劢乖谖覀兿胫攸c表達的信息上面。比如：APP啟動頁面中的LOGO，這些都可以看做是一個點，讓我們只關注這個品牌并留下印象，排除其他的信息干擾，這也是減法法則的運用，少即是多！
下圖中只有一個點，我們的視覺焦點會不自覺的落在這個點上，所以點可以起到聚焦視覺的作用。那么在實際設計中有哪些經典案例呢？
各位看官請繼續往下看：
天貓APP開屏頁面中心位置只有一個天貓的LOGO，實際就是起到聚焦用戶的眼球，從而加深對品牌的認知和記憶。有的同學可能會覺得天貓這樣的億級用戶量產品，怎么可能浪費這么大的banner位卻只放一個logo呢？
因為天貓這個品牌更需要人們記??！
當頁面當中有兩個點并列存在的時候，情況又不一樣了。我們的視覺焦點會在兩個點之間進行反復的游離，很難獲取到視覺焦點，所以這里又涉及到了一個奇數法則。
奇數法則就是在版式設計中，一個區塊內的元素應最好是奇數個數。這樣一直會有一個視覺中心可以獲取我們的焦點，從而讓視覺保持平衡。
看到這里，很多視覺設計師可能會恍然大悟，原來視覺還有這么多的講究和原理。那么在實際設計中，有哪些經典案例呢？
一般多數APP底部標簽導航和頂部標簽導航，都應該是奇數排列才符合視覺規律。
參考下圖APP頁面頂部標簽及底部導航標簽個數：
點在版式設計中的實際應用案例：
線的作用
線，可以用來分割設計元素。將版面劃分成不同的信息區塊，方便用戶閱讀。線有長短、有粗細、有虛實，線還起到版面骨骼的作用，能夠撐起版面。
上圖為重復排列的線條，我們在三大構成中學習過重復當中求變化，變化當中求統一。這種重復的線條可以營造出線動成面的效果，起到了支撐版面的作用，從線條中沖破紙面的雙手讓視覺更具沖擊力，同時也讓用戶聚焦到了中間的產品-手表！
上圖中運用了蜿蜒曲折的線條，穿插于版面中，可以讓版面更加生動靈活！這也是線在版面當中穿插效果營造出來的視覺分區效果。并且多線條的運用同時讓版面富有內容，起到支撐版面的作用。
上圖中，線的粗細長短作為版面的骨骼，可以支撐起版面并劃分版面。骨骼類的排版規則中明確指出：橫縱線條可以起到支撐版面的作用，就好比我們人體中的骨骼，可以支撐起我們的身軀道理是一樣的。
并且，在上圖中，橫豎線條通過粗細的對比也明顯的隱喻版面中的區塊劃分。
面的作用
面，可以將版面進行區域的劃分。我們說一段文字，或一張圖片就是一個區塊，在區塊里面的信息高度相關。
上圖的灰色塊將版面進行了區域的劃分，在版式設計中我們將這種手法稱作墊色區域劃分法。假想，如果版面中沒有灰色塊和黃色塊，只有三個酒瓶頁面效果會顯得空洞，整個版面也立不住。
所以通過墊色的處理手法，讓版面更加富有變化，同時襯托出主體產品-酒瓶的視覺重量。
上圖雜志對頁頁面中的圖片都可以理解為面的應用，圖片是一個面，段落文字同時也可以理解成是面的變體。這樣版面中圖片和文字的區域性便顯得條理清晰，在我們閱讀的時候會有暗示性的區域劃分。
在整個版面當中，設計師還運用了點的穿插。點在版面中的出現一方面是點綴了版面，同時點中的文字也是一種區塊的劃分。
以上是本人根據多年設計經驗整理的關于設計中的三元素 點線面的個人理解！
本文由 @黑馬PM 原創發布于人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基于CC0協議
黑馬帶你學設計原創教程：http://study.163.com/course/introduction/1005382004.htm