赞助商
立即赞助

超全面!栅格系统及其在后台设计中的应用总结

UI设计3年前 (2021)更新 流光
2.1K 0 0

@UX-BOY :关于栅格系统的章,但有专门针对栅格系统在后台设计中相应的章。本希望抛砖引玉,引起更多同行的交流与讨论。

超全面!栅格系统及其在后台设计中的应用总结

一、栅格系统的目的

栅系统在页面排版局、尺寸设定方面给设计者直观的参考,它让页面设计变得有规律,从而减少设计决策成;栅化提高页面局的一致跟复用;避免设计师与开者在细节上的反复沟通确认,从而提升整个设计开流程的效率,并能帮助开者现为理想的设计还原。

但实际应中,由于对栅格系统解的充分,很多设计师在应栅格系统的实践中产生了各种问题,本来帮助设计的工具现在反而成了设计中需要解决的问题。结合我自己后台设计的经验,本篇章跟大聊聊栅格系统在后台设计中如何应。

二、建立栅格系统的方法与规则

1. 确立栅格系统的原子单位(网格)

图,一个比完整的栅系统是由许规一致的小网组成,网辅助我们更规范的排版、局。

超全面!栅格系统及其在后台设计中的应用总结

台系统设计中,由台页面主要以 Web 形式呈现,而对 web,用户已习惯通鼠标滚轮或滚动条(scrollbar)来纵向浏览页面内容,因此,在不考虑内容优先级的情况下,Web 以现竖直方向的「无」加载,即竖直方向以无延伸,因此基 Web 的台页面,它的栅系统在水平方向的栅以不现出来,我们在执行设计时只要在竖直方向持规律的变化就以。标准的栅系统简化为适用 Web 台的设计下图所示。

超全面!栅格系统及其在后台设计中的应用总结

上图,对台设计来讲,栅系统是由栏目(Column)跟水槽(Gutter)替分形成的,栏目(Column)是接纳网页内容的容器,水槽(Gutter)用来节相邻两个栏目间距,把控页面留白;由栏目跟水槽的宽度是以网为基单位来增加或者减小,所以栅化的一步需要先定义栅的原子单位「网」的大小。根据人的设计践以及其它已有规范经验,目前台栅系统网大小定义为8是最普适易用的。具原因有以下几点:

以被8整除

目前主流桌面设备的屏幕分辨率在竖直与水平方向基以被8整除,使用8为最小原子够普适。

我们取4、6、8、10、12为栅格的候原子单位,然后目前流屏幕分辨率与相除,判断各个分辨率在竖直(Y)与水平(X)方向否被候原子整除,统计结果如图。

超全面!栅格系统及其在后台设计中的应用总结

显然,对于目前场桌面设备屏幕而言,4是整除率最的一个原子,接来依次是8、10、6、12。但4作为基本原子实在过于小了,太小的步进单位将导致我们决策成本的增,因为我们将元素间距增4px或者减小4px视觉感受到的差异并明显,这种情况我们为了到那个「合适、满意」的间距,就需要反复调试,这就成了时间上的浪,尤对于没有经验的人,这点会更为突。但这种调整并合适,原因是后台管系统设计重点在于面向户使的效率与逻辑,次才是视觉呈现,使栅格系统的目的之一是想减设计师在「细节」上的纠结,希望设计师在更全的角看待设计,合时间,因此我们舍弃4。在剩的6、8、10、12个单位中,8的整除率最(80%),8像素作为一个步进单位的变,我们视觉上是感受到较为明显的差异,因此取整除率最的8做为栅格系统的原子单位。

符合「偶数原则」

8为单位符合「偶数原则」。偶数原则可在页面缩放中最大程的避免类似于0.5、0.75、1.25等次像素的现,从而使页面各类元素在大多数场景都有较精致的细节表现。

虽然对于后台设言,通常设师直接目标尺寸下行设,并此基础标注、切图给发实,并不存移动端那样需对各种尺寸、各种素密度的设备行配的况,但对于 Web 页面讲,仍存向向下配的可能,因从页面的兼性、可扩展性及可维护性层面讲,我们设师还必考虑的加远,遵循「偶数原则」可以程度避免各种潜的问题。

超全面!栅格系统及其在后台设计中的应用总结

前端开源组件库基于8的原子单位来设计

开发工程师使的前端开源组件库如 Metronic、Antdesign 等是基于8的原子单位来设计,因此如果设计师使8为基本单位的栅格系统,开发与设计师相互对接就会更方,开发实现页面时更质的还原我们设计师的稿件。

2. 建立基于原子单位的栅格系统

经过第一步讨论,我们现已确定后台设计的原子单位为8,而我们知道栅格系统是由栏目(Column)跟水槽(Gutter)交替分布形成的,接来我们要利原子单位确定栏目跟水槽在具体的页面中如何分布及它们各自的宽。

通常,一套后台设系统中,水槽宽度会几比较固的数(因后台系统的页面相对于其它类型的Web页面,表的加整齐、规律,所以留白的方式比较固,加之后台往往的数据、内需呈,所以尽可能提高页面利用率,可以留白的空间也比较限);栏目宽度加灵活,它可以根据页面水平方向尺寸的改变增或减小以响应页面的变化。

我们做后台设计时候首先需要确定在什么样分辨率下做设计,也是首先需要确定设计稿尺寸,设计稿尺寸确定后,便可立基于该尺寸栅格系统。假设页内容区域宽度为 W,栏目个数为 A,槽个数为 B,栏目(Column)宽度为 C,槽(Gutter)宽度为 G,则 W=A*C+B*G。栅格系统立初期,由于我们并不确定后会有什么样内容呈现我们页上,所以为了让栅格更加灵活、普适,我们先假定单个栏目与槽宽度是相,即C=8n(n=1、2、3、4…)=G,然后以此将页内容区域等分,形成初步栅格,后再按实内容需要,按比例调两者宽度或者按比例两者进组合,形成承载业务内容盒子。目前有两比较主流等分:12等分与24等分。

12等分

12等分栅格系统在流前端开发开工具库 Bootstrap 与 Foundation 广泛使用,适用于业务信息分组较少,单个盒子内信息体积较大后台页设计。

超全面!栅格系统及其在后台设计中的应用总结

24分

24分的栅格系统用于业务信息、信息分组较多、单盒子内信息体积较小的中后台页面设;相对12栅格系统,24栅格系统变化加灵活,合内比较多样复杂的场景。

超全面!栅格系统及其在后台设计中的应用总结

三、栅格系统的应用

1. 页面布局与版式设计

了解承载业内容的盒模型(Box Model)

建立好栅格系统后,就可以根据的实际业,在栅格系统上安排内容了。页面上最终承载内容的其实是一个个「盒(Box)」,这个盒的高度由盒要容纳的内容页面版式计决定,按8n规律变化;宽度则由栏目水槽按比例组得。

在栅系统上容纳业务内容的容器我们把它称之为盒子(Box),栅系统上的盒子其跟前端工程师写页面时用到的盒子是一致的。图所示,当我们浏览任何一个网页时,右键>检查元素(审查元素),在 style 菜单下就以看到个盒子结构。其中 Padding 就是主内容(Element)距离盒子外的距离,我把它称之为内边距,(Element 以是一个按钮,一段文、一图或者一个表等)而 Margin 就是相邻两个盒子间的距离,对应在台栅系统中其就是水槽的大小。完栅系统的盒子模型之,下一步我们需要根据具业务内容来确定盒子的宽度,也就是何用栅系统做际内容的局与版式设计。

超全面!栅格系统及其在后台设计中的应用总结

根据业内容配页面比例,确定盒宽度

以24栅格系统为例,一个24栅格系统可以根据业需要被2等、3等、4等、6等、8等、12等,还可以被1:1:1、1:2:1、1:3:2、2:3:3、1:2、1:3、1:5、3:5等不对称割,体采用哪种比例的组需要根据业需求来定,此所说的比例实际上就是盒的宽度。

超全面!栅格系统及其在后台设计中的应用总结

上图展示了盒在24栅格系统上的布情况,图中只列举了部比例,实际业中,同一个页面上使用一组比例值的组来布局是比较适的(如下图),组形式过多页面就会显得琐碎、杂乱,不利于阅读和使用。因为盒的高度根据内容来定,故下图中没有体现高度这一维度的变化规律。

超全面!栅格系统及其在后台设计中的应用总结

当完成上图规划后,需要做的便是根据实际内容往每个盒安排内容,做视觉交互的落地了。

2. 元素对齐与间距设定

栅格系统大的层面可以帮助计者更好的进行版式计内容布局,而的方面可以辅助计规范页面内各种素的对齐间距的定。从用户体验角度来讲,这者同等重要,从执行层面来讲,一先做版式计布局,然后再填充内容、调整细节。

栅系统辅助对齐的用类似各种设计软件中的参考,它能让我们更直观的安排、整内容的位置及对齐方式,以使内容变得规律、有序,方便用户浏览阅读,帮助用户提高获取信息的效率。

栅格系统对于元素间距设定的帮助是直观的,当我们定义了栅格原子单位为8时,这意味页面上各元素间距的变应遵循8n 的规律,一致的变规律页面富有节奏感跟韵律感,在页面一致性的同时减了设计决策成本。我们知道,栅格系统中水槽与栏目的变遵循8n 的变规律,此处 n 为大于0的正整数,即 n=1、2、3……但是于规范元素间距的8n,n 可是0.5、1.5这类包含二分之一8的情况,原因是实际工作中,我们面的情况是复杂的,这样处可间距的设定适应一些特殊的场景,从而使更灵普适。

超全面!栅格系统及其在后台设计中的应用总结

四、注意事项

1. 水槽宽度的设定

确定好内容模块比例后,会发现由于之前等的缘故,此水槽较宽,需要调整水槽宽度一个适的值。

水槽的宽度是8n,也就是水槽以以8为基单位去增加或减小。为减少设计决策成,我们先设定一系列水槽宽度,并定义每个宽度对应的使用场,根据每个场使用对应数值就以。我定义一组水槽的值是8、16、 24、32 、40,为区分它们的使用场我们依次为其命名为 XS、SM、MD、LG、XL。根据践经验,正常情况下,两个盒子间距(水槽)的值为24(MD)时,视上是最为舒适。

超全面!栅格系统及其在后台设计中的应用总结

五、栅格化工具推荐

1. Ps栅格系统工具

PS自栅格系统设:新建参考线版面(重点推荐)

Ps 功能叫「新建参考线版面」,打这面板后,预设这里可以看到 Ps 已预设了8列、12列、16列、24列的栅格系统,选择对应列数就可以看到页面参考线的变化。预设中「装订线」的宽度即栅格系统中水槽的宽度。默认均20px,我们可以根据之讨论的8的倍数原则,将其手动改24。

如预设栅格系统法满足我们工作需要,我们也可以自定义栅格系统,并能将栅格参数保存为预设,这样可以复利用自定义栅格系统了。栅格系统可以选择将其应用在前画板或者所有画板,十分便易用。由于是 Ps 自带参考线,所以它可以过快捷键灵活控制显示或隐藏。

超全面!栅格系统及其在后台设计中的应用总结

超全面!栅格系统及其在后台设计中的应用总结

利Ps标注工具Assistor Ps进行栅格系统的建立

Assistor Ps 在之前要是一款页面标注工具,但是随着蓝湖等自标注工具的流行,这个小软件基本没人了,但我发现它设置参考线的功还是很强大的,可媲美大名鼎鼎的 guideguid,就介绍给大。(包在末载,Win&Mac,解压后跟规软件一样,正就行)但是这个插件由于很多数值都要自己算,实际上没有 Ps 自带的建参考线面的功好,算是一个工具的补充。

超全面!栅格系统及其在后台设计中的应用总结

2. Sketch栅格系统工具

Sketch带栅格系统定:Layout Settings

超全面!栅格系统及其在后台设计中的应用总结

Sketch 端利用 sketch 自带栅格工具 Layout Settings 即可完栅格系统的设置,由于 sketch 的栅格具自的,与 Ps 类似,它也可以通过捷键速显示或隐藏,点击左下角「Make Default」还可以将自义的栅格系统设置默认的栅格系统,方便以后重复调用,但 sketch 貌似只能储存一组栅格系统的数, Ps 可以储存多组。

Sketch栅格系统插件:BootstrapGrid-maste

BootstrapGrid 一专门用于建立栅格系统的插件(插件文末件中下载),插件可以对栅格系统的基本数据性化的设,可以对多形状同时建立栅格系统,还可以通过捷键速调用。具体用法:先选中建立栅格的画板或者画板里的形状(可以多选),然后:插件>Bootstrap Grid(Plugins -> Bootstrap Grid)

栅格系统参数设计

超全面!栅格系统及其在后台设计中的应用总结

单个形状(画板)立栅格系统动图演示

超全面!栅格系统及其在后台设计中的应用总结

多个形状(画板)立栅格系统动图演示

超全面!栅格系统及其在后台设计中的应用总结

跨平台的web端栅格具

GridGuide 优点可以针对一种栅格系统4组不同水槽宽度的栅格化方案,能比较直观的比较不同水槽宽度下各栅格系统的视觉感受。使用方法:右角设置好页面宽度以及栏目数,页面内就会自动可以下载 png 图片的栅格。

超全面!栅格系统及其在后台设计中的应用总结

七、常见问题解答

当栅系统中奇数不避免的出现时,何处理?

理想状态下,我们应该整内容区域的大小,使其尽能成为以被8整除的尺寸,但际应用中,有时出现无法整除的情况。基对盒子模型的理,此时我们持 padding、margin 的值不变,改变盒子的大小去适应奇数的页面(元素)即,因为一致跟效率才是栅化要达成的首要目的,偶尔有一不「完美」的尺寸是完允许的,因为用户在际使用页面时,并不能看到我们使用的栅系统,也很难注意到几像素的变化,他们能感受到的是页面整呈现出来的节奏与韵律感,以及持续、一致的视语言带给他们的严谨、靠的心理感受。

栅系统必须以8为原子单位?使用其它数值是否以

首先需要指出的是使用其它数值当也以,栅系统只是手段,提升设计效率、减少沟通成、提高页面一致才是最终目的,所以果你所在团有其它栅化习惯,且一直以来效果良,么继续使用它也是没问题的。但是对设计新人,果能理前人的经验,并能的运用,对他们来讲,是少一弯路,更的完成设计工。

栅系统建立初期是否必须使栏目宽度与水槽宽相等,并等分内容区域?

建立栅系统时并不是必须使栏目宽度与水槽宽相等,并等分内容区域。篇文章介绍栅系统时采用种处理方式是为让大家更的理栅系统建立的原理与程,上,栏目的宽度在际应用中往往大水槽宽度,我们通常先计划水槽的宽度、内容区域总宽度与栏目的数量,时栏目的宽度通计得到,对响应式页面,栏目的宽度以是百分比而不是具的数值。

插件载:AssistorPs&BootstrapGrid

图片素作者:Avian Rizky

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

相关文章

栅格系统在UI设计和前端开发中是被应用的很广泛一套体系,但真正能掌握并很好运用的人却不多,本期我为大家找到这篇干货文章...
彩云译设计
今天跟大家聊一聊如何制定iOS的系统图标栅格系统的那些事。众所周知,在图标设计中都会使用统一的系统图标栅格系统。那么iOS...
App图标
栅格的前世今生 产品设计从理解用户到定义问题,再到探索方案并输出草图乃至视觉稿,每一个阶段都关系到一个产品的成败。而其...
ui设计
编者注:看过很多栅格系统的科普,还是看不懂?那本文绝对值得你花十分钟试一下!语言浅显直白,配图清晰易懂,保证轻松学会...
入门
@UX-BOY :本文主要与大家分享如何利用栅格系统完成后台页面响应式设计,介绍响应式设计的思路与方法。 一、什么是响应式?...
后台产品设计
经常看到很多 LOGO 初看一般,但只要加上了栅格线,感觉瞬间就上了一个档次。有个比较出名的例子,就是锤子手机的 LOGO。是不...
logo设计
一款 App 或 Web 产品,从用户体验的角度包含了战略层、范围层、结构层、框架层、表现层。而作为 UI 设计师,如果连「表现层...
图标
在这之前我得先提及一本书──《简约至上:交互式设计四策略》。这本书基本算得上是交互设计的入门必读书籍了,非常适合身处项...
UI