網格是UI設計的基礎，可以將其理解為介面佈局的框架，具有組織UI元素、引導用戶、確定設計各個部分的作用。雖然網格存在的目的是幫助我們創造出井然有條的設計，但在UI設計過程中，我們沒有必要被它束縛住，偶然打破網格可以讓整個網頁設計更加抓人眼球。

什麼是網格系統?網格的可預測性幫助用戶快速到達目標

如果你去過NewYork並且在街道上走過，相信你應該很清楚知道如何從一個區域走到另一個區域，如何從一條街道走道另外一條街道，因為這個城市建立在網格系統之上的。

設計案例分析

網格系統是利用一系列垂直和水平的參考線，將頁面分割成若干個有規律的列或格子，再以這些格子為基準，控制頁面元素之間的對齊和比例關係，從而搭建出一個具有高度秩序性的頁面框架。

正如網格的可預測性能夠幫助NewYork當地人和旅客定位所在地和目的一樣，UI設計使用網格系統可以提高頁面的可讀性，允許用戶快速抵達目標。

總的來說，網格系統應用於UI設計中具有以下好處：

☑ 讓UI元素按照一定規律清晰排布

☑ 讓網站各頁面看起來保持一致性

☑ 保持各元素之間的間距，讓整個設計保持整潔

☑ 可讓各種UI元素的佈局更規則化，從而提高UI設計的效率

既然網格系統有那麼多優勢，為什麼還要打破網格?

設計案例分析

網格系統的意義在於更靈活地幫助設計師有序佈局，而不是限制你的設計，一味按照網格線來進行佈局。因此，如果你的網站設計得不錯，那麼可以通過網格系統來讓網站更具有體驗價值;如果你覺得網格系統並不適合應用於你的網站，可以採取打破網格系統這一UI設計技巧，使網站更加別樹一格，更有吸引力。

下面，小編將透過一些優秀的UI設計案例，簡單介紹如何在打破網格的同時保持一致且協調的視覺效果?

優秀UI設計案例一：Cmmnty

設計案例分析

由於Material Design的流行，很多網頁設計已經開始將不同元素置於不同圖層中，以突出介面中的部分元素。比如Cmmnty網站設計，雖然我們仍可看到網格的痕跡，但是設計師非常巧妙地讓線條和文本與圖片產生交疊效果，藉助錯位排版營造出一種失衡的效果。

優秀UI設計案例二：SAS

設計案例分析

留白，從字面意思理解就是留有空白。SAS網站設計利用留白打破傳統佈局，重點突出畫面中橫跨不同文字與居中的圖片，使畫面結構更加整潔協調的同時，還可以引起用戶的注意力，給他們留下豐富的想像空間。

優秀UI設計案例三：The Land Of Nod

設計案例分析

想要打破網格最好的地方，就是藉助「細節」來實現，但這並不意味介面到處都要添加細節。如果網站到處都是突破柵格的細節，網站就會顯得非常混亂。因此選取特定元素來進行調整效果會更好，比如The Land of Nod網站為突出平行四邊形元素內的內容，不僅附上大膽而醒目的紅色，並使其疊加於圖片上，從整體設計中脫穎而出。

優秀UI設計案例四：Trippeo

設計案例分析

藉助動效，讓元素從網格系統中脫離出來，可減低網格系統的存在感。而Trippeo整個網站所採用的UI設計技巧更加激進：它讓中間計費的圖形位置不變，而是背景的所有元素都隨之移動;同時整個網頁融入了視頻背景、網格系統和時差滾動等UI設計技術，整體效果非常新穎有創意。

優秀UI設計案例五：Marche Notre Dame

設計案例分析

有時候，所謂的「打破網格」並不是真的「打破」，而是在網格系統內藉助有趣形狀和非對稱打破，營造出「被打破」的效果。就像Marche Notre Dame網站雖然看起來不對稱，但是其中內容依然是沿襲著網格的佈局。

總的來說，使用網格系統可以更好地組織畫面中的信息，讓重要元素更加鮮明，從而帶來為用戶帶來更好的操作體驗。但這不代表非要100%完全遵循網格系統來設計，反之適當打破網格系統，這也是創建視覺興趣點的好方法。