節(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è)部件件相。我們評(píng)估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ì)。現(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ì)破壞頁面層級(jí)皮璧。單項(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)模塊級(jí)別的垂直距離會(huì)比改進(jìn)整個(gè)網(wǎng)頁框架更有效果晒杈。如果每個(gè)模塊無論放在頁面何處都能緊貼底線網(wǎng)格，垂直節(jié)奏感和垂直層級(jí)會(huì)自然而然得以保持孔厉。
