UX Pedia Presents
本文约2765字,阅读需要7分钟
栅格系统知识点
使用栅格系统很有帮助,它有助于在不同布局之间保持一致性,并加快设计决策的速度。栅格可更精确地控制不同屏幕尺寸之间的对齐方式及布局。本文重点介绍响应式栅格的重要知识点,以及产品设计师如何在设计工作流中调整栅格。
 栅格结构 
栅格由3个主要组件构成,包括列、槽和边距。
列是虚构的垂直块,用于对齐内容。我们用百分比(%)或固定值定义列宽。
栅格中的列
它是列与列之间的空间,有助于分隔内容,我们将槽的宽度定义成固定值。
栅格中的槽
边距
边距是内容和屏幕边缘之间的空间。我们将边距宽度定义为固定值,该值决定每个屏幕尺寸的最小空间。弹性边距指的是列,槽和侧边距组成栅格后剩下的空间,它会根据不同的屏幕尺寸而变化。
栅格中的页边距和灵活边距
 如何使用栅格设计界面?
信息内容(图像,文本或UI元素)常常会被放置于可见和不可见的内容块中。可见内容块具有明显的边框或填充区,而不可见内容块则不具备,多数是透明底。可见的父级内容块包括卡片,横幅等组件。
卡片形式的可见内容块
不可见的内容块包括文本或功能按钮。
内容块应与列的边缘对齐,避免与槽边缘对齐。容块中的信息是独立的,不一定非要与列对齐。
内容块的列对齐
 列结构 
用于构成栅格的列数称为列结构。8、12、16和20是用于响应式布局的一些最常见的列结构,设计师可以根据设计要求选择具体结构。
8/12/16/20列栅格结构
12列结构是最灵活的,它可以进一步分解成为4–4–4或3–3–3–3大小的内容块。
 响应点 
当屏幕尺寸到达响应点,那么页面布局也会有对应更改,以实现最佳的布局视图。列结构,列宽,槽宽度和边距都取决于响应点。内容块则根据不同的响应点堆叠或缩放,以重新调整获得最佳视图。
栅格缩放和堆叠
如果较小的屏幕具备足够空间来呈现,其实缩小比例就能展示完整了。如果屏幕实在是太小,就会垂直堆叠成一列。
 栅格的呈现类型 
栅格有3种呈现形式,一起来看下吧!
固定栅格
固定栅格有固定宽度的列以及页面边距,且固定的栅格具有固定的内容块宽度,该宽度在响应点范围内不会出现变化,并且页面边距会占据剩余的空间。
固定宽度栅格
流动或全宽栅格
流动栅格列的宽度是不定的,但槽和页面边距都是固定的。流体栅格具有灵活的内容块宽度,该宽度根据屏幕大小来变化。流体栅格中,列会随着可用空间变大或是缩小。
流动栅格
混合栅格
混合栅格同时具有流动宽度和固定宽度。在现代布局中,一些元素会完全脱离栅格。常见的例子比如页眉,页脚,或是出血的图片内容块。
混合栅格
如果内容块宽度大于可用的屏幕尺寸,则固定栅格会转变为流动栅格来适应屏幕。
 如何在原型制作工具中设置栅格系统?
电脑视窗
不要以1440×900、1600×900或1920×1080等高分辨率进行设计。1280×800是电脑端内最小的分辨率,以1280×800设计的流动与固定宽度的布局都可以适应更大的屏幕。
固定宽度栅格设置
要设置固定宽度的栅格,我们对槽和列都应固定好数值。建议设置列宽为74px、槽宽32px以及16px的边距。
固定宽度栅格设置
列宽74px、槽宽32px可以生成1240px的内容块宽度(不包括两端的16px侧边距),最大化的利用了可用屏幕尺寸。在不同的响应点,固定内容宽度大于当前屏幕尺寸时,则固定宽度栅格开始变为流动栅格。
流动栅格设置
要设置流动宽度栅格,对槽使用数值,对列使用自动计算的值(以%为单位)。
流体布局栅格设置
流动栅格利用整个屏幕尺寸作为主要内容的宽度,每侧留出16px的侧边距。
移动视窗
在移动端使用流动栅格,槽和页边距的宽度推荐设置成16px。因为移动设备的屏幕分辨率较小,若再分成12个独立的列、槽和边距的话,设计起来也会很麻烦。
移动端的流动栅格设置
因此,我们将3列中的每列合并以创建4个粗列,从而使布局栅格既简洁又方便,快速对齐。
平板视窗
平板设置栅格的方式与移动设备非常相似,推荐槽宽和边距分别设置为32px与16px,可以在768×1024大小的画板上为平板设计界面。
平板电脑流动栅格设置
将12列优化成6列,让栅格清晰明了,谷歌的材质设计曾建议使用24px宽的槽与页边距,实际应用时,不妨都试下看哪个效果更好。
布局样式
栅格布局的变化决定了主要内容的结构,针对不同的布局要求,使用不同的栅格系统,而页面中的内容块数量决定了页面布局的变化。
单列布局
单列布局或全宽布局,是着陆页和首页最受欢迎的风格之一。还可以合并12列来创建一个单列内容块,也可以将12列分配到父级内容块中。
一级页面常应用单列或全宽栅格布局
双列布局
该布局有两个内容块。通常,其中的一个内容块会占据比较多的区域进行信息展示。
在双列布局中,列要么分布在9–3或8–4父级内容块中,其中的一个组合列区域,用来创建主要内容。带有单个边栏的界面是两列布局的常见呈现形式。
三列布局
三列布局具有三个内容块,主要内容块占据最大的展示区域,在三列布局中,列分布在3–6–3或2–8–2父级内容块中。
固定宽度的侧边栏布局
固定宽度的边栏布局稍有不同。边栏宽度在一组响应点范围内固定,剩余空间由固定宽度或流动宽度的内容块占用。
侧边栏固定布局
 移交开发 
在原型工具中,设计布局和编码有很大的不同。代码可以合并列或将其堆叠,比如合并12列以创建单个列布局,或将12列分布到一组,用来创建不同布局变化的内容块。在原型设计工具中设计布局时,你需要确保开发人员清楚了解电脑端,移动设备和平板设备上设置的列宽、槽宽及边距。像Bootstrap,Zurb Foundation等开发软件,其中对栅格值的设置会有出入。
自定义栅格
设计师可以多尝试不同的栅格值设置,以找到最适合自己的呈现形式。如果交付开发的时间非常紧急,请使用文中建议的数值,更保险也不会出错。
/End. 
相关引用
-翻译自原文
https://medium.muz.li/responsive-grid-design-ultimate-guide-7aa41ca7892
-图片、GIF来自网络;封面动图 by Ariel Wollek
-未经UX Pedia允许不得转载
往期推荐:
辞典精译 | 最迅速上手Figma指南!
辞典说 | 这些设计系统比Material Design还好!快来学习!
辞典精译 | 我见过总结最好的UI动效设计法则!
辞典精译|Happy to Help! Spotify是如何设计用户帮助中心的?
  UX 辞典  
策划│雪诗
翻译│梦奇
编辑│梦奇
• 扫码加辞典酱 •
• 成为学习交流小队一员吧 
形象理解用户体验,时刻关注设计趋势
Powered by Canopy Institute of Design
2020©UX Pedia. All Rights Reserved
「喜欢UX辞典的推送,请设置个 星标☆ 
「下次就能 第一时间 看到惹」
 赞了吗  在看吗 
 戳下这里呗  别害羞 :  ) 
继续阅读
阅读原文