×

PC端网页尺寸设计一

96
ailsaliu
2015.06.15 12:01* 字数 1040

最近要写UI设计规范,先研究一下网页设计里的尺寸问题。

一、分辨率

网页设计的尺寸主要和两个因素有关,一个是电脑显示器的分辨率,还有浏览器的分辨率,其实还有一些操作系统,Windows或者Mac os或者其他的。什么叫分辨率呢,比如说1024×768的,就是横向有1024个像素,竖向有768个像素,整个屏幕可以看成是一个象棋盘,屏幕的尺寸是14寸还是15寸的,这个尺寸是不会变的,电脑是多大就是多大,变化的是电脑设置的分辨率,如果相同尺寸的屏幕,分辨率越大画面就越精细,比如我的电脑,如下图:

第一张,分辨率是800×600的,显而易见,图标变得特别大,特别模糊,第二张是1920×1080的,看起来正合适,因为我的电脑分辨率就是这个,电脑是多少寸的就是指屏幕的对角线长度,再有,如果两台设备都是19寸的,16:9和4:3的屏也是不一样的,4:3的较大一些。

在这普及一个小知识,寸和英寸的换算,英寸是英式的,寸是中式的,1英寸=2.54厘米,1寸等于3.3厘米,1英寸=0.762寸。

二、有效可视区域

当下比较流行的屏幕分辨率有1024×768,1366×768,1280×800,1280×1024,1440×900,1600×900,1920×1080等。设计网页时要考虑好浏览器的分辨率,主流的浏览器有IE,谷歌,火狐,欧朋等。

什么叫浏览器的有效可视区域呢,在我理解就是显示内容的地方,比如打开一个网页后,刨除浏览器的工具栏和侧边栏等,真正显示内容的地方,如下图:

我电脑里的浏览器是IE11,有效可视区域是画红框的部分,每个浏览器都有自己不同的有效可视区域,如下面的表格

(谷歌的是宽度减去23)

800×600的已经不用考虑了,主流的是1024×768,现在主流的浏览器还是以IE为主,所以在设计网页的宽度的时候保守的还是考虑1003px,在1024×768的分辨率下,1003就是IE浏览器的有效可视区域的宽度,但是现在越来越多的宽屏正在逐渐占据市场,所以我个人建议使用1280或者1366的,有效可视区域按照IE的来计算,1280的就是1259,1366的就是1345,如果遇到别的分辨率,可以做自适应的调整,现在越来越多的网页设计的宽度都不是固定不变的,这是一个流行的趋势,如下图:

第一张是我正常的全屏显示,第二张是我把浏览器的长宽调整了,设计时考虑三种情况,第一:固定网页尺寸,IT在设计的时候会按比例显示,缩小或者放大,第二:固定主要部分的尺寸,然后旁边留空,小的浏览器就放满,大的浏览器就留白比较多,第三:根据不同尺寸做不同设计方案,这种就比较麻烦了,现在主要是依据第二种,有一部分主要的是固定不变的,当分辨率变化的时候内容会跟着分辨率的宽度来变化,有时候设计的时候图标和图片也会随之而变,这需要前端在代码上作调整。

三、主流浏览器的界面参数


设计
Web note ad 1