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

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