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

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

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

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

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

模塊化設(shè)計已經(jīng)由來已久，最受報紙版面設(shè)計師的歡迎，因為這樣他們就可以將每一個小故事編排成“豆腐塊兒”然后組成當天的報紙版面。不過模塊化設(shè)計也同樣受到別的設(shè)計師的歡迎，因為利用大小不同的網(wǎng)格來設(shè)計很方便于內(nèi)容的組織和管理。

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

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

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

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

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

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

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

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

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

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

它的工作原理很簡單，每一塊內(nèi)容都在一個小方塊里，而且每兩個元素之間有一定的間隔寬度?？梢詫⒉煌螤詈筒煌笮〉姆綁K隨意進行混合搭配，但是每個元素必須在和諧的模式下，保持水平和垂直均衡。

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

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

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

現(xiàn)在，模塊化之所以在web設(shè)計中很流行，是因為它符合了一些流行趨勢，設(shè)計師重新拾起了扁平化設(shè)計和運用大面積色塊設(shè)計的模式，windows在metro設(shè)計中就使用了模塊化的交互界面(注：Metro(美俏)是微軟在Windows Phone 7中正式引入的一種界面設(shè)計語言，也是Windows 8的主要界面顯示風格。)

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

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

這是模塊化的簡單方式。

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

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

模塊化設(shè)計資源

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

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

2. Modular vs. Non-Modular Design：《模塊化vs.非模塊化設(shè)計: 讓溝通持續(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è)計準則”

6. Grids and Experimental Typography 《網(wǎng)格和有經(jīng)驗的排版》：可下載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è)計大綱背后的想法嚇唬到你。開始使用模塊化設(shè)計，就像使用其他任何的網(wǎng)格或框架。畫個草圖，制定一個計劃，并開始動手設(shè)計吧。

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

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

校對：zero, zoey

設(shè)計：Maybe

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