Matt Cronin版權所有
作者：Smashing magazine, Matt Cronin
譯者：UCD翻譯小組 , JJYY
原文：http://www.smashingmagazine.com/2009/02/04/50-beautiful-and-user-friendly-navigation-menus/

對任何網(wǎng)站來說，可用性都是一個重要的設計目標，而友好的導航是其中的要素之一，它決定著用戶在網(wǎng)站中如何被引導，如何與網(wǎng)站進行互動。如果沒有友好的導航，網(wǎng)頁的內(nèi)容就很難發(fā)光和被用戶發(fā)掘。菜單必須要足夠簡單到用戶容易理解，還要包含必要的元素來引導用戶瀏覽整個網(wǎng)站——同時要有很棒和有創(chuàng)意的設計在上面。

下面我們將展示50多個出色的導航菜單—— 我們挑選了一些用CSS實現(xiàn)的菜單，一些CSS+Javascript的菜單，還有flash的菜單設計。不管他們具體是用什么實現(xiàn)的，共同點是：對用戶友好、富有創(chuàng)意，并且完美符合所屬網(wǎng)站的風格。
感興趣的話，您還可以閱讀我們之前的幾篇文章：

• 基于CSS的導航菜單：時髦的解決方案 - 列舉了一些很時髦的CSS菜單
• 導航菜單：趨勢和例子 - 收集了一些很能激發(fā)靈感的導航菜單。

1. 基于CSS的導航菜單

Loodo
一個色彩斑斕、給網(wǎng)站增加了觸摸感的菜單。

Acko.net
設計者Steven Wittens采用了一種獨特的透視角度來呈現(xiàn)導航菜單。

Web Design Ledger
該網(wǎng)站有一個很棒的菜單，大尺寸的按鈕非常舒適且沒有和網(wǎng)站內(nèi)容攪在一塊。

UX Booth
在導航欄下面使用了一個漂亮的輔助文本區(qū)域來說明當前的菜單項。

Nopokographics
垂直文字的導航菜單非常罕見，因為他們用起來不是那么舒服。但一些設計師總會迎著風頭去做些突破。Nopoko Grphics就使用了箭頭指示和鼠標懸浮(Hover)效果在他們的垂直導航菜單上。

Icon Designer
這個網(wǎng)站在首頁上使用了超大的圖片菜單，用戶的注意力馬上就被這個賊大的菜單拽了過去，看起來對用戶非常方便。

Cosmicsoda
這個大大的菜單十分醒目，并且使用了輕微的Hover效果來為菜單增色。

Designsensory
十分符合用戶認知的二級菜單導航，使用2種顏色區(qū)分，有效的告訴用戶當前激活的菜單項目和未激活的項目。

Smallstone
Smallstone, 美國的唱片公司，采用了一種獨特的導航菜單，厄。。。這東東叫做“空間回音Rloand SE-201型號”.

TNVacation
這年頭很難找到一個看起來很棒的下拉菜單，不過這里就有一個例外。

Clearleft
Clearleft網(wǎng)站使用了幾張紙片來作為它們的導航。

45royale
一個簡單、干凈、美麗的菜單，還有著不錯的Hover效果。

Design Intellection
一個非常棒的分塊式導航菜單，它告訴了我們在一個簡潔的導航菜單中如何精彩高效的使用Hover效果.

Ronnypries.de
導航菜單并不是一定要設計得像一個傳統(tǒng)的導航菜單。Ronny Pries使用了一個類似房屋戶型圖的設計來引導訪客在網(wǎng)站中穿梭。

Jiri Tvrdek
Jiri Tvrdek讓導航選項看起來像樹上掛著的葉子，十分有創(chuàng)意，讓人印象深刻。

Water’s Edge Media
導航選項被用夾子晾在晾衣繩上，來自Patricia Abbott.

Matt Dempsey
用筆刷涂抹來高亮導航選項。

Cognigen
當前所在的導航選項在視覺上被按進去了，十分明顯且符合認知。

District Solutions
又是一個少見的垂直文字導航，而且看起來很不錯！

Jayme Blackmon
這個網(wǎng)站看起來是讓你來勾選“已經(jīng)完成”的標記。

Jeff Sarmiento
為什么不嘗試一下溢出的效果呢？

Studioracket
一個很不尋常的導航菜單，它采用了一種思維導圖的形式來描繪導航。除此之外，這個導航菜單還真的很難畫！

Cultured Code
精巧獨特的效果讓菜單非常奪目，還有賊棒的配色和Hover效果。

Nando Designer
這位葡萄牙設計師采用了一張紙和手寫字體作為網(wǎng)站的主要導航。

Bonfiremedia
有的時候印刷排版已經(jīng)足夠說明一切...

Artgeex
生動鮮艷的印刷排版應用。

Gloobs
一些設計師在“聯(lián)系我們”的導航選項中加入了郵票印章的設計。

South Creative
這個網(wǎng)站使用了很大的導航按鈕，并有著不錯的Hover效果。

Mac Rabbit
另一個又大又干凈的菜單，它采用了圖標來輔助用戶識別每一個選項的功能。

RapidWeaver
這個菜單有著干凈光滑的布局，同時它的二級菜單采用了很贊的半透明來和主菜單進行區(qū)分。

DFW UPA
圖標很好的輔助和強調(diào)了每一個導航選項。

Revolution Driving Tuition
一個很棒的襤褸式風格網(wǎng)站，它的菜單很好的融合在網(wǎng)站布局中。

Duarte Pires
這個菜單擺放的位置和網(wǎng)頁正文很接近，十分容易使用。設計采用了大圖標來給導航增加視覺元素。此外在其他頁面上這些圖標也以一致的豎直布局出現(xiàn)，雖然圖標本身不是很完美，但整體來說是個不錯的點子.

Valetin Agachi
這個導航有著十分獨特的方式來強調(diào)被選中的項目，同時這個菜單布局在整個網(wǎng)站都是一致的。

Tutorial9
最近Tutorial9進行了非常正點的重新設計，菜單組織很棒，可用性很高。

2. 基于CSS和JavaScript的菜單

Agami Creative
設計師常常在導航上使用提示信息，但提示信息和侵蝕效果的結合還是挺少見的。

Whitehouse.gov
這個例子完美的告訴我們怎樣把大量的內(nèi)容組織在簡潔、容易辨認的區(qū)域內(nèi)，此外再夸一句：非常棒的下拉菜單設計。

AppStorm
又是一個出色的高可用性下拉菜單設計。

Eric Johansson
Eric Johansson, 來自瑞典的設計師, 使用了豎直的長條圖片作為導航。

Coda
這個有著美麗Hover效果的菜單非常便捷。二級菜單設計一致且包含了所有的內(nèi)容在里面。

Dragon Interactive
Dragon Interactive的菜單有著華麗的特效和配色，這個菜單是基于jQuery的。

Bern
我十分鐘意這個布局，特別是這個菜單融合入整體襤褸式風格中的方式。這個菜單也采用了jQuery的下拉特效。

Abduzeedo
在最近的重新設計中，Abduzeedo介紹了一種jQuery的幻燈片式導航。
(我忍不住插一句，好像jQuery很火嘛...)

3. 基于Flash的菜單

Iipvapi
多彩的傾斜式導航，來自一位印度的網(wǎng)頁設計機構。

Not Forgotten: The Movie
大部分娛樂網(wǎng)站都使用Flash和不同尋常的導航菜單來吸引用戶的注意。比如這個，導航項目被放在卡片上排列著。

Nick Tones
Nick Tones, 一個動態(tài)、多彩的，而且仍然保持了可用性的導航菜單。

woonky.ideas
這個阿根廷的設計機構把CD和書本放在桌子上，每一個代表著一個導航項目。當然只要我們把鼠標放上去，就會有信息告訴你里面是啥東西。

Gotmilk
這個Flash網(wǎng)站的設計師呈現(xiàn)了非常具有原創(chuàng)性的東西。導航菜單被放置在一個緞帶上，每一個導航選項有著簡單精致的Hover效果。當鼠標移到圖標上 后，被替換為圖標所代表的欄目標題。對這個細節(jié)一般常見的設計會使用提示信息，這個網(wǎng)站的設計師沒有隨大流，而是使用了另一種方式來讓它奪人眼球。

Spectra Visual Newsreader
一個色彩斑斕的美麗Flash菜單，加上出色的可用性。

NickAD
這個網(wǎng)站的亮點在于它十分獨特和容易使用的導航。

Sensi Soft
令人稱奇的作品集設計，出色的導航明顯經(jīng)過了深思熟慮，并且非常便捷。

4.高可用性的導航

tap tap tap
美麗的布局和菜單，還有出色的效果。

Apple
蘋果的網(wǎng)站十分特別，尤其是因為它的導航布局。Mac菜單的設計十分令人驚嘆，同時配有圖片，很難想到有比這個更方便的在菜單中查找商品的方式了。

Alex Buga
訪問者在這里可以使用擺放整齊的大幻燈片來查看新聞和項目。

CREASENSO
這個作品集首頁上的內(nèi)容非常簡單，組織得十分易用。

polargold
有著令人眩暈的視覺效果的Flash作品集。由于采用了手風琴式的布局來展現(xiàn)內(nèi)容，所以這個網(wǎng)站沒有專門的欄目頁面。粗大的字體強調(diào)了菜單項的重要性。

Colourpixel
Colourpixel的作品集有一個十分有趣的布局，它把所有的欄目全部組合到了一個頁面上，你可以展開或隱藏任意的欄目，全看用戶的喜好。

DVEIN
非常出色的Flash作品集設計。這個網(wǎng)站把所有作品全部組織到了一個有趣的環(huán)狀滾動列表中。

Alexandru Cohaniuc
這個作品集因為它漂亮的布局而出色。手風琴式的效果允許用戶在項目和作品中自由導航。

Porsche Canada
加拿大保時捷的網(wǎng)站有著非常體貼用戶的導航，對于每一個菜單項都列出了很多子欄目。這個菜單的可用性和便捷性是十分高的。

Jeremy Levine Design
這個建筑設計作品集通過獨特的布局讓用戶可以很容易的在網(wǎng)站中瀏覽。每一個菜單項有著很多效果和過渡轉換，十分便捷。

firstborn
知名設計工作室Firstborn在他們的作品集中使用了橫向可拖動的導航。這個導航方式同時也可以在瀏覽其他內(nèi)容（例如縮略圖）時呈現(xiàn)。

Benjamin David
這個作品集采用了垂直的幻燈片滑動和菜單切換進行組合。許多內(nèi)容被組合放在了一個鮮明的菜單之中。

Thibaud’s Portfolio
另一個令人眩暈的作品集，十分有創(chuàng)意的導航。同時它還采用了色彩區(qū)分，相似的作品被組合在了一起。

Jason Reed Web Design
對于把許多信息塞在一個小空間來說，手風琴式設計十分有用。Jason Reed在他的作品集中使用了一個漂亮的手風琴設計來允許用戶進行翻頁操作。

Marius Roosendaal
另一個很友好的手風琴式菜單把作品項目分類聚在一起。

5. 垂直導航布局

Danny Blackman
Danny Blackman的網(wǎng)站常被認為是極其出色的作品集設計之一， 一部分原因就是其令人驚嘆的垂直布局結構。

Tomas Pojeta
這個網(wǎng)站是另一個使用垂直布局的作品集，把多個頁面合并成一個頁面，允許用戶垂直的從一個欄目移動到另一個欄目。

volll
Voll使用了有著美麗插畫作為背景的垂直布局結構。

Mediocore
Mediocore是一個很贊的作品集，雖然比一般的垂直設計呈現(xiàn)了更多的內(nèi)容元素，但仍然看起來很不錯。

6. 對用戶友好的側邊欄菜單

FreelanceSwitch
FreelanceSwitch采用了非常棒的菜單來組織他們的文章。

Fubiz
重新設計后的Fubiz有一個出色的側邊欄，使用了幻燈片式切換來在一個小側邊欄中呈現(xiàn)非常多的內(nèi)容。

Checkout
checkout擁有一個賊棒的網(wǎng)站。在特色欄目中有著一個極其簡潔的列表風格菜單，上面還有很Nice的圖標。

Ruby Tuesday
不錯的網(wǎng)站——Ruby Tuesday。側邊欄菜單上有著特別的圖標和光滑的Hover效果。

Concentric Studio
一個短小精悍的菜單還包含著滾動切換的效果。

Barack Obama
奧巴馬總統(tǒng)的網(wǎng)站有一個列表式的側邊欄菜單，擁有合理的文字間隔和不錯的對比度。

GABBO DESIGN
另一個簡潔、間隔合理的列表菜單。