ios系统的4pt删格计算_如何使用8pt网格系统创建更强大的布局

ios系统的4pt删格计算

重点 (Top highlight)

Originally published at marcandrew.me on September 3rd, 2020.

最初于 2020 年9月3日 发布在 marcandrew.me 。

Layout Grids are everything in UI Design.

布局网格是UI设计中的所有内容。

Well. Ok. Don’t discount Colour. Don’t forget about Typography. But get your Layout Grids right and you’re half-way there in creating much better looking, and functioning UIs.

好。 好。 不要打折颜色。 不要忘记排版。 但是，正确设置布局网格，您就可以创建外观更好，功能正常的UI了。

Consistent, and scalable spacing helps you eliminate guesswork whilst designing and developing. It requires fewer design decisions. And it enables a much faster turnaround on projects.

一致且可扩展的间距可帮助您消除设计和开发过程中的猜测。 它需要更少的设计决策。 而且它可以使项目的周转速度更快。

The 8pt Grid is one of the most commonly used Layout Grid Systems there is, and for very good reason.

8pt网格是最常用的布局网格系统之一，这是有充分理由的。

Let me tell you more about it in this article…

让我在本文中告诉您更多有关…

好。 那么，什么是点(pt)？ (Ok. So what is a point (pt) exactly?)

A point (pt) is a measurement of space that is dependent on screen resolution. The simplest explanation is that at a ‘1x’ resolution (or @1x) 1pt = 1px.

点(pt)是取决于屏幕分辨率的空间度量。 最简单的解释是，在“ 1x”分辨率(或@ 1x )下， 1pt = 1px 。

‘Back in the day’ when screens were 1x; 1pt equalled 1px. Then your Retina (2x), and Super Retina (3x) screens came along and things changed. Where designing for the iPhone X (3x) your design would then be rendered with three times as many pixels per inch (ppi).

屏幕是1倍的“回到过去” ； 1pt等于1px。 然后出现了Retina ( 2x )和Super Retina ( 3x )屏幕，情况发生了变化。 在为iPhone X(3x)设计时，您的设计将以每英寸像素 (ppi)的三倍渲染。

So for example, if you have an icon at the size of 24px, when you export that icon as an asset @2x and @3x the rendered image would be either 48px (2x), or 72px (3x), which will then look great on Retina and Super Retina displays respectively.

因此，例如，如果您有一个尺寸为24px的图标，则当将该图标导出为资产@ 2x和@ 3x时 ，渲染的图像将是48px(2x)或72px(3x) ，这将看起来很棒分别在Retina和Super Retina显示器上显示。

I always recommend designing in 1x, then exporting your assets at the different sizes (@2x, @3x etc…) as required. It reduces a lot of confusion.

我总是建议使用1x设计，然后根据需要以不同的大小( @ 2x，@ 3x等… )导出您的资产。 它减少了很多混乱。

那为什么要8分呢？ (So why 8pts?)

Like I mentioned earlier, the variety of screen sizes and pixel densities has continued to increase which can make the job of asset generation more complicated.

正如我之前提到的，屏幕尺寸和像素密度的多样性不断增加，这会使资产生成工作变得更加复杂。

Using an even number like 8 to space, and size elements in your design makes scaling for a wide variety of devices much easier, and more consistent.

在设计中使用偶数(例如8)来分隔空间和调整大小元素，可以更轻松，更一致地缩放各种设备。

The basic principle of the 8pt Grid is that you use multiples of 8 (8, 16, 24, 32, 40, 48 etc…) to margins, padding, and sometimes dimensions, on elements inside of your design.

8pt网格的基本原理是在设计内部的元素上使用8的倍数( 8、16、24、32、40、48等… )来设置边距 ， 填充以及有时标注尺寸 。

I always think in 8s now when creating my UIs, with the odd occasion when I’ll call upon 4pt, for example when designing for Mobile where the screen real estate is limited.

在创建UI时，我总是以8s来考虑，而在奇怪的情况下，我会调用4pt ，例如在为屏幕空间有限的Mobile设计时。

硬网格法还是软网格法？ (Hard, or Soft Grid method?)

‘Soft Grid’ for the win every time!

每次都能赢得“ Soft Grid”的胜利！

When I’ve created UIs before I’ve always opted to use the ‘Soft Grid’ approach, where you simply measure 8pt increments between individual elements in your design.

在创建UI之前，我总是选择使用“软网格”方法，在该方法中，您只需测量设计中各个元素之间的8pt增量 。

This as opposed to the ‘Hard Grid’ approach which places elements into a grid pattern defined in 8pt increments which I find a little too rigid and not practical for when it comes time to code up a design.

这与“硬网格”方法相反， “硬网格”方法将元素放置在以8pt增量定义的网格模式中 ，我发现这太僵硬了，并且在进行设计编码时不实用。

图标和8pt网格 (Icons & The 8pt Grid)

When it comes to icons and the 8pt Grid, you will find that most of them have been designed to sit inside of frames that are multiples of 8 (16x16, 24x24, 32x32 etc…)

当涉及到图标和8pt网格时，您会发现大多数图标都被设计为位于8的倍数( 16x16、24x24、32x32等 )的框架内。

If not, then make sure that any icon that you drop into your design you frame it inside a container that uses a value that is a multiple of 8 (ie; 24x24). This will just enable icons to be laid out consistently within your UIs.

如果不是，那么请确保您放入设计中的任何图标都在使用8的倍数( 即24x24 )的值的容器内对其进行构图 。 这只会使图标在用户界面中一致地布局。

版式和8pt网格 (Typography & The 8pt Grid)

When it comes to Type, using the 4pt Baseline Grid alongside the 8pt Grid gives you a much more harmonious vertical rhythm throughout your designs.

当涉及类型时，请使用 4pt基线网格 旁边 8pt网格 给你更多 和谐的垂直节奏 在您的整个设计中。

Simply align your type to a Baseline Grid of 4, which uses a line-height value that is a multiple of 4 (4, 8, 12, 16, 20 etc…)

只需将您的类型对齐到Baseline Grid 4即可 ，它使用的行高值是4的倍数( 4、8、12、16、20等 )

Why 4? Well for me personally, I’ve found that scaling my Baseline Grid in multiples of 8 in the past has just pushed the text too far apart when working with certain text sizes.

为什么是4？ 对我个人而言，我发现过去以8的倍数缩放Baseline Grid时，在处理某些文本大小时，文本之间的距离太远了。

The 4pt Baseline Grid gives you more fine-grained control, and brings much better results.

4pt基线网格可为您提供更细粒度的控制 ，并带来更好的结果 。

Hopefully with this brief overview of the 8pt Grid you’ll now feel confident in laying out your UIs faster, with more consistency, less guesswork, and fewer design decisions required.

希望通过对8pt Grid的简要概述，您现在可以自信地更快地布局UI，具有更高的一致性，更少的猜测和更少的设计决策。

Give 8pt a try. Your designs will look 10x better for it.

尝试8pt。 您的设计看起来会好十倍。

By the way did you know you can create amazing UIs (that use the 8pt Grid) easier, and faster with my Design System Kit Cabana for Sketch & Cabana for Figma. Special Offer: Please use the code CABANA30 to receive 30% OFF. ENDING SOON!

顺便说一下，您知道我的设计系统套件Cabana for Sketch和Cabana for Figma可以更轻松，更快地创建惊人的UI (使用8pt Grid) 。 特别优惠：请使用代码CABANA30享受30％的折扣。 即将结束！

Bay Area Black Designers: a professional development community for Black people who are digital designers and researchers in the San Francisco Bay Area. By joining together in community, members share inspiration, connection, peer mentorship, professional development, resources, feedback, support, and resilience. Silence against systemic racism is not an option. Build the design community you believe in. 海湾地区黑人设计师 ：一个专业的黑人开发社区，他们是旧金山湾区的数字设计师和研究人员。 通过在社区中团结起来，成员可以共享灵感，联系，同伴指导，专业发展，资源，反馈，支持和韧性。 对系统性种族主义保持沉默是不可行的。 建立您相信的设计社区。

翻译自: https://uxdesign.cc/how-to-create-stronger-layouts-with-the-8pt-grid-system-cb0a1665714d

ios系统的4pt删格计算