首頁(yè)電商視覺(jué)設(shè)計(jì)技術(shù)文章正文

網(wǎng)頁(yè)設(shè)計(jì)尺寸規(guī)范及標(biāo)準(zhǔn)詳解，入門(mén)必看！

更新時(shí)間:2023年11月13日15時(shí)05分來(lái)源:傳智教育瀏覽次數(shù):

網(wǎng)頁(yè)設(shè)計(jì)尺寸是指在設(shè)計(jì)界面時(shí)的寬度和高度。在設(shè)計(jì)網(wǎng)頁(yè)時(shí)要考慮計(jì)算機(jī)屏幕的分辨率，以及瀏覽器的有效可視區(qū)域。當(dāng)下比較流行的屏幕分辨率分為1024x768px、1366x768px、1440x900px和1920x1080px等。

在設(shè)計(jì)網(wǎng)頁(yè)時(shí)，頁(yè)面的寬度盡量不要超過(guò)屏幕的分辨率，否則頁(yè)面將不能完全顯示(響應(yīng)式布局頁(yè)面除外)。

網(wǎng)頁(yè)設(shè)計(jì)尺寸一般根據(jù)寬度1920px的分辨率進(jìn)行設(shè)計(jì)，高度可根據(jù)內(nèi)容調(diào)整設(shè)置(普通企業(yè)網(wǎng)站3個(gè)屏幕高度以?xún)?nèi)最好）。在確定頁(yè)面寬度后，還要考慮版心尺寸。
版心是指頁(yè)面的有效使用面積，是主要元素以及內(nèi)容所在的區(qū)域。在設(shè)計(jì)網(wǎng)頁(yè)時(shí)，頁(yè)面尺寸寬度一般為1200~1920px。但是為了適配不同分辨率的顯示器，一般設(shè)計(jì)版心寬度為1000~1200px。例如，屏幕分辨率為1024×768px的瀏覽器，在瀏覽器內(nèi)有效可視區(qū)域?qū)挾葹?000px，所以最好設(shè)置版心寬度為1000px。設(shè)計(jì)師在設(shè)計(jì)網(wǎng)站時(shí)盡量適配主流的屏幕分辨率。下圖所示為某甜點(diǎn)網(wǎng)站頁(yè)面的版心和頁(yè)面寬度。

頁(yè)面寬度