Web網(wǎng)頁設(shè)計(jì)尺寸，到底選哪個(gè)？

時(shí)間：2023-10-09 02:12:01 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2023-10-09 02:12:01 來源：網(wǎng)站運(yùn)營

Web網(wǎng)頁設(shè)計(jì)尺寸，到底選哪個(gè)？：

很多新手設(shè)計(jì)師都會(huì)面對(duì)一個(gè)問題，Web頁面尺寸寬度到底選哪個(gè)？

其實(shí)答案并不是固定的，可以做成1920，也可以做1280。黑客認(rèn)為最重要的決定因素在于你自己的工作電腦分辨率。

電腦屏幕尺寸

這是廣告公司AdDuplex送出的統(tǒng)計(jì)大數(shù)據(jù)

市面上的電腦屏幕尺寸多種多樣，不過大部分都集中在這幾種：

1920-1080：目前常用設(shè)備中最大的尺寸（Mac 5K屏除外）

1440-900：15寸MacBook Pro為代表，很多UI設(shè)計(jì)師首選

1366-768：普通的PC電腦

1280-800：13寸MacBook Pro為代表

在以上設(shè)備中，13寸和15寸Mac Book，雖然實(shí)際分辨率非常大，但由于是Retina屏幕，視覺展示上還屬于以上范圍。

所以，網(wǎng)站的內(nèi)容顯示寬度大部分都在1200px以內(nèi)，確保小的電腦屏幕能顯示全網(wǎng)頁內(nèi)容。更早的時(shí)候很多都是960px，不過由于屏幕越來越大，目前比較少。

網(wǎng)頁設(shè)計(jì)尺寸

在了解過電腦屏幕尺寸后，網(wǎng)頁設(shè)計(jì)尺寸（本文專指寬度，高度不限）選哪個(gè)也很清楚了：選哪個(gè)都不會(huì)錯(cuò)。

事實(shí)上很多設(shè)計(jì)師是這么做的：用小于1920的屏幕去設(shè)計(jì)1920的網(wǎng)頁。

這樣設(shè)計(jì)沒錯(cuò)，而且是很多培訓(xùn)機(jī)構(gòu)、學(xué)校的標(biāo)準(zhǔn)定義：網(wǎng)頁設(shè)計(jì)寬度尺寸是1920。

結(jié)合插件定義設(shè)計(jì)尺寸

但是如果你用了這個(gè)神器的Sketch插件，就不會(huì)按照之前的結(jié)論來設(shè)計(jì)了。

以前黑客有介紹過。 點(diǎn)擊查看

設(shè)計(jì)師在做界面的過程中需要經(jīng)常查看設(shè)計(jì)稿，以便及時(shí)修改設(shè)計(jì)細(xì)節(jié)。除非你用1920的屏幕可以設(shè)計(jì)1920尺寸，否則我們的設(shè)計(jì)尺寸和屏幕尺寸不相同，就會(huì)導(dǎo)致預(yù)覽的界面偏移，需手動(dòng)調(diào)節(jié)居中。

如果設(shè)計(jì)的尺寸和屏幕尺寸保持一致，那么插件預(yù)覽的效果就會(huì)完美，不用每次都要去調(diào)節(jié)。

總結(jié)

本質(zhì)上網(wǎng)頁設(shè)計(jì)尺寸選哪個(gè)都是正確的，關(guān)鍵在于怎么方便、快捷地幫助我們預(yù)覽、展示設(shè)計(jì)稿。

在利用sketch插件頻繁預(yù)覽的前提下，黑客建議網(wǎng)頁設(shè)計(jì)尺寸等于你的工作電腦屏幕尺寸，這會(huì)節(jié)約你很多時(shí)間。在設(shè)計(jì)后臺(tái)類的界面時(shí)，這個(gè)方法的優(yōu)勢(shì)會(huì)更加明顯。

最后有一點(diǎn)需要注意，在進(jìn)行切圖的時(shí)候，如果遇到全屏的圖，需要把切圖修改成1920，否則在1920電腦中切圖寬度會(huì)不足。不過到了切圖這一步，就屬于設(shè)計(jì)工作的后期了，我們只需要花點(diǎn)時(shí)間把對(duì)應(yīng)切圖改成1920即可。