网易首页 > 网易号 > 正文 申请入驻

APP导航栏设计分析:5种设计样式+4种交互状态

0
分享至

编辑导语:App的导航栏是页面设计中不可缺少的部分,看似相同,但其实在设计上都有着一些差异。本文作者从刚设计样式、设计风格、交互状态等多个发面出发,对导航栏进行了系统的分析。一起来看看。

APP导航栏(AppBar)大家应该都很熟悉,位于屏幕顶部,集合了用户经常使用的一些功能,是页面设计中不可缺少的组成部分。

虽然导航栏很常见,但是我们在使用产品的过程中会发现,每个APP的导航栏或多或少都存在一些设计上的差异

为了能让大家对导航栏有更清晰且全面的认识,这篇文章将导航栏的设计样式、设计风格、交互状态等多方面的内容综合在一起进行分析,一起来看看吧~

一、导航栏的构成

整个导航栏通常分为左、中、右三部分,左侧和右侧主要用来放置功能控件,中间部分主要用来放置文字标题,接下里展开分析左中右三部分的构成。

1. 左侧导航

放置在APP顶部导航栏左侧的控件很多都跟动作相关,例如执行返回动作、关闭动作或者点击汉堡菜单进行展开动作等。

除了在左侧放置表示动作的控件,还可以在放置头像框、消息提示等优先级较高的内容,用来引起用户的注意。

在网页端的顶部导航栏中,左侧都会放置品牌logo,因为网页端顶部的空间更大,所以还可以在LOGO周围结合徽标、搜索框、下拉菜单等空间。

2. 中间部分

APP顶部导航栏的中间部分主要用于放置标题,当然根据使用场景的不同,还可以放置头像、搜索框、下拉框、导航等控件。

(1) 标题

最常见的是在中间使用加粗的文字作为标题,也可以使用主标题+副标题的形式来展示更多的信息。

还可以把标题区域做成支持下拉的样式,扩展更多的功能全。

(2) 用户头像

在社交类产品或对话框中,会在中间部分放置用户的头像和信息,用来展示用户的详细信息。

(3) 产品Logo

有些产品还会将Logo放在导航栏的中心位置用来展示品牌形象,在APP的首页可以考虑这样设计,起到强调作用。

(4) 分段控件

在移动端产品中,还可以在中间部分放置分段控件,通常2-3个标签,在早期的网易云音乐APP中就用到了这样的设计,通过点击标签或者左右滑动页面完成内容切换。

(5) 搜索框

导航栏中间经常能看到搜索框,然后搜索框左右两边放置其他的控件。当导航栏的内容太多,比如有文字标题、头像、按钮等控件,搜索栏和这些控件可能无法并排放置时,可以将搜索栏横向拉长,放在下一行单独展示。

现在淘宝APP首页的导航栏就做成了两行,上一行用来放置文字标题和功能图标,搜素栏集合扫码、拍照等功能单独作为一行。

(6) 导航选项

在网页中,标签、按钮、面包屑导航等常见的导航组件,通常会固定在网页导航的中心位置。当页面缩小到移动端时,考虑到移动端尺寸较小,如果顶部导航内容太多,可以尝试把功能组件放到第二层级。

3. 右侧导航

相对于左侧和中间,APP导航栏的右侧部分更加灵活,没有固定的要求说必须放哪些内容,根据需求放置各种类型的功能控件。

(1) 头像

如果想调用与用户属性相关的功能,就可以将头像放在导航栏的右侧区域,点击弹出相关的选项。

(2) 图标

在右侧区域放置功能图标是最常见的设计,把用户最常使用的功能,例如消息图标、搜索图标,都可以集中到导航栏的右侧区域。

如果右侧需要展示的图标太多,可以把这些图标聚合在一起,处理成类似微信首页右上角的设计,点击之后出现更多功能。

(3) 按钮

按钮也可以放在右侧区域来引导用户操作。当出现多个按钮时,要使用样式和颜色来灵活区分按钮的主次关系。

按钮的形状包括圆形、方形、圆角矩形等,按钮样式包括颜色填充、描边、图标和文字结合等多种风格,通过灵活的设计抓住用户的注意力。

(4) 搜索框

在网页端中会看到搜索框放在右侧的设计,将搜索框作为单独的控件或者和其他控件组合使用放在右侧,方便用户快速访问。

(5) 下拉菜单

在Pad端和网页端中,可以使用嵌套在应用栏右侧的下拉菜单进行切换帐户、语言等操作。

二、导航栏的5种设计风格

顶部导航栏设计风格需要与与整个产品的UI相匹配,常见的导航栏设计样式有

扁平风格、阴影悬浮效果、颜色填充效果、使用半透明导航等。

1. 扁平风格

顶部导航区域完全融入到背景中,和整个页面融为一个整体,页面看起来比较简约。

2. 阴影悬浮风格

通过在导航栏下方增加一层阴影效果,让导航栏有悬浮在页面上的感觉,同时便于和页面其他内容作区分。

3. 颜色填充风格

将导航栏背景进行色彩填充,不透明度降低到8-12%,使用一些简约而高级的色彩来增加页面的丰富度,体现品牌特点。

4. 深色风格

APP页面的背景大多都是浅色,这个时候如果使用深色的导航,能够产生很强烈的对比效果,用来突出导航中的内容。比如早期的微信APP页面,顶部就是采用深色的导航,和浅色的页面作对比。

5. 透明风格

图片详情页的UI设计中常用到透明的导航风格,既能避免导航栏将图片内容遮挡,还能突出页面的高级感。

三、导航栏交互状态分析 1. 选中状态

当用户与导航栏交互时,导航栏上的控件要能够动态切换来为用户提供即时反馈,比如当选中页面中的内容时,导航栏要出对应的操作提示,是否删除、分享等。

2. 滚动状态

当页面上下滚动时,原本扁平的APP导航栏出现阴影悬浮的升高效果,状态的改变会让操作看起来更自然。

3. 背景模糊

当页面滚动时,顶部导航出现毛玻璃的模糊效果,这是现在很流行的视觉效果,会让整体的用户体验更流程。

4. 尺寸调整

当页面尺寸变小时,要考虑将多余的导航选项折叠并隐藏在“更多”图标里面,这样才会让设计更合理。

四、最后

以上就是导航栏(App Bar)设计中能用到的知识点和设计细节,希望通过这些内容能帮助你对导航栏有更多的设计想法和思考。

#专栏作家#

作者:Clippp,微信公众号:Clip设计夹。每周精选设计文章,专注分享关于产品、交互、UI视觉上的设计思考。

本文原创发布于人人都是产品经理,未经作者许可,禁止转载。

题图来自Unsplash,基于CC0协议。

特别声明:以上内容(如有图片或视频亦包括在内)为自媒体平台“网易号”用户上传并发布,本平台仅提供信息存储服务。

Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.

相关推荐
热点推荐
中纪委网站通报:5名省管干部同日任上被查!其中1人一周前还出镜谈考察感受,1人还出席了签约仪式

中纪委网站通报:5名省管干部同日任上被查!其中1人一周前还出镜谈考察感受,1人还出席了签约仪式

鲁中晨报
2024-06-12 10:11:08
你无意中发现过别人哪些秘密?网友分享太炸裂了:这瓜看着真过瘾

你无意中发现过别人哪些秘密?网友分享太炸裂了:这瓜看着真过瘾

热闹的河马
2024-06-14 10:44:14
今年的经济形势有多严峻?身边却出现了许多反常的现象

今年的经济形势有多严峻?身边却出现了许多反常的现象

山丘楼评
2024-06-02 23:30:58
国足避开日韩伊!18强赛有玄机,抽签分组全是鱼腩?

国足避开日韩伊!18强赛有玄机,抽签分组全是鱼腩?

体坛狗哥
2024-06-15 10:40:36
等待官宣!巩晓彬正式出山,山东男篮保八争四提上日程

等待官宣!巩晓彬正式出山,山东男篮保八争四提上日程

篮球前线CBA
2024-06-15 20:41:57
3-0!詹俊:西班牙抢第1?京媒:魔笛黄金一代落幕!董路:慢吞吞

3-0!詹俊:西班牙抢第1?京媒:魔笛黄金一代落幕!董路:慢吞吞

贝塔说体育
2024-06-16 02:32:15
"最美女婴"刚出生就成网红,凭颜值征服网友,护士:难得一遇

"最美女婴"刚出生就成网红,凭颜值征服网友,护士:难得一遇

大果小果妈妈
2024-06-15 08:51:31
阿里竞赛天才不止姜萍,第26名是初中生,还有一个散修外卖员

阿里竞赛天才不止姜萍,第26名是初中生,还有一个散修外卖员

校长侃财
2024-06-15 17:23:13
盎撒人要对犹太资本动真格的了!

盎撒人要对犹太资本动真格的了!

谈芯说科技
2024-06-15 06:08:21
罗斯人开始抛弃卢布,乌克兰愈战愈勇

罗斯人开始抛弃卢布,乌克兰愈战愈勇

非虚构故事
2024-06-13 13:28:47
尿毒症是喝出来的?医生告诫:即便是铁打的肾,这3种水也要少喝

尿毒症是喝出来的?医生告诫:即便是铁打的肾,这3种水也要少喝

莫将离
2024-06-01 23:41:40
齐思钧术后报平安,直言手术切掉了羞耻心,网友乐得笑开怀

齐思钧术后报平安,直言手术切掉了羞耻心,网友乐得笑开怀

综艺拼盘汇
2024-06-15 09:57:55
女排3比2逆转土耳其 球员评分:5人满分,1人良好,4人及格

女排3比2逆转土耳其 球员评分:5人满分,1人良好,4人及格

篮球资讯达人
2024-06-16 00:29:11
王思聪当爸后续!黄一鸣公开让娃叫爸,用大葱打码内涵满满

王思聪当爸后续!黄一鸣公开让娃叫爸,用大葱打码内涵满满

懂瓜瓜
2024-06-15 19:39:31
凯特王妃终于露面!夏洛特小公主依旧霸气,和妈妈穿黑白母女装

凯特王妃终于露面!夏洛特小公主依旧霸气,和妈妈穿黑白母女装

KK说王室
2024-06-15 19:11:29
汤普森做出决定!再见,勇士!你好,雷霆……

汤普森做出决定!再见,勇士!你好,雷霆……

篮球实战宝典
2024-06-15 16:06:16
女生的“小花瓣”颜色,和同房次数到底有没有关系

女生的“小花瓣”颜色,和同房次数到底有没有关系

水白头
2024-06-15 15:16:53
网传某高校劳务派遣人员管理办法,基本工资2570元/月,岗位津贴最高4038元

网传某高校劳务派遣人员管理办法,基本工资2570元/月,岗位津贴最高4038元

可达鸭面面观
2024-06-14 16:25:01
退钱哥:德国地铁说停就停,欧洲杯的第一天,已经感到身心俱疲了

退钱哥:德国地铁说停就停,欧洲杯的第一天,已经感到身心俱疲了

直播吧
2024-06-15 08:53:57
姜萍数赛夺12名后续:13名刘奔上热搜,本人发声回应,评论搞笑

姜萍数赛夺12名后续:13名刘奔上热搜,本人发声回应,评论搞笑

180°视角
2024-06-15 12:39:00
2024-06-16 05:00:49
人人都是产品经理社区
人人都是产品经理社区
想要成为大牛先从学做产品开始
67139文章数 311192关注度
往期回顾 全部

科技要闻

TikTok开始找退路了?

头条要闻

欧洲杯-亚马尔创纪录卡瓦哈尔首球 西班牙3-0克罗地亚

头条要闻

欧洲杯-亚马尔创纪录卡瓦哈尔首球 西班牙3-0克罗地亚

体育要闻

莱夫利,让困难为我让路

娱乐要闻

江宏杰秀儿女刺青,不怕刺激福原爱?

财经要闻

新情况!高层对人民币的态度180°转弯

汽车要闻

东风奕派eπ008售21.66万元 冰箱彩电都配齐

态度原创

房产
艺术
教育
健康
数码

房产要闻

万华对面!海口今年首宗超百亩宅地,重磅挂出!

艺术要闻

穿越时空的艺术:《马可·波罗》AI沉浸影片探索人类文明

教育要闻

厉害!长沙15岁初三少年闯进2024年阿里巴巴全球数学竞赛决赛

晚餐不吃or吃七分饱,哪种更减肥?

数码要闻

低至 5747 元,爱普生 CH-TW6280T 真 4K 投影仪京东大促

无障碍浏览 进入关怀版