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

筱涵|Hannah-avatar-img
發佈於網頁一角 個房間
更新於 發佈於 閱讀時間約 5 分鐘

前言


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

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

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


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


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


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


◆ 人工留空

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

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

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

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


◆ 適當模糊

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

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


◆ 調整光影與色調

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

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


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

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

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


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


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

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


分割類型編排示意圖

分割類型編排示意圖

1、分割、拼接型


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


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


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

誠品廣告截圖 - 飾品折扣優惠

誠品廣告截圖 - 飾品折扣優惠

誠品廣告截圖 - 2022林務局月曆

誠品廣告截圖 - 2022林務局月曆




破格類型編排示意圖

破格類型編排示意圖

2、局部破格處理


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


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


新視野樣版 - 航空產業大圖截圖

新視野樣版 - 航空產業大圖截圖

誠品廣告截圖 - 德國品牌文具

誠品廣告截圖 - 德國品牌文具

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

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




圖文置中編排示意圖

圖文置中編排示意圖

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


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

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


台南新營文化中心 - 劉耿《自畫像》展覽截圖

台南新營文化中心 - 劉耿《自畫像》展覽截圖

誠品廣告截圖 - 織品廣告 - 綜合運用(破格+置中編排)

誠品廣告截圖 - 織品廣告 - 綜合運用(破格+置中編排)

月之戀人 - 廣告截圖

月之戀人 - 廣告截圖



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


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

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

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

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

Canva - 搜尋Banner後的局部截圖

Canva - 搜尋Banner後的局部截圖

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

Canva - 搜尋Banner後的局部截圖

Canva - 搜尋Banner後的局部截圖

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


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


結尾


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


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


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


※本文所使用的截圖僅為設計分析和示意用途,無商業使用意圖。
※如有侵權或您不希望被展示於文章內,請與我聯繫,我會立即移除相關內容,謝謝。
留言
avatar-img
留言分享你的想法!
avatar-img
筱涵|Hannah的沙龍
8.7K會員
41內容數
二寶媽用瑣碎的時間來寫寫字,紀錄工作和興趣。
2025/03/14
在設計完成之後,提供的檔案格式都會因為情況而有不同,認識到差別,才能掌握到設計之外的細節,本篇文章將簡單介紹最常見的 6 種圖像格式,以及其他檔案交付格式、瀏覽器相容性查詢工具Can I use。
Thumbnail
2025/03/14
在設計完成之後,提供的檔案格式都會因為情況而有不同,認識到差別,才能掌握到設計之外的細節,本篇文章將簡單介紹最常見的 6 種圖像格式,以及其他檔案交付格式、瀏覽器相容性查詢工具Can I use。
Thumbnail
2025/01/02
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
Thumbnail
2025/01/02
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
Thumbnail
2024/12/13
2024/12/13
看更多
你可能也想看
Thumbnail
大家好,我是一名眼科醫師,也是一位孩子的媽 身為眼科醫師的我,我知道視力發展對孩子來說有多關鍵。 每到開學季時,診間便充斥著許多憂心忡忡的家屬。近年來看診中,兒童提早近視、眼睛疲勞的案例明顯增加,除了3C使用過度,最常被忽略的,就是照明品質。 然而作為一位媽媽,孩子能在安全、舒適的環境
Thumbnail
大家好,我是一名眼科醫師,也是一位孩子的媽 身為眼科醫師的我,我知道視力發展對孩子來說有多關鍵。 每到開學季時,診間便充斥著許多憂心忡忡的家屬。近年來看診中,兒童提早近視、眼睛疲勞的案例明顯增加,除了3C使用過度,最常被忽略的,就是照明品質。 然而作為一位媽媽,孩子能在安全、舒適的環境
Thumbnail
我的「媽」呀! 母親節即將到來,vocus 邀請你寫下屬於你的「媽」故事——不管是紀錄爆笑的日常,或是一直想對她表達的感謝,又或者,是你這輩子最想聽她說出的一句話。 也歡迎你曬出合照,分享照片背後的點點滴滴 ♥️ 透過創作,將這份情感表達出來吧!🥹
Thumbnail
我的「媽」呀! 母親節即將到來,vocus 邀請你寫下屬於你的「媽」故事——不管是紀錄爆笑的日常,或是一直想對她表達的感謝,又或者,是你這輩子最想聽她說出的一句話。 也歡迎你曬出合照,分享照片背後的點點滴滴 ♥️ 透過創作,將這份情感表達出來吧!🥹
Thumbnail
當今的數位設計世界裡,清晰地呈現視覺元素是至關重要的。無論是在創建網站、設計海報,還是製作社交媒體內容,精準地移除圖像背景或不必要的像素,可以顯著提升作品的視覺效果和專業度。本文將介紹幾種在Adobe Photoshop中去除背景的高效方法,以及如何在Adobe Illustrator和InDesi
Thumbnail
當今的數位設計世界裡,清晰地呈現視覺元素是至關重要的。無論是在創建網站、設計海報,還是製作社交媒體內容,精準地移除圖像背景或不必要的像素,可以顯著提升作品的視覺效果和專業度。本文將介紹幾種在Adobe Photoshop中去除背景的高效方法,以及如何在Adobe Illustrator和InDesi
Thumbnail
排版視覺調整的重要性及基本原則 在印刷排版的藝術中,視覺調整是一項不可或缺的技術。它的核心在於如何讓每一行文字更加協調、美觀,同時確保整體版面的和諧。這種調整可以分為兩類:「段落視覺調整」和「單行視覺調整」。段落視覺調整專注於整個段落的文字排列,而單行視覺調整則聚焦於單獨一行的調整。兩者各有特點,
Thumbnail
排版視覺調整的重要性及基本原則 在印刷排版的藝術中,視覺調整是一項不可或缺的技術。它的核心在於如何讓每一行文字更加協調、美觀,同時確保整體版面的和諧。這種調整可以分為兩類:「段落視覺調整」和「單行視覺調整」。段落視覺調整專注於整個段落的文字排列,而單行視覺調整則聚焦於單獨一行的調整。兩者各有特點,
Thumbnail
本文介紹四種簡單有效的設計方法,包括使用幾何圖形填滿空白、重複使用文字填充版面、用十字線引導視覺、用對角線創造動感。這些方法可以有效解決版面太空的問題。舉例證明瞭這些方法在海報設計和網站設計中的應用。最後作者鼓勵讀者去摸索嘗試,提供自己的設計風格,並同時推薦了使用社群繪畫經營工具的人參考。
Thumbnail
本文介紹四種簡單有效的設計方法,包括使用幾何圖形填滿空白、重複使用文字填充版面、用十字線引導視覺、用對角線創造動感。這些方法可以有效解決版面太空的問題。舉例證明瞭這些方法在海報設計和網站設計中的應用。最後作者鼓勵讀者去摸索嘗試,提供自己的設計風格,並同時推薦了使用社群繪畫經營工具的人參考。
Thumbnail
有些人會將排版定義為各種視覺元素,例如是文字、形狀、圖片,各自在平面空間上的相對位置,帶來的視覺和閱讀效果。在平面上的X和Y座標以外,我們可考慮一下Z座標,視覺元素之間的重疊,能帶來甚麼互補。要是你看膩了左圖右字的穩定型排版,或是漸變遮罩的圖文配合,透過個案分析與練習,為知識庫增加多一種版型吧。
Thumbnail
有些人會將排版定義為各種視覺元素,例如是文字、形狀、圖片,各自在平面空間上的相對位置,帶來的視覺和閱讀效果。在平面上的X和Y座標以外,我們可考慮一下Z座標,視覺元素之間的重疊,能帶來甚麼互補。要是你看膩了左圖右字的穩定型排版,或是漸變遮罩的圖文配合,透過個案分析與練習,為知識庫增加多一種版型吧。
Thumbnail
先將拍好的照片裁切適當大小 2.調亮度/對比 3.色彩飽和度 (偏暖色系視覺會較好看) 4.用圈選工具將商品圈出 5.圈選後---反選 6.濾鏡/模糊/動態模糊 (使商品凸顯出來)
Thumbnail
先將拍好的照片裁切適當大小 2.調亮度/對比 3.色彩飽和度 (偏暖色系視覺會較好看) 4.用圈選工具將商品圈出 5.圈選後---反選 6.濾鏡/模糊/動態模糊 (使商品凸顯出來)
Thumbnail
簡報的靈魂是「重點」;打造重點靠「對比」! 但PPT 不是專業設計軟體, 想把一張照片的某區域, 拉高視覺能見度, 真的不容易辦到! 後來,我才明白,一個有趣的組合: 圖片或材質填滿+ 投影片背景填滿,幫我打開了簡報設計的另一番小天地。
Thumbnail
簡報的靈魂是「重點」;打造重點靠「對比」! 但PPT 不是專業設計軟體, 想把一張照片的某區域, 拉高視覺能見度, 真的不容易辦到! 後來,我才明白,一個有趣的組合: 圖片或材質填滿+ 投影片背景填滿,幫我打開了簡報設計的另一番小天地。
Thumbnail
如果你真心要透過圖片傳達你要說的事,千萬不要忽略「能不能讓人一眼就看到訊息」這件事!
Thumbnail
如果你真心要透過圖片傳達你要說的事,千萬不要忽略「能不能讓人一眼就看到訊息」這件事!
Thumbnail
平面設計概念與簡報設計息息相關,沒有設計背景的上班族其實也可以輕鬆地應用起來。設計理念並不是互相排斥的獨立原則,幾種理念可以在同一頁投映片中互補合作,讓觀眾有序地理解和接收到你想傳遞的訊息。承接上文,就讓我們來看一下,接近性、圍繞性、主體/ 背景以及留白,如何把這幾種設計理念帶進你下一份簡報之中吧。
Thumbnail
平面設計概念與簡報設計息息相關,沒有設計背景的上班族其實也可以輕鬆地應用起來。設計理念並不是互相排斥的獨立原則,幾種理念可以在同一頁投映片中互補合作,讓觀眾有序地理解和接收到你想傳遞的訊息。承接上文,就讓我們來看一下,接近性、圍繞性、主體/ 背景以及留白,如何把這幾種設計理念帶進你下一份簡報之中吧。
Thumbnail
在初學網頁排版的時候,文字、段落、列表的排版可以說是比較好上手的,只要稍微透過margin、padding、border及文字顏色上調整,就可以輕易獲得一段美美的文字。 然而要去調整圖片的大小及其他相關效果,就不是那麼容易的一件事了,往往在開發時,都會出現圖片效果不如自己預期的狀況。
Thumbnail
在初學網頁排版的時候,文字、段落、列表的排版可以說是比較好上手的,只要稍微透過margin、padding、border及文字顏色上調整,就可以輕易獲得一段美美的文字。 然而要去調整圖片的大小及其他相關效果,就不是那麼容易的一件事了,往往在開發時,都會出現圖片效果不如自己預期的狀況。
Thumbnail
當我們在設計商業廣告時,時常會遇到以照片為主的廣告,而這種類型的廣告,通常是以大面積的照片,搭配上一些簡單的字句,作為主要傳遞情境氛圍的方式,所以照片該如何擺放,在整體的排版構圖上,就顯得非常重要。
Thumbnail
當我們在設計商業廣告時,時常會遇到以照片為主的廣告,而這種類型的廣告,通常是以大面積的照片,搭配上一些簡單的字句,作為主要傳遞情境氛圍的方式,所以照片該如何擺放,在整體的排版構圖上,就顯得非常重要。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News