我們在日常的工作中是不是經常遇到以下的情況：

• 一段信息或者一張圖片應該排在頁面什么位置合適？為什么排在這里？
• 左邊的設計還是右邊的設計更適合這個項目？為什么？
• 版面的大小元素應該如何控制？為什么這樣做？
• 如何讓版面更易讀，是不是看了很多大神的教程還是不懂如何排版？

帶著這樣的問題，我們來通過實際的案例分析為大家解讀版式的法則，讓你迅速上手掌握版式奧義。

一、內容易讀又易懂的是哪一個?

正確的案例：

• 分組分類明確
• 圖片和信息分組明確

錯誤的案例：

• 很難區分價格和商品信息
• 沒有明確的分類，很難對比

信息分組

分組是版面設計上常見的信息整理手法。將信息以特定的分類方法加以整理，制作視覺上的群組效果，分類方法有很多種，如種類、顏色、形狀、地區、身份信息、編號等等，此外對分類可以進行小組到大組的層級分組。該如何分組依目的而定，不能將不同屬性的事物混在一起。

二、哪個版面設計更具有穩定感，更適合商務形象？

正確的案例：

• 直線的元素和排版
• 網格、對齊與適度的留白，給人安心感

錯誤的案例：

• 圓形沒有重心，沒有穩定感
• 留白與排版不統一，看起來不穩定

穩定感

商務類設計多半訴求真誠與安心感，此時重要的是呈現「穩定感」。日常生活中，想要穩定的感覺時，常見的手法如等距離排版、讓整體重心平衡、盡量置放平坦的圖形而非圓形圖形等，而在設計上也是如此。

也就是說，將物體排列整齊（網格與對齊）調整平衡（重心與留白）是必要的。具體作法是讓大小或比例一致、留白均等、盡可能配置直線物體。當配置了一張照片時，在版面的對角線上也要配置照片以取得平衡。不這么做的話就無法呈現穩定的印象感。

三、呈現明顯對比的更適合音樂現場的是哪張？

正確的案例：

• 對稱的版型，強烈的對比，清楚表達對比之后的差異感
• 對比強烈的顏色，清楚表達對比的音樂符號特征

錯誤的案例:

• 同色系，無法對比差異
• 宣傳文字幾種堆砌，沒有明顯的對比區分

對比反差

對稱是一種常見的設計手法，會議中心線平均劃分出左右區域，分別施以相同設計。想讓兩種要素有所對比時，這樣做也非常的有效。此外，對稱手法可以確保樣式之美，產生穩定的版型。提高配色的對比也可以有效的營造對比效果。讓最暗色與最亮色的色彩亮度反差變大，即可產生視覺差異。另外，使用互補色也是個不錯的方法?；パa色指的是色環上面相應的兩個顏色，例如紅色和綠色、黃色和紫色、橘色和藍色等顏色組合。想讓設計要素產生對比，活用上述手法會是達成目的的捷徑。

四、信息更易讀的是哪一張？

正確的案例：

• 使用網格編排，提高閱讀性
• 有效使用留白，讓空間有留白不死板

錯誤的案例:

• 元素過于零散
• 段落不整齊，缺乏統一感

對齊（網格系統）

設計過程中，最傷腦筋的工作就是版型。要將文字、LOGO 與插圖等多個設計要素，設法安排進有限的版面并不容易。網格系統是一種有效的版型設計方法。上圖的例子就是如此，網格系統不只是有效地進行版面設計，還讓畫面產生秩序感，完成易讀性高的設計。

五、更方便比較商品信息的是哪一張？

正確的案例:

• 版式穩定統一給人安全感
• 從文字到各個元素都使用相同顏色規范

錯誤的案例:

• 這樣的版式錯落雖然避免了單調，卻給人散落的感覺
• 為了變化而讓標題顏色進行了改變，相同元素缺乏類比，反而不容易對比商品

重復（規律）

因為擔心設計會過于單調，很容易硬要去多做些多余的變化，例如把照片交錯配置，或者是改變文字顏色。但是像商品信息手冊這種案例，最好用統一的版型來處理信息內容，讓讀者更安心的閱讀，讓內容更加規范正式。同時使設計有變化，增加圖形、粗細對比、顏色對比等方法，使兩者都可以兼顧。

六、更具有設計統一感的是哪一張？

正確的案例：

• 用色統一符合設計氣氛
• 字體與設計風格統一

錯誤的案例：

• 設計元素圖形雜亂，缺乏統一感
• 顏色過多，缺乏統一感

一致性（反復）

一旦決定設計方針，就徹底貫徹到底。

設計執行開始之前，我們會有這樣的問題，比如使用何種色調?剛硬的氣質好還是柔和的好？男性取向或者是女性取向?這些疑問只要思考主題與目標對象就可以決定設計方向了。

七、留白運用得當的是哪一張？

正確的案例：

• 大面積的留白，讓重要元素更醒目
• 巧妙的留白，視線引導

錯誤的案例：

• 硬用元素排列，沒有統一感
• 元素排列過于緊密，沒有空間喘息感

留白

把留白當作元素之一來排版留白。

留白是在元素與元素之間擔任緩沖的角色。版面被塞的太滿會讓人提不起觀看的興致，但是過多的留白也會讓設計顯得空洞。文字量多時可以調整行距或者字距，讓文字區域四周充分留白以利于閱讀，同時還可以起到引人注目的效果。

八、有視覺動線引導的是哪一張？

正確的案例：

• 由大到小，遞進關系，迅速對比掌握整體信息
• 減少顏色使用，并用醒目顏色突出重點

錯誤的案例：

• 并列所有元素，無法一眼了解內容結構
• 顏色過多，無法聚集重點

視線引導

賦予要素層次感，巧妙地引導視線吧。

在設計畫面中會想辦法以醒目的要素抓住目標，接著再引導視線到整體內容上。比如人臉、插圖、箭頭、數字、標志等等都是視覺焦點。視覺焦點有橫向或者直向引導視線的作用，所以我們一般都把重要的元素放在這個位置。

在規律中放入不規則的要素來破壞規律，會更引人注目，同時暖色系比冷色系更有聚焦效果。

雖然視覺焦點很方便，但是不能過多使用會失去焦點，運用元素的大小、顏色、形狀等層次變化，巧妙地將視線引導到重點上去。

九、簡練雅致的設計是哪一張?

正確的案例 :

• 有對比物置于中央，產生了強烈的左右對稱
• 信息的分組，畫面對稱有統一感

錯誤的案例 :

• 過去靠近中心，無法產生對稱感
• 信息分組不對稱

對稱

自然界不存在完全對稱的生物，但是我們人類可以感受到，人為的對稱，可以塑造出穩定感、高級感、傳統的印象。但切記一定要保持對稱兩側的平衡。

十、哪一個是好看美觀的設計？

正確的案例：

• 使用黃金比例元素
• 空隙也使用黃金比例

錯誤的案例：

• 圖片裁剪比例隨意
• 間距行高都毫無設計感

黃金比例

最后老生常談的問題，讓版面與照片的寬高比都呈現黃金比例。矩形的長寬比例為1:1.618，生活周遭比如金字塔、植物、名片、香煙盒、書籍也都是黃金比例，另外還有白銀比例，其比例為1:1.414。

總結

我們經常在設計版面時最常用見的問題就是，做出無法喘息的空間設計，為了怕浪費空間把版面填滿、缺乏適度的留白，往往會讓設計顯得毫無層次。此外，設計元素缺乏整體感，也是讓設計雜亂的原因。通過以上的版式案例是不是讓版式更清晰易懂，一篇在手，版式我有。

歡迎關注作者的微信公眾號：「融360RUX」

圖片素材作者：Studio–JQ

「更多版式設計好文，盡在這里」

• 《實例演示！深入淺出幫你學會網格系統應用》
• 《想讓作品更有沖擊力？來學習設計中的3種構圖視角》
• 《為什么你始終做不好視覺設計？》

================明星欄目推薦================

優優教程網： UiiiUiii.com 是優設旗下優質中文教程網站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎設計愛好者也準備了貼心的知識樹專欄。開啟免費自學新篇章，按照我們的專欄一步步學習，一定可以迅速上手并制作出酷炫的視覺效果。

設計導航：國內人氣最高的設計網址導航，設計師必備： http://hao.uisdc.com