亚博yabo官方yabo88app下载-大咖啡解释了什么是8点网格设计

发布时间:2020-10-16 发布人: 亚博yabo官方yabo88app下载

基本主流屏幕尺寸在至少一个轴维度上可以被8整除,在很多情况下,两个轴维度都可以使用。甚至有些平台设计规范(如Material Deisgn)专门要求构建4pt或8pt基的网格,这样整个系统自然就能满足这个规则。

什么是八分格?请记住,您的用户永远不会看到您实际使用的大小。

来自材料设计规范的图像

点到底是什么?提高设计细节技能

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

为什么是8pt?想象一下你和彭凯有一个默契:如果我这里的分数小于8,你可以把它当成8。其他必须是8的倍数。

88元素减少50%

设计原型行走?怎么查?

相关建议:

所以这个系统更多的是用来规范自己的设计开发,为开发设计节省了同样的时间,提高了设计的统一性,可能不会被用户感知到。

文本间距设计指南

为什么要用这个系统?1. 更统一的UI

当元素的所有维度都满足相同的规则时,自然会得到更加统一的UI。

目前主流的屏幕解决方案可以看出基本可以被8整除

2. 更少的选择=节约更多的时间

即以8个点为单位构建网格,所有元素大小都是8的倍数。

如果你设计两次屏幕,一次之下会是奇数大小。如果要在一个均匀大小的屏幕上对齐(基本上屏幕大小是均匀的),播放时会出现小数点。如果您再次缩放它,元素大小将再次有小数点。屏幕尺寸和每英寸像素的差异在不断增加,这将使资源的输出越来越巨大。

更可怕的是,在最终的设计稿中,有6个和8个。没有一套明确的规则,会影响开发对你的设计稿的元素之间的维度的认知,所以你精心调整的细节就不会恢复的那么好。

3. 多平台的响应式设计

可能你在设计一个元素或者定义一个休闲时间的时候,好像用了8宽一点,你就一点一点调整。但是当你选择休闲时间是7还是8的时候,你做其他事情的时间就浪费了,最终结果的差别也没那么大。

来自材料设计规范的图像

有些屏幕会很难调整适应这个系统,比如iPhone6开头的375667的尺寸,但是解决方法很简单。保持填充和填充边距的大小一致,并遵循规则。剩余的空间可以用块元素填充。有些元素大小奇数也没关系,只要能让整体遵守这套规则。

我在设计UI界面的时候经常用8的倍数,但是在特殊场景下设计显示比例有限的屏幕的时候也用4pt。

例如,“材质设计”不会将元素的高度限制为8的倍数,但允许元素的单击比例遵循8点网格规则。

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

如果想学习或者提高设计,可以来AAA教育见面。

使用8这样的偶数来定义您设计的界面元素的大小,将使您更容易、更一致地适应各种屏幕。

为什么是基于8点来定义网格而不是6、10点?引用Quora对最后一个问题的回答:如果你用8作为设计的最小单位,你可以很容易的把你的设计尺寸缩小8/2=4,4/2=2,2/2=1。如果从10开始,缩小到的网格单元可能是2.5像素,然后向下1.25像素。

很久以前,当时的屏幕一般都是1x分辨率;1pt是1px。然后视网膜屏(Retina 2x)和超级视网膜屏(Super Retina 3x)逐渐出现,计算方法开始改变。设计iPhone X (3x)屏幕时,1pt将以每英寸3倍像素渲染。

UI设计有哪些细节?

移动终端横幅显示位的设计

8点网格已经流行了一段时间。我第一次知道这种设计方法是看了Google的《材料设计》设计规范才认可的。这种设计方法非常适合理科出身的设计师,所以在这里我们也会解释一下为什么要用8点网格。

亚博yabo官方_yabo88app下载_yabo88app  亚博代理_亚博棋牌  亚博棋牌_亚博ios  亚博ios_亚博体育怎么下载  亚博yabo官方_yabo88app下载_yabo88app