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

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

1

让我飞升 采集到
UI-特效
采集
夜色如水采集到活动专题

双十二

54

夜色如水 采集到
活动专题
采集
iguoguo.net
爱果果采集到酷站欣赏

It Will Glow - 爱果果

64

爱果果 采集到
酷站欣赏
采集
uocook.com
木鱼泡泡采集到Icon - APP大图标

写实UI图标

14

木鱼泡泡 采集到
Icon - APP大图标
采集
image.flaticon.com
Dearcolour采集到扁平/插画

1343009.png (512×512)

20

Dearcolour 采集到
扁平/插画
该采集待公开
采集
zcool.com.cn
Penry_Chen采集到灵感 - 表情/插画

郑州地铁票卡设计

1232

Penry_Chen 采集到
灵感 - 表情/插画
采集
dribbble.com
TannerWe采集到App

1211

76

TannerWe 采集到
App
采集
小牧童采集到banner设计

banner 金融

53

小牧童 采集到
banner设计
采集
weibo.com
今天的春雪采集到ui

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

24

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

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

1051

龙小夜 采集到
【插图】APP加载页/启动页/引导页
采集
Y、Lisa酱采集到App.闪屏设计

1011

Y、Lisa酱 采集到
App.闪屏设计
采集
乔莉拿起笔采集到运营-banner

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

72

乔莉拿起笔 采集到
运营-banner
采集
img.hb.aicdn.com
Χ_i__a采集到✿_WEB

dd48e1594d4931599495c493c6a2c65163ca1f227ba98...

44

Χ_i__a 采集到
✿_WEB
采集
25xt.com
莫楠德采集到ui app icon

抖音直播礼物UI设计欣赏

91

莫楠德 采集到
ui app icon
采集
淑怡部屋采集到APP

天气界面

113

淑怡部屋 采集到
APP
采集
dribbble.com
暴走布布采集到UI-web

演示

2411

暴走布布 采集到
UI-web
采集
不文不问-wen采集到ui

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

59

不文不问-wen 采集到
ui
采集
16sucai.com
bird-yan采集到icon区

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

186

bird-yan 采集到
icon区
采集
长刺的年糕采集到引导页

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

101

长刺的年糕 采集到
引导页