這些導航菜單來自于Dribbble網(wǎng)站,出自于世界各地的優(yōu)秀設(shè)計師之手,涵蓋了各種不同的風格,個個都非常精美。這里我將這些導航菜單展示出來,依據(jù)自己的想法總結(jié)它們的可取之處,演示其中一些用得上的技術(shù)方法。這樣比起簡單粗略的看過就忘,更能在網(wǎng)頁設(shè)計上讓我們獲取很多的靈感,提高我們的設(shè)計水平。
一、木質(zhì)頁面上的抽屜創(chuàng)意
不看這個案例話,你能想到將木質(zhì)頁面上的導航菜單做成類似這樣抽屜式的樣式嗎?我自己反正是沒想到,這就是值得學習的創(chuàng)意。我們不要一做導航菜單就想也不想的畫一個直角或者圓角的矩形背景,將文字放在上面,用豎線隔開文字。這就落入了程式化的束縛之中了。
看過這個案例后,你可以明白一點,就是根據(jù)已有的東西(這里是木質(zhì)的頁面材質(zhì))去展開思考元素樣式的可能性。以這個案例為例,你可以思考一下在一個木質(zhì)的頁面上,如果能將抽屜的開合作為導航菜單的兩種狀態(tài)的話,那么暫時不考慮技術(shù)上的實現(xiàn)問題,還可以通過什么樣式來實現(xiàn)?彈孔?刻痕?油漆?這里你就可以放開你的想象力了,這時候就是創(chuàng)意迸發(fā)的時刻。有了創(chuàng)意之后再考慮技術(shù)的問題,而不能讓技術(shù)上能否實現(xiàn)限制住了我們的想象空間。
關(guān)于木質(zhì)材質(zhì)的創(chuàng)建我建議使用素材來實現(xiàn),高分辨率的素材不僅細節(jié)豐富而且風格多樣,上圖的材質(zhì)屬于比較細膩的風格,這樣的素材其實有很多,一搜一大把,但是關(guān)鍵在于平時的積累,有了不同風格的素材在手邊,實現(xiàn)這樣的效果其實非?。
二、重復和對比原則的應用
垂直導航也是網(wǎng)頁設(shè)計中常見的設(shè)計元素。在上面的設(shè)計中,我們能夠看到設(shè)計師對于重復和對比原則的充分理解和應用。其中,一級導航的樣式都很類似,左邊是文字,右邊是簡潔的小圖標,每個圖標雖然不同,但是風格都是統(tǒng)一的,這正是多樣性的重復原則。所以這些父導航按鈕會讓人感覺是平等而有某種聯(lián)系的。而當前所在的位置以非常醒目飽和度較高的黃色顯示,明顯區(qū)別于一般狀態(tài)的導航按鈕,讓訪問者清楚的知道自己當前所處的位置,提高了用戶體驗并且增強了設(shè)計感。子導航既然和父導航不屬于同一層次,那么必然要在視覺上和父導航有所區(qū)別,所以在背景顏色和文字顏色以及樣式上你就能看到這種差別所在。
另外,我將這個導航按鈕重新做成了PSD文件,放在這里供大家下載,你可以學習一下如何使用雜色濾鏡、圖層樣式來實現(xiàn)這樣細膩的導航菜單,以及如何使用鉛筆工具以像素級的標準畫出文字旁邊那個小小的三角圖標并且還要給它應用圖層樣式。以下是PSD文件預覽圖。
下載
出處:藍色理想
責任編輯:bluehearts
上一頁 下一頁 10個精致的導航菜單欣賞及點評 [2]
|