40個獨樹一幟的創(chuàng)新式布局網頁設計.docx

40個獨樹一幟的創(chuàng)新式布局網頁設計網站的基礎在于布局。它能夠很好起到引導用戶的作用，為用戶提供可選擇的選項，且能夠告訴用戶網站的重點所在。同時布局影響到了網站的美感。因此，我們在布局設計上要非常謹慎。獨家的、創(chuàng)新的布局能夠大幅提高用戶的瀏覽體驗。通常，我們都會揣摩用戶的心理，我們會把自己當作用戶，然后審視一番自己的網站，問自己”如果我是用戶，我進入網站最想看到什么？”如何與用戶更好的交流？”在設計尚未開始前，我們便要做足這方面的功課，充分了解用戶的動機、需求以及心理，因為布局能夠決定設計的”形狀”。好吧，下面我們來一起看一下一些不同尋常的網站布局。它們不一定完美無缺，但是各自有各自的風格。或許，它們的布局能夠激發(fā)你靈感的火花。Beurre & Sel美麗無比。頂端的紅白導航條配以照片選用考究的滾動欄。當你向下滑動頁面時，導航欄略微縮小，但是依然固定在頂部。而圖片滾動欄下方多彩的列表，其實代表該公司烘制的不同風味的曲奇餅干，可以將它們看成子菜單中的按鈕。點擊不同的口味，信息便會在子菜單面板中覆蓋式滑出，三欄式布局也方便吸引用戶注意力。Hackery, Maths & Design優(yōu)雅的線條動效隨著頁面的讀取進度而漸漸在屏幕上展開。箭頭象征著運動與流體之美，鼓勵著用戶滑動頁面，瀏覽內容。下方的內容采用三欄式布局，兩欄用以顯示內容，一欄側邊欄。然而卻沒有一種呆板的感覺，反倒讓用戶感到非常開放、大氣這是因為圖像大量使用了圓角，且空間寬敞。該網站的布局讓用戶感到非常舒服。The Drawing Room個人非常喜歡這款布局，簡單，但視覺效果不簡單。該工作室的作品以鉆石的形狀排列，且有大有小。中間的那塊”鉆石”顯示了該工作室的標識，黑白的配色，使之從眾多作品中脫穎而出。當指針在每塊”鉆石”上懸停時，會顯示出該作品的簡潔。單頁頁面有著獨創(chuàng)且清爽的布局，非常易于用戶操作。We Love NoiseLuke Finch的作品集網站布局非常有趣且非常的有好?？雌饋黼m然很雜亂無章，但是完全另辟蹊徑。能夠通過圖像告訴你作品的一些信息，通過箭頭來進行導航。而左上角的小心臟，是整個網站的導航。當光標在作品上懸停時，其他作品”黯然失色”，非常好的突出效果。Ende動態(tài)式布局。在載入頁面，提供了一個非常怪異的歡迎頁面，用以提示你向下滾動，導航條固定在頂部。我特別喜歡這種透明式的導航條，能夠迅速的跳轉至相關的內容。盡管整個網站確實存在布局設計，但內容在頁面中顯得有些散亂。每個環(huán)節(jié)的背景顏色都不盡相同。三欄式布局非常容易識別，但是設計團隊將布局的成規(guī)打破，采用了更自由的方式，顯示效果也更加有趣。Edward Carvalho Monaghan生活很枯燥？給你點顏色吧！這個作品集網站極具個性，作品生動、大氣。頁面中左右的圖像均為動態(tài)。主題非常一致的網站，既能夠代表設計師，又能獨立作為作品集存在這就是作品集網站的要點所在。標識非常的多彩，而且動效給整個網站帶來一種活力。Huys獨樹一幟的布局，右面的頁碼固定的風格略像信頭。而左邊提供了方便使用的導航。頁面最上方展示出他們建造公寓的簡圖。KathArt（強烈推薦?。㎏athArt采用了優(yōu)秀的視頻式布局。網站非常具有個性，而且非常高效，讓你感覺好像在和設計團隊面對面的聊天。設計團隊在視頻中介紹他們的工作，讓你感覺你好像在和他們一道探討產品！導航采用了時間線的風格，非常聰明，可以改變視頻的進度。WacomWacom適用于專業(yè)用戶，也適用于非專業(yè)用戶。布局是設計整體的一部分，且營造了一種對用戶友好的感覺。當懸停在導航欄處，導航欄就會縮小，然后顯示出每個選項中的子菜單，用戶可以自由選擇。非常非常的整潔，能夠讓用戶迅速的找到所需。我喜歡他們的那條手繪線。Amsterdam Dance Event布局體現了項目的精神與態(tài)度。導航欄在頁面的左邊且固定。有著強烈視覺沖擊風格的滑動欄圖像。令人對這場舞蹈節(jié)印象深刻。Cropp寬大、粗放的布局。當懸停在圖標上時，圖像的像素便無法識別，這樣就能引起你的注意。頂部的導航欄固定。整個布局非常的沖擊傳統(tǒng)，照片也非常漂亮。Neue Yorke布局非常簡約因此對于用戶來說非常直接，非常易于操作，每個頁面僅僅只有兩種顏色，且與其他頁面的”兩種顏色”完全不同。當你點擊其中一項作品時，這項作品會占據主要頁面，然后導航會縮小為右面板。個性化又能很好的展示作品，贊！Juliana Bicycles非常規(guī)、創(chuàng)新的自行車商店設計。熱情、富有魅力的自行車照片伴隨著頁面的加載。整個頁面由4部分組成。非常能夠打動女性，字體非常的粗獷，而且自行車的3D化也使產品更有層次感。Esquire簡約，可達性好。Logo標識采用黑白這種色彩。然而文章圖片卻色彩斑斕。導航條在頁面的中部，能夠引起用戶對內容的興趣。Institut Choiseul非常引人注目的卡片式布局。一塊又一塊的厚色片幫助整體網站完成了有序的布局。而底部的布局稍顯傳統(tǒng)，通過這種卡片式區(qū)塊布局，創(chuàng)造了一種動態(tài)式的美感。不同的顏色，代表了網站的不同環(huán)節(jié)，讓內容易于導航，也易于閱讀。Award黑白風帶來的中性設計，突出了內容。沒有為網格線布局粉飾過多，反而顯得非常干凈。懸停效果蠻有趣，內容卡片會向左上方浮動，右側和下方會出現一圈像素快。導航固定在左側，搜索和內容過濾固定在頂部。Harrys非常細膩有愛的用戶體驗。網格線使用的非常嚴謹，出售的產品非常的有復古風，古色古香，打造經典，這種簡潔、大氣的感覺令人窒息。Harry的剃須刀網站的用圖也非常考究。The Kings of Summer這個Tumblr網站，通過照片體現出電影的魅力，偶然跳出一個GIF動畫或者白色徽章，充滿趣味性，而標識采用了潦草的手寫體，讓人有一種歲月碎片之念。內容區(qū)塊的怪異布局反而營造了一種有趣的視覺效果。時隱時現的GIF動畫，讓用戶感到眼花繚亂。非常有個性的電影網站。World Baking Day這款頁面需要用戶與之交互才能繼續(xù)進行，在頁面載入時，便提供一個選項來選擇烘焙級別。先會出現一款美食的精致大圖，再點一下，左面會彈出一個食譜覆蓋了全部頁面,酷！Paper & Paint獨特的交互性和布局。當你在滑動時，頁面中所有的圖像都在進行視差滾動。對于該網站主推的產品來說，這種布局非常合適，導航條隱藏在右上角，當你點擊，便可進行選擇。Newsweek布局非常的不同尋常。通過背景圖像來引導內容。采用了標準的網格線，但是布局上卻力求新意，完全不采用重復的布局。Abby Putinski作為富有創(chuàng)意的插畫師和圖形設計師，Abby Putinski的作品集網站也是獨具一格。在在載入的時候，便有一個動效來介紹網站內容，邀請用戶來瀏覽他的作品。一旦關閉這個窗口，就可以開始你的大冒險。這個網站幾乎沒有布局，非常的自由開放，無拘無束。這使得瀏覽起來體驗非常有趣。Baumastisch緊密的網格線布局，非常利于大量作品的展示。光標懸停在不同部分時，會顯示出每件作品的標題，點擊之后，便進入了采用水平滾動的作品展示頁面。展示了大量做的設計信息。Norwich University of the Arts映入眼簾的超炫大圖，瀑布流的布局風格。醒目的黃色標簽，效果突出、采用Helvetica字體的LOGO。Trask IndustriesX-Men系列預告網站，簡單、實用。分成三欄，導航固定在做，視頻劇中，內容垂直滾動居右。導航欄選項點擊的動效很不錯。清爽，又能很直觀的呈遞內容。Adam Hartwig沒有布局，便是布局？創(chuàng)造了一種類似FLash的動效字體設計，一直自動播放。就算不瀏覽網頁的內容，滾動欄中多種多樣的字體就夠用戶欣賞很久了。ContadCSS+HTML+JS+SVG會有什么效果呢？請瀏覽ContadNational Academy Museum布局層次分明，模塊化的感覺。不同元素彼此重疊。很是顛覆傳統(tǒng)。Andrew McCarthy奔跑、變換色彩的貓科動物。在奔跑的過程中內容一覽無余，非常有趣的定格像素圖像。Mikael Edwards動效應用廣泛，很好的全濕了內容。Mikael Edwards的動效使用既具有功能性，也具有視覺效應。他的理念是，既然是有別于傳統(tǒng)媒介的網頁設計，那么就一定要有網頁自己的特點，不可一味的圖像+文字。Designers Friend和你期待中的設計師網站有所不同對嗎？這不像是個網站，更像是一個網站的HTML代碼，雖然略有高端，但是新意十足。Hatched頁腳處提供了跳轉至頁的功能，導航和選項在用字、配色上都很棒，讓人感覺大氣、開放，采用了響應式設計的導航欄。Institute for Emerging Issues內容一致。結構嚴謹，映入眼簾的圓環(huán)讓人感覺非常友好，用戶會順其引導，繼續(xù)瀏覽下面的內容。而下方的具體內容摘要做的也很棒，鼠標懸停，標題會上浮，顯示出一系列相關內容。Into The Arctic通過布局鼓勵用戶來進行交互。背景中的視頻讓用戶感到著迷，導航非常有趣，當你懸停在導航處時，導航會彈出更多的信息。字體選用非常棒。John Jacob水平滾動，非常另類，點擊具體項，只占據頁面中央，且只占據整個頁面的一半。簡介簡短、直接。而且這種設計的好處在于，不用跳轉到其他頁面，一個水平滾動的單頁面就能大致了解網站內容，左上角顯示了設計師各種鏈式方式，右下角顯示了設計師陳列作品的一些平臺。Impress留白區(qū)域讓網站感覺非常的大氣、友好，能夠讓用戶更好的閱讀、導航、高效瀏覽。懸停效果與眾不同，像開門一樣，只打開一半，非常有趣。Postable非?？蓯鄣母拍?，它會電郵你一張非常漂亮的、具有設計感的明信片，而且有傳統(tǒng)信件古色古香的外觀。布局服從于整體的概念而進行設計。背景采用了紙質，而邊線采用了復古風格的封線。非常具有復古感。National LGBT Museum單頁布局，滾動的效果非?？?。頁面會分裂成兩半，然后背向而馳，創(chuàng)造出一種動態(tài)效果。Lucas Nikitczuk這個作品集網站充分展現了設計師