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