模塊化設(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/
本文地址:http://m.likemindfilms.com/tutorial/di2882.html