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

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

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

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

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

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

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

定寬模式

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

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

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

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

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

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

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

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

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

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

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

也有一些朝向群體比較多的網(wǎng)址，例如淘寶網(wǎng)、京東商城等，因?yàn)槭鼙娙巳嚎缍却螅蚨臋C(jī)器設(shè)備就需要考慮全部機(jī)器設(shè)備，從最少的1024剛開(kāi)始適用。

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

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

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

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

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

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

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

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

這里就得到開(kāi)頭所說(shuō)的，為什么常見(jiàn)的網(wǎng)頁(yè)寬度分別為：960px、980px、1190px、1210px了。

自適應(yīng)方式

講完了定寬的方式，我們?cè)賮?lái)說(shuō)說(shuō)自適應(yīng)模式，這個(gè)分為兩種：響應(yīng)式網(wǎng)站和自適應(yīng)網(wǎng)站，首先我們先來(lái)說(shuō)說(shuō)說(shuō)自適應(yīng)的網(wǎng)站。

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

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

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

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

3、如何選擇

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

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

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

劃重點(diǎn)

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

文章名稱：網(wǎng)頁(yè)設(shè)計(jì)中的頁(yè)面寬度到底該如何決定？
文章來(lái)源：http://www.bm7419.com/news/132906.html

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

廣告

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