移动端顶部栏ui设计分析

顶部栏样式
 

这是我们较常见的顶部栏样式：上面是状态栏status bar，中间是界面标题，左右两侧可能有icon，表示返回、消息提示、设置等操作。
 

但当我查看手机上的应用程序时，并不是所有的应用程序都采用了这种样式。我选择了几个“异类”并逐一分析。
 

去标题化
 

一些产品的一级界面会从顶部栏中删除标题，要知道它为什么被删除，首先*知道它为什么存在。很简单，标题的功能就是告诉用户当前界面的名称。
 

但是，此功能与底部栏菜单重叠，因为用户还可以从底部栏的选择状态知道他们在哪个界面上，正如我刚才所强调的，这是一个一级的界面，如果想去到二级，一旦没有底部栏菜单，仍然需要取回标题。
 

以上是一级界面删标题的条件，接下来我们来谈谈删除标题的动机。一个产品通常有五个一级界面，我们*在有限的空间内显示足够的功能和内容，而删除标题是一个好方法。
 

一级界面也有优先级，“首页”的点击率较高，可以看到很多产品的首页标题都被删除了，但是一级界面的其它标题保留了下来。
 

可点击
 

在我们的日常印象中，除了顶部栏的icon外，其余的都是不可点击的。但我较近遇到一些特例，其中登录/注册界面是主要的，而这里的顶部栏可以看作是登录/注册按钮。
 

一级界面的顶部栏样式为下拉框样式，用户可以单击筛选。
 

另一个常见的例子是当iPhone点击状态栏时，它会回到界面顶部。
 

我认为未来会有越来越多的这种转变，因为随着产品的迭代，会有越来越多的功能，空间也会越来越小，在此前提下，装饰元素向功能元素转化是必然的趋势。
 

极简设计的一个关键概念是去除与用户任务无关的非功能性元素，或者将装饰性元素转换为功能性元素。
 

背景色
 

顶部栏的另一个趋势是透明背景，透明背景与*一个删除标题的背景目的相同，是为了节省界面空间。
 

既然提到了背景，那就谈谈顶部栏的背景颜色。有四种常见的顶栏背景色:企业色、白色、深灰色、透明。
 

企业色背景的一大好处是顶部栏标上了品*，这样用户一看到产品就知道它是什么。tipu顶部的bar直接添加了企业色背景和logo，我不能判断这个设计是好是坏，但我一看到顶部栏就知道是tipu，从品*处理的角度来看，是非常成功的。
 

更多培训课程，学习资讯，课程优惠等学校信息，请进入 惠州园洲平面设计培训惠州石湾PS淘宝美工培训惠州石湾UI培训惠州园洲PhotoShop培训 网站详细了解，免费咨询电话：400-998-6158