发布时间:2020-3-10 分类: 电商动态
8点网格已经流行了一段时间。我第一次意识到这种设计方法是在我看到Google的Material Design设计规范之后开始的。我发现这种设计方法非常适合我的科学设计师,所以这就是你应该使用8点网格的原因。
阅读本文后,您将学习:
1. 8点网格系统的含义
2.为什么要使用8点网格系统
3. 8点网格系统有哪些技能?
什么是8点网格
它是创建一个8点的网格作为一个单元,所有元素大小是8的倍数。
△材料设计规范图像
为什么是8点?
为什么它基于8个点来定义网格而不是6或10?引用Quora的一个问题的答案:
如果使用8,则可以轻松调整大小,而不会使用半像素或四分之一像素。 8/2=4,4/2=2和2/2=1。如果从10开始,你最终会得到2.5像素,然后是1.25(10,5,2.5,1.25和hellip;),你会明白这一点。 8为您提供比10./Sjur O. Sundin更高的灵活性,高级UX架构师/设计经理–加利福尼亚州圣地亚哥/
意思是:如果你使用8作为最小的设计单位,你可以轻松缩小你的设计尺寸,8/2=4,4/2=2,2/2=1。如果从10开始,缩小的网格单位可能是2.5像素,下降1.25像素。
△8次; 8个元素减少了50%
如果您是2x屏幕设计,1x是奇数尺寸。如果要使用偶数尺寸的屏幕(基本上屏幕尺寸均匀),将在对齐位置生成小数点。如果是Double的缩放,这次元素大小产生了一个小数点,我相信你不能承受清洁。
为什么要使用这个系统?
以下是材料设计中的一些设计指南以及Spec的一篇文章中的信息,并结合您自己的经验来说明:
1.更统一的用户界面
当所有元素大小符合相同规则时,您自然会获得更加统一的UI。
△材料设计规范图像
2.减少选择=节省更多时间
也许在设计元素时,或者在定义间隙时,使用8更宽一点,所以你要逐位调整它。但是当你选择间隙为7或8的时候,你做其他事情的时间就会浪费掉,最后效果的差异实际上并没有那么大。
更可怕的是,在你的设计的最后部分,这里有6个,有8个,没有明确的规则集,它会影响你设计元素的大小发展,所以你仔细调整细节请问恢复不太好。
想象一下,你已经与开发达成了默契:如果我的标签在这里小于8,那么你认为它也是8。其他人必须是8的倍数。
3.多平台响应式设计
基本主流屏幕尺寸可在水平轴和垂直轴上至少8维分割。在许多情况下,两个轴都未读。甚至一些平台设计规范(例如Material Deisgn)也特别需要创建基于4pt或8pt的网格,以便整个系统自然地符合此规则。
△目前的主流屏幕解决方案几乎可以被8整除
有些屏幕很难适应这个系统,例如375×尺寸为667的iPhone6,但解决方案也很简单。保持衬垫和尺寸的尺寸。保证金符合规则,剩余空间可以填充块元素。如果某些元素的奇数大小是奇数,则无关紧要,只要它们可以使整个规则符合这组规则。
请记住,您的用户永远不会看到您实际使用的尺寸。
例如,Material Design不会将元素的高度限制为8的倍数,但允许元素的单击范围遵循8点网格的规则。
因此,该系统更多地用于规范自身的设计和开发,节省开发和设计通信时间,提高设计的一致性,并且可能对用户没有太大的了解。
实施该计划的技巧
1.构建网格并对齐网格
几乎所有的设计软件都可以选择“对齐网格”。如果您的设计完全符合此系统,设置适当的网格选项和对齐肯定会对您有所帮助。因此,请确保打开“对齐网格”选项。
△在Sketch
中将8px设置为基准网格2.确定自己的增量习惯
大多数设计软件都可以调整移动增量值,我喜欢将我的大值增加(保持命令移动的增量)从默认值10调整到8,这样更容易。
△调整草图中的键盘增量
3.快捷方式
许多应用程序都有快捷方式,可以让您在设计时快速移动元素并调整大小。请记住,这些快捷方式与网格相结合,可以大大提高您的效率。
4.创建一个图标框架
△材料设计框架图标
图标通常需要不同的尺寸以保持相同的视觉重量。使用框架设计图标是保持尺寸一致性的简单方法。同时,框架可以有效地确保图标的大小符合网格的规格。还要记住将图标的帧大小设置为8的倍数,并从大图标开始设计。缩放后,请记住调整细节。
5.放大和缩小
如果您继续放大到1600%进行设计,则可能会失去布局的垂直感。相反,如果您以50%缩放率查看UI,则可能会丢失一些重要细节,例如完美像素。因此,请记住经常放大和缩小以查看各种比例的设计。
材料设计规范:https://material.io/guidelines
规范文章链接:https://spec.fm/specifics/8-pt-grid