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

http://www.itjxue.com  2015-08-07 20:46  来源:未知  点击次数: 

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

(责任编辑:IT教学网)

更多