先忘記柵格吧！你應(yīng)掌握的11個創(chuàng)新布局技法

越來越多的網(wǎng)頁設(shè)計師開始知道，進(jìn)行布局設(shè)計時需要用到柵格線。但是對于老手來說，柵格線不是唯一的可選項，這些老手經(jīng)驗豐富，基礎(chǔ)扎實，他們懂得怎樣去創(chuàng)新，懂得用新穎的設(shè)計完成目標(biāo)。條條大路通羅馬，他們會憑借自己的感覺去摸索成功的方式，而最終的效果卻更出彩。

柵格線與設(shè)計的關(guān)系可謂源遠(yuǎn)流長，對柵格線應(yīng)用的熟練程度可以衡量一名設(shè)計師的水平。在看今天的文章之前，不妨一起來閱讀一下與柵格有關(guān)的兩篇文章吧！

高手之路！網(wǎng)頁設(shè)計師應(yīng)該知道的網(wǎng)格系統(tǒng)
一篇文讓你了解什么是柵格系統(tǒng)

左圖: 瑞士風(fēng)格海報 by Josef Müller-Brockmann。右圖: 后現(xiàn)代主義風(fēng)格海報 by Wolfgang Weingart

現(xiàn)代布局柵格線系統(tǒng)是由瑞士設(shè)計（又名國際主義平面設(shè)計風(fēng)格）在20世紀(jì)早期確立的。

到了70年代，后現(xiàn)代風(fēng)格影響了瑞士設(shè)計風(fēng)格，瑞士風(fēng)格一改過去僵化的柵格線系統(tǒng)，換之以更加靈活的柵格線布局。以完成更復(fù)雜、裝飾更華麗的設(shè)計。后現(xiàn)代主義設(shè)計師從未抵制過柵格線系統(tǒng)，但是他們打破了限制。

左起：Sex Pistol Album cover by Jamie Reid,。Magazine, ', 'Ray Gun' Magazine cover

還有一些平面設(shè)計師以新式風(fēng)格繼續(xù)推動著柵格線系統(tǒng)的發(fā)展，形成了諸如朋克、新浪潮、數(shù)字表現(xiàn)主義等新風(fēng)格。一些設(shè)計師，比如David Carson，完全摒棄了柵格線。更多的是對柵格線系統(tǒng)理解基礎(chǔ)上的改良、突破。

時至今日，柵格線系統(tǒng)依然重要。但是不要那么死板，腦子要活一點(diǎn)兒，還有很多設(shè)計的技法，尤其是以自由開放而著稱的網(wǎng)頁設(shè)計。

如圖: The Amanda Project website, Ed Fella's website, Kutztown Communications department website,

你看上面這些網(wǎng)頁設(shè)計，都使用了柵格線系統(tǒng)，設(shè)計師"玩"的比誰都"溜"，他們會根據(jù)現(xiàn)有的情況，突破柵格線的限制，在不犧牲可用性的前提下，達(dá)到出色的視覺效果。

1. 階梯狀布局

階梯狀的字體布局富有后現(xiàn)代主義氣息，配合相關(guān)的圖像，能夠達(dá)成與眾不同的視覺效果。

2. 適度傾斜

性感的翹臀？性感的翹字？個性十足，遐想連篇。

3. 環(huán)繞形布局

更好的圖文結(jié)合、打造視覺焦點(diǎn)、充分利用空間，挖掘柵格線系統(tǒng)的潛力。

4. 插畫元素

柵格式布局太呆板？試著加入一點(diǎn)插畫元素吧。讓頁面看起來更具娛樂性，更好的平衡美學(xué)與功能。

5. 重疊

在Frank Chimero的動態(tài)個人網(wǎng)站中，他采用了圖像重疊的手段，而非傳統(tǒng)的柵格線布局。令人印象深刻。

6. 利用頁面邊緣

不要為了留邊距而留邊距——可以做點(diǎn)小實驗，讓文本超出頁面邊緣，然后用成沓的印刷品來呈遞作品。

7. 妙用形狀

銳利的矩形配合以文本，看起來像是玻璃碎片，暗含一種暴力、興奮的因素。

8. 不對稱設(shè)計

不對稱設(shè)計讓人感覺非常自然、淳樸、無修飾。比如說這罐蜂蜜，感覺就很天然。

9. 拼貼畫

這則可愛的婚禮邀請函感覺非常人性化、有手工質(zhì)感，濃厚的拼貼風(fēng)格。

10. 加入引用

用戶對一成不變的閱讀節(jié)奏感到厭倦怎么辦？那就試著打破節(jié)奏，給用戶一點(diǎn)驚喜，引用就是一個好方法。尤其是在大塊大塊的文本信息中，加入引用可以適度緩解多欄布局的閱讀節(jié)奏感，讓用戶讀起來更舒心。

11. 手繪字體

適度添加手繪風(fēng)格的字體，讓你的設(shè)計更加有趣，別有風(fēng)味，而不是一本正經(jīng)。
這就是突破柵格線布局設(shè)計的一些技法，大家可以舉一反三，在熟悉基礎(chǔ)的前提下，突破原則，也突破自我！

原文地址：99designs
優(yōu)設(shè)網(wǎng)翻譯:@MartinRGB

轉(zhuǎn)摘請注明優(yōu)設(shè)網(wǎng)譯文出處，謝謝各位小編。

 
================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是一個分享網(wǎng)頁設(shè)計、無線端設(shè)計以及PS教程的干貨網(wǎng)站。
【特色推薦】
設(shè)計講座：每月邀請國內(nèi)互聯(lián)網(wǎng)公司設(shè)計前輩及行業(yè)總監(jiān)在群內(nèi)及YY語音（YY頻道：156982）分享實戰(zhàn)經(jīng)驗。
設(shè)計微博：擁有粉絲量56萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計 ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計資源、下載頂尖設(shè)計素材。
設(shè)計導(dǎo)航：全球頂尖設(shè)計網(wǎng)站推薦，設(shè)計師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機(jī)上、被窩里獲取設(shè)計教程、經(jīng)驗分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁設(shè)計 微信號：【youshege】優(yōu)設(shè)哥的全拼
您也可以通過掃描下方二維碼快速添加：