精選10+導航菜單欣賞

向讀者展示的導航菜單來自于Dribbble網站，出自于世界各地的優(yōu)秀設計師之手，涵蓋了各種不同的風格，希望借以和讀者一起分享它們的可取之處和一些可用的技術方法。

一、木質頁面上的抽屜創(chuàng)意

不看這個案例話，你能想到將木質頁面上的導航菜單做成類似這樣抽屜式的樣式嗎？我自己反正是沒想到，這就是值得學習的創(chuàng)意。我們不要一做導航菜單就想也不想的畫一個直角或者圓角的矩形背景，將文字放在上面，用豎線隔開文字。這就落入了程式化的束縛之中了。

看 過這個案例后，你可以明白一點，就是根據已有的東西（這里是木質的頁面材質）去展開思考元素樣式的可能性。以這個案例為例，你可以思考一下在一個 木質的頁面上，如果能將抽屜的開合作為導航菜單的兩種狀態(tài)的話，那么暫時不考慮技術上的實現問題，還可以通過什么樣式來實現？彈孔？刻痕？油漆？這里你就 可以放開你的想象力了，這時候就是創(chuàng)意迸發(fā)的時刻。有了創(chuàng)意之后再考慮技術的問題，而不能讓技術上能否實現限制住了我們的想象空間。

關于木質材質的創(chuàng)建我建議使用素材來實現，高分辨率的素材不僅細節(jié)豐富而且風格多樣，上圖的材質屬于比較細膩的風格，這樣的素材其實有很多，一搜一大把，但是關鍵在于平時的積累，有了不同風格的素材在手邊，實現這樣的效果其實非?？?。

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

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

另外，我將這個導航按鈕重新做成了PSD文件，放在這里供大家下載，你可以學習一下如何使用雜色濾鏡、圖層樣式來實現這樣細膩的導航菜單，以及如何使用鉛筆工具以像素級的標準畫出文字旁邊那個小小的三角圖標并且還要給它應用圖層樣式。以下是PSD文件預覽圖。

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

想象我們從一張空白的白色文檔開始設計一個頁面的導航。首先添加鏈接文字，為了讓文字顏色和白色的頁面對比不過于強烈刺眼，我們決定不用黑色而使用灰色。這里我們將文字行距拉開，讓留白區(qū)域更多一些，目的是讓頁面保持透氣感和干凈的感覺。

各 個導航欄目如果只是文字的話看上去過于類似，所以為了讓它們在保持相似性的同時而有所區(qū)別，我們給每一個欄目的左側添加上了風格簡潔的圖標，選擇 這種風格的圖標一是符合頁面本身干凈的感覺，另外一點的考慮是圖片和文字內容的關聯性。我們不打算讓圖標比文字還吸引眼球，所以我們讓它們保持比文字還淺 的灰色。白色的頁面上如果僅僅放上導航內容的話感覺結構不夠整齊，因為沒有實際上的線條來束縛視線，所以這里我們給每一個導航欄目添加非常淺的灰色水平線 和垂直水平線，這種隱隱約約的線條既可以加強排版，還不至于讓頁面看上去條條框框過多，阻礙視線的游走。

接下來就是鼠標懸停的效果了， 這要和菜單本身的狀態(tài)有較大的視覺差別，所以這里我們將文字和背景顏色更改為清爽的綠色和灰色，灰色是為了讓整個頁面 的顏色統一，而綠色是唯一跳出整個灰色頁面的顏色。這樣就讓頁面在顏色上有了亮點，而不至于讓人感覺頁面上灰蒙蒙的一片。背景的材質上添加了雜色，這樣看 上去更加柔和，而不是光亮的冷冰冰的感覺。這基本上就是我們設計這個導航的整個考慮過程。

這樣你就看到了，這里的每一個元素和細節(jié)的應用都是經過充分考慮的，而且沒有一個多于的東西無緣無故的存在，這就是簡潔風格的設計理念。

四、強質感的高光風格

這個例子中的導航和我上一篇日志《強質感高光風格網頁欣賞及其表現手法總結》中提高的風格比較類似，技術方法也非常簡單，你可以去那篇日志中下載我做好的PSD文件，學習一下如何實現這樣的效果。

五、溫暖柔和的畫面

導航菜單周圍一圈略深于背景色的描邊讓導航和背景融合的更加自然。整個導航的顏色和底部的大約10個像素的陰影讓整個導航條看上去更像是電腦鍵盤上的一個個按鍵。這個案例設計師提供了PSD文件，你可以自己嘗試一下創(chuàng)建這樣的導航效果。

下載

六、細節(jié)決定成敗

這 和蘋果系統上程序圖標上的數字提醒很像。雖然這樣的數字提醒放在導航上非常漂亮，但是實際功能性卻值得商榷，但它不妨礙我們學習到一點，那就是即 使這樣簡單的導航，在細節(jié)上也是十分講究的，從那小小的2字的圓形背景上你就能看得出來。圖層樣式中的高光、陰影、漸變、描邊一個都不能少。另外為了和灰 色頁面的色調搭配，這些數字背景的紅色、黃色和藍色都選擇了飽和度偏中間調的顏色，因為灰色本身也是介于黑色和白色中間的色調。

下載

七、有關主題的創(chuàng)意

這 是一個有關電影劇場的網頁設計。所以設計師在導航部分使用了這種類似于電影票的紙質的背景圖片，并且添加上了水跡的筆刷效果，讓細節(jié)更為豐富。在 導航條的右下方，還加上了淡淡的陰影，讓其和頁面保持一定的距離，加強了導航菜單的紙質的感覺。有關這樣的陰影的創(chuàng)建，你可以在《在Photoshop中創(chuàng)建內容盒陰影效果》這篇日志中找到詳細的方法。和案例1類似，創(chuàng)建一個這樣的關于電影劇場的網頁設計，如果展開聯想的話，你會有很多關于電影劇場的設計上的創(chuàng)意，這種以電影票為導航背景只是其中的一個例子而已。

八、自然質樸的布制風格

兩 條水平的白色虛線和一條灰色的垂直線仿佛是縫在布上的線腳。這種風格給人一種自然以及手工的感覺。創(chuàng)建這樣的線腳并不難，直接用文字工具鍵出虛 線，調整字體、大小以及間距就可以了。關鍵點在于頁面邊緣彎折的那部分，要注意綠色帶子彎折后的透視關系，需要將其向下移動一定的距離。

九、讓色彩從頁面跳出

在 偏向于黑色的頁面背景上有這樣鮮亮的綠色跳出會非常吸引視覺注意力。再加上好像用大頭針釘在頁面上的獨特樣式，更是和頁面本身增強了對比，所以如 果這樣的下拉菜單展開的話，你會忍不住將鼠標移動到其它菜單上試試效果，如果同時你能關注到導航內容的話，設計者的目的就達到了。

十、互補色營造鮮明視覺

細膩的斜紋背景創(chuàng)建起來非常簡單，只需用鉛筆工具以1像素的粗細創(chuàng)建好圖案，保存后在圖層樣式中應用圖案疊加就可以了。關于這種背景的創(chuàng)建我在之前寫的《在Photoshop中創(chuàng)建多種樣式的網格背景圖案》這篇文章中詳細講過，你可以參考這篇日志自己動手創(chuàng)建。

這 里值得一提的是案例中的冷色背景色和暖色的文字和圖標顏色的使用，橙色和青綠色屬于互補色，青綠色作為背景色飽和度很低，而橙色的飽和度非常高， 通過對比讓圖標和文字看上去非常醒目同時又非常和諧。所以如果你打算在設計中使用互補色的話，不要同時調高兩種顏色的飽和度，這樣會使視覺向兩邊拉扯，而 應該有所主次，通過將一種顏色的飽和度降低，再加入相應的白色或者黑色和另外一種飽和度較高的顏色搭配，就像這個案例向我們展示的那樣。

Over~  借鑒和解讀設計是設計師們進階專業(yè)技能非常重要的一個途徑，善于從別人的作品中發(fā)現閃光點，并合理的糅合運用到自己的作品當中，才能保證靈感源永不枯竭。