响应式网页布局设计之栅格系统使用指南

栅格可更精确地控制不同屏幕尺寸之间的对齐方式及布局。本文重点介绍响应式栅格的重要知识点,以及产品设计师如何在设计工作流中调整栅格。

使用栅格系统很有帮助,它有助于在不同布局之间保持一致性,并加快设计决策的速度。栅格可更精确地控制不同屏幕尺寸之间的对齐方式及布局。本文重点介绍响应式栅格的重要知识点,以及产品设计师如何在设计工作流中调整栅格。

1. 栅格结构

栅格由3个主要组件构成,包括列、槽和边距。

列是虚构的垂直块,用于对齐内容。我们用百分比(%)或固定值定义列宽。

栅格中的列

它是列与列之间的空间,有助于分隔内容,我们将槽的宽度定义成固定值。

栅格中的槽

边距

边距是内容和屏幕边缘之间的空间。我们将边距宽度定义为固定值,该值决定每个屏幕尺寸的最小空间。弹性边距指的是列,槽和侧边距组成栅格后剩下的空间,它会根据不同的屏幕尺寸而变化。

栅格中的页边距和灵活边距

2. 如何使用栅格设计界面?

信息内容(图像,文本或UI元素)常常会被放置于可见和不可见的内容块中。可见内容块具有明显的边框或填充区,而不可见内容块则不具备,多数是透明底。可见的父级内容块包括卡片,横幅等组件。

卡片形式的可见内容块


不可见的内容块包括文本或功能按钮。

内容块应与列的边缘对齐,避免与槽边缘对齐。内容块中的信息是独立的,不一定非要与列对齐。

内容块的列对齐

3. 列结构 

用于构成栅格的列数称为列结构。8、12、16和20是用于响应式布局的一些最常见的列结构,设计师可以根据设计要求选择具体结构。

8/12/16/20列栅格结构

12列结构是最灵活的,它可以进一步分解成为4–4–4或3–3–3–3大小的内容块。

4. 响应点 

当屏幕尺寸到达响应点,那么页面布局也会有对应更改,以实现最佳的布局视图。列结构,列宽,槽宽度和边距都取决于响应点。内容块则根据不同的响应点堆叠或缩放,以重新调整获得最佳视图。

栅格缩放和堆叠

如果较小的屏幕具备足够空间来呈现,其实缩小比例就能展示完整了。如果屏幕实在是太小,就会垂直堆叠成一列。

5. 栅格的呈现类型 

栅格有3种呈现形式,一起来看下吧!

固定栅格

固定栅格有固定宽度的列以及页面边距,且固定的栅格具有固定的内容块宽度,该宽度在响应点范围内不会出现变化,并且页面边距会占据剩余的空间。


固定宽度栅格

流动或全宽栅格

流动栅格列的宽度是不定的,但槽和页面边距都是固定的。流体栅格具有灵活的内容块宽度,该宽度根据屏幕大小来变化。流体栅格中,列会随着可用空间变大或是缩小。

流动栅格

混合栅格

混合栅格同时具有流动宽度和固定宽度。在现代布局中,一些元素会完全脱离栅格。常见的例子比如页眉,页脚,或是出血的图片内容块。

混合栅格

如果内容块宽度大于可用的屏幕尺寸,则固定栅格会转变为流动栅格来适应屏幕。

6. 如何在原型制作工具中设置栅格系统?

电脑视窗

不要以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宽的槽与页边距,实际应用时,不妨都试下看哪个效果更好。

7.布局样式

栅格布局的变化决定了主要内容的结构,针对不同的布局要求,使用不同的栅格系统,而页面中的内容块数量决定了页面布局的变化。

单列布局

单列布局或全宽布局,是着陆页和首页最受欢迎的风格之一。还可以合并12列来创建一个单列内容块,也可以将12列分配到父级内容块中。

一级页面常应用单列或全宽栅格布局

双列布局

该布局有两个内容块。通常,其中的一个内容块会占据比较多的区域进行信息展示。


在双列布局中,列要么分布在9–3或8–4父级内容块中,其中的一个组合列区域,用来创建主要内容。带有单个边栏的界面是两列布局的常见呈现形式。

三列布局

三列布局具有三个内容块,主要内容块占据最大的展示区域,在三列布局中,列分布在3–6–3或2–8–2父级内容块中。


固定宽度的侧边栏布局

固定宽度的边栏布局稍有不同。边栏宽度在一组响应点范围内固定,剩余空间由固定宽度或流动宽度的内容块占用。


侧边栏固定布局

8. 移交开发 

在原型工具中,设计布局和编码有很大的不同。代码可以合并列或将其堆叠,比如合并12列以创建单个列布局,或将12列分布到一组,用来创建不同布局变化的内容块。在原型设计工具中设计布局时,你需要确保开发人员清楚了解电脑端,移动设备和平板设备上设置的列宽、槽宽及边距。像Bootstrap,Zurb Foundation等开发软件,其中对栅格值的设置会有出入。

自定义栅格

设计师可以多尝试不同的栅格值设置,以找到最适合自己的呈现形式。如果交付开发的时间非常紧急,请使用文中建议的数值,更保险也不会出错。

>网页设计模板素材下载


/End. 


相关素材推荐:



原文 https://medium.muz.li/responsive-grid-design-ultimate-guide-7aa41ca7892

-图片、GIF来自网络;封面动图 by Ariel Wollek

原文来自:UX Pedia微信公众号

每天更新,
全站高品质素材免费下载!