|
MattCronin版權(quán)所有作者：Smashingmagazine,MattCronin譯者：UCD翻譯小組,JJYY原文：http://www.yuhou.cn/2009/02/04/50-beautiful-and-user-friendly-navigation-menus/
對任何網(wǎng)站來說，可用性都是一個重要的設(shè)計(jì)目標(biāo)，而友好的導(dǎo)航是其中的要素之一，它決定著用戶在網(wǎng)站中如何被引導(dǎo)，如何與網(wǎng)站進(jìn)行互動。如果沒有友好的導(dǎo)航，網(wǎng)頁的內(nèi)容就很難發(fā)光和被用戶發(fā)掘。菜單必須要足夠簡單到用戶容易理解，還要包含必要的元素來引導(dǎo)用戶瀏覽整個網(wǎng)站——同時要有很棒和有創(chuàng)意的設(shè)計(jì)在上面。
下面我們將展示50多個出色的導(dǎo)航菜單——我們挑選了一些用CSS實(shí)現(xiàn)的菜單，一些CSS+Javascript的菜單，還有flash的菜單設(shè)計(jì)。不管他們具體是用什么實(shí)現(xiàn)的，共同點(diǎn)是：對用戶友好、富有創(chuàng)意，并且完美符合所屬網(wǎng)站的風(fēng)格。感興趣的話，您還可以閱讀我們之前的幾篇文章：
基于CSS的導(dǎo)航菜單：時髦的解決方案-列舉了一些很時髦的CSS菜單導(dǎo)航菜單：趨勢和例子-收集了一些很能激發(fā)靈感的導(dǎo)航菜單。
1.基于CSS的導(dǎo)航菜單
Loodo一個色彩斑斕、給網(wǎng)站增加了觸摸感的菜單。
yuhou.cn設(shè)計(jì)者StevenWittens采用了一種獨(dú)特的透視角度來呈現(xiàn)導(dǎo)航菜單。
WebDesignLedger該網(wǎng)站有一個很棒的菜單，大尺寸的按鈕非常舒適且沒有和網(wǎng)站內(nèi)容攪在一塊。
UXBooth在導(dǎo)航欄下面使用了一個漂亮的輔助文本區(qū)域來說明當(dāng)前的菜單項(xiàng)。
Nopokographics垂直文字的導(dǎo)航菜單非常罕見，因?yàn)樗麄冇闷饋聿皇悄敲词娣?。但一些設(shè)計(jì)師總會迎著風(fēng)頭去做些突破。NopokoGrphics就使用了箭頭指示和鼠標(biāo)懸浮(Hover)效果在他們的垂直導(dǎo)航菜單上。
IconDesigner這個網(wǎng)站在首頁上使用了超大的圖片菜單，用戶的注意力馬上就被這個賊大的菜單拽了過去，看起來對用戶非常方便。
Cosmicsoda這個大大的菜單十分醒目，并且使用了輕微的Hover效果來為菜單增色。
Designsensory十分符合用戶認(rèn)知的二級菜單導(dǎo)航，使用2種顏色區(qū)分，有效的告訴用戶當(dāng)前激活的菜單項(xiàng)目和未激活的項(xiàng)目。
SmallstoneSmallstone,美國的唱片公司，采用了一種獨(dú)特的導(dǎo)航菜單，厄。。。這東東叫做“空間回音RloandSE-201型號”.
TNVacation這年頭很難找到一個看起來很棒的下拉菜單，不過這里就有一個例外。
|