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

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