设为首页收藏本站
联系电话:010-57492360
快捷导航
 
经验:APP顶部导航栏设计样式精华汇总
VIEW CONTENTS

经验:APP顶部导航栏设计样式精华汇总

2019-6-27 03:30| 发布者: 啥米人| 查看: 597| 评论: 20
摘要: 顶部导航栏作为我们使用APP时每天都要遇到的组件,出镜频率极高,看似简单,其实我们在绘制界面的时候还是有许多细节需要注意的。本篇文章主要汇总了常见的四种顶部导航栏设计样式,希望能帮助大家更好地理解导航栏

顶部导航栏作为我们使用APP时每天都要遇到的组件,出镜频率极高,看似简单,其实我们在绘制界面的时候还是有许多细节需要注意的。本篇文章主要汇总了常见的四种顶部导航栏设计样式,希望能帮助大家更好地理解导航栏这个组件。

常规导航栏

所谓常规导航栏,主要是指固定在状态栏下,能清晰分辨出的一行导航栏,主要由操作图标、标题、搜索框、背景等组成,大致分成三种,分别是简单标题导航栏、搜索框导航栏以及Tab/分段控件导航栏。

1.简单标题导航栏

简单标题导航栏常见于二级详情界面或导航简单的一级界面,主要由操作图标与标题组成,如下图:

经验:APP顶部导航栏设计样式精华汇总

以下涉及的尺寸大小都是二倍图下的设计大小

该类型的导航标题的大小一般是36px,操作图标的设计大小一般是40px,切图大小一般是48px,背景色多采用白色或APP主题色。并且很多APP为了保证整体界面的简洁,还会去除导航栏底部分割线,仅采用白色作为背景。

2.搜索框导航栏

常规搜索框导航栏是在简单标题导航栏的基础上,增加了一个搜索框,一般去除了导航标题。如下图:

经验:APP顶部导航栏设计样式精华汇总

搜索框的宽度随导航栏中操作图标的多少决定,搜索框高度多采用56~60px,搜索框中的图标设计尺寸多采用32px(为了减少切图尺寸,也可采用48px的切图大小)。

在摆放图标时,采用左右间距等分,距离搜索框的间距与边距相等,看起来会更舒适。如下图所示:

经验:APP顶部导航栏设计样式精华汇总

3.Tab/分段控件导航栏

Tab左右切换顶部导航栏与分段控件顶部导航栏,都是顶部有多个标题切换的导航栏样式,分为选中标题与未选中标题,如下图:

经验:APP顶部导航栏设计样式精华汇总

分段控件顶部导航栏一般有2~5个可选项,且不能左右滑动。Tab左右切换顶部导航栏的可选项可以扩展很多(如爱奇艺的首页顶部Tab切换有24个可选项),并且可以左右滑动切换,选中样式也比较丰富,常见的有底部加上小短线、字体颜色变化、字号放大等(多个合并使用更能突出选中标题),如下图:

经验:APP顶部导航栏设计样式精华汇总

通栏导航栏

通栏导航栏与常规导航栏的构成基本没有区别,最大的不同是,通栏导航栏的背景层一般与下方的模块打通了,在视觉上看起来更为统一,还能一定程度上节约界面空间。如下图:

经验:APP顶部导航栏设计样式精华汇总

通栏导航栏常用在电商、旅游等界面复杂或是需要烘托氛围的界面中(多伴随着背景处理),有些也会放在顶部通栏Banner上,节省空间的同时减少割裂感。

通栏导航栏的背景处理方式一般有三种:

1.特殊背景处理:与下方模块整体风格保持一致,多采用与下方一致的图片背景;

2.颜色、渐变背景:采用纯色或是渐变背景,常见于卡片风格的界面;

3.黑色透明渐变蒙层:采用一层渐变蒙层,常见于图片Banner上,保证导航栏文字的可识别性。

经验:APP顶部导航栏设计样式精华汇总

大标题导航栏

自ios11发布后,大标题风格的导航栏便开始流行起来,尤其是飞机稿总能看见大标题导航栏的影子。普通的导航栏在二倍图下高度只有88px,标题字号为36px,而大标题导航栏在二倍图下高度足足有192px,标题字号为68px。

经验:APP顶部导航栏设计样式精华汇总

图片源自网络

但并不是所有APP都适合使用大标题导航栏,并且即便使用大标题导航栏,整个APP中也不会全部使用,使用中界面向上滑动也会切换成正常状态的导航栏或直接隐去导航栏,便于内容的查看。

有些APP也会折中使用,在常规88PX(二倍图)导航栏高度下,放大字号,隐去分割线,使标题看起来更大。

经验:APP顶部导航栏设计样式精华汇总

使用大标题导航栏,你需要考虑以下两点:

1.是否需要帮助用户快速确认所处位置;

2.APP整体风格是否偏向简约大气。

大标题导航栏总给人一种高逼格的感觉,这也是为什么飞机稿喜欢使用大标题,但却没见国内的电商APP使用。

小程序导航栏

微信的小程序导航栏,在顶部右上方有一个不可去除也无法编辑的Titlebar按钮,微信配置了一深一浅两种风格。

从APP转换到小程序时,要注意调整APP的顶部导航栏的位置以及搜索框的大小,避免被Titlebar遮挡,如下图:

经验:APP顶部导航栏设计样式精华汇总

上图中,豌豆公主的顶部导航栏整体下移,并且减小了搜索框的高度,提高屏幕的利用率。

划重点

· 常规导航栏主要包括简单标题导航栏、搜索框导航栏以及Tab/分段控件导航栏通栏导航栏。

· 通栏导航栏要注意导航背景的处理,常用的有特殊背景处理、颜色渐变背景、黑色透明渐变蒙层。

· 大标题导航栏使界面整体更有逼格,但不是所有APP都适合的,要根据情况合理使用。

· 微信小程序导航栏在顶部右上方有一个不可去除也无法编辑的Titlebar按钮,从APP换到小程序时要注意重新调整导航栏。

原创: 人类君

公众号:海盐社


免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!

鲜花

握手

雷人

路过

鸡蛋
欣欣向荣

转发了

2019-6-27 03:31 引用
孤寂梦境

转发了

2019-6-27 03:31 引用
十大名羞

转发了

2019-6-27 03:31 引用
冰山之颠

转发了

2019-6-27 03:31 引用
猪头哈哈

转发了

2019-6-27 03:31 引用
疯狂爱俊杰

转发了

2019-6-27 03:31 引用
乐乐王子

转发了

2019-6-27 03:31 引用
梦若幽蓝

转发了

2019-6-27 03:31 引用
小丹子

转发了

2019-6-27 03:31 引用
与世隔绝

转发了

2019-6-27 03:31 引用
集贤居

转发了

2019-6-27 03:31 引用
机械人偶

转发了

2019-6-27 03:31 引用
杨新威

转发了

2019-6-27 03:31 引用
江上不语

转发了

2019-6-27 03:31 引用
曾令超

转发了

2019-6-27 03:31 引用
扑通

转发了

2019-6-27 03:31 引用
网信人信

转发了

2019-6-27 03:31 引用
小豆子

转发了

2019-6-27 03:31 引用
时尚小虫

转发了

2019-6-27 03:31 引用
搜客网

转发了

2019-6-27 03:31 引用

Copyright   ©2015-2016  UU艺术留学  Powered by©UU频道留学网  技术支持:艺术生留学机构     ( 京ICP备16022350号 )