美文网首页
什么是栅格系统

什么是栅格系统

作者: IvanHung | 来源:发表于2016-11-24 23:50 被阅读301次

一、概念

1、栅格系统(grid systems),也叫“网格系统”。栅格设计系统(又称网格设计系统、标准尺寸系统、程序版面设计、瑞士平面设计风格、国际主义平面设计风格),是一种平面设计的方法与风格。

2、栅格系统运用固定的格子设计版面布局,风格工整简洁。

二、网页栅格系统

1、概念:以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。

2、优点:使用栅格设计,可以使网页的信息呈现更加美观易读,更具可用性。

3、原理:通过设置不同的n、i、A值划分网页的区块,实现标准化的灵活设计。

原理示意 灵活分割

4、局限性:对于内容信息不确定导致高度不确定的页面,在高度层面上就无法做到遵循栅格了。

三、经典960栅格

1、苹果下浏览器的默认宽度为960px。在 1024 x 768 的分辨率下,Firefox窗体的大小约为 974 x 650. 减掉左右两边7px的边框,为 960 x 650。可见设计师们都不约而同选择960px的页面宽度。

2、目前大部分大型门户网站的首页宽度为950px/960px。绝大多数显示器都支持 1024 x 768 及其以上分辨率,为了有效的利用屏幕宽度同时保证栅格的灵活度,960就成为网页栅格系统中的最佳宽度(可以实现较多组合)了。当然,随着分辨率的提高,以后可能会流行更高px的页面宽度。

——部分内容整理自网络——

相关文章

  • 栅格化系统在设计中的运用

    刚开始对栅格系统有很多疑惑,什么是栅格化系统?Bootstrap中为什么要使用栅格系统?设计师为什么要学习栅格系统...

  • 什么是栅格系统

    一、概念 1、栅格系统(grid systems),也叫“网格系统”。栅格设计系统(又称网格设计系统、标准尺寸系统...

  • bootstrap栅格系统分析

    bootstrap栅格系统 bootstrap栅格系统是bootstrap的核心以及精髓所在 一、容器 1.流体容...

  • 栅格系统,以及为什么需要栅格系统

    栅格系统:以规则的网格阵列来指导和规范版面排布以及信息分布。栅格系统最早应该是出现在设计上面,后来前端开发也做出了...

  • 设计师必会的栅格系统

    我们经常能听到“栅格系统”这个词,但却不知道真正的栅格系统是什么,不知道它在设计中是如何应用的。大厂95%的的设计...

  • 再叙网页栅格

    Liya - 2015年8月31日 当女神潘潘导师问我是否了解网页设计中的栅格系统,为什么要使用栅格系统时,脑中能...

  • UI设计新手福利!独家揭秘IOS系统图标栅格系统

    今天我们来详细讲解下如何通过IOS应用图标栅格推导出系统图标的栅格系统。首先我们需要了解下应用图标栅格系统的比例关...

  • 四、bootstrap栅格系统、表单

    知识点: 1、栅格系统2、表单 1、栅格系统 1)响应式网格系统随着屏幕或视口(viewport)尺寸的增加,系统...

  • 制作你自己的栅格系统 Flex

    上一篇文章,我们谈到为什么要用栅格系统以及目前主流实现栅格系统的方式,而现在我们试着用 CSS3 新属性 flex...

  • Bootstrap响应式栅格布局实现方法

    栅格系统的原理 Bootstrap的栅格系统下面我们将一起来看一下常见的栅格布局的设计和bootstrap中的设计...

网友评论

      本文标题:什么是栅格系统

      本文链接:https://www.haomeiwen.com/subject/yndipttx.html