APP页面构成---边栏有哪些特点

525 阅读1分钟

基础的APP 页面由栏和内容视图两大部分构成,而栏又由状态栏、导航栏和标签栏3部分构成,如下图所示

image.png

状态栏:位于页面顶部,高为 40 像素,用来显示通知、时间、信号和电量等常规信息。无论是iOS 系统还是Android 系统,状态栏一般都是透明的,其中的图标和文字会根据当前页面的颜色更改为白色或黑色,如下图所示。

image.png

image.png

导航栏:位于状态栏下方,高为 88 像素,用于管理屏幕信息,以及页面层级结 构间的导航。导航栏左侧为后退按钮,中间显示当前页面的内容标题,右侧为当前页面的操作按钮。栏内的按钮可以是文字,也可以是图标。

image.png

导航栏添加按钮,可用加号或其他表示可展开的图标代替

标签栏:是 APP 的全局导航,用户可点击此栏中的功能图标快速切换页面。标签栏一般位于页面底部,高为98 像素,栏内图标分为选中和未选中两种状态,通常使用剪影图标加文字描述的方式表示。 栏内图标以3 ~ 5 个为宜,且文字要通俗易懂,精炼概括,尽量不超过4 个汉字宽度,如下图所示。

image.png