spot_img
Homewordpress插件教程Wordpress网页栅格化系统应用之设计原理

WordPress网页栅格化系统应用之设计原理

1.栅格系统的形成

 

1692年,新登基的法国国王路易十四感到法国的印刷水平差强人意,因此命令成立一个管理印刷的皇家特别委员会。他们的首要任务是设计出科学的、合理的,重视功能性的新字体。委员会由数学家尼古拉斯加宗(Nicolas Jaugeon)担任领导,他们以罗马体为基础,采用方格为设计依据,每个字体方格分为64个基本方各单位,每个方各单位再分成36个小格,这样,一个印 刷版面就有 2304个小格组成,在这个严谨的几何网格网络中设计字体的形状,版面的编排,试验传达功能的效能,这是是世界上最早对字体和版面进行科学实验的活动,也 是栅格系统最早的雏形。

栅格系统英文为“grid systems”,也有人翻译为“网格系统”,其实是一回事。

网页栅格系统的定义为:以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。

网页栅格系统是从平面栅格系统中发展而来。对于网页设计来说,栅格系统的使用,不仅可以让网页的信息呈现更加美观易读,更具可用性。而且,对于前端开发来说,网页将更加的灵活与规范。

 

2.栅格系统的设计原理及应用

 

那么如何设计一个栅格系统?接下来我们将通过实例,详细的介绍一下网页栅格系统的原理与应用:

网页设计中,我们把宽度为“W”的页面分割成n个网格单元“a”,每个单元与单元之间的间隙设为“i”,此时我们把“a+i”定义“A”。他们之间的关系如下:
W =(a×n)+(n-1)i
由于a+i=A,
可得:(A×n) – i = W
这个公式表述了网页的布局与网页“背后”的栅格系统之间的某种关系。

 

贷款申请在线申请,高额度,快速下款!

3.万能的栅格化系统

 

对于是否采用栅格化设计,采用下面几个案例说明一下:

 

.企业站之类-以介绍几种单一产品为主

 

功能型网站

 

不拘泥形式的设计形式

 

针对这三个具有代表性的案例,栅格化设计是没有必要的。理由很简单,栅格的优点也是缺点,规范意味着统一也意味着限制,在以上的案例中,无需用栅格来限制设计师的灵感,毕竟这个社会,还是需要设计感的。

WordPress建站服务

但绝大多数情况下,推荐栅格化设计。尤其是图文混排、版块很多的网站,栅格化设计会让内容杂乱无章的页面呈现清爽感。
关于栅格化布局,方案非常多,来看下面几个案例,我们都称之为栅格化设计。

 

广义的栅格化系统-无间距的单元格

 

广义的栅格化系统-有间距的单元格

 

广义的栅格化系统-有间距的单元格

WordPress divi主题

 

对于不需要考虑页面响应(换句话说,和框架无关)的网页设计,原则可以简化成一句话:“由设计师自由决定”。

 

 

 

wordpress建站公司

 

siteground 小红书电商教程
WordPress花园官方账号
WordPress花园隶致力于为广大跨境电商和独立站爱好者提供优质的WordPress教程、Woocommerce教程、Facebook、Twitter、tiktok、Instagram教程和谷歌SEO教程等资料和对应的建站推广服务。关注‘哟派出海’公众号了解最新资讯。粉丝福利:Shopline免费独立站建设14天优惠 商务合作: [email protected]
RELATED ARTICLES
spot_img

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据