UI设计干货|抽屉导航(汉堡菜单)模板素材

1.简介

抽屉导航也叫汉堡菜单,是将一个导航页(菜单)隐藏在当前页面,点击汉堡按钮,导航页会像抽屉一样从页面左侧或右侧拉出。我们可以通过现实意义的抽屉来理解这种导航:

UI设计干货|抽屉导航(汉堡菜单)模板素材

美丽的汉堡菜单

UI设计干货|抽屉导航(汉堡菜单)模板素材

美丽的汉堡动画菜单

UI设计干货|抽屉导航(汉堡菜单)模板素材

汉堡动画菜单

UI设计干货|抽屉导航(汉堡菜单)模板素材

汉堡菜单动画

1)抽屉作为收纳物品的容器,通常可以存放多个物品(抽屉导航可以放置多个次级功能入口)

2)抽屉通常是关起来的,需要时才打开,因此抽屉内的物品通常不可见(抽屉导航只有点击后才能看到次级功能入口)

 

UI设计干货|抽屉导航(汉堡菜单)模板素材

 

汉堡菜单

2.设计特征

 

1)通常用于放置非常用、非核心、低频但必要的功能。如对设置、个人信息等。

为什么要放置低频、非核心功能?因为抽屉导航具有隐藏的特性,而根据前面的介绍,越是核心、高频的功能,就越应该放在用户容易看到、触及的地方地方。

 

2)使用抽屉导航,通常意味着产品的主要功能集中在主页面当中。

 

3.优缺点

1)优点

占用页面空间较少,使得主页面能承载更多的信息,页面更简洁,用户可以更专注于使用产品的核心功能。

具有较强的次级功能扩展性,可以在抽屉导航页放置较多的功能入口。

 

2)缺点

隐藏式设计,可发现性较差,增加了用户的发现成本。

4.原型设计实现案例

UI设计干货|抽屉导航(汉堡菜单)模板素材

iOS的模式:侧面导航抽屉酒吧

 

UI设计干货|抽屉导航(汉堡菜单)模板素材

应用程序导航抽屉

UI设计干货|抽屉导航(汉堡菜单)模板素材

抽屉式导航栏

更多优秀的导航素材模板到搜UI (SOOUI)  ,通过临摹,一则用来强化技法层

面的能力,二来也能提升初学者的创新能力。

UI设计干货|抽屉导航(汉堡菜单)模板素材

临摹的内容,可以有两方面选择:一种是系统自带的图标,另一种则是行业牛人的设计作品,

捉摸他们的设计风格、思想和细节,都能加深对设计的认识。