用户进入 QQ 音乐播放页时，有时导航栏...
采集 评论
查看来源 uisdc.com
Huaiiixue
通过花瓣采集插件采集于2021-08-11 17:01:02
用户进入 QQ 音乐播放页时，有时导航栏会出现与该歌手相关的“扑通小组”的提示，点击可以跳转到对应的小组。当用户听一首歌时，大概率也会对这首歌比较感兴趣，在这种场景下，用户点击转化率或许也会有不小的提升。这种设计充分利用了导航栏的空间，同样也是数秒钟之后，通过微动效，切换为正常的导航栏。
导航栏
Huaiiixue
导航栏是针对于所在页面而言的指示性控件，因此，当页面信息发生变化，导航栏也可以随之发生变化，以适应当前内容。 知乎：用户在知乎视频信息流浏览时，随着视频的切换，导航栏标题也会跟随变化。
发发奇：发发奇是一款电商类应用，商品价格高，在该应用的详情页中，上滑页面后，发发奇会将商品名称和价格这种重要信息固定在导航栏。
考虑到应用的需求多样，谷歌的 Material Design、苹果的 iOS 规范并不能完美地符合所有需求。导航栏标题在国内的用法中，不仅只有一行文字，甚至不仅只有文字，而是根据产品不同诉求进行改造，以保证关键信息可以充分展示。 豆瓣：用户在浏览豆瓣的电影详情页时，随着页面上滑，电影封面、名称、评分等信息将会固定在导航栏上。我们知道豆瓣里评分是一个十分重要的功能，许多用户会依据别人的评分来初步判断一个电影的质量，因此评分有必要处于高优先级的展示位置。单纯的导航栏规范很难满足这一点，于是豆瓣对导航栏标题信
用户进入 QQ 音乐播放页时，有时导航栏会出现与该歌手相关的“扑通小组”的提示，点击可以跳转到对应的小组。当用户听一首歌时，大概率也会对这首歌比较感兴趣，在这种场景下，用户点击转化率或许也会有不小的提升。这种设计充分利用了导航栏的空间，同样也是数秒钟之后，通过微动效，切换为正常的导航栏。
用户进入 QQ 音乐歌单时，歌单导航栏标题会切换为一句话，这句话因不同歌单而异，可以算是导航栏的小彩蛋。数秒钟之后，切换为正常的歌单标题。
导航栏空间本身是有限的，但是我们可以通过某些微动效巧妙地“增加”导航栏的信息空间，比如通过信息切换的方式，将产品中某些信息暂时性地展示在导航栏，一段时间之后，恢复常规的信息。 QQ 音乐在导航栏的设计中，有很多值得参考的点： 用户在 QQ 音乐详情页点击收藏时，导航栏右侧信息会临时切换为分享提示条。通过微动效出现的形式，可以第一时间吸引用户注意力。同时，这种提示并非是固定的，而是与用户触发存在关联性，因此更适合采用临时状态，在导航栏的位置既不显得过于突出和干扰，又能吸引用户注意，结合得比较巧妙。
腾讯新闻：在腾讯新闻浏览内容时，文章作者会固定在导航栏，并且右侧有明显的关注按钮。这种设计很明显，就是希望提升用户的关注转化。
对于应用来说，总有一些功能是应用希望可以让用户注意到并且进行操作的，而导航栏的位置在页面的最高层级，在这里突出某些操作，可以比较轻易地吸引用户的注意力。 途家：在途家的详情页，用户上滑页面时，住宿时间选择会固定在导航栏，便于用户快速选择。在这种应用中，选择住宿时间是相对比较重要的功能，用户的期望住宿时间内，该房间是否空闲，直接影响用户是否选择该房间。这种设计通过将住宿时间常驻在导航栏，加强功能的曝光，减少用户长时间浏览后，想要订房却发现期望时间段内不可入住的情况。
在查询机票界面中，导航栏标题一般显示的是出发地点和到达地点，一般情况下，点击即可直接切换出发地点和到达地点。而在查询机票的界面，由于机票不稳定因素多（如机票浮动等，用户会涉及到比价等情况），用户在这个场景中的潜在需求不仅仅是切换出发/到达地点。因此，这个标题还被赋予更多功能，用户点击即可切换历史搜索的查询记录、更改出发/到达地点、查询返程等操作。
滴答清单是一个工具类应用，用户可以用它记录一些日常事项，在事项编辑页中，导航栏标题是该事项所在的位置。这个标题也支持点击，点击后，可以将记录事项移动到不同的位置。
上文讲到，导航栏的标题存在很大的可改造空间，其中一点就是在许多应用中，导航栏标题被赋予了可操作的能力，这种设计将标题的指引性与功能性相结合，除了让操作更加便捷之外，更是节省了寸土寸金的页面空间。 以微信公众号为例，当用户浏览公众号时，页面上滑后导航栏将会显示公众号名称，并且在某次改版中，加入了点击名称即可查看公众号详情的设计。这种设计将公众号名称与功能性结合起来，赋予了标题的拓展空间，对公众号的关注量提升也有一定帮助。
虽然导航栏是页面中必不可少的，但并非是必须固定存在的，在合适的条件下，导航栏可以随着页面滑动而适时隐藏，以节省页面空间，此外，在用户注意力在页面其他位置时，隐藏导航栏还能帮助用户更加聚焦于正在关注的信息。需要注意的是，导航栏必须能够被用户通过某种点击/滑动等操作轻易呼出，以保证用户切换操作目标时的无缝切换。 以掌阅为例，掌阅在浏览小说过程中，会将导航栏收起，以保证页面浏览效率，减少浏览干扰。同时，当用户希望呼出导航栏时，只需要向下滑动或者单击页面即可。
此外，页面的沉浸式并没有必须将导航栏背景完全透明。如菜鸟裹裹，将导航栏单独设计，采用悬浮在页面上方的设计，而非常规的通栏样式，页面呼吸感更强，也可以营造整体沉浸感的浏览，这种设计在地图相关的场景中被广泛应用。
同采自
uisdc.com
该采集也在以下画板
加载更多
推荐给你的采集
采集
dribbble.com
暴走布布采集到UI-web

演示

2411

暴走布布 采集到
UI-web
采集
夜色如水采集到活动专题

双十二

54

夜色如水 采集到
活动专题
采集
zcool.com.cn
Penry_Chen采集到灵感 - 表情/插画

郑州地铁票卡设计

1232

Penry_Chen 采集到
灵感 - 表情/插画
采集
25xt.com
莫楠德采集到ui app icon

抖音直播礼物UI设计欣赏

92

莫楠德 采集到
ui app icon
采集
dribbble.com
TannerWe采集到App

1211

76

TannerWe 采集到
App
采集
长刺的年糕采集到引导页

明日之子 《大首发日》活动

102

长刺的年糕 采集到
引导页
该采集待公开
采集
zcool.com.cn
让我飞升采集到UI-特效

二次元界面UI风格|UI|游戏UI|波波大 - 原创作品 - ()

1

让我飞升 采集到
UI-特效
采集
Y、Lisa酱采集到App.闪屏设计

1021

Y、Lisa酱 采集到
App.闪屏设计
采集
不文不问-wen采集到ui

818多嘴节 八一八那些美食的八卦

59

不文不问-wen 采集到
ui
采集
image.flaticon.com
Dearcolour采集到扁平/插画

1343009.png (512×512)

20

Dearcolour 采集到
扁平/插画
采集
淑怡部屋采集到APP

天气界面

113

淑怡部屋 采集到
APP
采集
img.hb.aicdn.com
Χ_i__a采集到✿_WEB

dd48e1594d4931599495c493c6a2c65163ca1f227ba98...

44

Χ_i__a 采集到
✿_WEB
采集
小牧童采集到banner设计

banner 金融

53

小牧童 采集到
banner设计
采集
龙小夜采集到【插图】APP加载页/启动页/引导页

#插画##闪屏##原创##节气##立夏##夏天# 大海 蓝天 闪屏 专题 http://w...

1071

龙小夜 采集到
【插图】APP加载页/启动页/引导页
采集
weibo.com
今天的春雪采集到ui

#dribbble每日精选# Ivan Bobrov的多彩小动物LOGO 兔子

25

今天的春雪 采集到
ui
采集
iguoguo.net
爱果果采集到酷站欣赏

It Will Glow - 爱果果

65

爱果果 采集到
酷站欣赏
采集
乔莉拿起笔采集到运营-banner

五重礼banner @这样重这样轻 作品

73

乔莉拿起笔 采集到
运营-banner
采集
16sucai.com
bird-yan采集到icon区

简约线性图标设计矢量素材 - 素材中国16素材网

186

bird-yan 采集到
icon区
采集
uocook.com
木鱼泡泡采集到Icon - APP大图标

写实UI图标

14

木鱼泡泡 采集到
Icon - APP大图标