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