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

APP内的“引路人”—导航栏设计的分类与须知

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

每天我们都在使用不同的APP进行工作、学习、听音乐、看视频等等,都应该能注意到每个APP的导航也不尽相同,而导航菜单对于APP应用起着非常重要的作用,它是整个APP应用中最核心的交互性设计之一,既可以给用户做导航,指引方向,又可以减少用户的点击步骤,简化操作。所以说,企业在进行APP开发时,需要对导航菜单引起重视,这对于提升APP应用的用户体验度有着重大帮助。那么,常见的APP设计导航有哪几种分类呢?它们具有什么优缺点?小犇就来为您总结一下。

一、标签式

标签式导航是现在主流的类型,在底部会显示整个APP最核心的功能,方便用户选择使用。主要用于一级目录的导航,位于页面底部,无论用户单手还是双手操作都能轻松点击,能告诉用户当前位置及用户切换统一层级之间的不同模块。展现形式有文字 + icon,也有纯icon形式,大部分是文字+icon,可能是减少用户记忆负担。

优点:操作方便,轻松切换功能,使用户有更好的体验,不会频繁跳转切换。

缺点:个数有限,APP的需求功能多时会不实用。

二、菜单式

它是在一个较大的面板上分组显示已经定义好的菜单选项。能让更多用户在有限的屏幕空间上做更多的动作,让用户查看更多的信息;能将同一模块的信息进行分类,让用户更清晰地了解这个模块都为我们提供哪些信息或分类。

优点:结构清晰,能够展示的功能也较多。

缺点:不适用于频繁的操作切换,成本较高。

1、APP应用的顶部菜单

在APP应用开发中,使用顶部菜单类型,是因为我们的习惯都是从上往下的浏览手机屏幕,因此把移动APP应用软件的导航菜单设计在屏幕顶部也具有一定的优势。此类布局最重要的代表就是标签页和每个控制中心拥有独立图标,为用户提供明确导航。

2、APP应用的底部菜单

在APP应用开发中,采用底部菜单类型主要作用是作为导航的辅助,是用于区分内部的功能区块和独立组件。位于手机屏幕底部的APP应用导航设计,都包含了一组扩展菜单,并且每一项都有自己的控制面板,显示出一个小型的控制中心。

3、APP应用的列表菜单

在APP应用开发中,使用列表菜单类型设计APP应用的导航,是使用横条状的布局方式来逐一展示APP应用的内容链接,让用户遵循由上到下的常规流程。采用列表菜单的APP应用设计,可以让用户对手机APP应用界面内容一目了然,令用户在APP应用操作上更加简单有效

4、APP应用的展开式菜单

在APP应用开发中,使用展开式菜单,是由于APP应用需要处理大信息量,这类往往是喜欢创作简洁紧凑APP应用界面的设计师最喜欢的类型。展开式菜单类型的导航菜单允许把APP应用菜单图标放在手机界面的任何地方,这也是展开式菜单受到APP应用设计师青睐的原因。

三、宫格式

一般作为信息或平台的入口,为产品或项目信息提供聚合的载体,适合承载订阅类产品或众多属性差异非常明显的分类信息,此类导航信息的呈现内容比较少,但是每个项目选取的效率比较高。宫格式将每个功能都聚焦在一个页面,能够让用户很清楚地看到,每个宫格都是独立的,所以要想在进入另一个宫格时,必须要返回中心页面再选择。

优点:清楚展示每个入口,方便找到用户需要进入的入口。

缺点:无法展示功能内容,各个功能之间切换麻烦,每个功能不能跳转。

四、列表式

通常用来展示某个具体模块内容的信息进行分类,以列表的形式呈现大量的条目。多用于辅助主导航来展现信息甚至更多层次的内容,有时候需要一些提示信息。列表式导航简单清晰,能够帮助用户快速定位到需要的功能内,不占用APP页面的空间。

优点:展示的功能简单明了,可以看到功能的内容。

缺点:不直观,需要频繁打开关闭再选择要进入的功能内,排版不灵活。


每个APP在导航栏设计的时候都已经不再是选择单一的模块,而是综合使用多种导航栏的形式,出发点在于突出产品和服务核心点,同时便于用户的操作。

相关推荐

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的宏,是实现上述特色的...