网页设计之感官体验の要素② 尺寸

前言

       网页设计的难点在于每个浏览者的使用环境不同，网页存在太多的变数，一般的设计无法胜任，所以能否有效地处理网页在不同设备之间存在的问题，直接影响该页面的整个用户体验。一个网页的尺寸设定与浏览者使用的浏览器以及终端系统存在很大关系，在设计时不可能满足所有设备终端的最佳尺寸需求，但是我们可以做到绝大多数用户在不同设备终端上看到最佳效果的视觉体验。

       对网页尺寸产生重要影响的因素有：操作系统、浏览器和系统分辨率（这里我们可以直接理解称终端显示器的分辨率）。

       关于尺寸对网页感官的用户体验，主要有两个点：

      ①影响网页尺寸的主要因素；    ②安全的网页宽度与首屏高度

1、影响网页尺寸的主要因素：a.操作系统 b.浏览器 c.系统分辨率

操作系统

        在所有PC操作系统底部是系统状态栏，这个是固定占据屏幕尺寸的，Windows XP系统默认高度30px，win7、8、10默认高度40px。

浏览器

        不同用户可能会使用不同的浏览器，在浏览器窗口中默认存在状态栏（底部）、菜单栏（顶部地址栏与菜单栏）、滚动条（侧边），这些都是占据一定屏幕尺寸的，设计师在设计界面的时候也应当将这些考虑进去。

浏览器	状态栏	菜单栏	滚动条
chrome谷歌浏览器	22px	60px	15px
火狐浏览器	20px	132px	15px
IE浏览器	24px	120px	15px
360浏览器	24px	140px	15px
搜狗浏览器	25px	163px	15px
遨游浏览器	24px	147px	15px

主流浏览器界面尺寸

系统分辨率

       不同的终端显示器所支持的分辨率也不一样，分辨率的不同会导致网页内容的不同成都的成像面积比压缩，就会出现不同程度的压扁或者拉伸状况。

纵横比	宽度	高度
16：9	1920px	1080px
16：9	1366px	768px
16：10	1440px	900px
16：10	1280px	800px
16：9	2560px	1440px

部分终端设备的分辨率

       关于当前主流不同终端设备的尺寸，在我们进行页面设计的时候可以优先选择使用16：9或者4：3比例进行设计，普遍PC终端分辨率都支持显示这个比例的画面，这个尺寸也就是我们说的比较合适的分辨率。

2、安全网页宽度与首屏高度

        所谓安全宽度就是我们在浏览网页时对用户有效信息传递的区域宽度，也就是我们的主要视觉范围。为了在不同分辨率的显示器中显示的内容一致，布局的内容应在设计的时候安排居中显示，左右两边留出一定的空白，这样不论宽屏还是满屏还是其他形式，所呈现的内容都可以以最佳的视觉效果呈现给用户。

       安全宽度的选择我们可以根据不同情况选择，分辨率-两侧留白空间=内容呈现区域。这里小编给出几个安全宽度的建议，最大1440px，最小960px。

此图以1920*1080分辨率为参考，根据参考线可判断合适的安全宽度

首屏的高度尺寸=系统分辨率-浏览器状态栏-浏览器菜单栏-系统任务栏

在处理兼容问题的时候，可以使用浏览器前缀来解决，给不同浏览器设定不同的高度。这里就不给建议尺寸，可以根据上面这个公式进行计算一下。

总结

       虽然现在桌面终端显示器分辨率越来越高，但是随着移动设备普及，使用平板和手机来浏览网页的用户越来越多，在设计界面的时候尺寸也要考虑到移动设备终端。平板电脑与手机的屏幕分辨率都小于桌面显示器，所以再设计的时候要考虑到内容适配问题，这时候就需要采用响应自适应方法来呈现内容。这个在界面设计的时候就要进行多端设备显示状态的设计，桌面终端、平板终端和手机终端。

       界面设计过程中可以不考虑具体的尺寸计算，但是在开发时候，所有宽度都需要使用相对值的%来表示。

      关于响应式网页开发的详细将在后面给出教程，以上就是网页设计过程中要考虑影响用户体验的尺寸要素，希望可以帮助像我一样热爱生活且正在努力的小白们！