常见顶部导航栏样式的设计技巧有哪些?四款导航栏随你选

Post 11 of 903

顶部导航栏,无论在APP设计还是网页设计,都是出镜率极高,且最重要的组件之一。看似简单的顶部导航栏,其实在设计的时候需要我们注意很多细节,下面香港网页制作公司就为大家汇总常见顶部导航栏样式的设计技巧,希望能帮助大家更容易设计导航栏这个组件。

常见顶部导航栏样式的设计技巧有哪些?

※ 常规导航栏

常规导航栏是大多数APP设计和网页设计都会使用顶部导航栏样式,其主要有操作图标、标题、搜索框、背景等组成,其种类大致分成以下三种:

1. 简单标题导航栏

 

常见顶部导航栏样式的设计技巧有哪些?四款导航栏随你选

这种导航栏常见于二级详情界面或导航简单的以及界面,主要由操作图片与标题组成。简单标题导航栏的标题大小一般是36px,操作图标的设计大小一般是40px,切图大小一般是48px,背景多以白色或APP主题色为主。很多APP设计为了保证整体界面干净整齐,会特意去除导航栏底部的分割线。

2. 搜索框导航栏

 

常见顶部导航栏样式的设计技巧有哪些?四款导航栏随你选

搜索框导航栏是在简单标题导航栏的基础上,增加搜索框(大多数会去除导航标题)。搜索框的宽度随导航栏中操作图标的多少来决定,高度多采用56-60px,图标多采用32px或48px。在摆放图标时,多采用左右间距等分,距离搜索框的间距与边距相等,这样看起来会更加舒适。

3. Tab/分段控件导航栏

 

常见顶部导航栏样式的设计技巧有哪些?四款导航栏随你选

这两种导航栏都是顶部有多个标题切换的导航栏样式,一般分为选中标题与未选中标题。分段控件顶部导航栏一般有2-5个可选项,且不能左右滑动;Tab左右切换顶部导航栏的可选项可以扩展很多,并且可以左右滑动切换,选中样式也比较丰富。

※ 通栏导航栏

 

常见顶部导航栏样式的设计技巧有哪些?四款导航栏随你选

通栏导航栏看似与常规导航栏没有太大区别,其最大的不同就是,通栏导航栏的背景层一般与下方的模块打通,在某程度上节约了界面空间,在视觉上也比较统一。

通栏导航栏多用于电商、旅游等界面复杂或需要烘托氛围的界面中,也会放在顶部通栏Banner上,节省空间同时减少割裂感。

 

常见顶部导航栏样式的设计技巧有哪些?四款导航栏随你选

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

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

2. 纯色或渐变背景:常用于卡片风格的界面;

3. 黑色透明渐变蒙层:采用一层渐变蒙层,保障导航栏文字的可识别性。

※ 大标题导航栏

 

常见顶部导航栏样式的设计技巧有哪些?四款导航栏随你选

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

由于大标题导航栏所占的空间比较大,因此并不是所有APP都适合使用大标题导航栏,也不是整个APP或网站都适合使用。

 

常见顶部导航栏样式的设计技巧有哪些?四款导航栏随你选

有些APP使用大标题导航栏时,会将其设计成:使用中界面向上滑动切换成正常状态或直接隐去导航栏,便于内容的查看。也有APP会在常规88px高度下,放大字号,隐去分割线,使标题看起来更大。

APP是否能使用大标题导航栏,设计师需要考虑一下两点:

① 导航栏是否帮助用户快速确认所处位置;

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

大标题导航栏虽然给人高逼格的感觉,但由于其所占的空间较大,一旦网站内容太多,就会显得界面很凌乱,没有重点,因此界面复杂的APP或网站都很少会用上。

※ 小程序导航栏

 

常见顶部导航栏样式的设计技巧有哪些?四款导航栏随你选

Wechat中小程序导航栏的顶部右上方有一个不可去除且无法编辑的Titlebar按钮,从APP转换到小程序时,设计师要注意调整APP的顶部导航栏位置和搜索框大小,避免被Titlebar按钮遮挡。

顶部导航栏,往往是用户进入APP或网站时最先看到的地方,同时也是决定用户对产品第一印象的重要部件,其重要性不言而喻。香港网页制作公司提醒,顶部导航栏样式较多且都有其独有的优缺点,设计师在使用时一定要考虑产品适合哪种样式,避免错误选择,影响产品的用户体验。

This article was written by admin

MENU
網頁設計公司