關於網頁Banner的三種版面編排方式

前言

在之前的文章，講到了網頁Banner的四種類型，當時以用途、目的作為分類。

這篇的主題是觀察平台的處理手法，去看看各式平台運用的有哪些設計技法。

希望能用這樣的分類方式，增加觀察與鑑賞設計的方式。

一、聚焦畫面主題的常用技法

為了讓人們的視覺能依照編排設計所期望的動線閱讀，設計師會運用一些方式，讓畫面主題能被聚焦，重點被突出。

在觀察版面編排之前，認識常用技法，能讓人更看得懂設計師做了什麼：

◆ 人工留空

有時候圖片本構圖較為複雜，不適合直接拿來編排，但客戶又強烈希望用某張圖當底圖，這個時候需要溝通討論——是畫面中的「什麼東西」吸引了客戶？

假設客戶是傢俱選品商，客戶因為「商品相似度」而表示必須要使某一張圖，那這時候設計師可以針對畫面內容做一些「整理」。

以下為範例，假設左圖是原本的素材，右邊是被處理過的樣子。

將素材圖片中不需要的東西移除、裁剪需要的角度、讓畫面有更多空白可以做編排......習慣用這種方式看待素材的話，會運用得更得心應手。

◆ 適當模糊

有很多的商品特寫素材都已幫設計師規劃好景深，但有時候難免還是會收到沒有任何景深的原始照片，這個時候正是發揮「模糊」的好時機，並適當運用濾鏡將整體色調一起調整過，能得到更合適的畫面。

調整後，除了石頭前景，其它都變得稍微模糊又暗了些，模糊後的地方會更適合擺放文字。

◆ 調整光影與色調

有時候我們會運用不同的素材，為了避免讓整體看起來混亂，將圖片的色溫整理一下，讓畫面的色調更有整體感，能更輕鬆地營造出需要的編排氛圍。

調整後的圖片帶了一點復古暖色調，並在圖片上方、下方加上比較暗的濾鏡，讓視覺能更集中於人物手上物件與動作，讓整張更「穩」一些。

以上三個方法在運用素材時非常好用，也能組合運用。

當擁有的設計武器越多，在編排時就能具有快速構圖的眼光與執行力。

接下來就看看編排的類型吧~

二、商業Banner常見的三種版面編排類型

若能因為上面的技法而有一張完美的底圖，會讓編排設計輕鬆一些。

但很多時候，客戶提供的圖片沒辦法撐起滿版的區塊，這個時候除了用AI人工智慧去生成延伸背景之外，設計師也能運用一些版面編排技巧，達成客戶的需求：

1、分割、拼接型

這種版面通常將圖片區塊進行明確的分割或拼接，能讓客戶選擇多張不同的圖片，達到讓人理解「服務項目」的目的，這種設計手法受歡迎且很常見。

比如居家清潔包含著「除蟲」和「打掃」兩種服務，那就可以利用拼接的方式，放上兩種圖片，將訊息透過圖像完整傳達。

以下是一些實際的截圖，感受一下讓畫面豐富的拼接方式😆

2、局部破格處理

此類型的設計特色是稍微讓圖片破格，讓排版看起來有一點不規則感，創造視覺焦點之外，可以強調某一產品想被突出的資訊。

常用於有明確商品、人物的商業編排，能讓客戶感覺到自己的圖片「被設計處理過」，將使用者目光迅速聚焦到「某個破格處理過」的區域，達到顯眼、引人注目的效果。

人物破格出框的範例在選舉、講座相關的文宣都很常見。

避免文章失焦，範例圖就用孔劉吧 世界和平

3、中心佈局(圖文置中)

這種設計方式主要是將「圖像和文字」在版面上置於中心，形成對稱或居中的排版，這種構圖會在視覺平衡的情況下，強調主題重點，常用於傳達較為簡單俐落的資訊。

會同時跟很多技法一起出現，讓版面編排具有更多豐富感。

三、在Canva上面常見的版面編排類型

Canva是個一直在進步的平台，它讓設計變成一件更簡單的事情。

新鮮人能利用它做出不錯的設計，有經驗的設計師其實也能從上面獲得不少靈感。

但上面有太多的編排，還是建立在「漂亮底圖搭配英文主標才會好看」的前提上。

在這個情況下，設計師就需要多留意底圖的選擇。

若客戶本身圖片條件不夠，那可以多利用類似下圖的應用方式：

在「只有一張圖片」的情況下，Canva有很多造型框的搭配方式，利用一個主要色調背景(漸層色或純色)，搭配幾何元素與一個圖片框。

圖片不需要高解析度，且縮減圖片露出的範圍，以背景顏色與協調的編排為主要方向做設計，這能讓圖片條件不夠的案件也能有良好的呈現。

結尾

版面設計一直都充滿可能性，以上所提到的編排類型只會是設計的冰山一角。

在追求好看的編排方式時，設計師或許可以換個角度去思考「是否友善閱讀」、「客戶條件是否足夠」，這些都是能讓修改次數減少，讓設計成果更有共識的方式。

希望這樣的整理能為設計師帶來一些靈感~

※本文所使用的截圖僅為設計分析和示意用途，無商業使用意圖。

※如有侵權或您不希望被展示於文章內，請與我聯繫，我會立即移除相關內容，謝謝。