三、每一个元素都是有用的

想象我们从一张空白的白色文档开始设计一个页面的导航。首先添加链接文字，为了让文字颜色和白色的页面对比不过于强烈刺眼，我们决定不用黑色而使用灰色。这里我们将文字行距拉开，让留白区域更多一些，目的是让页面保持透气感和干净的感觉。

各个导航栏目如果只是文字的话看上去过于类似，所以为了让它们在保持相似性的同时而有所区别，我们给每一个栏目的左侧添加上了风格简洁的图标，选择这种风格的图标一是符合页面本身干净的感觉，另外一点的考虑是图片和文字内容的关联性。我们不打算让图标比文字还吸引眼球，所以我们让它们保持比文字还浅的灰色。白色的页面上如果仅仅放上导航内容的话感觉结构不够整齐，因为没有实际上的线条来束缚视线，所以这里我们给每一个导航栏目添加非常浅的灰色水平线和垂直水平线，这种隐隐约约的线条既可以加强排版，还不至于让页面看上去条条框框过多，阻碍视线的游走。

接下来就是鼠标悬停的效果了，这要和菜单本身的状态有较大的视觉差别，所以这里我们将文字和背景颜色更改为清爽的绿色和灰色，灰色是为了让整个页面的颜色统一，而绿色是唯一跳出整个灰色页面的颜色。这样就让页面在颜色上有了亮点，而不至于让人感觉页面上灰蒙蒙的一片。背景的材质上添加了杂色，这样看上去更加柔和，而不是光亮的冷冰冰的感觉。这基本上就是我们设计这个导航的整个考虑过程。

这样你就看到了，这里的每一个元素和细节的应用都是经过充分考虑的，而且没有一个多于的东西无缘无故的存在，这就是简洁风格的设计理念。

四、强质感的高光风格

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

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

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