思思

Web UI设计之栅格系统详解

小傻子:


1.关于栅格系统的典故


Web UI设计之栅格系统详解 - 小傻子 - 小傻子的博客


2.什么是栅格?


栅格系统以规则的网络阵列来指导和规范网页中的版面布局以及信息分布。栅格系统有时候也称为网格系统。


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


在网页设计中,如果把网页宽度平均切分为多个网格单元,每个单元之间预留一定的空隙,此时整个页面就如同一个栅格系统,如图所示:


Web UI设计之栅格系统详解 - 小傻子 - 小傻子的博客


 


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


图中给出了一个标准的栅格系统中所包含的几个部分,分别是总宽w、列宽c、槽宽g、外边距几个部分。这样总宽的公式如下:


 Web UI设计之栅格系统详解 - 小傻子 - 小傻子的博客


Web UI设计之栅格系统详解 - 小傻子 - 小傻子的博客




边距部分不显示内容的,用于将网页主题内容和边缘进行分割。可以改变面数和槽宽,设计出很多栅格系统。常见的栅格系统:


Web UI设计之栅格系统详解 - 小傻子 - 小傻子的博客


 


4.栅格系统的优势


使用栅格系统的网页设计非常有条理,看上去也很舒服,可以让整个网站各个页面的布局保持一致。这能增加页面的相似度,提升用户体验。


最重要的是,它给整个网站的页面结构定义了一个标准。对于视觉设计师来说,不用再为网站的每一个页面都想一个宽度或高度了;对于前端开发工程师来说,页面的布局设计将完全是规范的和可重用的;对于内容编辑或广告销售来说,所有的广告都是规则的、通用的,再也不用做出一套多张不同尺寸的广告图了。这对于大型网站的开发和维护来说,能节约不少成本。


 




原文链接:https://www.maiziedu.com/wiki/ui/rasterize/

评论

热度(1)