6种实验性的网页导航模式,激发你独特的设计灵感

不同的导航模式对于网站的影响不尽相同,针对不同的内容、不同的用户,你需要仔细挑选导航模式。


不同的导航模式对于网站的影响不尽相同,针对不同的内容、不同的用户,你需要仔细挑选导航模式。

6种实验性的网页导航模式,激发你独特的设计灵感

虽然绝大多数的设计都遵循设计规则和用户的使用习惯,但是标新立异的设计仍然非常有市场。独特的设计更容易让人难忘,这一点是毋庸置疑的。在网页的导航栏设计上,也是如此。随着越来越多的网页开始采用加粗的非衬线字体置于网页顶部作为导航,许多有想法的设计师开始有意识的打破这一规律,别出机杼,采用不一样的导航模式。

当然,如果你的网站用户量大,并且需要尽量降低用户的使用门槛,遵循常规的设计更合适。如果你的网站是更加偏向实验性的小网站,有趣而好玩的导航模式,反而更适宜于用户探索。不同的导航模式对于网站的影响不尽相同,针对不同的内容、不同的用户,你需要仔细挑选导航模式。

实验性的导航并不具备泛用性,但是如果你在追求别具一格的设计,那么下面这些独特的导航设计应该能激发你的灵感。

1、侧边栏导航

6种实验性的网页导航模式,激发你独特的设计灵感

侧边栏导航的设计多种多样,它可以是静态的也可以是动态的,宽度可大可小,几乎可以随心所欲地进行设置。

但是如果你仔细审视会发现,它不仅仅是单纯的将原本的顶部导航旋转90度放到侧面就好了,对于正常的上下滚动的页面而言,常驻的侧边栏导航意味着整个页面其他部分的长宽比和以往截然不同了。

所以,不论侧边栏导航的宽窄如何,你都需要重新审视,尤其是它在不同尺寸、比例的屏幕下的显示效果,并且进行合理的重设计。同时,导航中的文字如果太长,在侧边栏中还存在展示上的问题,那么你要怎么解决呢?

需要考虑的问题非常之多。

最优的导航设计通常都不会使用太长的词汇,并且占据的空间也相对固定。导航项目最好不要太多,如果导航栏需要滚动浏览那就太过了。上面Sanctum 的案例就做的足够简单干净,当用户滚动浏览的时候,导航会停留在对应的位置,并且随着背景而改变色彩。

这个案例的优秀之处在于,它的导航和背景融为一体,它的设计会促使用户先查看图标和名称,再纵向滚动页面浏览。

2、隐藏和弹出式导航

6种实验性的网页导航模式,激发你独特的设计灵感

汉堡图标的流行让隐藏式导航大行其道,而隐藏式的设计所带来的另外一个结果就是弹出式导航。

在桌面端上,隐藏/弹出式导航很少会占据整个屏幕,而在移动端设备上,为了保证可用性,不少的弹出菜单会选择做成全屏式的。

隐藏/弹出式导航严格意义上算不上是非常实验性的设计,但是它可以玩的非常多样。对于一部分用户而言,汉堡图标并不是那么直观,也不够熟悉。设计师可以在弹出效果、样式和位置甚至图标样式上,多花点心思,玩出花头。

上面 Caava Design 这个网站的弹出式导航非常有趣。在绝大多数的设计师还在使用扁平而简单的弹出样式的时候,他们走的更远。这种设计让用户更容易注意到关键的信息,引导用户浏览信息。

3、水平滚动

6种实验性的网页导航模式,激发你独特的设计灵感

当你首次浏览一个需要水平滚动的网站的时候,体验会非常的奇怪。首先它的物理和视觉运动方向和常规的纵向滚动不同,而且当你使用鼠标滚轮滚动的时候,这种交互的错位感会极其强烈。

想要让水平滚动式浏览更加自然,设计师需要加入视觉线索来帮助用户导航,强化浏览逻辑和体验。使用箭头和定位式导航效果会非常不错。

上方 Norgram 这个网站就使用了部分图片作为视觉引导,向用户暗示屏幕侧面还有更多的内容可供浏览。视觉线索的存在,使得内容结构和滚动方向显得统一而自然。

4、无导航模式

6种实验性的网页导航模式,激发你独特的设计灵感

有些网站摒除了导航这个模块,而是选择将所有的内容平铺在整个页面之上。这种设计其实挺棘手的,因为如何页面所承载的内容过于复杂的话,这种模式可能会让用户觉得无所适从,难以下手。

无导航模式其实最适合一些小型的、目的直接而简单的网站,比如一些“Comming Soon”的网站页面,就不需要导航。还有一些特定工能的小网站,只需要简单的滚动浏览,几乎不需要太多点击就能完成信息的获取。

结合简单的动画和动效,这样的无导航的网页也可以非常有趣。不过总的来说,这样的设计会让人觉得缺了点什么。

5、带标记的单页式设计

6种实验性的网页导航模式,激发你独特的设计灵感

许多优秀的实验性的网页设计都采用单页式设计作为主要载体。而这种选择也是有道理的:用户不会在单页式设计中迷失。

而与此同时,长单页设计中,用户需要通过不断向下滚动来浏览信息,浏览到什么程度,用需要通过标记、目录和进度条这样的视觉标识来判断,而这本质上和导航的功能异曲同工。

在上面的Socius 页面的右侧,使用了许多同类网站都采用的小圆点来作为视觉标识,当光标悬停在小圆点上的时候,会有信息浮现,告诉用户这些区域的内容。同样的,用户可以通过点击这些小圆点快速跳转到特定的区域。

当你采用这样的设计之时,技巧在于尽量让导航定位快一些,利索的切换能够让整个体验更加令人舒适。

6、微妙的边缘导航

6种实验性的网页导航模式,激发你独特的设计灵感

和侧边栏导航不同,这种完全旋转90度到右侧的文字导航,设计的更加微妙,通常出现在小型的作品展示型的网页上。就像上方这个名为S的网站。

这种风格的导航只会使用文字,并且条目通常会非常少,字体也相对会少。这种导航元素会随着界面、元素的变化而发生改变,甚至在某些界面中会消失。

和侧边栏式的导航相同,这样的边缘导航也会影响到整个界面比例,不过总体上是很微妙的,这种影响非常小。

结语

在导航设计上,绝大多数的设计师都愿意遵循传统的设计。不过,今天所谈及的这些实验性的设计,也越来越多的出现在新的网站设计上,也许你会在将来的设计趋势文章当中看到这些元素。

 

原文作者:CARRIE COUSINS

原文地址:designshack

译者:@陈子木

译文地址:http://www.uisdc.com/experimental-navigation-patterns

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/23200/

(0)
CatherineCatherine
上一篇 2017-05-04 10:56
下一篇 2017-05-04 13:14

相关推荐

  • 什么是好UX?有哪些主要评判标准?

    这可能是UX领域没有人能真正全面回答的问题,我也只是根据经验给大家分享一下自己的看法。本文将从UX为出发点,阐释了什么是好的UX并与大家分享了UX界的一些新观点。

    2017-05-17
  • 如何机智地向外行人解释交互设计到底做什么的

    破除对交互设计师的三大误解,交互设计师不等于视觉设计师不等于美工,且不会几分钟做个logo,机智向外行解释交互设计师到底做什么

  • 极有可能被低估的三种有趣的网页设计趋势

    设计出不同凡响的网站是许多设计师一直追求的事情,所以大家着迷各种时尚的元素,漂亮的配色,流行的趋势,复古的样式,等等。经过时间验证的经典设计、固定的搭配是不错的选择,而逐步展露头角的新趋势,则能更好的满足这一需求。

    2017-05-26
  • 打造有温度的H5动画:用户的故事将会被如何演绎

    2016年末,各路APP也纷纷展开一轮轮的数据厮杀,从不同的视角阐述过去一年的精彩故事。而坐拥庞大用户数据的QQ空间,在这个既难忘又不舍的2016年,用户的故事将会被如何演绎,在寒冬带给用户怎样的温暖回忆呢?

    2017-05-11
  • 聊聊2017年即将流行的UX设计趋势

    2016马上就要过完啦,我们来回顾下今年用户体验都发生了哪些大事,并通过回顾过去来展望2017年的用户体验将会有哪些趋势。“可用性”这个词本身变得不那么重要了。它不那么需要我们了。“聊天机器人”是我们行业中最热门的术语之一,如果你还没有,我们很有信心你将很快建立一个。但对话式界面的未来是什么样子?但后退一步:是不是每一个界面都是用户和机器之间的对话?未来的交互不是由按钮组成的。公司不只需要一个界面,而且设计师也不只通过设计工具来完成他们的工作。苹果手表和Alexa可以让用户不碰手机的情况下使用Uber。虽然这可能听起来很简单,但它为人们对技术的期望设定了基调:完全连接和无处不在的体验。作为设计师,我们如何将所有的拼图连接在一起?我可以向Alexa请求Uber乘车,在我的Apple Watch上接收预估时间,与Messenger上的朋友分享费用,并在我的手机app上评分吗?技术应该尽可能不被注意到。——Amber Case,Calm Tech从《黑客帝国》,到《她》和《黑镜》,人类总是幻想生活在虚拟现实的世界。随着数字世界变得更加真实,我们需要采取的行动来实现这些体验。设计VR不应该意味着将2D实践转移到3D,而是应当寻找一种新的范例。 ——Jonathan Ravaz我们一直在听的问题:设计师应该写代码么?设计师画原型吗?设计师应该写文案吗?至少有几十篇文章试图回答这些问题,所以我们现在可能更接近一个确定的答案:这些都可以。今天,UX设计师可能会身兼数职。当我们开始为我们的自动化生活进行设计时,我们首先需要自动化我们的工作。我们将与机器人一起设计。多样性和伦理是今年用户体验中最重要的两个主题。许多设计师之所以从事UX,是为了更好的改变人们的生活。我们可以找到这么做的关键点么?设计并不是一件附属品。我们的工作影响着人们的生活。设计可能失败,但设计师不能。如果你的公司只是为了赚钱,也许你应该找一个更好的公司。这不是你的错,但这是你的责任。—— Alan Cooper,Ranch Stories talk

    2017-05-14
  • 译文 | iOS 10 人机界面设计指南 (完结)

    iOS10发布了,苹果遵循了一切从简但又增加了一些提升用户体验的功能,比如向开发者开放了更多接口,设计者又如何跟随iOS的步伐做好产品设计呢?本文是系列文章的完结篇,enjoy~Note
    模板图片(template image)会丢弃图片本身的色彩,而采用图片视图使用的色调。请参阅UIImage中的UIImageRenderingModeAlwaysTemplate。TIP  对于多行或是多样式的文本输入,请使用文本视图。请参阅Text Views。

    2017-05-02
  • 优秀的UI/UX设计师需要具备哪些技能?

    互联网时代,企业对设计的要求越来越高,也越来越多样,那么成为一名优秀的设计师应该具备哪些技能呢?

    2017-05-12
  • 阿里交互新手小记 | 交互工作流程的梳理

    头疼就是脑子里有什么正在激烈地进行改变,可能就是你从困难上学会的东西。—— 写这篇文章的人

    2017-05-23
  • 三招两式讲需求,看完你们也懂需求了

    美国一家市场研究公司通过分析101家科技创业公司的失败案例,总结出了创业公司失败的20大主要原因,排名首位的就是:No Market Need!据统计42%的失败创业公司出现过这个问题,创始人执着于执行自己的创意,却没有…

    2023-03-03
  • 5个优质的设计师导航网站汇总

    作为一名设计师想要设计出比较优秀的设计作品(包括网页设计和移动APP设计),除了拥有熟练的设计技能外,还需要拥有出众的创造力和审美。当然,如果你也有非常强的临摹能力也是不错的。 如果你对生活和万事万物没…

    2015-12-23