网页导航设计:让你的网站导航更扎实更清晰

核心提示：Apple 2007:2007的导航彻底改变，采用灰色系的质感表现，网页导航设计:让你的网站导航更扎实更清晰(4)，apple logo细致的质感替代了原有的单色处理手法，去除了tab式二级导航，让你的导航更扎实，更清晰，首页运用全屏banner突出介绍新产品，apple的文案也是被人津津乐道的经典

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链接