網(wǎng)頁設(shè)計中的頁面寬度到底該如何決定？

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

PC端的網(wǎng)頁設(shè)計針對許多從業(yè)UI設(shè)計行業(yè)的新手而言是個充滿挑戰(zhàn)的行業(yè)，針對基礎(chǔ)的畫布建立、規(guī)格設(shè)定，都處在兩眼一抹黑的情況，許多網(wǎng)頁設(shè)計師在建立畫布的情況下，就已經(jīng)是第一個困惑的難題了。

特別是大家在網(wǎng)絡(luò)上找有關(guān)的問題時，獲得的結(jié)果有多種多樣版本，而確實開發(fā)設(shè)計完成時又會碰到許多的難題，這也使大家更為的茫然。實際上針對網(wǎng)頁設(shè)計的頁面寬度設(shè)定是沒有絕對固定的值，是依據(jù)大家需求考慮的。

網(wǎng)頁設(shè)計的寬度關(guān)鍵分成二種：

定寬：內(nèi)容區(qū)域?qū)挾裙潭ú蛔?/p>

自適應(yīng)：內(nèi)容區(qū)域?qū)挾雀S電腦瀏覽器轉(zhuǎn)變

定寬模式

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

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

1、機器顯示屏設(shè)備

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

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

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

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

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

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

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

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

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

以企業(yè)的網(wǎng)頁制作為例子，在明確了1024寬為網(wǎng)頁設(shè)計尺寸，接下去要做便是明確主內(nèi)容的區(qū)域?qū)挸鰜?，我以前碰到的很普遍的問題便是兩側(cè)沒有留白，內(nèi)容會直接壓邊，可是大家看一下絕大多數(shù)的網(wǎng)站，在變小的區(qū)域低于1024寬時，兩側(cè)會產(chǎn)生留白。

這個內(nèi)容邊距要怎么定義呢，下面我們就來講到。

2、定義內(nèi)容區(qū)域

定義內(nèi)容區(qū)域有兩種方法，一種是用柵格：（ W =（a×n） （n-1）i ）獲得嚴(yán)謹(jǐn)實用的內(nèi)容寬。

這一作法便是根據(jù)將內(nèi)容區(qū)域規(guī)劃成多個內(nèi)容塊和間距模塊的方法，輔助大家排版設(shè)計。在這篇內(nèi)容里不做實際詳細介紹，只必須關(guān)心結(jié)果就可以。

假如挑選兼容 1280px，那麼設(shè)計方案內(nèi)容的地區(qū)寬一般 為 1180px、1190px。而在兼容 1024px下，那么內(nèi)容區(qū)域?qū)捚毡榈木蜁?950、970、990 等。在我們建立完詳細屏幕分辨率的畫布，再根據(jù)參照線的方法將內(nèi)容區(qū)域規(guī)劃出來即可。

有關(guān)柵格化今日也不過多闡釋了，有興趣愛好的可以去看一下有關(guān)柵格的資料內(nèi)容。

假如大家感覺繁雜，我們可以應(yīng)用第二種方式，也是非常簡單的方法：寬度尺寸 = 適用最小寬度 - 兩側(cè)留白。

這里就得到開頭所說的，為什么常見的網(wǎng)頁寬度分別為：960px、980px、1190px、1210px了。

自適應(yīng)方式

講完了定寬的方式，我們再來說說自適應(yīng)模式，這個分為兩種：響應(yīng)式網(wǎng)站和自適應(yīng)網(wǎng)站，首先我們先來說說說自適應(yīng)的網(wǎng)站。

1、自適應(yīng)網(wǎng)站

它是依據(jù)你應(yīng)用的瀏覽機器設(shè)備來自動調(diào)試屏幕分辨率促使你看看的網(wǎng)頁頁面同樣，目地取決于以便符合用戶的瀏覽訪問。

2、響應(yīng)式網(wǎng)站

是一個可以適配好幾個終端設(shè)備的網(wǎng)站，并不是為每一個終端設(shè)備做一個特殊版本的網(wǎng)站。通俗化的說，便是做一個網(wǎng)站可以融入多種多樣機器設(shè)備，而無需為每一個機器設(shè)備做一個特殊的版本，而且在不一樣的機器設(shè)備上展現(xiàn)的方式也會不一樣，可以為用戶提供更舒服的頁面和更強的瀏覽體驗。

3、如何選擇

響應(yīng)式網(wǎng)站比較簡單，網(wǎng)頁設(shè)計師要是畫一個頁面就可以了，布局可以通過設(shè)定來自行調(diào)整。

而自適應(yīng)網(wǎng)頁設(shè)計師者要做兩個或是好幾套不一樣的網(wǎng)頁頁面，以考慮全部銷售市場客戶，例如移動端可能就需要再次設(shè)計了。

可是響應(yīng)式網(wǎng)站只合適非常簡單的設(shè)計風(fēng)格，應(yīng)對一些非常復(fù)雜的框架就比較難以達到了，因為局限較為大，具體新項目的開發(fā)設(shè)計銷售市場將會還比不上自適應(yīng)的網(wǎng)站，自適應(yīng)通常就考慮到幾類情況，不用長期性考慮到企業(yè)網(wǎng)站建設(shè)尺寸難題，因而你能發(fā)覺自適應(yīng)比響應(yīng)式網(wǎng)站會更合乎企業(yè)網(wǎng)站建設(shè)要求。

劃重點

決定我們設(shè)計尺寸是取決于我們的主要受眾用戶，而不是茫然的跟著別的設(shè)計師，還要考慮到適配等等問題，雖然是最基礎(chǔ)簡單的尺寸，也藏著很多的知識點。

文章名稱：網(wǎng)頁設(shè)計中的頁面寬度到底該如何決定？
文章來源：http://www.muchs.cn/news/132906.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站設(shè)計、外貿(mào)建站、動態(tài)網(wǎng)站、域名注冊、企業(yè)網(wǎng)站制作、定制網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)