栅格系统怎么应用 -c7娱乐麻将胡了

问答 2022-06-05 18:59:48 阅读(...)

栅格系统在使用核心思想是,内容元素必须位于若干列,可以任意分割,比如 6x2、3x4、4x3;水槽内禁止放任何内容元素,内容元素应该要在列宽以内;父级元素对齐栅格,子级可以不完全对齐列;除非特意设计,否则不要在列之外区域放置元素。

简单来说,栅格就是格子。它并没有多高深复杂,可以把他想象成一个个的格子组合起来,就很容易理解了,比如我们小时候用过的方格本,以及现在流行的像素本。所以栅格就是利用网格进行分类排版,由网格演变而来的另一种说法。使用栅格系统,能让你的设计具有正式感和规范感,还具有一种结构分明的设计感。那么栅格系统在设计中的运用必须遵循什么准则?栅格系统使用方法是什么?

grid system 格栅系统

栅格系统的应用准则

1.栅格系统的核心思想是:内容元素必须位于若干列上,可以任意分割,比如 6×2、3×4、4×3。

2.水槽内禁止放任何内容元素,内容元素应该要在列宽以内,而不能流出在水槽之外,这样会违背栅格化的目的。

3.父级元素对齐栅格,子级可以不完全对齐列

4.除非特意设计,否则不要在列之外区域放置元素

所有重要的内容都应该与总宽度相适应,有时候也不能把总宽度当作全部内容区域,还需给它设定一个内边距,此时它就充当起了留白的作用。不要在网格内部利用列宽当成内边距,而是要与网格最边缘保持对齐,利用网格外部的间距来当作留白区域。

栅格系统使用方法

栅格系统最主要的是学会如何在 ui 设计工作中去使用这套方法。在实际项目中去实操练习,熟练应用。

1.布局

根据需要,使用不同数量的栏,去排列组和我们想要的布局样式。以 6 栏为例,简单列了几种组合方式。如 1 排 1,1 排 2,1 排 3…,栏数越多,组合方式就越多,在设计中我们可以把常用的组合方式排列出来,后续设计中可以直接拿出来用,大大提升设计效率。

2.定义有意义的间距

栅格系统更多的解决了页面的基本骨架。但是页面元素之间的间距也需要我们有规律有节奏的去定义。比如我们的留白间距规则。很多设计师设置的数值都是一些无效数值,比如 4,8,12…这些间距之间的差异是很小的,让人很难看出组与组之间的亲密关系。所以!!一套有意义的间距数值是很有必要的。一般数值的设定为 xs、s、m、l、xxl 这五个数值,也就是最小间距、小间距、常规间距、较大间距、最大间距。就像我们买鞋子一样,就固定住了这几个尺寸,设计中的间距也一样,这样能让组与组之间区分更明显。让留白更有意义。同时也能让设计师们更加有默契,减少对基础间距设置的思考。

3.灵活使用栏与水槽

很多同学在刚学习栅格系统时,会让自己的设计元素,比如文字、图标去对齐、卡死栏目的边缘。这种使用方法是错误的。因为栏只是内容的承载容器,我们的设计元素在这个容器里的摆放是多样化的。我们需要去灵活使用,而不是非要让所有元素对齐在同一竖线上!!!!

栅格系统的使用一定要在平时多研究,多实操。我们可以找一些好多产品比如淘宝、支付宝、爱彼迎、pinterest 等产品的界面去研究他们的栅格系统,然后灵活的应用到自己的设计中。栅格系统看似简单,其实在刚开始学习的过程中一定会遇到很多困惑与挑战,只要我们坚持做下去,多练习就一定会掌握的。

收藏 0个人收藏

评论交流

请「」后参与评论
  1. 加载中..

相关推荐

  • grid system 格栅系统

    如何制定栅格系统

    制定栅格系统首先选择画布尺寸;确定栅格区域,将页面按照功能模块划分为全局控制区、内容区、背景区、弹层区;网格设置,现在主流网格单元的尺寸为8px;栅格计算,常见栅格有12栅格和24栅格,栅格分的数量越多承载内容结构越复杂,展示信息更详细。
  • 栅格系统 grid system

    什么是栅格系统

    栅格系统是一种运用固定的格子来设计页面布局,使布局简洁规范有秩序有层次感,这也是设计的基本原则,利用网格有规律的对页面进行排版布局,适用范围广告排版、海报画册、网站移动端等。
  • 矢量图也称为面向对象的图像或绘图图像,是使用直线和曲线来描述的图形,构成这些图形的元素是一些点、线、矩形、多边形、圆和弧线等,它们都是通过数学公式计算获得的,具有编辑后不失真的特点。
    qa
  • world cup 2022 世界杯

    如何观看2022年世界杯

    网上看体育直播的就是央视cctv5体育频道,剩下的就是pptv、腾讯等这些自媒体平台,除了央视,其他平台都要收费开会员才能观看。
  • pc games pc 游戏

    hdr在pc游戏中的可悲、误导和尴尬状态

    在大多数情况下,hdr 对 pc 游戏来说非常糟糕,我们都知道这是真的。但是,如果您只考虑游戏显示器的广告方式,那可能会让您感到惊讶。毕竟,在纸面上,你的显示器、游戏和显卡在技术上都支持 hdr 。
  • macbook air

    macbook air 2022可能需要很长的等待时间

    apple 准备在周一的年度全球开发者大会 (wwdc) 上展示新款 macbook air,但即便如此,你也可能无法立即购买。
网站地图