節(jié)奏，是運(yùn)動(dòng)在空間和時(shí)間中的形式，是任何設(shè)計(jì)系統(tǒng)的基礎(chǔ)。網(wǎng)格定義了布局中空間和元素的比例，使秩序節(jié)奏感成為可能。
垂直節(jié)奏，指一頁中元素在Y軸的排布，在印刷中相對容易達(dá)成，但在Web上很困難。
在這個(gè)問題上，UI設(shè)計(jì)師Tyrick Christian解釋了他怎樣與前端工程師協(xié)作來連通Photoshop與瀏覽器的排版底線創(chuàng)造節(jié)奏感，為MailChimp UI增添微妙的美感。前端工程師Mardav Wala講得更遠(yuǎn)，解釋了他怎樣用數(shù)學(xué)能力將垂直網(wǎng)格引入CSS。
在底線上設(shè)計(jì)
在過去一年里，我們重設(shè)計(jì)了網(wǎng)站和移動(dòng)app，并設(shè)計(jì)了一些新的平板app，這些項(xiàng)目沒有減慢我們對新特色的發(fā)展。短時(shí)間內(nèi)的清晰溝通對所有項(xiàng)目都非常重要，并且還要保持這些產(chǎn)品給人感受的一致性。
把人們移入辦公室的共享空間能方便傳遞靈感。比如，在重設(shè)計(jì)之前UX團(tuán)隊(duì)在小辦公室工作；而過去的一年中，我們多次在MailChimp中來回走動(dòng)，接觸市場、移動(dòng)、工程和支持部門。我們是移動(dòng)的。這是非常好的體驗(yàn)，它促使我們和其他團(tuán)隊(duì)溝通，了解某些決策產(chǎn)生的過程和原因，并在設(shè)計(jì)和開發(fā)過程中發(fā)現(xiàn)問題。
我們發(fā)現(xiàn)的最主要的設(shè)計(jì)問題是設(shè)計(jì)和開發(fā)的尺寸不一致。雖然我們在早期設(shè)計(jì)過程中為字體、網(wǎng)格和顏色等設(shè)立規(guī)范，而后又為一些基礎(chǔ)部件例如按鈕、表格、表單等設(shè)計(jì)樣式，但最終產(chǎn)品和Photoshop里的初始版本并不相像。
為了解決這個(gè)問題，我們重提了討論過的想法：在pattern library中使用底線網(wǎng)格建立每個(gè)部件。我們評估app中的頁面并把它們打散成原子元素。因?yàn)镸ailChimp的UI多是字體，對齊底線并以此構(gòu)建更大的元素顯得非?？尚?。設(shè)計(jì)和前端團(tuán)隊(duì)達(dá)成共識(shí)：PS文檔中的排版方式能與markup配合。于是我們開始修改按鈕、表格、下拉框、slats等，直到每個(gè)部分都在底線上。
基本上，pattern library的每部分都非常接近合適布局，因?yàn)槲覀円婚_始就在6px的增量上工作。我們發(fā)現(xiàn)一些小誤差最終變成大誤差。比如，設(shè)計(jì)師測量字間距是從上一行字母底線到下一行字母的ascender（超過字母x的部分），而開發(fā)人員會(huì)測量每個(gè)字母的行高（line-height）及此間距離。差距可能只有2px，但一頁中多次重復(fù)節(jié)奏感會(huì)變得非常不同。
既然每個(gè)人都用相同的元素工作，無論是mark-up還是Photoshop，且所有部件都與相同網(wǎng)格對齊，我們發(fā)現(xiàn)項(xiàng)目從始至終的溝通順暢很多。由于Mailchimp是響應(yīng)式的，我們在Photoshop中制作了兩個(gè)pattern library版本：一個(gè)針對PC，一個(gè)針對移動(dòng)端。這讓UX組和市場組關(guān)系更近。我們致力于多項(xiàng)目共享樣式，使用類似的網(wǎng)格、底線和風(fēng)格。
回顧這個(gè)過程，像其他新過程一樣，響應(yīng)式設(shè)計(jì)有陡峭的學(xué)習(xí)曲線。我能自信地說基線能解決所有問題嗎？不。我們的工具并不能完美適應(yīng)響應(yīng)式設(shè)計(jì)，我們也在繼續(xù)探索新技術(shù)和新應(yīng)用。同時(shí)，這個(gè)簡單的視覺工具幫助我們創(chuàng)造新語言，使設(shè)計(jì)師和開發(fā)人員都能制作出美麗實(shí)用的作品。這是我們的目標(biāo)。
字體嚴(yán)謹(jǐn)
by?Mardav Wala
最近的MailChimp重設(shè)計(jì)給我們仔細(xì)思考app布局的機(jī)會(huì)?，F(xiàn)在用網(wǎng)格布局已是小菜一碟，但在Web上獲得垂直節(jié)奏感——內(nèi)容對齊底線網(wǎng)格——仍是痛苦的事，尤其很多web app的內(nèi)容千差萬別。在解決了設(shè)計(jì)和代碼間最初的不一致后，Tyrick在前文描述了前端和設(shè)計(jì)師團(tuán)隊(duì)最終使用相同語言的案例。
正如Richard Rutter于2006年發(fā)表在24 Ways的文章所說，網(wǎng)頁設(shè)計(jì)的垂直韻律感需要細(xì)心運(yùn)用line height、margin和padding。技巧在于找到合適的line height，這劃定了計(jì)算margin和padding的基礎(chǔ)。
雖然MailChimp內(nèi)容很多，僅有極少內(nèi)容由文字段落組成；幾乎所有信息顯示為list，form，tables,charts或data blocks。因此，我們沒有使用大尺寸line height，這會(huì)導(dǎo)致大margin和padding。我們根據(jù)app里的所有元素使用了最小可能值6px。6px底線網(wǎng)格由此而來。
你可能想知道我們?yōu)槭裁词褂?px作為網(wǎng)格和排版的基礎(chǔ)單位。我們測試了一系列基礎(chǔ)單位，最終發(fā)現(xiàn)6px能翻倍為12px,18px,24px等尺寸，均為合適的尺寸和margin。它在按鈕、表格區(qū)等小元件上也很好用。這使我們創(chuàng)建任何UI都能獲得變通和優(yōu)雅。
在早期的設(shè)計(jì)過程中，我們決定把margin間隔用于元素底部，讓垂直節(jié)奏感更易保持。在MailChimp，改變是很正常的事。我們每四周發(fā)布新特性和新改進(jìn)。在追求垂直節(jié)奏感時(shí)，我們必須設(shè)計(jì)系統(tǒng)靈活性來使新模塊引入不會(huì)破壞頁面層級。單項(xiàng)margin助我們一臂之力。
簡單的數(shù)學(xué)
因?yàn)槲覀兊腢I建立在6px的底線網(wǎng)格中，所有的line height，margin和padding都需要遵循6的倍數(shù)以保持垂直節(jié)奏感。實(shí)踐證明這是對的，垂直節(jié)奏感確實(shí)得以保持。
而字體可以在保持節(jié)奏的同時(shí)設(shè)置任何大小。我們的基本字體大小為15px，我們認(rèn)為這個(gè)大小在任何場景都能識(shí)別，也不回讓UI顯得擁擠。文章《best practices》指出，將line height設(shè)置為字體大小的1.5倍有助于提高識(shí)別度。我們的基礎(chǔ)字體大小是15px，line height就應(yīng)為22.5px（15px*1.5）。但由于底線網(wǎng)格植根于6px，我們把line height微調(diào)為24px，將padding、margin和line height在布局上串聯(lián)。用這個(gè)數(shù)學(xué)方法，我們把這些比例運(yùn)用在app的每個(gè)部件上。
對于標(biāo)題和所有其他字體尺寸，line height也都是6的倍數(shù)并基于字體尺寸計(jì)算。為了簡單明了，下面的例子使用像素單位。
h1{
font-size: 40px;
line-height: 48px;
}
.small-meta{
font-size: 13px;
line-height: 18px;
}
規(guī)則外的特例
圖片和圖表有自己的規(guī)律，時(shí)常破壞網(wǎng)格。他們的大小無法預(yù)測，也不能容易地調(diào)整到底線上。但因?yàn)橛蒻argin和padding定義的垂直間隔沒變，垂直節(jié)奏感并沒有受影響。
有border的部件也會(huì)破壞底線網(wǎng)格，因?yàn)閎order是默認(rèn)設(shè)置，并未計(jì)算在line height內(nèi)；它們增加了高度。 不過也有變通方法：把border也計(jì)算在部件總體高度中。也許純粹主義者會(huì)覺得，如果border超過1px，視覺就會(huì)失衡。他們是對的。力求對準(zhǔn)水平標(biāo)尺（horizontal rule）、帶border部件對齊底線網(wǎng)格并不總是對的，因?yàn)橹灰猰argin、line height和padding是對的，垂直節(jié)奏感就不會(huì)被border和horizontal rule影響。
下面是一個(gè)例子展示我們?nèi)绾涡拚趌ist中的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;
}
}
圖表也可以被調(diào)整來適應(yīng)底線比例。如果圖表在瀏覽器窗口改變尺寸時(shí)保持相對比例，設(shè)置圖表高度和垂直margin為基礎(chǔ)單位的倍數(shù)。如果圖表不保持比例，只要設(shè)置垂直margin并保持高度不變。
由于圖片高度會(huì)隨寬度變化，我們不能用高度來安排底線網(wǎng)格。在這些情況下，我們保證圖片margin四周被設(shè)定好，保證垂直節(jié)奏感。
用特殊規(guī)則和特例寫代碼有造成混亂的風(fēng)險(xiǎn)。與組員溝通、代碼做好注視會(huì)減輕這些問題。在pattern library中保存變化也會(huì)很有幫助。
我們也發(fā)現(xiàn)，正如Mark Boulton在“content out”中推薦的那樣，微調(diào)模塊級別的垂直距離會(huì)比改進(jìn)整個(gè)網(wǎng)頁框架更有效果。如果每個(gè)模塊無論放在頁面何處都能緊貼底線網(wǎng)格，垂直節(jié)奏感和垂直層級會(huì)自然而然得以保持。
