大家好,我是布莱恩。网格系统在网页设计中并不少见,但在移动端设计中却少有人考虑,其实如果能掌握一定的排版布局技巧,制定合理的网格布局规范,设计界面时就可以更高效的产出,减少思考布局的情况。以下是关于网格布局的的分享内容:
好吧,不是一切,别忘了还有颜色的因素,也别忘了还有字体样式的因素。但如果你把布局网格先做好,你就离搭建出一个更好看且可以正常使用的 UI 界面不远了。
布局网格如果有一致的、可扩展的间距,可以在设计和开发时帮你消除疑惑。它可以让你做更少的设计决策,使项目运行得更快。
8pt 网格是网格系统中最常用的一种,让我在这篇文章中告诉你吧。
下文均用 pt 表示
一个 pt 是依据设备的屏幕分辨率测量间距的单位。最简单的运算解释就是 1x 屏幕分辨率 1pt = 1px 。
「很久很久以前」,当时的屏幕普遍都是1x分辨率;1pt 等于 1px。然后逐渐出现了视网膜屏(Retina 2x)和超级视网膜屏(Super Retina 3x),计算方法就开始发生改变了。当你为 iPhone X (3x) 屏幕做设计的时候,1pt 就会被每英寸以 3 倍的像素渲染。
举个例子,如果你有一个 24x24px (1x) 的图标,当你导出成@2x和@3x的图片资源时,也就是 48px(2x) 或者是 72px(3x) ,屏幕渲染时它们会分别在视网膜屏和超级视网膜屏下显示完美。
我一直推荐在 1x 画板下做设计,然后根据需求导出不同的尺寸 (@2x, @3x 和其他比例),这可以减少混乱。
像我在上文提到的一样,不同的屏幕尺寸和像素密度在持续不断的增加,这会让资源产出工作更加复杂。
使用像 8 这个偶数,来定义你设计的界面元素的尺寸,会让你在适配各种各样的屏幕更加轻松和一致。
8pt 网格的基本规则是,在你设计的界面元素中,使用 8 的倍数 (8, 16, 24, 32, 40, 48...) 来作为外边距,内边距和尺寸的数值。
我在设计 UI 界面时经常会用到 8 的倍数,但在特殊场景时,比如在我要给可显示范围有限的屏幕做设计时,我也会用 4pt 。
(原文中使用 Hard Grid 和 Soft Grid,直译成硬网格和软网格不是很合适)
为了达到设计目的,大部分人会选择「随意网格」!
在以前我设计 UI 界面的时候,我也会经常选择使用「随意网格」的方法。你只需要测量好各个元素之间是 8pt 的倍数就可以了。
而与之相对的「固定网格」的方法,就是在之前就定义好 8pt 的倍数的固定网格模型里填入元素。但我发现,在搭建界面的时候有点太死板和不切实际了。
当遇到图标和 8pt 网格的大部分情况下,你会发现大部分图标尺寸都已经被设计成了 8 的倍数 (16x16, 24x24, 32x32..)
如果你设计的图标尺寸不是 8 的倍数,就尽量确保你把图标放入你设计好的控件里,在控件内把图标缩放到 8 的倍数,这将保证图标在你设计的UI界面里,展示效果可以保持一致。
到使用文字的时候,同时使用文字的 4pt 基线网格方法和布局的 8pt 网格方法,将使你的设计在垂直排布上显得得更加和谐。
只要将你的文字与 4 的基线网格对齐,就是说要将文字的行高参数定为 4 的倍数(4,8,12,16,20...)
为什么数值是 4 呢?对于我个人而言,我发现在过去使用某些特定字号的时候,使用 8 的倍数会导致文字行间距离得太远。
在文字中使用 4pt 基线网格可以让你的设计更精细,带来更好的效果。
希望以上对 8pt 网格的简要概述让你在布局的时候更加自信,更一致,少一点设计疑问,少一点做设计决策。
试试 8pt 吧,你的设计看起来会好看 10 倍的。
更多8pt的使用技巧:
更多网格系统的设计技巧:
欢迎关注作者微信公众号:「布莱恩学设计」
复制本文链接 文章为作者独立观点不代表优设网立场,未经允许不得转载。
发评论!每天赢奖品
点击 登录 后,在评论区留言,系统会随机派送奖品
2012年成立至今,是国内备受欢迎的设计师平台,提供奖品赞助 联系我们
AI时代的设计师生存手册
已累计诞生 607 位幸运星
发表评论 已发布12条
↓ 下方为您推荐了一些精彩有趣的文章热评 ↓