使用栅格系统很有帮助,它有助于在不同布局之间保持一致性,并加快设计决策的速度。栅格可更精确地控制不同屏幕尺寸之间的对齐方式及布局。本文重点介绍响应式栅格的重要知识点,以及产品设计师如何在设计工作流中调整栅格。
栅格结构
栅格由3个主要组件构成,包括列、槽和边距。
列
列是虚构的垂直块,用于对齐内容。我们用百分比(%)或固定值定义列宽。
![6e970d08f69f149f388ae0948332f366.png](https://i-blog.csdnimg.cn/blog_migrate/e08c0e0dfc80a13c5970395e4c705fce.png)
槽
它是列与列之间的空间,有助于分隔内容,我们将槽的宽度定义成固定值。
![3504116a72071617982dd64d0c9dcebf.png](https://i-blog.csdnimg.cn/blog_migrate/aa9fe37bce8e685c557f77c8a8b9cd1a.jpeg)
边距
边距是内容和屏幕边缘之间的空间。我们将边距宽度定义为固定值,该值决定每个屏幕尺寸的最小空间。弹性边距指的是列,槽和侧边距组成栅格后剩下的空间,它会根据不同的屏幕尺寸而变化。
![a1c970ff3bdfc464d37326e3e63fa57a.png](https://i-blog.csdnimg.cn/blog_migrate/6939842afb6b4f44c38f965b611752b9.jpeg)
如何使用栅格设计界面?
信息内容(图像,文本或UI元素)常常会被放置于可见和不可见的内容块中。可见内容块具有明显的边框或填充区,而不可见内容块则不具备,多数是透明底。可见的父级内容块包括卡片,横幅等组件。
![df460689a8b1748d6214a87ef477677b.png](https://i-blog.csdnimg.cn/blog_migrate/3831b9bf1b4be610d2401a8f7b250915.jpeg)
不可见的内容块包括文本或功能按钮。
![8c3cc55a3b46475aeb8d9a4bedf135a0.png](https://i-blog.csdnimg.cn/blog_migrate/e9694c9461cee03d75a6d32b3b5d4057.jpeg)
内容块应与列的边缘对齐,避免与槽边缘对齐。内容块中的信息是独立的,不一定非要与列对齐。
![e0b469879bcf4515329b90cfd3057016.png](https://i-blog.csdnimg.cn/blog_migrate/51b8dfb67602b7ccceebe49dca7906b0.jpeg)
列结构
用于构成栅格的列数称为列结构。8、12、16和20是用于响应式布局的一些最常见的列结构,设计师可以根据设计要求选择具体结构。
![583c5e13c9ecb82170fa544382ca24ba.png](https://i-blog.csdnimg.cn/blog_migrate/e717adb175e105449b3c6ad71a66256b.jpeg)
12列结构是最灵活的,它可以进一步分解成为4–4–4或3–3–3–3大小的内容块。
响应点
当屏幕尺寸到达响应点,那么页面布局也会有对应更改,以实现最佳的布局视图。列结构,列宽,槽宽度和边距都取决于响应点。内容块则根据不同的响应点堆叠或缩放,以重新调整获得最佳视图。
![49721c21e47221ebb8f4dd15b16039c6.png](https://i-blog.csdnimg.cn/blog_migrate/7f0a5a1bbc38c8f74df7dd0cebfea0e4.jpeg)
如果较小的屏幕具备足够空间来呈现,其实缩小比例就能展示完整了。如果屏幕实在是太小,就会垂直堆叠成一列。
栅格的呈现类型
栅格有3种呈现形式,一起来看下吧!
固定栅格
固定栅格有固定宽度的列以及页面边距,且固定的栅格具有固定的内容块宽度,该宽度在响应点范围内不会出现变化,并且页面边距会占据剩余的空间。
![3bf6b78be863e9591a066ef640b3b0bf.png](https://i-blog.csdnimg.cn/blog_migrate/5d269eb6f685163943536bbbc0806d37.jpeg)
流动或全宽栅格
流动栅格列的宽度是不定的,但槽和页面边距都是固定的。流体栅格具有灵活的内容块宽度,该宽度根据屏幕大小来变化。流体栅格中,列会随着可用空间变大或是缩小。
![cbef8f321362550cd099deb3f925cab8.png](https://i-blog.csdnimg.cn/blog_migrate/939701535a55348616fa88dc10d08dce.jpeg)
混合栅格
混合栅格同时具有流动宽度和固定宽度。在现代布局中,一些元素会完全脱离栅格。常见的例子比如页眉,页脚,或是出血的图片内容块。
![b305eedf4b3f5f0f48d8d58415095235.png](https://i-blog.csdnimg.cn/blog_migrate/5276c6d6f65839448a7229836b4e4a56.jpeg)
如果内容块宽度大于可用的屏幕尺寸,则固定栅格会转变为流动栅格来适应屏幕。
如何在原型制作工具中设置栅格系统?
电脑视窗
不要以1440×900、1600×900或1920×1080等高分辨率进行设计。1280×800是电脑端内最小的分辨率,以1280×800设计的流动与固定宽度的布局都可以适应更大的屏幕。
-固定宽度栅格设置
要设置固定宽度的栅格,我们对槽和列都应固定好数值。建议设置列宽为74px、槽宽32px以及16px的边距。
![2c2903c931e4ee58f454445d4b7b6065.png](https://i-blog.csdnimg.cn/blog_migrate/eadbf050f68d69204b206ae1db5d99f8.jpeg)
列宽74px、槽宽32px可以生成1240px的内容块宽度(不包括两端的16px侧边距),最大化的利用了可用屏幕尺寸。在不同的响应点,固定内容宽度大于当前屏幕尺寸时,则固定宽度栅格开始变为流动栅格。
-流动栅格设置
要设置流动宽度栅格,对槽使用数值,对列使用自动计算的值(以%为单位)。
![46575eb3eedd04ab2230a35f600b10e5.png](https://i-blog.csdnimg.cn/blog_migrate/971223e4e56a03d1eedf2e0ac347102c.jpeg)
流动栅格利用整个屏幕尺寸作为主要内容的宽度,每侧留出16px的侧边距。
移动视窗
在移动端使用流动栅格,槽和页边距的宽度推荐设置成16px。因为移动设备的屏幕分辨率较小,若再分成12个独立的列、槽和边距的话,设计起来也会很麻烦。
![28e8709106eaf9fcb0aeade02a35aa26.png](https://i-blog.csdnimg.cn/blog_migrate/ef62287d4e7a22ae3ee761cc81643922.jpeg)
因此,我们将3列中的每列合并以创建4个粗列,从而使布局栅格既简洁又方便,快速对齐。
平板视窗
平板设置栅格的方式与移动设备非常相似,推荐槽宽和边距分别设置为32px与16px,可以在768×1024大小的画板上为平板设计界面。
![2300f99ca4075a0fc2b515cbcc5b98aa.png](https://i-blog.csdnimg.cn/blog_migrate/5843c2788f9723860e29f00cde98d4df.jpeg)
将12列优化成6列,让栅格清晰明了,谷歌的材质设计曾建议使用24px宽的槽与页边距,实际应用时,不妨都试下看哪个效果更好。
布局样式
栅格布局的变化决定了主要内容的结构,针对不同的布局要求,使用不同的栅格系统,而页面中的内容块数量决定了页面布局的变化。
单列布局
单列布局或全宽布局,是着陆页和首页最受欢迎的风格之一。还可以合并12列来创建一个单列内容块,也可以将12列分配到父级内容块中。
![bdac9cc49b4fb2fd6b79fa020a5249f5.png](https://i-blog.csdnimg.cn/blog_migrate/a55a3bac05ce8a24447518bc2a2ebd53.jpeg)
双列布局
该布局有两个内容块。通常,其中的一个内容块会占据比较多的区域进行信息展示。
![941c9856bb673c4b64f22276fe4d6432.png](https://i-blog.csdnimg.cn/blog_migrate/1be8ae6c15f9f9c21b98ed6b77becceb.jpeg)
在双列布局中,列要么分布在9–3或8–4父级内容块中,其中的一个组合列区域,用来创建主要内容。带有单个边栏的界面是两列布局的常见呈现形式。
三列布局
三列布局具有三个内容块,主要内容块占据最大的展示区域,在三列布局中,列分布在3–6–3或2–8–2父级内容块中。
![4709ae88c8363556a0b3d2b2dbf25010.png](https://i-blog.csdnimg.cn/blog_migrate/09a9eed0bbd366e28c065c7bf7bbc76e.jpeg)
固定宽度的侧边栏布局
固定宽度的边栏布局稍有不同。边栏宽度在一组响应点范围内固定,剩余空间由固定宽度或流动宽度的内容块占用。
![93955fe74b96ec25af85412941bd9591.png](https://i-blog.csdnimg.cn/blog_migrate/46273004e660f8d65a00fea7e60308aa.jpeg)
移交开发
在原型工具中,设计布局和编码有很大的不同。代码可以合并列或将其堆叠,比如合并12列以创建单个列布局,或将12列分布到一组,用来创建不同布局变化的内容块。在原型设计工具中设计布局时,你需要确保开发人员清楚了解电脑端,移动设备和平板设备上设置的列宽、槽宽及边距。像Bootstrap,Zurb Foundation等开发软件,其中对栅格值的设置会有出入。
![921131f1b7884acd5b5f5668dcbbb60c.png](https://i-blog.csdnimg.cn/blog_migrate/72230bfdb4ee2703f096ab52a1c658e0.jpeg)
设计师可以多尝试不同的栅格值设置,以找到最适合自己的呈现形式。如果交付开发的时间非常紧急,请使用文中建议的数值,更保险也不会出错。
相关引用
-翻译自原文
https://medium.muz.li/responsive-grid-design-ultimate-guide-7aa41ca7892
-图片、GIF来自网络
欢迎关注我的公众号:UX辞典(微信号:uxpedia-design)