大家好,我是布莱恩。网格系统在网页设计中并不少见,但在移动端设计中却少有人考虑,其实如果能掌握一定的排版布局技巧,制定合理的网格布局规范,设计界面时就可以更高效的产出,减少思考布局的情况。以下是关于网格布局的的分享内容:

学会8pt网格系统,创建超强页面布局

在 UI 设计中,网格布局就是一切

好吧,不是一切,别忘了还有颜色的因素,也别忘了还有字体样式的因素。但如果你把布局网格先做好,你就离搭建出一个更好看且可以正常使用的 UI 界面不远了。

布局网格如果有一致的、可扩展的间距,可以在设计和开发时帮你消除疑惑。它可以让你做更少的设计决策,使项目运行得更快。

8pt 网格是网格系统中最常用的一种,让我在这篇文章中告诉你吧。

究竟什么是点(point)呢?

下文均用 pt 表示

一个 pt 是依据设备的屏幕分辨率测量间距的单位。最简单的运算解释就是 1x 屏幕分辨率 1pt = 1px 。

「很久很久以前」,当时的屏幕普遍都是1x分辨率;1pt 等于 1px。然后逐渐出现了视网膜屏(Retina 2x)和超级视网膜屏(Super Retina 3x),计算方法就开始发生改变了。当你为 iPhone X (3x) 屏幕做设计的时候,1pt 就会被每英寸以 3 倍的像素渲染。

学会8pt网格系统,创建超强页面布局

举个例子,如果你有一个 24x24px (1x) 的图标,当你导出成@2x和@3x的图片资源时,也就是 48px(2x) 或者是 72px(3x) ,屏幕渲染时它们会分别在视网膜屏和超级视网膜屏下显示完美。

我一直推荐在 1x 画板下做设计,然后根据需求导出不同的尺寸 (@2x, @3x 和其他比例),这可以减少混乱。

为什么是 8pt 呢?

像我在上文提到的一样,不同的屏幕尺寸和像素密度在持续不断的增加,这会让资源产出工作更加复杂。

使用像 8 这个偶数,来定义你设计的界面元素的尺寸,会让你在适配各种各样的屏幕更加轻松和一致。

8pt 网格的基本规则是,在你设计的界面元素中,使用 8 的倍数 (8, 16, 24, 32, 40, 48…) 来作为外边距,内边距和尺寸的数值。

学会8pt网格系统,创建超强页面布局

我在设计 UI 界面时经常会用到 8 的倍数,但在特殊场景时,比如在我要给可显示范围有限的屏幕做设计时,我也会用 4pt 。

使用「固定网格」,还是「随意网格」的方法?

(原文中使用 Hard Grid 和 Soft Grid,直译成硬网格和软网格不是很合适)

为了达到设计目的,大部分人会选择「随意网格」!

在以前我设计 UI 界面的时候,我也会经常选择使用「随意网格」的方法。你只需要测量好各个元素之间是 8pt 的倍数就可以了。

而与之相对的「固定网格」的方法,就是在之前就定义好 8pt 的倍数的固定网格模型里填入元素。但我发现,在搭建界面的时候有点太死板和不切实际了。

图标与 8pt 网格

当遇到图标和 8pt 网格的大部分情况下,你会发现大部分图标尺寸都已经被设计成了 8 的倍数 (16×16, 24×24, 32×32..)

如果你设计的图标尺寸不是 8 的倍数,就尽量确保你把图标放入你设计好的控件里,在控件内把图标缩放到 8 的倍数,这将保证图标在你设计的UI界面里,展示效果可以保持一致。

文字样式与 8pt 网格

到使用文字的时候,同时使用文字的 4pt 基线网格方法和布局的 8pt 网格方法,将使你的设计在垂直排布上显得得更加和谐。

只要将你的文字与 4 的基线网格对齐,就是说要将文字的行高参数定为 4 的倍数(4,8,12,16,20…)

为什么数值是 4 呢?对于我个人而言,我发现在过去使用某些特定字号的时候,使用 8 的倍数会导致文字行间距离得太远。

在文字中使用 4pt 基线网格可以让你的设计更精细,带来更好的效果。

最后

希望以上对 8pt 网格的简要概述让你在布局的时候更加自信,更一致,少一点设计疑问,少一点做设计决策。

试试 8pt 吧,你的设计看起来会好看 10 倍的。

更多8pt的使用技巧:

更多网格系统的设计技巧:

欢迎关注作者微信公众号:「布莱恩学设计」

学会8pt网格系统,创建超强页面布局

点赞 11
收藏 63
继续阅读相关文章

发表评论 已发布 10

还可以输入 800 个字
 
 
载入中....
10 收藏