咨询,就免费赠送小米移动电源,咨询热线:18030402705当前位置: 主页 > 建站知识 > 建站指南 > 策划方案 >
推荐内容
联系我们
电话咨询:18030402705
E-mail:web@07fly.com
地址:成都校园路99号(西南交大旁)

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

作者/整理:07fly 来源:优设网 2018-09-13 Tag:


qboocibvcddvccrg.jpeg

图片版权所属:站长之家

@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 为基本单位的栅格系统,开发与设计师相互对接就会更加方便,开发实现页面时也能更高品质的去还原我们设计师的稿件。


本文零起飞网络为您整理编辑,版权归原作者所有,转载请注明原文来源出处。
本文章链接:http://www.07fly.com/Guide/plan/9199.html
07FLY专业做网站,网站建设,网站优化,主机托管,网站推广一条龙服务,让您省心到底