前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Human Interface Guidelines —— 导航栏(Navigation Bars)

Human Interface Guidelines —— 导航栏(Navigation Bars)

作者头像
霖酱
发布2018-05-17 10:46:14
2.4K0
发布2018-05-17 10:46:14
举报
文章被收录于专栏:Material Design组件

自上次参加完回音分享会后,我下定决心要洗心革面乖乖打基础,于是开启了这个part,争取两个月不间断更新,写完Material Design与iOS中的组件(顺便学学英语),以便今后在使用的时候完全不虚

导航栏(Navigation Bars)

Human Interface Guidelines链接:Navigation Bars

Navigation Bars

位置

Navigation Bars显示在app屏幕的顶部,位于status bar(状态栏)下方,并可穿过一系列不同层级的屏幕进行导航。 

内容

当显示一个新的屏幕时,一个后退按钮(通常标有前一个屏幕的标题)出现在该bar的左侧。 有时,navigation bars的右侧包含一个control,如Edit或Done按钮,用于管理活动视图中的内容。 

变化

·在split view(分割视图)中,navigation bar可能出现在split view(分割视图)的单个窗格中。 

split view(分割视图)

·Navigation Bars是半透明的,可以具有背景色,并且可以配置为当键盘出现在屏幕上 / 使用手势 / 视图大小调整时隐藏。

·显示全屏内容时可考虑暂时隐藏navigation bars。 当您想要聚焦内容时,navigation bar可能会分散注意力。 暂时隐藏navigation bar以提供更加身临其境的体验。 照片在查看全屏照片时会隐藏navigation bar和其他界面元素。 如果你实现这类行为,让用户用简单的手势恢复导航栏,如点击。

替代

在不需要导航时使用toolbar,或者需要多个控件来管理内容。


导航栏标题(Navigation Bar Titles)

考虑在navigation bar中显示当前视图的标题。 在大多数情况下,标题可以帮助人们了解他们正在查看的内容。 但是,如果导航栏的标题看起来多余,则可以将标题处留空。 例如,由于第一行内容提供了所需的所有上下文,因此Notes不会为当前的笔记加标题。

左:标准标题    右:大标题

如果需要额外强调上下文,请使用大标题。 在某些app中,大标题的大号加粗文本可以帮助用户在浏览和搜索时知道自己所在位置。 例如,在 tabbed layout中,大型标题可以帮助看清当前活动tab,并在用户滚动到顶部时通知用户。 

手机使用这种方法,而音乐使用大标题来区分内容区域,如专辑,艺术家,播放列表和广播。 当用户开始滚动内容时,大标题转换为标准标题。 大标题在所有应用程序中没有意义,永远不会与内容竞争。 

尽管闹钟app具有tabbed layout,但大标题并不是必要的,因为每个tab都具有明显的、可识别的布局方式。 


导航栏控件(Navigation Bar Controls)

Navigation Bar Controls

·避免拥有太多控件的navigation bar。

通常,navigation bar不应包含除了:1、视图的当前标题;2、后退按钮;3、管理视图内容的一个控件 之外的东西。如果在navigation bar中使用segmented control,则该栏不应包含标题或segmented control以外的任何控件。

·使用标准的后退按钮。人们知道标准的后退按钮可以让他们通过层级的信息返回。但是,如果您实现了自定义后退按钮,请确保它仍然看起来像后退按钮,直观,与剩下的页面交互方式保持匹配,并始终贯穿于您的应用程序中。如果您使用自定义图像替换系统提供的后退按钮V形图像,则也需要提供自定义遮罩图像。 iOS使用此遮罩在转场时为按钮标题设置动画效果。

·不要包含多段面包屑路径。后退按钮总是执行一个动作——返回到前一个屏幕。如果您认为没有到达当前屏幕的完整路径,人们可能会迷路,那么请考虑展开app的层次结构(如使用segmented control)。

·给文本标题按钮足够的空间。如果navigation bar包含多个文本按钮,点击时这些按钮的可能会一起运行,从而使按钮无法区分。可以在按钮之间插入固定空间项来添加分隔。

·考虑在导航栏中使用segmented control来压平应用程序的信息层次结构。如果您在navigation bar中使用segmented control,请仅在层次结构的顶层执行此操作,并确保在低层级界面使用精确的后退按钮标题。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018.05.10 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 导航栏(Navigation Bars)
    • 导航栏标题(Navigation Bar Titles)
      • 导航栏控件(Navigation Bar Controls)
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档