美文网首页
《App导航之抽屉式导航》案例及分析

《App导航之抽屉式导航》案例及分析

作者: 汪蛋没有脚啊 | 来源:发表于2016-11-25 17:26 被阅读0次

抽屉式导航

1.Munchery(iPhone版)

Munchery首页 munchery抽屉页

导航入口采用普遍使用的三横线样式,告知用户此处有隐藏的导航;

抽屉按钮点击后,页面右滑,主界面为侧边栏的详细信息,右侧预留部分显示首页,视觉上,抽屉位于首页左边,当用户点击右侧预留部分或抽屉按钮时,回到首页。

2.Fast Company(iPhone版)

Fast company首页 Fast company抽屉页

和Munchery类似,同样采用左上角抽屉式导航,不一样的是,导航页展开时,Fast company将首页显示区域扩大;

抽屉展开时,首页可见部分为页面右侧,同时,右侧页在透明度上进行了调整,视觉上抽屉位于首页上方;

点击右侧含有灰度蒙层时,回到首页。

3.Elevate(iPhone版)

Elevate首页 Elevate抽屉页

抽屉可以有很多样式,Elevate将打开的抽屉设计成了收纳盒,展开时,将首页包裹在内

4.Airbnb(iPhone版)

Airbnb首页 Airbnb抽屉页

温馨提醒,Airbnb的抽屉按钮为四行;

为了保证主界面的清晰简洁,Airbnb将除了搜索外其他的功能入口全都放在抽屉式导航页了;

这造成了设计上,抽屉展开时的页面占比较以上案例多,立体的首页缩略图仅是返回首页的入口(相较传统的”返回”,这样的设计更直观)。

5.Gogobot(iPhone版)

Gogobot首页 Gogobot抽屉页

Gogobot抽屉导航设计的亮点在于,抽屉按钮上显示了未读消息提醒;

对比Airbnb,Gogobot的这个设计值得称赞。

相关文章

  • 《App导航之抽屉式导航》案例及分析

    抽屉式导航 1.Munchery(iPhone版) 导航入口采用普遍使用的三横线样式,告知用户此处有隐藏的导航; ...

  • 手机界面导航设计详解之抽屉式导航

    接下来,我将结合抽屉导航和具体的应用来进行实例分析。 1.抽屉式导航的特点 抽屉式导航将部分信息内容进行隐藏,突出...

  • 使用SystemBarTint搭配NavigationView在

    勇敢的少年啊,快来看看什么叫做抽屉导航之美吧~ 前言 在Android中,很多App的主界面都使用了抽屉式导航,比...

  • App导航设计模式

    1.抽屉式导航 抽屉式导航就是当前比较流行的导航样式,是应用选择比较多的一种导航方式,这种导航的核心思想就是隐藏,...

  • DrawerLayout笔记

    一. 什么是DrawerLayout(抽屉式导航栏) 抽屉式导航栏是一个面板,它将应用的主要导航选项显示在屏幕左边...

  • 标签式导航的设计思路

    导航分很多类别,如标签导航、抽屉式导航、九宫格导航、混合组合导航、列表式导航、Tab导航、平铺导航等等。之前在我的...

  • iOS应用导航模式

    IOS导航模式: 标签导航模式、桌面式模式、抽屉式导航、列表式导航、 点聚式导航、下拉菜单式导航、轮播导航 接下来...

  • 移动应用设计细节分析——导航

    移动设计模式整理分析——导航篇 产品导航设计优缺点分析 8种移动APP导航设计模式大对比 1.扁平式导航 1.1 ...

  • Jetpack学习-6-Navigation

    Navigation是什么 导航,用户导航、进入和退出应用不同内容片段交互。按钮点击、应用栏、抽屉式导航栏等模式。...

  • MaterialDesign(二),DrawerLayout使用

    什么是 DrawerLayout DrawerLayout(抽屉式导航栏)是一个面板,它将应用的主要导航选项显示在...

网友评论

      本文标题:《App导航之抽屉式导航》案例及分析

      本文链接:https://www.haomeiwen.com/subject/bwhwpttx.html