我們在大量的企業建站實戰經驗中得出，通常為企業市場戰略服務的品牌網站，首頁的版式設計都很出眾，有采用全屏單屏布局的，有結合企業業務及產品特征做左右左排版布局的，也有一些采用九宮格的版式陣容。今天我們主要針對網站首頁采用類似九宮格或者叫采用一行三列、四列等布局的網站設計作品進行分析，看看這些作品是如何借助柵格系統作出好看、好用的網頁作品的。

01.

-

這個網頁作品首頁采用了一行四列的內容對齊與分布方式，網站從上至下都遵循這個對齊的原理。如內頁列表有類似的布局，也應該按照這個比例來布局分配。

02.

-

這個網頁設計作品的版式設計跟剛才介紹的有點類似，也采用了一行四列的排版布局方式。而且都是頭部采用無底色壓背景圖的方式。這在內頁一些白色低內容上，需要考慮頭部的黑白模式切換的交互設計。

03.

-

這個網頁版式作品跟剛才的2個就截然不同了。有三列也有兩列，還有錯位。但基本上保持主要內容區域左右兩邊對齊。

04.

-

這個韓國風格的網頁設計作品，在版式上突破了之前看到的，在整體上采用劇中對齊，而部分模塊采用半遮罩狀態的方式，基本上是結合了手機端的滑動模塊的技術形態。

05.

-

這個一行四列的布局，采用了無邊框，無底色，單列內容劇中對齊的方式，無形中形成了一行四列的對齊版式，是個不錯的網頁設計作品。

06.

-

很喜歡這個網頁設計版式，一行三列對齊，且不是平均切割屏幕。從上至下對齊，網站內容文案一但得到有效的歸納和對齊梳理后，網站的版式設計風格就自然出來了，很有設計感。最后就是這個背景圖的倒影方式，是一個加分項。

07.

-

毫無疑問，建筑設計行業的網站，都很有設計逼格。究其原因，主要是在屏幕的比例劃分布局以及對齊方式上花了些心思。

08.

-

這個網頁設計作品，一行三列帶有底色的布局很常見，但是公司簡介下，利用標題、正文形成一個一行2列布局，且跟上面有一個對齊關系，設計感瞬間出來。

09.

-

資訊類、人才招聘類網站采用這種布局方式是比較好的（一行三列比一行四列更好）。因為文字的信息量很大，而插圖配圖很少，整體上看起來版式簡約，界面清新，十個不可多得的網頁設計作品。

10.

-

這個網頁設計作品是一個很常見的版式，但亮點在于logo與整體的版式設計融合之處。

11.

-

這個網頁的版式，采用了一行三列，且多個模塊下還有局部變化，適當增加幾何圖形把模塊內容豐富化，整體風格看起來有創意。

12.

-

這個網頁版式設計作品包含了一行三列、四列的對齊關系。

13.

-

這個網頁設計作品，slogan是左對齊，部分模塊采用有對齊，還有一些是劇中對齊，但是整體上看沒有覺得很亂。這是什么原因導致的呢？主要原因是內容區域的外輪廓對齊關系是確定的。只要界面上通過柵格系統對齊后，能確保內容區域的外部對齊，內部的grid是對齊的，具體到一個模塊的內容是左對齊還是有對齊，都不太影響整體的板塊對齊了。

14.

-

這個網頁版式布局有些復雜，看起來很給力。通過柵格線來分析發現，主要內容區域的對齊關系確定了，個別模塊可以超出這個范圍進行其他的對齊和分布比例。

在網站制作工藝當中，一行多列且劇中、或居左布局的制作技術已經很成熟，可以說是網頁首頁、列表頁及詳情頁的相關信息推送列表中，必備的模塊及樣式，掌握好類似九宮格這種一行多列的設計樣式，對于提升網站頁面的設計感以及整站的可觀賞性有很大的幫助。大家平時閱讀優秀設計作品時，可刻意收集和關注這一類細節的設計作品，切莫書到用時方恨少，平時有目的的日積月累，對后期做項目的創意及效率爆發有很大的支持作用。