网页设计10个精致的导航菜单欣赏及点评

这个例子中的导航和我上一篇日志《强质感高光风格网页欣赏及其表现手法总结》中提高的风格比较类似，技术方法也非常简单，你可以去那篇日志中下载我做好的PSD文件，学习一下如何实现这样的效果。

五、温暖柔和的画面

导航菜单周围一圈略深于背景色的描边让导航和背景融合的更加自然。整个导航的颜色和底部的大约10个像素的阴影让整个导航条看上去更像是电脑键盘上的一个个按键。这个案例设计师提供了PSD文件，你可以自己尝试一下创建这样的导航效果。

下载

六、细节决定成败

这和苹果系统上程序图标上的数字提醒很像。虽然这样的数字提醒放在导航上非常漂亮，但是实际功能性却值得商榷，但它不妨碍我们学习到一点，那就是即使这样简单的导航，在细节上也是十分讲究的，从那小小的2字的圆形背景上你就能看得出来。图层样式中的高光、阴影、渐变、描边一个都不能少。另外为了和灰色页面的色调搭配，这些数字背景的红色、黄色和蓝色都选择了饱和度偏中间调的颜色，因为灰色本身也是介于黑色和白色中间的色调。

下载

七、有关主题的创意

这是一个有关电影剧场的网页设计。所以设计师在导航部分使用了这种类似于电影票的纸质的背景图片，并且添加上了水迹的笔刷效果，让细节更为丰富。在导航条的右下方，还加上了淡淡的阴影，让其和页面保持一定的距离，加强了导航菜单的纸质的感觉。有关这样的阴影的创建，你可以在《在photoshop中创建内容盒阴影效果》这篇日志中找到详细的方法。和案例1类似，创建一个这样的关于电影剧场的网页设计，如果展开联想的话，你会有很多关于电影剧场的设计上的创意，这种以电影票为导航背景只是其中的一个例子而已。

八、自然质朴的布制风格

两条水平的白色虚线和一条灰色的垂直线仿佛是缝在布上的线脚。这种风格给人一种自然以及手工的感觉。创建这样的线脚并不难，直接用文字工具键出虚线，调整字体、大小以及间距就可以了。关键点在于页面边缘弯折的那部分，要注意绿色带子弯折后的透视关系，需要将其向下移动一定的距离。

九、让色彩从页面跳出

在偏向于黑色的页面背景上有这样鲜亮的绿色跳出会非常吸引视觉注意力。再加上好像用大头针钉在页面上的独特样式，更是和页面本身增强了对比，所以如果这样的下拉菜单展开的话，你会忍不住将鼠标移动到其它菜单上试试效果，如果同时你能关注到导航内容的话，设计者的目的就达到了。

十、互补色营造鲜明视觉

细腻的斜纹背景创建起来非常简单，只需用铅笔工具以1像素的粗细创建好图案，保存后在图层样式中应用图案叠加就可以了。关于这种背景的创建我在之前写的《在Photoshop中创建多种样式的网格背景图案》这篇文章中详细讲过，你可以参考这篇日志自己动手创建。

这里值得一提的是案例中的冷色背景色和暖色的文字和图标颜色的使用，橙色和青绿色属于互补色，青绿色作为背景色饱和度很低，而橙色的饱和度非常高，通过对比让图标和文字看上去非常醒目同时又非常和谐。所以如果你打算在设计中使用互补色的话，不要同时调高两种颜色的饱和度，这样会使视觉向两边拉扯，而应该有所主次，通过将一种颜色的饱和度降低，再加入相应的白色或者黑色和另外一种饱和度较高的颜色搭配，就像这个案例向我们展示的那样。