網頁設計中的頁面寬度到底該如何決定？

2021-10-25 分類：網站建設

之前寫了有關網頁設計的一些問題，但有很多客戶都對網頁設計的頁面寬度提出了疑惑，我們今日就跟大家說說有關網頁尺寸的探討。

PC端的網頁設計針對許多從業UI設計行業的新手而言是個充滿挑戰的行業，針對基礎的畫布建立、規格設定，都處在兩眼一抹黑的情況，許多網頁設計師在建立畫布的情況下，就已經是第一個困惑的難題了。

特別是大家在網絡上找有關的問題時，獲得的結果有多種多樣版本，而確實開發設計完成時又會碰到許多的難題，這也使大家更為的茫然。實際上針對網頁設計的頁面寬度設定是沒有絕對固定的值，是依據大家需求考慮的。

網頁設計的寬度關鍵分成二種：

定寬：內容區域寬度固定不變

自適應：內容區域寬度跟隨電腦瀏覽器轉變

定寬模式

定寬是我們在見到的絕大多數網頁設計中最普遍的一種方式，網頁寬度分別由：960px、980px、1190px、1200px、1210px、1400px，有些人見到這兒將會會有疑問，大家平常做的設計圖不是1024px、1280px、1366px的嗎？

在定義網頁頁面寬度時，大家第一件事是考慮到大家的受眾群體用的顯示屏。

1、機器顯示屏設備

顯示屏基本都是以 1024px起始的，盡管這一屏幕分辨率的顯示設備早已很少了，大家就需要依據客觀原因考慮到自身要適用最低的屏幕分辨率。

例如如今普遍的PC屏幕分辨率有1280*800、1600*900、1440*800、1366*768、1920*1080，現階段而言機器設備中利用率數最多的是1920的。

那么大家是否在網頁設計的情況下用1920px寬的就可以呢？自然不是。

以我工作工作經驗而言，之前有講到很多企業還是大量應用著1024px的電腦顯示屏，因此在界定網頁頁面寬度的情況下，它是要考慮到第一個要素，盡管那樣的機器設備在目前市面上早已非常少見了，可是大家網頁設計方案的情況下就需要以1024px的畫布來畫頁面。

由于在業務流程一切正常應用的情況下，顯示屏屏幕分辨率假如低于畫布，內容便會顯示信息不全，這樣會大大影響用戶瀏覽體驗。

在1024px的狀況下，網頁頁面便是顯示信息不全的，同樣就等同于你為客戶做網站建設的網頁設計，卻并沒有充分考慮他們的應用感受，因此我們在考慮到設計網頁尺寸的情況下，實際要考慮到的是用戶顯示屏，而不是絕大多數網頁設計師常用的尺寸。

例如UI我國、站酷，因為這2個的網站的受眾人群全都是互聯網設計，而這種群體的設備性能都相對性較為不錯，因此他們網站最低滿足設備都是1366px起的。

一些企業設計的web智能管理系統，運用的機器設備統一大概率全是 1440px寬之上的，因此大家在網絡上可以尋找的alipay和element的設計部件，機器設備尺寸是1440寬之上的。

也有一些朝向群體比較多的網址，例如淘寶網、京東商城等，因為受眾人群跨度大，因而他的機器設備就需要考慮全部機器設備，從最少的1024剛開始適用。

以企業的網頁制作為例子，在明確了1024寬為網頁設計尺寸，接下去要做便是明確主內容的區域寬出來，我以前碰到的很普遍的問題便是兩側沒有留白，內容會直接壓邊，可是大家看一下絕大多數的網站，在變小的區域低于1024寬時，兩側會產生留白。