美文网首页
导航栏的一些知识点归纳

导航栏的一些知识点归纳

作者: 沁雪冰心 | 来源:发表于2020-03-04 11:40 被阅读0次

总结来源:微信公众号“UCD耍家”

1、经常说的导航栏究竟是指哪里

ios中 导航栏是指在应用程序顶部,状态栏下方的区域,层级高于页面内容

安卓中 Material Design与其定义相同 但命名为应用栏(Top App Bar)

导航栏用于阐述当前的屏幕状态 起到连接父子级页面层次结构,而标签栏是架构了多个屏幕之间的 平级页面内容切换。

2、导航栏标题

现今IOS和MD都定义了两种导航规范,常规标题和大标题

常规标题——指定高度为88px  字号大多在(34px-38px)居中放置

大标题——指定高度增加到192px 保留高度为88px ios定义的标准大标题字号为68px 但中文由于没有英文大小写的层次结构 因此会适当缩小在56px-64px

2.1、大标题风格改进

大标题页面留白更多 呼吸感更强 大气现代 格调更高 能够帮助用户快速确认当前所处位置。采用统一的大标题,让页面布局风格快速统一。但缺点也显而易见,因为增加了导航栏的高度,导致屏幕利用率降低,一些通过广告变现或更加注重一屏内内容呈现的应用便中和了常规导航与大标题导航的优缺点,进行了风格改进。

2.2 在界面中怎么选择大小标题

苹果的设计师在 Apple Music 中实验并验证了一条结论——在内容非常丰富、层级结构较深的产品当中,大标题能够帮用户快速确认自己的位置。

作者理解的适合使用大标题风格的产品一定是:突出内容呈现而不是功能繁琐的;产品定位更偏向于现代或文艺艺术的;需要快速统一界面风格的。而层级结构需不需要很深,这并不一定,我反而觉得功能越单一、产品体量级越轻的应用,越适合大标题。

3 导航按钮盒内容控件按钮

iOS 规定导航按钮位置仅能用于放置返回按钮,可以添加一个层级的面包屑,帮助用户有效地明确当前页面层级,导航栏和工具栏彻底分开;Material Design 中,不仅可以放置返回按钮,还另有作用,菜单图标-用于打开导航抽屉或者关闭图标-关闭工具栏。

实际项目中为适配双平台 规范不分家-溢出菜单普及

5、其他控件

关于其他控件,iOS 只在规范中提及到了分页控件。苹果设计师考虑到部分场景在当前页面中还存在信息层级结构划分,此时建议可以在导航栏中使用分段控件。

但国内的应用程序早已将导航栏容器的作用发挥到极致,基于导航栏层级始终高于内容区域的特性,我们通常可以将分段控件、分页标签、搜索栏等等用户可能随时使用的工具放在导航栏中。

相关文章

  • 导航栏的一些知识点归纳

    总结来源:微信公众号“UCD耍家” 1、经常说的导航栏究竟是指哪里 ios中 导航栏是指在应用程序顶部,状态栏下方...

  • 迷之“导航栏”

    对于iOS 开发者来说,导航栏确实是一个让人困惑的知识点。比如设置导航栏透明效果,透明导航栏与非透明导航栏之间的跳...

  • iOS自定义导航栏-导航栏联动(二)

    iOS自定义导航栏-导航栏联动(一)iOS自定义导航栏-导航栏联动(二) 前言 最近通过对一些APP的观察发现,现...

  • iOS自定义导航栏-导航栏联动(一)

    iOS自定义导航栏-导航栏联动(一)iOS自定义导航栏-导航栏联动(二) 前言 最近通过对一些APP的观察发现,现...

  • 迷之“导航栏”

    对于初学者来说,IOS中的导航栏确实是一个让人困惑的知识点,我开始也是在项目预定的框架下去设置导航栏的一些属性,直...

  • Bootstrap-响应式导航

    响应式导航的创建 主要代码 知识点 .navbar-inverse 倒置的导航栏 .navbar-fixed-t...

  • iOS常用小知识记录-持续更新

    漂亮的妹子来镇贴~哈哈!话不多说,知识点走起!!! 1.去掉导航栏下面的黑线 方法1(会影响导航栏的translu...

  • iOS导航栏渐变NavigationController

    工作中的一些代码记录 导航栏颜色渐变示例: 导航栏顶部隐藏和显示: 导航栏上拉、下拉 隐藏和显示: navigat...

  • 如何优雅的处理导航栏的显示与隐藏

    问题所在 现在很多App为了追求美观、简洁,其中的一些页面都设计为导航栏隐藏的效果,在有导航栏和没导航栏的页面来回...

  • JS实现侧边栏显示隐藏

    网页中侧边栏是一个重要的排版位置,尤其是侧边导航栏用的最多。在一些窄屏的侧边导航栏中,控制侧边导航栏的显示与隐藏可...

网友评论

      本文标题:导航栏的一些知识点归纳

      本文链接:https://www.haomeiwen.com/subject/jokmlhtx.html