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

WebFX总裁。Bill在互联网营销行业拥有超过25年的经验,专注于搜索引擎优化、用户体验、信息架构、营销自动化等领域。威廉在希彭斯堡和麻省理工学院的科学计算和教育背景为WebFX市场上的CyrdFX和其他关键研究和开发项目提供了基础。

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

因此,花大量的时间和精力在如何设计我们的链接和链接上是有意义的导航系统。

但是,情况并非总是如此。很多时候,我们都会扣钱信息架构一个网站建设的阶段,并回落到为数不多的尝试和真实之一设计模式-一个固定模板-用于设计网站导航。

站点导航的现状

网页设计的许多优点之一就是我们可以选择几乎无限的选项。然而,我们的导航系统似乎仍停留在现有的预成型解决方案中。

对于小型个人网站,一个简单的顶部水平导航栏是典型的选择。

对于有更多页面可链接的较大站点,我们默认使用堆叠的垂直导航栏,以便能够包含更多链接。

在其他情况下,我们发现下拉菜单或弹出菜单用于保持导航菜单的紧凑性。

上的下拉菜单谷歌主页。

很容易理解为什么我们有这些选择。在某种程度上,由于网页设计的早期限制,我们不得不遵守这些规则。

随着时间的推移,我们的用户已经习惯了现状。因此,我们一直不愿重新思考导航系统的设计方式。

即使我们没有把用户放在第一位,当老套的解决方案奏效时,为什么还要花时间创造新的东西呢?(无论如何,至少我们认为他们是这样做的。)

但是这些传统的导航方式仍然是最好的解决方案吗?

自然进化

自成立以来,,网页设计不断发展以很快的速度。我们的设计越来越易于使用,体验也越来越愉悦,功能也越来越丰富,速度也得到了更好的优化。

通过这些变化,我们的导航惯例保持不变,也许除了我们看到的完全基于Flash的网站的短暂激增之外,这些网站引入了一些非常独特的导航系统设计。

这个Flash站点放弃了我们在大多数网站上看到的常见导航设计模式。

虽然有很多理由可以避免回到完全使用Flash构建网站的时代——无论你的理由是否与性能、SEO、网页可访问性、独立于专有技术等有关——但对于我们的大多数项目,我们可能仍然能够从Flash网站向我们展示的内容中获得一些灵感,尤其是在重新思考网站导航的外观和功能时。

随着web浏览器的功能越来越广泛,以及web设计规范的不断发展——最近的一次是CSS3HTML5-我们的设计机会扩大了。

当我们利用这些新技术来改善用户体验时,网站导航应该是我们最关心的问题。

我们已经看到CSS3正在运行在某种程度上,最显著的是响应性网页设计根据用户显示的大小(借助媒体查询),动态变换导航菜单的布局。

在站点上,导航布局根据显示大小从水平更改为垂直。

有目的地改变

当然,仅仅为了改变而改变某些东西是一个糟糕的借口。我们不应该仅仅因为有工具就改变导航系统的设计和布局。

相反,我们应该通过查看导航设计中存在的问题,以及如何使用我们可用的新技术解决这些问题来处理这种情况。

一些更大的问题涉及到导航应该位于何处、它应该具有多大的扩展性、它由什么形状组成以及它将为用户提供什么样的反馈。所有这些导致了巨大的决策,这些决策在设计的可用性、灵活性和实用性方面起着关键作用。

新蛋提供了使用多种导航解决方案导航其庞大产品库存的能力。

航海的新面貌

CSS现在可以做一些完全令人兴奋的事情,这是许多设计师的天性试验和推动创新的边界.

例如,博客作者和网络开发者克里斯·科伊尔(Chris Coyier)展示了我们可以画画自适应形状这可以超越图像的可伸缩性限制。

图形设计师/web开发人员Alex Girón向我们展示了我们可以用他的技术创造出令人印象深刻的动画效果和变换涉及太阳系轨道的实验.

这个可能性示例展示了一些令人印象深刻的功能。不用多久就可以看出这些实验可以实际应用于解决设计问题。

有了形状和动画的能力,我们就有了创建灵活和富有想象力的界面的积木。

离线灵感?

我们不必走多远就能看到新的航行转折。我们的电脑、立体声音响、家用电器、汽车,甚至我们的键盘都使用各种形状、大小和颜色来构建交互。

键盘上的空格键不比其他键大,因为它包含更多字符。它被使用得最多,所以它是最大的一个应用程序菲特定律.

资料来源:维基百科

例如,将空格键的大小与Y键进行比较。在您的网页设计中链接(或任何其他经常使用的导航链接)也可以从比不太重要的链接更大的尺寸中获益?

我们的音响系统接收器、遥控器和汽车仪表盘上的接口都包含各种尺寸、形状和颜色,以表示重要性和功能的差异。

我们有能力在我们的web界面中设计这些解决方案,而不牺牲灵活性或可访问性,这是我们远离它们的传统原因,使用渐进增强以及其他最佳做法。

为了说明我的观点,我提出了一个快速示例早期一代iPod启发的导航,仅使用HTML和CSS。

iPod插图作者Matthieu Riegler,维基共享媒体

实际上,与矩形形状相比,圆形通常可以提供更方便的空间使用。

此外,由于我们的导航活动区域之间的距离自然相等,因此这种类型的导航与费茨法则.

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

利用新的机会

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

相关内容