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

抽屉式导航

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的这个设计值得称赞。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,294评论 4 61
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 174,539评论 25 709
  • 闲闲潋秋意 懒懒数落星 思卿不识卿 夜夜共月明
    柏浅歌阅读 210评论 5 1
  • 曾经有一个报告说,华尔街那些世界顶级的基金经理,绝大多数都会在早晨冥想,采访他们说到,冥想可以让他们精神饱满,并且...
    刻意练习社区阅读 528评论 8 5
  • 有句话说:你小的时候,别人会看你的家人是谁对待你。你长大了,别人会看你取得的成就对待你的家人。你落魄,自然会被人瞧...
    Yao_3019阅读 130评论 0 0