易捷网络专注企业网站建设
11年企业网站建设经验、响应式网站建设,兼容PC、手机、平板全
终端,给你更佳的浏览体验...

设计网页时,如何规划网页的宽度常见的宽度是多少像素

来源:网站建设行业资讯网
添加时间:2022-02-13
网页设计中,宽度的设置,是没有绝对固定的值的,根据我们的需求出发。这里我做个详细的网页宽度设置科普。

网页的宽度主要分两种:

定宽:内容区域宽度固定
自适应:内容区域宽度跟随浏览器变化

一、定宽模式

定宽是我们日常最常见的形式,主流的宽度有960px/980px/1190px/1210px/1200px/1400px等。那么为什么会出现这几个宽度,而不是我们想象中显示器分辨率常见宽如1024、1280呢?

客户端显示器有一定局限性,在定义网页宽度时,我们第一件事是考虑我们的受众用的显示器。大家都知道,显示器基本都是从1024px起始的,即使今天这个分辨率的显示设备已经很稀有了(虽然ipad也使用这个规格),我们就要根据客观条件考虑自己要支持最低的分辨率。

如为一些特定的企业设计web管理系统,应用的设备统一是1440px宽以上的,那么我们就要按这个宽度作为设计的标准开始设计设计稿。 如果要设计一个面向年轻群体的潮牌官网,可能就会为了更好的展示效果放弃低分辨率的用户(主要集中在中老年群体),最低按1366宽开始支持。 如果是设计像淘宝这样的要满足所有人的网站,那么就要从最低的1024开始支持。 假设我们确定了1024宽的支持起点,那就还要再做一件事,确定一个主内容的区域宽出来。在我们使用Word的时候,大家都知道我们会给A4纸面设置一种参数类型叫页边距,不会让文字内容直接贴在纸张边缘上。同理,网页主内容的区域小于1024宽时,才能使左右产生留白。如知乎最小宽度下左右也会留出间距使内容不会直接贴到浏览器上。

所以,要知道960px、980px以及类似淘宝、京东这个级别网站所使用的界面宽,都是经过格线系统的体系推导而出的,而不是觉得某个整数看着比较顺眼所以那么设置,即使你对栅格一点概念都没有,也是可以使用这些宽度的。

最简单的定宽长度设置:宽度=支持最小宽度-左右留白

二、自适应模式
可能很多人听过,响应式布局,尤其前几年H5崛起的时候,很多初级网页设计师都觉得,网页设计以后就应该支持全平台,那些老的定宽规格都应该被淘汰。但是,宽度自适应模式和响应式设计不是完全相等的。

响应式设计,是在多种平台下可以良好显示和运行的一种框架,在不同的宽度下展现出不同的排版和样式。

在这里易捷网络网站建设公司不怎么推荐大家去使用响应式设计,因为局限性太大,实际的项目开发时长可能还不如PC、移动端分别开制作。而一般自适应宽模式,是让主内容区域可以随画布的拉伸而做调整,让整个浏览器的画布区域被最大化利用,展示更多的文字信息或图像,带来更好的浏览体验(注:设计得好的情况下)。

在这种模式下,使用1920px或更大的宽来设计是没问题的。但是,你还需要定义一个最小的宽,再出一版设计,来展示极限情况下的视觉效果。因为很多用户会在操作系统中缩小浏览器的宽度来并排其它窗口。但到了今天和未来,2K、3.5K、4K显示器越来越普及,设计师是虚要考虑1080P以外的显示怎么办的。

设计自适应宽的界面,可以先选用一个合适的宽度作为基础,如1440px、1920px等,给出模块拉伸的方案,然后给出最小宽度效果、超出的应对的措施。要设计出切实可行的方案,是需要设计师完全熟悉HTM5L+CSS3和基础JS的,还需要考虑过大的宽度适应下配图的清晰度和读取效率问题。空谈自适应和响应式布局绝对是浪费团队时间的做法。

三、结尾
还需要做一些说明的是,即使我们采用了定宽的模式,也可以在特定的模块使用自适应模式进行组合的,常见的就是网页的头部和底部,还有部分带有背景色、图案的模块。如上图天猫的案例。、不要用太大的画布进行设计。否则设计出来的演示稿会没有观赏性,对预览效果大打折扣,比如看下面天猫页面的截图当成演示稿的话,肯定比上方那张大量留白的看起来顺眼多了。

结论:
网页设计师的目标就是在浏览器和开发语言的限制下找出合适的设计方案。如果没有把握,请就使用960/980px的方案即可。如果要使用更宽的画布,则一定要弄明白各项限制和缘由。

网站建设计最新案例赏析:


佛山红海豚门业网站制作首页设计效果图
佛山红海豚门业
深圳信雅文化传播网站制作首页设计效果图
深圳信雅文化传播
乐清乐鸟电气网站制作首页设计效果图
乐清乐鸟电气
华星(深圳)新材料网站制作首页设计效果图
华星(深圳)新材料
东莞禾聚精密电子科技网站制作首页设计效果图
东莞禾聚精密电子科技
深圳大狮影业摄影广告网站制作首页设计效果图
深圳大狮影业摄影广告
广州庄齐实验室工程网站制作首页设计效果图
广州庄齐实验室工程
西斯科戈雅企业形象设计网站制作首页设计效果图
西斯科戈雅企业形象设计
陕西松峰实验设备网站制作首页设计效果图
陕西松峰实验设备
广东旭峰环保科技网站制作首页设计效果图
广东旭峰环保科技
 

网站建设行业资讯推荐阅读:


手机网站建设需要注意哪些问题如何避免这些问题营销型网站建设让你在互联网时代快人一步如何才能做好深圳宝安网站建设网站设计的基本原则有哪些一个企业官网对企业来说有什么用SEO网站推广之链接为什么非常重要网站运营总监讲解SEO新手应该注意的什么网站建设的“三个纪律”怎样免费建网站怎样做才会更强网站建设公司需做好的几件事大趋势下,网站建设需跟上时代网站制作公司运用了技术设计深圳网站建设的基本流程网站建设如何做到创意的网站设计卓越迈创公司介绍深圳pc网站建设,PC网站建设和手机网站建设的不同之处是什么学会这六个方法,让你做好SEO优化建站 设计师要怎么找灵感给企业做网站设计营销网站首页如何设计营销型网站建设如何运营什么是定制软件开发怎样才能运营好一个行业门户网站企业网站建设应提高网站打开速度增加用户转化率 有实力的网站设计制作哪个品牌好 企业网站要如何设计才能获得更多浏览量企业做网站建设讲究的是什么网站建设初期如何进行SEO优化有设计感的网站应该具备哪些特征内容网站建设中涉及趋利性内容更利于品牌传播原因标准的网站制作流程是怎样的如何快速解决流量下跌难题深圳网站建设之缩短建站时间,沟通很重要响应式网站建设:白色在网页设计中的重要性面包屑导航条在网站建设中的使用和设计网卡故障易捷网络带你进入备案世界“涨姿势”你是否同意有人说网站建设都是为了赚钱网站建设几步曲让访客爱上你的网站龙岗公司网站建设的几种方法定制软件开发的公司哪家好,谁能给推荐一下服务型政府外文网站建设的路径网站设计时应如何考虑优化因素选购虚拟主机的一些的基本概念企业官网应如何建设需要注意哪些细节 企业网站设计制作定做 常见的深圳网站设计风格有哪些有人知道吗深圳企业网站建设同样离不开用户体验度服装网站建设有哪些步骤关于网站内容建设的一点思考快速创作优质内容的方法如何设计网站才能够在搜索引擎当中占优势营销网站的特征网站建设的基本要求及策划事项分享网络营销的六大误区响应式网站首页布局有什么要点Web分析服务的提示小程序自身关联性产品分析深圳福田网站建设哪家好,企业做网站能带来什么好处h5页面怎么制作手把手教你制作h5页面专业网站设计需要做好的工作
企业网站建设行业信息服务发布平台!
(www.fantodo.com)版权所有
QQ在线咨询