1. 自营销首页
  2. 设计

原创 | 8点栅格系统总结归纳和用法

嗨小伙伴们大家好~️

今天小编给大家带来的原创译文是8点栅格系统总结归纳和用法,作者用这篇文章说明为什么8pt栅格系统是最好用的方案,以及解释为什么我们能把它应用于几乎所有的设计项目,特别是在产品设计上,一起来看看吧!

(全文共计3815字,阅读约需要10分钟)
用这个8点栅格系统的拓展规范去开始你的UI项目:字体排版,Icon设计和界面布局。






01 8点栅格介绍



首先:什么是pt(点)?

pt = point的缩写

pt(point的缩写)是一种与屏幕分辨率相关的空间度量单位。最简单的解释就是在“1×(1倍)”分辨率下,1pt=1px。(这里英文原文没有解释,补充了参考文章:了解8pt栅格系统,快速而统一地完成界面布局
http://www.woshipm.com/ucd/577874.html

你是否曾经好奇我们为什么会用尺寸小的画板去给一些设备的大屏幕做设计?比如说,我的iPhone XR屏幕的实际尺寸不是414×819px,而是828×1792px,比画板大2倍。

实际是这样的:
原创 | 8点栅格系统总结归纳和用法
iPhone XR:从画板到渲染到屏幕呈现

图中画板里的每个基础像素(1pt)在渲染过程中都被乘以了2倍。因为iPhone XR用的是Retina屏幕,在最后实际分辨率下每英寸显示出来的像素就是普通屏幕的2倍。


原创 | 8点栅格系统总结归纳和用法
iPhone X:从画板到渲染到屏幕呈现

在iPhoneX的例子中,有赖于它的Super Retina屏幕,在实际屏幕分辨率下每英寸显示出来的像素是画布的三倍。


通过最小尺寸设计,我们可以轻松地将组件放大到其他设备需要的屏幕尺寸,同时确保渲染具有完美的像素清晰度。这意味着,1个像素可以被转化成4px(@2x分辨率),9px(@3x分辨率),如此类推。


原创 | 8点栅格系统总结归纳和用法


所以如果我们有一个大小为16px的icon,当我们导出到@2x和@3x的分辨率,渲染出来的icon大小分别就是32px和48px,并适用于Rentina和Super Retina的屏幕。


此处也可以参考Apple界面设计规范里图像大小和分辨率部分
https://developer.apple.com/design/human-interface-guidelines/ios/icons-and-images/image-size-and-resolution/


那为什么是8?
有几个理由,第一是以8个像素为基础单位的尺寸可以完美地转化成其他不同的屏幕尺寸(包括安卓的0.75倍和1.5倍)


原创 | 8点栅格系统总结归纳和用法

这个8点基础单位也可以轻易转化成2、3和4倍。


第二个理由是,尽管没有解释过多,Apple和Google都有建议这样做。



第三个理由,以4或8为倍数的尺寸很容易计算,它们灵活且一致。用这个倍数设定组件之间的间距,也比较明显(如下图)。


原创 | 8点栅格系统总结归纳和用法





02 字体排版


当我建立字体排版的时候,我会努力把风格做得独特,同时又有一致性。因此我会用一套内在逻辑让我的设计变得妙不可言(原文为法语je ne sais quoi)。


虽然字体本身的大小要求有时会偏离8的倍数,但是它的行距不会。举个例子,段落字体的大小可以是15px,然后段落间的行距可以设置为8的倍数,比如说24px就是一个合适的数值。


原创 | 8点栅格系统总结归纳和用法
上图的字体排版系统是基于8点栅格。虽然字体大小没有遵循,但是它们的行距都为8的倍数。


为了快速建立一个一致的排版系统,这里推荐一个自己最喜欢的工具Grid Lover(http://gridlover.net/
)。


当我们以16px为基础字体大小,我们的行距是它的1.5倍,就是24px。这也保持了1.618比例因子的一致性。


提示:你在电脑上安装的任何字体,都可以根据你写CSS时输入的名字来输入到工具里面,通常就是字体本身的名字。






03 icon设计


上文提到过,用8点为基数设计的icon能够被完美地放大。


原创 | 8点栅格系统总结归纳和用法
当iOS系统导出16×16px的icon时会渲染出16px,32px和48px的整数大小。


如果你需要设计不同屏幕适用的icon,我会推荐你同时使用16×16像素栅格和20×20栅格的画板,这样你的设计就能包含16,20,24(16×1.5倍),32,40等等。





04 界面布局


因为过去做的项目里我也一直有参与编程的部分,我用稍微改良过的Bootstrap标准12栅格布局也有一段时间了。我对广泛使用的工具很有信心,为什么呢?因为它们被广泛使用是有理由的。它们好用并高效。比起重新发明一个,我更喜欢在现有的基础上稍作改良。因为这样的结果更加省钱,快捷和可预测。



定制的 Bootstrap网格支持本地模式并易于操作。如果你有一定CSS基础,可以参靠这个教程
https://uxplanet.org/how-to-customize-bootstrap-b8078a011203


水平布局的韵律

标准的Bootstrap栅格是12栏(column)布局,15px的栅格外边距,导致了每个栏之间有30px的槽距和整个栅格布局外左右分别15px的边距。我一般会自己或让程序员按需要去配置这些默认的设定。


整个页面系统的总宽度叫栅格宽度(container)。这个栅格宽度可以是自适应的流体或是响应式布局。流体布局通常会占满整个页面的宽度。


如下图,每个屏幕范围都有其推荐的栅格宽度。最初我们都推荐用它的默认尺寸,但是入了8点布局的坑之后你就会发现能够自定义这些参数是件很酷的事。


原创 | 8点栅格系统总结归纳和用法

Bootstrap的布局表格。在这里你可以看到不同分辨率范围对应的栅格尺寸


当我们基于Boostrap的网站显示在任何设备时,浏览器会检测能够用作显示的空间有多少,并根据这个空间来决定布局。如果我们有一个414px宽的iPhone,我们就在Extra small类别下,那么我们的栅格宽度就会占用整个可用宽度。当我们换到一个更宽的设备,比如一个平板(768px宽),我们的设备类别就换到了Medium,栅格宽度就会是720px。


如果你像我一样,想要自定义这些设定,现在让我们先把计算器掏出来。


当我们设计桌面端界面时,我会把每栏设置成72px宽,这时槽宽有24px和32px两个选项。24px的槽宽会让整个栅格左右剩下各12px。如果是32px的槽宽,栅格左右就是各16px。通常我会选择24px的槽宽。
(12栏×72)+(12*槽×24)=1152px
*严格来讲应该是11个槽,再加整个栅格左右两边的半槽


原创 | 8点栅格系统总结归纳和用法
(12 × 72) + (12 × 24) = 1152



当我们设计移动端界面时,这里就有几个新挑战。首先,不是所有的手机设备的宽度都能被8整除。这种情况下,就要依赖你自己作为设计师的直觉,然后找到一个折衷的平衡点。第二,12栏对于窄屏来说并不是很实际。我自己会选择6栏布局,尽管经过实验之后我发现其实2栏布局也不错。


这个就由你自己决定了。


对于宽度为375px的屏幕,可用以下设置:


原创 | 8点栅格系统总结归纳和用法
尽管不是完美的8倍数,但是这已经是我能找到的最好的折衷办法。

尽管栏宽影响了元素的宽度,槽宽用来作为元素之间的空间,保留槽宽比保留栏目宽度更重要-这也是决定了界面的韵律。


原创 | 8点栅格系统总结归纳和用法

如果你喜欢用2栏设定来做移动端设计,这是一个更加“8倍数”的布局设置。


一个1152px栅格宽度与Bootstrap默认的1140px宽度并没有很大区别,并且还是在桌面端屏幕的范围之内。所以我不会太担心有差异的这个问题。


注意:布局的宽度应该是基于内容和用户需求。如果你觉得8点栅格行不通,不要紧。作为设计师我们需要灵活地使用它。


垂直布局的韵律

你猜对了,我们的行距(row)将会是8px高。有些人甚至会选择用4px高的行距-这使我们排版任何元素的行距(line height)都是4的倍数,这是很棒的。但是,比起易用度,我发现我需要花更多精力去维持这个设定。所以对我来说8px已经很足够了。


原创 | 8点栅格系统总结归纳和用法


当我们设计移动端界面的时候,因为水平没有太多空间,垂直布局的韵律就是最为重要的方面。所以利用系统去维持这个韵律的一致性和美观性尤为重要。


一个基于8点栅格系统设计的字体排版,能够跟8点垂直栅格完美契合。


原创 | 8点栅格系统总结归纳和用法


技巧

你可以把间距参数设置成变量。


原创 | 8点栅格系统总结归纳和用法



这样你就可以更好地维持其一致性,也更有逻辑。你的开发同事也会变得开心,因为他们现在能更好地保守估计元素之间的间距。


原创 | 8点栅格系统总结归纳和用法



我们是设计师-不是机器人。如果有些尺寸和参数在不是8的倍数下也好看,那就用吧(谨慎使用)。当你已经基于系统去做设计,即使开发的同事错过了那个12px的细微差别,你的界面还是会好看的。




最后


这里附上一个8点栅
格系统的启动包供你们下载。
在后台回复 
8点栅格
 即可获取哦~



原创 | 8点栅格系统总结归纳和用法
原创 | 8点栅格系统总结归纳和用法
原创 | 8点栅格系统总结归纳和用法


原作者翻译授权截图
原创 | 8点栅格系统总结归纳和用法



原文作者:Isaac Sheptovitsky(Vitsky)
原文地址:
https://medium.com/swlh/the-comprehensive-8pt-grid-guide-aa16ff402179


译者:@
Rena鱼子
小编:@Kerr Xu 

来源:应谋鬼计,本文观点不代表自营销立场,网址:https://www.zyxiao.com/p/11996

发表评论

电子邮件地址不会被公开。 必填项已用*标注

侵权联系
分享本页
返回顶部