栅格系统怎么应用

乐多 问答 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

    什么是栅格系统

    栅格系统是一种运用固定的格子来设计页面布局,使布局简洁规范有秩序有层次感,这也是设计的基本原则,利用网格有规律的对页面进行排版布局,适用范围广告排版、海报画册、网站移动端等。
  • 矢量图是什么

    矢量图是什么

    矢量图也称为面向对象的图像或绘图图像,是使用直线和曲线来描述的图形,构成这些图形的元素是一些点、线、矩形、多边形、圆和弧线等,它们都是通过数学公式计算获得的,具有编辑后不失真的特点。
  • 社交聆听 Social listening

    什么是社交聆听

    社交聆听是跟踪和分析社交媒体渠道上的信息的过程。企业使用社交聆听来监控社交媒体上有关其品牌、产品和服务的提及和对话。通过跟踪这些对话并分析其内容,组织能够提取有关其受众的深入见解,并了解客户对品牌甚至整个行业的感受和看法。
  • 软技能 Soft Skills

    什么是软技能

    软技能是影响个人工作成功程度的非技术技能。拥有这些特质的人通常比那些只具备该职位所需的技术或硬技能的人在其职位上更成功。
  • 空间规划 spatial planning

    什么是空间规划

    空间规划是一种用于确定房间或区域最具功能性布局的方法,其最终目标是创造一个支持居住者福祉和生产力的环境。公司通常选择零售空间规划软件,通过使用每个位置的可视化表示来帮助管理和优化实体店。