您當(dāng)前位置:圖趣網(wǎng)(Tuquu) >> 網(wǎng)頁(yè)設(shè)計(jì)教程 >> 設(shè)計(jì)理論 >> 瀏覽設(shè)計(jì)教程

2014網(wǎng)頁(yè)新趨勢(shì)-創(chuàng)新的側(cè)邊欄菜單設(shè)計(jì)

關(guān)于2014網(wǎng)頁(yè)新趨勢(shì),我們之前分享過(guò)10大網(wǎng)頁(yè)設(shè)計(jì)趨勢(shì),今天補(bǔ)充一個(gè),創(chuàng)意的側(cè)邊欄設(shè)計(jì)。

實(shí)際上,菜單已經(jīng)有相當(dāng)長(zhǎng)的一個(gè)歷史,最開(kāi)始它只被用在計(jì)算機(jī)應(yīng)用程序上,后來(lái)逐漸流行到社交媒體網(wǎng)站?,F(xiàn)在很多單頁(yè)設(shè)計(jì)的網(wǎng)站菜單都非常精美而便利。

下面圖趣搜集整理的一些超級(jí)棒的側(cè)邊欄菜單:

Parrot

一個(gè)簡(jiǎn)潔的充滿(mǎn)有機(jī)氛圍的網(wǎng)站。開(kāi)發(fā)者利用垂直視差配合靜態(tài)側(cè)邊菜單欄完美展示自己的產(chǎn)品。

2014網(wǎng)頁(yè)菜單新趨勢(shì)! 創(chuàng)新的側(cè)邊欄菜單網(wǎng)頁(yè)設(shè)計(jì),互聯(lián)網(wǎng)的一些事

Michael Ngo

擁有一個(gè)非常明亮干凈的排版。側(cè)邊菜單直白干脆。盡管色調(diào)單一,但是整體看起來(lái)非常純潔。

2014網(wǎng)頁(yè)菜單新趨勢(shì)! 創(chuàng)新的側(cè)邊欄菜單網(wǎng)頁(yè)設(shè)計(jì),互聯(lián)網(wǎng)的一些事

Create Pilates

該網(wǎng)站強(qiáng)烈依賴(lài)于配色。黃色和白色搭配營(yíng)造積極的氛圍。左邊巨大的菜單很好地做到了和用戶(hù)之間的交互,讓人一眼就把精力集中在導(dǎo)航欄上。

2014網(wǎng)頁(yè)菜單新趨勢(shì)! 創(chuàng)新的側(cè)邊欄菜單網(wǎng)頁(yè)設(shè)計(jì),互聯(lián)網(wǎng)的一些事

Antro

和前面幾個(gè)網(wǎng)站配色不同,該網(wǎng)站使用自由而神秘的黑色配色方案,與左邊白色休閑的導(dǎo)航欄結(jié)合,給人以強(qiáng)烈的印象。側(cè)邊導(dǎo)航欄的優(yōu)美之處主要表現(xiàn)在空間夠大而自體夠小,大量的空白給導(dǎo)航欄有呼吸的之處。

2014網(wǎng)頁(yè)菜單新趨勢(shì)! 創(chuàng)新的側(cè)邊欄菜單網(wǎng)頁(yè)設(shè)計(jì),互聯(lián)網(wǎng)的一些事

Wacom

有兩個(gè)側(cè)邊菜單欄。使用傳統(tǒng)的黑白配加上簡(jiǎn)單的圖標(biāo)指示使得網(wǎng)站內(nèi)容導(dǎo)航一目了然。

2014網(wǎng)頁(yè)菜單新趨勢(shì)! 創(chuàng)新的側(cè)邊欄菜單網(wǎng)頁(yè)設(shè)計(jì),互聯(lián)網(wǎng)的一些事

Wanda Print

網(wǎng)站導(dǎo)航也采用了雙重菜單,而且篇幅很廣。菜單如此寬廣,排版如此簡(jiǎn)潔,加上導(dǎo)航和背景產(chǎn)生的強(qiáng)烈對(duì)比,使得整個(gè)網(wǎng)站顯得非常微妙而自由。

2014網(wǎng)頁(yè)菜單新趨勢(shì)! 創(chuàng)新的側(cè)邊欄菜單網(wǎng)頁(yè)設(shè)計(jì),互聯(lián)網(wǎng)的一些事

Black Ram Whisky

擁有獨(dú)特的設(shè)計(jì)。通過(guò)神秘的外表和細(xì)節(jié)的刻畫(huà)引起了用戶(hù)的注意。而狹窄的側(cè)邊導(dǎo)航則作為一個(gè)補(bǔ)充設(shè)計(jì),起到了畫(huà)龍點(diǎn)睛的效果。

2014網(wǎng)頁(yè)菜單新趨勢(shì)! 創(chuàng)新的側(cè)邊欄菜單網(wǎng)頁(yè)設(shè)計(jì),互聯(lián)網(wǎng)的一些事

Trask Industries

該網(wǎng)站的設(shè)計(jì)旨在創(chuàng)造巨大的視覺(jué)沖擊力。很多鏈接都是基于圖片的。左側(cè)有一個(gè)溫和的小菜單,菜單是小巧的動(dòng)態(tài)圖標(biāo)加上簡(jiǎn)短的字體導(dǎo)航。

2014網(wǎng)頁(yè)菜單新趨勢(shì)! 創(chuàng)新的側(cè)邊欄菜單網(wǎng)頁(yè)設(shè)計(jì),互聯(lián)網(wǎng)的一些事

Welcome to the future of football

該網(wǎng)站擁有復(fù)雜的交互。設(shè)計(jì)師使用黃色來(lái)提亮要點(diǎn)。盡管側(cè)邊菜單欄也是黑色的,仿佛融合到網(wǎng)站中,但是黃色的字體導(dǎo)航也不失味道。

2014網(wǎng)頁(yè)菜單新趨勢(shì)! 創(chuàng)新的側(cè)邊欄菜單網(wǎng)頁(yè)設(shè)計(jì),互聯(lián)網(wǎng)的一些事

Travel Alberta

網(wǎng)站的主體內(nèi)容是美麗的風(fēng)景。采用側(cè)邊滑出式導(dǎo)航欄,小小的導(dǎo)航通過(guò)側(cè)滑的方式安排了很多實(shí)用的數(shù)據(jù)。

2014網(wǎng)頁(yè)菜單新趨勢(shì)! 創(chuàng)新的側(cè)邊欄菜單網(wǎng)頁(yè)設(shè)計(jì),互聯(lián)網(wǎng)的一些事

Mario IGN 

是一個(gè)互動(dòng)網(wǎng)站,主要是為了向這個(gè)著名的游戲致敬。右邊大面積展示著名的場(chǎng)景附加一點(diǎn)介紹。左邊是一個(gè)簡(jiǎn)潔的導(dǎo)航菜單。

2014網(wǎng)頁(yè)菜單新趨勢(shì)! 創(chuàng)新的側(cè)邊欄菜單網(wǎng)頁(yè)設(shè)計(jì),互聯(lián)網(wǎng)的一些事

Martina Sperl 

有一個(gè)基于圖片的著陸頁(yè),利用垂直滾動(dòng)技術(shù)展示藝術(shù)品。在這種情況下, 右邊干凈整潔的一面菜單功使得用戶(hù)更加便利地去探索該網(wǎng)站。

2014網(wǎng)頁(yè)菜單新趨勢(shì)! 創(chuàng)新的側(cè)邊欄菜單網(wǎng)頁(yè)設(shè)計(jì),互聯(lián)網(wǎng)的一些事

Bienville Capital Management

設(shè)計(jì)師采用傳統(tǒng)的色彩組合展示該網(wǎng)站,動(dòng)態(tài)圖片使得網(wǎng)站不再單調(diào)。左邊的菜單采用側(cè)滑式,既不妨礙用戶(hù)參觀又起到網(wǎng)站指引的作用。

2014網(wǎng)頁(yè)菜單新趨勢(shì)! 創(chuàng)新的側(cè)邊欄菜單網(wǎng)頁(yè)設(shè)計(jì),互聯(lián)網(wǎng)的一些事

CFYE Magazine

眾多的粉色和白色搭配起來(lái)營(yíng)造出積極的氛圍。側(cè)邊磁貼式導(dǎo)航顯得干凈利落,簡(jiǎn)單明了。

2014網(wǎng)頁(yè)菜單新趨勢(shì)! 創(chuàng)新的側(cè)邊欄菜單網(wǎng)頁(yè)設(shè)計(jì),互聯(lián)網(wǎng)的一些事

Tim Brack

選用了干凈、開(kāi)放和拋光的在線組合促使用戶(hù)集中注意力于主人的杰作。右邊巨大的導(dǎo)航塊彰顯了網(wǎng)站高貴的氣質(zhì)。

2014網(wǎng)頁(yè)菜單新趨勢(shì)! 創(chuàng)新的側(cè)邊欄菜單網(wǎng)頁(yè)設(shè)計(jì),互聯(lián)網(wǎng)的一些事

The Explorations Company

左邊的菜單有點(diǎn)兒原始的味道,但這確實(shí)就是設(shè)計(jì)師的目的。網(wǎng)站內(nèi)容豐富數(shù)據(jù)繁多,沒(méi)有這個(gè)導(dǎo)航用戶(hù)將很難探索完整個(gè)網(wǎng)站。

2014網(wǎng)頁(yè)菜單新趨勢(shì)! 創(chuàng)新的側(cè)邊欄菜單網(wǎng)頁(yè)設(shè)計(jì),互聯(lián)網(wǎng)的一些事

World is beautiful

設(shè)計(jì)師竟然在左邊側(cè)滑而出的主菜單采用了下拉的二級(jí)菜單!看起來(lái)完美極了!世界果然是十分漂亮的~~

2014網(wǎng)頁(yè)菜單新趨勢(shì)! 創(chuàng)新的側(cè)邊欄菜單網(wǎng)頁(yè)設(shè)計(jì),互聯(lián)網(wǎng)的一些事

Animesh Manglik

采用了側(cè)邊滑出的菜單,看起來(lái)很便利。

2014網(wǎng)頁(yè)菜單新趨勢(shì)! 創(chuàng)新的側(cè)邊欄菜單網(wǎng)頁(yè)設(shè)計(jì),互聯(lián)網(wǎng)的一些事

University of Brighton

布萊頓大學(xué)也來(lái)耍逼格風(fēng)~據(jù)說(shuō)右邊的導(dǎo)航很完美,但是很不幸我點(diǎn)開(kāi)圖片進(jìn)入的并不是這個(gè)配圖所展示的頁(yè)面╮(╯▽╰)╭

2014網(wǎng)頁(yè)菜單新趨勢(shì)! 創(chuàng)新的側(cè)邊欄菜單網(wǎng)頁(yè)設(shè)計(jì),互聯(lián)網(wǎng)的一些事

Whale Wars by Animal Planet

巨幅圖片華麗麗地展示了網(wǎng)站的磅礴氣勢(shì),而為了hold住此氣勢(shì),設(shè)計(jì)師決定在右邊用做一個(gè)溫和的側(cè)滑導(dǎo)航欄。剛?cè)岵?jì),所向披靡。

2014網(wǎng)頁(yè)菜單新趨勢(shì)! 創(chuàng)新的側(cè)邊欄菜單網(wǎng)頁(yè)設(shè)計(jì),互聯(lián)網(wǎng)的一些事

Les Enfants

網(wǎng)站采用網(wǎng)格布局展示各種電影場(chǎng)景。此時(shí)左邊的菜單顯得很優(yōu)雅有木有~

2014網(wǎng)頁(yè)菜單新趨勢(shì)! 創(chuàng)新的側(cè)邊欄菜單網(wǎng)頁(yè)設(shè)計(jì),互聯(lián)網(wǎng)的一些事

小結(jié)

導(dǎo)航欄的設(shè)計(jì)可以是靜態(tài)的、動(dòng)態(tài)的、可擴(kuò)展的、雙層展示的,甚至只是隱藏在一個(gè)微妙的符號(hào)里面。任何導(dǎo)航在網(wǎng)站里面都扮演者不可或缺的角色,所以,探索網(wǎng)站采用何種導(dǎo)航方式是很有必要的。

[教程作者:admin]
免責(zé)聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請(qǐng)注明出處,素材資料僅供個(gè)人學(xué)習(xí)與參考,請(qǐng)勿用于商業(yè)用途!
本文地址:http://likemindfilms.com/tutorial/di1904.html
跨界混搭的產(chǎn)品設(shè)計(jì)
[圖趣]頁(yè)面設(shè)計(jì)細(xì)節(jié)總結(jié)
圖趣網(wǎng)微信
建議反饋
×