移动端设计规范—UI栏类

发布时间:2024-06-25 20:49:09 浏览量:217次

好多项目从0到1做一个APP,会遇到下面两个问题:

1.前期没规范,样式不断被重复创造,设计师工作量过大,导致各种设计问题。

2.前期制作规范花费太多时间,iOS和Android做两套会增加成本,不切实际;只做一套(iOS)对Android开发来说工作量变大,设计品质下降。有没有更好的折中方案。

这套系列可以解决上述问题,做到最优解,提高设计效率。

本篇讲解的是UI栏类,包括状态栏、导航栏、工具栏、搜索栏和范围栏。

UI栏类一共包含5种,分别为状态栏、导航栏、工具栏、搜索栏和范围栏。

状态栏 (Status Bar)

定义:状态栏出现在屏幕最顶部,显示设备当前状态信息,如时间、网络状态、电池电量。

用途:告知用户设备的重要状态信息。

使用说明:背景色可自定义,与导航栏颜色保持一致;特定情况下可隐藏状态栏。

导航栏(Navigation Bar)

定义:用于应用信息导航和屏幕内容管理。

用途:告知当前界面信息,提供返回或关闭操作,快捷功能入口。

使用说明:标题文字不宜过长;右侧操作按钮不超过2个。

工具栏(Tool Bar)

定义:出现在屏幕底部,包含执行相关操作的按钮,是半透明的,通常在不需要时隐藏。

用途:当前页面操作和重要主操作。

使用说明:操作不宜过多,一般2-5个,超过通过更多按钮。

搜索栏(Search Bar)

用户通过输入关键词搜索信息。

用途:大量信息下,快速定位内容。

使用说明:iOS隐藏搜索栏,下拉显示;Android通过搜索图标展开搜索栏。

范围栏(Scope Bar)

定义:结合搜索栏,让用户进一步筛选搜索结果。

用途:在分类搜索时提高用户查找效率。

使用说明:类目较多时,左右滑动查看更多类目。

觉得有用?点击咨询获取更多移动应用设计规范:点击咨询

热门课程推荐

热门资讯

请绑定手机号

x

同学您好!

您已成功报名0元试学活动,老师会在第一时间与您取得联系,请保持电话畅通!
确定