
上QQ阅读APP看书,第一时间看更新
3.1.3 导航栏
导航栏(Navigation Bars)位于状态栏下方,是半透明的(70%)。通常,导航栏的中间是页面标题,左右放置功能图标,其尺寸如图3-77所示。

图3-77 iPhone 6/7/8导航栏(上)与iPhone X导航栏(下)
1. 导航栏标题
标题主要用于标明当前页面,当需要特别强调内容时,建议使用大标题,如图3-78所示。

图3-78 正常标题(左)与大标题(右)
大标题导航栏的尺寸如图3-79所示。大标题由于太占空间,并不能像传统导航一样固定在页面顶部。因此在滑动页面时,大标题会变成正常导航栏的64pt(@2x是128像素)的高度。

图3-79 大标题导航栏的尺寸
2. 导航栏控件
导航栏通常应该只包含视图的当前标题、返回按钮和搜索、添加或更多等一个管理视图内容的控件。如果在导航栏中使用分段控件,则不应包含标题或除分段控件之外的任何控件,如图3-80所示。

图3-80 界面中的导航栏
导航栏控件尺寸如图3-81所示。

图3-81 导航栏控件尺寸