您现在的位置是:武汉网站建设 > 网站建设
干货:网页设计之栅格系统
武汉网站建设2024-09-21 12:23:10【网站建设】5人已围观
简介 1、栅格系统的形成 栅格系统Grid system)zui早使用在17世纪末的法国印刷业,出版业。
1、干货格系栅格系统的网页形成
栅格系统(Grid system)zui早使用在17世纪末的法国印刷业,出版业。设计
维基百科对其定义为:栅格设计系统(又称网格设计系统、干货格系标准尺寸系统、网页程序版面设计、设计瑞士平面设计风格、干货格系国际主义平面设计风格),网页是设计一种平面设计的方法与风格。
网页栅格系统是干货格系有平面栅格系统中发展而来,以规则的网页网格阵列来指导和规范网页中的版面布局以及信息分布。
2、设计栅格系统的干货格系原理
栅格系统可以按栅格数分为12列,16列,网页24列等,设计可以自由设计栅格宽度和栅格与栅格间宽度。如下图所示,记页面或区块宽度为W,A代表一个栅格单元的宽度,a代表一个栅格的宽度,i为栅格与栅格之间的距离,n为正整数,则有W=(a*n)+(n-1)*i,由于A=a+i,可得(A*n)-i=W。
(A*n)-i = W 这个公式表述了网页的布局与网页背后栅格系统之间的关系。
在栅格系统中,设计师根据需要指定不同的版式或者划分区块改变A和i的值进行设计,这样,一个栅格系统的应用就从此开始了。
3、经典960栅格
设计师们偏爱用苹果系统做设计,苹果下浏览器的默认宽度为960px, 在 1024 x 768 的分辨率下,我们再打开Firefox,自然状态下,Firefox窗体的大小约为 974 x 650. 减掉左右两边7px的边框,网页的实际大小为上图中的红色部分,高宽为 960 x 650.有趣的960就这样出现了。960只是个符号,并不是标准数。
共26种(26 = 7 * 2 * 2 – 2, 减去2是去掉1和960自身),我们标记为:
N(960) = N(2^6 * 3 * 5) = 26
根据上面的算法,可以得到:
N(360) = N(2^3 * 3^2 * 5) = 22
N(480) = N(2^5 * 3 * 5) = 22
N(720) = N(2^4 * 3^2 * 5) = 28
N(750) = N(2 * 3 * 5^3) = 14
N(800) = N(2^5 * 5^2) = 16
N(960) = N(2^6 * 3 * 5) = 26
N(1000) = N(2^3 * 5^3) = 14
N(1024) = N(2^10) = 9
N(1440) = N(2^6 * 3^2 * 5) = 34
N(1920) = N(2^7 * 3 * 5) = 30
N越大,可组合的宽度值就越多。对栅格系统来说,这意味着越灵活。
目前绝大多数显示器都支持 1024 x 768 及其以上分辨率。为了有效的利用屏幕宽度同时保证栅格的灵活度,可以看出960是非常合适的。这样,在目前主流显示器下,960就成为网页栅格系统中的zui佳宽度了,也许不久的将来,将会流行1440。
4、使用栅格系统的优势
对于设计师来说,栅格系统更多的是一种布局思想,可以更有逻辑地进行设计工作。灵活地运用栅格系统,不仅可以让整个网站各个页面的布局保持一致,让网页的信息呈现更加美观易读,让设计稿有更好的结构,更可以通过匹配不同组合,做出很多优秀和独特的排版设计。
使用网格系统,可以使网页设计给用户正式感和规范感,还具有一种结构分明的设计感,提升用户体验。网格系统不意味着循规蹈矩,一味按照网格线来进行布局。网格系统的意义在于更灵活的帮助设计师有序布局,而不是限制设计师的设计。
对于前端开发人员来说,栅格系统的使用,给整个网站的页面结构定义了一个标准,大大提高了网页的规范性。在栅格系统下,页面中所有组件的尺寸都是有规律的,可重用的,这对于大型网站的开发和维护来说,能节约不少成本。
随着响应式设计的流行,栅格系统开始被赋予新的意义,那就是,一种响应式设计的实现方式。响应式的要点是为同一个页面设计多种布局形态,分别适配不同屏幕尺寸的设备。
可以看到,一个页面可以拆分成多个区块来理解,而正是这些区块共同构成了这个页面的布局。根据不同的屏幕尺寸情况,调整这些区块的排版,就可以实现响应式设计。而借助栅格系统,设计与前端开发人员可以很容易的设计和创建响应式的页面布局。
栅格系统是一种格式化的设计工具,使用栅格系统是一种好的习惯,设计师可以更专注于内容呈递,更专注于强调重点。当然,规矩是用来打破的,当我们理解了布局的理念,掌握了栅格的手法之后,也无需拘泥于栅格的形式,可以对其“革命”,进行创新。
很赞哦!(74)
上一篇: 企业网站推广要如何做?常见方法分享!
下一篇: 关于企业建站需要了解哪些信息
友情链接
- 最新50个信息流广告媒体平台数据排行榜 | 2018.9月
- 巴郎SEO:SEO是什么,如何正确理解SEO
- SEM竞价搜索:百度推广上线自动规则,你会第一时间使用吗?
- 为什么有些落地页,你看了就想买?
- SEO学习:如何理解SEO行业中的关键词
- 竞价账户推广策略如何制定,相约本周五为你一一道来!
- 跨境电商如何设计出色的落地页:分步指南和5个案例分析
- 巴郎刊-屌丝即是天下
- 李怀林:百度统计实战精讲及网站数据分析(初/中/高级)
- 新手竞价如何才能快速提升个人能力?
- 百度搜索优化技巧—— ecpc如何优化
- SEO思维:赚钱的本质是打造格局
- 腾讯申请自动驾驶专利;阿里腾讯或暂停收购爱奇艺谈判 | 互联网一周资讯
- 推广瓶颈,你可以试试百度推出的这款产品…
- SEM创意文案到底怎么写?
- 巴郎刊:被误解的百度-解读百度首支纪录片《二十度》
- 信息流广告未来的发展趋势如何?如何做视频内容? 8个信息流问答
- 谁说只有烧钱才能获取流量?这个渠道肯定被你忽略了
- 主流的五个获客方式,最关键的是这一点!
- 推荐:sem竞价新手必学课程第三小节——百度竞价推广介绍