五、溫暖柔和的畫面
導(dǎo)航菜單周圍一圈略深于背景色的描邊讓導(dǎo)航和背景融合的更加自然。整個導(dǎo)航的顏色和底部的大約10個像素的陰影讓整個導(dǎo)航條看上去更像是電腦鍵盤上的一個個按鍵。這個案例設(shè)計(jì)師提供了PSD文件,你可以自己嘗試一下創(chuàng)建這樣的導(dǎo)航效果。
下載
六、細(xì)節(jié)決定成敗
這和蘋果系統(tǒng)上程序圖標(biāo)上的數(shù)字提醒很像。雖然這樣的數(shù)字提醒放在導(dǎo)航上非常漂亮,但是實(shí)際功能性卻值得商榷,但它不妨礙我們學(xué)習(xí)到一點(diǎn),那就是即使這樣簡單的導(dǎo)航,在細(xì)節(jié)上也是十分講究的,從那小小的2字的圓形背景上你就能看得出來。圖層樣式中的高光、陰影、漸變、描邊一個都不能少。另外為了和灰色頁面的色調(diào)搭配,這些數(shù)字背景的紅色、黃色和藍(lán)色都選擇了飽和度偏中間調(diào)的顏色,因?yàn)榛疑旧硪彩墙橛诤谏桶咨虚g的色調(diào)。
下載
七、有關(guān)主題的創(chuàng)意
這是一個有關(guān)電影劇場的網(wǎng)頁設(shè)計(jì)。所以設(shè)計(jì)師在導(dǎo)航部分使用了這種類似于電影票的紙質(zhì)的背景圖片,并且添加上了水跡的筆刷效果,讓細(xì)節(jié)更為豐富。在導(dǎo)航條的右下方,還加上了淡淡的陰影,讓其和頁面保持一定的距離,加強(qiáng)了導(dǎo)航菜單的紙質(zhì)的感覺。有關(guān)這樣的陰影的創(chuàng)建,你可以在《在Photoshop中創(chuàng)建內(nèi)容盒陰影效果》這篇日志中找到詳細(xì)的方法。和案例1類似,創(chuàng)建一個這樣的關(guān)于電影劇場的網(wǎng)頁設(shè)計(jì),如果展開聯(lián)想的話,你會有很多關(guān)于電影劇場的設(shè)計(jì)上的創(chuàng)意,這種以電影票為導(dǎo)航背景只是其中的一個例子而已。
出處:藍(lán)色理想
責(zé)任編輯:bluehearts
上一頁 10個精致的導(dǎo)航菜單欣賞及點(diǎn)評 [2] 下一頁 10個精致的導(dǎo)航菜單欣賞及點(diǎn)評 [4]
|