2017-8-7 資深UI設計者
每個設計師多少都有一點強迫癥，有時候會為一個像素的間距而糾結，有時候又會割舍不下自己做的元素，滿屏的信息都想突出，導致畫面混亂。設計師培養自己對畫面的全局觀是很重要的，所以我們的腦子里時刻都需要有一把“尺子”在，這把尺子，就是“點線面”。在使用這把“尺子”的時候，拋開那些裝飾和顏色還有材質，將畫面抽象成點線面來把控你的設計，也許會有不一樣的啟發和看到畫面不和諧的原因所在。
設計師對版面的全局觀，就是“點線面”的處理。“點線面”是所有視覺畫面的基本結構，點線面可以把不同的部分或者元素組合成一個整體，進而打造一個視覺舒適平衡的版面。
點，單獨存在時，是空間的一個痕跡；點也可以作為線的開端。很多點聚在一起可以組成韻律和圖案，點的疏密，重復，規模和數量變化都能對畫面效果起到很關鍵的作用。
點成線，線成面，點是幾何中最基本的組成部分。比如，在基本平面設計當中，你可把點當做一個文字或單獨小元素，線是一句文案，而面，則是一段文字等等。
不同形狀的點
圓，平穩，完美無瑕疵的，給人的感受是飽滿，有力量的。
方形，除了平穩外有端莊，大方感，在給人的感受踏實依靠的。
三角形：菱角分明，且有指向性，也給人尖銳的情感。
菱形比三角形對稱，在個性中又有平衡。其他不規則的圖形，各自有自己的個性，是獨立的，張揚的。
△ 以點為主要元素作為畫面的主體，有層次的分布點的位置，同時點的形狀又各不相同，使得畫面細節特別豐富，有很多看點，同時有時有節奏變化的。需注意，這時點的面積大小都是很接近的，不然反而會導致畫面凌亂不堪。
△ 這個例子是點用得的做法，每個文字都是單獨的點，但整體的一段又可以看做是面，這么多顏色運用在一起也不會顯得凌亂，可見這位設計師是功力扎實的。
線具有很強的視覺引導性，它是連接任意兩個點的路徑。有直線、曲線、粗線、細線、水平線、斜線、波浪線、實線、虛線等等。柔和、感性的線條暗示平靜、和諧，而鋒利，曲折的線條表達打破規則和緊張。
線還有分割畫面的作用，線有連貫性，畫面因為它的分割而變得生動有趣，對于閱讀順序有著決定性的作用。
△ 線的規則性讓整體畫面有一致的方向感，達到一種愉悅舒適的感受。
△ 在這個版式中，曲線的運用貫穿整個頁面，打破了整齊的文字排版，打破了乏味的基調。
△ 上面這幅書籍封面通過田野線條的縱向延伸，同時使用負空間將觀看者的注意力引向The Wealth of Nations這一標題，線在畫面中具有很強的引導性。
面是線的移動至終結而形成的，面有長度和寬度。面的形態也是多種多樣的，不同的形態的面，在視覺上表現不同的情感。
直線形的面具有直線所表現的心理特征，有穩定、秩序感。曲線形的面具有柔軟、輕松、活潑。不規則的面，例如水和油墨，混合墨灑產生的偶然形等，比較自然生動，有靈性、人情味。
△ 例如上圖，我們會感覺版式特別穩定，是因為畫面中整體是兩塊大矩形支撐了畫面，構好基本版面后再在面里去加入線和點，來增加其細節。
△ 再如上圖，版式依舊穩定，也是因為畫面是有幾大矩形構成的。
△ 不規則的面切割畫面讓頁面整體比較靈動，中間的文字是規矩的矩形，穿插在整個不規則的畫面中，鎮住了整體的版式。
△ 不過，點線面之間，沒有絕對的界線。通過程度的變化可以使它們自由變換。 A和B比較，A是點，B是面。B和C比較，B 是點，C是面。D和A比較，A是點，D是線。D和E比較，D是點，E是線。
上面各自講完點線面，現在就可以用點線面全局觀來審視和檢查我們的設計畫面了。
我大致總結了點線面在版式中各自的角色分配：
△ 上圖是最簡單操作，但也是考功底的排版，以純文字排版達到的點線面平衡。其中點作為點綴，線作為分割，面作為主體信息。主次分明，版面平衡。
△ 點與點，線與線，面與面之間也是有大小對比的。例如上圖，背景超大面積不規則的面，頂部中等面積的矩形標題，底部小面積的logo排放，是面之間的對比，同樣的，上半部分的線比較密集，下半部分的線是松散的。
△ 而把點線面用到最最的還是無印良品的海報，只能說，佩服佩服！
當我們抽象化這些版式變成點線面之后，我們就能以宏觀的角度來看待我們的畫面，那自然而然畫面的信息層次輕重就很明朗，也不會在一開始就陷入太過于細節之中，而忽略了整體的版式編排。
藍藍設計( www.gyxygd.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務