当前位置:首页 > 观点

网站创新导航增强用户体验的6种方式

2019-12-31

设计导航有两个方面:如何构造内容,以及如何将结构呈现给用户。显然,这些不是分开的,并且结构(通常)有助于表示。

导航涉及策展(即使可能已经确定了需要包括的内容),该内容是如何组成,如何相互关联以及用户如何在它们之间移动的内容。

菜单无论采用哪种形式,都为导航提供路标。它告诉用户他们在网站上的位置以及如何到达其他地方。

 

约翰·加尔

约翰·加尔 John Gall)可能以其书籍封面设计而闻名,他的网站以此为荣除了标准菜单外,我们还有“平装本”网格,每个网格都是可单击的缩略图,可打开有关所选项目的信息。带有他首字母缩写的缩略图可打开有关他的信息。

如果您想使用这种方法,请确保所展示的作品质量最高

这是一个非常简单的基本设计,无论在视觉上还是行为上。除了有关每件精选作品的最简短信息以及外部和社交媒体链接之外,它的文字内容很少。这个网站是关于工作的全部;如果您需要意见和解释,那么还有其他地方。

但是,它并不感到冷漠,过于正式或缺乏个性。这样的导航不会感到困难或晦涩。内容就是导航,它给人以动手,身临其境的感觉。

遗憾的是,由于桌面行为被屏幕顶部的上一个,下一个和索引按钮所取代,因此在移动设备上有点令人失望。令人失望的是,桌面行为在移动设备上可以很好地运行。

这种剥离式的样式很难完全拉开,因为它完全取决于作品的质量。如果要使用这种方法,请确保所呈现的作品质量最高。


 

约旦撒种

Jordan Sowers的作品集网站是导航工作缩略图的另一个很好的选择。在这里,图像彼此叠加,用户滚动以移动整个堆栈。单击任何项目都会打开一个模态,其中包含更多图像和一些详细信息。滚动到最底端会显示出最简短的职业和联系信息。

至少就用户所知,移动设备上的行为是相同的,这很高兴看到。

由于每个模态还包含指向所有其他内容模态的链接,以及关闭按钮,因此所有内容都可以在任何地方立即访问。导航简单明了,易于使用,但与通常的导航有所不同,使该网站令人难忘。通过模仿轻拂一堆实物投资组合印刷品的动作,不仅可以简单地单击按钮,还可以唤起用户的参与感。

实际上,网站设计的巧妙之处以及优美的执行效果,给它所展示的任何作品都留下了深刻的印象。


 

开放大陆

Open Continents收集了来自世界各地的短片,并且缓慢旋转的地球构成了导航的基础。左上方的图标可在Globe导航和简单的水平链接列表之间切换视图。

该列表为用户提供了一个更简单的过程,但似乎缺乏信心。可访问性是提供简化选项的一个很好的理由,但是就可访问性而言,此处两者之间几乎没有什么区别。地球下面的指令还表明对导航设计缺乏信心,或者也许是对用户的情报缺乏信心。

导航永远都不应如此晦涩,以至于用户无法自己解决

这真令人失望。导航永远都不应如此晦涩,以至于用户无法自行解决,但事实并非如此。不需要帮助。动画地球仪看起来像是要与之互动的。在没有传统菜单的情况下,用户将浏览屏幕。

移动版本不使用旋转地球仪,而是使用(这是垂直的)故事列表进行滚动和选择。

一方面,在这里使用地球仪似乎很明显,但是效果很好,而且做得很好。“探索”地球会产生一种联系感;土地上可见的光以及地球上空的云层是吸引用户的迷人细节。其效果是让您仿佛置身于故事所在的国家。


 

Glamuzina建筑师

Glamuzina Architects使用整个主页作为菜单,其中三个主要部分的链接分布在屏幕上。项目主页列出了特色项目,包括文本链接和大缩略图。

由于整个页面都是菜单,因此无需在移动设备上诉诸汉堡菜单。尽管在布局上存在一些必要的差异,但移动体验在视觉上与台式机一致。

总体而言,这里的体验很好,菜单也很有趣,并且与网站的整体外观完美融合。但是,有几个问题会稍微降低您的注意力。

到处都有导航的混乱感,浏览不同的项目很容易迷失方向。不过,这并不是真正的问题,因为每个页面都有指向其父部分页面和主页的链接。

更具问题的是,外部链接和一些(非菜单)内部链接会在当前窗口中打开,除了浏览器后退按钮之外,没有其他返回方法。充其量,这会中断内容流,导致脱节的体验,最坏的情况是使用户离开站点。

用户可以告诉浏览器在新选项卡或窗口中打开链接,但实际上他们不必这样做。

尽管如此,它仍然是一个不错的网站。点纸背景和等宽字体的使用创造了一种剥离的,骨架的感觉,使作品真正脱颖而出。导航和菜单大胆,以开放而不是线性的方式呈现现代感。


 

负责任的导航

到目前为止,精选的网站都是用来展示创意作品的,这自然允许甚至要求采用更具创意的方法。那更多的企业风格网站呢?

为丹麦航运公司创建了“负责任的导航”,以概述其成员为减轻航运业对环境的影响所做的工作。因此,它涉及许多事实和数据,尽管这些事实和数据很重要,但却可以构成相当干燥的内容。

该网站的内容被组织成一个页面,并分为多个部分,并提供了阅读更多内容或案例研究的链接。每个部分都可以滚动到菜单或通过菜单访问。

设计达到了同时成为公司和人的难以捉摸的效果

菜单的视觉提示来自Danish Shipping的徽标,该徽标代表DK的莫尔斯电码(丹麦的ISO 2字母代码)。开头的加载动画成为菜单,指示现在可以浏览该站点了。通过将鼠标悬停在文本上并在向下状态下更改颜色,菜单破折号在功能上既清晰又视觉上极少。

在移动设备上,使用了汉堡菜单图标,但在这种情况下,它实际上符合整体视觉样式。 

这个网站在组织和展示内容方面做得非常好,并且吸引了动画爱好者。因为动画主要用于增强导航(定义节标题并向菜单移动),所以它是有目的的,而不仅仅是装饰性的。

架构经过精心设计,整体感觉井井有条,井井有条,清晰。菜单添加了一个有趣的元素,其动作让人联想到鱼在游泳,而该节的标题动画类似于波浪。结果,设计达到了同时成为公司和人的通常难以捉摸的效果。


 

萨格迈斯特与沃尔什

这最后一个不是创新导航的例子,但是它确实令人信服。在大多数情况下,该站点在粘性页眉中使用了一个相当沼泽的标准水平菜单,在需要的那些页面上,第二级菜单在其下方向下滑动。到目前为止,特别是当它更改为在移动设备上显示为hamburger-icon-opens-to-list的列表时。

主页上有个有趣/有点古怪和不舒服的地方。Sagmeister&Walsh办公室的一部分可以看到外观和工作情况,例如顶部添加了菜单按钮。 

如果您在格林尼治标准时间上午9:30首次看到此页面,则至少是这样。在美国东部标准时间上午11:30再次查看它,您将意识到那些“按钮”是发光的迹象,并且您看到的是真正的人在工作,生活(几乎)。单击右侧将更改视图,以显示办公室的另一部分,并且在桌面的前部绘制菜单。

高端网站设计,它根本没有增强导航功能,但令人难忘。坐在电脑前的办公桌旁看着别人坐在电脑前听起来很奇怪,但我保证即使5分钟也能做到。以前的网站都介绍了用户参与的级别,但这完全在另一个级别上。您实际上是在看着它们工作。

免费获取报价

  • 29923329

  • 杭州市丰庆路498号北软智慧科创大厦203

  • 0571-85815193

  • pady@1t2.cn

网站地图 版权所有 © 2008-2021 杭州派迪科技有限公司  Copyright © 2008-2020  www.hzpady.com  All Rights Reserved    浙ICP备14029905号-1     公安备案:33010802008411    软著登字第3457658号