如何让你的设计看起来更有说服力?试试网格系统!

2022-8-23    seo达人


一、网格系统的组成

在深入了解网格的类型和使用准则前,让我们先来了解一下网格系统中涉及到的一些基本概念,比如列数、内边距、外边距等等。

1、列

图片

列(Column)是网格的基础,用来表示内容放置的区域。每一列的宽度以百分比而不是固定的数值来衡量,这样面对不同的屏幕尺寸,可以更灵活地进行设计。

日常设计中,最常使用的是12列等宽的网格系统,适用于大多数的页面和布局设计中。

2、内间距

图片

内间距(Gutter/Padding)是指每列之间的距离,也被叫做水槽。内间距能为页面提供呼吸空间,避免内容之间过于拥挤。

3、外边距

图片

边距(Margins)是列与边框之间的距离,边距绕过内容有上、下、左、右四个方向,在设计中我们可以针对每一侧设定和更改边距。

4、字段或模块

图片

字段或模块是行和列的交集。这些模块是页面的基础,所有设计元素都将适合网格中矩形卡片创建的这些空间单元。

5、界面设计与网格

如果说网格在过去对于印刷必不可少,那么今天网格在数字世界中仍是不可或缺的。

图片

网格成为开发数字产品的关键工具,为在所有设备上提供最佳的用户体验。因此,无论屏幕大小如何,设计师都必须能够在每个屏幕上通过最佳的方式组织内容。

 

二、如何在设计中使用网格系统?

网格是具有列、内间距和外边距的结构系统,其目的是帮助设计师组织界面的内容。

内间距的距离越窄,越会向用户传达「这些内容属于同一组」的感觉。

图片

同理,内间距越宽,看起来越像是不同类型的内容。

图片

需要注意的是,内间距的距离不要太宽,或者比每一列的宽度还宽,容易导致内容之间的留白过大,造成视觉浏览上的不连贯。

图片

此外,外边距的间距遵循与内间距相同的规则。可以灵活调整外边距,以便在内容和屏幕之间留出合适的间隔。

图片

图片

和内间距一样,屏幕中的外边距也不能太宽,这样会压缩页面中内容的展示空间,会让页面看起来很局促。

图片

 

三、使用网格设计的四条准则

网格的使用看起来很直观,但在UX或UI项目中使用网格系统仍有一些需要注意的规则。

1、将元素集中在每一列中

上面说到,在设计中常用到的是12列网格系统。那么12列网格为什么被广泛使用呢?主要原因在于12列网格更方便扩展不同的布局形式。

图片

▲ 12列网格可以一行排列两个内容,各占6列网格;一行排列三个内容,各站四个网格;一行排列四个内容,各占3列网格;一行排列六个内容,各占2列网格。

基本上,常用到的页面布局形式在12列网格中都可以实现。

图片

▲ 在每个内容之间留出足够的内边距。这里需要注意的是,内容的两侧要与每一列的边缘重合,而不是与内边距重合。

图片

▲ 当内容居中显示时,要始终在边缘留出一点空间,防止页面被内容填充的过于拥挤。

2、不要将列数作为内容填充

在网格系统下,设计应该填充整个内容的宽度,这样会让界面看起来更规范。

图片

不要让左右两列没有填充内容,让列数作为填充,这样会导致页面的外边距不统一,增加后期的开发成本。

图片

3、可以尝试脱离网格

在设计中,使用从网格中溢出的图像或元素也是可以的。

图片

例如我们想填充一个全尺寸的背景色或者图像,只需将图像拉到网格之外就可以。在网格和边距的示意下,开发人员也能够快速理解界面的尺寸信息。

4、注意内容之间的间距

在网格上放置不同的元素时,确保元素之间的左右间距、上下间距都是一致的,这样会让整个界面看起来更规范。

图片

 

最后

除了能够改善设计、减轻用户认知负担外,网格系统还能提升设计效率。有了网格我们可以快速衡量元素的间距、边距的精度,简化设计过程

另外,在规范的网格系统中,界面布局或内容上的修改也会变得更容易。

慢慢来比较快,希望对你有帮助!


作者:Clippp

转载请注明:学UI网》如何让你的设计看起来更有说服力?试试网格系统!

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加蓝小助,微信号:ben_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系01063334945。


分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。


蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



分享本文至:

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档