在正式开发网站之前,一般会先画出网页完成后的最终界面视觉效果,这是一张没有网页功能的图片,我们称之为页设计稿或网页设计效果图。在正式开发的时候,会依据这个效果图做出真正的网页。每一个网页都有它的尺寸和规格,即网页的内容区的宽度,高度一般是可以无限延长的。网页的规格实际上并没有一个标准,主要是以目前流行的显示器分辨率和客户需求为依据。
2000年左右,17英寸显示器是主流,使用量最多的分辨率宽度是1024像素、1280像素、1440像素,那时的移动端网页还没有普及,所以只需要考虑电脑端的需求。考虑到浏览器左右两侧占用的宽度,于是1004像素网页内容区宽度成为当时页设计最常采用的规格。
PC端显示器使用量排行
(本图摘自网络)
现在,19英寸显示器几乎已经淘汰,20英寸、22英寸甚至更大的显示器成为主流,据权威统计,在包括电脑、平板、手机、电视等所有分辨率中,1920 X 1080是目前使用量最多的分辨率,占比达23.89%。随着移动互联网的到来,设计网页时,不得不考虑移动端用户的使用情况,因此,响应式布局技术迅速普及,至今几乎所有网站都同时具备了PC端和移动端浏览的能力。因此,在网页设计规格上也发生了区大的变化。为了适应所有不同尺寸的浏览器,1200像素和1500像素规格的网页内容区规格成为我们设计网页的主要参考标准,如下图所示:
网页设计效果图的尺寸规格示意图
以1920像素分辨率的电脑为参考,主体内容区控制在中间1500像素以内,同时采用响应式布局技术,实现根据不同浏览设备尺寸进行自适应的能力。也可以这样理解,当用户设备分辨率大于1500像素时,网页内容区最大宽度为1500像素,哪怕是在分辨率高于1920像素的屏幕下。当用户设备分辨率小于1500像素时,自适应机制自动启动,将根据用户设备分辨率进行适应性改变网页的排版,从而实现一个网站多端适应的能力。
就像本文一开始强调的,网页设计效果图并没有一个既定的标准,应该结合当前主流设备的分辨率及用户需求进行设计。尽管当前主流分辨率为1920 X 1080像素,但是内容区宽度规格也并不一定要设计成1200像素或1500像素,只要你喜欢,可以设计成任何你想要的规格,当然,最好还是听一听网页设计师的专业建议。