火星网校
墨言教育分享丨4种常见的UI网格系统
发布时间：2024-03-12 09:40:58 浏览量：160次
界面设计中的网格是一种对齐工具，它由一些横向和纵向的线组成。网格可以帮助设计师对齐图形、文字和图片，建立这些内容的秩序和规则，最终保证设计一致性。网格不仅可以帮助规划内容和保持页面一致性，还可以帮助设计师规划页面的留白，留出足够的负空间，使得页面具有呼吸感。在界面设计中，网格的类型有基线网格、手稿型网格和模块化网格等。
看一下这个网格是什么？
列宽
列宽是网格系统中的宽度，用来帮助我们定义内容宽度和布局的垂直部分，在界面设计中，网格通常由多个列组成，每个列都有不同的宽度和比例，以便更好地展示和组织页面内容。
在网格系统中，列宽通常以百分比或像素为单位进行定义。设计师可以根据需要调整每个列的宽度，以便更好地适应不同的屏幕尺寸和设备类型。通过使用网格系统，可以更好地控制页面布局和间距，从而使页面更加整齐、清晰易读。同时，网格系统还可以帮助设计师提高工作效率和减少出错率。
水槽
是指列与列之间的空白区域，也称为外边距或外水槽。水槽可以帮助控制页面布局和间距，使得页面更加整齐、清晰易读。同时，水槽还可以用来设置内容的对齐方式和填充。在某些布局中，设计师可以使用水槽来控制列之间的间距和平衡布局。
在网格系统中，水槽的宽度通常与列宽相关。有些系统会随着设备宽度的增加而增加水槽的宽度，但也可以保持固定。水槽可以用来容纳内容的装饰元素，如边框、背景色、图片等，同时也可以用来分隔内容区域和页面的其他区域。
边距
在网格系统中，边距是指页面内容与浏览器窗口边缘之间的空白区域，也称为外边距或外部水槽。边距可以帮助控制页面布局和间距，使得页面更加整齐、清晰易读。通过调整边距大小，可以更好地控制页面内容与浏览器窗口之间的距离，从而更好地适应不同的屏幕尺寸和设备类型。
在网格系统中，边距通常以像素、百分比或自动等方式进行设置。设计师可以根据需要调整边距大小，以便更好地适应不同的屏幕尺寸和设备类型。同时，边距还可以用来设置内容的对齐方式和填充。在某些布局中，设计师可以使用边距来控制内容区域和页面的其他区域之间的间距。
分别在 Web、平板和移动屏幕上的 12 列、8 列和 4 列网格（Figma）
现在，一般来说，网站上的网格有 12 列、24列，平板电脑上有 8 列、12列，而手机上有 4 列、6列，但当然可以根据要求和设计师的不同而有所不同。设计中没有什么是固定的！！
不同的UI网格系统示例
1. 移动界面4列栅格
列网格布局中的低保真线框 (Figma)
网格系统的设定（使用软件：Figma)
2.基线网格
基线网格是排版中常用的一种对齐方式，它可以使多个段落根据基线进行对齐。基线网格能够覆盖整个跨页，但是不能为主页指定网格。基线网格与Word中的网格线基本相似，都是用来对齐文本的辅助工具。在排版时，设计师可以根据需要将文本对齐到基线网格，以便更好地控制文本的间距和布局。
Figma 中的基线网格（左），基线网格中的书页（右）
在 Figma中设置基线网格
设置高度为 8 px 的基线网格 (Figma)
3.模块化网格
模块化网格是一种布局，它将内容分成单独的模块，这些模块位于网格中。这种布局与传统的网格布局不同，因为每个模块的大小和形状都是相同的，从而可以创建一个完美的网格设计。这种布局通常被称为完美的网格设计。
在模块化网格布局中，每个模块将整齐地堆叠在另一个模块的顶部，并水平地坐在另一个模块旁边，以创建一致的设计模式。这种布局可以带来许多优点，包括响应迅速、产品页面设计、易于使用等。
值得注意的是，在使用模块化网格布局时，应该注意网格的大小、每个模块的大小以及负空间的使用，以确保设计的一致性和美观性。此外，设计师应该利用创造性的技巧来增加模块化网格的视觉趣味性，以吸引用户的注意力。
模块化网格（Figma）
灵活的模块化网格
排列在网格上的内容（左），移除网格后的内容（右）（Figma）
如您所见，我一次使用 2 或 3 个模块的组合来为此页面创建“卡片”。
现在，在 Figma 中设置模块化网格
在 figma 中设置模块化网格
落实在产品表现上：
4.分层网格
分层网格是一种由多个网格组成的布局。这种布局通常用于创建具有不同内容和功能的多个区域，从而可以更好地组织页面内容。
分层网格布局通常由多个不同的网格组成，每个网格都有不同的列数和列宽。这些网格可以水平排列或垂直排列，以便更好地组织页面内容。通过使用分层网格布局，可以更好地控制页面布局和内容，从而创建更加有序和易于使用的界面。原理是这样，但是我们在实际工作当中，没必要花费大力气去做这种复杂的分层网格，自动布局可以完全替代这种分层网格。
但是作为一个网格的种类，分层网格给我们的启发就是模块有大小，可以根据设计需求进行调整，根据你自己的喜好去调整。
热门课程推荐
热门资讯
-
想要了解iPhone6界面设计的尺寸规范吗？这里为您详细介绍iPhone6的UI设计尺寸规范，包括界面尺寸、图标尺寸、可点击高度规范、搜索栏高度规范以及界面元素之间的距离规范。
-
将为大家介绍12个绝佳的UI设计网站,这些网站不仅可以为你提供灵感,还可以帮助你学习新的技巧,助力你的创意之旅!dribbbleDribbble 是一个面向设计师的...
-
3. 移动端UI设计中常见的5种APP界面类型，你get到了吗？
通过介绍移动端UI设计中的闪屏页、引导页、浮层引导页、空白页和首页等5种APP界面类型，帮助大家更好地了解UI设计的基本知识
-
怎样可以提升你的UI设计能力!第一个:站酷站酷想必是设计师都知道的一个网站,里面不止有UI设计的资源,还有其他设计的,不如:平面设计、网页设计、字体...
-
在移动端设计中,列表页和表单页是不可或缺的部分。一个好的列表页和表单页设计能够让用户轻松地获取信息并产生点击欲望,从而提高点击率。本文将为你...
-
对于想要提高自己的设计能力和创造力的小白和UI设计师来说,这本书是一个很好的选择。4.《设计的觉醒》(IKKO TANAKA)推荐理由: 这本书是日本现代平面...
-
探索零基础UI设计培训的时长与薪资前景。了解数字艺术教育领域的专业课程，以及培训后的职业发展机会。
-
8. 设计中的色彩心理学:浅析中西方色彩的历史演变与设计应用
摘要:本文探讨了色彩的历史演变和设计应用。通过对色彩在早期文明社会中的实用运用、不同文化背景下色彩观念的差异、色彩在设计中的重要性以及新兴技...
-
ui设计应该让用户一目了然,能够快速找到所需的信息和功能。在设计过程中,应尽量使用简洁的图标、文字和色彩,避免过多的视觉干扰。符合用户习惯:ui设...
-
10. 武汉UI设计培训班费用怎么样？想学UI设计要多少钱？
想了解武汉UI设计培训班的费用是多少吗？不知道学UI设计要花多少钱？不妨看看这篇文章，了解UI设计培训班的学费价格以及学习内容。
