分类信息导航(地图导航)人人都是产品经理2021-05-24 16:16:20
编辑设计与产品的信息架构有关。合理有效的B端导航设计有助于引导用户，帮助用户快速便捷地获取信息。在本文中，作者从产品设计交互的角度对B端导航设计进行了详细的介绍。让我们一起来看看吧。
各位奋斗在B端的朋友们，你们是不是经常在面对各种形式的导航时觉得无从下手，是不是因为看了很多案例还是没能抓住导航设计的要领和精髓？
没关系。今天就让我们一起来解决这个困扰我们很久的B端设计难题，结合案例从交互的角度对导航做一个立体的分析。
如果你准备好了，请系好安全带，现在就离开。
探索一个概念，需要知道它的精确定义，才能开始研究。所谓导航的精确定义可以描述为:它是对信息的分类，帮助用户找到想要的信息，完成预期的任务。
如果你觉得这个定义很抽象，那么不妨从这个角度去理解。如果说界面上的任何一个功能都可以在我们的物理世界中找到隐喻，那么导航就映射了我们物理世界中的路标、指南、线路图等等，因为基于它的功能，导航的功能就是告诉用户你从哪里来，你在哪里，你可以去哪里。
由此，我们对导航有了更准确的控制，所以请快速回答一个问题。能告诉我以上六个内容哪些不是导航吗？
三
2
一个
好的。如果你的答案是2和6，那么恭喜你，你对航海的理解非常棒。2和6的名字想必大家都很熟悉:菜单。但是不夸张的说，在日常工作中还是有大量的同学搞不清两者的区别，那么如何有效的区分呢？
同样，从定义开始，参考之前导航的定义，菜单是:它是一种帮助用户快速实现某种功能的动作的分类和 。也就是说，当你点击菜单中的某一栏时，会立刻产生一个特定的动作，而导航就是对信息的分类和收集。
一.导航的分类那么考虑到这一点，我们可以对导航进行分类。
说到导航的分类，大家都会脱口而出顶部导航、底部导航、左侧导航、方向舵导航、标签导航、菜单导航等一堆词汇...没错，这的确是一个分类，但只是外观维度上导航的分类，并不是我们今天从交互和结构层面讨论的重点。
导航基于结构的分类呢？从科学上讲，是以下几类:
全球导航；
本地导航；
辅助导航；
嵌入式导航；
友好导航；
远程导航。
下面我们一步步来分析这六种导航。
1.全球导航所谓全局导航，是指它能够覆盖整个产品的路径，往往表现为产品的一级分类(而且大多数情况下是一级分类)。它不一定包含全局信息，但它肯定可以让用户前往其目标的关键节点。
2.本地导航所谓局部导航，是指在同一个框架中对该节点的父子访问，这种访问必须存在于严格的父子关系中。
3.辅助导航所谓辅助导航，就是给用户提供一个全局/局部导航无法到达的相关内容的快捷方式(这个快捷方式在本产品中)。
4.嵌入式导航所谓嵌入式导航，也叫上下文导航，是指嵌入在页面本身内容中的导航，通常伴随着上下文超链接、引导式搜索等。
5.友好导航友好导航是指能为用户提供便捷的前进方式，需要时能找到入口信息，不需要时通常会隐藏起来。
6.远程导航所谓远程导航，就是不包含在产品结构中，而是以独立的方式存在于产品中，通常表现为网站地图、索引表(地址选择、品牌选择)等。
7.常见的用户界面导航形式从结构层面了解了导航的基本类型后，顺便提一下导航的外观。这里就不说了。我们需要知道的是，导航的出现和使用都遵循着“同构而相异”的原则。这是什么意思？
相同的结构(例如，相同的数据集:商品、商品名称、商品价格)可以嵌套到不同的外观中，例如卡片、列表、细节...这个要看具体的业务情况和使用场景。
常用的导航外观基本分为以上七种外观:菜单栏、树表、顶栏、tab、面包屑、文字链接、步骤。
二、导航提示了解了导航的结构分类和使用场景，不妨给大家一些关于导航本身的小技巧，作为解决实战中一些问题的原则性参考。
1.导航应该尽可能的平坦和稳定，即使需要多点击一次。稳定性对于B端产品非常重要！由于B端产品对用户使用和学习的成本较高，如果你频繁修改和调整其路径，用户很容易因为产品不符合操作习惯和心智模型而滋生对产品的负面情绪。对于产品本身来说，需要尽可能避免这样的伤害。
2. 能方便扩张。从稳定性方面来说，我们需要保证的是导航的变化不会因为产品的变化而有大的变化。
举一个很简单的例子，当我们产品的功能增加，尤其是二次导航的项目增加，横向布局的导航不得不改为纵向布局，这叫做因产品变化而产生的巨大变化。所以在选择导航布局的时候，需要为以后的拓展打好基础。
3.清晰可见，易于操作。这是从外观和交互的共同层面来看。导航的尺寸一定要足够大，位置一定要让用户足够清楚，保证在视觉反馈的层面对用户友好。
其次，所有的互动区都需要有积极的响应，这是和内容区相比较而言的。可以称之为界面的热情，这也是一个优秀界面的自我修养。
4.导航项目可以重复。一个页面中允许两个主导航，同一界面中允许两个相同的导航项目。并不是说一个条目在导航中只能出现一次，没有那么死板。
5.不要给用户惊喜。这对于To B的设计非常重要，和To C的产品不同，B端产品的一个重点就是满足用户的期望，所以一定要避免“因为有趣而设计”的想法。
6.导航反馈需要一致。界面上所有的界面布局，所有的组件，所有的控件，所有的模式都可以找到隐喻。比如文本链和带“跳转”的文本链是不同的隐喻，我们需要赋予它们不同的外观和交互反应来进行反馈。
7.导航不一定是分层的。回到导航最初的定义，它的本质是将信息分类，让用户快速完成任务，这也是导航的工作。
很多时候，我们不必拘泥于这个项目应该严格存在于哪个层次的想法，而是如何根据用户的需求，合理地将这个项目划分到最合适的 中。
8.根据权重布局的三种导航风格这是一个基于外貌的点。根据大量的案例研究和眼动测试，市面上最常见的导航按照信息权重可以分为横向、纵向和横向。因为不展开这部分，所以直接在上图中梳理出各种布局的特点、优缺点和应用场景。
三步或六步导航设计了解了上面的分类和注意事项后，下面我们用一个具体的案例来深入体验一下导航的交互关卡设计(因为这个内容很精彩，涉及到秘密，所以这里就不展示了，用示意图的方式描述)，一共分为六个步骤，看看这是不是也是你工作场景中很头疼的问题。
1.找出每个导航项目的定义。有必要明确导航项的定义，因为导航项的定义决定了你的目标界面是什么。所谓目标界面，就是导航带你去的分类信息。
那么我们先来梳理一下导航中各个导航项的接口定义，这也是我们日常工作中整理导航非常重要的一步。
问题一列，我们自然会有各种各样的疑问。比如导航分类之间有一些流程关系，但是有些分类不属于流程。为什么？
例如，有些导航类别与导航项目同名，但内容不同。这是为什么(想想这是不是我们工作中经常遇到的问题)？这是我们后面需要优化的地方。
2.了解用户的使用路径。保留以上问题，我们来做第二步。这一步，我们需要找出用户的使用路径，因为这样，我们才能对任务产品做好一级分类。
通过基于不同角色的用户体验图，可以得到不同的用户操作路径，因此可以顺利得到这套操作流程的框架。
基于业务中的任务链接，推导出每一步的操作路径，这样我们就可以把用户的操作路径提炼为一流的导航。
3.区分权限我拿到了一级导航，需要角色的权限才能进行区分，这也是B端产品的本质属性。
所以我们对每个导航项的角色权限进行了梳理，然后一级导航中每个导航类别对应的角色瞬间清晰。
还有，用户用不同权限的账号登录产品，可以看到不同的内容。这是一个优秀的带权限导航设计。
4.区分接口数据的性质。在这一点上，对于一些完全没有接触过数据的同学来说，可能有些困难。我们首先需要知道的是:“同一个数据源可以帮助我们区分接口的性质，同一个数据源的周围往往有一组相同的接口。”
这里需要记住三个概念:
元数据:数据属性的信息，用于支持指示存储位置、历史数据、资源搜索、文件记录等功能。，比如一个商品和一个客户；
记录集:指定在数据库中检索到的数据集，如订单清单、发货清单；
关系列表:描述对象和对象之间的关系，比如你和我是朋友，你和我在同一个企业微信群。
所以我们对导航项的数据属性进行分类，也就是说，同一数据类型的实体往往围绕着某个元数据，包含一系列接口。当我们在这里整理完之后，发现数据性质相同的实体(在这里可以理解为导航项)似乎被归类到了一起，这是我们分类的一个依据。
根据相同的数据属性，导航项目应归入二级导航。这个时候，我们不妨和原版对比一下。相对来说，我们的主次导航通过改版已经清晰很多了。
5.了解用户使用的频率。其实这一步很好理解，就是一个简单的规律:“高频是 的展示，低频减轻重量甚至隐藏”。这是为二级导航中每个导航项的排列而设计的。
在这里，我们不妨将频率从高到低量化为以下几个概念:实时关注、每日关注、每月关注、很少使用、很少使用，分别用五角星、三角形、长方形、圆形、菱形来表示。
一般我们可以通过两种常见的方式来识别使用频率:用户研究和数据掩埋，这里不讨论。
所以我们可以把使用频率作为新的参考放入导航条目的表格中，瞬间一目了然。
根据使用频率调整每个导航项目的顺序。
6.设计合适的导航布局。这一步涉及到外观。我们来回顾一下之前导航的三种常见布局。根据产品操作复杂度的综合要求，我们选择了第二种形式作为最终形式。
四。结论以上是本期从交互层面对导航的分析和拆解。我很高兴你能看到结局。以上内容可以作为你日常设计分析的思维模板。希望能对你有所启发和帮助。在B端奋斗的小伙伴们，加油。下次见！
本文由@核糖原创发布。每个人都是产品经理。未经许可，禁止转载。
图片来自Unsplash，基于CC0协议。
收集3条评论