網站導航設計趨勢案例集合

     在網站應用程式性中，導覽功能表應該是最重要的部分了，優秀的導航設計不僅可以方便使用者瀏覽網站內容，還能在第一時間給使用者準確的資訊傳達，直觀地表現網站的內容涉獵，讓使用者更方便地找到想要的需要的內容，這裡整理了當前網站設計中流行的特色導航設計案例，這也表明了網站導航設計的一個未來趨勢。

1、3-D 導航

3-D 風格的導覽功能表可以表現的更突出，能在整個頁面的設計中凸顯導航功能，並且向使用者傳達直觀的可操作性。

1.1 Delibar

1.2 Blue Door Baby

Trends" width="500" height="243">

1.3 Mystery Tin

Trends" width="500" height="500">

1.4 psdtowp

1.5 Harry Bissett

Trends" width="500" height="222">

1.6 Sower of Seeds

Trends" width="500" height="222">

2、會話框（氣泡）導航

這類的網站導航風格打破了常規的菜單布局，在很多特色的網站設計中有很好的應用和體現。

2.1 Alexarts

Trends" width="500" height="501">

2.2 Bush Theatre

Trends" width="500" height="145">

2.3 Tienda

2.4 Rob Alan

Trends" width="500" height="213">

2.5 SproutBox

Trends" width="500" height="213">

2.6 Kingpin Social

Trends" width="500" height="213">

2.7 Contrast

Trends" width="500" height="160">

2.8 Design Spartan

Trends" width="500" height="94">

2.9 Definitely Dubai

Design Trends" width="500" height="156">

2.10 Robin James Yu

Trends" width="500" height="144">

2.11 GIANT Creative

Trends" width="500" height="162">

2.12 Yellow Bird Project

Trends" width="500" height="162">

3、圓角導航

圓角導航的應用已經並不新鮮，在很多的網站設計中得到了很好的應用。這類導航外觀表現的更像一個可操作的按鈕，引導使用者點擊。

3.1 Ballpark

Trends" width="500" height="136">

3.2 NOSOTROS

Trends" width="500" height="136">

3.3 New Look Media

Trends" width="500" height="136">

3.4 LemonStand

Trends" width="500" height="200">

3.5 MetaLab

3.6 Vistrac

Trends" width="500" height="200">

3.7 gugafit

3.8 PeepNote

Trends" width="500" height="200">

3.9 Viljami Salminen

4、表徵圖類導航

精緻風格的視覺類導航在如今的高速頻寬的網路環境中，已經可以完全無需考慮載入速度，從而應用在網站設計中，進一步提高網站的整個設計品質。

4.1 Adii Rockstar

4.2 Sourcebits

Trends" width="500" height="182">

4.3 Carsonified

Trends" width="500" height="103">

4.4 marcusK

4.5 MobileMySite.com

Trends" width="500" height="308">

4.6 mesonprojekt

4.7 Dreamling.ca

Trends" width="500" height="215">

4.8 nadamastriste

4.9 RedVelvetart.com

Trends" width="500" height="170">

4.10 Custom Toronto

Trends" width="500" height="314">

5、JavaScript 動畫導航

網站設計師使用JavaScript架構可以很容易地實現動畫風格的導覽功能表功能，使得導航設計表現的栩栩如生。

5.1 Andreas Hinkel

Trends" width="500" height="320">

5.2 Jon White Studio

Trends" width="500" height="320">

5.3 Votaw

5.4 Utah.travel

Trends" width="500" height="300">

5.5 RUDEWORKS

Trends" width="500" height="175">

5.6 MULTIWAYS

Trends" width="500" height="175">

5.7 Bert Timmermans

Trends" width="500" height="175">

5.8 Dragon Interactive

Design Trends" width="500" height="191">

6、不規則形狀導航

正是因為多數網站都是採用規則邊角設計的，所以，如果在特殊的網站設計中能使用一些不規則形狀的導覽功能表，可以為整個網站設計增色不少。

6.1 Booma

Trends" width="500" height="191">

6.2 Kutztown University

Trends" width="500" height="500">

6.3 Yorkdale

Trends" width="500" height="355">

6.4 The Crazy Love Campaign

Trends" width="500" height="243">

6.5 Carnivale du Vin 2009

Trends" width="500" height="210">

6.6 Wrangler Face Off

Trends" width="500" height="426">

6.7 HTO

6.8 smriyaz.com

6.9 Think Up

Trends" width="500" height="209">

6.10 f claire baxter

Trends" width="500" height="209">

6.11 Inner Metro Green

Design Trends" width="500" height="171">

6.12 Custom Tshirts UK

Trends" width="500" height="500">

6.13 Pirata London

Trends" width="500" height="347">

6.14 koraykibar.com

Trends" width="500" height="316">

6.15 Idea.org

Trends" width="500" height="296">

7、箭頭導航

經常會看到一些類似雜誌類網站設計會使用到這樣的導航風格，從而給使用者一個更好的互動式體驗，提高使用者的瀏覽操作。

7.1 Jack Cheng

Trends" width="500" height="296">

7.2 gregorywood.co.uk

Trends" width="500" height="296">

7.3 The Rich And Powerful

Trends" width="500" height="161">

7.4 72nd Ave.

英文原文:
Showcase Of Modern Navigation Design Trends


翻譯來源：
http://news.cnblogs.com/n/55187/