很多新手設(shè)計(jì)師都會(huì)面對(duì)一個(gè)問(wèn)題凿掂，Web頁(yè)面尺寸寬度到底選哪個(gè)？
其實(shí)答案并不是固定的纹蝴，可以做成1920庄萎，也可以做1280。黑客認(rèn)為最重要的決定因素在于你自己的工作電腦分辨率塘安。
電腦屏幕尺寸
這是廣告公司AdDuplex送出的統(tǒng)計(jì)大數(shù)據(jù)
市面上的電腦屏幕尺寸多種多樣惨恭，不過(guò)大部分都集中在這幾種：
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屏幕免都，視覺(jué)展示上還屬于以上范圍锉罐。
所以，網(wǎng)站的內(nèi)容顯示寬度大部分都在1200px以?xún)?nèi)绕娘，確保小的電腦屏幕能顯示全網(wǎng)頁(yè)內(nèi)容脓规。更早的時(shí)候很多都是960px，不過(guò)由于屏幕越來(lái)越大险领，目前比較少侨舆。
網(wǎng)頁(yè)設(shè)計(jì)尺寸
在了解過(guò)電腦屏幕尺寸后，網(wǎng)頁(yè)設(shè)計(jì)尺寸（本文專(zhuān)指寬度绢陌，高度不限）選哪個(gè)也很清楚了：選哪個(gè)都不會(huì)錯(cuò)挨下。
事實(shí)上很多設(shè)計(jì)師是這么做的：用小于1920的屏幕去設(shè)計(jì)1920的網(wǎng)頁(yè)。
這樣設(shè)計(jì)沒(méi)錯(cuò)脐湾，而且是很多培訓(xùn)機(jī)構(gòu)臭笆、學(xué)校的標(biāo)準(zhǔn)定義：網(wǎng)頁(yè)設(shè)計(jì)寬度尺寸是1920。
結(jié)合插件定義設(shè)計(jì)尺寸
但是如果你用了這個(gè)神器的Sketch插件秤掌，就不會(huì)按照之前的結(jié)論來(lái)設(shè)計(jì)了愁铺。
以前黑客有介紹過(guò)。點(diǎn)擊查看
設(shè)計(jì)師在做界面的過(guò)程中需要經(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)頁(yè)設(shè)計(jì)尺寸選哪個(gè)都是正確的堵未，關(guān)鍵在于怎么方便腋舌、快捷地幫助我們預(yù)覽、展示設(shè)計(jì)稿渗蟹。
在利用sketch插件頻繁預(yù)覽的前提下块饺，黑客建議網(wǎng)頁(yè)設(shè)計(jì)尺寸等于你的工作電腦屏幕尺寸，這會(huì)節(jié)約你很多時(shí)間雌芽。在設(shè)計(jì)后臺(tái)類(lèi)的界面時(shí)授艰，這個(gè)方法的優(yōu)勢(shì)會(huì)更加明顯。
最后有一點(diǎn)需要注意世落，在進(jìn)行切圖的時(shí)候淮腾，如果遇到全屏的圖，需要把切圖修改成1920，否則在1920電腦中切圖寬度會(huì)不足谷朝。不過(guò)到了切圖這一步洲押，就屬于設(shè)計(jì)工作的后期了，我們只需要花點(diǎn)時(shí)間把對(duì)應(yīng)切圖改成1920即可圆凰。
更多UI設(shè)計(jì)干貨文章請(qǐng)關(guān)注UI黑客
微信公眾號(hào) uihacker
UI黑客官網(wǎng)http://www.uihacker.com/
UI黑客論壇http://bbs.uihacker.com/
