轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(jì)(   www.bouu.cn  )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的   BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、  ipad界面設(shè)計(jì)   、  包裝設(shè)計(jì) 、  圖標(biāo)定制 、  用戶體驗(yàn) 、交互設(shè)計(jì)、   網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

來(lái)源：http://www.uisdc.com/100-things-you-should-know-about-design

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中，   請(qǐng)點(diǎn)這里　

這些導(dǎo)航菜單來(lái)自于Dribbble網(wǎng)站，出自于世界各地的優(yōu)秀設(shè)計(jì)師之手，涵蓋了各種不同的風(fēng)格，個(gè)個(gè)都非常精美。這里我將這些導(dǎo)航菜單展示出來(lái)，依據(jù)自己的想法總結(jié)它們的可取之處，演示其中一些用得上的技術(shù)方法。這樣比起簡(jiǎn)單粗略的看過(guò)就忘，更能在網(wǎng)頁(yè)設(shè)計(jì)上讓我們獲取很多的靈感，提高我們的設(shè)計(jì)水平。

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

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

二、重復(fù)和對(duì)比原則的應(yīng)用

垂直導(dǎo)航也是網(wǎng)頁(yè)設(shè)計(jì)中常見的設(shè)計(jì)元素。在上面的設(shè)計(jì)中，我們能夠看到設(shè)計(jì)師對(duì)于重復(fù)和對(duì)比原則的充分理解和應(yīng)用。其中，一級(jí)導(dǎo)航的樣式都很類似，左邊是文字，右邊是簡(jiǎn)潔的小圖標(biāo)，每個(gè)圖標(biāo)雖然不同，但是風(fēng)格都是統(tǒng)一的，這正是多樣性的重復(fù)原則。所以這些父導(dǎo)航按鈕會(huì)讓人感覺是平等而有某種聯(lián)系的。而當(dāng)前所在的位置以非常醒目飽和度較高的黃色顯示，明顯區(qū)別于一般狀態(tài)的導(dǎo)航按鈕，讓訪問(wèn)者清楚的知道自己當(dāng)前所處的位置，提高了用戶體驗(yàn)并且增強(qiáng)了設(shè)計(jì)感。子導(dǎo)航既然和父導(dǎo)航不屬于同一層次，那么必然要在視覺上和父導(dǎo)航有所區(qū)別，所以在背景顏色和文字顏色以及樣式上你就能看到這種差別所在。
另外，我將這個(gè)導(dǎo)航按鈕重新做成了PSD文件，放在這里供大家下載，你可以學(xué)習(xí)一下如何使用雜色濾鏡、圖層樣式來(lái)實(shí)現(xiàn)這樣細(xì)膩的導(dǎo)航菜單，以及如何使用鉛筆工具以像素級(jí)的標(biāo)準(zhǔn)畫出文字旁邊那個(gè)小小的三角圖標(biāo)并且還要給它應(yīng)用圖層樣式。以下是PSD文件預(yù)覽圖。 

三、每一個(gè)元素都是有用的

想象我們從一張空白的白色文檔開始設(shè)計(jì)一個(gè)頁(yè)面的導(dǎo)航。首先添加鏈接文字，為了讓文字顏色和白色的頁(yè)面對(duì)比不過(guò)于強(qiáng)烈刺眼，我們決定不用黑色而使用灰色。這里我們將文字行距拉開，讓留白區(qū)域更多一些，目的是讓頁(yè)面保持透氣感和干凈的感覺。
各個(gè)導(dǎo)航欄目如果只是文字的話看上去過(guò)于類似，所以為了讓它們?cè)诒３窒嗨菩缘耐瑫r(shí)而有所區(qū)別，我們給每一個(gè)欄目的左側(cè)添加上了風(fēng)格簡(jiǎn)潔的圖標(biāo)，選擇這種風(fēng)格的圖標(biāo)一是符合頁(yè)面本身干凈的感覺，另外一點(diǎn)的考慮是圖片和文字內(nèi)容的關(guān)聯(lián)性。我們不打算讓圖標(biāo)比文字還吸引眼球，所以我們讓它們保持比文字還淺的灰色。白色的頁(yè)面上如果僅僅放上導(dǎo)航內(nèi)容的話感覺結(jié)構(gòu)不夠整齊，因?yàn)闆](méi)有實(shí)際上的線條來(lái)束縛視線，所以這里我們給每一個(gè)導(dǎo)航欄目添加非常淺的灰色水平線和垂直水平線，這種隱隱約約的線條既可以加強(qiáng)排版，還不至于讓頁(yè)面看上去條條框框過(guò)多，阻礙視線的游走。
接下來(lái)就是鼠標(biāo)懸停的效果了，這要和菜單本身的狀態(tài)有較大的視覺差別，所以這里我們將文字和背景顏色更改為清爽的綠色和灰色，灰色是為了讓整個(gè)頁(yè)面的顏色統(tǒng)一，而綠色是唯一跳出整個(gè)灰色頁(yè)面的顏色。這樣就讓頁(yè)面在顏色上有了亮點(diǎn)，而不至于讓人感覺頁(yè)面上灰蒙蒙的一片。背景的材質(zhì)上添加了雜色，這樣看上去更加柔和，而不是光亮的冷冰冰的感覺。這基本上就是我們?cè)O(shè)計(jì)這個(gè)導(dǎo)航的整個(gè)考慮過(guò)程。
這樣你就看到了，這里的每一個(gè)元素和細(xì)節(jié)的應(yīng)用都是經(jīng)過(guò)充分考慮的，而且沒(méi)有一個(gè)多于的東西無(wú)緣無(wú)故的存在，這就是簡(jiǎn)潔風(fēng)格的設(shè)計(jì)理念。

四、強(qiáng)質(zhì)感的高光風(fēng)格

這個(gè)例子中的導(dǎo)航和我上一篇日志《強(qiáng)質(zhì)感高光風(fēng)格網(wǎng)頁(yè)欣賞及其表現(xiàn)手法總結(jié)》中提高的風(fēng)格比較類似，技術(shù)方法也非常簡(jiǎn)單，你可以去那篇日志中下載我做好的PSD文件，學(xué)習(xí)一下如何實(shí)現(xiàn)這樣的效果。

五、溫暖柔和的畫面

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

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

這和蘋果系統(tǒng)上程序圖標(biāo)上的數(shù)字提醒很像。雖然這樣的數(shù)字提醒放在導(dǎo)航上非常漂亮，但是實(shí)際功能性卻值得商榷，但它不妨礙我們學(xué)習(xí)到一點(diǎn)，那就是即使這樣簡(jiǎn)單的導(dǎo)航，在細(xì)節(jié)上也是十分講究的，從那小小的2字的圓形背景上你就能看得出來(lái)。圖層樣式中的高光、陰影、漸變、描邊一個(gè)都不能少。另外為了和灰色頁(yè)面的色調(diào)搭配，這些數(shù)字背景的紅色、黃色和藍(lán)色都選擇了飽和度偏中間調(diào)的顏色，因?yàn)榛疑旧硪彩墙橛诤谏桶咨虚g的色調(diào)。

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

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

八、自然質(zhì)樸的布制風(fēng)格

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

九、讓色彩從頁(yè)面跳出

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

十、互補(bǔ)色營(yíng)造鮮明視覺

細(xì)膩的斜紋背景創(chuàng)建起來(lái)非常簡(jiǎn)單，只需用鉛筆工具以1像素的粗細(xì)創(chuàng)建好圖案，保存后在圖層樣式中應(yīng)用圖案疊加就可以了。關(guān)于這種背景的創(chuàng)建我在之前寫的《在Photoshop中創(chuàng)建多種樣式的網(wǎng)格背景圖案》這篇文章中詳細(xì)講過(guò)，你可以參考這篇日志自己動(dòng)手創(chuàng)建。
這里值得一提的是案例中的冷色背景色和暖色的文字和圖標(biāo)顏色的使用，橙色和青綠色屬于互補(bǔ)色，青綠色作為背景色飽和度很低，而橙色的飽和度非常高，通過(guò)對(duì)比讓圖標(biāo)和文字看上去非常醒目同時(shí)又非常和諧。所以如果你打算在設(shè)計(jì)中使用互補(bǔ)色的話，不要同時(shí)調(diào)高兩種顏色的飽和度，這樣會(huì)使視覺向兩邊拉扯，而應(yīng)該有所主次，通過(guò)將一種顏色的飽和度降低，再加入相應(yīng)的白色或者黑色和另外一種飽和度較高的顏色搭配，就像這個(gè)案例向我們展示的那樣。

來(lái)源：http://startwmlife.com/the-inspiration-of-ten-exquisite-navigation-menu-and-tips/