這些導航菜單出自于世界各地的優秀設計師之手，涵蓋了各種不同的風格，個個都非常精美。這里將這些導航菜單展示出來，依據自己的想法總結它們的可取之處，演示其中一些用得上的技術方法。這樣比起簡單粗略的看過就忘，更能在網頁設計上讓我們獲取很多的靈感，提高我們的設計水平。
 
一、木質頁面上的抽屜創意
 

 
不看這個案例話，你能想到將木質頁面上的導航菜單做成類似這樣抽屜式的樣式嗎？我自己反正是沒想到，這就是值得學習的創意。我們不要一做導航菜單就想也不想的畫一個直角或者圓角的矩形背景，將文字放在上面，用豎線隔開文字。這就落入了程式化的束縛之中了。
 
看過這個案例后，你可以明白一點，就是根據已有的東西（這里是木質的頁面材質）去展開思考元素樣式的可能性。以這個案例為例，你可以思考一下在一個木質的頁面上，如果能將抽屜的開合作為導航菜單的兩種狀態的話，那么暫時不考慮技術上的實現問題，還可以通過什么樣式來實現？彈孔？刻痕？油漆？這里你就可以放開你的想象力了，這時候就是創意迸發的時刻。有了創意之后再考慮技術的問題，而不能讓技術上能否實現限制住了我們的想象空間。
 
關于木質材質的創建我建議使用素材來實現，高分辨率的素材不僅細節豐富而且風格多樣，上圖的材質屬于比較細膩的風格，這樣的素材其實有很多，一搜一大把，但是關鍵在于平時的積累，有了不同風格的素材在手邊，實現這樣的效果其實非常快。
 

二、重復和對比原則的應用
 

 
垂直導航也是網頁設計中常見的設計元素。在上面的設計中，我們能夠看到設計師對于重復和對比原則的充分理解和應用。其中，一級導航的樣式都很類似，左邊是文字，右邊是簡潔的小圖標，每個圖標雖然不同，但是風格都是統一的，這正是多樣性的重復原則。所以這些父導航按鈕會讓人感覺是平等而有某種聯系的。而當前所在的位置以非常醒目飽和度較高的黃色顯示，明顯區別于一般狀態的導航按鈕，讓訪問者清楚的知道自己當前所處的位置，提高了用戶體驗并且增強了設計感。子導航既然和父導航不屬于同一層次，那么必然要在視覺上和父導航有所區別，所以在背景顏色和文字顏色以及樣式上你就能看到這種差別所在。
 

 
三、每一個元素都是有用的

 
想象我們從一張空白的白色文檔開始設計一個頁面的導航。首先添加鏈接文字，為了讓文字顏色和白色的頁面對比不過于強烈刺眼，我們決定不用黑色而使用灰色。這里我們將文字行距拉開，讓留白區域更多一些，目的是讓頁面保持透氣感和干凈的感覺。
 
各個導航欄目如果只是文字的話看上去過于類似，所以為了讓它們在保持相似性的同時而有所區別，我們給每一個欄目的左側添加上了風格簡潔的圖標，選擇這種風格的圖標一是符合頁面本身干凈的感覺，另外一點的考慮是圖片和文字內容的關聯性。我們不打算讓圖標比文字還吸引眼球，所以我們讓它們保持比文字還淺的灰色。白色的頁面上如果僅僅放上導航內容的話感覺結構不夠整齊，因為沒有實際上的線條來束縛視線，所以這里我們給每一個導航欄目添加非常淺的灰色水平線和垂直水平線，這種隱隱約約的線條既可以加強排版，還不至于讓頁面看上去條條框框過多，阻礙視線的游走。
 
接下來就是鼠標懸停的效果了，這要和菜單本身的狀態有較大的視覺差別，所以這里我們將文字和背景顏色更改為清爽的綠色和灰色，灰色是為了讓整個頁面的顏色統一，而綠色是唯一跳出整個灰色頁面的顏色。這樣就讓頁面在顏色上有了亮點，而不至于讓人感覺頁面上灰蒙蒙的一片。背景的材質上添加了雜色，這樣看上去更加柔和，而不是光亮的冷冰冰的感覺。這基本上就是我們設計這個導航的整個考慮過程。
 
這樣你就看到了，這里的每一個元素和細節的應用都是