pt1000和pt100_全面的8pt网格指南

最新推荐文章于 2024-09-27 16:14:00 发布

weixin_26715991

最新推荐文章于 2024-09-27 16:14:00 发布

阅读量351

点赞数

文章标签： python

原文链接：https://medium.com/swlh/the-comprehensive-8pt-grid-guide-aa16ff402179

版权

pt1000和pt100

Start your UI project right with this extended framework for the 8pt grid: Typography, Icons and Layout.

立即使用8pt网格的扩展框架开始您的UI项目：版式，图标和布局。

This article is the 1st in a two part series — to the next chapter in which I demonstrate how to create a Design System on top 8pt grid.

本文是由两部分组成的系列文章中的第一 篇，这是下一章的内容，在下一章中，我将演示如何在顶部8pt网格上创建设计系统 。

In this article I will try and convince you why using the 8 point grid is the best go-to grid there is, and why it can be applied to almost any digital design project you got going on, but especially product design.

在本文中，我将尝试说服您，为什么使用8点网格是最好的选择网格，以及为什么可以将其应用于几乎所有正在进行的数字设计项目，尤其是产品设计。

8pt网格简介 (Introduction to the 8pt grid)

首先：什么是pt？ (First of all: what’s pt?)

pt = point.

pt =点。

Have you ever wondered why we use such small artboards while the devices we design for are huge? My iPhone XR isn’t 414-by-896-pixels wide, it’s actually 828-by-1792-pixel, twice as much!

等皆你有没有想过，为什么我们使用这样的小画板，而我们设计的设备是巨大的？我的iPhone XR的宽度不是414 x 896像素，实际上是828 x 1792像素，是原来的两倍！

What happens is this:

这是怎么回事：

Image for post — iPhone XR: Artboard to Render to Screen

The artboard is rendered at twice as much pixels, since the iPhone XR has a Retina display that has twice as much pixels per inch (ppi), than a regular screen.

由于iPhone XR的Retina显示屏每英寸(ppi)像素是普通屏幕的两倍，因此该画板的渲染像素数是原来的两倍。

In the case of the iPhone X, the artboard is rendered at 3 times as much, since it has a Super Retina display that has 3 times as much ppi.

在iPhone X的情况下，画板的渲染速度是原来的3倍，因为它的Super Retina显示屏的画素比是3倍。

Designing for the smallest size allows us to scale our assets into the different sizes the different devices require, while maintaining pixel-perfect rendering. And so, 1pt can be translated into 1, 4 or 9 pixels at the @1x, @2x and @3x sizes, respectively.

最小尺寸的设计使我们能够将资产缩放到不同设备所需的不同尺寸，同时保持像素完美的渲染。因此，可以将@ 1x，@ 2x和@ 3x大小的1pt分别转换为1、4或9像素。

So if we have an icon at the size of 16px, when we’ll export that icon at @2x and @3x, the rendered images will be 32px and 48px respectively, and will suit Retina and Super Retina displays.

因此，如果我们有一个大小为16px的图标，则当将该图标导出为@ 2x和@ 3x时，渲染的图像将分别为32px和48px，并且适合Retina和Super Retina显示器。

For Apple’s guidelines on the subject of image size and resolution.

有关Apple关于图像尺寸和分辨率的指南。

为什么是8？ (Why 8?)

Several reasons, the first being that it scales perfectly in all the different screen displays (including android’s @0.75 and @1.5).

原因有几个，第一个是它可以在所有不同的屏幕显示中完美缩放(包括android的@ 0.75和@ 1.5)。

The second reason, well, Apple and Google advise so, albeit without stating too many reasons why.

苹果和谷歌建议这样做的第二个理由是，尽管没有说明太多原因。

The third reason — it’s a good basic unit to work with. the numbers 4 and 8 are easily multiplied, they provide flexible and consistent, yet distinct enough, steps between them. They’re kind of fun when you get use to them 🤓.

第三个原因-这是一个很好的基本单元。数字4和8很容易相乘，它们在它们之间提供了灵活，一致，但又足够鲜明的步骤。当您习惯它们时，它们会很有趣🤓。

版式 (Typography)

When I establish a typographic system, I strive to keep my styles distinct enough yet consistent, so my design will have that inner logic that gives the design that Je ne sais quoi feeling.

建立印刷系统时，我会努力保持样式鲜明而又一致，因此我的设计将具有内在的逻辑，赋予我Je sai quooi感觉的设计。

While font sizes may vary and stray from the 8 multiplication, it’s important the line height will not. The Paragraph font size can be 15 pixels for example, but the line height should be a multiplication of 8, so 24px is an acceptable value.

尽管字体大小可能会有所不同并且会偏离8乘，但重要的是行高不会。例如，段落字体大小可以为15像素，但行高应为8的倍数，因此24px是可以接受的值。

In order to create a consistent typography system fast, I use one of my favorite tools: Grid Lover.

为了快速创建一致的排版系统，我使用了我最喜欢的工具之一： Grid Lover 。

Tip: Any font you got installed on your machine, will be displayed by entering the font’s name exactly as you would in a CSS document; usually, simply the font’s name.

提示：您在计算机上安装的任何字体都将通过输入与CSS文档中完全相同的名称来显示。通常，只是字体名称。

影像学 (Iconography)

As mentioned above, icons designed on an 8pt based grid will scale perfectly:

如上所述，在基于8pt的网格上设计的图标将完美缩放：

If you intend on using icons in a different size, I would recommend designing your icon on 16×16 pixels grid, and another version on a 20×20 pixels grid. This way you’re covered for any size: 16, 20, 24 (16×1.5), 32, 40 and so forth.

如果打算使用其他尺寸的图标，建议您在16×16像素的网格上设计图标，并在20×20像素的网格上设计另一个版本。这样，您就可以覆盖任何大小：16、20、24(16×1.5)，32、40等。

布局 (Layout)

Since I’ve been coding a part of the projects I work on, I’ve been using Bootstrap’s standard 12 grid with a minor modification. I’m a big believer in working with widespread tools — why? Well, there’s a reason they’re so widespread. They work and they’re efficient. Instead of reinventing the wheel, I prefer modifying the one I got. It’s cost efficient, fast and predictable.

由于我一直在编码我所从事的项目的一部分，因此我一直在使用Bootstrap的标准12网格进行少量修改。我坚信使用广泛的工具-为什么？好吧，这是因为它们如此广泛。他们工作，效率很高。我不想修改轮子，而是更喜欢修改我得到的轮子。它具有成本效益，快速且可预测的优势。

Chere’s a guide for exactly that.

C正是为此的指南。

水平节奏 (Horizontal Rhythm)

The standard Bootstrap grid is a 12 column layout, with a 15px margin on each side of the column; resulting in a 30px gutter between columns plus 15px to the left and right of the grid. These are the default settings, which I’ll configure to my liking, or ask the developer to configure.

标准的Bootstrap网格是12列的布局，在列的每一侧都有15px的边距；导致列之间的间距为30px，网格的左右两侧为15px。这些是默认设置 ，我将根据自己的喜好进行配置，或要求开发人员进行配置。

The entirety of the grid is called Container. A container can be either fluid or responsive in size. A fluid container will always take the entirety of the width that is available.

整个网格称为“容器”。容器可以是流体的，也可以是尺寸敏感的。流体容器将始终占据整个可用宽度。

For each screen range there is a container width that is optimized to that screen range. At first it’s recommended to use the default sizes, however it’s pretty cool to customize when you’re further down the 8pt rabbit hole.

对于每个屏幕范围，都有一个容器宽度已针对该屏幕范围进行了优化。首先，建议使用默认大小，但是当您进一步深入8pt兔子洞时，自定义设置非常酷。

When our Bootstrap-based-website is displayed on any device, The browser checks to see home much space is available for display, and sets the layout according to that space. If we have a 414px wide iPhone, we’re in the Extra small category, and out container will take up 100% of the width available. When will switch to a wider device, let’s say a tablet (768px wide), our device category will change to Medium, and the container’s width will be 720px.

当我们的基于Bootstrap的网站显示在任何设备上时，浏览器都会检查是否有家庭空间可显示，并根据该空间设置布局。如果我们拥有414像素宽的iPhone，则属于“超小型”类别，而out容器将占用可用宽度的100％。当切换到更大的设备时，例如平板电脑(768像素宽)，我们的设备类别将更改为“中”，容器的宽度将为720像素。

If you’re like me, you’d like to customize those settings. We’ll start by whipping out our calculators 🧮.

如果您像我一样，则想自定义这些设置。我们将首先介绍一下计算器🧮。

When designing for desktop I’d like to have each column be 72px wide, and have a gutter of 24px or 32px. A gutter of 24px will result in 12px on each side of the container, and a gutter of 32px will result in a 16px on each side. I usually opt for the 24px gutter.

在为桌面设计时，我希望每列的宽度为72px，并具有24px或32px的装订线。 24像素的装订线将在容器的每一侧产生12像素，而32像素的装订线将导致在每一侧16像素。我通常选择24px装订线。

(12 columns × 72) + (12* gutters × 24) = 1152px

(12列×72)+(12 *装订线×24)= 1152px

*Technically there are 11 gutters plus two halves on each side of the container.

*从技术上讲，容器的每一侧都有11个装订线和两个半部分。

Designing for mobile presents a few new challenges. First, not all mobile devices’ width dimension is divisible by 8. In this case, it’s important to rely on your own instincts as a designer, and find a middle ground. Second, 12 columns aren’t really practical when designing for narrow screens. I myself opt for a 6 column layout on mobile, although when I experimented with a 2 column layout, the end results weren’t any worst off.

为移动设备设计提出了一些新挑战。首先，并不是所有移动设备的宽度尺寸都能被8整除。在这种情况下，重要的是要依靠自己作为设计师的直觉，并找到中间立场。其次，在设计窄屏时，十二列并不是很实际。我自己选择在移动设备上使用6列布局，尽管当我尝试使用2列布局时，最终结果并不是最差。

This one is up to you to decide for yourself.

这取决于您自己决定。

For a screen that’s 375pt wide, use these settings:

对于375pt宽的屏幕，请使用以下设置：

Preserving the gutter width is more important than preserving the column width, since the gutters act as the white space between elements — and that is what actually determines the rhythm; while the columns dictate the width of an element.

保留装订线宽度比保留列宽更重要，因为装订线充当元素之间的空白 ，而这实际上决定了节奏。而各列规定了元素的宽度。

A 1152px container isn’t very different from Bootstrap’s default 1140px container and is still in the device (desktop), range. So I’m not worried of any discrepancies or problems.

1152px容器与Bootstrap的默认1140px容器没有太大区别，并且仍在设备(桌面)范围内。因此，我不必担心任何差异或问题。

Important: Layout’s width should be based on the content and user needs. If you see it just doesn’t work with the 8pt grid, no worries. We’re designers and we should be flexible when we need to.

重要提示 ：布局的宽度应根据内容和用户需求而定。如果您发现它不适用于8pt网格，则无需担心。我们是设计师，需要时应该保持灵活性。

垂直节奏 (Vertical Rhythm)

You guessed it, our rows are going to be 8px tall. Some may go even further and have 4px rows — This allows for any line height which is a multiplication of 4, which is great. However, I found out that it takes more energy to maintain than it gives value in the output. So 8px is good enough for me.

您猜对了，我们的行将变成8px高。有些行甚至更远，行数为4px-这允许任何行高乘以4，这是很好的。但是，我发现维护所需的精力要比在输出中提供价值更多。所以8px对我来说已经足够了。

When designing for mobile (web or apps), vertical rhythm is the name of the game, since there isn’t much horizontal rhythm to work with. So maintaining that vertical rhythm consistent and beautiful is doubly important.

在为移动设备(Web或应用程序)设计时，垂直节奏是游戏的名称，因为没有太多的水平节奏可以使用。因此，保持垂直节奏的一致性和优美性至关重要。

A typographic system that is designed based on the 8pt grid, will sit wonderfully on an 8pt vertical grid.

一个基于8pt网格设计的印刷系统，可以很好地坐在8pt垂直网格上。

专家提示 (Pro Tip)

You can define your spacing values as variables:

您可以将间距值定义为变量：

small = 8px
medium = 16px
large = 24px
x-large = 32pxand so forth...

This way it’s easier to maintain consistency, it’s more logical and the developers are happy since they can safely assume spacing based on the relationship between the elements on the screen.

这样一来，保持一致性更加容易，更加合乎逻辑，并且开发人员很高兴，因为他们可以根据屏幕上元素之间的关系安全地假定间距。