【鲜货案例】那些隐藏菜单配合导航图标的网站设计

有个疑问：的插入图片在哪？

原文地址：http://mp.weixin.qq.com/s?__biz=MjM5MDk0MDM0MA==&mid=204594073&idx=1&sn=7d35bf156a74fe61c974e06a081791cd#rd

在网页设计中使用导航图标这一趋势正迫使我们再度审视导航菜单、它们在设计中的位置以及在用户体验中的角色。尽管这一理念并没有弱化其在导航方面的意义和重要性，但其能够给设计师和开发人员带来更多的创意空间。

根据项目的不同，导航图标彼此区别很大，但是其中大多数会偏向于使用流行、简单、贴合移动端的三行图标，这一类图标外观漂亮，而且在几乎任何环境下都比较带感。这个小图标能够用来隐藏小菜单，也能够隐藏复杂、内容量大的菜单。

如果再给打开过程配合上动态化的功能或细微但吸引人的效果，那么这种古朴的图形更能优化设计。另外，其不仅能够应用于各类导航（明确传达信息），还能帮助解决响应性方面的问题，并促进与移动网站的结合。

下面是一些采用隐藏菜单配合导航图标的网站设计，都是鲜货。

eWebDesign

本例中，我们可以看到大量的图像背景和视差效果。菜单图标放置在大标题的右上角，打开后有非常详尽的导航菜单指向其他板块。

Sampedro

标题栏的显眼图片和诙谐的slogan，这二者的组合能够绝对地吸引用户的注意。隐藏导航栏有效地以不突兀的方式将重心从导航栏转移到了复杂的背景上。

Chapoleone

Chapoleone采用了华丽的照片背景，流露出奢华精美的感觉。在这里如果用综合式的导航栏就会破坏整体的冲击力，因此左上角隐藏在小图形后方的滑出菜单绝对相得益彰。

Maecia

Maecia通过其诱人的动态效果和精美的背景将好奇的人带入了其作品。为了不让网上的访客迷乱，其主页采用了鼠标单击打开的隐藏导航栏。

Brand Junkie

漂亮的圆形复古风格logo非常抢注意力，让人第一眼就难以忘记。导航图标与整体环境完美贴合，甚至第一眼都找不到，要过几秒钟才能慢慢映入眼帘。

Intelart

Intelart美妙的暗色首页完美运用了背景与前景的对比。其左上角无缝贴合的汉堡按钮与logo和文字完美回应，以美妙的方式呈现出了一副以图片为核心的精美导航栏。

Monograph

Monograph的导航图标完全不像是习惯上的三行按钮，但是这一有趣的方式却使其成为了整体环境的重要组成部分，与其他内容完美结合。

Camp David Film

尽管主导航栏习惯性地占据了标题栏的位置，但公司团队却巧妙地隐藏了二级导航栏。二级导航栏可以让用户进一步通过分类探索网站，节省了大量的空间以便展示漂亮的照片。

Michael Villeneuve

Michael Villeneuve选用了非常简约又方便操作的风格。通过结合俏皮的轮廓线图形、吸引人的小动画和简洁的实心彩色背景，其营造出了美妙而独一无二的用户体验。

Alt_Cph14

Alt_Cph14拥有独一无二绝对能够抓住人注意力的外观。其数字化的设计匹配了很多脉冲干扰效果，外加扎眼的蓝色单色背景营造出了鲜明的印象。简单原始的汉堡按钮与整体主题相得益彰。

The First 50 Years of Bose

首页整齐地分为两个板块，可以用鼠标单击激活，包含了多种动画控制方式。汉堡按钮用肉眼几乎看不见，但又是整体作品的关键部分，其可以作为网上读者的方向标。

结束语

导航图标能够完美补充和丰富不同的网站设计。不管是要让用户关注设计图片的作品集，还是关注以文案为主导的网站首页，其都在其中占有很重要的一席。乃至让用户在浏览网站过程中不至迷失。

译自外文网：Designmodo