UI顶部栏设计总结
本篇文章针对移动端顶部栏设计做一个总结,在这里分享给大家,希望能更好地帮助大家理解这个组件。
移动端顶部栏设计看似简单,其实在做界面时还是有许多细节值得我们注意的。本篇文章针对移动端顶部栏设计做一个总结,在这里分享给大家,希望能更好地帮助大家理解这个组件。
一、移动端顶部栏样式及设计要点
这里将移动端顶部栏分为三种样式,下面我们来一一分析:
常规顶部栏
Tab/分段控件导航栏
大标题顶部栏
1常规顶部栏
常规顶部栏固定在状态栏下, 主要由操作图标、标题、搜索框等组成,大致分成两种:
1.简单标题顶部栏 2.搜索框顶部栏
简单标题顶部栏
简单标题顶部栏主要由操作图标与标题组成,如下图:
该类型的顶部栏标题大小一般是36px,操作图标的设计尺寸一般是40px左右,切图尺寸一般是48px,背景色多采用白色或APP主题色。
a.去标题化
一些产品中的一级界面删除了顶部栏中的标题。 为什么删除呢,因为标题的功能就是告诉用户当前界面的名称,而用户从底部栏的选中状态也能知道自己当前在哪个界面。 这个功能跟底部栏菜单有些重叠,我们必须在有限的空间中展示足够多的功能和内容,所以删除标题就是一个不错的方法。
b.可点击
闲鱼和百度翻译界面中顶部栏可点击操作, 一款产品随着不断迭代功能会越来越多,空间越来越紧张。在这个前提下,装饰性元素转变成功能性元素是一个不错的方法。
搜索框顶部栏
搜索框顶部栏是在简单标题顶部栏的基础上,去除标题文字增加一个搜索框。如下图:
搜索框的宽度随顶部栏中操作图标的多少决定,搜索框高度多采用56~60px,搜索框里的图标设计尺寸多采用40px左右(为了减少切图尺寸,同样可采用48px的切图尺寸)。
在摆放图标时,距离搜索框的间距与边距相等看起来会更舒适。如下图所示:
2.Tab/分段控件导航栏
Tab顶部导航栏与分段控件顶部导航栏,都是有多个标题可切换的导航栏样式,分为选中与未选中2中状态。Tab顶部导航栏的可选项可以左右滑动切换,选中样式也比较丰富,常见的有底部加上小短线、字体颜色变化、字号放大等(组合使用效果更突出),分段控件顶部导航栏一般有2~5个可选项,不能左右滑动。如下图:
3大标题导航栏
自ios11发布后,大标题风格的导航栏便开始流行起来,尤其是飞机稿总能看见大标题顶部栏的影子。普通的顶部栏在二倍图下高度只有88px,标题字号一般为36px,而大标题顶部栏在二倍图下高度足足有192px,标题字号为68px。如下图:
使用大标题顶部栏,你需要考虑以下两点:
1.是否需要帮助用户快速确认所处位置(多为产品页面重复性多,或是功能单一的APP,以浏览页面信息为主);
2.APP整体风格是否偏向简约大气。
适合使用大标题顶部栏的产品
1.艺术相关或阅读类APP,这类产品本身自带艺术感或文艺气息,当大标题结合特殊字体,或杂志风版式,就能瞬间提高产品调性。
2.现代简约型APP,通过大标题+留白表现现代感。
二、背景色
1白色
使用白色顶部栏让用户的注意力聚焦于内容本身,帮助用户更快的挑选出自己感兴趣的内容。
2品牌色
用品牌色做背景的一大好处就是对顶部栏进行了品牌化处理,用户一看到就知道这是什么产品。
3透明
透明背景常用在电商、旅游等需要烘托氛围的界面中,有些也会放在顶部通栏Banner上,节省空间的同时减少割裂感, 在视觉上看起来更为统一。如下图:
三、总结
顶部栏样式主要分为
1.常规顶部栏 (简单标题顶部栏、搜索框顶部栏) 2.Tab/分段控件导航栏 3·大标题顶部栏
顶部栏背景处理:白色、品牌色、透明