您现在的位置是:福州网站建设 > 客户案例
响应式网页前端的设计尺寸标准
福州网站建设2024-09-08 10:40:30【客户案例】4人已围观
简介设计是很灵活的,但同一个项目/产品的设计,就必须要有它的规范,而这些规范,必须要遵循设计的原理,对自己而言,以后再同一项目做更新优化时能用更快的时间搞定,对他人而言,不让人喷的同时认同你是个专业的设计
设计是很灵活的,但同一个项目/产品的页前设计,就必须要有它的尺寸规范,而这些规范,标准必须要遵循设计的式网设计原理,对自己而言,页前以后再同一项目做更新优化时能用更快的尺寸时间搞定,对他人而言,标准不让人喷的式网设计同时认同你是个专业的设计师。
最近咨询网页前端设计的朋友比较多,当然大部分是尺寸求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,如果浏览器小于这个值,那么只能用滚动条拖动了。
既然是布满全屏的网页,那么新建的画布尺寸就可以更主观了,一般就按照自己使用的显示器的更佳 分辨率来设置,至于在什么样的尺寸展示什么样的布局,那是前端的技术,设计只提供各个分辨率展示的效果图,但是,你必须理解其中的原理,否则前端直接跟你说做不了你也没辙。
对于后台设计,布满全屏的网页尺寸在当下的环境显得更为主流,因为后台的更新优化实在是太频繁了,固定宽度有时候很难满足交互需求。
很赞哦!(9529)
上一篇: 怎么做网站策划
下一篇: 企业网站建设的基本费用有哪些
站长推荐
友情链接
- 除了H5,移动营销还能怎么玩
- 杜蕾斯微博运营者谈微博运营与微信运营的50条经验
- 腾讯内部出招告诉你如何玩转微信运营--深圳网站建设分享
- 微信公众号软文广告营销策略
- 如何选择小程序开发公司?
- 微信内测新功能,支持双向删除好友、朋友圈自定义分组功能
- 【上线】美和健康网站由沙漠风设计制作完成上线
- 深圳极简主义网站设计,极简主义网站拆解
- 外卖平台怎么做营销推广比较有效?
- 深圳微信营销怎么做|企业如何做微信营销?
- 【上线】银佳集团中文官网改版上线,由深圳沙漠风设计制作
- 微信营销起步技巧,深圳微信营销哪家好
- 【上线】信维通信英文版官网上线,由深圳沙漠风设计制作
- 微信营销中微信公众号常遇到问题解析
- 微信营销如何才能做好-深圳网站建设大数据给你分析
- 微信营销朋友圈粉丝海报如何裂变?附各行业示例
- 营销型网站建设栏目内容应当如何规划?(二)
- 网站搜索框设计技巧,搜索框怎么设计好看
- 微信公众号如何获得批种子用户
- 干货:小程序提高用户留存率的技巧