@MartinRGB 網站的基礎在于布局。它能夠很好起到引導用戶的作用，為用戶提供可選擇的選項，且能夠告訴用戶網站的重點所在。同時布局影響到了網站的美感。因此，我們在布局設計上要非常謹慎。
獨家的、創新的布局能夠大幅提高用戶的瀏覽體驗。通常，我們都會揣摩用戶的心理，我們會把自己當作用戶，然后審視一番自己的網站，問自己"如果我是用戶，我進入網站最想看到什么？""如何與用戶更好的交流？"在設計尚未開始前，我們便要做足這方面的功課，充分了解用戶的動機、需求以及心理，因為布局能夠決定設計的"形狀"。
好吧，下面我們來一起看一下一些不同尋常的網站布局。它們不一定完美無缺，但是各自有各自的風格。或許，它們的布局能夠激發你靈感的火花。
美麗無比。頂端的紅白導航條配以照片選用考究的滾動欄。當你向下滑動頁面時，導航欄略微縮小，但是依然固定在頂部。而圖片滾動欄下方多彩的列表，其實代表該公司烘制的不同風味的曲奇餅干，可以將它們看成子菜單中的按鈕。點擊不同的口味，信息便會在子菜單面板中覆蓋式滑出，三欄式布局也方便吸引用戶注意力。
優雅的線條動效隨著頁面的讀取進度而漸漸在屏幕上展開。箭頭象征著運動與流體之美，鼓勵著用戶滑動頁面，瀏覽內容。下方的內容采用三欄式布局，兩欄用以顯示內容，一欄側邊欄。然而卻沒有一種呆板的感覺，反倒讓用戶感到非常開放、大氣——這是因為圖像大量使用了圓角，且空間寬敞。該網站的布局讓用戶感到非常舒服。
個人非常喜歡這款布局，簡單，但視覺效果不簡單。該工作室的作品以鉆石的形狀排列，且有大有小。中間的那塊"鉆石"顯示了該工作室的標識，黑白的配色，使之從眾多作品中脫穎而出。當指針在每塊"鉆石"上懸停時，會顯示出該作品的簡潔。單頁頁面有著獨創且清爽的布局，非常易于用戶操作。
Luke Finch的作品集網站布局非常有趣且非常的有好。看起來雖然很雜亂無章，但是完全另辟蹊徑。能夠通過圖像告訴你作品的一些信息，通過箭頭來進行導航。而左上角的小心臟，是整個網站的導航。當光標在作品上懸停時，其他作品"黯然失色"，非常好的突出效果。
動態式布局。在載入頁面，提供了一個非常怪異的歡迎頁面，用以提示你向下滾動，導航條固定在頂部。我特別喜歡這種透明式的導航條，能夠迅速的跳轉至相關的內容。盡管整個網站確實存在布局設計，但內容在頁面中顯得有些散亂。每個環節的背景顏色都不盡相同。三欄式布局非常容易識別，但是設計團隊將布局的成規打破，采用了更自由的方式，顯示效果也更加有趣。
生活很枯燥？給你點顏色吧！這個作品集網站極具個性，作品生動、大氣。頁面中左右的圖像均為動態。主題非常一致的網站，既能夠代表設計師，又能獨立作為作品集存在——這就是作品集網站的要點所在。標識非常的多彩，而且動效給整個網站帶來一種活力。
獨樹一幟的布局，右面的頁碼固定的風格略像信頭。而左邊提供了方便使用的導航。頁面最上方展示出他們建造公寓的簡圖。
KathArt（強烈推薦！）
KathArt采用了優秀的視頻式布局。網站非常具有個性，而且非常高效，讓你感覺好像在和設計團隊面對面的聊天。設計團隊在視頻中介紹他們的工作，讓你感覺你好像在和他們一道探討產品！導航采用了時間線的風格，非常聰明，可以改變視頻的進度。
Wacom適用于專業用戶，也適用于非專業用戶。布局是設計整體的一部分，且營造了一種對用戶友好的感覺。當懸停在導航欄處，導航欄就會縮小，然后顯示出每個選項中的子菜單，用戶可以自由選擇。非常非常的整潔，能夠讓用戶迅速的找到所需。我喜歡他們的那條手繪線。
布局體現了項目的精神與態度。導航欄在頁面的左邊且固定。有著強烈視覺沖擊風格的滑動欄圖像。令人對這場舞蹈節印象深刻。
寬大、粗放的布局。當懸停在圖標上時，圖像的像素便無法識別，這樣就能引起你的注意。頂部的導航欄固定。整個布局非常的沖擊傳統，照片也非常漂亮。
布局非常簡約——因此對于用戶來說非常直接，非常易于操作，每個頁面僅僅只有兩種顏色，且與其他頁面的"兩種顏色"完全不同。當你點擊其中一項作品時，這項作品會占據主要頁面，然后導航會縮小為右面板。個性化又能很好的展示作品，贊！
非常規、創新的自行車商店設計。熱情、富有魅力的自行車照片伴隨著頁面的加載。整個頁面由4部分組成。非常能夠打動女性，字體非常的粗獷，而且自行車的3D化也使產品更有層次感。
簡約，可達性好。Logo標識采用黑白這種色彩。然而文章圖片卻色彩斑斕。導航條在頁面的中部，能夠引起用戶對內容的興趣。
非常引人注目的卡片式布局。一塊又一塊的厚色片幫助整體網站完成了有序的布局。而底部的布局稍顯傳統，通過這種卡片式區塊布局，創造了一種動態式的美感。不同的顏色，代表了網站的不同環節，讓內容易于導航，也易于閱讀。
黑白風帶來的中性設計，突出了內容。沒有為網格線布局粉飾過多，反而顯得非常干凈。懸停效果蠻有趣，內容卡片會向左上方浮動，右側和下方會出現一圈像素快。導航固定在左側，搜索和內容過濾固定在頂部。
非常細膩有愛的用戶體驗。網格線使用的非常嚴謹，出售的產品非常的有復古風，古色古香，打造經典，這種簡潔、大氣的感覺令人窒息。Harry的剃須刀網站的用圖也非常考究。
這個Tumblr網站，通過照片體現出電影的魅力，偶然跳出一個GIF動畫或者白色徽章，充滿趣味性，而標識采用了潦草的手寫體，讓人有一種歲月碎片之念。內容區塊的怪異布局反而營造了一種有趣的視覺效果。時隱時現的GIF動畫，讓用戶感到眼花繚亂。非常有個性的電影網站。
這款頁面需要用戶與之交互才能繼續進行，在頁面載入時，便提供一個選項來選擇烘焙級別。先會出現一款美食的精致大圖，再點一下，左面會彈出一個食譜覆蓋了全部頁面,酷！
獨特的交互性和布局。當你在滑動時，頁面中所有的圖像都在進行視差滾動。對于該網站主推的產品來說，這種布局非常合適，導航條隱藏在右上角，當你點擊，便可進行選擇。
布局非常的不同尋常。通過背景圖像來引導內容。采用了標準的網格線，但是布局上卻力求新意，完全不采用重復的布局。
作為富有創意的插畫師和圖形設計師，Abby Putinski的作品集網站也是獨具一格。在在載入的時候，便有一個動效來介紹網站內容，邀請用戶來瀏覽他的作品。一旦關閉這個窗口，就可以開始你的大冒險。這個網站幾乎沒有布局，非常的自由開放，無拘無束。這使得瀏覽起來體驗非常有趣。
緊密的網格線布局，非常利于大量作品的展示。光標懸停在不同部分時，會顯示出每件作品的標題，點擊之后，便進入了采用水平滾動的作品展示頁面。展示了大量做的設計信息。
Norwich University of the Arts
映入眼簾的超炫大圖，瀑布流的布局風格。醒目的黃色標簽，效果突出、采用Helvetica字體的LOGO。
X-Men系列預告網站，簡單、實用。分成三欄，導航固定在做，視頻劇中，內容垂直滾動居右。導航欄選項點擊的動效很不錯。清爽，又能很直觀的呈遞內容。
沒有布局，便是布局？創造了一種類似FLash的動效字體設計，一直自動播放。就算不瀏覽網頁的內容，滾動欄中多種多樣的字體就夠用戶欣賞很久了。
CSS+HTML+JS+SVG會有什么效果呢？請瀏覽Contad
布局層次分明，模塊化的感覺。不同元素彼此重疊。很是顛覆傳統。
奔跑、變換色彩的貓科動物。在奔跑的過程中內容一覽無余，非常有趣的定格像素圖像。
動效應用廣泛，很好的全濕了內容。Mikael Edwards的動效使用既具有功能性，也具有視覺效應。他的理念是，既然是有別于傳統媒介的網頁設計，那么就一定要有網頁自己的特點，不可一味的圖像+文字。
和你期待中的設計師網站有所不同對嗎？這不像是個網站，更像是一個網站的HTML代碼，雖然略有高端，但是新意十足。
頁腳處提供了跳轉至頁的功能，導航和選項在用字、配色上都很棒，讓人感覺大氣、開放，采用了響應式設計的導航欄。
內容一致。結構嚴謹，映入眼簾的圓環讓人感覺非常友好，用戶會順其引導，繼續瀏覽下面的內容。而下方的具體內容摘要做的也很棒，鼠標懸停，標題會上浮，顯示出一系列相關內容。
通過布局鼓勵用戶來進行交互。背景中的視頻讓用戶感到著迷，導航非常有趣，當你懸停在導航處時，導航會彈出更多的信息。字體選用非常棒。
水平滾動，非常另類，點擊具體項，只占據頁面中央，且只占據整個頁面的一半。簡介簡短、直接。而且這種設計的好處在于，不用跳轉到其他頁面，一個水平滾動的單頁面就能大致了解網站內容，左上角顯示了設計師各種鏈式方式，右下角顯示了設計師陳列作品的一些平臺。
留白區域讓網站感覺非常的大氣、友好，能夠讓用戶更好的閱讀、導航、高效瀏覽。懸停效果與眾不同，像開門一樣，只打開一半，非常有趣。
非常可愛的概念，它會電郵你一張非常漂亮的、具有設計感的明信片，而且有傳統信件古色古香的外觀。布局服從于整體的概念而進行設計。背景采用了紙質，而邊線采用了復古風格的封線。非常具有復古感。
單頁布局，滾動的效果非常酷。頁面會分裂成兩半，然后背向而馳，創造出一種動態效果。
這個作品集網站充分展現了設計師的個人技巧，直奔主題，簡明扼要的介紹了設計師及其作品。圓形的采用創造了一種流動、友好型的沒學。而背景的溢流圖案給整體增加了一種自由、開放感。導航條非常簡單，就在頁面的右邊，像只是器一樣。
不斷翻轉的標識，優秀的視差滾動。
結論
布局是網頁設計的基礎，也決定了網頁設計的走向。多為用戶著想，多用交互性上考慮，改善布局。創新的目的不是為了給用戶帶來個性化瀏覽體驗，讓用戶有一種耳目一新的感覺，看完這些，你是否有靈感了呢？
優設網編輯：@MartinRGB
原文地址：http://www.smashingmagazine.com/2013/08/29/innovative-appraoches-web-layout/
================關于優設網================
"優設網uisdc.com"是一個分享網頁設計、無線端設計以及PS教程的干貨網站。
【特色推薦】
設計講座：每月邀請國內互聯網公司設計前輩及行業總監在群內及YY語音（YY頻道：15335158）分享實戰經驗。
設計微博：擁有粉絲量47萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設計教程、經驗分享和各種意想不到的"福利"嗎？
添加 優秀網頁設計 微信號：【youshege】優設哥的全拼
您也可以通過掃描下方二維碼快速添加：
復制本文鏈接 文章為作者獨立觀點不代表優設網立場，未經允許不得轉載。
發評論！每天贏獎品
點擊 登錄 后，在評論區留言，系統會隨機派送獎品
2012年成立至今，是國內備受歡迎的設計師平臺，提供獎品贊助 聯系我們
標志設計標準教程
已累計誕生 730 位幸運星
發表評論
↓ 下方為您推薦了一些精彩有趣的文章熱評 ↓