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

前端开发
2018年06月29日
583

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

栅格线与设计的关系可谓源远流长,对栅格线应用的熟练程度可以衡量一名设计师的水平。

0935500.jpg

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

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

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

0935501.jpg

左起:Sex Pistol Album cover by Jamie Reid,。Magazine, ‘Emigre’ Spread, ‘Ray Gun’ Magazine cover

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

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

0935502.jpg

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

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

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

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

1.阶梯状布局

0935503.jpg

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

2.适度倾斜

0935504.jpg

性感的翘臀?性感的翘字?个性十足,遐想连篇。

3.环绕形布局

0935505.jpg

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

4.插画元素

0935506.png

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

5.重叠

0935507.png

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

6. 利用页面边缘

0935508.jpg

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

7. 妙用形状

0935509.jpg

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

8. 不对称设计

09355010.jpg

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

9. 拼贴画

09355011.jpg

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

10. 加入引用

09355012.jpg

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

11. 手绘字体

09355013.png

适度添加手绘风格的字体,让你的设计更加有趣,别有风味,而不是一本正经。

这就是突破栅格线布局设计的一些技法,大家可以举一反三,在熟悉基础的前提下,突破原则,也突破自我!