to 用户内容布局的规律性,减少了用户的认知成本:栅格一定程度上从设计师的角度定义了对齐关系,留白关系,图文的比例分割关系等排版中重要内容的排布规则,帮助我们更好的执行设计,输出更具有平衡感和秩序感的版面,清晰的页面信息展现,有利于提高用户的阅读和浏览效率,减少认知成本。 to 设计师提升决策效率与设计输出的统一性:对于较大的团队,设计师使用栅格系统能够降低决策成本,采用一套统一的标准来对设计师进行约束和高效协同,让设计师快速定位通用规则并执行设计,提高设计师的决策效率,规范设计产出的质量。同时也避免了各式各样页面出现的混乱场面,当存在多业务线共用同一系统规范或者多设计师协作设计项目时,栅格系统利于帮助加强设计一致性,统一输出标准。 to 开发提高设计还原度,减少解释成本:在与开发侧对接协作过程中,我们有一套自上而下的有规可循的设计规律,且规则计算的原理与开发习惯保持一致,能避免细节的反复沟通,提高开发的设计还原度,减少不必要的解释成本。此外栅格同样利于设计师和开发人员对组件和模块的复用,进一步提高协作效率。 to 响应式更加规律性、合理性的实现自适应:现如今多屏设计是商业设计中不可或缺的一部分,响应式设计自然也已成为设计中必不可少的一环,栅格系统的建立,可以让响应式布局变得有规可循,兼容不同的设备尺寸,更加规范合理的完成页面在多平台多尺寸下的自适应设计。
4. 栅格的构成要素
网格(Gird):栅格系统的最小单元
列(Column)
水槽(Gutter)
边距(Margin)
栅格总宽(Container)
容器盒子(Col-n)
市面上各系统对于栅格的名词描述各有不同,新手往往看的越多,越迷惑,其实大可不必纠结具体叫法上的细微差异,万变不离其宗,理解其本质表达的意思和栅格的结构原则即可,下面会对这些基础名词进行一些解释。 a. 网格(Gird):最小单元-8像素原则网格(Gird)的基本构成就是单元格,由格子组成网,形成网格。最小单元格是界面的单位基础,所有界面元素都按照这个基础单位布局分布,它对于创造性的决策具有重要的指导意义。通常,我们利用 8 作为最小单元格建立网格。(文字分开图片跟随文字也分开)使用 8 的倍数来定义模块的间距与元素的尺寸 那么为什么是8,而不是别的数字?原因如下:a1. 偶数思维:8作为偶数,能适应市面上绝大多数设备屏幕,更为普适,且又能保证在输出各种倍图时尺寸不出现奇数以及0.5、0.75等次像素的出现(iOS导出1、2、3倍图,Android导出1、1.5、2、3、4倍图均为偶数) a2.规律性:所有元素以8像素为步进单位,利用8或8的倍数规范元素和间距大小,(例如使用4、8、16、24、32等和8具有规律关系的数字)有规可循 a3. 节奏感:相比于6、10 等数字,以8为单位,在视觉感受上既不显得过于琐碎,也不会因为间隔太大而显得内容分散,更容易保证页面效果的协调性a4. 目前市面上众多开源代码也都以8的倍数作为默认设计大小,可行性已经得到多轮的验证,设计师在与开发对接过程中对页面有较为统一的理解,有效降低合作成本,在设计还原度上也更有保障划重点:注意这里给的是建议尺寸,最小单位的制定还需要结合具体的使用场景来决定,我们以解决问题为最终目的 b. 列(Column)列(Column)的作用通常是用来对齐内容,列也是栅格的数量单位,大家可以理解设置栅格数量就是设置列的数量,如 12 栅格就有 12 列、24 栅格就有 24 个列,通过控制列数,可控制界面排版的呼吸节奏,列数越多,内容排布可以越精细,也容易分割的太细碎,反之列数越少,内容排布也越容易稀疏松散。 c. 水槽(Gutter)理解了列,再来说水槽(Gutter),水槽就是列与列之间的分隔间距,这里水槽的作用是帮助区块内容做分隔,需要注意,水槽内不可放置任何板块内容。 水槽宽度在一定程度也会对界面的风格有影响,水槽越大,留白越多呼吸感越好,适合一些轻松的内容浏览类页面展示,相反水槽越小,留白小内容紧凑,适合一些严谨的工具型面板类内容展示,各有利弊,大家可根据设计目标权衡设计策略。 d. 边距(Margin)边距(Margin)有时候也会被叫安全边距,是指设计内容距离屏幕边缘的距离,顾名思义,安全边距内是禁止放内容的,可以类比为平面设计里的出血概念,主要用来控制屏幕核心内容的展示边界。边距值越小,界面核心内容的有效利用空间越大,布局相对来说会比较宽松,相反,边距值越大,两侧留白大,呼吸感强,但有效利用区域相对小,内容排布相对更紧凑,也可能会容易拥挤。 这里建议界面的边距可以根据屏幕尺寸做适配,通过断点响应变化,这样可以更好的保证在不同屏幕上界面呼吸节奏都相对舒适。 e. 栅格总宽(Container)栅格总宽(Container)就是指页面栅格系统的总宽度,即所有列宽加水槽宽度加安全边距的总和。 f. 容器盒子(Col-n)建立好基础栅格之后,我们可以根据内容去定义一块内容占用几个列的宽度,我们把这个区域理解为容器盒子,容器用来结合下级组件,也可以是对文字、图片、按钮等多个复杂元素的集合,按照页面结构可以由小到大依次从组件 – 容器 – 模块 – 页面 – 场景进行组合拼装最终形成设计方案
5. 如何制定栅格系统
定义栅格系统之前,我们先了解熟悉下计算公式, 如果你已经理解了前面的栅格要素的作用和用法,那么接下来就可以按照以下步骤在自己的画板上创建栅格系统 a. 确定栅格区域注意栅格区域不一定是画布的全部区域,我们可以先将页面按照功能模块划分为全局控制层、内容层、背景层、临时层。通常我们大多是对内容层进行栅格化。 通常web端常用的三种布局如下图所示,建议按照实际使用场景灵活的选择布局形式后,再确定需要栅格化的区域。 当我们遇到一个wed端的内容浏览类网站,一般会采用上下布局,通常会基于 1920 或 1440 尺寸作为设计稿宽度,但由于需要适配主流尺寸中的最小尺寸,核心内容展示会控制在 1024(这里不是绝对值,不同产品根据实际情况数字会有上下浮动),其他空白区域即为安全边距,这是web网页中常见的一种适配方案。 b. 选择栅格列数12栅格和24栅格是目前比较常见的列数结构。选择使用哪种栅格结构,取决于产品对设计的要求。12栅格:当产品涉及到多平台发布,内容较为简单,单个容器盒子内信息面积较大时,可以考虑采用12栅格来兼容。 24栅格:如果当前产品发布于pc,内容较多,且功能繁杂时,则需要更灵活的栅格系统去规范信息内容的布局,这时我们可以考虑采用24栅格,国内较为主流的企业级设计系统 Ant Design采用的是24 栅格。 c. 定义水槽(Gutter)和边距(Margin)前面讲到过在产品 UI 中边距(Margin)的值对视觉的呈现的影响,这里就不做过多赘述。这里科普一个叫做“Rem”的计算单位,(Rem 是开发常用的计算方式,设计和开发基于同一套原理进行设计,在协作过程中能够极大提高协作效率,并且减少维护成本),通常制定栅格系统时,我们可以用1Rem的值来定义水槽(Gutter),它的灵活最强,可作为栅格系统的基准值。而边距(Margin)的值通常就是1.5Rem 或者 2Rem。基于常用的4倍或者8倍间距系统规范,一般最为常用的基础间距为 4,8,16,24,32,48,我们可以在这些基础值里去选择匹配产品的栅格系统基准值。 通过Rem基准值,我们还可以轻松得到一套匹配的间距系统,以1Rem=16为例,可以得到以下间距系统:掌握以上要点,即可get一套匹配产品设计要求的栅格系统。