C端设计:9种常用的导航设计控件跳转

导航的定义其实就是元素之间的相互组合,可以让用户自由的在里面进行自由穿行。

二、导航设计的目的

导航设计的目的就是需要突出产品的核心,扁平化用户的任务路径。让用户能够顺利的在产品中畅行,让用户时刻清楚自己在应用中所处的位置,及如何前往目的页面。

产品的导航系统,是产品的信息结构在用户界面上的展现方式。移动端产品导航的设计没有最好之说,只有最合适,根据你的产品采取最合适的导航设计。

三、导航设计的作用

导航的设计其实就是让用户知道自己在哪里,身处在哪一个交互界面,可以再次去到哪一个页面,返回哪一个页面。

当然还要提供跳转的方法让用户感受到元素与页面的关系,表达用户与浏览界面的关系。

四、9种常用的导航设计1.底部标签(Tab)导航

优点:属于拇指热区范围内,操作方便,切换快速,用户体验良好。

缺点:只能容纳3-5个,数量有限。

2.顶部标签(Tab)导航

顶部Tab是谷歌提出来的,为了区分与iOS的区别的一种导航模式,由于在顶部,手指难以触及,所以谷歌对应地提出了手势操作的解决方法:通过在屏幕左右滑动来切换标签,比如:樊登读书和爱奇艺。

实际项目中,顶部与底部配合使用的挺多。

优点:顶部可滑动,所以可拓展性强,占据的空间比底部少,是通过滑屏切换方便快捷。

3.舵式导航

点聚式它将多个核心功能聚汇到主界面中显示,方便用户呼出使用。会搭载其他导航样式出现(如标签式)成为舵式导航,比如微博。

与标签导航类似,就点聚工导航与标签导航的结合体,其中一个导航标签蕴含更多的操作选项,也可以理解为标签中蕴含更多二级导航标签。当页面有处于同一层级的几大部分内容,同时又需要一个非常重要且频繁操作的入口,就可以采用这种APP导航模式。

优点:以颜色或大小的区别来展示核心,展示方式变得很灵活,不同颜色给用户不同的视觉冲击,激发用户的交互欲望。

缺点:属于二级交互,增加了用户的路径,展示功能过多会给用户造成选择压力。

4.宫格导航

宫格式导航被广泛应用于各平台系统的中心页面;比如支付宝。

用在二级页作为内容列表的一种图形化形式呈现,或作为一系列工具入口的聚合;

优点:很直观的把重要功能展现在用户眼前,促使用户可以快速选择。

缺点:同时正因为这种平铺式的展示方式让用户也有了选择压力。两个功能之间如果需要切换也会变得很麻烦了。

5.陈列馆式导航

陈列馆式设计模式最适合呈现经常更新的、视觉效果直观、彼此独立的内容。

优点:以卡片形式展示出来,大量标签可让用户快速了解内容,方便对比选择。

缺点:整个界面可展现的卡片数量极少,用户需要通过不断下滑获得新的内容,增加用户的交互流程。

6.抽屉导航

一般用来放置对用户而言不太常用或者对于产品而言不太核心的功能,或者不那么需要频繁切换内容的应用,例如对设置、关于、个人信息等内容的隐藏;

“2/8”法则告诉我们,80%的用户只用那些20%功能,这20%功能就是信息流里面的核心功能;如果那80%不常用的功能也占用着最重要的位置,那么用户就会被打扰,产生臃肿感,甚至会放弃使用产品。

优点:可以把大量的不太常用但是有很重要功能展示在其中,减少用户的交互流程,并且不会占用主要界面,用户也就不会被打扰。

缺点:对于不了解产品的用户来说这类导航用户一般不容易被发现,会导致用户的流失。

7.下拉导航/菜单导航

与抽屉式导航的目的相同,都是为了突出内容。一般位于产品顶部,通过点击呼出导航菜单;

通常用来筛选同一信息模块下不同类别的信息,或者快速启动某些常用的功能模块,而不需要频繁的页面跳转;

Android中对应的控件为spinner控件,但该控件用于同一类别下不同视图之间的切换,而不是跳转至完全不同的视图。iOS中下拉菜单为自定义控件,可以实现不同类别之间的切换;

下拉导航还有一种变式,就是下来菜单中展示两级甚至多级,一般在电商产品中比较常见,因为品类和筛选条件众多,比如微博,美团等。

优点:与重要界面连贯性强,不会占用重要界面,用户点击方便,可以通过对比详细对比自己的目标。

缺点:一般下拉键比较小,不容易被用户发现,容易被忽视。

8.列表导航

作为信息组织框架,是我们在产品设计中必不可少的一个信息承载模式。

适合用来显示较长或拥有次级文字内容的标题,每行可以融入较多信息。

无论ios开发和android都有现成的列表布局插件和模板。

优点:可拓展性强,可以加很多功能,也符合从上到下,从左到右的阅读习惯。

缺点:切换不方便,更换功能还需要返回上一级,增加了交互路径。

9.轮播(旋转木马)导航

当你的应用信息足够扁平,可以尝试轮播导航;(适合页面结构简单的app)

优点:通过少量的区域来展示大量的内容。

缺点:用户使用过程中需要反复的左右切换来找到目标页面,大大增加了交互路径,用户体验不好。

五、总结

导航栏是元素之间的组合,能让用户明确知道自己在哪里,去向哪里,不同的产品选择不同的导航能增加用户体验。

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

THE END
1.状态栏(Windows控件)状态栏文本操作 显示另外 3 个 状态栏是位于父窗口底部的一个水平窗口,应用程序可在其中显示各种状态信息。 状态栏可分为多个部件,以显示多种类型的信息。 以下屏幕截图显示了 Microsoft Windows 的“画图”应用程序的状态栏。 在这种情况下,状态栏会显示:要获得帮助,请在“帮助”菜单中,单击“帮助主题”。 状态https://msdn.microsoft.com/en-us/library/bb760728.aspx
2.操作平台操作平台,一种用来实现某种功能的体系。在物质文明和精神文明高度发达的今天,平台一词有了它更为广泛的内涵。它是一个舞台,是人们进行交流、交易、学习的具有很强互动性质的舞台。如信息平台、建筑平台等等。 1基本内容 编辑 “平台”一词是从英语之PLATFORM翻译过来的,其本义当“台”讲。平台,就是一种用来实现某https://baike.sogou.com/v10680656.htm
3.移动式操作平台有哪些部分组成装置和设备:移动式操作平台上还可以根据具体需要安装各种装置和设备,如防滑垫、防静电垫、防护罩、工具架、灯具和电源插座等,以提高工作效率和舒适度。操作控制系统:移动式操作平台上还可以安装操作控制系统,用于控制平台的移动和位置调整,以及一些特殊功能的实现,如倾斜、旋转等。其他附件:移动式操作平台还可以https://baijiahao.baidu.com/s?id=1775731932860143690&wfr=spider&for=pc
4.一网统管平台的功能有哪些?资讯中心森普智慧网格平台二、功能整合功能 1. 统一操作界面 功能整合功能旨在在统一的操作界面上整合每个子系统的功能。用户可以在同一平台上完成各种操作,无需在不同的系统之间切换。这有助于提高用户体验,降低学习成本和操作复杂性。 2. 协同工作支持 通过功能整合,一网统管平台可以更好地协同不同功能模块的工作。比如在企业运营中,人力https://wg.simpro.cn/news/ywtgptdgnynx.html
5.江苏财务系统平台使用教程在苏州模具厂ERP软件系统中,系统界面是用户与系统进行交互的重要窗口,通过系统界面可以实现各项功能操作和数据查询。下面将介绍系统界面的相关内容。 江苏财务系统平台主要界面功能介绍 1. 登录界面 用户首先需要通过输入用户名和密码来登录系统,确保安全性和权限控制。 https://www.uu.com.cn/p/328.html
6.「开源」Web版Linux数据库RedisMongoDB统一管理操作平台Web版Linux、数据库、Redis、MongoDB统一管理操作平台。 二、开源协议 使用Apache-2.0开源协议 三、界面展示 操作日志记录 菜单&首页 机器操作 状态查看 终端ssh 文件操作 进程操作 脚本操作 功能提示 保存常用脚本。执行脚本。 DBMS操作 SQL编辑器 功能提示 https://code.exmay.com/detail/1341
7.程序化交易平台:国信TradeStation操作教程登录后界面 二、操作界面和组件功能介绍 1.切换至实盘交易 双击右下角“交易:模拟”或“数据”,即退出当前连接,重新回到登录界面,点击“登录实盘”即可 或者单击“文件”->“联机工作”断开连接(联机工作前面的对勾代表连接状态),再次单击可以回到登录界面 https://www.360doc.cn/article/69713393_920090399.html
8.玩转企业云计算平台系列(七):Openstack控制面板服务HorizonHorizon 界面功能 Horizon作为OpenStack的Web界面,提供了丰富的可视化功能,让用户可以更加轻松地操作OpenStack平台。其中,主要包含如下功能: 1.用户认证:Horizon支持基于用户名和密码的认证方式,还提供了基于令牌的用户认证方式。 2.虚拟机管理:Horizon允许用户创建、启动、停止、重启虚拟机等操作,还提供了虚拟机列表、虚拟https://cloud.tencent.com/developer/article/2377167
9.苏州电子诉讼平台升级啦!为您提供16项新便利澎湃号·政务02.操作界面更友好 · 新增操作指引、智能风险评估、批量操作等功能,优化材料上传功能,让每一步操作“更加丝滑”。 立案操作指引 当事人和律师首次进入立案申请页面,“萌诉服”来指路,告知申请立案操作步骤。 智能风险评估 通过大数据分析,评估纠纷解决的时间成本、物质成本及其他诉讼风险,帮助当事人形成合理诉讼预期https://www.thepaper.cn/newsDetail_forward_19206338
10.跨平台设计:适应不同设备和操作系统3.跨平台框架:一种软件框架,用于实现在不同平台上的软件开发和部署。 4.自适应设计:根据设备和操作系统的特点,动态调整软件界面和功能的方法。 5.统一代码基础:通过使用跨平台语言或工具,实现在不同平台上的代码共享和重用。 6.集成开发环境(IDE):支持多平台开发的开发工具。 https://blog.csdn.net/universsky2015/article/details/135807360
11.平台功能基本操作说明.doc平台功效基本操作系统登陆系统能够自己喜好选择和定义自己一些格调,以下列图所表示:系统在开启时,选中属性按钮能够进行一些个性化操作,以下是一些详细内容。多页面假如机器内存比较大512M以上,能够起用多页面并设置最大页面数通常为58项,这么能够https://www.renrendoc.com/paper/268846791.html
12.PRD:SaaS平台OA系统迭代需求文档审批中页面包含“审批信息列表”与管理信息列表功能; 审批详情页面包含申请的详细信息以及同意&驳回操作界面。 审批中页面与审批详情页面: 不同意提交页面、同意提交页面及抄送页面 内容:分别包含驳回对象、提交对象、抄送对象以及提交/抄送意见 业务员抄送操作界面: http://www.360doc.com/content/22/0110/10/77927633_1012628336.shtml
13.深圳市小汽车增量调控竞价平台操作指南对于已经成功绑定账号的用户,点击公共账号的菜单【个人中心】→【竞价服务】即可访问移动端竞价平台的首页,首页页面如下图所示。 (四)移动端竞价界面功能简介 (1)竞价助手 竞价助手为您提供竞价流程指引,引导您进行下一步操作,帮助您了解当前竞价活动状态。按照助手提示可以一步步完成整个竞价活动。 https://www.szxqcjj.com/jjxz/20220513/1652448182113_1.html
14.重庆专业技术人员服务平台职称系统个人申报2.3.1功能8 2.3.2界面8 2.3.3操作说明9 3职称申报11 3.1.我的申请书11 3.1.2新增申请书12 3.1.3预览申请书13 3.1.4提交申请书14 1引言 1.1说明 本“用户手册”详细描述了重庆市专业技术人员服务平台-职称系统个人申报的实际界面展现及操作方法。 http://rlsbj.cq.gov.cn/ywzl/zjrc/sy/tzgg_110153/202011/t20201117_8468132.html
15.关于使用eDIS平台欧盟EconomyOperator相关功能的说明目前,eDIS平台于2021年7月15日开通了Economic Operator 的所有相关功能,具体操作说明如下: 一.eDIS平台页面相关操作 1. EU代理人管理界面介绍 用户点击eDIS平台页面上“设置”按钮,再点击“EU代理人管理”,进入到EU代理人管理设置页面。 1.1 功能介绍 页面包含“添加EU代理人”、“编辑EU代理人”、“删除”、“https://www.cifnews.com/article/100944
16.ZYRGZ02型工业机器人故障诊断综合实训平台(3) 10寸人机界面触摸屏,故障设置解除操作。 8.能提供工业机器人故障诊断与预防维护实战配套教程 9.基础操作实训平台,符合1+X认证的工业机器人示教与编程标准,采用模块化设计,硬件平台功能可升级。可组合进行初级、中级二个等级的项目实训。 三、工业机器人本体 http://www.bjzy123.com/proshow.asp?ID=995
17.非小号交易所怎么样?非小号交易所功能特点介绍交易平台区块链用户体验与界面设计:简洁高效,操作便捷 在用户体验方面,非小号同样下足了功夫。平台界面设计简洁明了,信息布局合理,用户可以轻松找到所需内容。同时,平台支持多语言版本,满足了全球投资者的需求。此外,非小号还不断优化系统性能,确保数据加载迅速、交易查询流畅,为投资者提供了高效便捷的使用体验。非小号凭借其全面的数据https://www.jb51.net/blockchain/957664.html
18.数据交换平台1.2 功能路径 电脑选择【开始】菜单→【所有程序】→【金蝶KIS云·专业版】→【系统工具】,在金蝶KIS系统工具中选择【数据交换工具】→【数据交换平台】,选择相应的账套后,可进入数据交换平台主界面。 2 主要操作 2.1 基础资料 用户可以在数据交换平台中建立基础资料数据交换的任务,包括基础资料数据从源账套的引出任务https://vip.kingdee.com/article/385809226188642048
19.OPENIC之IFP:集成电路设计流程平台通过一个统一的流程平台,在一个公司(或团队)范围内统一流程运行规范,数据集约化管理和展示,可以大幅降低流程运行成本(包括时间成本和交互成本)。 这个阶段的主要制约因素是,大家的操作对象从分立脚本切换到统一平台,有一个一次性的学习成本;部分流程管理员失去了对操作平台功能的直接修改权限会有一些不适应。 https://blog.eetop.cn/blog-640161-6952054.html
20.金舟流程图操作手册2.1 操作界面 2.1.1 打开文件 2.1.2 新建 2.1.3 我的文件 2.1.3.1 同步至云平台 2.1.3.2 云下载 2.1.3.3 前往至云平台 2.1.4 设置/快捷键 2.2 功能介绍 2.2.1 设置字体字号大小 2.2.2 思维导图换行 2.2.3 自定义添加新字体 2.2.4 模板的使用 3. 常见问题 3.1 文件忘记保存了,还能https://www.callmysoft.com/liuchengtu/help.html