先忘记栅格吧！你应掌握的11个创新布局技法

越来越多的网页设计师开始知道，进行布局设计时需要用到栅格线。但是对于老手来说，栅格线不是唯一的可选项，这些老手经验丰富，基础扎实，他们懂得怎样去创新，懂得用新颖的设计完成目标。条条大路通罗马，他们会凭借自己的感觉去摸索成功的方式，而最终的效果却更出彩。

栅格线与设计的关系可谓源远流长，对栅格线应用的熟练程度可以衡量一名设计师的水平。在看今天的文章之前，不妨一起来阅读一下与栅格有关的两篇文章吧！

高手之路！网页设计师应该知道的网格系统
一篇文让你了解什么是栅格系统

左图: 瑞士风格海报 by Josef Müller-Brockmann。右图: 后现代主义风格海报 by Wolfgang Weingart

现代布局栅格线系统是由瑞士设计（又名国际主义平面设计风格）在20世纪早期确立的。

到了70年代，后现代风格影响了瑞士设计风格，瑞士风格一改过去僵化的栅格线系统，换之以更加灵活的栅格线布局。以完成更复杂、装饰更华丽的设计。后现代主义设计师从未抵制过栅格线系统，但是他们打破了限制。

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

还有一些平面设计师以新式风格继续推动着栅格线系统的发展，形成了诸如朋克、新浪潮、数字表现主义等新风格。一些设计师，比如David Carson，完全摒弃了栅格线。更多的是对栅格线系统理解基础上的改良、突破。

时至今日，栅格线系统依然重要。但是不要那么死板，脑子要活一点儿，还有很多设计的技法，尤其是以自由开放而著称的网页设计。

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

你看上面这些网页设计，都使用了栅格线系统，设计师"玩"的比谁都"溜"，他们会根据现有的情况，突破栅格线的限制，在不牺牲可用性的前提下，达到出色的视觉效果。

因此，要想掌握本文的技法，必须要有扎实的基本功，要对栅格线有充分的了解和心得。本文可不是新手向的文章，"要想跑，先会走"。同理，要想改造栅格线，必须先要掌握栅格线基础。什么叫做伟大的设计师？伟大的设计师便是：心中对基础和原则了如指掌，但又不墨守成规，根据实际情况与个人经验，打破规则，完成更美的设计。

废话不多说，看看这些设计师们是如何打破规则的吧。

1. 阶梯状布局

阶梯状的字体布局富有后现代主义气息，配合相关的图像，能够达成与众不同的视觉效果。

2. 适度倾斜

性感的翘臀？性感的翘字？个性十足，遐想连篇。

3. 环绕形布局

更好的图文结合、打造视觉焦点、充分利用空间，挖掘栅格线系统的潜力。

4. 插画元素

栅格式布局太呆板？试着加入一点插画元素吧。让页面看起来更具娱乐性，更好的平衡美学与功能。

5. 重叠

在Frank Chimero的动态个人网站中，他采用了图像重叠的手段，而非传统的栅格线布局。令人印象深刻。

6. 利用页面边缘

不要为了留边距而留边距——可以做点小实验，让文本超出页面边缘，然后用成沓的印刷品来呈递作品。

7. 妙用形状

锐利的矩形配合以文本，看起来像是玻璃碎片，暗含一种暴力、兴奋的因素。

8. 不对称设计

不对称设计让人感觉非常自然、淳朴、无修饰。比如说这罐蜂蜜，感觉就很天然。

9. 拼贴画

这则可爱的婚礼邀请函感觉非常人性化、有手工质感，浓厚的拼贴风格。

10. 加入引用

用户对一成不变的阅读节奏感到厌倦怎么办？那就试着打破节奏，给用户一点惊喜，引用就是一个好方法。尤其是在大块大块的文本信息中，加入引用可以适度缓解多栏布局的阅读节奏感，让用户读起来更舒心。

11. 手绘字体

适度添加手绘风格的字体，让你的设计更加有趣，别有风味，而不是一本正经。
这就是突破栅格线布局设计的一些技法，大家可以举一反三，在熟悉基础的前提下，突破原则，也突破自我！

原文地址：99designs
优设网翻译:@MartinRGB

转摘请注明优设网译文出处，谢谢各位小编。

 
================关于优设网================
"优设网uisdc.com"是一个分享网页设计、无线端设计以及PS教程的干货网站。
【特色推荐】
设计讲座：每月邀请国内互联网公司设计前辈及行业总监在群内及YY语音（YY频道：156982）分享实战经验。
设计微博：拥有粉丝量56万的人气微博@优秀网页设计 ，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：http://hao.uisdc.com
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的"福利"吗？
添加 优秀网页设计 微信号：【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加：