行业新闻

为你提供网站建设制作资讯、网站seo优化知识、网站设计开发常见问题等。

网页设计中的页面宽度到底该如何决定?

日期:2020-07-20 11:04:43作者:小编浏览:

  之前写了有关网页设计的一些问题,但有很多客户都对网页设计的页面宽度提出了疑惑,我们今日就跟大家说说有关网页尺寸的探讨。

  PC端的网页设计针对许多从业UI设计行业的新手而言是个充满挑战的行业,针对基础的画布建立、规格设定,都处在两眼一抹黑的情况,许多网页设计师在建立画布的情况下,就已经是第一个困惑的难题了。

  特别是大家在网络上找有关的问题时,获得的结果有多种多样版本,而确实开发设计完成时又会碰到许多的难题,这也使大家更为的茫然。实际上针对网页设计的页面宽度设定是沒有绝对固定的值,是依据大家需求考虑的。

  网页设计的宽度关键分成二种:

  定宽:内容区域宽度固定不变

  自适应:内容区域宽度跟随电脑浏览器转变

  定宽模式

  定宽是我们在见到的绝大多数网页设计中最普遍的一种方式,网页宽度分别由:960px、980px、1190px、1200px、1210px、1400px,有些人见到这儿将会会有疑问,大家平常做的设计图不是1024px、1280px、1366px的吗?

  在定义网页页面宽度时,大家第一件事是考虑到大家的受众群体用的显示屏。

  1、机器显示屏设备

  显示屏基本都是以 1024px起始的,尽管这一屏幕分辨率的显示设备早已很少了,大家就需要依据客观原因考虑到自身要适用最低的屏幕分辨率。

  例如如今普遍的PC屏幕分辨率有1280*800、1600*900、1440*800、1366*768、1920*1080,现阶段而言机器设备中利用率数最多的是1920的。

  那么大家是否在网页设计的情况下用1920px宽的就可以呢?自然不是。

  以我工作工作经验而言,之前有讲到很多企业还是大量应用着1024px的电脑显示屏,因此在界定网页页面宽度的情况下,它是要考虑到第一个要素,尽管那样的机器设备在目前市面上早已非常少见了,可是大家网页设计方案的情况下就需要以1024px的画布来画页面。

  由于在业务流程一切正常应用的情况下,显示屏屏幕分辨率假如低于画布,内容便会显示信息不全,这样会大大影响用户浏览体验。

  在1024px的状况下,网页页面便是显示信息不全的,同样就等同于你为客户做网站建设网页设计,却并沒有充分考虑他们的应用感受,因此我们在考虑到设计网页尺寸的情况下,实际要考虑到的是用户显示屏,而不是绝大多数网页设计师常用的尺寸。

  例如UI我国、站酷,因为这2个的网站的受众人群全都是互联网设计,而这种群体的设备性能都相对性较为不错,因此他们网站最低满足设备都是1366px起的。

  一些企业设计的web智能管理系统,运用的机器设备统一大概率全是 1440px宽之上的,因此大家在网络上可以寻找的Alipay和element的设计部件,机器设备尺寸是1440宽之上的。

  也有一些朝向群体比较多的网址,例如淘宝网、京东商城等,因为受众人群跨度大,因而他的机器设备就需要考虑全部机器设备,从最少的1024刚开始适用。

  以企业的网页制作为例子,在明确了1024宽为网页设计尺寸,接下去要做便是明确主内容的区域宽出来,我以前碰到的很普遍的问题便是两侧沒有留白,内容会直接压边,可是大家看一下绝大多数的网站,在变小的区域低于1024宽时,两侧会产生留白。

  这个内容边距要怎么定义呢,下面我们就来讲到。

  

网页设计中的页面宽度到底该如何决定?(图1)

  2、定义内容区域

  定义内容区域有两种方法,一种是用栅格:( W =(a×n) (n-1)i )获得严谨实用的内容宽。

  这一作法便是根据将内容区域规划成多个内容块和间距模块的方法,辅助大家排版设计。在这篇内容里不做实际详细介绍,只必须关心结果就可以。

  假如挑选兼容 1280px,那麼设计方案内容的地区宽一般 为 1180px、1190px。而在兼容 1024px下,那么内容区域宽普遍的就会有 950、970、990 等。在我们建立完详细屏幕分辨率的画布,再根据参照线的方法将内容区域规划出来即可。

  有关栅格化今日也不过多阐释了,有兴趣爱好的可以去看一下有关栅格的资料内容。

  假如大家感觉繁杂,我们可以应用第二种方式,也是非常简单的方法:宽度尺寸 = 适用最小宽度 - 两侧留白。

  这里就得到开头所说的,为什么常见的网页宽度分别为:960px、980px、1190px、1210px了。

  自适应方式

  讲完了定宽的方式,我们再来说说自适应模式,这个分为两种:响应式网站自适应网站,首先我们先来说说说自适应的网站。

  1、自适应网站

  它是依据你应用的浏览机器设备来自动调试屏幕分辨率促使你看看的网页页面同样,目地取决于以便符合用户的浏览访问。

  2、响应式网站

  是一个可以适配好几个终端设备的网站,并不是为每一个终端设备做一个特殊版本的网站。通俗化的说,便是做一个网站可以融入多种多样机器设备,而无需为每一个机器设备做一个特殊的版本,而且在不一样的机器设备上展现的方式也会不一样,可以为用户提供更舒服的页面和更强的浏览体验。

  3、如何选择

  响应式网站比较简单,网页设计师要是画一个页面就可以了,布局可以通过设定来自行调整。

  而自适应网页设计师者要做两个或是好几套不一样的网页页面,以考虑全部销售市场客户,例如移动端可能就需要再次设计了。

  可是响应式网站只合适非常简单的设计风格,应对一些非常复杂的框架就比较难以达到了,因为局限较为大,具体新项目的开发设计销售市场将会还比不上自适应的网站,自适应通常就考虑到几类情况,不用长期性考虑到企业网站建设尺寸难题,因而你能发觉自适应比响应式网站会更合乎企业网站建设要求。

  划重点

  决定我们设计尺寸是取决于我们的主要受众用户,而不是茫然的跟着别的设计师,还要考虑到适配等等问题,虽然是最基础简单的尺寸,也藏着很多的知识点。


文章关键词: 网站版式设计 网站设计 网站建设 网页设计 自适应网站设计 响应式网站设计 深圳网站制作 深圳网站设计 深圳网站建设公司 网站页面设计

分享到
  • 微信好友
  • QQ好友
  • QQ空间
  • 新浪微博
  • 人人网

相关推荐新闻

自己建网站需要做哪些前期工作与后期维护呢

日期:2020-07-22浏览:

技术专业的网站建设制作公司是怎么样的呢

日期:2020-07-22浏览:

深圳网站建设前期需要做好哪些准备工作呢

日期:2020-07-21浏览:

网页设计文本的排版该怎么调整呢

日期:2020-07-21浏览:

网页设计制作的流程你都掌握了吗

日期:2020-07-21浏览:

网页设计中的页面宽度到底该如何决定?

日期:2020-07-20浏览:

企业网站建设搞好客户体验有什么方法

日期:2020-07-20浏览:

你知道如何对新站进行优化吗

日期:2020-07-17浏览:

深圳网络公司教您如何选择网站关键词呢

日期:2020-07-17浏览:

营销型网站建设如何获得百度搜索引擎流量呢

日期:2020-07-17浏览:

怎样搞好网络营销设计方案呢

日期:2020-07-16浏览:

商业网站建设有哪些切实可行的技巧呢

日期:2020-07-16浏览:

手机建站过程有哪些核心点呢

日期:2020-07-16浏览:

深圳SEO优化过程哪些操作容易被搜索引擎惩罚呢

日期:2020-07-15浏览:

制作自身的网站需要了解什么内容

日期:2020-07-15浏览: