最近小编看到大家都在讨论分类信息导航_查看地图导航相关的事情,对此呢小编也是非常的感应兴趣,那么这件事究竟是怎么发生的呢?具体又是怎么回事呢?下面就是小编搜索到的关于分类信息导航_查看地图导航事件的相关信息,我们一起来看一下吧!

分类信息导航(查看地图导航)人人都是产品经理2021-05-24 16:16:20

编辑导航设计关系到产品的信息架构,合理有效的B端导航设计有助于引导用户,帮助用户快速便捷地获取信息。在本文中,作者从产品设计交互的角度详细介绍了B端导航设计。让我们看一看。


【资料图】

你好,正在B端打拼的朋友们,你们是不是经常因为面对各种形式的导航而无从下手,还是因为看过很多案例而对导航设计的要领和精髓毫无概念?

没关系。今天我们就来解决这个困扰我们很久的B端设计难题,结合案例从交互的角度对导航做一个立体的分析。

如果你准备好了,请系好安全带,现在开始。

探索一个概念,需要知道它的精确定义,才能开始研究。导航的精确定义可以描述为:它是一种信息分类,帮助用户找到想要的信息,完成预期的任务。

如果你觉得这个定义很抽象,那么不妨从这个角度去理解。如果界面上的任何功能都可以找到我们物理世界中的隐喻,那么导航就会绘制路标、指南、路线图等。在我们的物理世界里,因为基于它的功能,导航的功能就是告诉用户你从哪里来,你在哪里,你能去哪里。

所以我们对导航的控制更加精准,所以请大家快速回答我一个问题。你能告诉我以上六个不是导航的内容吗?

2

一个

好公布答案。如果你的答案是2和6,恭喜你。你对航海的理解非常好。2和6的名字大家都很熟悉,就是menu。但是不夸张的说,日常工作中还是有很多同学不知道两者的区别,那么如何有效区分呢?

同样,从定义开始,参考上一节导航的定义,菜单是:它是一种帮助用户快速实现某种功能的动作的分类和 *** 。也就是说,当你点击菜单的某一栏时,你会立刻产生一个特定的动作,而导航就是信息的分类和收集。

1.航海分类

考虑到这一点,我们可以对导航进行分类。

一提到导航的分类,你就会脱口而出一堆词比如:顶部导航、底部导航、左侧导航、方向舵导航、tab导航、菜单导航...没错,这的确是一个分类,但只是外观维度上导航的分类,并不是我们今天从交互和结构层面讨论的重点。

基于结构的导航分类怎么样?更科学地说,是以下几类:

全球导航;

本地导航;

辅助导航;

嵌入式导航;

友好导航;

远程导航。

下面我们一步步来分析这六种导航。

1.全球导航

所谓全局导航,就是能够覆盖整个产品的路径,往往表现为产品的一级分类(而且大多数情况下是一级分类)。不一定包含全局信息,但一定可以让用户去到目标的关键节点。

2.本地导航

所谓局部导航,是指在同一个框架中对该节点的上下级访问,这种访问必须存在于严格的父子关系中。

3.辅助导航

所谓辅助导航,就是给用户提供一个全局/局部导航无法到达的相关内容的快捷方式(这个快捷方式在本产品中)。

4.嵌入式导航

所谓嵌入式导航,也叫上下文导航,是指嵌入在页面本身内容中的导航,通常带有上下文超链接、引导式搜索等。

5.友好导航

所谓友好导航,就是能够为用户提供一种便捷的前进方式,需要的时候找到入口信息,不需要的时候通常会隐藏起来。

6.远程导航

所谓远程导航,就是不包含在产品结构中,而是以独立的方式存在于产品中,通常以网站地图、索引表(地址选择、品牌选择)等形式存在。

7.导航的常见用户界面表达式

从结构层面了解了导航的基本类型后,我想提一下导航的外观。这里需要知道的是,导航的出现遵循“同构而相异”的原则。这是什么意思?

同一个结构(比如同一个数据集:商品、商品名称、商品价格)可以嵌套成不同的外观,比如卡片、列表、明细……这个要看具体的业务情况和使用场景。

常用的导航外观基本分为以上七种外观:菜单栏、树表、顶栏、标签页、面包屑、文本链接、步骤。

二、导航提示

了解了导航的结构分类和使用场景,不妨给大家一些关于导航本身的小技巧,作为解决实战中一些问题的原则性参考。

1.导航应该尽可能的平坦和稳定,即使要多点击一次。

稳定性对于B端产品非常重要!由于B端产品对用户使用和学习的成本和门槛较高,如果你频繁修改和调整其路径,用户很容易因为产品不符合操作习惯和心智模型而对产品滋生负面情绪。对于产品本身来说,需要尽可能避免这样的伤害。

2.更好扩大一下。

从稳定性方面来说,我们需要保证导航的变化不会因为产品的变化而有很大的变化。

举个很简单的例子,当我们产品的功能增加,尤其是二级导航的项目增加,原来横向布局的导航不得不改成纵向布局的导航,这叫因产品变化而产生的巨大变化。所以在选择导航布局的时候,要为以后的拓展打好基础。

3.清晰可见,易于操作。

这是从外观和交互的共同层面来看的。导航的尺寸必须足够大,位置必须足够清晰,让用户能够在视觉反馈的层面上保证对用户的友好。

其次,相对于内容区,所有的交互区都需要一个积极的响应,可以称之为界面的热情。这也是一个优秀界面的自我修养。

4.导航项目可以重复。

一个页面允许两个主导航,同一界面允许两个相同的导航项目。并不是说一个条目在导航中只能出现一次,也没那么死板。

5.不要给用户惊喜。

这对于To B的设计非常重要,不同于To C的产品,B端产品的一个重点就是满足用户的预期,所以一定要避免“这个设计就是为了好玩”的想法。

6.导航的反馈需要一致。

隐喻可以在所有界面布局、所有组件、所有控件和所有模式中找到。例如,单词链和带有“跳转”的单词链代表不同的隐喻,因此我们需要赋予它们不同的外观和交互响应,以向用户提供反馈。

7.导航不一定要分层次

回到导航最初的定义,它的本质是将信息分类,让用户快速完成任务,这也是导航的工作。

很多时候,我们不必拘泥于这个项目应该严格存在于哪个层次的想法,而是如何根据用户的需求,合理地将这个项目划分到最合适的 *** 中。

8.按权重排列的三种导航风格

这是一个基于外观的点。根据大量的案例研究和眼动测试,市面上最常见的导航按照信息权重布局可以分为:横向、纵向和垂直。由于不讨论这部分,我们在上图中直接梳理了各种布局的特点、优缺点和应用场景。

三步或六步导航设计方法

知道了上面的分类和注意事项,下面我们就用一个具体的案例来深入体会一下导航的交互设计(因为这个内容很精彩,涉及到保密,所以这里就不具体展示了,用示意图的方式来描述)。一共六个步骤,看看这是不是也是你工作场景中的一个头疼的问题。

1.了解每个导航项目的定义。

有必要搞清楚导航项的定义,因为导航项的定义决定了你的目标界面是什么。所谓目标界面,就是导航带你去哪个分类信息的地方。

那么我们先来梳理一下导航中各个导航项的接口定义,这也是我们日常工作中整理导航非常重要的一步。

问题一列,我们自然会有各种各样的疑问。例如,导航分类之间存在一些现有的流程关系,但有些分类不属于该流程。为什么?

比如有些导航类别和导航项目名称相同,但内容不同。这是为什么呢?(想想这是不是我们工作中经常遇到的问题)?这些都是我们后期需要优化的地方。

2.了解用户的使用路径。

保留以上问题,我们来做第二步。在这一步,我们需要搞清楚用户的使用路径,因为这样才能对任务产品进行一级分类。

通过基于不同角色的用户体验图,可以得到不同的用户操作路径,因此可以顺利得到这套操作流程的大框架。

基于业务中的任务链接,推导出每一步的操作路径,这样我们就可以将用户的操作路径细化为一级导航。

3.区分权限。

我拿到了一级导航,需要角色的权限进行区分,这也是B端产品的本质属性。

于是我们对每个导航项的角色权限进行了梳理,然后一级导航中每个导航类别对应的角色瞬间一目了然。

据说用户登录不同权限的产品,可以看到不同的内容。这是一个优秀的带权限导航设计。

4.区分接口数据的性质。

到这一部分,对于一些完全没有接触过数据的同学来说,可能很难理解。我们首先需要知道的是:“同一个数据源可以帮助我们区分接口的性质,同一个数据源往往有一组相同的接口包围着它。”

这里需要记住三个概念:

元数据:数据属性的信息,用于支持指示存储位置、历史数据、资源搜索、文件记录等功能。,比如一个商品和一个客户;

Set:指定在数据库中检索到的数据集,如订单清单、发货清单;

关系列表:成对描述对象之间的关系。比如你我是朋友,你我在同一个企业微信群。

于是我们对导航项的数据属性进行分类,也就是说,同一数据类型的实体往往围绕着某个元数据,包含一系列接口。我们在这里整理的时候发现,数据属性相同的实体(这里可以理解为导航项)似乎被归类在一起,这是我们分类的一个依据。

根据相同的数据性质,将导航项分类到应分类的二级导航中。这个时候,相对于原版,我们的一级二级导航通过改版已经比较清晰了。

5.了解用户使用的频率。

这一步其实很好理解。很简单的规律:“高频是次佳显示,低频是次佳显示,重量减轻甚至隐藏”。这是为二级导航中每个导航项的排列而设计的。

在这里,我们不妨将频率从高到低量化如下:实时关注、每日关注、每月关注、很少使用、很少使用。分别用五角星形、三角形、长方形、圆形、菱形来表示。

一般来说,我们可以通过两种常见的方式来识别使用频率:用户研究和数据掩埋,这里就不讨论了。

所以我们可以把使用频率作为一个新的参考放在导航条目的表格里,这一点瞬间就清楚了。

根据使用频率调整每个导航项目的顺序。

6.设计合适的导航布局

这一步涉及到外观。让我们回顾一下前面三种常见的导航布局。根据产品操作的复杂程度等综合要求,我们选择了第二种形式作为最终形式。

四。结论。

以上是本期从交互层面对导航的分析和拆解。我很高兴你能看到结局。以上内容可以作为你日常设计分析的思维模板。希望对你有启发和帮助。让我们为奋斗在B端的小伙伴们加油吧。下次见!

本文由@ Ribbon原创发布。每个人都是产品经理。未经许可,禁止复制。

来自Unsplash的图像,基于CC0协议。

收集3条评论。

关键词: 分类信息