网页设计中，如何突破栅格的限制又保持协调？

现在，栅格现已几乎是一切页面规划的根底。这些隐形的线条发明出空间的节奏感和视觉的流通感，他们是让页面变得愈加调和的根底。

可是，栅格存在的意图是帮你发明好的规划，当你开端逐渐习惯栅格的存在，千万不要被它束缚住。你并没有必要100%地受限于栅格，偶尔打破栅格的规划可能会让你的规划愈加抓人眼球。不过，想要打破栅格又坚持页面的协调，是有窍门的，并非任何“破格”的规划都是好的。今日，咱们来聊聊这个。

了解栅格体系



想要打破栅格，那么你首要得深化了解栅格体系。无论你运用的是哪种款式的栅格，它都是你的页面规划过程中的“根底设施”，它帮你断定元素要怎么放置，帮你保证不一样的控件在页面上堆叠而不会显得突兀不协调，有助于坚持页面的安排性。

本来不一样范畴的规划师一直都在运用栅格。看看报纸和图书吧，在页面规划师开端运用栅格之前，他们现已将这套体系玩的登峰造极了。

栅格能做的工作有很多：

·坚持内容的安排度。在栅格体系下，元素从左到右，从上到下都明晰明晰地排布起来，让规划坚持一致性。
·使得规划更有功率，由于规矩化的栅格让各种UI元素的排布都规矩化。
·让页面不一样的页面看起来都坚持一致性
·让元素和元素之间的距离都一样，让全部规划坚持整洁

已然栅格有这么多的优势，那么为何还要打破栅格呢？

这不难了解，栅格营造出一致和协调的观感，打破栅格的元素 天然就显得愈加“扎眼”了，这无疑是一种强调了。想要让这个元素打破栅格，又能与别的元素构成调配，有很多考究。

区别图层



将不一样的元素置于不一样的图层，这么能够保证有些元素超出于栅格，而别的的元素坚持一致。

由于Material Design 的流行，现现在很多页面现已开端运用图层来办理页面中不一样的元素。不一样的元素在不一样的图层中，以不一样的规矩运动，彼此交叠又彼此区别，更为高效地运作。

Cmmnty 这个页面中，让线条和文本同图像产生了交叠，凭借错位的排版营造出一种失衡的作用。你会在全部规划中看到栅格的痕迹，而这个时分的视觉失衡的有些，就显得适当显眼了。

有意图地运用留白



想要强调一个元素，留白老是最有用的手法。只要在准确的当地发明留白，才能让其盘绕下的元素显得突出。

咱们常常会以为，在移动端规划上，单列或许单行的规划是对比合理，可是多队伍的规划本来也是可行的，主要的是发明出全体性更强的视觉规划。

比方SAS这个网站，当规划师运用留白来打破传统的规划之时，让文字左对齐横跨不一样的区块，加上居中的图标。这么的规划令这些打破栅格的元素愈加夺目，导致用户的留意力。留白的运用，为这些元素发明晰“被留意”的机会。

将元素置于容器中



当元素以某种形式被包含到别的的容器傍边的时分，即便栅格体系因而被损坏，也通常能给人一种全体感。就像上面的页面，打破栅格的文本被置于五颜六色的布景傍边，即是这么做的。

这种被置于一个容器中的元素，即便并没有遵从栅格的规范，也常常会给人一种彼此相关的感受。

这种被包含在容器中还打破了栅格体系的规划，是一种较为风趣的手法。很多容器都被规划成完全对称的款式，可是其间的元素则不然，这从某种意义上打破了本来单调的规划。

调整特定的元素



想要打破栅格最好的办法，即是凭借细节来完成这一意图。但这并不意味着处处都要加细节，和留白的道理是一样，假如网站处处都是打破栅格的细节，那么网站会完全堕入紊乱的。所以，选取特定的元素来进行调整会更有用。

装点性的元素是十分不错的挑选。比方为某个需求强调的元素附上一个斗胆而醒意图颜色，调整一下它的方位，或许微调一下它的方位，让它打破栅格体系。

The Land Of Nod 这个网站就运用较长的平行四边形来“打破栅格”，首要这个形状并不多见，醒意图红色和它半叠加的方位，都让它从全部规划中锋芒毕露。

让它动起来



凭借动效，让元素从栅格体系中脱离出来，也是个不错的办法。和上一个相同，当单个元素运动起来的时分，作用会十分显着，乃至能够让全体的栅格体系显得不是那么显着。

当然，Trippeo 这个网站所采用的办法愈加急进：它让中心计费的图形方位不变，而布景的一切元素都随之移动，全部页面融入了视频布景、栅格体系和视差翻滚等多种技能，肯定是奇思妙想和技能的高度交融。

发明打破栅格的错觉



有的时分，打破栅格并不需求你真的“打破”它。你能够在栅格体系内凭借风趣的形状和非对称的调配，营造出“被打破”的作用。

不打破栅格的优点在于，你依然充分利用栅格体系的优势，一起还能做一些不一样的东西。最好的方法是凭借奇数的队伍来规划，加上不完全或许不充分的元素填充，营造犯错、漏、缺、不对称的作用。

就像上面的Marche Notre Dame 这个网站，尽管看起来不对称，可是其间的内容依然是沿用着栅格化的规划。

结语

打破栅格的规划并不简单完成，由于控制欠好常常会让全部规划堕入紊乱。如何在参加奇思妙想的一起还不会损坏全部项目？多操练老是没有错的。