百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 文章教程 > 正文

后台导航栏,该如何设计?

xsobi 2024-11-24 23:30 1 浏览

编辑导语:在导航栏的设计中,侧边纵向导航是比较常见的,像Elemnet和 Ant Design 这两大热门组件,就都使用了侧边纵向导航。为什么侧边纵向导航好呢?一起来看一下吧。

最近一直在做后台的项目,经历为数不多的项目中,大部分项目都使用的Elemnet或者Ant Design。

作为两大热门组件,其导航栏的设计,都使用了侧边纵向导航。于是今天就来探究一下,为什么侧边纵向导航好?

01 导航是什么?我们为什么需要它?

在了解侧边纵向导航之前,我们需要搞清楚两个问题,导航是什么?我们为什么需要导航?

  • Element中关于导航定义:导航可以解决用户在访问页面时,在哪里?去哪里?怎样去的问题。
  • Ant Design关于导航的定义:导航用来展示当前产品中,用户在哪儿?可以去哪儿?

从上述回答,你可以了解到什么叫做导航了,那么我们接着看看现实生活中的导航是什么样的。

当你逛街时,路牌+商场地图+购物目标这三要素构成了你的路径,你可以清晰地达到目的地完成自己的购物行为。在现实生活中,这样的行为每天都被重复,非常常见。路牌+商场地图+购物目标也就构成了一个导航。

你通过路牌知道了我在哪里,通过商场地图知道了我要去哪,通过购物目标完成了最终的购买行为。

现实中因为一切事物都具有地理位置的对照以及实物,所以你并不容易迷失,当然路痴一样可能会迷失。可是在网络上,在你浏览某个网页或者应用时,由于并不存在实际的产品给你,所以一旦没有导航,你可能就会迷失在一次点击之后,或是遗忘你当前的页面记录,导致你无法找到自己想要浏览的东西。

这个时候,导航的作用就凸现出来了,它记录了你当前的位置,告诉你,你应该怎么去到自己想要去的地方。

02 侧边纵向导航为什么常见且好用?

在了解完导航的定义及其作用之后,我们现在需要来想一想,我们常见的导航有哪些类型?我们如何在合适的场景下去使用它们?

在B端系统当中,常见的导航栏有两类:纵向导航横向导航。如下图所示:

除此之外还有更多基于上述两个导航栏拓展出来的导航栏,比如更多目录,缩放、叠放等等,但是它们的原型都是上述两个导航,只不过是适用于不同场景而做的的拓展。

那么为什么B端系统的导航栏都会选用侧边和顶部呢?这里需要借助一个新的知识点:F模式。

F形状网页浏览模式源自美国网站设计工程师杰柯伯·尼尔森在2006年4月发表的《眼睛轨迹的研究》报告。

F模式是指人们在网页上浏览内容时,往往会遵循F字母的观察模式:

  1. 读者的眼睛首先是水平运动,常常是扫过网页内容的最上半部分,这样就形成了一条横向的运动轨迹。这就是F字母的第一条横线。
  2. 读者的眼光略微下移,很典型地扫描比第一步范围较短的区域。这就又画了F字母中的第二条横线。
  3. 读者朝网页左边的部分进行垂直扫描。有时候,这个举动很慢而且很有系统性,这样就画了F字母中的一条竖线。

通过这次实验,我们可以得出一个结论,那就是纵向或者横向,能够让浏览者第一时间注意到,这也是为什么我们需要让导航置顶,或者保持在侧边栏的一个因素。因为这些地方,会被浏览者重点关注。

那么为什么侧边导航会比横向导航要好呢?我们可以从两个方面来探究:布局和适配。

1. 布局

从布局角度来说,横向导航有优势,因为横向导航栏占据的位置非常小,通常只有一行内容。

而侧边导航栏则不同,往往需要占据一个页面的 1/5 来做展示,会更多影响其他的内容。

但是这里面横向导航栏有一个缺点无法避免,那就是一旦导航栏内容过多时,用户的操作就会非常不方便,需要滚动或者隐藏后续内容,导致操作成本和认知成本过高。

2. 适配

从适配角度而言,现在多端场景越来越常见,那么横向导航会面临一个非常大的问题,当从PC端迁移至移动端时,因为LOGO、用户头像、状态图等信息占据头部横向位置,导致导航栏的内容会被进一步压缩。

这个时候,用户操作成本进一步提高,当导航内容过多时,用户需要来回滑动自己的手机屏幕找到自己的位置,这违背了导航的初衷,即明确自己在哪,指引用户到自己想去的地方。

而侧边导航栏则可以避免这个问题,侧边导航往往只有展开和收起两个状态,迁移到不同端上时,我们只需要让侧边栏合理的展示对应的内容即可,用户可以进行一定程度上的自定义,因为侧边栏往往并不需要和其他元素共用位置。

03 总结

无论是侧边导航还是横向导航,它们的作用都是清晰的,指引用户。我们应该基于此目的来设计导航,在合适的场景下去使用合适的导航,当导航内容过多,且使用多端设备时,我们应该更多的考虑侧边纵向导航,因为它的兼容性和操作成本更少。

当你的导航内容不多,且页面浏览内容较多时,那么我们应该考虑横向导航,提高页面的利用率,降低导航栏所占据的版面位置。

当然无可否认的是,这两种导航栏方式都是极其好的。

更重要的一点是,我们应该保持一个系统内的不同页面之间导航栏一致,千万不能出现A页面使用纵向导航,B页面使用横向导航的情况。统一使用有利于用户操作,也方便我们做优化。

本文由 @子 原创发布于人人都是产品经理,未经许可,禁止转载

题图来自 Unsplash,基于 CC0 协议

相关推荐

js向对象中添加元素(对象,数组) js对象里面添加元素

一、添加一个元素对象名["属性名"]=值(值:可以是一个值,可以是一个对象,也可以是一个数组)这样添加进去的元素,就是一个值或对象或数组...

JS小技巧,如何去重对象数组?(一)

大家好,关于数组对象去重的业务场景,想必大家都遇到过类似的需求吧,这对这样的需求你是怎么做的呢。下面我就先和大家分享下如果是基于对象的1个属性是怎么去重实现的。方法一:使用.filter()和....

「C/C++」之数组、vector对象和array对象的比较

数组学习过C语言的,对数组应该都不会陌生,于是这里就不再对数组进行展开介绍。模板类vector模板类vector类似于string,也是一种动态数组。能够在运行阶段设置vector对象的长度,可以在末...

如何用sessionStorage保存对象和数组

背景:在工作中,我将[{},{}]对象数组形式,存储到sessionStorage,然后ta变成了我看不懂的形式,然后我想取之用之,发现不可能了~记录这次深刻的教训。$clickCouponIndex...

JavaScript Array 对象 javascript的array对象

Array对象Array对象用于在变量中存储多个值:varcars=["Saab","Volvo","BMW"];第一个数组元素的索引值为0,第二个索引值为1,以此类推。更多有...

JavaScript中的数组Array(对象) js array数组

1:数组Array:-数组也是一个对象-数组也是用来存储数据的-和object不同,数组中可以存储一组有序的数据,-数组中存储的数据我们称其为元素(element)-数组中的每一个元素都有一...

数组和对象方法&数组去重 数组去重的5种方法前端

列举一下JavaScript数组和对象有哪些原生方法?数组:arr.concat(arr1,arr2,arrn);--合并两个或多个数组。此方法不会修改原有数组,而是返回一个新数组...

C++ 类如何定义对象数组?初始化数组?linux C++第43讲

对象数组学过C语言的读者对数组的概念应该很熟悉了。数组的元素可以是int类型的变量,例如int...

ElasticSearch第六篇:复合数据类型-数组,对象

在ElasticSearch中,使用JSON结构来存储数据,一个Key/Value对是JSON的一个字段,而Value可以是基础数据类型,也可以是数组,文档(也叫对象),或文档数组,因此,每个JSON...

第58条:区分数组对象和类数组对象

示例设想有两个不同类的API。第一个是位向量:有序的位集合varbits=newBitVector;bits.enable(4);bits.enable([1,3,8,17]);b...

八皇后问题解法(Common Lisp实现)

如何才能在一张国际象棋的棋盘上摆上八个皇后而不致使她们互相威胁呢?这个著名的问题可以方便地通过一种树搜索方法来解决。首先,我们需要写一个函数来判断棋盘上的两个皇后是否互相威协。在国际象棋中,皇后可以沿...

visual lisp修改颜色的模板函数 怎么更改visual studio的配色

(defunBF-yansemokuai(tuyuanyanse/ss)...

用中望CAD加载LISP程序技巧 中望cad2015怎么加载燕秀

1、首先请加载lisp程序,加载方法如下:在菜单栏选择工具——加载应用程序——添加,选择lisp程序然后加载,然后选择添加到启动组。2、然后是添加自定义栏以及图标,方法如下(以...

图的深度优先搜索和广度优先搜索(Common Lisp实现)

为了便于描述,本文中的图指的是下图所示的无向图。搜索指:搜索从S到F的一条路径。若存在,则以表的形式返回路径;若不存在,则返回nil。...

两个有助于理解Common Lisp宏的例子

在Lisp中,函数和数据具有相同的形式。这是Lisp语言的一个重大特色。一个Lisp函数可以分析另一个Lisp函数;甚至可以和另一个Lisp函数组成一个整体,并加以利用。Lisp的宏,是实现上述特色的...