赞助商
立即赞助

看不懂不会用的栅格系统,这篇帮你彻底掌握它!

UI设计3年前 (2021)发布 流光
3.5K 0 0

栅格系统在UI设计和前端开发中是被应的很广泛一套体系,但真正掌握并很好的人却多,本期我为大到这篇干货章,分享原作者通过多年实战收获的经验总结,一起来习!

顾身边常见的优设计很使用栅系统,你能非常赞同在界面中使用栅系统,但却没有人告诉你应该何使用它们。

看不懂不会用的栅格系统,这篇帮你彻底掌握它!

印刷中也用到栅,但就文而言,我主要想讨论的是用PC和移动设备上的栅系统设计。

看不懂不会用的栅格系统,这篇帮你彻底掌握它!

△ 块放内容

内容块包括文本,图片或者是者的组形式,背景颜色实际上不能算是内容素,除非是作为文本或者图片的容器。

看不懂不会用的栅格系统,这篇帮你彻底掌握它!

上图中的色块作为栅格中的列,它构成了内容宽度。一来说,列宽是不会变的,只是列数会随着备的不同而变化,比如从PC端的12列变为板脑上的8列,然后在移动端变为4列。严格来说,你其实可以定义任何想要的列宽,但大多数情况下的网格列宽都置在60-80px之间。选择适的列宽是最重要的,因为它是内容宽度的主要决定因素。

看不懂不会用的栅格系统,这篇帮你彻底掌握它!

水槽是在列列之间的空间。20px是一个常见的尺寸置,当计块状或者卡片素的网格,这种间距非常重要,比如做照片类计的候。有些系统会随着备宽度的增加而增加水槽的宽度,但也可以保持固定。

看不懂不会用的栅格系统,这篇帮你彻底掌握它!

外边距也称为外水槽,是内容宽度之外的空域。为了更方便的计,外边距会随着备宽度的增加而增加。移动备的边距通常为20-30px,而在板脑和PC端,这个间距通常会差异大。

下会介绍些基本准则,要明白在实设计其实没有任何硬性规定。

基本准则

1. 内容素必须位于若干列上

其核心思想是内容素必须位于若干列上,你可以任割,比如6×2,3×4,4×3。下面的例中,展示了不同割方式计的息卡片。

看不懂不会用的栅格系统,这篇帮你彻底掌握它!

看不懂不会用的栅格系统,这篇帮你彻底掌握它!

△ 不同栅格设计展示

很,看来很简单对吧。有的时,你想把内容严的套用在栅格布局上,会发现可够美观,如面的例子。

看不懂不会用的栅格系统,这篇帮你彻底掌握它!

看不懂不会用的栅格系统,这篇帮你彻底掌握它!

如果我们把内都网格,文本内会显得很,的置不严格任何网格,这也可以的,只理解了整元素实际一不可见的,的器就行。

看不懂不会用的栅格系统,这篇帮你彻底掌握它!

看不懂不会用的栅格系统,这篇帮你彻底掌握它!

这也是4×3布局,是了它内部不可见填充。把这样设计稿到开发时,他们能很观知这,所以这更利于去理解如何实地分配好内容。

2. 不要将内容元素留在槽

内容元素应该要在列宽以内,而不能流出在槽,这样会违背栅格化目。

看不懂不会用的栅格系统,这篇帮你彻底掌握它!

看不懂不会用的栅格系统,这篇帮你彻底掌握它!

3. 只要父级元素对齐栅,子级以不完对齐列

有时,你想要将设计和卡分成两部分,一半是图,一半是文字。你能遇到样尴尬的情况,图没有完落在一列上,文字被迫以一种奇怪的方式自适应。其不用担心,只要「父」容器对齐栅,就没有关系。

看不懂不会用的栅格系统,这篇帮你彻底掌握它!

看不懂不会用的栅格系统,这篇帮你彻底掌握它!

看不懂不会用的栅格系统,这篇帮你彻底掌握它!

△ 父子级内栅格排版示意

4. 除非意,否则不把列作外部填充

所重内都应该与栅格列宽相应。一始会觉得奇怪,因如果不习惯使用网格,可能会把网格宽度当全部内区域,所以还需给它设一的内距。此时外距就起到了留白的作用,它们充当了内距。不网格内部利用列宽当内距,与网格外面保持对齐,利用网格外的间距当留白区域。

根据代码实现方式,要么格的容按例缩放,边距固定,要么外边距与容同时缩放。

看不懂不会用的栅格系统,这篇帮你彻底掌握它!

看不懂不会用的栅格系统,这篇帮你彻底掌握它!

△ 确的内填充方式不确的把栅格当距

如果有人说「我需要一个1200px宽的设计」,这并意味着你的设计就是1200px宽,这实是说设计容宽在1200px的画布,实际容占位是960px,这样就会有空间留外边距。

5. 全血的元素或纹图形应该设计在画边缘,并解为血的列格

看不懂不会用的栅格系统,这篇帮你彻底掌握它!

△ 这页面布局的顶部图片被设完全出血

这是一个例外的规则,当背景颜色或者图片在全血的情况,开发同会把它解为一个全屏的容元素。

看不懂不会用的栅格系统,这篇帮你彻底掌握它!

看不懂不会用的栅格系统,这篇帮你彻底掌握它!

如果设的装饰元素之类的内,可以接受它被裁切掉,此时也可以脱离栅格化的设。

看不懂不会用的栅格系统,这篇帮你彻底掌握它!

看不懂不会用的栅格系统,这篇帮你彻底掌握它!

△ 些图片和文出血设计

页眉页脚时也例外,它们不被认内的一部分。些设将它们固浏览器,些则喜欢保持内的宽度,这取决于自身功能内的况。将它们保持内宽度内的好处,当用户宽屏显示器看页面时,不需回扫视,将它们固浏览器的好处可以导航元素提供多的空间。

栅格化布局如何做到响应式

看不懂不会用的栅格系统,这篇帮你彻底掌握它!

△ 图片来Intuit

看不懂不会用的栅格系统,这篇帮你彻底掌握它!

在传统栅格化系统设计,列宽度和槽宽度是保持不变,是列「数量」发生变化。

什么这么处理呢?这了让设简单。如果一组三张卡片分别桌面的四列,那么平板电脑,会显示两张卡片,并把第三张卡片行折行显示第二行。不需任何的调整,因已知道它于第四列了。

在手机上,答案很简单,只需要一张卡片,他的就会自堆到面的行中。如果你愿意,可变得有创意,择只在手机上显示一张卡片,或者做一个水平滚。这些列的自适应对于代码来说就是很简单的参考。

际上,web必须呈现任何浏览器的宽度。例,有一个大显示器,它以看到1600像素宽的东西,际上pc端的网页设计是1200px宽,平板电脑上是768px宽,手机是360px宽。所以你看到一个小1200px的设计,有大量的留白。但是当你的浏览器小一个像素,1199px,生什么呢?

1. 固定网

看不懂不会用的栅格系统,这篇帮你彻底掌握它!

看不懂不会用的栅格系统,这篇帮你彻底掌握它!

△ 固栅格示意

如果开发那边写了一个固定栅格,当你从桌面缩小到平电脑,就像是在900px的浏览器宽时,你会看到任何变,设计就像是被剪掉了一样。但当达到768px界点时,设计马上就会改变,平电脑上的显示效果就会好起来。如果继续减小这个值,同样的事情会发生,在到达另一个界值之前,设计看起来都是变的。

2. 格

看不懂不会用的栅格系统,这篇帮你彻底掌握它!

△ 流动网格的示例

现在来看看流格的特点,当口缩小时,容将态的发生变,本会进行换行,元素会变窄。然而,这些元素在容宽缩小到一个界值之前,布是会变的。

所以我想说的是,设计的临界值只是一个更改局的参考点。就是为什么列宽和水槽在网中不改变的原因,因为我们想让设计师在考虑局时能够更容易地创建一致。

3. 混合网

在际项目中,使用流动网和固定网的组合也是常见的做法。网站通常是流动网,因为它要去适应各种不同终端的大小。

一些做的很酷的栅格系统

不需要太死板地去坚持传统栅套路,12、8、4样的分,甚至不需要20px的水槽,下面是一在设计中使用栅系统做的很的设计灵感。

1. Invision’s Genome Project

看不懂不会用的栅格系统,这篇帮你彻底掌握它!

可看到,他们的设计故意使任何的水槽,看起来是无缝的。

看不懂不会用的栅格系统,这篇帮你彻底掌握它!

这个仅设计的很好,他们还利了在设计中展示他们自己的栅格系统来整体的设计变得更酷炫。

2. Dropbox Design

看不懂不会用的栅格系统,这篇帮你彻底掌握它!

他们设水槽外距,相反,整页面被分两半,然后将内填充到这两部分。

3. WordPress

看不懂不会用的栅格系统,这篇帮你彻底掌握它!

△ WordPress创账号页

使用网格的方式取决于自己。可以主内部分使用网格,次内则不使用。Wordpress的例子中,页面中间的部分使用栅格化设,左侧的侧栏则使用。

4. The Mockup Club

看不懂不会用的栅格系统,这篇帮你彻底掌握它!

内容和网格也并不是从开始,于模型网站,内容在左边也未尝不可。

5. Instagram

看不懂不会用的栅格系统,这篇帮你彻底掌握它!

看不懂不会用的栅格系统,这篇帮你彻底掌握它!

我非常确定的说,Instagram的PC端是用上6列栅局。

总结

写篇文章的目的是想提供一关何在响应式设计中使用栅系统,我道对我自己来说,我花很年的时间写大量的代码来理网是何工的。我在YouYube上看很视频,也阅读大量的文章,但每个人在关注它为什么重要,却不去注重到底怎么在自己的项目中使用原则。

你要做的最好的事情就是从现在开始注那些优秀计是如何对齐素的,你将会开始这些模式。为了帮助理解,这有一些计系统概述了它的网格使用:

  • Google’s Material Design System(https://material.io/design/layout/responsive-layout-grid.html#columns-gutters-margins)
  • Intuit’s Design System(https://designsystem.quickbooks.com/foundations/responsive-column-grid/)
  • IBM’s Carbon Design System(https://www.carbondesignsystem.com/guidelines/layout#2x-grid-fundamentals)

在完全理解了网格的工作理之后,已经成为了一名更好的计,因为知道的计将如何在临界值之间进行转换。也可以落地的计,使它能够有一个完美的像素对齐。这的规范带来了更一致,更简洁的计,当用户从一个界面另一个界面流转,这真的提升了产品的档次。

我议在你设计去应用这些网格,并和开发起,以相将它们落地,这将会是个常不进步。

原文链接:《Responsive grids and how to actually use them》

注译者的微信公众号:「彩云译设计

看不懂不会用的栅格系统,这篇帮你彻底掌握它!

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

周日的时候去看了徐峥的电影《我不是药神》,电影很走心,很现实,反正我是看哭了。现在的人,安全感缺失,有一部分原因可能...
产品设计
很多人说看过很多设计道理却依然做不好设计,还不如直接看设计案例来的简单粗暴。今天为大家找到一篇实战好文,一个人,3天时...
APP 设计
今天的文章不长,但是干货还是不少的。对于数据可视化,我觉得在设计原理上其实是相通的,都是为了更好的传达信息。所以,同...
信息可视化
@UX-BOY :关于栅格系统的文章不少,但鲜有专门针对栅格系统在后台设计中相关应用的文章。本文希望抛砖引玉,能引起更多同行...
栅格工具
什么时候该用线型图标,什么时候该用面型图标,不知道大家平时有没有去思考过?我自己也曾经纠结过,但却没有深究,这篇文章...
图标设计
用一篇文章,帮你读懂产品经理与设计师工作内容之间的区别,希望对有转岗想法的朋友有些帮助! 两年前,我从设计转岗到产品...
产品经理
「是能点还是不能点呢?」这是用户在面对一些操作按钮时,大脑中会迟疑的问题。 按钮越多,做决定的时间就越长。用户必须仔...
ui设计
读完这篇文章你将会了解到: 关闭按钮「x」的设计历史 「x」设计的注意事项 关闭按钮设计的最佳案例 「x」图标在应用...
关闭按钮