网页新趋势：革命性的创新网页导航设计

每个网站有属于自己的个性——它能反射出背后的个人或者团队。如何做到让自己的网站显得与众不同、卓尔不群，让用户流连忘返或者立马下单?

为了让你的网站脱颖而出，不仅需要有丰富的高质量内容，同时也要兼顾网站的创新性和功能性。从用户的角度出发好好想一下，怎样让你的网站用户体验更友好?简单的搜索功能是需要的，或者你也可以精心设计一下网站的导航。同时，要注意保持整个网站设计语言的一致性。在这个html5狂潮涌进的时代，诞生了很多优秀的网页设计作品，他们都有卓越的导航设计，接下来整理的这些网站将唤起你关于导航的极限创意，快来亲自体验下吧!

Toybox

在需要的时候导航栏应该一直在那里，而当用户想要专注于某个特定的任务时，导航栏则应该优雅的隐藏起来。比如说，在设计一个网上商店的出纳页面时，网站的导航应该可以随时都易于使用，但同时也要注意突出像出纳表单和按钮控件之类的鲜明功能。Toybox的导航设计就恰好满足了这些。

如下图示，这个侧边导航给人的感觉就像是你在窥视页面背后或者是掀开了一个玩具盒的盖子看看里面到底有些什么。这个侧边导航非常方便使用，鼠标悬停在浏览器左侧即可出现，主体部分即时出现的旋转效果也很带感，可以很好的引导用户的注意力。将导航隐藏起来同时也实现了界面的简洁，使网站的浏览体验非常的愉悦，因为网站并没有留下太多无用的信息去分散用户的注意力。

至于其他你想知道的信息，比如说Toybox公司的主营业务和地址，可以在顶部的一个直接呈现的导航栏里找到。首页的磁贴鼠标hover效果也非常的有趣，当鼠标悬停于某个项目的缩略图时，其余的项目缩略图都后退变暗并且产生景深的效果。

Olivier Bossel

交互设计师Olivier Bossel的个人作品博客非常有趣。该网站的导航元素在鼠标hover状态下会产生像素爆炸式的效果(译者注：火狐浏览器测试通过，chrome测试无效果)。这个效果相对于网站其余的简洁设计来说非常有动感，由此产生强烈的对比效果。作为一个视觉元素它非常有效的促进了用户继续阅读该网站，统一的视觉语言也彰显了品牌的特点。

Tsto

Tsto是一家有着简单而创新的设计方法的设计机构，它的导航设计出乎我们的意料。屏幕的四个角都固定着一个导航元素，以框架的形式让作品展示出来。视觉识别元素是由大粗的品红色字体来体现。网站的层级结构非常清晰，”Work”标签在左上角，”Contact”和”About”标签则分布在底部。为了保持风格的一致性，作品的标题也同样采用了大粗的品红色字体。

当用户浏览案例作品的时候，这些作品以幻灯片的形式展示出来，当鼠标悬停在箭头上的时候会出现下一个作品的预览图。案例展示图很大，占据了页面的大部分空间。当用户浏览这些大图的时候，就能对Tsto的公司形象和作品有深入的了解。

Derek Boateng

Derek Boateng的作品集网站在页面加载完成后用一个礼貌的”Hi”来问候访客，并且有一个向下的箭头指引访客鼠标向下滚动。页面的总体设计非常低调，它并没有对用户吼叫，而是优雅的引导用户去查看作品。当页面滚动到欢迎界面以下时，网站的头部和导航栏开始收缩，让用户能有更大的空间去查看作品。这个网站是导航清晰易用，主要内容得到充分体现的好例子。

Second Story

擦，流碧的横向滚动!Second Story的网站工作起来像一个平板上的杂志app。它的革新之处在于它给人的感觉并不是一个典型的网站页面，它是水平滚动的。内容以分栏的形式布局，每一栏内容则垂直滚动。导航栏固定在左侧，这有利于控制网站的结构。在你查看作品详情的的时候，左侧的导航栏最小化，鼠标悬停再次放大。对于作品集的浏览用户可以选择列表形式和幻灯形式。

Mostly Serious

正如它的名字所暗示的那样，Mostly Serious有它好玩的地方。打开网站迎接你的是摇摆飘浮的气球，而这些气球正是该网站导航。友好细腻的动画配上丰富的色彩建立了网站品牌的基调。进入子页面以后，通过右上角的图标你可以随时回到主页 ，页面底部同时出现一个次级导航。这个网站功能性很强，符合页面交互灵动的特征。事实上，这个网站让我想起了过去美好的日子里绚丽的flash动画(EYE4U，还有吗?)。

Minimal Monkey

在如此简约大方的页面中滚动浏览文章标题列表，让我感觉自己在使用一个书架(不信你试试看)。每一本的鼠标悬停效果都将一本书籍独立出来使用户可以更加专注。网站对于”About”和”Contact”部分的设计也匠心独运：当你点击其中一个标签的时候，会出现一个下拉的页面来显示信息。这是一个减少页面跳转的简单方法。

然而，要查看往期的文章并不简单，因为网站没有搜索功能。当用户要找特定的一篇文章时，他必须要一直滚动下去才能找到。这时候搜索功能在不破坏总体设计的前提下显得非常有用。

LayerVault

通过这个网站我们可以看到，一个简单干净的布局，加上好玩的色彩以及有趣的动画，能带来如此惊人的效果!LayerVault这个网站平衡了留白和微妙的动画来吸引它的用户。动画可以用来阐明一个观点，引导用户浏览整个网站，甚至给出使用指南。虽然动画并不总是起到这些作用，然而LayerVault恰如其分的使用了它，只有当用户浏览到页面的一个特定区域的时候才会出现这些动画。结果怎样呢?一个布局优雅的页面配上优美的注解!

Escape Flight

Escape Flight设计得非常精妙!新页面的loading动画中，logo中火箭的火焰尾气动态效果非常好，显得新颖时尚。导航栏固定在顶部，就像一个即将启程的港口或者甲板，就好像你已经来到了飞机场。下拉菜单看起来就像是一张旅行清单，和主题很搭。当你选择了一个地点后，鼠标往下滚，所有重要的信息都会固定在顶部，对于旅行者来说这样使用起来会更简便舒适。

网站充分的利用了漂亮的摄影图片，Escape Flight使图片全屏显示，或许这正是你从一个旅行类网站想要得到的。它让你略微感受到即将到来的旅程，并且优雅的展示出目的地的美景。当你鼠标悬停在某个地点的缩略图上方时，你将发现所有你想要知道的：票价、天气状况、航班时间以及旅行时长。你还想知道更多吗?

aSCIIaRENa

这个网站无需多言，黑客专属。极致的导航，内容区域任你怎么堆砌。只要你有一颗黑客的新，你会发现它的美。

The Sartorialst

照片是这个网站的中心，整个网站的设计显得很自然。更重要的是，网站照片的hover效果做得非常之优雅，每张照片的标题随着光标从边上滑入滑出，美观流畅。

SilkTricky

SilkTricky 网站背后的工作人员在现实生活中都很牛X，他们的网站也没有让我们失望。当鼠标移到图片上的时候会产生一个有趣的效果，磁贴会改变颜色并且图片发生位移。在这个只有一个页面的网站上，用户不需要在多个页面之间点来点去的跳转，只需要点击”View”，然后被选中的磁贴就会展开，同时其余的磁贴移动空出适当的区域。这样的布局同样适用于图片作品集的展示。

SumAll

SumAll的布局简洁，没有任何不必要的信息去转移用户的注意力。鼠标hover效果以一个简单的动画效果展示更多的信息，页面过度效果则是hover效果的一个扩展。当你点击一个按钮的时候，简介和选项将出现在下面。我非常喜欢这样的体验，就是当我点击一个选项后没有被带到一个新的页面，而是让信息整洁的出现在按钮下方。但这个网站也有一个缺点：导航磁贴不是响应式的，在更小的分辨率下磁贴会有错位。

Potluck

如果你是对这个网站的新颖界面充满期待的话那么我要说声抱歉了，它的界面乍看上去很普通，但是Potluck的用户体验做得非常的好。大胆的留白让用户在需要的时候立即找到自己需要的东西。表单和按钮有非常清新的设计，让用户很方便的发现和使用。所有的文本和图形都是按照引导用户浏览网站的原则来布局的。按钮和图标配合得非常好，所有的按钮和输入表单看起来有很强的视觉一致性，并且很吸引人。对于简洁页面的排版布局以及配色，这是一个很好的例子!

Lowdi

这个简单的响应式布局显得相当漂亮。Lowdi用线条和形状来划分页面的区域，这是一个很好的方式来打破传统四四方方的布局。我喜欢”Order Now”按钮融入到这个满是线条和形状的设计中的方式。这些元素能很好的适应你的屏幕分辨率，整个设计也保持了高度的流畅性，使阅读体验非常好。

Barcamp Omaha

Barcamp Omaha是一个在线邀请别人加入某次活动的网站。这个单页非常高效的用统一的视觉风格来引导用户浏览网站内容。活动最重要的信息，时间、地点、事件都放在了页面的头部，但网站的设计让用户有强烈欲望的往下滚，看看还能发现什么。我非常喜欢twitter和facebook在这个页面中的变体图标。

当用户往下滚的时候，通过大胆的标题设计，更多的信息被系统的呈现出来，网页布局依然很简洁整齐。会议内容的目录则是以简单的动画来吸引用户的眼球。当用户滚动到页面底部的时候，联系信息出现了，唾手可得。

Combadi

当网站家在完成的一瞬间，这个网站给人的感受就是非常的稳定、安静，这是严谨设计的结果。虽然没有态度的留白，但网站却不让人感觉压抑。标签在鼠标hover的时候展开，展示了更多的信息并且提升了可用性。和其他元素一起，这个效果传达了一种通透的、平静的感觉。这个设计也映射浏览网站的词汇，其余元素也组合起来传达了连贯和统一的设计风格。

Waller Creek Conservancy: The Final Four

一个完美的Hover效果不应该只是简单的呈现更多的信息，也应该为网站的视觉体验做出贡献。在这个网站中，当用户鼠标悬停在图片上时，图片扩张，并且由灰度照片恢复饱和度成全彩图片，同时呈现标题。这个效果让我和我的小伙伴们都着迷了。

Lift

在网站中对产品和信息进行列表布局的时候，我们经常会做出一个静止的传统列表页。Lift网站的书本列表则给书本的hover效果添加了一个简单的3维旋转动画。这个简单的视觉效果让网站增色不少。给用户一种感觉就是他在和网站交流。你可以从这里获取这个3维效果。

Snowbird

Snowbird是一个用户交互较多的动态网站。当前的天气情况被直接展示出来，当用户鼠标悬停的时候横向展开显示这一周的天气预报。”FULL REPORT”按钮的hover效果则是大圆角变小圆角，这种按钮状态的变化很微妙有效，可以直接用css3圆角属性实现，在扁平化时代可以考虑采用。广告图片是三角形的，隐喻雪鸟的翅膀，当鼠标悬停的时候，广告图片的另一部分展开形成完整的图片。(译者注：值得一提的是，页面加载中时网站的logo会像翅膀一样折叠展开扇动着，和网页里的交互动画有很好的一致性)

Etch

整个界面由方块磁贴紧密排列构成，但却不显得拥挤。顶部的导航栏占据了一点空间，但这些图标都是用于细致的分类。当然，你点击菜单栏也可以隐藏这些图标。另外，这个网站也是响应式设计的，不同的分辨率不能影响它的显示和功能，响应式V55!