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

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

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

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

一、导航栏基本介绍

1. 导航栏在哪里?

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

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

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

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

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

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

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

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

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

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

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

二、导航栏的结构组成

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

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

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

1. 容器

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

另外,部分应用为了释放更多界面空间,从表面上看不到容器的存在,实际是将容器的不透明度调整为0,逻辑上容器是依然存在的,且各元素依然受到容器的约束,例如滴滴打车界面。

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

2. 标题

标题用于描述用户当前所在位置或页面的具体所在场景,在iPhone全面屏出现之前,因设备屏幕空间有限,大部分使用常规标题,即34px~40px(栅格所需、笔者常用36px)加粗且居中标题文字。

当全面屏设备逐渐普及后,屏幕的高度得到了进一步扩展,导航栏的可发挥空间必然增加,大标题风格开始兴起,随后也被引入了设计平台规范。大标题导航栏主要取决于产品定位与功能影响,并不单单是设计风格的问题,毫无疑问,大标题能让页面头部有更多的留白空间,呼吸感更强,非常适合产品结构不深、功能单一且体量级别较轻的应用,也就是我们常说的「小而美」,#

大漠飞鹰;公众号:能量眼球。致力于产品需求的驱动、产品体验的挖掘,利用设计的手段为受众用户带来更好的体验,即好看、好用。

版权声明

本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符,请点击 举报 进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部