两年前写的一篇关于导航菜单的文章帮助许多学生进入 B 端设计领域。然而,两年过去了,行业在不断发展,文章中的许多观点并不适用于当前的 B 端设计环境。如今的 B 端设计越来越受到重视,所以最近打算深入挖掘之前不太过时的文章内容。就像游戏行业的翻拍版一样,我们可以翻拍导航、筛选、表格等文章。这一次,拥有一个强大的 B 端设计工具也是很重要的。如果你准备好了,我们就一起来看看吧~
1、导航的定义:什么是导航?
现实世界中,我们在寻找东西时会有很多“导航”的指导。例如,如果你想在购物中心找到一个浴室,你会在购物中心查看道路指南。如果你想在超市找到一瓶旺仔牛奶,你会先找到饮料分区,然后根据内容分类再找。如果你想在图书馆找书,也可以根据楼层、类别、书架号一步一步找到。这其实是生活中的“导航”。
判断一个内容是否为导航,会有以下依据。
是否起到功能链接的作用:
导航主要是帮助用户快速访问不同页面的系统。产品是在实施项目中的筛选操作,也就是我在项目中参与的、我管理的、所有项目都归档了。它只是提高了重要的数据筛选水平,所以不是导航。
而一个产品的知识库管理下的三个内容模块,分别是概览、页面组、与我共享、配置中心。显然,功能链接起到了作用,所以可以概括为导航。
这里需要补充一下,导航和筛选其实本质上是因为标签页面。
是否有导航结构组织页面:
为了使导航具有明确的结构,以终端系统为例,主要包括主导航、子导航、全局导航和一些辅助功能。在核心内容上,主次差异主要存在,可以明确引导用户进行导航。
操作需要改变页面:
在许多情况下,导航很容易与菜单、操作混淆,在设计时,我们需要把这两种情况单独拿出来,例如 Keynote、Sketch 在里面,我们经常把工具栏和导航混为一谈。工具栏显示当前视图相关操作的常用命令和控件。本质上是操作的集合。而且导航是指导页面结构,本质上需要跳转到其它页面,因此存在明显的差异。
2、了解各大设计系统的“导航”
不同的团队对导航组件的定义有不同的要求。首先,我们来看看大家都很熟悉的。 Ant Design,在 Ant Design中,我们会在导航目录下对锚点、面包屑、下拉菜单、导航菜单、分页、步骤进行分类,整体规划相对全面。
而 Arco Design 相对简单,将面包屑、下拉菜单、菜单、页头、分页、步骤条分类到导航中,显然他们目前使用的内容已经总结到导航中。
SAP 的 Frori 那就更特别了,将 Action Sheet、Breadcrumb、Button、Icon Tab bar、Link、Smart Link 在导航中统一归纳。但是这里需要注意,SAP 把操作和导航放在一起,这样就会存在 Button 它们存在于导航中。
3、导航的作用到底起到了什么作用?
导航本身的作用是分发和引导产品的功能,让用户在每个模块之间高效准确地穿梭。但是如果我们想做到这一点,我们需要弄清:您从哪里来?去哪儿?现在在哪里?
你来自哪?
使用者需要迅速了解你来自哪里?面包屑导航就会发挥这种作用。对页面而言,我们在设计时常常需要暴露页面中的面包屑导航。例如,在页面设计中,通常会在导航部分和内容区之间预留一些空白来呈现面包屑。通过这种设计,用户可以快速了解自己的位置。
目前在哪?
目前的位置在哪里?是 B 端导航设计非常重要的问题。因为页面跳转和页面关联经常涉及到一个系统,所以我们需要清楚地标记页面的位置,这样用户就可以知道他目前的具体情况。与此同时,在组件的使用中,将采用页头、分页、步骤条、锚点、导航菜单等组件来实现这一目标。页头的设计对于一些复杂的系统非常重要。它能给用户思维惯性,让他快速了解当前的系统位置,方便我们操作。在像阿里巴巴云和腾讯云这样的产品中,你会发现“页头”这个词出现的频率非常高。这是因为云产品的系统产品线很多,业务范围也很广。用户很容易在页面上迷失方向,所以需要提供一个组件位置,让用户知道自己目前的位置。
去向哪?
因为在任何导航中,我们最终都需要流动。因此,需要明确说明页面中的具体流向。我们经常使用锚点、分页、下拉菜单和导航菜单来指示流向。这些组件都是为了让我们知道产品的具体流向,这样页面才能起到导航和分发的作用。
4、对不同导航组件下的分类进行说明。
这么多组件,它们的功能是一样的吗?事实上,它不是。在整个导航中,有两种不同的使用场景,所以我们将其区分为两种类型。
总体导航:
主要针对整个网站、系统的导航设计,它是粒度最大的导航,通常被称为导航菜单。
而在每一个终端系统中会有一个整体导航,整个产品的大概框架可以通过整体导航来构建。
区域导航:
主要针对某个模块下的页面,对页面进行分类指南。如面包屑、下拉菜单、步骤、分页、页头、锚点等...
由于每个整体导航都不能完全覆盖所有的导航菜单,所以区域导航主要用于优化导航细节。所以,我们可以通过区域导航来优化整个导航的层次和细节。
至于整体导航和区域导航,它们是相辅相成的。在许多情况下,整个导航菜单不能满足所有模块的实际情况。这时,我们可以使用区域导航进行优化。
5、导航的重要性
导航就像人体内的毛细血管,与每一个器官进行交流。尽管人们在日常使用中可能没有意识到它的存在,但是它的设计对于导航模块本身来说是非常重要的。
设计者的首要需求
很多学生成功加入公司后的第一个需求其实是导航,因为大部分产品都在寻找设计师,这意味着产品本身会有很多问题,导航是所有矛盾的开始。因此,导航往往是大多数设计师的第一部作品,导航需求是否成功将决定您的试用期。因此,我们必须了解导航的整体设计,才能使您顺利入职。
第一次体验新用户
导航是新用户进入系统时需要接触的第一个功能。所以对于很多企业来说,导航设计的质量会直接影响用户对这款产品的理解。比如你的导航比较晦涩,查完导航的新用户很有可能会退缩。
首先了解同事
导航对于 B 端产品的资深用户也很重要。一个资深用户在使用产品时,肯定会在多个产品模块之间随意切换,对于一个资深用户来说,切换是否顺畅是非常重要的。如果需要反复切换,对用户来说是非常痛苦的。
所以设计好导航,有利于我们在企业中提高自己的设计话语权,所以这一点尤为重要。