精選文章

網頁 Banner 尺寸該多寬?讓你一次跟設計師溝通好的完整教學!
PanDa:躍遷實踐者
PanDa:躍遷實踐者

網頁 Banner 尺寸該多寬?讓你一次跟設計師溝通好的完整教學!

目錄

你是否知道如何跟設計師溝通「網頁 Banner 尺寸」呢?無論是外包製作網站、自行使用 WordPress、Wix 等服務架站,都會面臨需要製作頁首(Header)圖片而與設計師溝通的情境,或在商務中有 Banner 圖片(橫幅廣告、橫幅圖片)的製作需求,讓許多人為此而困擾。

鑒於網路上現有中文資訊都過於老舊,本篇將讓你用 3 分鐘學會如何跟設計師、外包製作團隊溝通,網頁 Banner 尺寸究竟該如何調整。

設計的超基礎知識

網頁圖片尺寸的單位

不同的場景都需有不同的單位,氣溫有華氏跟攝氏度,重量則有公斤、公克、臺斤等,而因為製作網路圖片等素材,會依據不同裝置而有不同大小,所以我們用的單位不會是幾公分、幾公尺,而是用幾像素(Pixel)來衡量。

什麼是像素?簡單理解Pixel是什麼

像素(Pixel)又常見縮寫成 Pixel ,它是螢幕呈現畫面的最小單位。

例如我們說電腦解析度是 1920*1080 ,就代表這個畫面是由 1920 x 1080 個小點組成,相較於 800 * 600 的解析度(小點數量較少),就可以知道 1920*1080 顯示的會比較細膩、豐富。

所以我們之所以要理解「網頁 Banner 尺寸」、「網頁首圖(Header)」,就是為了能以最小的體積,讓潛在消費者跟用戶能有最好的視覺體驗,不會看到醜醜、粗糙的圖片。

溝通網頁圖片尺寸實務

電腦的網頁 Banner 尺寸該多寬?

以橫幅滿版而言,製作寬度為 1920 px 的圖片,即可讓 97.98 % 以上的用戶有完美體驗。若是想要更進一步,則可以將網頁 Banner 尺寸寬度製作為 2560 px 。 

從2020年到2021年的電腦解析度,可用來參考製作網頁 Banner 尺寸。
統計網站 Statcounter 中的電腦解析度,可用來參考製作網頁 Banner 尺寸。

那麼,圖片尺寸該多高?

這就取決於你想要呈現 Banner 比例,有人想要做的窄一些、有人想要做成佔滿整個螢幕,因此網頁圖片高度就很因人而異。

不過若要製作滿版的圖片,基本上電腦(桌機、筆電皆相同)目前都是 16:9 的螢幕,所以 1920 px 寬度的話,不到 1080 px 的高度就可以達到滿版效果,2560 px 寬度則是 1440 px 內即可。

為何要說「以內」?

因為考量到瀏覽器上方會有其他元素(頁籤列、網址列、書籤列…等),實務上若你的網站Banner 不是那種自動跳出覆蓋全螢幕的,螢幕的高度都會被上述的元素吃掉一部分,可以用較少的像素達成滿版效果。

手機的網頁 Banner 尺寸該多寬?

以頁首(Header)需求來說,原則上電腦、手機、平板都用同一張圖即可,不過若是因為以下兩點原因,則需要了解手機的網頁 Banner 尺寸。

1. 希望加快裝置載入速度 

2. 想獨立分別設計不同裝置的 Banner 或頁首

統計網站中的手機解析度,可用來參考製作網頁 Banner 尺寸。
統計網站 Statcounter 中的手機解析度,可用來參考製作手機網頁 Banner 尺寸。

各家手機的長寬比例、解析度都有非常大的差異,使用寬度 428 px 的設計,基本上能解決 99 % 以上的使用場景。

或是你如果真的很在意、擔心未來幾年不知道解析度會如何變化,就直接做個寬度 500 px的吧。 

平板的網頁 Banner 尺寸該多寬?

平板(Tablet PC)滿版寬度可以使用 1024 px,高度同樣針對想要呈現的樣式個別設定。

如果你在遙遠的未來看到這篇文

用統計網站查詢現行網頁尺寸/網站尺寸

如果你在三、五年後(例如 2027 年之後)看到這篇文,很可能適用的網頁設計尺寸又改變了(可能到時候解析度更高?)就上網查目前螢幕最大的解析度,照最大的做準沒錯。

用 Adobe 查詢主流尺寸

把 Adobe XD 打開,會跳出目前主要的畫布尺寸,可以直接參考。

直接用XD來看主流設計尺寸
直接用XD來看主流設計尺寸

本篇數據引用自統計網站 Statcounter

免費獲取:
全方位自傳攻略懶人包

更多推薦文章

回到頂端