document.write('
')
木叶科技

木叶科技

木叶科技

菜单导航
木叶科技 > 游戏产业 > 正文

帮你全方位掌握导航栏设计知识点!

作者: 橙月 更新时间: 2022年07月29日 02:08:18 游览量: 92

简述:

编辑导语:APP的顶部导航栏是UI设计中必不可少的组成部分,它集合了用户常用或必用的一些功能,指引用户进行操

编辑导语:APP 的顶部导航栏是 UI 设计中必不可少的组成部分,它集合了用户常用或必用的一些功能,指引用户进行操作,所以做好导航栏的用户体验是非常重要的。本文作者对导航栏的设计风格、组成结构、样式、交互等方面进行了总结,一起来看一下吧。

帮你全方位掌握导航栏设计知识点!

APP 的顶部导航栏(以下简称 " 导航栏 ")对我们来说再熟悉不过了,它是 UI 设计中必不可少的组成部分,几乎每一个页面都会使用到。虽然看起来很简单,感觉不需要花费多少精力,但设计一个与产品需求、用户目标匹配度较高的导航栏并非那么容易,这里面有很多需要注意的设计细节。

导航栏集合了用户常用或必用一些功能,复用率极高,当用户在进行部分路径操作时,导航栏就像黑暗中的一盏 " 明灯 ",指引着用户进入下一步或回到上一步操作,所以做好用户体验是非常重要的。

我们每天都在跟导航栏打交道,如果仔细观察就会发现,不同应用的顶部导航栏都或多或少的存在一些差异,为了让大家对导航栏有一个更清晰、全面的认识,本文将对导航栏的设计风格、组成结构、样式、交互等多方面做出总结,希望能帮到大家,一起来看看吧。

一、导航栏基本介绍

1. 导航栏在哪里?

在 UI 设计组件中,如标签栏、菜单栏、Tab 栏、应用栏、标题栏、导航栏……等诸多类型和叫法中,有很多新人设计师难以区分这些重复叫法以及对应的所在区域。

导航栏位于应用程序的顶部,即状态栏下方,主要用于明确页面位置、层级等,并且连接着父 / 子级结构页面,权重应高于当前页面的所有内容。如果用户不知道当前所在位置、如何回到上一步的时候,就说明导航栏一定存在问题。虽然在 iOS 系统中叫做「导航栏」、Android 系统叫「顶部应用栏」,叫法不一,但所在位置以及起到的作用几乎一致。

帮你全方位掌握导航栏设计知识点!

2. 导航栏能起到什么作用?

首先,导航栏能告知用户当前所在位置,并提供回到上一步或部分下一步操作入口,不至于让用户迷失方向;其次,以顶部 Tab 的方式将当前页面内容作出整理分类,并将各类型入口聚合在导航栏,给用户提供全局操作;最后,还能增加品牌曝光,例如容器品牌色、图标品牌色等,甚至在有必要的情况下放置品牌 LOGO。

帮你全方位掌握导航栏设计知识点!

3. 为什么有的页面没有导航栏?

当系统想要给用户提供更多信息或用户需要沉浸式的使用体验,这时系统需要弱化、隐藏导航栏来释放更多的页面空间,以备增加单屏页面信息量的空间资源预留。

例如在线上读书、地图导航过程中,系统会将导航栏进行隐藏,因为这时用户的关注点只会长时间停留在内容本身,没有频繁的操作需求,隐藏导航栏既能预留空间,还能减少无关元素对用户的干扰;

使用滴滴出行在选择服务车型时,会暂时隐藏导航栏的背景容器,只保留了相关图标操作入口,虽然没有全部隐藏,但对本就不宽裕的地图空间能起到一定的缓解作用,相比上述处在导航过程中,现下场景的操作需求、频率显然要高出许多。

帮你全方位掌握导航栏设计知识点!

二、导航栏的结构组成

常见的导航栏分为左、中、右结构,主要由返回按钮(左)、标题(中)、辅助操作按钮(右)三部分元素组成,这也是基于大家最常用、常见的布局方式。

在实际应用中,为了满足多元化的产品需求及用户目标,根据不同的场景,导航栏的布局方式也非常多,不管样式多么复杂,这也仅仅是站在设计角度,其目的还是为了让用户操作起来更简单、便捷。下面以 iOS 的 2 倍图为例对导航栏进行一一拆解,看看我们所见过形形色色的导航栏到底会用到哪些元素、组件。

帮你全方位掌握导航栏设计知识点!

1. 容器

即导航栏的范围约束容器,所有元素都应该在容器里面。在 iOS 系统应用中,常规导航栏的固定高度为 88px,即便在大标题导航样式下,不管当前的高度是多少,随着界面的滚动,随后也会转换为 88px 的常规高度,例如 iPhone 界面、产品经理应用等。

文章链接:http://www.muyesoft.com//youxi/189613.html

文章标题:帮你全方位掌握导航栏设计知识点!