網(wǎng)頁設(shè)計維度與標(biāo)準(zhǔn)詳解
  • 更新時間:2024-12-25 02:30:02
  • 網(wǎng)站建設(shè)
  • 發(fā)布時間:1年前
  • 277

1.屏幕分辨率寬度

我們只看PC端,根據(jù)當(dāng)前屏幕尺寸的分布統(tǒng)計(下圖是百度流量研究所最新數(shù)據(jù))

https://pic4.zhimg.com/80/v2-9d952eba7e5ea9857a1960e40902faa3_hd.jpg

在建站過程中,大部分屏幕的分辨率都超過了1366*768。這是屏幕越來越大的趨勢。幾年前,我們還需要考慮非常常見的1024*768分辨率下的顯示效果。無需單獨處理。

此分辨率值只是一個上限參考值。你不能把頁面的實際顯示內(nèi)容區(qū)域(或安全區(qū)域)取到這個值,因為在Windows等一些瀏覽器上,滾動條也占了寬度,同時又被過度粘貼了。設(shè)計上不建議使用邊緣。

tyle="font-family:Calibri,sans-serif">理解了這個我們就能清楚的知道一個基準(zhǔn)值的參考范圍。

2. 柵格與響應(yīng)式設(shè)計

這里需要理解一個概念,通常為了布局方便我們將內(nèi)容區(qū)域劃分為12或者24格,并在柵格間增加通用間距來處理絕大多數(shù)情況下的垂直排列問題,12或24的好處是能夠被2、3、4整除,更方便來處理2:1,1:2:1等常見間距。

https://pic2.zhimg.com/80/v2-6885900bd2d6397799416c7c31f92d5b_hd.jpg

計算方式(我這里常見的是處理企業(yè)級的設(shè)計頁面)

https://pic2.zhimg.com/80/v2-4f641ed1a6c36e1d99d06783ead4c6f0_hd.jpg

到這里基本上就知道為什么我們常見的值會是1180(1200減去兩邊柵格的留白)。這個值叫做典型設(shè)計參照,以往的設(shè)計平面稿是沒辦法動態(tài)適配各種寬度的,用典型值來作為設(shè)計稿基準(zhǔn)尺寸能夠表達(dá)典型效果,并在頁面實現(xiàn)時更容易還原。

響應(yīng)式布局是最近幾年比較流行的概念,在網(wǎng)頁渲染時,能夠根據(jù)視窗寬度自動對 Layout 及頁面元素進(jìn)行重新排列。比較常見的 Bootstrap 響應(yīng)式部分的介紹:

圖標(biāo)

以及柵格部分的詳細(xì)描述:

圖標(biāo)

下面這張圖給出了 Bootstrap 的常見屏幕狀態(tài)下的幾個典型值:

https://pic3.zhimg.com/80/v2-7a82f8fbc1ad374f96cd5fcb097779b3_hd.jpg


關(guān)于網(wǎng)頁字體大小等問題,也可以參考上面比較經(jīng)典的設(shè)計規(guī)范約定。常見的內(nèi)容段落文字大小約定為 14px。我這邊在做的規(guī)范,關(guān)于排版的約定如下:

https://pic3.zhimg.com/80/v2-c7a0d61b2701f2a8310926271c3017cd_hd.jpg

我們專注高端建站,小程序開發(fā)、軟件系統(tǒng)定制開發(fā)、BUG修復(fù)、物聯(lián)網(wǎng)開發(fā)、各類API接口對接開發(fā)等。十余年開發(fā)經(jīng)驗,每一個項目承諾做到滿意為止,多一次對比,一定讓您多一份收獲!

本文章出于推來客官網(wǎng),轉(zhuǎn)載請表明原文地址:https://www.tlkjt.com/web/11882.html
推薦文章

在線客服

掃碼聯(lián)系客服

3985758

回到頂部