这些导航菜单来自于Dribbble网站，出自于世界各地的优秀设计师之手，涵盖了各种不同的风格，个个都非常精美。这里我将这些导航菜单展示出来，依据自己的想法总结它们的可取之处，演示其中一些用得上的技术方法。这样比起简单粗略的看过就忘，更能在网页设计上让我们获取很多的灵感，提高我们的设计水平。

一、木质页面上的抽屉创意

不看这个案例话，你能想到将木质页面上的导航菜单做成类似这样抽屉式的样式吗？我自己反正是没想到，这就是值得学习的创意。我们不要一做导航菜单就想也不想的画一个直角或者圆角的矩形背景，将文字放在上面，用竖线隔开文字。这就落入了程式化的束缚之中了。

看过这个案例后，你可以明白一点，就是根据已有的东西（这里是木质的页面材质）去展开思考元素样式的可能性。以这个案例为例，你可以思考一下在一个木质的页面上，如果能将抽屉的开合作为导航菜单的两种状态的话，那么暂时不考虑技术上的实现问题，还可以通过什么样式来实现？弹孔？刻痕？油漆？这里你就可以放开你的想象力了，这时候就是创意迸发的时刻。有了创意之后再考虑技术的问题，而不能让技术上能否实现限制住了我们的想象空间。

关于木质材质的创建我建议使用素材来实现，高分辨率的素材不仅细节丰富而且风格多样，上图的材质属于比较细腻的风格，这样的素材其实有很多，一搜一大把，但是关键在于平时的积累，有了不同风格的素材在手边，实现这样的效果其实非常快。

二、重复和对比原则的应用

垂直导航也是网页设计中常见的设计元素。在上面的设计中，我们能够看到设计师对于重复和对比原则的充分理解和应用。其中，一级导航的样式都很类似，左边是文字，右边是简洁的小图标，每个图标虽然不同，但是风格都是统一的，这正是多样性的重复原则。所以这些父导航按钮会让人感觉是平等而有某种联系的。而当前所在的位置以非常醒目饱和度较高的黄色显示，明显区别于一般状态的导航按钮，让访问者清楚的知道自己当前所处的位置，提高了用户体验并且增强了设计感。子导航既然和父导航不属于同一层次，那么必然要在视觉上和父导航有所区别，所以在背景颜色和文字颜色以及样式上你就能看到这种差别所在。

另外，我将这个导航按钮重新做成了PSD文件，放在这里供大家下载，你可以学习一下如何使用杂色滤镜、图层样式来实现这样细腻的导航菜单，以及如何使用铅笔工具以像素级的标准画出文字旁边那个小小的三角图标并且还要给它应用图层样式。以下是PSD文件预览图。

出处：蓝色理想
责任编辑：bluehearts

上一页 下一页 10个精致的导航菜单欣赏及点评 [2]