如何使用8pt栅格系统进行UI界面设计?怎么应用?

用户体验   2022-06-18

保持合理的间距是UI设计的基础,设置好颜色、排版、间距,是你数字化产品中的基础。尤其是间距的设置,可以获得更好的易读性来改善产品的用户体验,消除了设计和开发时的猜测和决策疲劳,推动UI的扩展性和一致性,通过赋予元素视觉层次来传达意义 如果您是设计师,您的输出只会……看起来更好。

设置间距系统
当用Sketch进行设计用户UI界面时,首先,为您的栅格系统设置基数。参考google的Material Design 3设计原则,元素之间的所有填充/边距(有时需要 4px,如果你需要紧缩的话)使用 8的倍数进行分割:8px / 16px / 24px / 32px / 40px / 48px / 56px ...... 重点是你正在为间距进行一致性建设。

关于行距垂直的设置
很简单,为了在使用 8pt UI 网格时保持垂直节奏,我们使用了以8pt为系数的栅格(4pt 基线也很好用) 
为何要使用8pt栅格系统UI设计?在Sketch中怎么应用?

为何要使用8pt栅格系统UI设计?在Sketch中怎么应用?


有什么帮助呢?
基于这样的元素模板,我们可以快速构建一套UI组建规范或规则,这些规则将在整个产品中扩展并保持一致性,节省时间和猜测, 开发人员也可以通过这些标注更好的理解设计师的想法。

关于图标尺寸
使用 SVG 并像这样设置,确保你为你的图标加框,因为它们会有不同的尺寸:并且自然使用 8 的倍数。这些是 64x64,因此适合 UI 网格。无论如何,大多数图标都是为这些尺寸设计的(16x16、24x24、32x32 等)。 如果您需要更改一个图标并且它在 100 个不同的地方使用,那么您只需更改这个符号即可。

文本元素和行高
关于行高,确保文本元素落在网格内可能会很棘手。作为一个广泛的规则,让基本的处理乘以 1.5 倍数。
结果如下:
16 点 / 24
24 点 / 36
32 点 / 48
将字体大小乘以您选择使用头部的行高(1.5倍行高)
为何要使用8pt栅格系统UI设计?在Sketch中怎么应用?


最后,
对于新产品,创建带有栅格系统/文本元素/间距的基本设置(基于UI组件库设计指南)并在创建组件时添加相应的规则,将提升您对产品的定位和想法,同时可以确保与整个团队分享并提升整体工作效率。

维好维可-用户体验体验创新设计

联系我们:

关注我们微信

关注我们,持续输出与分享

+86-21-51115850
©2010-2022 维好维可 | 用户体验创新设计咨询公司-版权所有
沪ICP备19006116号-1

请留下您的联络方式
我们将在两个工作日内安排专人与您联系

合作咨询
+86-21-51115850
© 2010-2022  维好维可 | 用户体验创新设计咨询公司
沪ICP备19006116号-1
维好维可-微信二维码