5500字干货!帮你快速全面掌握导航组件的使用和设计

精心设计的导航可以帮助用户更快地学习你的产品,知道该做什么,去哪里。

5500字干货!帮你快速全面掌握导航组件的使用和设计

导航可以帮助用户了解他们所处的信息空间:

例如:当前页面有哪些信息和功能可以使用,信息和功能的结构是什么样的,我现在在哪里?我可以去哪里?我从哪里来,如何回去。

路标可以帮助用户了解周围环境:

例如:告知用户当前在哪里,下一步能去哪里。帮助用户保持“发现”,并计划用户的下一步。路标包括页面标题、面包屑、选项卡、步骤条、分页条等。

常见的导航模式:

你的网站使用的导航模式是什么样的?换句话说,不同的页面、功能是怎么相互连接的,用户又是怎么在这些页面与功能之间交互的?

在介绍模式前,先看下常见的导航类型:

一、全局导航

全局导航是指它可以覆盖整个产品路径,往往表现为产品的一级分类。几乎总是显示在网页的顶部或左侧,有时两者都显示(称为倒 L 导航布局),它可以快速带领用户从一个页面到达另一个页面。

例如:华为云的顶部与 ones 的左侧导航。

5500字干货!帮你快速全面掌握导航组件的使用和设计

5500字干货!帮你快速全面掌握导航组件的使用和设计

二、实用导航

通常情况下,实用工具导航都隐藏在功能图标或文字后面,用户必须单击打开它。
例如:当网站的访问者是登录状态时,该网站可能会在其右上角提供一组实用工具导航链接。用户倾向于在那里寻找与用户设置相关的工具:帐户设置、用户个人资料、帮助、退出等。

5500字干货!帮你快速全面掌握导航组件的使用和设计

三、内嵌导航

它们都是在页面内容中或附近的链接。当用户阅读内容或与功能点交互时,这些链接提供了相关的选项。

例如:青云云服务器页面中“文字链接”。

5500字干货!帮你快速全面掌握导航组件的使用和设计

四、相关内容导航

关联导航的一种常见形式是“相关文章”。新闻类产品经常使用这种方法。

例如:优设,当用户阅读一篇文章时,右侧栏或页脚会显示类似主题文章或由同一作者撰写的其他文章。

5500字干货!帮你快速全面掌握导航组件的使用和设计

5500字干货!帮你快速全面掌握导航组件的使用和设计

五、标签导航

通过用户定义或系统定义,链接相关内容的一种方式。特别是在内容数量非常大的情况下。

例如:语雀小记标签导航,可以快速链接到对应标签下的内容。

5500字干货!帮你快速全面掌握导航组件的使用和设计

六、再来看几种常用的导航设计模式

1. 清晰入口点

5500字干货!帮你快速全面掌握导航组件的使用和设计

它是什么:

只显示界面中的几个主要入口点,以便用户知道从哪里开始。对于首次使用和不频繁使用的用户,可以降低学习成本,使用户以任务为导向。

什么时候使用:

如果你正在设计一个新产品,可以使用这个模式,因为用户也是新的。他们都是通过阅读一小段介绍性文字,再开始进行某个任务。 当你的产品大部分用户都已经很熟悉了,最好就不要使用了,因为会导致用户很烦。

例如:钉钉引导帮助功能。

5500字干货!帮你快速全面掌握导航组件的使用和设计

为什么使用:

一个新产品在用户面前就像一片信息泥潭,大量的页面、不熟悉的术语和用词。对于用户来说,这样的产品如果没有提供清晰的起点,用户是很难上手使用。

如何使用:

当用户首次使用产品时,把这些入口点当作进入内容的“大门”。利用这些入口点,逐步引导用户使用,直到用户可以自己使用为止。 这些入口点应该涵盖“人们为什么来到这里”的主要理由。可以只有一个或多个入口点,这取决哪种方式更适合你的设计。视觉效果上,要根据它们的重要程度来显示这些入口。

例如:苹果的 iPad 主页面只做几件事:展示产品,让 iPad 看起来很吸引人,并引导用户获得购买或学习更多信息的资源。与强大、明确的入口点相比,顶部全局导航在视觉上相对较弱。

5500字干货!帮你快速全面掌握导航组件的使用和设计

2. 菜单页

它是什么:

整个页面都是跳转链接,在每个链接上清晰展示对应信息,帮助用户选择。

什么时候用:

你正在设计一个页面,其目的是要成为一个“目录”,以显示用户可以从这里去哪里。用户可能不希望有其他内容干扰,只提供链接就行。这个模式在移动端使用非常多,因为手机屏幕小,需要有效的利用。

5500字干货!帮你快速全面掌握导航组件的使用和设计

为什么使用:

没有任何干扰,用户可以把注意力集中在菜单上。因为整个页面都是菜单目录,用户不被其它内容干扰,使用效率更高。

如何使用:

菜单页适用于大面积展示的页面,菜单名应该简短、利于理解。如果是移动端,目标对象要大点,方便触摸。 有时这些链接会比较多,需要对它们进行分类或按照某种规则进行排序。必要时可以加上搜索框。
例如:58 同城首页

5500字干货!帮你快速全面掌握导航组件的使用和设计

3. 金字塔

5500字干货!帮你快速全面掌握导航组件的使用和设计

它是什么:

使用上一步、下一步将一系列页面关联在一起。这些页面都有一个共同的父级页面,用户在子页面中可以按顺序或随机查看。

什么时候使用:

网站上有一系列的页面,用户想看完一个再看另外一个,有些用户可能会一个个查看或跳跃查看,不过他们最开始需要从一个列表中进行选择。

为什么使用:

这个模式减少了用户访问各个页面时,所要的的单击次数。提高了导航效率,同时也表达了一种更加顺序性的关系。

如何使用:

把所有页面或元素按顺序在父级页面上列出来,并采用合理的排列形式(网格、列表), 在每个具体的子页面上,加上上一步(后退)、下一步(前进)、返回(关闭)的按钮。 金字塔模式虽然是一个循环列表,但有时候用户并不知道自己已经回到了第一页。你可以把最后一页链接到父页面,这样就告诉了用户你已经看完了所以内容。

例如:脸书相册和 teambition 需求页面都是典型的金字塔案例。 脸书相册通过父级页面,可以看到整个相册,选择一张照片将打开幻灯片。照片可以向右、向左切换,或再次退出到父级页面,这些都是导航选项。

5500字干货!帮你快速全面掌握导航组件的使用和设计

5500字干货!帮你快速全面掌握导航组件的使用和设计

teambition 选择一个任务后,会弹出层,在层上可以进行“上一条”、“下一条”切换。

5500字干货!帮你快速全面掌握导航组件的使用和设计

5500字干货!帮你快速全面掌握导航组件的使用和设计

4. 模态面板

5500字干货!帮你快速全面掌握导航组件的使用和设计

它是什么:

只显示一个页面,在用户没完成当前任务前,没有任何导航可选择。

什么时候使用:

你想让页面处在一种没有用户输入就无法继续前进的状态里。

5500字干货!帮你快速全面掌握导航组件的使用和设计

为什么使用:

模态对话框切断了用户选择其他导航的路,用户也不能丢下当前页面不管,必须处理完当前问题后才能回到之前位置做其它事。 这是一个很容易理解和使用的模型,只是经常被拿来滥用。如果用户还没准备好回答模态面板的问题,就打断了用户工作流,可能会使用户随意做出决定。应用得当时,会提高用户的决策效率,因为没其他导航来分散注意力。

如何使用:

在当前页面,用户可以注意到的地方,放置一个按钮。提供按钮请求所需要的的弹框,它能阻止用户打开其它页面。要保证这个页面很简洁,不会影响用户注意力。 而且出口不能有很多,一般只有 1-3 个,保存、取消等。通过这些按钮用户可以快速回到之前页面。

例如:Airbnb 使用了一个弹窗来引导用户登录。弹窗中只能进行:登录,注册,或者点击左上角的“关闭”按钮。

5500字干货!帮你快速全面掌握导航组件的使用和设计

5. 深度链接

5500字干货!帮你快速全面掌握导航组件的使用和设计

它是什么:

把一个网站的当前状态,利用一个超链接地址 (URL) 捕捉下来,这个状态可以保存,或者发送给其他人。当再次打开这个地址时,它将恢复到用户捕捉时的状态。

什么时候使用:

如果网站内容、交互比较多,例如:视频应用、阅读应用,有时候某种特定位置不容易找到,或者需要多个步骤才能到达,又或者有很多用户可以自定义参数,这些都会增加找到特定状态的复杂性。

为什么使用:

深度链接可以让用户直接跳到一个期望的地方,从而节约时间和精力。

如何使用:

把用户当前内容中的位置记录下来,并把它保存成一个 URL。同时也记录支持性数据(评论、标记、数据层等),当重新打开这个地址,会回到原来状态。

例如:在 YouTube 上分享视频最好的方法之一是:在分享链接中嵌入捕捉的点(如图)。收件人点击链接,视频播放将从捕捉这里开始,而不是从头开始播放。

5500字干货!帮你快速全面掌握导航组件的使用和设计

6. 逃生出口

5500字干货!帮你快速全面掌握导航组件的使用和设计

它是什么:

在没有导航的页面上,放置一个按钮或链接,让用户能快速离开这个页面,回到熟悉的地方。

什么时候使用:

当某些页面把用户锁定在一个导航受限的情形下时,例如:搜索结果页、详情页等。

例如:teambition 创建项目,点击进去后全局导航就消失了,只能通过右上角的关闭回去。

5500字干货!帮你快速全面掌握导航组件的使用和设计

5500字干货!帮你快速全面掌握导航组件的使用和设计

为什么使用:

页面受到导航限制,如果不为用户提供一种简单、明显的逃离通道,用户就无法向下探索,这也是安全探索的一种形式。

如何使用:

把一个按钮或链接放在页面上,用户通过这个按钮回到安全区域(之前页面)。

例如:领英的设置页面,这个页面属于独立页面,没有全局导航。如果用户来到这里,有两种方法返回,第一个点击 logo 回到主页;第二个是点击“Back to LinkedIn.com”链接。

5500字干货!帮你快速全面掌握导航组件的使用和设计

7. 宽菜单

它是什么:

在下拉菜单里,显示一个长长的导航列表。用这种方式,展示一级菜单下所有子页面。 需要组织好它们,并设置易于阅读的分类名或排列顺序,依次横向展开。
什么时候使用:

如果网站有很多分类,分类下有很多页面,可能有 3 个以上层级结构。你希望把这些页面入口都展示给用户,让他们随机探索,以便让他们看到更多的选择。

为什么使用:

宽菜单可以让,一个复杂网站的可发现性更好,与让用户慢慢摸索相比,它能展示更多的导航选择。

如何使用:

在每个一级菜单下,提供一列精心组织的链接,把它们进行分组归类,带上分组标题。 视觉上注意风格和样式上与整个网站协调一致,注意配色方案、栅格布局等问题。

例如:华为和微软的产品宽菜单。(如图)。

5500字干货!帮你快速全面掌握导航组件的使用和设计

5500字干货!帮你快速全面掌握导航组件的使用和设计

8. 网站地图页脚

它是什么:

把一个站点地图放到每个页面下面,把它当全局导航的一部分,作为对头部的补充。

什么时候使用:

可能在页头会有一份全局导航菜单,但是不能在这里显示出网站所有的层次结构。 你希望使用一份简单、良好布局的页脚,又不想使用胖菜单模式,因为网站地图实现起来更简单。

为什么使用:

站点地图页脚模式能让一个复杂网站的可发现性变得更好。它们为访问者们提供了更多的导航选择。 当访问者到达页面底部的时候,页脚就是他的注意力所在,通过在这里放置一些有意思的链接,能让用户在这里停留的时间更长,也能发现更多内容。

如何使用:

设计一个和页面宽度相同的页脚,把网站的主要栏目和最重要的子栏目都包括进来(包括:导航、语言选择、社交链接、版权和隐私声明等)。 这样可能形成一份完整的站点地图,重点是要覆盖访问者需要寻找的内容,同时又不会增加页头和侧栏的导航负担。 例如:Salesforce 使用其站点地图来体现客户感兴趣的三个区域(如图)。

5500字干货!帮你快速全面掌握导航组件的使用和设计

9. 步骤条

它是什么:

在步骤过程中的每一个页面上,都显示步骤状态,包括“你在这里”的指示状态。

什么时候使用:

你设计了一个用户可以一页接一页访问的文档、处理过程、向导或其他类似内容。用户的访问路径主要是线性的。

为什么使用:

步骤条可以在以下几个方面帮助用户:他可以看到已经完成的步骤,以及当前的位置 ,接下来还有多少步骤要进行。知道这些信息可以让用户决定是否继续,估算还需要多少时间。

如何使用:

在页面上放置一个步骤条(多于 2 步时使用, 建议不超过 5 步)。如果可以,把它们放在一条线上,或者一个表格的一列上,在视觉上不要和页面的实际内容竞争。 给步骤条的状态进行特别处理,例如:用浅一些或深一些的颜色来标记它,然后对已经访问过的页面进行另一种标记。 如果这些页面或步骤上有数字编号,那么明确使用这些数字编号,它们简短而又容易理解。 同时也应该把页面的标题放到地图上。如果标题很长,可能会让地图非常冗长,尽量缩短这些标题,这样可以让用户得到足够的信息。

例如:B&H(如图)顶部的结账流程步骤条。

5500字干货!帮你快速全面掌握导航组件的使用和设计

10. 面包屑

它是什么:

面包屑是一种特定类型的导航,它显示了从开始到结束的导航层次、路径。

什么时候使用:

你的网站有超过两级以上的层级结构。用户将通过直接导航、浏览、过滤、搜索等方式在这棵树中上下移动,或者直接从别的地方进入一个深度链接。因为层级太深或层级结构太复杂,全局导航不足以显示“你在这里”的位置标记。

为什么使用:

面包屑层级结构显示了,到达当前页面的每一层链接,从应用的顶端一直向下。从某种意义上说,它显示的是整个网站的一个线性切片,从而避免了显示整个地图的复杂性。 就像步骤条一样,面包屑层级结构帮助用户得知他当前的位置。不过,与序列地图不一样的是,面包屑层级结构,不会告诉用户接下来要去哪里,也不会告诉他刚才是从哪里来的,它只关心现在。

如何使用:

在页面的顶部,放置一行文本或图标来表示页面在当前层级结构中的位置。从上级开始,在上级的右边,放置下一级,然后一直往下直到当前页面。在这些层级之间,放一个图标或文本字符一一通常是向右的箭头、小三角、大于号 (>)、斜杠 (/) 或右侧双角引号 (》),来表示从一级往下一级移动的方向。 有一些面包屑层级结构的设计,会把当前页面的标题,显示在层级结构的最后。如果你要这么做,可以让它的外观和前面显示的层次有所区别,因为它们不是链接。

例如:三星官网大量使用面包屑导航,侧面反映了面包屑在大型产品中的广泛使用。

5500字干货!帮你快速全面掌握导航组件的使用和设计

11. 注释滚动条

它是什么:

让滚动条在滚动的同时,还可以作为一种内容的映射机制,或者作为一个位置指示器。

什么时候使用:

你建立了一个以文档为中心的网站,用户会浏览这个网站来查看一些注释,但在快速滚动的时候难以记住当前的位置。

为什么使用:

当页面快速滚动时,很难阅读飞驰而过的文字内容,因此有必要使用一些其他的位置指示器。为什么是在滚动条上?因为它是用户当前的注意力所在。

如何使用:

把位置指示器放在滚动条上,或靠近滚动条的位置。不管动态的指示器还是静态的指示器都可以,静态指示器指的是不会随时间变化的指示器,例如:在滚动条轨迹上的颜色块。 动态指示器将在用户滚动的时候改变内容,它们通常以工具提示的形式来实现。当滚动位置发生变化的时候,滚动块旁边的工具提示显示和内容有关的信息。

例如:Word 滚动时动态显示当前页码。

5500字干货!帮你快速全面掌握导航组件的使用和设计

不管是动态指示器还是静态指示器,你都需要弄清楚用户最可能在寻找什么,从而找出你需要把什么放到注释里。 内容结构是一个很好的起点,如果内容是代码,你可能需要显示当前功能或方法的名字;如果是 一份电子数据表,你可能需要显示行号等等。

例如:Chrome 用搜索结果注释其滚动条(如图)。当你在网页上搜索一个单词时,Chrome 会用颜色突出定位到的单词,并在滚动栏中放置一个黄色指示符。这样,用户就可以直接滚动到文档中的这些点。

5500字干货!帮你快速全面掌握导航组件的使用和设计

总结

精心设计的导航可以帮助用户更快地学习你的产品,知道该做什么,去哪里。不会困惑、迷失方向。导航也是产品生命周期中最长的功能之一,如果设计得好,它将具有“常青”价值。

谢谢观看!

给TA打赏
共{{data.count}}人
人已打赏
设计方法论

6大章节18张图例!带你轻松了解B端数据图表

2023-4-20 18:33:21

设计方法论

设计师要了解的原子设计理论

2023-4-21 8:36:55

个人中心
今日签到
有新私信 私信列表
搜索