2014-12-31 藍(lán)藍(lán)設(shè)計(jì)的小編
藍(lán)藍(lán)設(shè)計(jì)( www.alimai.net )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù).
每一個(gè)扁平化界面設(shè)計(jì)，都是我們的心靈碰撞致力于最棒的 metro ui 設(shè)計(jì)
來(lái)源：http://www.shejidaren.com/innovative-web-layouts.html
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
布局是網(wǎng)站的基石。其作用是指引用戶(hù)瀏覽網(wǎng)站各組成部分、指明關(guān)鍵內(nèi)容。布局同時(shí)也是網(wǎng)站外觀的關(guān)鍵。因此，內(nèi)容的布局需要認(rèn)真仔細(xì)的思索。
一套原創(chuàng)且新穎的布局能夠顯著提升網(wǎng)站的用戶(hù)體驗(yàn)，但也不要讓創(chuàng)意影響到了網(wǎng)站的可用性。和往常一樣，我們要設(shè)身處地的站在用戶(hù)的角度進(jìn)行思考：我們希望他們看到什么？應(yīng)當(dāng)如何最有效地傳達(dá)訊息？在設(shè)計(jì)開(kāi)始前，以上的問(wèn)題是必須要提出來(lái)的，因?yàn)椴季謱⒇?fù)責(zé)形成設(shè)計(jì)的其余方面。
下面的幾個(gè)網(wǎng)站的布局不走尋常路，盡管稱(chēng)不上完美，不過(guò)瀏覽這些網(wǎng)站，興許能夠給你帶來(lái)創(chuàng)意的火花。
這個(gè)網(wǎng)站實(shí)在漂亮。背景為自動(dòng)播放的幻燈片，主導(dǎo)航欄位于頁(yè)面頂部。隨著鼠標(biāo)向下滾動(dòng)，導(dǎo)航欄會(huì)縮小但仍然固定在頁(yè)面頂部。在其下方是五彩繽紛的公司自產(chǎn)餅干清單，同時(shí)也是子菜單中的按鈕。隨便點(diǎn)擊一種口味的餅干，就會(huì)有相關(guān)信息覆蓋子菜單，以便用戶(hù)點(diǎn)擊瀏覽各種口味。頂部的導(dǎo)航欄和子菜單固定在頁(yè)面三欄網(wǎng)格內(nèi)的中間一欄，可以保證用戶(hù)的注意力始終集中在中心位置。
在頁(yè)面加載的同時(shí)，會(huì)有一個(gè)有趣的3D線性動(dòng)畫(huà)填充屏幕。箭頭代表著動(dòng)感與流暢，并可鼓勵(lì)用戶(hù)向下方內(nèi)容滾動(dòng)鼠標(biāo)。下方的內(nèi)容分布在三欄網(wǎng)格中，其中兩欄為主要內(nèi)容，另有一個(gè)較小的側(cè)邊欄。但是這種布局并不會(huì)讓產(chǎn)生局限感，相反帶來(lái)比較開(kāi)放的感覺(jué)，其原因是使用了寬敞的空間和圓角。這個(gè)網(wǎng)站的布局讓用戶(hù)感到非常舒服。
個(gè)人非常喜歡這個(gè)布局，簡(jiǎn)單但又不失有趣。這家工作室將自己的作品以大小不同，相互堆砌的菱形展示于頁(yè)面之上。最中央的菱形為公司標(biāo)志，表現(xiàn)并不突兀，不會(huì)分散對(duì)作品的注意力。把鼠標(biāo)懸停在任意一個(gè)菱形上時(shí)，其中會(huì)顯示該作品的說(shuō)明介紹。這個(gè)簡(jiǎn)單的單頁(yè)網(wǎng)站布局簡(jiǎn)約而不失創(chuàng)意，同時(shí)使用簡(jiǎn)單方便。
的作品集具有有趣且友善的布局。這一網(wǎng)站看似凌亂四散，但卻打破了過(guò)于簡(jiǎn)潔沒(méi)有新意的局面。過(guò)渡效果可以讓你對(duì)其項(xiàng)目有所簡(jiǎn)單了解，另外還可以使用箭頭進(jìn)行導(dǎo)航。左上角的心形是整個(gè)網(wǎng)站的導(dǎo)航中心，其可在主頁(yè)上旋轉(zhuǎn)變成一個(gè)“i”。在瀏覽網(wǎng)站時(shí)，可以在心形上懸停鼠標(biāo)退出。
這個(gè)布局極具動(dòng)態(tài)效果。在加載時(shí)，首先映入眼簾的是一副古怪的照片，同時(shí)頁(yè)面會(huì)提示你向下滾動(dòng)。滾動(dòng)后會(huì)顯示導(dǎo)航欄并隨后固定于頁(yè)面頂部。個(gè)人非常喜歡它的透明導(dǎo)航欄，能夠更進(jìn)一步打開(kāi)頁(yè)面，展現(xiàn)其后方的內(nèi)容。網(wǎng)站的內(nèi)容四散在頁(yè)面各處，盡管網(wǎng)站有著一定的結(jié)構(gòu)，但其中每個(gè)部分都采用了不同的背景色。這個(gè)網(wǎng)站非常顯眼地使用了三欄網(wǎng)格，但有關(guān)團(tuán)隊(duì)成員的部分卻突破了網(wǎng)格，以一種異常有趣的方式運(yùn)用了屏幕空間。
來(lái)點(diǎn)顏色怎么樣？這個(gè)作品集網(wǎng)站正經(jīng)有個(gè)性，在瀏覽過(guò)程中你會(huì)發(fā)現(xiàn)其確實(shí)異常突兀而有趣。其最值得一提的地方是風(fēng)格的一致性。這個(gè)網(wǎng)站實(shí)際上就凝聚成了一套完整的作品，其一方面表現(xiàn)了設(shè)計(jì)師的風(fēng)格，另一方面也承載了作品集中的各幅作品——這也正是此類(lèi)網(wǎng)站真正應(yīng)當(dāng)發(fā)揮的作用。網(wǎng)站的標(biāo)識(shí)完整表現(xiàn)出了全部配色方案，同時(shí)，閃動(dòng)的動(dòng)畫(huà)也給網(wǎng)站帶來(lái)了動(dòng)感。
這個(gè)網(wǎng)站在布局方面有著獨(dú)到的魅力，頁(yè)面右側(cè)就好像是信紙的信頭，其中說(shuō)明了網(wǎng)站身份和功能等各種必要信息，而頁(yè)面左側(cè)可以垂直滾動(dòng)，并具有類(lèi)似公寓樓窗戶(hù)式的布局，正貼合了公司的業(yè)務(wù)。點(diǎn)擊鼠標(biāo)后，用戶(hù)將跳轉(zhuǎn)到一個(gè)更具博客風(fēng)格也比較方便導(dǎo)航的布局頁(yè)面。
KathArt 采用了非常棒的視頻布局。這一簡(jiǎn)約但卻行之有效的設(shè)計(jì)在展示其團(tuán)隊(duì)成員的同時(shí)四處滲透著自己的個(gè)性。在介紹過(guò)程中，其團(tuán)隊(duì)成員均表現(xiàn)為工作狀態(tài)，就好像你和他們同處辦公室一般。其導(dǎo)航巧妙地采用了時(shí)間軸方式，以便你輕松跟蹤視頻進(jìn)度。
Wacom 的目標(biāo)受眾廣泛，其中既包括專(zhuān)業(yè)人員，也包括非專(zhuān)業(yè)的創(chuàng)意人員。作為網(wǎng)站不可或缺的組成部分，其布局營(yíng)造出了用戶(hù)友好的體驗(yàn)。左側(cè)的導(dǎo)航欄在鼠標(biāo)懸停時(shí)會(huì)最小化，并可展示各種不同的可使用內(nèi)容。用戶(hù)可隨心操縱控制，選擇自己想要看的產(chǎn)品，不會(huì)被強(qiáng)迫觀看任何銷(xiāo)售辭令。主頁(yè)布局簡(jiǎn)單，并可引導(dǎo)用戶(hù)查看最適合自己需求的產(chǎn)品。我個(gè)人很喜歡網(wǎng)站上伴隨產(chǎn)品的巧妙手繪元素。
這個(gè)網(wǎng)站的布局非常有助于展現(xiàn)網(wǎng)站所涉及活動(dòng)的態(tài)度和精神。導(dǎo)航欄一直延伸到頁(yè)面左側(cè)，形成橫跨整個(gè)網(wǎng)站的參考節(jié)點(diǎn)。以強(qiáng)烈并具有視覺(jué)刺激性的圖片組成的幻燈片采用旋轉(zhuǎn)效果，同時(shí)展現(xiàn)有關(guān)網(wǎng)站活動(dòng)的節(jié)慶、場(chǎng)地和會(huì)議宣傳導(dǎo)讀。從激勵(lì)用戶(hù)的角度來(lái)說(shuō)，這個(gè)方法行之有效。
隨著你向下滾動(dòng)，下方的內(nèi)容會(huì)滑過(guò)幻燈片，并將子菜單從底部帶到頂部。網(wǎng)站的每個(gè)部分都有橫跨屏幕的banner，作為當(dāng)前部分具有視覺(jué)吸引力的介紹。文章的其余部分都在網(wǎng)格中呈現(xiàn)。網(wǎng)格中的各行排列并不完美；每列起頭都比上一列略矮一些，堪稱(chēng)又一個(gè)細(xì)微但有效的視覺(jué)設(shè)置。
Cropp 具有大膽張狂的個(gè)性，正如其布局所展現(xiàn)。鼠標(biāo)懸停在任意圖片上時(shí)，圖片會(huì)像素畫(huà)并變得難以識(shí)別，從而牢牢抓住人的注意力。頂部的導(dǎo)航欄在所有頁(yè)面均保持一致，而主頁(yè)則基本上就是導(dǎo)航欄中各個(gè)選項(xiàng)的高調(diào)視覺(jué)呈現(xiàn)。這個(gè)網(wǎng)站的布局牢牢抓住了像素化這一創(chuàng)意，其所有照片和視頻都以方塊形式安置，很像是經(jīng)過(guò)像素化后的圖片。
Davy Rudolph 作品集的網(wǎng)格布局簡(jiǎn)單、簡(jiǎn)約，讓用戶(hù)感到非常直接而自然。其每個(gè)頁(yè)面都只有兩種顏色，并且為當(dāng)前頁(yè)面所獨(dú)用。在點(diǎn)擊任一項(xiàng)目作品后，作品展示將變成頁(yè)面主角，同時(shí)主導(dǎo)航面會(huì)消失。對(duì)于一個(gè)作品集網(wǎng)站采用這種方法，我個(gè)人最贊賞的是其既有個(gè)性，同時(shí)個(gè)性又不至于搶占設(shè)計(jì)師作品的風(fēng)頭。
作為一家銷(xiāo)售自行車(chē)的商店，Juliana的設(shè)計(jì)頗為不尋常。在加載時(shí)，屏幕上會(huì)填充一副美麗、飽滿并充滿溫暖感的照片。網(wǎng)站布局分為四個(gè)部分，均隱藏在導(dǎo)航圖標(biāo)后方。其設(shè)計(jì)比較具有女性風(fēng)格，但文字樣式大膽、強(qiáng)烈、灑脫。自行車(chē)上的3D懸停效果也是個(gè)不錯(cuò)的點(diǎn)。
這個(gè)網(wǎng)站的布局簡(jiǎn)單、清爽、易于理解。Esquire的大標(biāo)題就是單調(diào)的黑與白。其文章導(dǎo)讀使用彩色，能夠吸引讀者眼球。懸停也很簡(jiǎn)單，在導(dǎo)讀標(biāo)題下方有說(shuō)明內(nèi)容。導(dǎo)航欄位于網(wǎng)站中間位置，功能上很類(lèi)似報(bào)紙通過(guò)折頁(yè)位置上方的內(nèi)容引起讀者的興趣。其圖像、顏色和簡(jiǎn)介標(biāo)題也很能吸引用戶(hù)注意。
Intitut Choiseul 采用了很有趣的塊狀布局，彼此之間就像拼圖一樣契合。層疊式外觀以及色塊能夠有效確立風(fēng)格。繼續(xù)向頁(yè)面下方滾動(dòng)，其布局轉(zhuǎn)換成比較傳統(tǒng)的網(wǎng)格形式，但其實(shí)每個(gè)故事都位于一個(gè)大小各不相同的塊內(nèi)，營(yíng)造出一種有趣而動(dòng)態(tài)的美感。不同的色塊標(biāo)志著網(wǎng)站的不同內(nèi)容，因此比較方便導(dǎo)航和閱讀。這家網(wǎng)站從質(zhì)量上說(shuō)比較精良，和自身設(shè)立目的相符。
Award 崇尚創(chuàng)意，其中性的設(shè)計(jì)美學(xué)為設(shè)計(jì)師的作品搭建起了有效的展現(xiàn)平臺(tái)。網(wǎng)格化布局沒(méi)有任何會(huì)轉(zhuǎn)移人注意力或產(chǎn)生沖突的邊邊角角，一切以設(shè)計(jì)師為主角。但其有趣的懸停效果采用了不錯(cuò)的像素化投射陰影。導(dǎo)航欄固定在頁(yè)面左側(cè)，搜索和篩選功能固定在頂部。這一導(dǎo)航布局非常適合于展示網(wǎng)站內(nèi)容。
這個(gè)網(wǎng)站具有非常令人愉悅的體驗(yàn)。其設(shè)計(jì)師充分運(yùn)用了網(wǎng)格，非常適合其目標(biāo)市場(chǎng)。開(kāi)放、干凈的結(jié)構(gòu)化設(shè)計(jì)帶來(lái)了宜人的用戶(hù)體驗(yàn)。作為一家賣(mài)男士剃須刀的網(wǎng)站，Harry’s所采用的圖片都非常精致，具有男人味道的同時(shí)又不讓人感覺(jué)粗野。
這個(gè)Tumblr網(wǎng)站的布局通過(guò)照片、偶現(xiàn)的GIF和電影中的古怪臺(tái)詞充分展現(xiàn)出了這部電影的魅力。其采用了結(jié)構(gòu)化但并不統(tǒng)一的布局，滾動(dòng)瀏覽時(shí)頗為有趣。手寫(xiě)風(fēng)格的標(biāo)題也有助于打造類(lèi)似剪貼簿的感覺(jué)。獨(dú)特的內(nèi)容塊布局形成了很有意思的視覺(jué)效果，照片和GIF彼此時(shí)而重疊，引導(dǎo)用戶(hù)的眼光穿梭于網(wǎng)站之中。作為這部電影的相關(guān)網(wǎng)站，其應(yīng)當(dāng)能傳遞出這部長(zhǎng)篇電影復(fù)雜的個(gè)性。雖然我沒(méi)看過(guò)這部電影，但通過(guò)這個(gè)網(wǎng)站卻能對(duì)其略知一二。
World Baking Day的布局需要用戶(hù)從初入網(wǎng)站開(kāi)始就進(jìn)行交互。在頁(yè)面加載時(shí)，會(huì)有一個(gè)手繪的動(dòng)畫(huà)箭頭提示你選擇自己的烘烤水平。如果你選擇查看全部水平的所有食譜而不是一次查看一種，則會(huì)全屏顯示各種令人食指大動(dòng)的美食食譜。
網(wǎng)站布局把食物打造的有如藝術(shù)品一般，其大多數(shù)頁(yè)面上均展示有烘烤食物的照片，并會(huì)引導(dǎo)你前往下一頁(yè)面查看食譜信息。食譜信息整齊地分布在三欄內(nèi)：食材在左邊、做法在中間、有關(guān)提供者的信息在右邊。
Paper & Paint的布局和交互非常有新意。在進(jìn)行導(dǎo)航時(shí)，網(wǎng)站各部分的切換非常突然，布局和結(jié)構(gòu)也和其產(chǎn)品相輔相成。導(dǎo)航欄只有在選定一種顏色方案時(shí)才會(huì)顯示。在滾動(dòng)鼠標(biāo)時(shí)，所有圖片均突出顯示，后續(xù)圖片的頂部會(huì)挑逗用戶(hù)繼續(xù)向下查看瀏覽。
我個(gè)人非常喜歡鼠標(biāo)向下滾動(dòng)時(shí)圖片向內(nèi)側(cè)移動(dòng)的樣子，視覺(jué)動(dòng)態(tài)效果非常有趣。其另一項(xiàng)很不錯(cuò)的交互特色是可以使用鼠標(biāo)把墻壁“刷”成不同的顏色，這一特色給網(wǎng)站帶來(lái)了額外的一絲情趣。
這個(gè)網(wǎng)站的布局脫離了新聞?lì)惥W(wǎng)站的傳統(tǒng)布局。Newsweek的主頁(yè)簡(jiǎn)單但大膽，它使用頭條新聞的配圖作為背景圖片。貫穿始終的紅色小標(biāo)簽是網(wǎng)站的路牌，其表示當(dāng)前所呈現(xiàn)新聞故事的類(lèi)型。網(wǎng)站布局分為不同的部分，且各部分所采用的網(wǎng)格方式不盡相同?！癗ewsmakers”部分使用了標(biāo)準(zhǔn)網(wǎng)格，但沒(méi)有采用傳統(tǒng)的表格外觀，其中部分圖片以圓形顯示，而不是常見(jiàn)的方形。隨著鼠標(biāo)向下滾動(dòng)，可以看到每日新聞的布局方式也是如此，這種連貫一致有助于讀者的理解。
Abby Putinski采用了原創(chuàng)的方式表現(xiàn)自己的作品集網(wǎng)站，從而彰顯出了自己作為一名創(chuàng)意插畫(huà)家和圖形設(shè)計(jì)師的獨(dú)特性。在加載時(shí)，屏幕上會(huì)顯示一個(gè)具有動(dòng)畫(huà)效果的介紹窗口邀請(qǐng)用戶(hù)深入探索她的作品。在關(guān)閉這個(gè)窗口后，可以看到一個(gè)匯集了她各次旅程的地圖。這個(gè)網(wǎng)站實(shí)際上并沒(méi)有嚴(yán)格意義上的布局，它不存在明確的界限，非常自由開(kāi)放，因此導(dǎo)航體驗(yàn)異常有趣。用戶(hù)隨意點(diǎn)擊一幅作品時(shí)，類(lèi)似明信片框架內(nèi)的圖片就會(huì)落入頁(yè)面，進(jìn)而開(kāi)始循環(huán)介紹有關(guān)旅途的創(chuàng)意。導(dǎo)航欄固定在頂部，可以隨時(shí)使用。
這個(gè)網(wǎng)站緊密的網(wǎng)格布局非常適合展示作品集。將鼠標(biāo)懸停在任意一副作品上即可顯示標(biāo)題，單擊作品即可顯示有關(guān)該作品的“首頁(yè)”。這個(gè)頁(yè)面中會(huì)提供有關(guān)作品的各種相關(guān)信息，例如日期、客戶(hù)、設(shè)計(jì)師職責(zé)等，所有作品均依此方式布置。如果要深入查看作品，則需要點(diǎn)擊翻閱屏幕上所顯示的幻燈片。個(gè)人認(rèn)為這是展示作品的一個(gè)非常有效的方式。
具有沖擊力的照片和美輪美奐的圖片充分展示了這所高校的藝術(shù)特質(zhì)。主頁(yè)的背景圖片展開(kāi)了一個(gè)生動(dòng)有趣的故事，可以吸引用戶(hù)。其導(dǎo)航欄放到側(cè)面的布局很不錯(cuò)，與眾不同而且完全有效，同時(shí)也不會(huì)搶圖片和布局的風(fēng)頭。網(wǎng)站所有標(biāo)簽均為黃色，能夠形成貫穿始終的一致化視覺(jué)特色。點(diǎn)擊任意內(nèi)容分類(lèi)后，下拉菜單將吸引人的注意力，同時(shí)與布局相得益彰。
其Logo采用了整潔的Helvetica字體，也讓我眼前一亮。Logo設(shè)計(jì)沒(méi)有壓迫感，但其中“N”的傾斜卻帶來(lái)了一絲果敢的韻味。雖然其巨大的背景圖片會(huì)給我們奠定下第一印象，但隨后顯示的箭頭會(huì)指引我們滾動(dòng)鼠標(biāo)瀏覽不同的故事，每個(gè)故事均采用了帶有標(biāo)題的大縮略圖。頁(yè)面的其他部分還是比較傳統(tǒng)的。
Trask Industries 是X戰(zhàn)警新片的宣傳網(wǎng)頁(yè)設(shè)計(jì)。網(wǎng)站布局簡(jiǎn)單有效，可分為三大部分，導(dǎo)航側(cè)邊欄固定于左側(cè)，中央為視頻區(qū)，主要內(nèi)容在右側(cè)垂直顯示。這里所使用的視頻能夠有效地激發(fā)人們對(duì)這部電影的期待感。導(dǎo)航圖標(biāo)的動(dòng)畫(huà)懸停效果也很不錯(cuò)。這個(gè)網(wǎng)站的核心就是干凈簡(jiǎn)潔，正如其以視頻作為主角這一做法所示。過(guò)渡效果比較俏皮，內(nèi)容區(qū)會(huì)滑出滑入。另外，你還可以嘗試縮放一下瀏覽器看看布局變化的效果——縮小時(shí)導(dǎo)航欄會(huì)隱藏，但鼠標(biāo)滾動(dòng)時(shí)內(nèi)容仍然可見(jiàn)。
這個(gè)網(wǎng)站的有趣之處在于它似有似無(wú)的布局。網(wǎng)站使用類(lèi)似于Flash的動(dòng)畫(huà)文字打造，動(dòng)畫(huà)效果會(huì)在整個(gè)網(wǎng)站內(nèi)持續(xù)自動(dòng)播放。即便不點(diǎn)擊查看各個(gè)不同內(nèi)容分類(lèi)，用戶(hù)也能通過(guò)動(dòng)畫(huà)幻燈片了解到設(shè)計(jì)師的作品情況。其動(dòng)畫(huà)效果貫穿始終，同時(shí)展示效果也很可愛(ài)，充分表現(xiàn)出了設(shè)計(jì)師極具創(chuàng)意的個(gè)性。
這個(gè)網(wǎng)站的所有內(nèi)容：CSS、HTML、JavaScript和SVG都會(huì)隨著鼠標(biāo)滾動(dòng)展示動(dòng)畫(huà)效果。簡(jiǎn)直太瘋狂了！其明亮的顏色極具刺激性，設(shè)計(jì)中也融合了錯(cuò)綜復(fù)雜的圖示。但其缺點(diǎn)在于網(wǎng)站是專(zhuān)門(mén)為帶有鼠標(biāo)的臺(tái)式機(jī)開(kāi)發(fā)的，所以只支持Chrome瀏覽器。
這個(gè)布局比較有層次感，表現(xiàn)出了模塊化的風(fēng)格。頁(yè)面上不同的元素看似彼此重疊，例如，導(dǎo)航欄幾乎占到了整個(gè)頁(yè)面的四分之三。照片放置于導(dǎo)航欄下方，各個(gè)按鈕和標(biāo)題均使用彩色方塊表現(xiàn)，更能增添模塊化的層疊美感。另外，我比較喜歡導(dǎo)航欄中下拉菜單的投射陰影效果，其具有一種很有趣味的深度。
Andrew McCarthy的作品集采用了獨(dú)具一格的布局方式。頁(yè)面上充斥著彩色的條帶，有關(guān)設(shè)計(jì)師的詳細(xì)信息則需要向下滾動(dòng)鼠標(biāo)查看。滾動(dòng)鼠標(biāo)時(shí)，會(huì)有一個(gè)像素化的貓形定格動(dòng)畫(huà)隨之運(yùn)動(dòng)。這一簡(jiǎn)單的創(chuàng)意所帶來(lái)的動(dòng)感讓我大愛(ài)不已。另外，這個(gè)網(wǎng)站也需要依仗用戶(hù)的交互操作。
動(dòng)畫(huà)效果如果使用巧妙，則能給網(wǎng)站的功能帶來(lái)大大的貢獻(xiàn)。Mikael Edwards在這個(gè)網(wǎng)站上使用了既具有視覺(jué)吸引力也承載了網(wǎng)站功能的動(dòng)畫(huà)。我們畢竟是在給Web端做設(shè)計(jì)嘛。所以沒(méi)有必要把所有東西都擠到頁(yè)面中或在所有圖片旁邊都環(huán)繞文字。那么加入一些互動(dòng)的動(dòng)畫(huà)效果增添趣味又何妨呢？這個(gè)想法在這個(gè)網(wǎng)站的懸停上得到了充分體現(xiàn)。藍(lán)色的點(diǎn)代表了光標(biāo)，隨著鼠標(biāo)的移動(dòng)，圖像會(huì)變形并將空間騰給文字。
跟你腦子里想的設(shè)計(jì)師網(wǎng)站有點(diǎn)不一樣是吧。Designer’s Friend看起來(lái)更像是網(wǎng)站背后的HTML代碼。你所需知道的所有內(nèi)容都含在代碼里，標(biāo)簽則是標(biāo)題。其中“Tip of the Day”這個(gè)方框的設(shè)置非常巧妙，其能夠引導(dǎo)用戶(hù)瀏覽整個(gè)網(wǎng)站。
Hatched 的布局之精髓在于橫跨整個(gè)屏幕的導(dǎo)航欄和各個(gè)部分，這一布局既大膽又開(kāi)放。其響應(yīng)式的導(dǎo)航欄非常有趣。如果在小屏幕上，看起來(lái)就會(huì)有點(diǎn)笨拙，但如果在這里，其導(dǎo)航欄（包括社交網(wǎng)絡(luò)按鈕）僅占了一個(gè)菜單按鈕的空間。
這個(gè)網(wǎng)站采用了一致化的過(guò)渡效果，頁(yè)面加載時(shí)會(huì)有小圓圈彈出。網(wǎng)站結(jié)構(gòu)很好，小圓圈的友好很大程度抵消了下方冰冷的統(tǒng)計(jì)數(shù)據(jù)?！癈hallenges”部分的標(biāo)題看起來(lái)很像對(duì)話氣泡，更添友好氣氛。標(biāo)題上的懸停效果既有視覺(jué)吸引力，也不失功能性。統(tǒng)計(jì)數(shù)據(jù)中的數(shù)字只有在劃過(guò)鼠標(biāo)時(shí)才顯示，因此不會(huì)讓用戶(hù)覺(jué)得太過(guò)枯燥。
Into the Arctic的布局一方面能夠吸引用戶(hù)，另一方面還能鼓勵(lì)他們進(jìn)行交互。背景中的視頻能夠吸引用戶(hù)的注意力同時(shí)展示網(wǎng)站的業(yè)務(wù)。導(dǎo)航欄的風(fēng)格與眾不同——鼠標(biāo)滑過(guò)時(shí)，將展開(kāi)顯示更多信息，有點(diǎn)類(lèi)似折疊的小冊(cè)子。文字效果也很誘人，另外醒目引文也比較強(qiáng)勢(shì)。整個(gè)網(wǎng)站設(shè)計(jì)在執(zhí)行上做的確實(shí)非常的好。
這個(gè)作品集網(wǎng)站采用了水平滾動(dòng)的方式，非常少見(jiàn)。點(diǎn)擊查看任一作品時(shí)，其會(huì)展開(kāi)放置到屏幕中央，并顯示為大圖，并配有簡(jiǎn)短的介紹說(shuō)明。說(shuō)明和作品清單都簡(jiǎn)短扼要，不會(huì)讓你覺(jué)得一直在不同的頁(yè)面之間翻來(lái)翻去。我很喜歡它的導(dǎo)航欄，所有元素都堆在左上角，設(shè)計(jì)師的社交網(wǎng)絡(luò)鏈接放在右下角，形成了對(duì)整個(gè)頁(yè)面的包裹。設(shè)計(jì)師對(duì)空間的運(yùn)用非常到位，另外變形效果也很有意思。
這個(gè)網(wǎng)站的空白區(qū)讓人覺(jué)得神清氣爽，能夠帶來(lái)開(kāi)放和友好的感覺(jué)?？瞻讌^(qū)能夠讓用戶(hù)舒服地進(jìn)行閱讀和導(dǎo)航，同時(shí)也能更加地使用網(wǎng)站內(nèi)容。其懸停比較特殊，類(lèi)似于半張白紙折疊起來(lái)的樣子。用鼠標(biāo)點(diǎn)擊后，按鈕會(huì)像書(shū)本一樣閉攏以顯示更多信息。
Postable 的理念非?？蓯?ài)；其會(huì)通過(guò)郵件給用戶(hù)發(fā)送設(shè)計(jì)精良的感謝卡，另一方面網(wǎng)站的設(shè)計(jì)外觀類(lèi)似于郵政郵遞的感覺(jué)。網(wǎng)站的整體設(shè)計(jì)和布局在傳達(dá)網(wǎng)站理念方面扮演了至關(guān)重要的角色。網(wǎng)站背景采用了紙張材質(zhì)，頂部邊緣類(lèi)似老式的信封。將真實(shí)生活中的感覺(jué)放到Web上能夠帶來(lái)非常令人舒適的韻味，就好像你真的在筆記本上書(shū)寫(xiě)一般。
這個(gè)網(wǎng)站給單頁(yè)布局帶來(lái)了新的創(chuàng)意。其鼠標(biāo)滾動(dòng)方式非常巧妙；滾動(dòng)時(shí)頁(yè)面會(huì)分成兩半，而兩半則會(huì)分別向著相反的方向移動(dòng)，極具動(dòng)感效果。各部分都采用了不同的配色，隨著鼠標(biāo)滾動(dòng)會(huì)拼接到一起。
我個(gè)人非常喜歡Lucas Nikitczuk作品集的布局，原因就在于其表現(xiàn)出了Lucas的水平。網(wǎng)站開(kāi)門(mén)見(jiàn)山，主頁(yè)是設(shè)計(jì)師的簡(jiǎn)短自傳以及作品。圓圈圖形帶來(lái)了友好和流程的美感。背景上潑濺的油漆奠定了網(wǎng)站的開(kāi)放和自由特色。導(dǎo)航欄簡(jiǎn)單好用，在整個(gè)網(wǎng)站內(nèi)保持一致。另一個(gè)值得稱(chēng)道的地方是，用戶(hù)可以使用方向鍵進(jìn)行導(dǎo)航，這一點(diǎn)對(duì)于筆記本用戶(hù)來(lái)說(shuō)非常方便。
布局是一個(gè)網(wǎng)站的基石，同時(shí)也是創(chuàng)意工作的重要組成部分。我們應(yīng)當(dāng)多多考慮用戶(hù)的情況以及他們與網(wǎng)站進(jìn)行交互的情況。他們是只使用移動(dòng)設(shè)備訪問(wèn)你的網(wǎng)站嗎？這一點(diǎn)又對(duì)布局有何影響？我希望我所搜集到的這些信息能夠激發(fā)你自己的布局設(shè)計(jì)靈感！
掃一掃，案例分享帶回家（藍(lán)藍(lán)設(shè)計(jì)微信公眾平臺(tái)）
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.alimai.net
