設(shè)計師版式寶典!從零開始教你掌握網(wǎng)格系統(tǒng)
學(xué)會和理解如何排版是成為一個設(shè)計大師中超級重要的一部分,有很多剛?cè)腴T的設(shè)計師并不了解網(wǎng)格系統(tǒng),也不會利用網(wǎng)格系統(tǒng)來校準(zhǔn)元素在畫面內(nèi)的位置,讓畫面更加平衡。網(wǎng)格系統(tǒng)為什么這么好用呢?因為它可以制造層次感,模塊化地管理元素。而且,合理地利用網(wǎng)格系統(tǒng),并不會讓畫面千篇一律,還會讓畫面更加有條理,更可以讓內(nèi)容更易讀,有更好的體驗。我們快來看一看如何實現(xiàn)這些事兒吧!
網(wǎng)格的類型
許多設(shè)計師都會在網(wǎng)格系統(tǒng)上開始一個新的設(shè)計。不同的人有不同的習(xí)慣,有人喜歡12列的網(wǎng)格,有人則喜歡16列網(wǎng)格,還有人喜歡24列的網(wǎng)格等等等等。重點不在于網(wǎng)格一共有多少種類型,而在于你實際應(yīng)用的那一個!在網(wǎng)頁設(shè)計中,網(wǎng)格系統(tǒng)是十分常見的,響應(yīng)式網(wǎng)頁設(shè)計的推廣,網(wǎng)格的地位又得到了提升呢!
我個人更喜歡12列的網(wǎng)格。每一列的寬度取決于最終輸出的稿件應(yīng)用在哪,比如打印或網(wǎng)頁,還有就是參考整體的寬度來進(jìn)行分割。如果我設(shè)計的東西有許多許多小元素,我會切換到24列網(wǎng)格。區(qū)塊之間的間隔根據(jù)內(nèi)容進(jìn)行相應(yīng)的調(diào)整。如果我創(chuàng)建一個瀑布流的布局,我可能只會給間隔留1-2px。這個真的要隨機應(yīng)變。
我喜歡12或24列的網(wǎng)格是因為我可以在這個基礎(chǔ)上衍生出很多不同的排版方案。你可以在24列中的一列里寬度上排列內(nèi)容,也可以是12列中的2列,還可以用8列分欄中的3列來擺放一個元素,甚至還可以是6列分欄中的4列等等,完全看你個人的喜好。
你看,雖然網(wǎng)格系統(tǒng)是一個限定,但是應(yīng)用起來也是超級靈活的,這使得你的設(shè)計可以有很高的延展性,通過匹配不同的組合,就可以做出完全不同的排版來。是時候拋棄對稱布局了,感受一下下面的案例,你可以利用同一個網(wǎng)格系統(tǒng)創(chuàng)造出各式各樣的排版。
從上面的例子中我們可以看出,我們有著無窮盡的選擇來創(chuàng)造不同的排版。有些設(shè)計師害怕使用網(wǎng)格,他們覺得網(wǎng)格系統(tǒng)會局限住將他們的思維和畫面的結(jié)構(gòu)。但是事實上呢,網(wǎng)格結(jié)構(gòu)的選擇和組合幾乎可以說是無止盡的!那么多種組合,等你用完那天再來說局限住你的思維了吧!
而且網(wǎng)格系統(tǒng)的應(yīng)用真的是超級廣泛!下面是一個網(wǎng)格系統(tǒng)的實例,導(dǎo)航橫跨了整個寬度,主要內(nèi)容大概占用了60%的寬度,側(cè)邊欄占用了剩下的40%;在下面一個版塊中,左邊60%的寬度被三等分??梢钥闯鰞?nèi)容和內(nèi)容之間留足了空間,閱讀起來很舒服。
下面這個網(wǎng)站則是簡單的三欄布局,這給了圖片足夠的空間,并且把大段的文字打散成一個一個小板塊。這樣的布局也十分適合貼廣告。
總結(jié)
在你的設(shè)計中使用網(wǎng)格可以讓你更有邏輯地進(jìn)行你的設(shè)計工作,并且網(wǎng)格系統(tǒng)可以更好地組織畫面中的信息,讓重要的元素更加鮮明,讓設(shè)計稿有更好的結(jié)構(gòu),帶來更好的體驗。設(shè)計師的工作說白了是盡可能更有創(chuàng)意地傳遞信息,網(wǎng)格系統(tǒng)是讓信息更具條理的方式之一,但我們不一定非得100%完全遵循網(wǎng)格的分欄進(jìn)行設(shè)計,我們也要適時打破網(wǎng)格系統(tǒng),這也是創(chuàng)建視覺興趣點的好方法!
本文來源:uisdc
- 目前還沒評論,等你發(fā)揮!