网格设计版式设计_8点网格：Web上的版式-CSDN博客

网格设计版式设计

网络排版令人困惑。您知道最佳做法吗？ (Web typography is confusing. Do you know the best practices?)

When I started looking around at popular websites to figure out the best practices for web typography, I must admit I was baffled. Below are some examples of typography scales I pulled from a few popular websites and design systems. Can you find the unifying pattern?

当我开始四处查看流行的网站以找出Web排版的最佳做法时，我必须承认自己感到困惑。以下是一些我从一些流行的网站和设计系统中提取的版式比例示例。你能找到统一的模式吗？

Clearly there are different approaches to type systems. The reality is that as a web community we don’t all agree. However, like most design problems, it really starts by addressing the user’s needs.

显然，有不同的类型系统方法。现实是，作为一个网络社区，我们并不完全同意。但是，像大多数设计问题一样，它实际上是从满足用户需求开始的。

印刷系统的三种原型 (The three archetypes of typography systems)

Here are three general typography system archetypes. Most companies will utilize all three of these at some point but it’s important to recognize the underlying user needs being addressed by each orientation.

这是三种通用的排版系统原型。大多数公司会在某个时候同时使用这三者，但重要的是要认识到各个方向都可以满足潜在的用户需求。

营销网站 (Marketing site)

Purpose: Built to tell a specific story and inspire visitors to spend their time and/or money on the site.
目的：旨在讲述一个特定的故事并激发访问者在网站上花费时间和/或金钱。
Requirements: Each typeface will need its own set of styles and the variety of sizes will be based on art direction more than element fitting.
要求：每种字体都需要有自己的样式集，并且大小的变化将基于艺术指导而不是元素的适合。
Responsive use case: The system will need to flex through multiple sizes from mobile up to desktop.
响应性用例：系统将需要从移动设备到台式机灵活选择多种尺寸。

Web experiences geared to pitch you something end up in this category. The ambitious ones break all the rules of typography to create compelling and captivating experiences.

旨在向您推介产品的网络体验最终归入此类。雄心勃勃的设计师打破了所有版式规则，以创造引人入胜的迷人体验。

While a lot of thought goes into these sites, the focus is on making a splash rather than an extensible system that can be built upon in the future. These sites generally have a short shelf life and are discarded entirely for a top-to-bottom redesign.

尽管在这些站点上有很多想法，但重点是引起轰动，而不是将来可以建立的可扩展系统。这些站点的保质期通常很短，为了从上到下的重新设计，这些站点将全部丢弃。

An advanced example of this is the interpolation function used by Leigh Taylor and Nick Jones on Invision’s landing page.

一个很好的例子是Leigh Taylor和Nick Jones在Invision登陆页面上使用的插值函数。

The <h1> has a font-size: calc(32px + ((24 * (100vw — 800px))/799));. The typography on the page is meticulously calculated to work at every screen size.

< h1> has a font-size: calc(32px + ((24 * (100vw — 800px))/ 799));。页面上的排版经过精心计算，可以在每种屏幕尺寸下使用。

“Using math to do dynamic art direction” — Leigh Taylor

“使用数学做动态艺术指导” — 利·泰勒 ( Leigh Taylor)

博客/信息网站 (Blog/Info site)

Purpose: To convey a large amount of text-based information.
目的：传达大量基于文本的信息。
Requirements: The main reading area may utilize a ratio based line-height system, just like this Medium article does.
要求：主要阅读区域可以利用基于比率的行高系统，就像这篇中篇文章一样。
Responsive use case: Will likely be responsive but maintaining focus on readability.
响应式用例：可能会响应式，但将重点放在可读性上。

This Medium article is an example of a web experience built for long-form reading.

这篇中型文章是为长篇阅读而建立的Web体验的示例。

The focus is not about interpreting little visualizations or filling out forms. The size ratios they’ve chosen are specifically built for readability constrained to get the desired line-length. I can comfortably read each line because the typography has been carefully crafted to fit my needs as a reader.

重点不是解释很少的可视化或填写表格。他们选择的尺寸比是专门为提高可读性而设计的，以获得所需的线长。我可以轻松阅读每一行，因为字体经过精心设计，可以满足我作为读者的需求。

产品 (Product)

Purpose: Built to solve a user problem like filing taxes, managing a git repo, or visualizing performance metrics.
目的：专为解决用户问题而设计，例如报税，管理git repo或可视化性能指标。
Requirements: Text must fit nicely into the element hierarchy. Text is mostly utilized for labels, instructions, and displayed data.
要求：文本必须很好地适合元素层次结构。文本主要用于标签，说明和显示的数据。
Responsive use case: Minimally responsive. Highly developed products will be utilizing adaptive design meaning different experiences for mobile and desktop. The focus is on the hierarchy of elements that support the user experience.
响应式用例：响应度最低。高度开发的产品将利用自适应设计，这意味着针对移动设备和台式机的不同体验。重点是支持用户体验的元素的层次结构。

Google’s Material Design is a popular design language that is applicable to many product use cases.

Google的Material Design是一种流行的设计语言，适用于许多产品用例。

Material’s spacing method is based on an 8pt component grid system and a 4pt baseline grid for typography. They try to scale line-heights with increments of 4. Scaling by increments of 8 with your baseline grid can be difficult because the available line-heights are too far apart for some text sizes.

材料的间距方法基于8pt组件网格系统和4pt基线网格进行排版。他们尝试以4为增量缩放行高。由于某些文本大小的可用行高相距太远，因此很难用基线网格将行高缩放8。

Allowing some of the font-sizes to be accompanied with a more appropriate line-height is a great path forward. You can always bump the spacing above or below a given line by 4px to make it align with the greater atomic grid.

允许某些字体大小伴随更合适的行高是一条不错的路。您始终可以将给定行上方或下方的间距增加4px，以使其与更大的原子网格对齐。

When applied, the baseline grid system has the ability to align the element spatial system (8pt grid) with the typography system to create a compelling vertical rhythm in the design.

当应用基线网格系统时，它可以将元素空间系统(8pt网格)与版式系统对齐，从而在设计中产生引人注目的垂直节奏。

网络排版的实现-实际上 (Implementation of web typography — in reality)

It is possible to have an opinionated and structured UI adhering to an 8pt grid that also has a long-form reading area.

可能有一个固执的，结构化的UI粘贴到8pt网格上，该网格也具有较长的阅读区域。

Allow the fixed baseline grid system to handle the text inside of your structured components and use a modular scale to create an optimal reading experience for the blog or docs you’ve added onto your site.

允许固定基线网格系统处理结构化组件内部的文本，并使用模块化比例为您添加到站点中的博客或文档创建最佳阅读体验。

Most digital product companies do this already between their marketing landing page, the digital product, and their documentation. Making the decision to structure these typographic realms separately can free you from an unsustainable complexity.

大多数数字产品公司已经在其营销目标页面，数字产品及其文档之间进行了此操作。决定单独构造这些印刷领域可以使您摆脱不必要的复杂性。

陷阱-Ems，rems和像素哦，我的！ (The pitfall — Ems, rems, and pixels oh my!)

To express a clear and consistent system, typography measurements need to be easily interpreted by the product team building it.

为了表达清晰，一致的系统，版式测量需要由构建它的产品团队轻松解释。

Relative units like rems and ems are sometimes misunderstood and, in my experience, this leads to an unsustainable typography system. For example, the ratio between 14px font-size and a 20px line-height shouldn’t be captured in relative units because that ratio should change as the font-size increases.

诸如rems和ems的相对单位有时会被误解，以我的经验，这导致了不可持续的排版系统。例如，不应以相对单位捕获14px字体大小和20px行高之间的比率，因为该比率应随着字体大小的增加而变化。

Defining a line-height of 1.4285714286em is ridiculous, because most folks can’t do that kind of math in their head. If the font-size increases to 16px the browser will render a line-height of 22.857142px and that kind of pixel splitting is a headache waiting to happen. This creates confusion and is a misuse of relative units. See a complete list of absolute vs relative units here.

将行高定义为1.4285714286em是荒谬的，因为大多数人无法在头脑中进行这种数学运算。如果字体大小增加到16像素，则浏览器将显示22.857142像素的行高，而这种像素分裂令人头疼。这会造成混乱，并且是相对单位的滥用。在这里查看绝对和相对单位的完整列表。

Why are so many design systems based on relative sizing today? The answer is “accessibility”.

为什么今天有这么多基于相对尺寸的设计系统？答案是“可访问性”。

However, browsers don’t scale the base font-size when you zoom in with command +. There are accessibility tools that will scale base font-sizes for users who need it. I recommend properly testing it to make sure it’s the experience you want users to have. Check-the-box accessibility can hurt more than it helps.

但是，当您使用command +放大时，浏览器不会缩放基本字体大小。有一些可访问性工具可以为需要它的用户缩放基本字体大小。我建议对其进行适当的测试，以确保它是您希望用户获得的体验。复选框可访问性所带来的伤害大于所能解决的问题。

Utilizing rems and ems in your site/app is amazingly powerful. There are many very interesting use cases and they should be an important part of your toolkit.

在您的网站/应用程序中使用rems和ems非常强大。有许多非常有趣的用例，它们应该是工具箱的重要组成部分。

My suggestion is to use them sparingly until you have a solid use for them. Baking them into the core of your typography system can open you up to confusion and unexpected user experiences.

我的建议是谨慎使用它们，直到您对它们有充分的用途为止。将它们烘焙到版式系统的核心可以使您容易陷入混乱和意外的用户体验。

8pt网格排版 (8pt Grid Typography)

The most powerful part of the 8pt grid concept is its ability to drive consistency throughout your designs. You will need to assess the needs of your users and the best way to scale your typography to meet those needs.

8pt网格概念最强大的部分是在整个设计中推动一致性的能力。您将需要评估用户的需求，以及缩放字体以满足这些需求的最佳方法。

I highly encourage design and engineering to collaborate on finalizing these standards for a company/product.

我极力鼓励设计和工程部门为最终确定公司/产品的标准进行协作。

Here are samples from a few familiar names: Google Material, Pivotal, Atlassian, Intuit.

以下是一些熟悉的名称的示例： Google Material ， Pivotal ， Atlassian和Intuit 。