2009年2月6日星期五

[ Tech ] 三十多款漂亮且用户友好性很强的CSS导航按钮

可用性是任何网站的一个目标,而实用性很强的导航栏却是每个网站必须的。它决定着用户被引导到哪里和用户如何与网站互动。如果没有一个可用性很强的导航栏,内容会变得毫无价值。导航按钮要非常容易让用户理解,而且要具有很强引导性以至于用户不会迷路。

以下35款导航栏,均是利用了CSS,相信你会有一定的收获^_^

Loodo
一款多彩的按钮,让页面看起来特有感觉

Screenshot



Acko.net
Steven Wittens的这款导航按钮源自一个独特的想法

Screenshot



Web Design Ledger
Web Design Ledger 又有一款很棒的按钮,按钮个头比较大,但是对页面的内容没有一点影响

Screenshot



UX Booth
UX Booth在导航条的下面放置了一个文本框,放入按钮的描述性文字

Screenshot



Nopokographics
在网页上,垂直导航条很少用,原因很简单,因为他们太难用了,但是仍旧有一些富有冒险精神的设计师运 用一些不寻常的设计方法。Nopoko Graphics用箭头和悬垂效果来实现垂直导航条。

Screenshot



Icon Designer
这个网站在首页上用了超大的图片按钮,更便于用户将注意力集中到按钮上面。

Screenshot



Cosmicsoda
这款导航按钮个头也是比较大,为了便于用户更好的定位按钮(更准去去的点击自己选择的按钮),运用了 一点悬挂效果。

Screenshot



Designsensory
一款drop-down风格的导航栏,运用了两种颜色效果来体现处于激活状态(active)的按钮和未激活按钮。

Screenshot



Smallstone
Smallstone, 美国的一唱片公司,它们的网站运用了一种被称为Space Echo Roland SE-201的机器的界面。

Screenshot



TNVacation
非常困难找到一个令人满意漂亮的drop-down按钮,但是这款按钮是个例外。

Screenshot



Clearleft
Clearleft用两张纸作为导航栏

Screenshot



45royale
一款简单、整洁、漂亮的具有悬垂效果的导航栏

Screenshot



Design Intellection
一个相当棒的块状导航栏,告诉你怎样才能让导航条“说话”,向用户传递有效的信息,悬垂效果怎样运用 到简约风格的导航栏上。

Screenshot



Ronnypries.de
一款非传统的风格的导航栏,Ronny Pries运用房屋平面图来引导用户访问页面。

Screenshot



Jiri Tvrdek
Jiri Tvrdek 的导航栏就像树叶一样,很有创意,非常独特,值得借鉴,令人难忘。

Screenshot



Water’s Edge Media
Patricia Abbott把晾衣服的夹子运用到了导航栏上,有想法.

Screenshot



Matt Dempsey
Matt Dempsey 将其要强调的内容运用笔刷效果,相当不错,赞一个。

Screenshot



Cognigen
激活状态的按钮处于被按下去的效果,简洁且立体感强。

Screenshot



District Solutions
垂直风格的虽然很少用,但是他们的我很看好!

Screenshot



Jayme Blackmon
Jayme Blackmon 看起来就像去选择标签一样。

Screenshot



Jeff Sarmiento
在某些时候为什么不去尝试一下非对称倾斜的导航栏呢?

Screenshot



Studioracket
一个很特别的导航栏,运用了一些思维图的方式,除此之外,导航栏上的所有按钮均是手绘!

Screenshot



Cultured Code
用微妙的变化来与旁边的内容区分开来,出色的配色和悬浮效果。

Screenshot



Nando Designer
运用手写风格的按钮与一张纸组成网站的导航条

Screenshot



Bonfiremedia
有时候只需要文字就足够了…

Screenshot



Artgeex
多彩形象生动。

Screenshot



Gloobs
有时候设计师会将印章效果融入到导航栏。

Screenshot



South Creative
这个网站运用大个导航按钮及很妙的光影效果。

Screenshot



Mac Rabbit
一款大气且整洁的导航栏,并运用了一些图标帮助读者意识到每个项目的含义。

Screenshot



RapidWeaver
这款导航栏光滑整洁,很有质感,同时二级菜单采用了半透明效果。

Screenshot



DFW UPA
图标的运用增强了导航栏可读性,更便于用户理解。

Screenshot



Revolution Driving Tuition
根据这个网站的“垃圾”风格,导航栏的风格运用的恰到好处。

Screenshot



Duarte Pires
这款导航栏特别靠近网页的主题内容,这样就便于实用。它运用大图标来增强可视化效果,虽然这些图标也 运用在了其他页面,这么做可使页面风格统一,尽管这些按钮不是太好看,但是设计师运用的很到位!

Screenshot



Valetin Agachi
这款导航栏在强调激活状态的按钮时采用的风格与其他的很不一样,但是却很好的和页面整体风格统一。

Screenshot



Tutorial9
Tutorial9 最近进行了一次从新设计, 具有很强的可用性和页面协调性。

Screenshot

0 评论: