Point 02　版式設計原理

設計中是有固定理論的，那么有了固定的理論，會不會反而使人受到理論的限制而無法設計出不同的東西呢？當然不是，每個設計都需要我們經過很多細節的調整和努力，所以會產生不同的設計效果，下面我們來介紹在網頁中的版面設計，應該如何做才好。

1.版面構圖的要點

版面設計是會受到時代影響而體現出時代要求的，當然也會受讀者年齡的影響。對于橫向與縱向的版面，橫向會方便閱讀。圖片也不能無限填充，因為我們的填充空間是有限的，而且素材不好，同樣也不行，下面根據版面構圖的要點再進行講解。

（1）根據版面率調整頁面效果

在版面中，隨著四周的頁面面積擴大，版面會逐漸減小，版面率就會下降。如果縮小也變的空白，版面率就會提高，每一張圖片所得的實際空間也會隨之增加。很明顯，下圖（左）所示的版面效果是沒有下圖（右）所示突出的，所以在設計時最好將版面以最大化顯示。

（2）讓雜亂的圖片井然有序

首先要利用網格系統將版面整齊地呈現，再將頁面進行等分，如下圖（左）所示。在網格構圖基礎上，根據表現的主題不同將主體放大顯示，同時也使版面更加活躍不顯枯燥，如下圖（中）所示。最后，還可通過將堅硬的矩形圖片以傾斜的方式，讓版面變得更加柔和、親切、有趣，如下圖（右）所示。

（3）讓瑣碎的元素變得有條理

某一些以提供商品信息為目的的版式，往往要在頁面中插入許多元素，因此不僅不能有效地整理信息，反而會讓版面看起來沒有條理。可通過為畫面添加底色色塊的方式來使畫面整潔，下圖（左）所示為不同產品添加不同色底圖，既能區分產品又不缺統一感。還可使用一個形狀元素對產品進行有效的整理分類，讓讀者對分類一目了然，并增加畫面的趣味性，如下圖（右）所示。

（4）按照閱讀順序引導視線移動方向

在進行排版設計時，對讀者目光的移動方向的預設是非常重要的，要想辦法在頁面中加入能夠順暢引導讀者視線移動的元素就能有效地引導讀者。下圖（左）所示為最常見的Z字形閱讀順序。下圖（右）所示為根據人們習慣性的數字來引導視覺，每一個人在看到1后，都會主動去尋找2在哪里。

（5）讓插圖令人印象更深刻

如果在版面里插畫，會讓人覺得過于卡通，但如果插畫加上照片后，可以緩和過于稚嫩的現象，同時也使畫面顯得有藝術感和親切感，如下圖所示。

（6）統一各元素之間的間隔

在進行排版設計時，“間隔”這種概念也是非常重要的版面構成要素，各個元素之間的間隔類型不能太多，應統一起來才能設計出井然有序的頁面效果。下圖所示中的圖片和圖片、文字和文字之間的間隔都是相同的，這樣使畫面看起來顯得更加整齊。

2.圖片構成的理論

在版面中，圖片要如何安排才是最好的呢？這里有一個重要的原則，是將主要的內容空間放大，將不重要的內容空間縮小，但也會根據不同的情況發生變換而進行合理的安排，如個人的主觀意見更為重要呢？還是希望讀者更了解商品大小，或是更希望傳達整體意象效果更為重要，所以考慮內容和意象是圖片構成的重要問題。下面來講解如何根據需要對圖片進行整理。

（1）用距離傳達出圖片的心情

拍攝主體的距離和構圖，將很大程度地影響圖片所呈現的心理印象。在特寫的構圖里，由于拍攝主體的距離較近，會給人親切感，喚起主觀的情感意識，特別是人物臉部表情特寫，如下圖（左）所示。反之，如果是遠景構圖，表現的是空間和現場狀況，如下圖（右）所示。

（2）通過留白突出版面設計感

版面編排中的留白，并非只是單純的空白，它能夠突顯出與內文等元素的存在感，進而表現出版面中的重點內容，留白有著極為重要的功能性。當版面中的留白越多，同時也會產生高質感的印象。在決定留白的位置時，重點在于不可讓版面因留白而顯得凌亂。

如下圖（左）所示，小的矩形圖片周圍設置了大量的留白，突出了寧靜的氛圍感。同時又使用三角形構圖制造了不同的比重，分清畫面重點的同時又讓讀者的視線不斷流轉于左右的頁面。而下圖（右）所示中，利用網格系統的版面編排方式，避免了版面的散亂，同時又實現了版面平衡。

（3）突顯圖片中的拍攝主體

若想要多張圖收納在同一個頁面，或是想要突顯出圖片中的拍攝主體，最常用的方法就是將主體摳出，去掉背景圖。由于去掉背景圖后，就能在有限的空間里放入大量的信息，此方法是排版中不可缺少的技巧之一。下圖（左）所示為產品圖去掉背景圖再加工的效果，顯得干凈突出。下圖（右）所示為模特圖去背景圖再加工的效果，突出展示產品的同時，更換了更加美麗的背景。

（4）整理多圖的頁面

當需要表現出畫面的豐富感或不同類別的分類信息時，可以通過將素材放進相同形狀的圖形元素中，這樣既不會使版面散亂，又可以很好地表現分類情況。下圖（左）所示為表現畫面的豐富感，下圖（右）所示為表現畫面的分類信息。

（5）增加畫面活躍感

當想要畫面不那么生硬，想要表現出活躍的氣氛時，可以將畫面中的線條變為虛線，無論使用虛線組成什么形狀都會增加畫面的活躍感。下圖所示的嬰幼兒產品就特別適合這種風格。

（6）賦予版面節奏感

如果總是將圖片放得一模一樣，或總是將圖片放在一條直線上，往往會讓人感到單調。如果能將圖片的對角放置或大小不一創造不同的比重，就能自然地引導讀者的閱讀順序，同時也賦予了版面動感，使單調的版式加入一些變化，變得豐富起來。

下圖（左）所示將圖片的大小不一進行放置，下圖（右）所示將圖片錯落有致地進行放置，雖然圖片上下錯開，但是同組圖片高度相同，這就是設計的最高境界，在理論中尋求變化。

（7）傳達連續性的畫面

當一組圖片具有連續性或者關聯性時，可以通過添加線條或者底圖的方式將它們連接到一起，在表現圖與圖之間親密關系的同時，也可以引導讀者按線條指引進行閱讀。下圖（左）所示為展示圖片的連續性，下圖（右）所示為展示圖片產品的關聯性。

（8）自然地引導讀者視線

無論是希望讀者的視線聚焦在大標題上，還是希望引導讀者的視線從標題到內文，或是從內文到圖片等，都可以利用在版面里制造方向性的方式來排版。最明顯的方式就是拍攝人物的視線，使用人物圖片中人物的視線方向，來影響版面的視覺順序。如下圖所示，隨著模特的視線，我們會有意地去瀏覽右側的產品與文案。

（9）將圖片放到足夠大

人們習慣性地喜歡看放大的圖片，當我們想表現某款產品的質感時，要盡量將圖片放得足夠大。這樣看后會讓人有一種安定、放心的感覺。下圖（左）所示為將產品細節放大，展示產品的質感。下圖（右）所示為將產品細節放大，展示產品的防滑功能，這樣更為直觀并效果顯著。

（10）使用圖片解釋的方式代替文字解釋

有時，使用圖片表現需要表達的內容比直接用文字表達要直觀許多。下圖（左）所示為使用硬幣來表現鞋底的厚度，下圖（右）所示為直接用手拉扯產品表現其產品質量或者彈性。

（11）使用輔助元素增加圖片表現力

當需要使用圖片來表現出某種功能時，除了可以使用文字直接描述外，還可以通過增加輔助元素使圖片更有表現力。如下圖（左）所示，使用了多層次旋轉的炫光來表現產品的轉速。下圖（右）所示也是使用了箭頭元素和旋轉元素來表現產品的除塵方式。

（12）圖片與文字的恰當配合

在排版中，圖片與文字的組合方式也相當重要，圖片通常不是單獨出現的，而是往往與文字進行緊密的配合。要注意的是，說明圖片的文字不能離圖片太遠，應保持圖文關聯性，如下圖（左）所示。在圖片上插入文字時，采用不會影響文字可辨識度的顏色，最好是白色與黑色，或者將文字放置在不會影響辨識度的畫面顏色上，如下圖（右）所示。

3.圖解圖說的理論

即便是傳遞相同的信息，單純的文字表現方式與夾雜了視覺要素的表現方式，都會帶給讀者不同的印象。如果在淡出的文字表現中讀者無法迅速地理解信息，則往往可以通過視覺化的處理變得易于把握。下圖所示為加上插圖表現使內容更加一目了然。

那些用文字方式表現顯得很長的說明，一旦換成視覺化的表現方式也會變得簡明清晰，讓人一看就明白其中的意思。通過對插圖的應用可以讓生硬的信息看起來更加柔和，為了這個目的應如何做，才能將信息整理出來呢，下面將進行詳細講解。

（1）配合內容區別使用圖表

為了使數據變得明白易懂，可將其轉化為視覺性的圖表，在對數值進行圖表表現時，最重要的是決定使用什么樣的圖表，因為只有選擇合適的圖表才能表現出需要的主題。圖表包括圓形圖表、柱狀圖表等。

下圖（左）所示為圓形圖表，表現各項內容的比率。下圖（右）所示為柱狀圖表，表現各項內容的差別。

下圖（左）所示為雷達圖表，通過某種形狀來表現各項內容的性質或平衡，對多項數據進行比較。下圖（右）所示為折線圖表，可以表現因某些內容不同而產生變化的數據。

（2）便于比較的表格制作

對于要制作包括多項相同范疇內容的文本時，最好將它們整理成表格的形式，這樣就很容易展示出各項內容，也便于各項內容的對照和比較。當需要對各項內容的數值等進行比較時，相對于單純的文字排列方式而言，用橫縱邊框制成的表格的方式更便于讀者了解其中的內容。

在表格設計中，要注意表頭部分的區分，表頭的顏色一般要比表格中內容的顏色更加明顯，這樣才能突出表頭的作用，如下圖所示。

同時，表頭顏色設置完成后，也可通過對每一行表格進行配色，使各項表格的內容更加明確。一般最常用的顏色設置方法是一深一淺，就是將表格底色按顏色深淺的方式來進行循環設置，下圖所示的這種方式不會使人產生疲倦感。也有的數據在不多的情況下，可以將每行表格的顏色都設計得不一樣，以此來突出信息的不同。

4.文字組合的理論

文字的組合同樣需要理論來支撐，如果我們不懂理論，有很多時候文字看起來都會感到很奇怪，我們需要掌握文字的易讀性，并且理解文字需要表達的意思，在理論中加以變化，這樣就能很好地處理文字之間的關系。字體是會對畫面的效果產生重大影響的因素，如果選擇不當，往往會導致與主旨偏離的結果。

（1）選擇效果相稱的字體

設計中所使用的字體有許多不同的種類，數量非常龐大，根據不同的字體，為了向讀者展示不同的形態，需要仔細地體會各種字體的特點。而我們最常用的只有兩種字體，即宋體和黑體。

宋體更像是用筆寫出來的，手寫體的感覺更強烈，多用于閱讀量大又希望讀者平靜閱讀的地方，它被譽為具有歷史感的字體，它也可以用于大標題排版，因為會產生味道不同的高雅趣味，如下圖（左）所示。

黑體是沒有“提頓”的字體，豎畫與橫畫的粗細一致，常被用于表現時尚的效果和力量較強的效果，會給人帶來較強烈的印象，如下圖（右）所示。

技能拓展

設計字體的使用

除宋體和黑體兩種常用的字體外，還有很多與各類設計效果相配合的設計字體。當需要傳達某種獨特的效果時，如果靈活使用設計的字體效果是很好的。

（2）文字的統一和突出

在頁面中，有很多時候會包括許多功能相同的文字內容，在這種情況下，對每組一樣功能的文字都設定相同的字體是一條基本理論，這樣能保證畫面的統一性。如下圖所示，圓形圖標和文字大小組合都是相同的，表現為它們都屬于活動內容。

對于表現內容的不同，如果要明確地表現出標題與其他內容的區別，可以通過加粗加大字體、使用不同顏色、拉開標題與正文間的距離、為文字加邊框等方式來處理。下圖所示為使用加大加粗字體并添加描邊來突出表現的主要內容。

（3）文字的對齊和距離

文字對齊是文字組合中最基本的理論，只有將相關聯的文字與文字之間對齊，才能突顯出文字組合的統一感和整齊性，如下圖（左）所示，正文內容部分以左對齊的方式來排，顯得非常整齊。

控制好文字與文字之間的距離，是增強文字易讀性的標準。以行距的安排來說，一般閱讀量稍多的內容要保持約為文字大小的1.5～2倍，行的長度越短則行距可越小，隨著行的長度的拉長，行距也最好隨之擴大。如果是閱讀量低的文字組合，最好將行距或字距稍微設置得近一點，因為更近則統一感會更強，如下圖（右）所示。

技能拓展

字間距的設置

對于字間距來講，所占面積較小的字體，字間距看起來會較大。而相反所占面積較大的字體，字間距看起來會較小。所以，要根據所選字體的大小來設置字間距。

（4）巧妙地強調文字與閱讀順序

當文字放置的圖片底圖較為復雜時，可在底圖上添加一個白色底圖，再在白色底圖上添加文字，這樣就算在雜亂的背景中也能將文字突出顯示，如下圖（左）所示。

當文案中有大量的內容需要展示時，無論以圖文結合的方式展示還是以純文字展示，我們都可以先將內容進行分類整理，然后在每一個分類內容前加上數字序號1、2、3……，或者英文字母A、B、C…，這樣當讀者看到1或者A時，就會主動地去瀏覽下一個內容，如下圖（右）所示。