导航栏的一些知识点归纳

2020-03-04  本文已影响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 只在规范中提及到了分页控件。苹果设计师考虑到部分场景在当前页面中还存在信息层级结构划分,此时建议可以在导航栏中使用分段控件。

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

上一篇下一篇

猜你喜欢

热点阅读