2021-10-25 分類: 網站建設
之前寫了有關網頁設計的一些問題,但有很多客戶都對網頁設計的頁面寬度提出了疑惑,我們今日就跟大家說說有關網頁尺寸的探討。
PC端的網頁設計針對許多從業(yè)UI設計行業(yè)的新手而言是個充滿挑戰(zhàn)的行業(yè),針對基礎的畫布建立、規(guī)格設定,都處在兩眼一抹黑的情況,許多網頁設計師在建立畫布的情況下,就已經是第一個困惑的難題了。
特別是大家在網絡上找有關的問題時,獲得的結果有多種多樣版本,而確實開發(fā)設計完成時又會碰到許多的難題,這也使大家更為的茫然。實際上針對網頁設計的頁面寬度設定是沒有絕對固定的值,是依據大家需求考慮的。
網頁設計的寬度關鍵分成二種:
定寬:內容區(qū)域寬度固定不變
自適應:內容區(qū)域寬度跟隨電腦瀏覽器轉變
定寬模式
定寬是我們在見到的絕大多數網頁設計中最普遍的一種方式,網頁寬度分別由:960px、980px、1190px、1200px、1210px、1400px,有些人見到這兒將會會有疑問,大家平常做的設計圖不是1024px、1280px、1366px的嗎?
在定義網頁頁面寬度時,大家第一件事是考慮到大家的受眾群體用的顯示屏。
1、機器顯示屏設備
顯示屏基本都是以 1024px起始的,盡管這一屏幕分辨率的顯示設備早已很少了,大家就需要依據客觀原因考慮到自身要適用最低的屏幕分辨率。
例如如今普遍的PC屏幕分辨率有1280*800、1600*900、1440*800、1366*768、1920*1080,現階段而言機器設備中利用率數最多的是1920的。
那么大家是否在網頁設計的情況下用1920px寬的就可以呢?自然不是。
以我工作工作經驗而言,之前有講到很多企業(yè)還是大量應用著1024px的電腦顯示屏,因此在界定網頁頁面寬度的情況下,它是要考慮到第一個要素,盡管那樣的機器設備在目前市面上早已非常少見了,可是大家網頁設計方案的情況下就需要以1024px的畫布來畫頁面。
由于在業(yè)務流程一切正常應用的情況下,顯示屏屏幕分辨率假如低于畫布,內容便會顯示信息不全,這樣會大大影響用戶瀏覽體驗。
在1024px的狀況下,網頁頁面便是顯示信息不全的,同樣就等同于你為客戶做網站建設的網頁設計,卻并沒有充分考慮他們的應用感受,因此我們在考慮到設計網頁尺寸的情況下,實際要考慮到的是用戶顯示屏,而不是絕大多數網頁設計師常用的尺寸。
例如UI我國、站酷,因為這2個的網站的受眾人群全都是互聯網設計,而這種群體的設備性能都相對性較為不錯,因此他們網站最低滿足設備都是1366px起的。
一些企業(yè)設計的web智能管理系統(tǒng),運用的機器設備統(tǒng)一大概率全是 1440px寬之上的,因此大家在網絡上可以尋找的alipay和element的設計部件,機器設備尺寸是1440寬之上的。
也有一些朝向群體比較多的網址,例如淘寶網、京東商城等,因為受眾人群跨度大,因而他的機器設備就需要考慮全部機器設備,從最少的1024剛開始適用。
以企業(yè)的網頁制作為例子,在明確了1024寬為網頁設計尺寸,接下去要做便是明確主內容的區(qū)域寬出來,我以前碰到的很普遍的問題便是兩側沒有留白,內容會直接壓邊,可是大家看一下絕大多數的網站,在變小的區(qū)域低于1024寬時,兩側會產生留白。
這個內容邊距要怎么定義呢,下面我們就來講到。
2、定義內容區(qū)域
定義內容區(qū)域有兩種方法,一種是用柵格:( W =(a×n) (n-1)i )獲得嚴謹實用的內容寬。
這一作法便是根據將內容區(qū)域規(guī)劃成多個內容塊和間距模塊的方法,輔助大家排版設計。在這篇內容里不做實際詳細介紹,只必須關心結果就可以。
假如挑選兼容 1280px,那麼設計方案內容的地區(qū)寬一般 為 1180px、1190px。而在兼容 1024px下,那么內容區(qū)域寬普遍的就會有 950、970、990 等。在我們建立完詳細屏幕分辨率的畫布,再根據參照線的方法將內容區(qū)域規(guī)劃出來即可。
有關柵格化今日也不過多闡釋了,有興趣愛好的可以去看一下有關柵格的資料內容。
假如大家感覺繁雜,我們可以應用第二種方式,也是非常簡單的方法:寬度尺寸 = 適用最小寬度 - 兩側留白。
這里就得到開頭所說的,為什么常見的網頁寬度分別為:960px、980px、1190px、1210px了。
自適應方式
講完了定寬的方式,我們再來說說自適應模式,這個分為兩種:響應式網站和自適應網站,首先我們先來說說說自適應的網站。
1、自適應網站
它是依據你應用的瀏覽機器設備來自動調試屏幕分辨率促使你看看的網頁頁面同樣,目地取決于以便符合用戶的瀏覽訪問。
2、響應式網站
是一個可以適配好幾個終端設備的網站,并不是為每一個終端設備做一個特殊版本的網站。通俗化的說,便是做一個網站可以融入多種多樣機器設備,而無需為每一個機器設備做一個特殊的版本,而且在不一樣的機器設備上展現的方式也會不一樣,可以為用戶提供更舒服的頁面和更強的瀏覽體驗。
3、如何選擇
響應式網站比較簡單,網頁設計師要是畫一個頁面就可以了,布局可以通過設定來自行調整。
而自適應網頁設計師者要做兩個或是好幾套不一樣的網頁頁面,以考慮全部銷售市場客戶,例如移動端可能就需要再次設計了。
可是響應式網站只合適非常簡單的設計風格,應對一些非常復雜的框架就比較難以達到了,因為局限較為大,具體新項目的開發(fā)設計銷售市場將會還比不上自適應的網站,自適應通常就考慮到幾類情況,不用長期性考慮到企業(yè)網站建設尺寸難題,因而你能發(fā)覺自適應比響應式網站會更合乎企業(yè)網站建設要求。
劃重點
決定我們設計尺寸是取決于我們的主要受眾用戶,而不是茫然的跟著別的設計師,還要考慮到適配等等問題,雖然是最基礎簡單的尺寸,也藏著很多的知識點。
文章名稱:網頁設計中的頁面寬度到底該如何決定?
文章來源:http://jinyejixie.com/news/132906.html
成都網站建設公司_創(chuàng)新互聯,為您提供品牌網站設計、外貿建站、動態(tài)網站、域名注冊、企業(yè)網站制作、定制網站
聲明:本網站發(fā)布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創(chuàng)新互聯
猜你還喜歡下面的內容