是时候重新思考网站导航了吗?

WebFX总统。Bill在互联网营销行业拥有超过25年的经验,专长于搜索引擎优化、用户体验、信息架构、营销自动化等。William在Shippensburg和MIT的科学计算和教育背景为MarketingCloudFX和WebFX的其他关键研究和开发项目提供了基础。

超链接自互联网诞生以来一直是互联网的主要内容。如果我们没有从一个网页链接到另一个网页,网络根本就不是一个网络。链接使网络工作。

所以花大量的时间和精力在我们如何设计我们的链接和导航系统。但是,情况并非总是如此。通常,我们会少找钱信息架构网站建设的一个阶段,然后退回到少数几个经过验证的阶段设计模式-一个罐装模板-用于设计网站导航。

网站导航的现状

网页设计的众多美妙之处之一就是我们有近乎无限的选择。然而,我们的导航系统似乎仍然被困在现有的预制解决方案中。对于小型的个人网站,一个简单的顶部水平导航栏是典型的选择。

对于有更多页面链接的大型站点,我们默认使用堆叠的垂直导航栏,以便包含更多链接。在其他情况下,我们发现使用下拉菜单或飞出菜单来保持导航菜单的紧凑。下拉菜单上谷歌主页。

很容易理解为什么我们有这些选择。在某种程度上,由于早期网页设计的限制,我们不得不遵循这些规则。随着时间的推移,我们的用户已经习惯了现状。

因此,我们一直在犹豫是否要重新考虑导航系统的设计方式。即使我们没有把用户放在第一位,当陈腐的解决方案起作用时,为什么还要花时间创造新东西呢?(至少我们认为他们是这样的。)但是这些传统的导航方式仍然是最好的解决方案吗?

自然进化

自成立以来,网页设计在不断发展以快速的步伐。我们的设计变得更容易使用,体验更愉悦,功能更丰富,速度也得到了更好的优化。通过这些变化,我们对导航的习惯保持不变,也许除了我们看到的一些完全基于flash的网站引入了一些非常独特的导航系统设计之外。

这个Flash网站放弃了我们在大多数网站中看到的常见导航设计模式。虽然我们有很多理由来避免回到完全使用Flash构建网站的时代——无论你的理由是与性能、SEO、网页可访问性、独立于专有技术等——但对于我们的大多数项目来说,我们仍然可以从Flash网站展示给我们的东西中获得一些灵感,特别是在重新思考网站导航的外观和功能方面。

随着网页浏览器的功能越来越广泛,以及网页设计规范的不断进步——最近的进步是CSS3而且HTML5-我们的设计机会越来越多。当我们利用这些新技术来改善用户体验时,网站导航应该是我们考虑的首要问题。我们已经看过了CSS3在行动在某种程度上,最显著的是响应网页设计这将根据用户显示的大小(在媒体查询的帮助下)实时改变导航菜单的布局。

在“被遗忘的总统”站点上,导航布局根据显示尺寸从水平变为垂直。

改变的目的

当然,为了改变而改变是一个糟糕的借口。我们不应该仅仅因为我们有工具就改变导航系统的设计和布局。相反,我们应该通过研究导航设计中存在的问题,以及如何使用现有的新技术来解决这些问题。

一些更大的问题涉及到诸如导航应该位于哪里,它应该有多广泛,它由什么形状组成,以及它将向用户提供什么样的反馈。所有这些都会导致重大的决策,这些决策在设计的可用性、灵活性和实用性方面发挥着关键作用。新蛋网提供使用多种导航解决方案导航其庞大产品库存的能力。

导航的新面貌

CSS现在可以做一些完全令人兴奋的事情,这是许多设计师的天性尝试并推动创新的边界.例如,博客作者和网页开发者Chris Coyier表示我们可以画画自适应的形状这可以超越图像的可伸缩性限制。平面设计师/网页开发者Alex Girón向我们展示了我们可以用他的作品创建令人印象深刻的动画效果和转换关于太阳系轨道的实验

这个可能性示例展示了一些相当令人印象深刻的能力。不用很长时间就可以看出,这些实验可以应用于实际解决设计问题。有了形状,以及赋予它们动画的能力,我们就有了构建模块来创建灵活而富有想象力的界面。

离线的灵感?

我们不用走多远就能看到导航系统的新变化。我们的电脑、音响、电器、车辆,甚至我们的键盘都使用各种各样的形状、大小和颜色来建立交互。

键盘上的空格键并不比其他键大,因为它包含更多的字符。它被使用的最多,所以是最大的一个应用Fitt定律来源:维基百科例如,比较空格键和Y键的大小。

在你的网页设计中,可以首页链接(或任何其他经常使用的导航链接)也从一个不太重要的链接上获得同样的大小提升?我们的音响系统接收器、遥控器和汽车仪表盘上的接口都有各种各样的大小、形状和颜色,以表示重要性和功能的差异。我们有能力在不牺牲灵活性和可访问性的情况下,在我们的网页界面中创造这些解决方案,这是我们远离它们的传统原因渐进增强以及其他最佳实践。

为了说明我的观点,我放了一个简单的例子早期ipod风格的导航系统,只用HTML和CSS。iPod插图的Matthieu Riegler, Wikimedia Commons在现实中,与矩形相比,圆形通常可以提供更方便的空间使用。此外,我们的导航的所有活动区域彼此之间的距离自然相等,这种类型的导航是一致的费茨定律

当然,对于任何单一情况,这可能是最好的解决方案,也可能不是,但这就是我们这个职业的魅力所在。设计师应该花时间和考虑探索每个项目带来的所有限制,并制定出个性化和理想的解决方案。

抓住新机会

现在,我们比以往任何时候都更有机会利用我们的创造力来解决导航系统的复杂问题。CSS3的快速采用释放了巨大的设计潜力。我们可以跳出有限的网站导航设计模式来思考。

相关内容

WebFX职业

加入我们的使命,为全球企业提供行业领先的数字营销服务——同时建立您的个人知识和个人成长。

我们招聘! 视图30 +职位空缺!