模塊化設(shè)計(jì)：初學(xué)者完全入門指南

現(xiàn)在流行很多板塊和卡片樣式的設(shè)計(jì)。對于設(shè)計(jì)師來說，它們即是潮流性的也是功能性的。這種設(shè)計(jì)形式外觀直觀簡單，在網(wǎng)站設(shè)計(jì)方面，對于響應(yīng)性的框架非常適用。

這種設(shè)計(jì)趨勢的根源是模塊化設(shè)計(jì)。然而，這并不是什么新趨勢，模塊化設(shè)計(jì)根植于設(shè)計(jì)理論的基礎(chǔ)上，長期以來一直被許多設(shè)計(jì)師使用。今天，我們要探討的就是模塊化設(shè)計(jì)的背景和實(shí)際應(yīng)用。

啥是模塊化設(shè)計(jì)?

模塊化設(shè)計(jì)是一門技術(shù)活，需要把所有元素都整合在規(guī)整的網(wǎng)格中。每一塊設(shè)計(jì)元素都要在矩形中設(shè)計(jì)的恰到好處。

模塊化設(shè)計(jì)已經(jīng)由來已久，最受報(bào)紙版面設(shè)計(jì)師的歡迎，因?yàn)檫@樣他們就可以將每一個小故事編排成“豆腐塊兒”然后組成當(dāng)天的報(bào)紙版面。不過模塊化設(shè)計(jì)也同樣受到別的設(shè)計(jì)師的歡迎，因?yàn)槔么笮〔煌木W(wǎng)格來設(shè)計(jì)很方便于內(nèi)容的組織和管理。

網(wǎng)格模塊尤其適合于那種需要在一個版面呈現(xiàn)出數(shù)量眾多表面上相互沒什么大關(guān)系的細(xì)碎內(nèi)容的項(xiàng)目。(這就是為什么這種形式

由于模塊化網(wǎng)格的靈活度，模塊化設(shè)計(jì)在網(wǎng)頁設(shè)計(jì)領(lǐng)域非常流行。模塊化的設(shè)計(jì)理念能輕松地適用于響應(yīng)式框架的設(shè)計(jì)當(dāng)中，網(wǎng)格模式也能與卡片式和極簡風(fēng)的這樣的設(shè)計(jì)趨勢完美融合。

模塊化設(shè)計(jì)關(guān)注項(xiàng)目前端的思考，它只是一個基于網(wǎng)格的設(shè)計(jì)系統(tǒng)，和其他的網(wǎng)格一樣，它能在任何項(xiàng)目平臺上使用。而且它將會讓你的設(shè)計(jì)更加合理且更加有組織性。

其他領(lǐng)域中的模塊化

模塊化設(shè)計(jì)的概念，不只應(yīng)用在平面設(shè)計(jì)。從建筑設(shè)計(jì)，室內(nèi)設(shè)計(jì)到電腦甚至是汽車的設(shè)計(jì)，本質(zhì)上都是可以模塊化的。(這些領(lǐng)域都可以是尋找模塊化設(shè)計(jì)靈感的好地方。)

在其他領(lǐng)域，模塊化設(shè)計(jì)的定義更加廣泛，但仍然可以應(yīng)用到平面設(shè)計(jì)理論中。模塊化設(shè)計(jì)包含組合在一起的塊狀元素，就像辦公室里的隔間或建筑物外層的磚墻。模塊化設(shè)計(jì)的元素也可以互換，如可以在不同電腦中使用的小零件，或一個特定類型的汽車電池，也可以用在多款汽車上。在實(shí)際的實(shí)踐中，模塊化設(shè)計(jì)常常使人們想到一種樂高積木式的設(shè)計(jì)，其中的組件可以拼在一起或彼此分開。

平面設(shè)計(jì)中的模塊化

平面設(shè)計(jì)中的模塊通常以網(wǎng)格的方式體現(xiàn)。網(wǎng)格以及封閉性模塊可能會影響到你設(shè)計(jì)時的方方面面。網(wǎng)格可以讓你更加方便地排列各個元素的位置及間距，確定文本的對齊方式。

當(dāng)然了，有些人就會想到網(wǎng)格是不是會讓我們的設(shè)計(jì)受到限制，顯得單調(diào)呢?事實(shí)上完全不會，因?yàn)槟阕杂衫L制網(wǎng)格線，產(chǎn)生各種各樣的排列組合，理所當(dāng)然豐富性會超乎想象!

這類型的網(wǎng)格可以在任何一個平面設(shè)計(jì)軟件中建立，運(yùn)用軟件可以建立水平和垂直的網(wǎng)格線以及裝訂線的指定間隔。 當(dāng)把網(wǎng)格建立在畫布上，這時候的網(wǎng)格看起來九像一個個方塊，雖然它們不一定是正方形或細(xì)長形的(間隔線，開發(fā)空間，或者參考線)。

它的工作原理很簡單，每一塊內(nèi)容都在一個小方塊里，而且每兩個元素之間有一定的間隔寬度。可以將不同形狀和不同大小的方塊隨意進(jìn)行混合搭配，但是每個元素必須在和諧的模式下，保持水平和垂直均衡。

下面的圖片可以讓你了解網(wǎng)格模塊工作原理：

模塊化設(shè)計(jì)在web網(wǎng)頁中的應(yīng)用

當(dāng)談及在web中進(jìn)行模塊化設(shè)計(jì)時，你的第一反應(yīng)可能是抵制的，因?yàn)樗呛軣o聊的?，F(xiàn)在你可以擺脫這種想法了，任何設(shè)計(jì)是無聊還是有趣，不是僅僅由一個柵格線決定的。

現(xiàn)在，模塊化之所以在web設(shè)計(jì)中很流行，是因?yàn)樗狭艘恍┝餍汹厔荩O(shè)計(jì)師重新拾起了扁平化設(shè)計(jì)和運(yùn)用大面積色塊設(shè)計(jì)的模式，windows在metro設(shè)計(jì)中就使用了模塊化的交互界面(注：Metro(美俏)是微軟在Windows Phone 7中正式引入的一種界面設(shè)計(jì)語言，也是Windows 8的主要界面顯示風(fēng)格。)

同時，它也是創(chuàng)造大量其他類型網(wǎng)頁的偉大工具。正如平面中的模塊設(shè)計(jì)一樣，這個概念植根于畫布上垂直和水平的網(wǎng)格線。不同的是網(wǎng)頁需要考慮屏幕滾動和不同屏幕分辨率的斷點(diǎn)。(你可以利用CSS實(shí)現(xiàn)，但我們只專注于視覺方面。)

當(dāng)涉及到網(wǎng)頁的模塊化設(shè)計(jì)，我們首先想到的幾乎是一個所見即所得的設(shè)計(jì)，類似于你經(jīng)常發(fā)現(xiàn)優(yōu)質(zhì)網(wǎng)站的主題。預(yù)制板塊已經(jīng)結(jié)合在一起，就像制造汽車和電腦的想法一樣，使得每一塊適用于一個整體框架，你甚至不需要考慮設(shè)計(jì)的模塊化。

這是模塊化的簡單方式。

同樣也有自主選項(xiàng)。模塊化網(wǎng)站的網(wǎng)格要比印刷版本的網(wǎng)格更大，可以把屏幕拆解成小塊。最簡單的方法就是用兩欄的格式將屏幕分成一半(中間有間距)。橫向分區(qū)通常就是屏幕的高度，瀏覽器滾動條下拉，查看不同板塊，這種方式在視差滾動動畫中的應(yīng)用也很流行。

這就是來自 Newfangled網(wǎng)站的 Chiritopher Butler的觀點(diǎn)。這是對于如何運(yùn)用模塊化來設(shè)計(jì)網(wǎng)站最簡單(及形象)的定義之一。

模塊化設(shè)計(jì)資源

如果你已經(jīng)準(zhǔn)備開始你的第一個模塊化設(shè)計(jì)工程，下面有一些資源可以幫助你:

1. Modular Grid Pattern: 可以定制和下載的模塊化網(wǎng)格;

2. Modular vs. Non-Modular Design：《模塊化vs.非模塊化設(shè)計(jì): 讓溝通持續(xù)》——Mario Garcia;

3. All Mod Everything《模塊化一切》：靈感示例，來自Architizer.com網(wǎng)站;

4. “Making Modular Layout Systems”(制作模塊化圖層系統(tǒng))——Jason Santa Maria;

5. Book on grids and layouts《關(guān)于網(wǎng)格和圖層的書》：“圖層本質(zhì)：使用網(wǎng)格的一百個設(shè)計(jì)準(zhǔn)則”

6. Grids and Experimental Typography 《網(wǎng)格和有經(jīng)驗(yàn)的排版》：可下載PDF;

7. Complex modular grid 《完整的模塊化柵格》——Karl Gerstner：如果你想要真正地通過一些方法用你的腦袋去思考并開發(fā)一個模塊化的柵格;

8. Griddle: 適用現(xiàn)代瀏覽器，適用流暢且模塊化的網(wǎng)格系統(tǒng)的css;

9. How to create a modular grid：在AI中《如何創(chuàng)造一個模塊化的柵格》;

10. Modular themes《模塊化主題》來自主題森林(http://themeforest.net)

結(jié)論

不要被一個模塊化設(shè)計(jì)大綱背后的想法嚇唬到你。開始使用模塊化設(shè)計(jì)，就像使用其他任何的網(wǎng)格或框架。畫個草圖，制定一個計(jì)劃，并開始動手設(shè)計(jì)吧。

模塊化設(shè)計(jì)的好處是清晰的空間和組織性，網(wǎng)格幾乎適用任何風(fēng)格，在數(shù)字項(xiàng)目中易于處理。它能穩(wěn)定地流行至今是有原因的。因?yàn)樗_實(shí)有效?，F(xiàn)在去嘗試在你的項(xiàng)目中適用模塊化設(shè)計(jì)吧。

本文翻譯由DATS翻譯小組成員：RuminateWon，菲洛琪，_siusiu_ , 小胖雀，Rubbie，Lemon， mok， june, 李瀟灑， juey 共同翻譯完成。

校對：zero, zoey

設(shè)計(jì)：Maybe

原文：http://designshack.net/articles/layouts/modular-design-the-complete-primer-for-beginners/