节奏，是运动在空间和时间中的形式，是任何设计系统的基础。网格定义了布局中空间和元素的比例，使秩序节奏感成为可能。

垂直节奏，指一页中元素在Y轴的排布，在印刷中相对容易达成，但在Web上很困难。

在这个问题上，UI设计师Tyrick Christian解释了他怎样与前端工程师协作来连通Photoshop与浏览器的排版底线创造节奏感，为MailChimp UI增添微妙的美感。前端工程师Mardav Wala讲得更远，解释了他怎样用数学能力将垂直网格引入CSS。

在底线上设计

by Tyrick Christian

在过去一年里，我们重设计了网站和移动app，并设计了一些新的平板app，这些项目没有减慢我们对新特色的发展。短时间内的清晰沟通对所有项目都非常重要，并且还要保持这些产品给人感受的一致性。

把人们移入办公室的共享空间能方便传递灵感。比如，在重设计之前UX团队在小办公室工作；而过去的一年中，我们多次在MailChimp中来回走动，接触市场、移动、工程和支持部门。我们是移动的。这是非常好的体验，它促使我们和其他团队沟通，了解某些决策产生的过程和原因，并在设计和开发过程中发现问题。

我们发现的最主要的设计问题是设计和开发的尺寸不一致。虽然我们在早期设计过程中为字体、网格和颜色等设立规范，而后又为一些基础部件例如按钮、表格、表单等设计样式，但最终产品和Photoshop里的初始版本并不相像。

为了解决这个问题，我们重提了讨论过的想法：在pattern library中使用底线网格建立每个部件。我们评估app中的页面并把它们打散成原子元素。因为MailChimp的UI多是字体，对齐底线并以此构建更大的元素显得非常可行。设计和前端团队达成共识：PS文档中的排版方式能与markup配合。于是我们开始修改按钮、表格、下拉框、slats等，直到每个部分都在底线上。

基本上，pattern library的每部分都非常接近合适布局，因为我们一开始就在6px的增量上工作。我们发现一些小误差最终变成大误差。比如，设计师测量字间距是从上一行字母底线到下一行字母的ascender（超过字母x的部分），而开发人员会测量每个字母的行高（line-height）及此间距离。差距可能只有2px，但一页中多次重复节奏感会变得非常不同。

PS,AI和其他印刷为主的apps会把字体设置在传统底线上，但CSS会把字体设置在container中，制造了设计师和开发人员间的误解。

既然每个人都用相同的元素工作，无论是mark-up还是Photoshop，且所有部件都与相同网格对齐，我们发现项目从始至终的沟通顺畅很多。由于Mailchimp是响应式的，我们在Photoshop中制作了两个pattern library版本：一个针对PC，一个针对移动端。这让UX组和市场组关系更近。我们致力于多项目共享样式，使用类似的网格、底线和风格。

移动端显示应用了相同基线，使设备和显示大小都有协调感。

回顾这个过程，像其他新过程一样，响应式设计有陡峭的学习曲线。我能自信地说基线能解决所有问题吗？不。我们的工具并不能完美适应响应式设计，我们也在继续探索新技术和新应用。同时，这个简单的视觉工具帮助我们创造新语言，使设计师和开发人员都能制作出美丽实用的作品。这是我们的目标。

字体严谨

by Mardav Wala

最近的MailChimp重设计给我们仔细思考app布局的机会。现在用网格布局已是小菜一碟，但在Web上获得垂直节奏感——内容对齐底线网格——仍是痛苦的事，尤其很多web app的内容千差万别。在解决了设计和代码间最初的不一致后，Tyrick在前文描述了前端和设计师团队最终使用相同语言的案例。

正如Richard Rutter于2006年发表在24 Ways的文章所说，网页设计的垂直韵律感需要细心运用line height、margin和padding。技巧在于找到合适的line height，这划定了计算margin和padding的基础。

虽然MailChimp内容很多，仅有极少内容由文字段落组成；几乎所有信息显示为list，form，tables,charts或data blocks。因此，我们没有使用大尺寸line height，这会导致大margin和padding。我们根据app里的所有元素使用了最小可能值6px。6px底线网格由此而来。

你可能想知道我们为什么使用6px作为网格和排版的基础单位。我们测试了一系列基础单位，最终发现6px能翻倍为12px,18px,24px等尺寸，均为合适的尺寸和margin。它在按钮、表格区等小元件上也很好用。这使我们创建任何UI都能获得变通和优雅。

在早期的设计过程中，我们决定把margin间隔用于元素底部，让垂直节奏感更易保持。在MailChimp，改变是很正常的事。我们每四周发布新特性和新改进。在追求垂直节奏感时，我们必须设计系统灵活性来使新模块引入不会破坏页面层级。单项margin助我们一臂之力。

我们用“底线”层在浏览器中显示底线。这是我们重设计的页面之一。

简单的数学

因为我们的UI建立在6px的底线网格中，所有的line height，margin和padding都需要遵循6的倍数以保持垂直节奏感。实践证明这是对的，垂直节奏感确实得以保持。

而字体可以在保持节奏的同时设置任何大小。我们的基本字体大小为15px，我们认为这个大小在任何场景都能识别，也不回让UI显得拥挤。文章《best practices》指出，将line height设置为字体大小的1.5倍有助于提高识别度。我们的基础字体大小是15px，line height就应为22.5px（15px*1.5）。但由于底线网格植根于6px，我们把line height微调为24px，将padding、margin和line height在布局上串联。用这个数学方法，我们把这些比例运用在app的每个部件上。

对于标题和所有其他字体尺寸，line height也都是6的倍数并基于字体尺寸计算。为了简单明了，下面的例子使用像素单位。

h1{

font-size: 40px;

line-height: 48px;

}

.small-meta{

font-size: 13px;

line-height: 18px;

}

规则外的特例

图片和图表有自己的规律，时常破坏网格。他们的大小无法预测，也不能容易地调整到底线上。但因为由margin和padding定义的垂直间隔没变，垂直节奏感并没有受影响。

有border的部件也会破坏底线网格，因为border是默认设置，并未计算在line height内；它们增加了高度。 不过也有变通方法：把border也计算在部件总体高度中。也许纯粹主义者会觉得，如果border超过1px，视觉就会失衡。他们是对的。力求对准水平标尺（horizontal rule）、带border部件对齐底线网格并不总是对的，因为只要margin、line height和padding是对的，垂直节奏感就不会被border和horizontal rule影响。

下面是一个例子展示我们如何修整在list中的padding来说明1px border隔开部件：

@base-unit: 6px;

.dotted-list{

margin-bottom: (@base-unit * 2);

li{

padding-top: (@base-unit * 2)

padding-right: 0;

// 1px less padding bottom

padding-bottom: ((@base-unit * 2) - 1);

padding-left: 0;

border-bottom: 1px dotted #c0ffee;

}

}

这是一些部件和它们的padding，这确保了它们正确地排在底线上，即使有border。

图表也可以被调整来适应底线比例。如果图表在浏览器窗口改变尺寸时保持相对比例，设置图表高度和垂直margin为基础单位的倍数。如果图表不保持比例，只要设置垂直margin并保持高度不变。

由于图片高度会随宽度变化，我们不能用高度来安排底线网格。在这些情况下，我们保证图片margin四周被设定好，保证垂直节奏感。

用特殊规则和特例写代码有造成混乱的风险。与组员沟通、代码做好注视会减轻这些问题。在pattern library中保存变化也会很有帮助。

我们也发现，正如Mark Boulton在“content out”中推荐的那样，微调模块级别的垂直距离会比改进整个网页框架更有效果。如果每个模块无论放在页面何处都能紧贴底线网格，垂直节奏感和垂直层级会自然而然得以保持。