瑶瑶

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

1.前期没规范,样式不断的被多次创造,设计师做起来工作量太大,没有前期打磨,导致出现各种设计问题。

2.前期制作规范花费时间太多,同时会纠结iOS和Android到底做两套,还是做一套的问题。做两套会导致开发成本和设计成本增加,Android规范有些并不太适合做商业化产品。只做一套(iOS)对Android开发来说工作量变大,同时导致Android端的设计品质下降。有没有更好的折中方案。

我这套系列文章可以解决上面两种问题。并做到最优解。这也是我要做这套系列规范的目的。

所以这套规范,可以给予其他设计团队迅速搭建属于自己产品的设计规范,直接复用,减少设计团队走弯路。整个系列文章完结后,会附上规范文档,给予大家阅读和使用。

本套移动端设计规范一共包含8大类,分别为:UI栏类、导航类、引导类、加载类、缺省类、提示类、操作类和表单类。

本篇讲解的是UI栏类,UI栏类一共包含5种,分别为:状态栏 (Status Bar)、导航栏(Navigation Bar)、工具栏(Tool Bar)、搜索栏(Search Bar)和范围栏(Scope Bar)。

 

状态栏 (Status Bar)

定义:

状态栏出现在屏幕的最顶部,并显示有关设备当前状态的有用信息,如时间,蜂窝数据,⽹络状态和电池电量。状态栏中显示的实际信息因设备和系统配置⽽异。

产品的特定在特定的情况下,为了呈现沉浸式的用户体验,会暂时隐藏状态栏。

 

用途:

告知用户当前设备的重要的状态信息

 

使用说明

1.除了背景色为黑白色,也能自定义和导航栏颜色保持一致。

2.产品在特定界面可隐藏状态栏,不建议所有页面都隐藏状态栏。

 

 导航栏(Navigation Bar)

定义:

导航栏能够实现在应用不同信息层级结构间的导航,也可用于管理当前屏幕内容。

导航栏出现在屏幕顶部的状态栏下方,并可以通过⼀系列分层屏幕进行导航。当显示新屏幕时,通常标有前⼀屏幕的后退按钮出现在栏的左侧。有时,导航栏的右侧包含⼀个控件,如编辑或完成按钮,⽤于管理活动视图中的内容。

 

用途:

1.通过导航栏上的标题,告知用户当前界面的主要信息内容。

2.提供返回上一页或者关闭的作用。

3.提供快捷功能入口或者对当前页面的管理操作。

 

使用说明

1.导航栏的标题文字不易超行,当无标题时,可以将标题空出来。

2.右侧操作按钮不超过2个,超过两个,可收到更多功能中。

 

工具栏(Tool Bar)

定义:

⼯具栏出现在App 屏幕底部,包含了执行当前视图或包含内容相关操作的按钮。⼯具栏是半透明的,也可能有背景⾊,并且通常在⽤户不太需要它们时被隐藏。

 

用途:

1.当前页面需要操作时

2.重要主操作使用

 

使用说明:

存在多种操作,一般2-5个,超过5个通过更多聚合。

 

搜索栏(Search Bar)

定义:

用户通过输入的关键词,搜索到用户想要的信息。

 

用途:

当应用内包含大量的信息的时候,用户通过搜索快速地定位到特定的内容。

 

使用说明:

1.对于搜索的规范,iOS 官方给出的是隐藏搜索栏,用户通过下拉展示搜索栏。Android是通过搜索图标控件引导用户点击出现搜索栏。

2.搜索栏中可置入语音,通过语音进行搜索。

 

范围栏(Scope Bar)

定义:

范围栏只有在与搜索栏一起时才会出现,它让用户可以进一步筛选搜索结果的范围。

当用户想在明确的分类范围内进行搜索时,使用范围栏则非常有效。然而,更好的选择是优化您的搜索结果,让用户不需要使用范围栏对搜索结果进行筛选,便可以找到他们所需要的内容。

 

用途:

将搜索结果过多,用户找到想要的信息效率很低时,通过范围栏进行细分,方便用户在类目里面快速的找到想要的结果

 

使用说明:

当类目数量较多时,且一行宽度不够排列时,可通过左右滑动范围栏里面的类目可查看更多的类目。

 

原文地址:Echo的设计笔记(公众号)

作者:Echo

转载请注明:学UI网 » 移动端设计规范 — UI栏类

登录收藏
 
你可能喜欢的:
你必须知道的5个搜索入口的位置你必须知道的5个搜索入口的位置
无限式体验无限式体验
写给前端的弹窗使用指南!(下)写给前端的弹窗使用指南!(下)
iOS 13 隐秘的细节④:系统组件·下iOS 13 隐秘的细节④:系统组件·下
Material Design OwlMaterial Design Owl
卡片式设计流行的秘密 — 看完这15个案例你就懂了卡片式设计流行的秘密 — 看完这15个案例你就懂了
为什么常见的垂直列表,你却总设计不好为什么常见的垂直列表,你却总设计不好
QQ极简与夜间模式设计QQ极简与夜间模式设计
iOS 13 隐秘的细节③:原生APP的细节变化·下iOS 13 隐秘的细节③:原生APP的细节变化·下
Material Design FortnightlyMaterial Design Fortnightly