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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

這是模塊化的簡(jiǎn)單方式。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

結(jié)論

不要被一個(gè)模塊化設(shè)計(jì)大綱背后的想法嚇唬到你。開(kāi)始使用模塊化設(shè)計(jì)，就像使用其他任何的網(wǎng)格或框架。畫(huà)個(gè)草圖，制定一個(gè)計(jì)劃，并開(kāi)始動(dòng)手設(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 共同翻譯完成。

校對(duì)：zero, zoey

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

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