equal-divide-two-column-websites-1

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

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

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

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

這個名為精英模特經紀公司的官方網站擁有一個極為簡單的著陸頁,直觀的導航??此圃嫉牟季衷O計實際同樣擁有華麗的一面,設計師用專業的攝影作品來承載網頁令人驚艷的部分,直擊用戶的雙眼。

Taphome

13-Taphome-20150930

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

Brandts

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

Pauw

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

Nightcal

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

Nicolas Bussiere

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

Blondy

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

Eurovision

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

So Creative

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

結語

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

【那些充滿異域風情的網頁設計】

《兼容并蓄!20個來自澳大利亞最優秀的網頁設計》
《狂拽酷炫!20個來自美國最優秀的網頁設計》
《KEEP CALM & DESIGN!26個來自英國最優秀的網頁設計》
《嚴謹而浪漫!20個來自德國最優秀的網頁設計》
《情迷西班牙!20個來自西班牙最優秀的網頁設計》
《時尚雅致!25個來自法國最優秀的網頁設計》
《請多關照!20個來自日本最優秀的網頁設計》

原文地址:designmodo
優設譯者:@陳子木

本文由優設網原創翻譯,請尊重版權和譯者成果,轉摘請附上優設鏈接,違者必究。謝謝各位編輯同仁配合。

【優設網 原創文章 投稿郵箱:2650232288@qq.com】

================關于優設網================
“優設網uisdc.com“是國內人氣最高的網頁設計師學習平臺,專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書:史上最全的設計師圖書導航:http://hao.uisdc.com/book/。
設計微博:擁有粉絲量101萬的人氣微博@優秀網頁設計 ,歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航:全球頂尖設計網站推薦,設計師必備導航:http://hao.uisdc.com

點贊
收藏 1

發表評論 快來秀出你的觀點

還可以輸入 800 個字
 
 
載入中....
相關推薦
評論 收藏