可用性是任何网站的一个目标,而实用性很强的导航栏却是每个网站必须的。它决定着用户被引导到哪里和用户如何与网站互动。如果没有一个可用性很强的导航栏,内容会变得毫无价值。导航按钮要非常容易让用户理解,而且要具有很强引导性以至于用户不会迷路。
以下35款导航栏,均是利用了CSS,相信你会有一定的收获^_^
Loodo
一款多彩的按钮,让页面看起来特有感觉
Acko.net
Steven Wittens的这款导航按钮源自一个独特的想法
Web Design Ledger
Web Design Ledger 又有一款很棒的按钮,按钮个头比较大,但是对页面的内容没有一点影响
UX Booth
UX Booth在导航条的下面放置了一个文本框,放入按钮的描述性文字
Nopokographics
在网页上,垂直导航条很少用,原因很简单,因为他们太难用了,但是仍旧有一些富有冒险精神的设计师运 用一些不寻常的设计方法。Nopoko Graphics用箭头和悬垂效果来实现垂直导航条。
Icon Designer
这个网站在首页上用了超大的图片按钮,更便于用户将注意力集中到按钮上面。
Cosmicsoda
这款导航按钮个头也是比较大,为了便于用户更好的定位按钮(更准去去的点击自己选择的按钮),运用了 一点悬挂效果。
Designsensory
一款drop-down风格的导航栏,运用了两种颜色效果来体现处于激活状态(active)的按钮和未激活按钮。
Smallstone
Smallstone, 美国的一唱片公司,它们的网站运用了一种被称为Space Echo Roland SE-201的机器的界面。
TNVacation
非常困难找到一个令人满意漂亮的drop-down按钮,但是这款按钮是个例外。
Clearleft
Clearleft用两张纸作为导航栏
45royale
一款简单、整洁、漂亮的具有悬垂效果的导航栏
Design Intellection
一个相当棒的块状导航栏,告诉你怎样才能让导航条“说话”,向用户传递有效的信息,悬垂效果怎样运用 到简约风格的导航栏上。
Ronnypries.de
一款非传统的风格的导航栏,Ronny Pries运用房屋平面图来引导用户访问页面。
Jiri Tvrdek
Jiri Tvrdek 的导航栏就像树叶一样,很有创意,非常独特,值得借鉴,令人难忘。
Water’s Edge Media
Patricia Abbott把晾衣服的夹子运用到了导航栏上,有想法.
Matt Dempsey
Matt Dempsey 将其要强调的内容运用笔刷效果,相当不错,赞一个。
Cognigen
激活状态的按钮处于被按下去的效果,简洁且立体感强。
District Solutions
垂直风格的虽然很少用,但是他们的我很看好!
Jayme Blackmon
Jayme Blackmon 看起来就像去选择标签一样。
Jeff Sarmiento
在某些时候为什么不去尝试一下非对称倾斜的导航栏呢?
Studioracket
一个很特别的导航栏,运用了一些思维图的方式,除此之外,导航栏上的所有按钮均是手绘!
Cultured Code
用微妙的变化来与旁边的内容区分开来,出色的配色和悬浮效果。
Nando Designer
运用手写风格的按钮与一张纸组成网站的导航条
Bonfiremedia
有时候只需要文字就足够了…
Artgeex
多彩形象生动。
Gloobs
有时候设计师会将印章效果融入到导航栏。
South Creative
这个网站运用大个导航按钮及很妙的光影效果。
Mac Rabbit
一款大气且整洁的导航栏,并运用了一些图标帮助读者意识到每个项目的含义。
RapidWeaver
这款导航栏光滑整洁,很有质感,同时二级菜单采用了半透明效果。
DFW UPA
图标的运用增强了导航栏可读性,更便于用户理解。
Revolution Driving Tuition
根据这个网站的“垃圾”风格,导航栏的风格运用的恰到好处。
Duarte Pires
这款导航栏特别靠近网页的主题内容,这样就便于实用。它运用大图标来增强可视化效果,虽然这些图标也 运用在了其他页面,这么做可使页面风格统一,尽管这些按钮不是太好看,但是设计师运用的很到位!
Valetin Agachi
这款导航栏在强调激活状态的按钮时采用的风格与其他的很不一样,但是却很好的和页面整体风格统一。
Tutorial9
Tutorial9 最近进行了一次从新设计, 具有很强的可用性和页面协调性。
0 评论:
发表评论