UI/UX设计布局大法:网格的实践技巧和高效的8点网格系统
空间和网格是任何设计的基础。一旦掌握并正确使用,网格可以帮助您为您的设计创建可靠且具有视觉吸引力的解决方案。
本文为大家带来UI/UX设计师Buninux和产品设计师Rumman分享介绍的网格的最佳实践技巧和高效的8点网格系统。
01
什么是网格
▼
术语:网格由网格单元组成。布局放置在网格上,并具有一定数量的列。列的左右边距,以及每列之间的填充。
02
网格的最佳实践技巧
▼
Tip1 明智地选择数字
虽然类似Bootstrap的12列网格是最受欢迎的选择,但这不是强制性的。选择网格时,请选择您的设计真正需要的列数。
Tip2 了解您的限制条件
始终考虑您正在设计的屏幕。了解他人如何处理和操作它。要充分利用这些限制,并学习使用它们进行设计。
最常见的屏幕分辨率 (px) :
桌面:1440x1024;
平板电脑:768x1024;
手机:320x640
Tip3 水平和垂直间距
考虑垂直和水平间距,以使您的布局更具吸引力和一致性。
Tip4 塑造垂直节奏
使用基线网格来排列内容并为您的文本和布局元素带来视觉一致性。
提示:调整字体行高以匹配基线网格。
例如:如果您选择 4px 作为基线/网格单位,为了对齐文本,您需要将字体的行高设置为单位的倍数,这意味着行高应该是 4、12、32、64 等.
Tip5 使用框架和颜色的力量
使用框架作为工具,将用户的注意力集中在某个布局部分。在需要的地方添加额外的视觉重量。
Tip6 走出网格
将某些元素排除在网格之外。使用这个分解技巧来增加价值并使您的设计的某些部分脱颖而出。
Tip7 调整网格
确保您的布局适应常见的屏幕尺寸,并提供良好的移动用户体验。确保始终在不同的屏幕上检查您的设计。
Tip8 学习没有网格的设计
学习使用网格进行设计,而不必将其实际带到您的画布上。随时观察您的布局,不带“网格眼镜”,为您的任务找到最有创意的解决方案。
03
8点网格系统
▼
为什么使用8点网格系统?
屏幕尺寸有很多种,使用8等数字来调整大小和空间元素可以轻松且一致地缩放各种设备。此外,大多数流行的屏幕尺寸都可以被8整除,很容易适应。
8pt 网格的原理是使用8的倍数(8、16、24、32、40、48、56 等)来对元素的布局、尺寸、内边距和边距进行设置。
8点网格系统的价值
· 它为元素提供视觉层次结构,并在保持质量的同时能以更少的决策来推动一致的可扩展性,设计 UI 时看起来更干净漂亮。
· 是设计师和开发人员之间最好的沟通系统。开发人员可以轻松理解并关注 8pt 增量,而不必每次都进行测量。
”如果您使用 8pt 网格系统,那么您的设计看起来会好 10 倍。对于界面或 UI 设计,我使用Figma 软件。您可以使用其他软件。在开始设计之前,我首先设置了一个网格系统,它可以帮助我更快地工作。此外,当我将设计交给开发人员时,他们可以轻松理解设计。“
究竟什么是“点”?
点 (pt)是取决于屏幕分辨率的空间度量。
当我们开始 UI 设计时,我们使用小画板(iPhone X 为 375x812),但实际设备的屏幕分辨率很大(iPhone x 为 1125x2436 或 5.8 英寸)。发生这种情况是因为在 iPhone X 中,画板的渲染速度是 3 倍 (@3x),因为它的 Super Retina 显示屏具有 3 倍的 PPI(每英寸像素)。
设计最小尺寸 (@1x) 的原因是,它允许我们将资产缩放到不同设备所需的不同尺寸,同时保持像素完美的渲染。
使用8点网格和Bootstrap设置布局系统
如果您正在为Web设计,那么您必须进行响应式设计(在所有设备上看起来都不错的网页)。此外,在为移动设备设计时,您必须确保它适合所有设备。这就是设置布局系统(8 点网格系统 + Bootstrap)很重要的原因。
首先,对于水平节奏/网格,使用 12 列布局的标准引导网格系统,间距宽度为 24px (1.5rem)。如果您使用 1440 像素(桌面尺寸)的画板,则在容器的每一侧使用 60 像素的边距。
对于垂直节奏/网格使用 8px(高度),因为当您使用 8 个点使用排版、图标、卡片、按钮等时,它将很容易适合您的布局系统。
元素之间的间距系统和8点网格
间距在 UI 设计中非常重要,因为它使设计整洁干净。UI 要看起来合乎逻辑(对开发人员友好)、有吸引力且美观,最好要使用 8 点原则:8px / 16px / 24px / 32px / 40px / 48px / 56px 等元素之间的所有每列填充和间距 (如果需要更紧凑,有时可以使用 4px )。
当我设计时,我将我的间距值定义为变量,以便开发人员可以轻松地理解我的间距系统。
图像和8点网格
设计时请确保使用SVG格式。如果您打算使用或设计图标,请使用 8 的倍数(16×16、24×24、32×32、40x40 等)。它很容易适应布局系统。
排版和8点网格
排版上的 8pt 网格在整个设计中提供了更加和谐的垂直节奏。为了快速创建一致的排版系统,有时我会使用这个网络工具:Type scale。
字体大小可能因设备而异,可能是 14px、15px、21px 等,但重要的是行高不会。行高应该是 8 (8, 16, 24, 32 ...) 的乘积,但如果需要,您可以使用 4 (4, 8, 12, 16, 20, 24...) 的乘积。我个人使用 4 的乘法来表示行高,因为它可以提供更细粒度的控制并带来更好的结果。
最后还是要提醒大家,您不必严格100%遵守此网格系统。我们是设计师,不是机器人。因此,如果一个组件与8无关,但设计看起来不错且很合适,那就打破规则。经验和规则不仅能帮助大家更高效地做出更好的设计,更能启发我们有更多的思考和创新。
参考来源:Buninux / Rumman
(部分图文来自网络,若有侵权,请联系删除。)
文字丨Jelly
编辑丨Jelly
加老D私人微信,朋友圈更多精彩
责任编辑: