web设计规范01-画布大小与首屏高度

前言

基于AntdesignWeb、sass系统规范，结合web实战经验整理了一套Web规范组件库，包括画布大小、布局规范、色彩规范、样式规范、字体规范、图标规范、形状、间距、文本格式、图片、标签、按钮、复选框、单选框、输入框、计数器、文本域、选择器、上传、穿梭器、评分、开关、导航、书签、表格、进度条、反馈、缺省页等。本文主要分享第一篇画布大小，其他内容会后续更新分享。

在做网页设计到底该新建多大画布，要根据网页的应用群体来定。根据产品服务对象的不同，对于公司内部应用的后台系统我们称为B端网页，对于第三方用户群体的应用的网页我们称为C端网页

一、C端网页设计-画布

知识点：1.安全宽度；2.首屏高度

一般情况下要考虑页面内容能够在用户端正常显示即可，我们把这个宽度叫做安全宽度。

一个经验丰富的网页设计师在做网页原型设计或者视觉效果图时，首先必须要做的是明确网页的安全宽度、标注清楚网页首屏的高度线，以便直观的看到网站首屏的高度，首屏可以显示的元素。那么，我们该如何来标注一个网页的首屏线那？这里结合网上的一些谈论特整理如下：

一个网页的尺寸设置和浏览器与系统的尺寸大为相关，我们不可能满足所以用户的最佳尺寸，但我们能做的是让绝大多少用户感觉是最佳的。

不同应用设备屏幕尺寸规格

在Window XP常见分辨率1024×768下我们除掉任务栏，浏览器菜单栏以及状态栏后剩下的网页首屏高度平均值是584。

在Window 7常见分辨率1440×900下我们除掉任务栏，浏览器菜单栏以及状态栏后剩下的网页首屏高度平均值是716。

综合分辨率及浏览器下的统计数据：Window XP首屏高度580px；Window 7 首屏高度716 px。

现在市面上大部分应用的系统为Windows或mac，因此我们在做设计稿时可不考虑xp系统。

综上分析，网页宽度为1920 高度不限，有效可视区：950px~1258px宽度，具体尺寸根据项目，客户要求以及用户群决定。在没有特殊要求的情况下，建议默认安全宽度为1136px（下篇删格系统布局会讲到）；首屏高约为700-750PX ，考虑到良好的用户体验度，网页设计师在设计网页时以720px作为首屏高度设计。

C端网页默认画布大小：1920 x 720、1440 x 720；安全宽度1136

二、B端设计-画布

根据用户屏幕分辨率使用统计,1920×1080分辨率为使用率最高的分辨率,1366×768为笔记本电脑常用分辨率。其中1366×768为web端最窄分辨率,若窗口小于该宽度,则停止响应,由滚动条来显示隐藏内容

考虑到（1）1920中设计固定宽度页面会使得两边留白过多;（2）便于栅格系统换算以及上下屏幕分辨率适配;故使用1440x900分辨率作为UI设计画板

最后

写在最后，设计规范可以让我们在做设计时有逻辑依据，工作中组件方便调用、提升效率，还可以作为走查依据。web设计规范系列章节结合大厂设计规范（antdesign、Tdesign等）以及实际工作经验整理的心得笔记。在此分享给大家，希望能给您带来帮助。本人也是摸着石头过河，写的不好的地方地方还请留言讨论。

我们下一篇见《web设计规范02-删格布局》

查看更多文章，关注微信公众号：设计便利签