以下内容由Mockplus团队翻译整理,仅供学习交流,Mockplus是更快更简单的原型设计工具。
“如果用户在导航上遇到困难,他们通常会犹豫是否要回到网站上。”
大多数人可能有过这样的体验,当你打开了一个APP,由于没有导航或者导航设计不合理,你花费了很多时间去寻找你需要的东西。那么你很可能不会逗留在这个页面,甚至不会再想使用这个网站。
那么你如何创造出“清晰,简单,一致”的导航呢?
让我们来模拟一个场景,你在一个星期天的早晨出门去买自己喜欢的巧克力。走进商店,你首先会看到墙上挂着各类商品区的名称。( 因为它们足够大,你可以在商店的任何地方看到它们。)
“哦,应该是食品杂货区!”你心想,一边朝着那个方向走,一边去购买你正在寻找的巧克力。
再来一次,我们使用完全相同的场景,进行较小的更改。这次没有任何商品区的名称,你就会对这些巧克力的位置一无所知。
现在,把商场看作是你设计的Web应用程序,而你是访问Web应用程序的用户。
当你访问一个网页APP时,你会经历和去商店一样的过程,你通常会试图找到一些东西。然后你会明白:
“用户永远不会认为他们有必要记住在网站中的访问路径。这里应该有一个导航,它应该放在顶部,而且是非常明显的位置。”
网站和商场的一个区别在于,前者没有任何人站在你的身边,告诉你寻找的东西在哪里。在网页上,代替寻找方向的功能是搜索——在搜索框中输入你想搜索的关键词,然后返回到可能出现的地方的链接列表。
在Web应用程序中,你可以通过一个有层次结构的导航来引导你。
通常,在一个Web应用程序的固定位置会有一个保持静态的导航栏(全局导航),其他主要分区导航下都可能有一个子导航栏。
导航的两个主要目的是显而易见的:
帮助我们找到我们正在寻找的东西,并告诉我们我们在哪里。
但导航也有一些同样重要且很容易被忽略的功能:
向用户展示网站内容
通过使层次结构可见,导航可以告诉我们该网站呈现包含哪些部分。而对于用户来说,展示这款应用的具体内容可能比引导或快速定位更重要。
告诉用户如何使用该网站
如果导航是有效的,它会提示你从哪里开始,以及你的选择是什么。如果操作正确,它应该会提供你需要的所有指令。(这听起来不错,因为大多数用户无论如何都会忽略其他指令。)
加强用户对网站建立者的信心
每当我们进入一个网站时,我们都会好奇:“这些家伙知道他们在做什么?”这是让我们回到Web应用程序的主要因素之一。
结构清晰,精心设计的导航是网站创造良好的第一印象的最佳机会之一。
如何创造“清晰,简单,一致”的导航?以下是Web的基本导航惯例:
全局导航是什么?为什么要创建它?
Web设计人员使用术语持久导航(或全局导航)来描述出现在应用程序的每个页面上的一组导航元素。
持久化导航一般会以平静而令人舒服的口吻提示你:
“这里是导航部分,有些区域会根据你在Web应用程序中所处的位置而有所变化,但它会一直在这里,并且始终以同样的方式为你服务。”
持久化导航就像商店里各区域的名称一样,不管你在哪里,如果你想知道你身在何处,你只需抬头仰望看看商店名称。你就可以快速找到自己喜欢的巧克力。
只要导航保持一致的外观出现在每个页面的相同位置,你就能立即确认你仍然在同一个应用中 -这比你想象的重要得多。(行为科学)在整个应用程序中保持一致意味着你只需要弄清楚它是如何工作的。
分区导航 – 一个关键部分
分区导航 - 有时称为主导航 - 是应用程序主要部分的链接,即应用程序层次结构的顶层。
在某些设计中,持久化导航还包含显示二级导航的空间,即当前导航部分的子列表。
在其他情况下,指向一个分区名称或点击它会显示一个下拉菜单。而且在某些情况下,点击将带你到该区域的首页,在那里你会发现二级导航。
面包屑导航 – 你的坐标
面包屑导航就像“你在这里”的坐标一样,它可以显示你在一个Web应用程序上的位置。
面包屑导航,顾名思义,它们不会占用太多空间,但能提供给用户一个方便快捷的方式来做你最需要做的两件事情:返回上一页或者回到主页。
这个导航之所以被称为面包屑导航,是因为它们让人想起童话故事"汉赛尔和格莱特“。当汉赛尔和格莱特穿过森林时,不小心迷路了,但是他们发现在沿途走过的地方都撒下了面包屑,这些面包屑帮助他们找到了回家的路。
面包屑导航会显示从主页到你所在的位置的路径,并可以轻松地在应用程序的层次结构中移回到更高级别。
在很长一段时间里,面包屑导航仅仅应用于APP中,在这些APP中的应用实际上只是存储大量的数据,但现在它们在UI / UX中也是必需的设计元素。
以下是实现这些导航的最佳实践
1. 把它们放在顶部
如果将他们放置在页面的顶部,面包屑导航可以很好地发挥作用。我认为这可能是因为设计师使它们与页面边缘结为一体,使他们看起来更自然,就像书籍或杂志的页码一样。
2.级别之间使用“>”
多次的试验和失败总结似乎表明,级别之间的最佳分隔符是“大于”操作符(>),可能是因为它在视觉上显示了向下移动的效果。
3.最后一栏加粗
列表中的最后一栏应该是当前页面的名称,并将其加粗,从而突出其应有的重要性。因为这是你当前使用的网页,所以它自然也不会是一个链接。
选项卡
选项卡是少数几个在用户界面中实际使用物理隐喻的例子之一。它就像是三环活页夹中的标签分隔符或文件抽屉中的文件夹标签,可以将任何东西分成不同的部分。通过点击它的标签(或者,在Web上点击它),你可以很容易地打开其中某个部分。
如果你还沉浸在购物中心和巧克力的例子中,那好。标签就类似于商场某一个部门里的货架,他们可以帮助你精确定位商品。你可以在不同的货架上看到不同种类的巧克力,供需要的人购买。
我认为它们是一个非常棒的导航选择。以下是为什么我喜欢它们的原因:
1.浅显易懂
我从来没有见过任何人(不管是不是“计算机文盲) 看了标签的界面会说:“嗯,我不知道那些标签是干嘛的?“
2.显而易见
当我做可用性测试时,令我很惊讶的是,用户往往会忽略网页顶部的水平导航栏。但是选项卡在视觉上非常独特,因此很难被忽略。而且除了导航,它们很难被误认为是其他什么,所以它们成功创建了导航和内容之间的那种显而易见的划分。
3.并非华而不实
网页设计师总是在努力让页面更具视觉上的趣味性。但如果设计得当,选项卡也可以更加精美,并提供有用的功能。
结论
理解导航可能很困难,但要想实现它更加困难。但是无论你设计,你都必须确保你的导航能带给用户最终想要看到的东西。这很重要,因为他比你想象中更希望“买到喜欢的巧克力“。
如果你是一名UI / UX设计师,你使用的是哪种导航风格呢?
作者:Aakriti Chugh
地址:https://uxplanet.org/designing-navigation-labels-and-breadcrumbs-2a6220bb0cc6
扫描二维码,关注 “摹客” 微信公众号