( 图示出自： Apple.com)

　　8.动态菜单 (Dynamic menus)也叫浮出菜单，下拉菜单或者弹出菜单。用户须与其产生交互行为，菜单才能显示。常用的交互是鼠标悬停或点击。

　　( 图示出自： Amazon.com)

　　9.下拉框导航 (Drop-down menus)利用下拉菜单的特性，当选定某一项或多个选项，即将用户带到新的页面。

　　( 图示出自： Dell.com)

　　10.标签云 (Tag clouds)所列链接按字母排序，按照标签热门程度确定字体的大小和颜色。标签云的设计者是交互设计师Stewart Butterfield。首先使用标签云的是Flickr。

　　( 图示出自： Flickr.com)

　　03 导航设计之视觉设计

　　Apple常常成为设计界追随的风向标，他们的每次视觉的更新或者迭代都会引发互联网的争相模仿。这里，收集了Apple从1997年以来视觉层面更新比较关键的截图，不仿从apple.com中历年的变化来看看导航及网站的视觉体系的迭代。

　　Apple 1997:

　　从下面的截图，视觉层面上大家有些难以辨别出它出自苹果。当时界面主要是些文字链组成，导航只有简单的垂直菜单。

　　Apple 1998:

　　导航的系统logo的颜色换成了灰色，玻璃质感的渐变也做了不少的调整。还有值得注意的是iSync面板的金属拉丝质感。

　　Apple 2004:

　　导航系统的视觉设计仍然保持微调的状态中。整体依然没有太大的变化。

　　Apple 2007:

　　2007的导航彻底改变。采用灰色系的质感表现。apple logo细致的质感替代了原有的单色处理手法。去除了tab式二级导航。

　　首页运用全屏banner突出介绍新产品。apple的文案也是被人津津乐道的经典。

　　Apple 2010:

　　Apple 2011:

　　Apple 2012:

　　纵观2010-2012的导航，以产品的维度划分导航结构。用产品的本身的名称命名，用户进入网站能直入自己想要了解的产品。

　　从尺寸大小，到标签的命名，甚至是顺序都没有做变化。主要变化的导航的视觉层面和search框。

　　视觉上：1)主体导航从灰色单一渐变到深灰色质感渐变到暗灰色的质感渐变。

　　2)相反的是Apple logo 质感一路从简，从富质感的到简单的灰白渐变。

　　3)标签字体和搜索icon反白处理，逐渐和深色的背景拉开层次。

　　search框：1)将search框和导航从视觉层面上结合在一起，整体设计。不再简单的白底处理。

　　2)只保留搜索icon，去除“Search”

　　3)tab宽度增加，压缩search框宽度。鼠标click后，搜索框自动展开，区别出搜索框default和输入的使用状态。

　　每次以普通用户的角度去使用apple.com，都有一种快速高效的感觉，能第一时间让你感受到它想告诉你什么，它最近又哪些变化刚好是你想知道的。想找一个记忆中的东西并不难，search是最后一个利器。每一个配色，每一个像素的把控，每个文案的精彩都值得设计细细的 品味。

　　以上是我在设计导航时遇到一些盲点和发现积累。在这次诚信中国改版的项目中被讨论最多的就是导航，从结构组织到信息层次，从交互形式到视觉样式。讨论到最后大家对导航的概念已经模糊，常常在每次的讨论ending中自问：到底什么是导航?为什么要导航?导航只能长这样么?。在做设计的过程中，要经常对交互控件的基本概念究一究来源，会让自己清晰的多。这里只是把我在设计导航的过程中遇到疑惑和想法小结一下，希望对大家在设计导航时有些许的帮助。

　　一个好的导航的关键是，能否解决问题。切忌“冥想”导航，让你的导航更扎实，更清晰，更有意义。

　　参考资料：

　　1. 部分图文参考了《Web 导航设计》 作者: James Kalbach 译者: 李曦琳

　　2. 卡片分类法–维基百科

　　移步查看—->Blog链接 http://blog.163.com/lan_lan_321/blog/static/13787885720124915148408/

　　来源：http://www.aliued.cn