原創(chuàng)及創(chuàng)新網(wǎng)頁(yè)布局設(shè)計(jì)
布局是網(wǎng)站的基石。其作用是指引用戶瀏覽網(wǎng)站各組成部分、指明關(guān)鍵內(nèi)容。布局同時(shí)也是網(wǎng)站外觀的關(guān)鍵。因此,內(nèi)容的布局需要認(rèn)真仔細(xì)的思索。
一套原創(chuàng)且新穎的布局能夠顯著提升網(wǎng)站的用戶體驗(yàn),但也不要讓創(chuàng)意影響到了網(wǎng)站的可用性。和往常一樣,我們要設(shè)身處地的站在用戶的角度進(jìn)行思考:我們希望他們最先看到什么?應(yīng)當(dāng)如何最有效地傳達(dá)訊息?在設(shè)計(jì)開(kāi)始前,以上的問(wèn)題是必須要提出來(lái)的,因?yàn)椴季謱⒇?fù)責(zé)形成設(shè)計(jì)的其余方面。
下面的幾個(gè)網(wǎng)站的布局不走尋常路,盡管稱不上完美,不過(guò)瀏覽這些網(wǎng)站,興許能夠給你帶來(lái)創(chuàng)意的火花。
Beurre & Sel
這個(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)信息覆蓋子菜單,以便用戶點(diǎn)擊瀏覽各種口味。頂部的導(dǎo)航欄和子菜單固定在頁(yè)面三欄網(wǎng)格內(nèi)的中間一欄,可以保證用戶的注意力始終集中在中心位置。
Hackery, Maths & Design
在頁(yè)面加載的同時(shí),會(huì)有一個(gè)有趣的3D線性動(dòng)畫(huà)填充屏幕。箭頭代表著動(dòng)感與流暢,并可鼓勵(lì)用戶向下方內(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)站的布局讓用戶感到非常舒服。
The Drawing Room
個(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)單方便。
We Love Noise Luke Finch
的作品集具有有趣且友善的布局。這一網(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)退出。
Ende
這個(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)用了屏幕空間。
Edward Carvalho Monaghan
來(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)格,另一方面也承載了作品集中的各幅作品——這也正是此類網(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)感。
Huys
這個(gè)網(wǎng)站在布局方面有著獨(dú)到的魅力,頁(yè)面右側(cè)就好像是信紙的信頭,其中說(shuō)明了網(wǎng)站身份和功能等各種必要信息,而頁(yè)面左側(cè)可以垂直滾動(dòng),并具有類似公寓樓窗戶式的布局,正貼合了公司的業(yè)務(wù)。點(diǎn)擊鼠標(biāo)后,用戶將跳轉(zhuǎn)到一個(gè)更具博客風(fēng)格也比較方便導(dǎo)航的布局頁(yè)面。
KathArt
KathArt 采用了非常棒的視頻布局。這一簡(jiǎn)約但卻行之有效的設(shè)計(jì)在展示其團(tuán)隊(duì)成員的同時(shí)四處滲透著自己的個(gè)性。在介紹過(guò)程中,其團(tuán)隊(duì)成員均表現(xiàn)為工作狀態(tài),就好像你和他們同處辦公室一般。其導(dǎo)航巧妙地采用了時(shí)間軸方式,以便你輕松跟蹤視頻進(jìn)度。
Wacom
Wacom 的目標(biāo)受眾廣泛,其中既包括專業(yè)人員,也包括非專業(yè)的創(chuàng)意人員。作為網(wǎng)站不可或缺的組成部分,其布局營(yíng)造出了用戶友好的體驗(yàn)。左側(cè)的導(dǎo)航欄在鼠標(biāo)懸停時(shí)會(huì)最小化,并可展示各種不同的可使用內(nèi)容。用戶可隨心操縱控制,選擇自己想要看的產(chǎn)品,不會(huì)被強(qiáng)迫觀看任何銷售辭令。主頁(yè)布局簡(jiǎn)單,并可引導(dǎo)用戶查看最適合自己需求的產(chǎn)品。我個(gè)人很喜歡網(wǎng)站上伴隨產(chǎn)品的巧妙手繪元素。
Amsterdam Dance Event
這個(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ì)用戶的角度來(lái)說(shuō),這個(gè)方法行之有效。
隨著你向下滾動(dòng),下方的內(nèi)容會(huì)滑過(guò)幻燈片,并將子菜單從底部帶到頂部。網(wǎng)站的每個(gè)部分都有橫跨屏幕的banner,作為當(dāng)前部分具有視覺(jué)吸引力的介紹。文章的其余部分都在網(wǎng)格中呈現(xiàn)。網(wǎng)格中的各行排列并不完美;每列起頭都比上一列略矮一些,堪稱又一個(gè)細(xì)微但有效的視覺(jué)設(shè)置。
Cropp
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ò)像素化后的圖片。
Neue Yorke
Davy Rudolph 作品集的網(wǎng)格布局簡(jiǎn)單、簡(jiǎn)約,讓用戶感到非常直接而自然。其每個(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)頭。
Juliana Bicycles
作為一家銷售自行車的商店,Juliana的設(shè)計(jì)頗為不尋常。在加載時(shí),屏幕上會(huì)填充一副美麗、飽滿并充滿溫暖感的照片。網(wǎng)站布局分為四個(gè)部分,均隱藏在導(dǎo)航圖標(biāo)后方。其設(shè)計(jì)比較具有女性風(fēng)格,但文字樣式大膽、強(qiáng)烈、灑脫。自行車上的3D懸停效果也是個(gè)不錯(cuò)的點(diǎn)。
Esquire
這個(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)站中間位置,功能上很類似報(bào)紙通過(guò)折頁(yè)位置上方的內(nèi)容引起讀者的興趣。其圖像、顏色和簡(jiǎn)介標(biāo)題也很能吸引用戶注意。
Institut Choiseul
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
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)容。
Harry’s
這個(gè)網(wǎng)站具有非常令人愉悅的體驗(yàn)。其設(shè)計(jì)師充分運(yùn)用了網(wǎng)格,非常適合其目標(biāo)市場(chǎng)。開(kāi)放、干凈的結(jié)構(gòu)化設(shè)計(jì)帶來(lái)了宜人的用戶體驗(yàn)。作為一家賣男士剃須刀的網(wǎng)站,Harry’s所采用的圖片都非常精致,具有男人味道的同時(shí)又不讓人感覺(jué)粗野。
The King’s Of Summer
這個(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)題也有助于打造類似剪貼簿的感覺(jué)。獨(dú)特的內(nèi)容塊布局形成了很有意思的視覺(jué)效果,照片和GIF彼此時(shí)而重疊,引導(dǎo)用戶的眼光穿梭于網(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
World Baking Day的布局需要用戶從初入網(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
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ì)挑逗用戶繼續(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)了額外的一絲情趣。
Newsweek
這個(gè)網(wǎng)站的布局脫離了新聞?lì)惥W(wǎng)站的傳統(tǒng)布局。Newsweek的主頁(yè)簡(jiǎn)單但大膽,它使用頭條新聞的配圖作為背景圖片。貫穿始終的紅色小標(biāo)簽是網(wǎng)站的路牌,其表示當(dāng)前所呈現(xiàn)新聞故事的類型。網(wǎng)站布局分為不同的部分,且各部分所采用的網(wǎng)格方式不盡相同。“Newsmakers”部分使用了標(biāo)準(zhǔn)網(wǎng)格,但沒(méi)有采用傳統(tǒng)的表格外觀,其中部分圖片以圓形顯示,而不是常見(jiàn)的方形。隨著鼠標(biāo)向下滾動(dòng),可以看到每日新聞的布局方式也是如此,這種連貫一致有助于讀者的理解。
Abby Putinski
Abby Putinski采用了原創(chuàng)的方式表現(xiàn)自己的作品集網(wǎng)站,從而彰顯出了自己作為一名創(chuàng)意插畫(huà)家和圖形設(shè)計(jì)師的獨(dú)特性。在加載時(shí),屏幕上會(huì)顯示一個(gè)具有動(dòng)畫(huà)效果的介紹窗口邀請(qǐng)用戶深入探索她的作品。在關(guān)閉這個(gè)窗口后,可以看到一個(gè)匯集了她各次旅程的地圖。這個(gè)網(wǎng)站實(shí)際上并沒(méi)有嚴(yán)格意義上的布局,它不存在明確的界限,非常自由開(kāi)放,因此導(dǎo)航體驗(yàn)異常有趣。用戶隨意點(diǎn)擊一幅作品時(shí),類似明信片框架內(nèi)的圖片就會(huì)落入頁(yè)面,進(jìn)而開(kāi)始循環(huán)介紹有關(guān)旅途的創(chuàng)意。導(dǎo)航欄固定在頂部,可以隨時(shí)使用。
Baumastisch
這個(gè)網(wǎng)站緊密的網(wǎng)格布局非常適合展示作品集。將鼠標(biāo)懸停在任意一副作品上即可顯示標(biāo)題,單擊作品即可顯示有關(guān)該作品的“首頁(yè)”。這個(gè)頁(yè)面中會(huì)提供有關(guān)作品的各種相關(guān)信息,例如日期、客戶、設(shè)計(jì)師職責(zé)等,所有作品均依此方式布置。如果要深入查看作品,則需要點(diǎn)擊翻閱屏幕上所顯示的幻燈片。個(gè)人認(rèn)為這是展示作品的一個(gè)非常有效的方式。
Norwich University Of The Arts
具有沖擊力的照片和美輪美奐的圖片充分展示了這所高校的藝術(shù)特質(zhì)。主頁(yè)的背景圖片展開(kāi)了一個(gè)生動(dòng)有趣的故事,可以吸引用戶。其導(dǎo)航欄放到側(cè)面的布局很不錯(cuò),與眾不同而且完全有效,同時(shí)也不會(huì)搶圖片和布局的風(fēng)頭。網(wǎng)站所有標(biāo)簽均為黃色,能夠形成貫穿始終的一致化視覺(jué)特色。點(diǎn)擊任意內(nè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
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)。
Adam Hartwig
這個(gè)網(wǎng)站的有趣之處在于它似有似無(wú)的布局。網(wǎng)站使用類似于Flash的動(dòng)畫(huà)文字打造,動(dòng)畫(huà)效果會(huì)在整個(gè)網(wǎng)站內(nèi)持續(xù)自動(dòng)播放。即便不點(diǎn)擊查看各個(gè)不同內(nèi)容分類,用戶也能通過(guò)動(dòng)畫(huà)幻燈片了解到設(shè)計(jì)師的作品情況。其動(dòng)畫(huà)效果貫穿始終,同時(shí)展示效果也很可愛(ài),充分表現(xiàn)出了設(shè)計(jì)師極具創(chuàng)意的個(gè)性。
Contad
這個(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)站是專門為帶有鼠標(biāo)的臺(tái)式機(jī)開(kāi)發(fā)的,所以只支持Chrome瀏覽器。
National Academy Museum
這個(gè)布局比較有層次感,表現(xiàn)出了模塊化的風(fēng)格。頁(yè)面上不同的元素看似彼此重疊,例如,導(dǎo)航欄幾乎占到了整個(gè)頁(yè)面的四分之三。照片放置于導(dǎo)航欄下方,各個(gè)按鈕和標(biāo)題均使用彩色方塊表現(xiàn),更能增添模塊化的層疊美感。另外,我比較喜歡導(dǎo)航欄中下拉菜單的投射陰影效果,其具有一種很有趣味的深度。
Andrew McCarthy
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)站也需要依仗用戶的交互操作。
Mikael Edwards
動(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ì)變形并將空間騰給文字。
Designer’s Friend
跟你腦子里想的設(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)用戶瀏覽整個(gè)網(wǎng)站。
Hatched
Hatched 的布局之精髓在于橫跨整個(gè)屏幕的導(dǎo)航欄和各個(gè)部分,這一布局既大膽又開(kāi)放。其響應(yīng)式的導(dǎo)航欄非常有趣。如果在小屏幕上,看起來(lái)就會(huì)有點(diǎn)笨拙,但如果在這里,其導(dǎo)航欄(包括社交網(wǎng)絡(luò)按鈕)僅占了一個(gè)菜單按鈕的空間。
Institute For Emerging Issues
這個(gè)網(wǎng)站采用了一致化的過(guò)渡效果,頁(yè)面加載時(shí)會(huì)有小圓圈彈出。網(wǎng)站結(jié)構(gòu)很好,小圓圈的友好很大程度抵消了下方冰冷的統(tǒng)計(jì)數(shù)據(jù)。“Challenges”部分的標(biāo)題看起來(lái)很像對(duì)話氣泡,更添友好氣氛。標(biāo)題上的懸停效果既有視覺(jué)吸引力,也不失功能性。統(tǒng)計(jì)數(shù)據(jù)中的數(shù)字只有在劃過(guò)鼠標(biāo)時(shí)才顯示,因此不會(huì)讓用戶覺(jué)得太過(guò)枯燥。
Into The Arctic
Into the Arctic的布局一方面能夠吸引用戶,另一方面還能鼓勵(lì)他們進(jìn)行交互。背景中的視頻能夠吸引用戶的注意力同時(shí)展示網(wǎng)站的業(yè)務(wù)。導(dǎo)航欄的風(fēng)格與眾不同——鼠標(biāo)滑過(guò)時(shí),將展開(kāi)顯示更多信息,有點(diǎn)類似折疊的小冊(cè)子。文字效果也很誘人,另外醒目引文也比較強(qiáng)勢(shì)。整個(gè)網(wǎng)站設(shè)計(jì)在執(zhí)行上做的確實(shí)非常的好。
John Jacob
這個(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)用非常到位,另外變形效果也很有意思。
Impress
這個(gè)網(wǎng)站的空白區(qū)讓人覺(jué)得神清氣爽,能夠帶來(lái)開(kāi)放和友好的感覺(jué)??瞻讌^(qū)能夠讓用戶舒服地進(jìn)行閱讀和導(dǎo)航,同時(shí)也能更加高效地使用網(wǎng)站內(nèi)容。其懸停特效比較特殊,類似于半張白紙折疊起來(lái)的樣子。用鼠標(biāo)點(diǎn)擊后,按鈕會(huì)像書(shū)本一樣閉攏以顯示更多信息。
Postable
Postable 的理念非??蓯?ài);其會(huì)通過(guò)郵件給用戶發(fā)送設(shè)計(jì)精良的感謝卡,另一方面網(wǎng)站的設(shè)計(jì)外觀類似于郵政郵遞的感覺(jué)。網(wǎng)站的整體設(shè)計(jì)和布局在傳達(dá)網(wǎng)站理念方面扮演了至關(guān)重要的角色。網(wǎng)站背景采用了紙張材質(zhì),頂部邊緣類似老式的信封。將真實(shí)生活中的感覺(jué)放到Web上能夠帶來(lái)非常令人舒適的韻味,就好像你真的在筆記本上書(shū)寫(xiě)一般。
National LGBT Museum
這個(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ì)拼接到一起。
Lucas Nikitczuk
我個(gè)人非常喜歡Lucas Nikitczuk作品集的布局,原因就在于其表現(xiàn)出了Lucas的水平。網(wǎng)站開(kāi)門見(jiàn)山,主頁(yè)是設(shè)計(jì)師的簡(jiǎn)短自傳以及作品。圓圈圖形帶來(lái)了友好和流程的美感。背景上潑濺的油漆奠定了網(wǎng)站的開(kāi)放和自由特色。導(dǎo)航欄簡(jiǎn)單好用,在整個(gè)網(wǎng)站內(nèi)保持一致。另一個(gè)值得稱道的地方是,用戶可以使用方向鍵進(jìn)行導(dǎo)航,這一點(diǎn)對(duì)于筆記本用戶來(lái)說(shuō)非常方便。
最后
布局是一個(gè)網(wǎng)站的基石,同時(shí)也是創(chuàng)意工作的重要組成部分。我們應(yīng)當(dāng)多多考慮用戶的情況以及他們與網(wǎng)站進(jìn)行交互的情況。他們是只使用移動(dòng)設(shè)備訪問(wèn)你的網(wǎng)站嗎?這一點(diǎn)又對(duì)布局有何影響?我希望我所搜集到的這些信息能夠激發(fā)你自己的布局設(shè)計(jì)靈感!
本文地址:http://irelandcustomcontracting.com/tutorial/di2601.html
您可能還喜歡
- Macaron 馬卡龍系色譜 ;附HC(16進(jìn)制碼
- 7個(gè)手機(jī)版網(wǎng)頁(yè)設(shè)計(jì)的原則
- 折紙多邊形網(wǎng)頁(yè)背景效果制作教程
- 龐門正道:好好玩耍的點(diǎn)線面(上)
- 網(wǎng)頁(yè)設(shè)計(jì)中的常見(jiàn)頁(yè)面布局方式
- WAP APP的柵格設(shè)計(jì)
- 八種很漂亮的排版方法和技巧分享
- 網(wǎng)頁(yè)設(shè)計(jì)的首屏標(biāo)準(zhǔn)你了解多少?
- 字體大寶庫(kù):40款為網(wǎng)頁(yè)設(shè)計(jì)師準(zhǔn)備的時(shí)
- 視覺(jué)設(shè)計(jì)分享—專題頁(yè)面設(shè)計(jì)篇
- 專訪:石墨文檔產(chǎn)品總監(jiān)羅穎
- UI設(shè)計(jì)不得不知的移動(dòng)端UI尺寸適
- 光音移動(dòng)設(shè)計(jì)規(guī)范 — 表單類
- 體驗(yàn)設(shè)計(jì)中的排序問(wèn)題
- 網(wǎng)頁(yè)設(shè)計(jì)精粹 網(wǎng)頁(yè)中那些迷人的按
- aliued:響應(yīng)式設(shè)計(jì)的現(xiàn)狀與趨勢(shì)
- 10個(gè)智能對(duì)象處理的ps技巧
- 網(wǎng)頁(yè)UI - 原子設(shè)計(jì)理論(上)
- 如何通過(guò)設(shè)計(jì)提升banner點(diǎn)擊率?
- 晉小彥視覺(jué)設(shè)計(jì)系列文章(二):全屏