智搜云
  • seo优化联系电话132-6726-8939
  • 网站优化在线客服13825271

响应式网页前端的设计尺寸标准

作者:响应式网站设计 / 2019-10-02 / 浏览次数:3026

设计是很灵活的,但同一个项目/产品的设计,就必须要有它的规范,而这些规范,必须要遵循设计的原理,对自己而言,以后再同一项目做更新优化时能用更快的时间搞定,对他人而言,不让人喷的同时认同你是个专业的设计师。

最近咨询网页前端设计的朋友比较多,当然大部分是求PSD~,授人以鱼不如授人以渔,是时候分享一些干货给大家了。这篇文章是出于对客观的理解加上藤设计经验,因此有些地方可能会跟大家的想法有出入,不对的地方请指出。

前端设计也是属于网页设计的一部分,自从有了H5,网页设计的展现形式真是千变万化,但是要做一个让大部分非IT的人操作的PC端前端,你把它做的很炫,请问用户答应吗?前端和开发都不想答应。当然,对于一些控件/元件是可以做一些轻动画交互。

居中对齐的网页
这个尺寸的网页尺寸很好把握,新建画布A(白色图层),然后新建另外一个网页有效区的画布B(黄色图层),把画布B的图层拖到画布A,居中对齐,然后拖两条参考线,删除黄色图层,这个时候就可以在这个画布上大展身手了。

那么,画布A的宽度到底应该是多少分辨率呢?很明显,只要大于有效区即可。因为这种网页设计尺寸是固定的,控件和元件等的都设置一个固定值,比如间距刚刚好是30px,按钮刚刚好是100px,表格刚刚好是700px等。网页有效区的宽度从以前的600px涨到现在1200px,甚至更高,因此,结合我们当前使用的主流显示器,例,做一个1200px宽度的网页,那么画布B就是要设置的宽度,而画布A则是大于1200px宽度,就算网页的有效区已经固定,然而很多时候,你肯定会设计通栏的banner,用上1920分辨率显示器的你,当然是用1920的宽度比较爽比较任性好吗?

网页设计,网页制作,网页尺寸


版面分辨率的设置,常见的网页结构类型科学的网页结构能够更好地展现网站信息,让任务的完成更容易,对内容的存取更直接。网页结构的科学性和艺术性,可易于信息的管理。 

常见的网页布局结构主要有以下几种:

1.“T”形布局
所谓“T”形布局就是指页面顶部为横条网站标志与广告条,下方左面为主菜单,右面显示内容的布局,因为菜单条背景较深,整体效果类似,英文字母“T”,所以我们称之为“T”形布局,这是网页设计中用得广泛的一种布局方式。这种布局的优点是页面结构清晰,主次分明,是初学者容易上手的布局方法。缺点是规矩呆板,如果细节色彩上不注意加工,很容易让人“看之无味”。

2.“口”形布局
这是一个象形的说法,一般就是页面上下各有一个广告条,左面是主菜单,右面放友情链接等,中间是主要内容。这种布局的优点是充分利用版面,信息量大。缺点是页面拥挤,不够灵活。也有将四边空出,只用中窗口形布局。

3.“三”形布局
这种布局多为国外站点使用,国内用得不多。特点是页面上横向两条色块,将页面整体分割为三部分,色块中大多放广告条。 

4.对称对比布局
顾名思义,采取左右或者上下对称的布局,一半深色,一半浅色,般用于设计型站点,优点是视觉冲击力强,缺点是对两部分进行有机的结合比较困难。

5.POP布局
POP引自广告术语,就是指页面布局像一张宣传海报,以一张精美图片作为页面的设计中心。这种布局常用于时尚类站点,优点显而易见:漂亮,吸引人。缺点就是速度慢。

布满全屏的网页
对于全屏展示的网页,又分为自适应和响应式。

自适应是根据浏览器的分辨率大小自动适配尺寸布满全屏,它所呈现的样式一直都是一个终端的(如PC端)效果,通常前端会给这种网页设定一个最小值(min-width),当浏览器的分辨率小于这个值的时候,浏览器会出现横向滚动条。

另外一种就是近几年超流行的人们常说的H5响应式布局(栅格化布局),一般把浏览器分辨率三等分,在每个等分区间展示的布局都不尽相同,也就是我们说手机端、平板、PC端的展示,并且在每一个区间的分辨率的缩放也应包括了自适应。因此在设计这种网页时,通常要做三种尺寸的设计。

响应式布局网页固然有很大的优势,但是在很多约束的现实情况,后台设计(一般指信息/数据型的管理系统)并不会采取这种方式,而是选择自适应的PC端设计,当然如果产品需要,一般开发上会分开做成两种形式,PC端和移动端。正因为是PC端的后台,它的分辨率(浏览器分辨率)仍然有大有小,全屏自适应的布局会根据分辨率的大小而改变。PC端后台界面会设计一个最小宽度min-width,如果浏览器小于这个值,那么只能用滚动条拖动了。

既然是布满全屏的网页,那么新建的画布尺寸就可以更主观了,一般就按照自己使用的显示器的更佳分辨率来设置,至于在什么样的尺寸展示什么样的布局,那是前端的技术,设计只提供各个分辨率展示的效果图,但是,你必须理解其中的原理,否则前端直接跟你说做不了你也没辙。

对于后台设计,布满全屏的网页尺寸在当下的环境显得更为主流,因为后台的更新优化实在是太频繁了,固定宽度有时候很难满足交互需求。


相关Tag: 响应式 网页设计
【智搜云业务】网站建设、网站设计、服务器空间租售、网站维护、网站托管、网站优化、百度推广、自媒体营销、微信公众号
如有意向---联系我们
热门栏目
热门资讯
热门标签

网站首页 |网站建设 |网站优化 |网站托管 |客户案例 |营销学院 |关于我们 |联系我们

版权所有 © 2019 智搜云 保留所有权利 Powered by zkok.cn 网站地图


粤ICP备19048015号