20個簡單精妙的等分兩欄式優秀網頁設計

 　　借助柵格系統所提供的結構，網頁頁面在將內容組織得井井有條的同時，還可以兼顧到漂亮的布局和響應式的變化。這種情況在各類新聞、博客和網絡雜志類的網站中並不鮮見。

　　不過這些四四方方的區塊呈現在用戶面前的時候，通常是用炫酷的內容抓住眼球，布局設計大多隱於幕後發揮作用。當然，也有一些設計師會強化布局設計來吸引用戶，柵格系統的自由度和兼容性就在此可見一斑。在這類頁面設計中，有一種不算主流但也並非鮮見，別具一格同時也具有很大的拓展空間的布局設計，這就是今天我們要聊的兩欄均分式頁面布局。

　　通常意義上的兩欄式的頁面布局其實很常見，但是它們大多都不會將兩欄均分。等分式的設計需要設計師和站長有足夠的膽量和魄力。這種網頁可以設計得清爽可人，但是要有做好輕重對比、搞定視覺重心且避免用戶的“選擇強迫症”，需要設計師巧妙地運用各種設計技巧。今天，我們來看看這類網頁設計 作品中成功的案例，從中汲取經驗，總結技巧。

　　Masi Tupungato

　　壯闊而漂亮的風景圖片占據著整個頁面，色調相似的圖片讓整個頁面的風格保持了一致性，左右布局的差異讓頁面視覺有了輕重之分，別致而有趣。

　　Studio Meta

　　Meta 工作室的網站設計頗為大氣，漂亮的工作室外景直接占據了頁面的一半成為了頁面的視覺重心，右側的文案也同樣組織嚴密，沒有使用過重的設計自然也不會喧賓奪主。

　　Portfolio of Cihat Turhan

　　Cihat Turhan 的作品展示頁采用的是等分兩欄式的……背景，一邊是頁面一邊是代碼，居中的文字介紹則正好暗示出了設計師的身份。網站的構思頗為精巧，美中不足的是對於移動端浏覽支持不足。

　　Wreck’s Valentines

　　毫無疑問沒一次情人節必然會牽涉到兩個人，而頁面等分也正好符合這個為請人們而設的渡假網站的設定。頁面左側維持不動，右側形同我們常見的單頁滾動式的設計，展示相關的細節。

　　Formlets

　　Formless 的首頁借由左側的插畫來營造輕松愉悅的氛圍，而將功能性的按鈕布置於左側，分工明確。

　　Stolen Girlfriends Club

　　這個名為被盜女友俱樂部的電商平台的頁面設計頗為有趣，等分的頁面兩側展示著不同的圖片，它們不僅充當著展示的作用，當你鼠標移動到圖片上的時候會看到相應的分類，也就是說它們同時還充當著導航的作用，別出機杼哦。

　　World of Warships

　　戰艦世界的網頁借助兩欄式的布局來平衡視覺和文案，這種方案非常有效。盡管頁面所含內容很多，但是輕重對比之下用戶也能更為輕松找到他們想要的東西，避免在大量信息中迷失。

　　Nicolas Tarier

　　干淨的頁面設計反映出Nicolas Tarier的獨特個性，略顯不平衡的頁面布局明顯是設計師刻意為之，營造出有趣而俏皮的氛圍。

　　Spotify Valentines

　　即使是互聯網巨頭，許多科技公司也無法抗拒情人節的吸引力。Spotify 因此創建了一個有趣的實驗性的頁面，歌曲配合著相應的色彩營造出別樣的情緒，然後，輪到你在兩首歌中作出選擇了。

　　Sparked

　　Sparked 網站將一系列整潔的高素質圖片封裝到組織嚴密的柵格系統中，讓簡單的布局擁有了豐富的內容。

　　Project 360

　　頁面在兩個等分的區塊中展示了一幅圖片的兩個不同的可能性，作為一個專注於創造壯觀圖景的項目，這樣的展示方式非常貼合項目本身的屬性。

　　Elite Model Agency

　　這個名為精英模特經紀公司的官方網站擁有一個極為簡單的著陸頁，直觀的導航。看似原始的布局設計實際同樣擁有華麗的一面，設計師用專業的攝影作品來承載網頁令人驚艷的部分，直擊用戶的雙眼。

　　Taphome

　　Taphome 的服務頁等分為兩部分，將數據塊和圖片互補並列來填充頁面，也是暗示它們服務分為兩個部分。

　　Brandts

　　Brandts的頁面設計有動有靜，左邊的部分會輪播一組漂亮而驚艷的圖片，左邊的部分則保持靜態，承載重要的文字內容。頁腳的設計也很值得借鑒，僅呈現固定的內容，簡約而漂亮。

　　Pauw

　　作為一個服裝品牌，Pauw的著陸頁采用的等分兩欄式布局正好承載男裝和女裝，簡約的頁面設計配合著強對比的內容，男女模特承載著視覺重心，而黑白對比的文字內容則很好輔助著圖片做好了說明，主次分明又不失均衡。同時，這樣的設計也可以很好地兼容小屏幕。

　　Nightcal

　　頁面布局等分使得網頁的浏覽者不用受到過多信息的沖擊，這樣的非入侵式的設計賦予了設計師更多的發揮空間。

　　Nicolas Bussiere

　　和之前很多案例一樣，等分的空間雖然物理尺寸一樣，但是內容在視覺上的不均衡營造出頁面的重量感，內容的組織性更強，信息的傳遞也更加自然。

　　Blondy

　　即使呈現的內容不盡相同，但是等分式的兩欄布局可以創造出“平衡”的概念，這樣的布局也使得Blondy多種多樣的內容以更有條理的方式呈現出來。干淨整潔，用戶不用一次從很多選項中進行選擇。

　　Eurovision

　　盡管這個網站中僅有著陸頁使用了等分兩欄式布局，不過這種暗含“競爭”意味的布局反而呈現出一種有趣的對比效果。

　　So Creative

　　許多設計師會將自己的作品展示頁做成兩欄式的，可以一次展示兩個作品，而且可以盡可能多地呈現細節又不會浪費頁面空間，易於區分。至於用戶會先看哪個，就要看用戶喜好了。

　　結語

　　等分兩欄式的頁面設計重點在於視覺設計上。復雜的柵格布局自由靈活，單頁設計直接有沖擊力，但是它們也更容易讓人審美疲勞，這個時候不妨試試等分兩欄式的設計，開開腦洞試試新布局，也許會有意外之喜。