行業(yè)新聞
為你提供網(wǎng)站建設(shè)制作資訊、網(wǎng)站seo優(yōu)化知識、網(wǎng)站設(shè)計(jì)開發(fā)常見問題等。
網(wǎng)頁設(shè)計(jì)中的頁面寬度到底該如何決定?
日期:2020-07-20 11:04:43作者:小編瀏覽:
之前寫了有關(guān)網(wǎng)頁設(shè)計(jì)的一些問題,但有很多客戶都對網(wǎng)頁設(shè)計(jì)的頁面寬度提出了疑惑,我們今日就跟大家說說有關(guān)網(wǎng)頁尺寸的探討。
PC端的網(wǎng)頁設(shè)計(jì)針對許多從業(yè)UI設(shè)計(jì)行業(yè)的新手而言是個(gè)充滿挑戰(zhàn)的行業(yè),針對基礎(chǔ)的畫布建立、規(guī)格設(shè)定,都處在兩眼一抹黑的情況,許多網(wǎng)頁設(shè)計(jì)師在建立畫布的情況下,就已經(jīng)是第一個(gè)困惑的難題了。
特別是大家在網(wǎng)絡(luò)上找有關(guān)的問題時(shí),獲得的結(jié)果有多種多樣版本,而確實(shí)開發(fā)設(shè)計(jì)完成時(shí)又會碰到許多的難題,這也使大家更為的茫然。實(shí)際上針對網(wǎng)頁設(shè)計(jì)的頁面寬度設(shè)定是沒有絕對固定的值,是依據(jù)大家需求考慮的。
網(wǎng)頁設(shè)計(jì)的寬度關(guān)鍵分成二種:
定寬:內(nèi)容區(qū)域?qū)挾裙潭ú蛔?/span>
自適應(yīng):內(nèi)容區(qū)域?qū)挾雀S電腦瀏覽器轉(zhuǎn)變
定寬模式
定寬是我們在見到的絕大多數(shù)網(wǎng)頁設(shè)計(jì)中最普遍的一種方式,網(wǎng)頁寬度分別由:960px、980px、1190px、1200px、1210px、1400px,有些人見到這兒將會會有疑問,大家平常做的設(shè)計(jì)圖不是1024px、1280px、1366px的嗎?
在定義網(wǎng)頁頁面寬度時(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)頁設(shè)計(jì)的情況下用1920px寬的就可以呢?自然不是。
以我工作工作經(jīng)驗(yàn)而言,之前有講到很多企業(yè)還是大量應(yīng)用著1024px的電腦顯示屏,因此在界定網(wǎng)頁頁面寬度的情況下,它是要考慮到第一個(gè)要素,盡管那樣的機(jī)器設(shè)備在目前市面上早已非常少見了,可是大家網(wǎng)頁設(shè)計(jì)方案的情況下就需要以1024px的畫布來畫頁面。
由于在業(yè)務(wù)流程一切正常應(yīng)用的情況下,顯示屏屏幕分辨率假如低于畫布,內(nèi)容便會顯示信息不全,這樣會大大影響用戶瀏覽體驗(yàn)。
在1024px的狀況下,網(wǎng)頁頁面便是顯示信息不全的,同樣就等同于你為客戶做網(wǎng)站建設(shè)的網(wǎng)頁設(shè)計(jì),卻并沒有充分考慮他們的應(yīng)用感受,因此我們在考慮到設(shè)計(jì)網(wǎng)頁尺寸的情況下,實(shí)際要考慮到的是用戶顯示屏,而不是絕大多數(shù)網(wǎng)頁設(shè)計(jì)師常用的尺寸。
例如UI我國、站酷,因?yàn)檫@2個(gè)的網(wǎng)站的受眾人群全都是互聯(lián)網(wǎng)設(shè)計(jì),而這種群體的設(shè)備性能都相對性較為不錯(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)槭鼙娙巳嚎缍却?,因而他的機(jī)器設(shè)備就需要考慮全部機(jī)器設(shè)備,從最少的1024剛開始適用。
以企業(yè)的網(wǎng)頁制作為例子,在明確了1024寬為網(wǎng)頁設(shè)計(jì)尺寸,接下去要做便是明確主內(nèi)容的區(qū)域?qū)挸鰜?,我以前碰到的很普遍的問題便是兩側(cè)沒有留白,內(nèi)容會直接壓邊,可是大家看一下絕大多數(shù)的網(wǎng)站,在變小的區(qū)域低于1024寬時(shí),兩側(cè)會產(chǎn)生留白。
這個(gè)內(nè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ū)捚毡榈木蜁?950、970、990 等。在我們建立完詳細(xì)屏幕分辨率的畫布,再根據(jù)參照線的方法將內(nèi)容區(qū)域規(guī)劃出來即可。
有關(guān)柵格化今日也不過多闡釋了,有興趣愛好的可以去看一下有關(guān)柵格的資料內(nèi)容。
假如大家感覺繁雜,我們可以應(yīng)用第二種方式,也是非常簡單的方法:寬度尺寸 = 適用最小寬度 - 兩側(cè)留白。
這里就得到開頭所說的,為什么常見的網(wǎng)頁寬度分別為:960px、980px、1190px、1210px了。
自適應(yīng)方式
講完了定寬的方式,我們再來說說自適應(yīng)模式,這個(gè)分為兩種:響應(yīng)式網(wǎng)站和自適應(yīng)網(wǎng)站,首先我們先來說說說自適應(yīng)的網(wǎng)站。
它是依據(jù)你應(yīng)用的瀏覽機(jī)器設(shè)備來自動調(diào)試屏幕分辨率促使你看看的網(wǎng)頁頁面同樣,目地取決于以便符合用戶的瀏覽訪問。
是一個(gè)可以適配好幾個(gè)終端設(shè)備的網(wǎng)站,并不是為每一個(gè)終端設(shè)備做一個(gè)特殊版本的網(wǎng)站。通俗化的說,便是做一個(gè)網(wǎng)站可以融入多種多樣機(jī)器設(shè)備,而無需為每一個(gè)機(jī)器設(shè)備做一個(gè)特殊的版本,而且在不一樣的機(jī)器設(shè)備上展現(xiàn)的方式也會不一樣,可以為用戶提供更舒服的頁面和更強(qiáng)的瀏覽體驗(yàn)。
3、如何選擇
響應(yīng)式網(wǎng)站比較簡單,網(wǎng)頁設(shè)計(jì)師要是畫一個(gè)頁面就可以了,布局可以通過設(shè)定來自行調(diào)整。
而自適應(yīng)網(wǎng)頁設(shè)計(jì)師者要做兩個(gè)或是好幾套不一樣的網(wǎng)頁頁面,以考慮全部銷售市場客戶,例如移動端可能就需要再次設(shè)計(jì)了。
可是響應(yīng)式網(wǎng)站只合適非常簡單的設(shè)計(jì)風(fēng)格,應(yīng)對一些非常復(fù)雜的框架就比較難以達(dá)到了,因?yàn)榫窒掭^為大,具體新項(xiàng)目的開發(fā)設(shè)計(jì)銷售市場將會還比不上自適應(yīng)的網(wǎng)站,自適應(yīng)通常就考慮到幾類情況,不用長期性考慮到企業(yè)網(wǎng)站建設(shè)尺寸難題,因而你能發(fā)覺自適應(yīng)比響應(yīng)式網(wǎng)站會更合乎企業(yè)網(wǎng)站建設(shè)要求。
劃重點(diǎn)
決定我們設(shè)計(jì)尺寸是取決于我們的主要受眾用戶,而不是茫然的跟著別的設(shè)計(jì)師,還要考慮到適配等等問題,雖然是最基礎(chǔ)簡單的尺寸,也藏著很多的知識點(diǎn)。
文章關(guān)鍵詞: 響應(yīng)式網(wǎng)站設(shè)計(jì) 網(wǎng)站建設(shè) 網(wǎng)頁設(shè)計(jì) 自適應(yīng)網(wǎng)站設(shè)計(jì) 網(wǎng)站頁面設(shè)計(jì) 網(wǎng)站版式設(shè)計(jì) 網(wǎng)站設(shè)計(jì) 深圳網(wǎng)站制作 深圳網(wǎng)站設(shè)計(jì) 深圳網(wǎng)站建設(shè)公司
相關(guān)推薦新聞
2022年春節(jié)放假通知
日期:2022-01-21瀏覽:
怎么查看競爭者網(wǎng)站的狀況呢
日期:2021-08-20瀏覽:
為何有一些網(wǎng)站的快照更新長期性沒有被搜索引擎收錄呢
日期:2021-08-19瀏覽:
為何有一些網(wǎng)站的快照更新長期性沒有被搜索引擎收錄呢
日期:2021-08-19瀏覽:
互聯(lián)網(wǎng)推廣的必要性是什么
日期:2021-08-17瀏覽:
迅速提高互聯(lián)網(wǎng)推廣排名的方式
日期:2021-08-17瀏覽:
搞好SEO優(yōu)化的工作包括哪些呢
日期:2021-08-16瀏覽:
百度快照的消退針對優(yōu)化會出現(xiàn)什么影響呢
日期:2021-08-14瀏覽:
企業(yè)營銷推廣網(wǎng)站的方式有哪些
日期:2021-08-14瀏覽:
深圳網(wǎng)站建設(shè)中情況的作用與操作過程
日期:2021-08-13瀏覽:
具備感染力的官方網(wǎng)站要如何去制做
日期:2021-08-13瀏覽:
網(wǎng)站開發(fā)進(jìn)度不確定因素分為哪些
日期:2021-08-12瀏覽:
企業(yè)網(wǎng)站做常見設(shè)計(jì)風(fēng)格或是極簡風(fēng)格呢
日期:2021-08-12瀏覽:
建設(shè)網(wǎng)站需要花費(fèi)哪些費(fèi)用
日期:2021-08-10瀏覽:
網(wǎng)站改版應(yīng)當(dāng)要留意的普遍事宜
日期:2021-08-10瀏覽:
最新案例推薦
匯信國際品牌營銷推廣
電商倉儲 倉庫出租 電商小包代發(fā)貨
胖貓商城網(wǎng)站建設(shè)
電商行業(yè)微信商城開發(fā)制作案例
電商倉儲微信小程序開發(fā)
倉儲物流行業(yè)微信小程序官網(wǎng)制作案例
威盛自動化微信小程序開發(fā)
自動化設(shè)備行業(yè)微信小程序官網(wǎng)制作案例
SUNSOM響應(yīng)式網(wǎng)站建設(shè)
自動化設(shè)備行業(yè)外貿(mào)響應(yīng)式網(wǎng)站建設(shè)案例
金諾興辦公科技網(wǎng)站SEO優(yōu)化
辦公設(shè)備租賃行業(yè)網(wǎng)站建設(shè)及SEO推廣案例
匯信國際物流網(wǎng)站SEO優(yōu)化
倉儲物流行業(yè)網(wǎng)站建設(shè)及SEO推廣案例
迅瑞創(chuàng)芯品牌營銷推廣
IC行業(yè)--筑巢系統(tǒng)全網(wǎng)推廣案例